/* 19 Computing — site polish. Subtle accents echoed from the blog redesign:
   soft blue glow in heroes, accent bars on card hover, ringed icon chips, framed
   illustrations, card-style FAQs, gentler link underlines and visible focus rings.
   Additive only — layered over tailwind.css, linked on every page by kit/sync_nav.py. */

:root{--p-blue:#2563eb;--p-blue-l:#3b82f6;--p-blue-50:#eff6ff;--p-blue-100:#dbeafe;--p-ink:#0f172a;--p-line:#e2e8f0}

::selection{background:#bfdbfe;color:#0f172a}
:focus-visible{outline:3px solid rgba(59,130,246,.55);outline-offset:3px;border-radius:6px}
html{scroll-padding-top:6.5rem}

/* ── heroes: the blog's soft radial glow ── */
.hero-bg{position:relative;isolation:isolate;overflow:hidden}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60rem 30rem at 85% -10%,rgba(59,130,246,.22),transparent 60%),
             radial-gradient(40rem 20rem at -10% 110%,rgba(59,130,246,.12),transparent 60%)}

/* ── section headings: gradient accent bar ── */
.after-line::after{background:linear-gradient(90deg,#3b82f6,#60a5fa)!important}
.secondary-after-line::after{background:linear-gradient(90deg,#14b8a6,#5eead4)!important}

/* ── service cards: top accent bar + border tint on hover ── */
.service-card{position:relative}
.service-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,#3b82f6,#60a5fa);opacity:0;transition:opacity .3s ease;border-radius:1rem 1rem 0 0}
.service-card:hover::before{opacity:1}
.service-card:hover{border-color:var(--p-blue-100)!important}
.service-card img[src$=".svg"]{transition:transform .5s ease}
.service-card:hover img[src$=".svg"]{transform:scale(1.04)}

/* ── feature cards: accent edge + ringed icon chip ── */
.feature-card{position:relative;transition:all .3s ease}
.feature-card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#3b82f6,#60a5fa);opacity:0;transition:opacity .3s ease}
.feature-card:hover::before{opacity:1}
.feature-card:hover{border-color:var(--p-blue-100)!important;box-shadow:0 14px 28px -10px rgba(37,99,235,.18)}
.feature-icon{box-shadow:inset 0 0 0 1px rgba(59,130,246,.18)}
.stats-card:hover{border-bottom-color:#60a5fa}

/* icon chips (h-12 w-12 rounded-xl tinted squares) get a hairline ring like the blog chips */
.h-12.w-12.rounded-xl,.h-10.w-10.rounded-xl,.h-14.w-14.rounded-xl{box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}

/* ── illustration frames: soft gradient ring ── */
.rounded-2xl.shadow-xl:has(> img[src$=".svg"]),
.rounded-2xl.shadow-card:has(> img[src$=".svg"]){
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#dbeafe,#fff 45%,#e0e7ff) border-box;
  border:1px solid transparent}

/* ── FAQ: card-per-question like the blog ── */
.faq-item{transition:border-color .2s ease,box-shadow .2s ease}
.faq-item:hover{border-color:var(--p-blue-100)!important}
.faq-item[open]{border-color:var(--p-blue-100)!important;box-shadow:0 20px 25px -5px rgba(0,0,0,.06),0 10px 10px -5px rgba(0,0,0,.02)}
.faq-item summary{transition:color .2s ease}
.faq-item summary:hover{color:var(--p-blue)}
.faq-icon{display:inline-flex;align-items:center;justify-content:center;height:1.9rem;width:1.9rem;border-radius:.55rem;background:var(--p-blue-50);font-size:1rem!important}

/* ── buttons: a hairline highlight on the gradient ── */
.btn-primary,.btn-teal,.btn-green{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 6px -1px rgba(37,99,235,.25)}

/* ── links inside body copy: softer underline like the blog prose ── */
main p a:not([class]),main li a:not([class]){text-decoration:underline;text-decoration-color:rgba(37,99,235,.35);
  text-underline-offset:3px;text-decoration-thickness:1.5px;transition:text-decoration-color .2s}
main p a:not([class]):hover,main li a:not([class]):hover{text-decoration-color:currentColor}

/* ── form fields: same focus ring everywhere ── */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:#3b82f6!important;box-shadow:0 0 0 3px rgba(59,130,246,.18)!important}

::-webkit-scrollbar-thumb{background:#94a3b8}
::-webkit-scrollbar-thumb:hover{background:#3b82f6}

@media (prefers-reduced-motion:reduce){.service-card,.service-card img,.feature-card,.btn-primary{transition:none!important}.service-card:hover{transform:none!important}}
html{overflow-x:clip}

/* mobile menu closed until toggled — IT Support's pages never shipped this rule, so its menu sat open over the hero on phones */
#mobile-menu{transition:opacity .3s ease,max-height .3s ease,padding .3s ease;opacity:0;visibility:hidden;max-height:0;overflow:hidden;padding-top:0;padding-bottom:0}
#mobile-menu.show{opacity:1;visibility:visible;max-height:calc(100vh - 4rem);overflow-y:auto;padding-top:1rem;padding-bottom:1.5rem}

/* ═══ design-language rules from the cross-site layout audit (2026-11-13) ═══ */

/* readable measure: body copy never runs past ~75 characters a line; centred copy stays centred */
main section p:not([class*="max-w"]):not(.bl-lede):not(.blog-card p){max-width:75ch}
main .text-center > p, main p.text-center, main .text-center p:not([class*="max-w"]){margin-left:auto;margin-right:auto}
main .grid p, main [class*="rounded"] p, main td p, main li p{max-width:none}

/* one section-heading scale across 19computing + every sister site */
main h2.after-line, main h2.secondary-after-line{font-size:clamp(1.75rem,1.15rem + 2.1vw,2.5rem)!important;line-height:1.2!important;letter-spacing:-.01em}
main h1, main h2, main h3{overflow-wrap:break-word;text-wrap:balance}
main p, main li{text-wrap:pretty}

/* small grey text that failed contrast (2.6:1) → slate-500 (4.8:1) */
main .text-secondary-400:is(.text-xs,.text-sm,.leading-relaxed):not(:is(.hero-bg,[class*="bg-secondary-7"],[class*="bg-secondary-8"],[class*="bg-secondary-9"],[class*="bg-primary-"],[class*="from-secondary"],[class*="bg-gray-9"],[class*="bg-slate-9"],[class*="bg-black"]) *){color:#64748b!important}
main section[class*="bg-primary-6"] .text-primary-100, main section[class*="bg-primary-7"] .text-primary-100{color:#f8fafc!important}

/* everything stays inside its box */
main img, main svg, main video, main iframe{max-width:100%}
main table{max-width:100%}
main :not(.overflow-x-auto) > table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
main a[href^="mailto:"], main a[href^="tel:"]{overflow-wrap:anywhere}

/* breadcrumbs: consistent separators even where the utility spacing was purged */
nav[aria-label="Breadcrumb"] a + span, .text-sm > a + span.mx-2{margin:0 .5rem}

@media (max-width:640px){
  /* rhythm: 96px bands are too tall on a phone */
  main section.py-24, main section.py-20{padding-top:4rem!important;padding-bottom:4rem!important}
  main section.py-16{padding-top:3rem!important;padding-bottom:3rem!important}
  /* minimum readable size */
  main p.text-xs, main span.text-xs:not([class*="rounded"]){font-size:.8125rem!important;line-height:1.55!important}
  /* finger-sized targets for standalone links */
  main a.inline-flex:not([class*="px-"]), main a.mt-auto, main a[class*="hover:underline"]{min-height:44px;display:inline-flex;align-items:center}
  footer li a, footer ul a{display:inline-block;padding:.45rem 0}
  main nav a, main ol > li > a, main ul > li > a, main a[href^="tel:"], main a[href^="mailto:"], main a.blog-tag, main a.blog-topic,
  main .grid a.font-medium:not([class*="rounded"]):not([class*="p-"]), main a[class*="hover:text-primary-7"]:not([class*="rounded"]), main li a[class*="hover:text-primary-6"], section.hero-bg a.transition-colors:not([class*="px-"]){display:inline-flex;align-items:center;min-height:44px}
  section.hero-bg nav, section.hero-bg .text-sm:has(> a + span){row-gap:0}
  main a.transition-colors:not([class*="px-"]):not([class*="rounded"]):not([class*="p-"]), .bl-hero__stats a{display:inline-flex;align-items:center;min-height:44px}
  footer li{margin:0!important}
}

/* numbered "How it works" steps (location hubs) */
.hub-step{position:relative;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.hub-step:hover{transform:translateY(-4px);border-color:var(--p-blue-100)!important;box-shadow:0 20px 25px -5px rgba(0,0,0,.08)}
.hub-step__n{position:absolute;top:1.1rem;right:1.25rem;font-family:Montserrat,sans-serif;font-weight:800;font-size:2rem;line-height:1;color:#dbeafe}

main p.text-xs{line-height:1.55}