/*
Theme Name: DigiComputing Systems
Theme URI: https://www.digicomputing.com
Author: DigiComputing Systems, Inc.
Author URI: https://www.digicomputing.com
Description: Custom theme for DigiComputing Systems (DCS) — on-site computer repair, networking, and IT services in San Francisco & the Bay Area. Rebuilt from the company's original site with a modern, mobile-friendly design.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dcs-theme
*/

/* ==========================================================================
   1. Variables & Reset
   ========================================================================== */
:root{
  --dcs-navy: #0b2545;
  --dcs-blue-dark: #0d3f76;
  --dcs-blue: #0893CD;
  --dcs-blue-bright: #208FFF;
  --dcs-blue-accent: #2860F5;
  --dcs-red: #e0262f;
  --dcs-ink: #1c2a38;
  --dcs-body: #45505c;
  --dcs-bg: #ffffff;
  --dcs-bg-alt: #f4f7fa;
  --dcs-bg-navy: #0b2545;
  --dcs-border: #e2e8f0;
  --dcs-radius: 10px;
  --dcs-shadow: 0 4px 20px rgba(11, 37, 69, 0.08);
  --dcs-shadow-lg: 0 12px 40px rgba(11, 37, 69, 0.14);
  --dcs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --dcs-maxw: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header instead of hiding under it. */
  scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
body{
  margin: 0;
  font-family: var(--dcs-font);
  color: var(--dcs-body);
  background: var(--dcs-bg);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--dcs-blue-accent); text-decoration: none; }
a:hover{ color: var(--dcs-red); text-decoration: underline; }
h1,h2,h3,h4,h5{ color: var(--dcs-navy); line-height: 1.25; font-weight: 700; margin: 0 0 .6em; }
h1{ font-size: clamp(2rem, 4vw, 2.75rem); }
h2{ font-size: clamp(1.5rem, 3vw, 2rem); }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1.1em; }
ul{ margin: 0 0 1.1em; padding-left: 1.2em; }
.screen-reader-text{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus{
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  width: auto; height: auto; margin: 0; padding: 12px 20px;
  clip: auto; clip-path: none; overflow: visible; white-space: normal;
  background: #fff; color: var(--dcs-navy); font-weight: 700;
  border-radius: 6px; box-shadow: var(--dcs-shadow-lg);
  outline: 2px solid var(--dcs-blue-accent); outline-offset: 2px;
}

/* Visible keyboard focus everywhere, not just on form fields. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--dcs-blue-accent); outline-offset: 2px; border-radius: 4px;
}

.container{
  max-width: var(--dcs-maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.btn{
  display: inline-block;
  background: var(--dcs-blue-accent);
  color: #fff;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none;
}
.btn:hover{ background: var(--dcs-red); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: var(--dcs-shadow); }
.btn-outline{
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.7);
}
.btn-outline:hover{ background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn-block{ display:block; width:100%; text-align:center; }

/* ==========================================================================
   2. Header
   ========================================================================== */
.site-header{
  position: sticky; top: 0; z-index: 500;
  background: #fff;
  border-bottom: 1px solid var(--dcs-border);
}
.header-inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  max-width: var(--dcs-maxw);
  margin: 0 auto;
  gap: 20px;
}
.site-branding{ display: flex; align-items: center; gap: 12px; }
.site-branding img{ height: 46px; width: auto; }
.site-branding .site-title{
  font-size: 1.05rem; font-weight: 800; color: var(--dcs-navy); letter-spacing: .2px;
}
.site-branding .site-title{ text-decoration: none; }
.site-branding .site-title:hover{ text-decoration: none; }
.site-branding .site-title span{ color: var(--dcs-red); }
.header-cta{ display:flex; align-items:center; gap: 14px; }
.header-phone{ font-weight: 700; color: var(--dcs-navy); white-space: nowrap; }
.header-phone a{ color: var(--dcs-navy); }
.header-phone a:hover{ color: var(--dcs-red); }

.menu-toggle{
  display: none;
  background: none; border: none; cursor: pointer;
  width: 42px; height: 42px; position: relative;
}
.menu-toggle span, .menu-toggle::before, .menu-toggle::after{
  content: ""; position: absolute; left: 9px; right: 9px; height: 2px; background: var(--dcs-navy);
}
.menu-toggle::before{ top: 13px; }
.menu-toggle span{ top: 20px; }
.menu-toggle::after{ top: 27px; }

.primary-nav ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.primary-nav li{ position: relative; }
.primary-nav a{
  display: block; padding: 10px 14px; color: var(--dcs-ink); font-weight: 600; border-radius: 6px;
}
.primary-nav > ul > li > a:hover, .primary-nav > ul > li.current-menu-item > a{
  color: var(--dcs-blue-accent); background: var(--dcs-bg-alt); text-decoration: none;
}
.primary-nav ul ul{
  display: none; position: absolute; left: 0; top: 100%; background: #fff;
  box-shadow: var(--dcs-shadow-lg); border-radius: 8px; padding: 8px; min-width: 220px; flex-direction: column;
}
/* :focus-within matters — without it the whole second level of the menu is
   unreachable for anyone navigating by keyboard. */
.primary-nav li:hover > ul,
.primary-nav li:focus-within > ul{ display: flex; }
.primary-nav ul ul a{ padding: 9px 12px; white-space: nowrap; }

@media (max-width: 880px){
  .menu-toggle{ display: block; }
  .header-phone{ display: none; }
  .primary-nav{
    display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff;
    border-top: 1px solid var(--dcs-border); box-shadow: var(--dcs-shadow-lg);
  }
  .primary-nav.is-open{ display: block; }
  .primary-nav{ max-height: calc(100vh - 78px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .primary-nav ul{ flex-direction: column; padding: 10px; }
  .primary-nav ul ul{ position: static; box-shadow: none; display: block; padding-left: 14px; }
  .primary-nav li:hover > ul,
  .primary-nav li:focus-within > ul{ display: block; }
  .site-header{ position: sticky; }
  .header-inner{ position: relative; }
}

/* ==========================================================================
   3. Hero
   ========================================================================== */
.hero{
  background: linear-gradient(120deg, var(--dcs-navy) 0%, var(--dcs-blue-dark) 55%, var(--dcs-blue) 100%);
  color: #fff;
  padding: 76px 0;
}
.hero .container{ display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.hero h1{ color: #fff; margin-bottom: .4em; }
.hero-est{
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .03em;
  padding: 7px 16px; border-radius: 999px; margin-bottom: 18px;
}
.hero p.lead{ font-size: 1.15rem; color: rgba(255,255,255,.88); max-width: 46ch; }
.hero .hero-actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-badge{
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--dcs-radius); padding: 26px; backdrop-filter: blur(2px);
}
.hero-badge ul{ list-style: none; padding: 0; margin: 0; }
.hero-badge li{
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92); font-size: .95rem;
}
.hero-badge li:last-child{ border-bottom: none; }
.hero-badge li::before{ content: "✓"; color: #7fe3a8; font-weight: 800; }
@media (max-width: 880px){ .hero .container{ grid-template-columns: 1fr; } }

/* ==========================================================================
   4. Sections / Cards
   ========================================================================== */
.section{ padding: 64px 0; }
.section-alt{ background: var(--dcs-bg-alt); }
.section-head{ max-width: 720px; margin: 0 auto 40px; text-align: center; }
.eyebrow{
  text-transform: uppercase; letter-spacing: 1.4px; font-size: .78rem; font-weight: 800;
  color: var(--dcs-blue-accent); margin-bottom: 10px; display: block;
}
.grid{ display: grid; gap: 24px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } }

.card{
  background: #fff; border: 1px solid var(--dcs-border); border-radius: var(--dcs-radius);
  padding: 30px; box-shadow: var(--dcs-shadow);
}
.card h3{ margin-bottom: .5em; }
.card .icon{
  width: 48px; height: 48px; border-radius: 12px; background: var(--dcs-bg-alt);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 16px;
}

.feature-list{ list-style: none; padding: 0; margin: 0; }
.feature-list li{
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--dcs-border);
}
.feature-list li:last-child{ border-bottom: none; }
.feature-list li::before{
  content: "→"; color: var(--dcs-blue-accent); font-weight: 800; flex-shrink: 0;
}

.brand-strip{ padding: 34px 0; border-top: 1px solid var(--dcs-border); border-bottom: 1px solid var(--dcs-border); }
.brand-strip .container{ text-align: center; }
.brand-strip p{ margin-bottom: 18px; color: var(--dcs-body); font-weight: 600; }
.brand-pills{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.brand-pills span{
  background: var(--dcs-bg-alt); border: 1px solid var(--dcs-border); padding: 7px 16px;
  border-radius: 999px; font-size: .88rem; color: var(--dcs-ink); font-weight: 600;
}

.cta-banner{
  background: linear-gradient(120deg, var(--dcs-blue-accent), var(--dcs-blue-bright));
  color: #fff; border-radius: var(--dcs-radius); padding: 44px; text-align: center;
}
.cta-banner h2{ color: #fff; }
.cta-banner p{ color: rgba(255,255,255,.92); max-width: 56ch; margin: 0 auto 22px; }

/* ==========================================================================
   5. Page content
   ========================================================================== */
.page-hero{
  background: var(--dcs-bg-alt); border-bottom: 1px solid var(--dcs-border); padding: 44px 0;
}
.page-hero h1{ margin: 0; }
.breadcrumbs{ font-size: .85rem; color: var(--dcs-body); margin-bottom: 10px; }
.breadcrumbs a{ color: var(--dcs-body); }
.entry-content{ padding: 56px 0; }
.entry-content .container{ max-width: 860px; }
.entry-content h2{ margin-top: 1.4em; }
.entry-content ul li{ margin-bottom: .4em; }
/* Scoped to the sidebar layout only. As `.entry-content .container > div` this
   also hit every Group/Columns block the editor produces, stacking margin on
   top of the grid gap. */
.entry-content .container.with-sidebar > div{ margin: 0; }
.license-badge{
  display: inline-block; background: var(--dcs-bg-alt); border: 1px solid var(--dcs-border);
  border-radius: 999px; padding: 6px 16px; font-size: .82rem; font-weight: 700; color: var(--dcs-navy); margin-bottom: 18px;
}

/* add_theme_support( 'align-wide' ) is declared in functions.php — without
   these rules the editor offers Wide/Full and the front end ignores them. */
.entry-content .alignwide{
  width: auto; max-width: calc(var(--dcs-maxw) - 48px);
  margin-left: calc(50% - min(var(--dcs-maxw) - 48px, calc(100vw - 48px)) / 2);
  margin-right: calc(50% - min(var(--dcs-maxw) - 48px, calc(100vw - 48px)) / 2);
}
.entry-content .alignfull{
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.entry-content .alignfull img{ width: 100%; }

/* Core classes WordPress expects a theme to define. */
.alignleft{ float: left; margin: .3em 1.4em 1em 0; }
.alignright{ float: right; margin: .3em 0 1em 1.4em; }
.aligncenter{ display: block; margin-left: auto; margin-right: auto; }
.wp-caption{ max-width: 100%; margin-bottom: 1.2em; }
.wp-caption img{ margin: 0 auto; }
.wp-caption-text, .gallery-caption{
  font-size: .85rem; color: var(--dcs-body); text-align: center; padding-top: 8px; margin: 0;
}
.sticky{ display: block; }
.bypostauthor{ display: block; }

/* Sidebar layout for content+info pages */
.with-sidebar{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: start; }
@media (max-width: 880px){ .with-sidebar{ grid-template-columns: 1fr; } }
.sidebar-card{
  background: var(--dcs-bg-alt); border: 1px solid var(--dcs-border); border-radius: var(--dcs-radius); padding: 26px;
}
.sidebar-card h3{ font-size: 1.05rem; }
.sidebar-card dl{ margin: 0; }
.sidebar-card dt{ font-weight: 700; color: var(--dcs-navy); font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; margin-top: 14px; }
.sidebar-card dt:first-child{ margin-top: 0; }
.sidebar-card dd{ margin: 4px 0 0; }
.sidebar-role{ margin-top: -6px; }
.sidebar-note{ font-size: .85em; color: var(--dcs-body); }
.sidebar-heading-spaced{ margin-top: 24px; }

/* ==========================================================================
   6. Forms
   ========================================================================== */
.dcs-form{ background: #fff; border: 1px solid var(--dcs-border); border-radius: var(--dcs-radius); padding: 30px; box-shadow: var(--dcs-shadow); }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 600px){ .form-row{ grid-template-columns: 1fr; } }
.form-field{ display: flex; flex-direction: column; margin-bottom: 18px; }
.form-field label{ font-weight: 700; color: var(--dcs-navy); margin-bottom: 6px; font-size: .9rem; }
.form-field input,
.form-field select,
.form-field textarea{
  border: 1px solid var(--dcs-border); border-radius: 8px; padding: 11px 13px; font-family: inherit;
  font-size: 1rem; color: var(--dcs-ink); background: #fff;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{ outline: 2px solid var(--dcs-blue-accent); outline-offset: 1px; }
.form-field.required label::after{ content: " *"; color: var(--dcs-red); }
.hp-field{ position: absolute; left: -9999px; top: -9999px; }
.form-notice{
  border-radius: 8px; padding: 14px 18px; margin-bottom: 22px; font-weight: 600;
}
.form-notice.success{ background: #e9f9ef; color: #1c6b3a; border: 1px solid #b8ecc9; }
.form-notice.error{ background: #fdecec; color: #a3271f; border: 1px solid #f6c2be; }
.form-notice:focus{ outline: 2px solid var(--dcs-blue-accent); outline-offset: 3px; }
.form-notice .form-errors{ margin: 10px 0 0; padding-left: 1.2em; font-weight: 400; }

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea{ border-color: var(--dcs-red); border-width: 2px; }
.form-field.has-error label{ color: var(--dcs-red); }
.field-error{ color: #a3271f; font-size: .84rem; font-weight: 600; margin-top: 6px; }

.map-embed{
  margin-top: 34px; border-radius: var(--dcs-radius);
  overflow: hidden; border: 1px solid var(--dcs-border);
}
.pay-card{ max-width: 520px; }
.pay-locked p{ color: var(--dcs-body); }
.post-password-form{ margin: 18px 0 0; }
.post-password-form label{
  display: block; font-weight: 700; color: var(--dcs-navy);
  margin-bottom: 6px; font-size: .9rem;
}
.post-password-form input[type="password"]{
  width: 100%; border: 1px solid var(--dcs-border); border-radius: 8px;
  padding: 11px 13px; font-family: inherit; font-size: 1rem;
  color: var(--dcs-ink); background: #fff; margin-bottom: 14px;
}
.post-password-form input[type="password"]:focus{
  outline: 2px solid var(--dcs-blue-accent); outline-offset: 1px;
}
.post-password-form input[type="submit"]{
  display: block; width: 100%; text-align: center;
  background: var(--dcs-blue-accent); color: #fff; padding: 13px 26px;
  border-radius: 999px; font-weight: 600; border: none; cursor: pointer;
  font-size: 1rem; font-family: inherit;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.post-password-form input[type="submit"]:hover{
  background: var(--dcs-red); transform: translateY(-1px); box-shadow: var(--dcs-shadow);
}
.pay-form{ margin-top: 18px; }
.pay-footnote{ margin-top: 26px; }
.admin-hint{
  margin: 16px 0 0; padding: 14px 16px; font-size: .86rem;
  background: var(--dcs-bg-alt); border: 1px dashed var(--dcs-border);
  border-radius: 8px; color: var(--dcs-body);
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
.site-footer{ background: var(--dcs-navy); color: rgba(255,255,255,.82); padding-top: 54px; }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 32px; padding-bottom: 40px; }
@media (max-width: 880px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.site-footer h4{ color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 16px; }
.site-footer a{ color: rgba(255,255,255,.75); }
.site-footer a:hover{ color: #fff; }
.footer-about p{ color: rgba(255,255,255,.72); font-size: .92rem; }
.footer-links ul{ list-style: none; padding: 0; margin: 0; }
.footer-links li{ margin-bottom: 9px; font-size: .92rem; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.14); padding: 18px 0; font-size: .82rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: rgba(255,255,255,.6);
}

/* ==========================================================================
   8. Misc utility
   ========================================================================== */
.text-center{ text-align: center; }
.mt-0{ margin-top:0; }
.badge-strip{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top: 18px; }
.badge-strip img{ height: 42px; width: auto; background:#fff; border-radius: 6px; padding: 4px 8px; }