/* HXHR Base: shared foundation for every page.
   Consolidated 2026-08-15 from nine per-page palettes that had drifted apart.
   Page files must not redefine anything in this file. */

:root{
  --blue:#0B66F3; --blue-dark:#0A50C0;
  --navy:#062B5D; --navy-deep:#04203F;

  /* vertical accents, one per service */
  --green:#2E7A33;  --green-dark:#26642A;  --green-tint:#EFF6EF;  --green-line:#CADDCA;
  --purple:#6B46C1; --purple-dark:#5A38A8; --purple-tint:#F3EDFC; --purple-line:#E0D2F5;
  --teal:#0F7C7C;   --teal-dark:#0C6464;   --teal-tint:#EAF5F5;   --teal-line:#BFDFDF;
  --rust:#A33A28;   --rust-dark:#8A2F20;   --rust-tint:#FBEFEC;   --rust-line:#EFCFC7;

  /* amber is reserved for cautions and against-the-argument tags.
     It is deliberately not used as a vertical accent. */
  --amber:#B45309; --amber-tint:#FEF6EC; --amber-line:#F0D9B8;

  --ink:#12233D; --ink-mid:#4A5B72; --ink-soft:#5C6D82;
  --rule:#E2E9F1; --tint:#F5F8FC;

  --wrap:1180px; --pad:24px;
  --shadow:0 1px 2px rgba(6,43,93,.06), 0 10px 30px rgba(6,43,93,.08);
  --shadow-lift:0 2px 6px rgba(6,43,93,.1), 0 22px 54px rgba(6,43,93,.16);
  
/* ----------------------------------------------------------------- type scale
 * Added 2026-08-17. Audit of the twelve live pages found seventeen distinct
 * font sizes with no two pages sharing a scale, because the theme never
 * defined one and every page invented its own. Seven steps, three weights.
 * Pages must use these variables and must not declare literal px sizes.
 */
--d1:clamp(33px,4.3vw,54px);
--d2:clamp(26px,3.1vw,38px);
--d3:23px;
--d4:18px;
--tx:16px;
--sm:14px;
--xs:12px;
--w-body:400;
--w-mid:600;
--w-hi:800;
--sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

body{
  font-family:var(--sans);
  color:var(--ink);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------
   wpautop defences.
   WordPress injects paragraphs into injected HTML at render time.
   Three distinct failures were observed on the 2026-08-14 build:
     1. blank lines break style blocks          (Registry entry 54)
     2. single newlines produce stray <br>
     3. HTML comments become phantom grid items
   The rules below neutralise 2 and 3 defensively. Authoring
   discipline still comes first; these stop a slip becoming a defect.
   --------------------------------------------------------------- */
p:empty{display:none}

/* Phantom paragraphs are removed by assets/cleanup.js, not by CSS.
   An earlier CSS attempt hid every unclassed <p> inside a layout
   container, which also hid real copy. CSS cannot express "contains
   only whitespace and a comment", so the test belongs in script. */


/* ---------------------------------------------------------------
   Specificity note.
   Page CSS is injected into post_content and therefore loads AFTER
   this stylesheet. A page rule at equal specificity wins on source
   order. Observed 2026-08-15: an old page's `.site-header{z-index:300}`
   overrode this file's `.site-header{z-index:800}` and painted over
   the open dropdown. Structures the theme must own are therefore
   qualified by element (header.site-header, footer.site-footer) so a
   bare class selector in a page cannot outrank them.

   Rebuilt pages must not define: .site-header, .site-footer, .nav,
   .nav-menu, .wrap, or any :root custom property in this file.
   --------------------------------------------------------------- */

/* --------------------------------- layout --------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{--wrap:920px}
.wrap-wide{--wrap:1280px}
img{max-width:100%;height:auto}
*{min-width:0}                    /* min-content overflow guard, entry 55 */

/* --------------------------------- header --------------------------------- */
header.site-header{
  position:sticky;top:0;z-index:800;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.admin-bar header.site-header{top:32px}
.header-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;min-height:92px;padding-block:14px;flex-wrap:nowrap;
}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand-logo{height:54px;width:auto;display:block}

.nav{display:flex;align-items:center;gap:4px}
.nav-item{position:relative}

/* Parent items do not navigate. They label a group and reveal it.
   Rendered as <button> so keyboard and screen readers agree. */
.nav-direct{text-decoration:none}
.nav-parent{
  display:flex;align-items:center;gap:6px;
  font:var(--w-mid) var(--tx)/1 var(--sans);color:var(--ink);
  background:none;border:0;cursor:pointer;
  padding:12px 14px;border-radius:8px;white-space:nowrap;
}
.nav-parent:hover,.nav-parent[aria-expanded="true"]{background:var(--tint);color:var(--blue)}
.nav-parent .chev{width:10px;height:10px;transition:transform .18s ease}
.nav-parent[aria-expanded="true"] .chev{transform:rotate(180deg)}

.nav-item .nav-menu{
  /* Right-anchored, not left. With left:0 the rightmost dropdown ran past the
     viewport at 1024px and forced horizontal scroll on every page. The nav
     sits on the right of the header, so opening leftward is always safe. */
  position:absolute;z-index:900;top:calc(100% + 6px);right:0;left:auto;min-width:248px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--rule);border-radius:12px;
  box-shadow:var(--shadow-lift);padding:8px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.nav-item.open .nav-menu{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.nav-menu a{
  display:block;padding:10px 12px;border-radius:8px;
  font:var(--w-mid) var(--tx)/1.35 var(--sans);color:var(--ink);text-decoration:none;
}
.nav-menu a:hover{background:var(--tint);color:var(--blue)}
.nav-menu a[aria-current="page"]{color:var(--blue);background:var(--tint);font-weight:var(--w-mid)}

.nav-cta{
  display:inline-flex;align-items:center;
  background:var(--blue);color:#fff;text-decoration:none;
  font:var(--w-mid) var(--tx)/1 var(--sans);padding:13px 20px;border-radius:10px;
  white-space:nowrap;margin-left:8px;
}
.nav-cta:hover{background:var(--blue-dark)}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}

@media(max-width:1000px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--rule);
    padding:10px var(--pad) 20px;box-shadow:var(--shadow);
    max-height:calc(100vh - 92px);overflow-y:auto;
  }
  header.site-header.open .nav{display:flex}
  .nav-toggle{display:block}
  .header-row{min-height:76px}
  /* Mobile logo. Scoped to the header so it outranks .brand-logo
     rather than relying on !important. */
  header.site-header .brand .brand-logo{height:42px}
  .nav-item{width:100%}
  .nav-parent{width:100%;justify-content:space-between;font-size:var(--tx);padding:14px 4px}
  /* On mobile every child is visible. Nothing hides behind a hover. */
  .nav-menu{
    position:static;opacity:1;visibility:visible;pointer-events:auto;
    transform:none;box-shadow:none;border:0;border-left:2px solid var(--rule);
    border-radius:0;margin:0 0 6px 6px;padding:0 0 0 10px;min-width:0;
  }
  .nav-cta{margin:12px 0 0;justify-content:center}
}

/* --------------------------------- footer --------------------------------- */
footer.site-footer{background:var(--navy-deep);color:#C7D5E8;margin-top:0}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:56px 0 40px}
.foot-brand .brand-logo-white{height:44px;width:auto;display:block;margin-bottom:16px}
.foot-brand p{font-size:var(--sm);line-height:1.65;color:#9FB4CE;max-width:34ch}
.foot-col h3{font:var(--w-mid) var(--xs)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:9px}
.foot-col a{color:#C7D5E8;text-decoration:none;font-size:var(--sm)}
.foot-col a:hover{color:#fff;text-decoration:underline}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:20px 0 28px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:var(--sm);color:#8FA6C2;
}
@media(max-width:900px){
  .foot-top{grid-template-columns:1fr 1fr;gap:32px;padding:44px 0 32px}
}
@media(max-width:560px){
  .foot-top{grid-template-columns:1fr;gap:28px}
}

/* ------------------------------ accessibility ----------------------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--blue);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Element defaults bound to the scale. A page overrides colour and spacing,
 * never size: that is what produced seventeen sizes across twelve pages. */
h1{font-size:var(--d1);font-weight:var(--w-hi);line-height:1.08;letter-spacing:-.02em}
h2{font-size:var(--d2);font-weight:var(--w-hi);line-height:1.14;letter-spacing:-.015em}
h3{font-size:var(--d3);font-weight:var(--w-mid);line-height:1.25}
h4{font-size:var(--d4);font-weight:var(--w-mid);line-height:1.3}
p,li,label,input,select,textarea,button,a{font-size:var(--tx);line-height:1.65}
.lede{font-size:var(--d4);line-height:1.6;color:var(--ink-mid)}
.sm{font-size:var(--sm);line-height:1.6;color:var(--ink-soft)}
.xs{font-size:var(--xs);line-height:1.55;color:var(--ink-soft)}