/* P27 Design — sitewide fixes (2026-10-02 audit).
   Loaded LAST in <head> on every page (after the page's inline <style>), so
   rules here win over the per-page copies without editing 55 inline blocks.
   tools/sitewide.py adds the <link> and keeps every page's header identical. */

:root{
  /* Text-safe brand shades. Bright teal (#3ad79f) and orange (#ffa737) are
     1.7–1.9:1 on paper/white, so they stay for fills, rules and dark surfaces
     only. These pass WCAG AA as text on paper, white and mint. */
  --p27-teal-text:#137a55;      /* 4.93:1 on #f7f6f2, 5.33:1 on #fff */
  --p27-orange-text:#a35400;    /* 5.08:1 on #f7f6f2 */
  --color-muted:#5f635e;        /* was #6b6f6a (4.3:1 on tinted panels) */
  --color-primary-dim:#137a55;
}

/* ---------- Brand colour as text ---------- */
.mark{ color:var(--p27-teal-text); }
.text-brand{ color:var(--p27-teal-text); }
.text-muted{ color:var(--color-muted); }
.hover\:text-brand:hover{ color:var(--p27-teal-text); }
.req::after{ color:var(--p27-orange-text); }

/* Dark surfaces keep the bright brand colours (10:1 on ink). */
:is(.bg-ink,.ai-flagship,.dark-surface,.hero-photo) :is(.mark,.text-brand),
:is(.bg-ink,.ai-flagship,.dark-surface) .hover\:text-brand:hover{ color:var(--color-primary); }

/* ---------- Focus ring: 3:1 against every light surface ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--color-ink); outline-offset:3px; border-radius:4px;
}
:is(.bg-ink,.ai-flagship,.dark-surface) :focus-visible{ outline-color:var(--color-primary); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- Header (one copy for every page, incl. 404) ---------- */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; background:var(--color-ink); color:var(--color-paper); padding:.6rem 1rem; border-radius:6px; z-index:100; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.mobile-burger{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:var(--color-ink); background:transparent; border:none; border-radius:8px; cursor:pointer; }
@media (min-width:768px){ .mobile-burger{ display:none !important; } }
.mobile-burger:hover{ background:var(--color-line); }
.mobile-burger svg{ width:22px; height:22px; }

/* Desktop dropdowns: open on hover, or with the caret button (keyboard/touch).
   Focus alone no longer opens them, so Tab doesn't walk 17 hidden links. */
.p27-navgroup{ gap:0; }
.p27-ddbtn{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:28px; padding:0; margin-left:2px; border:0; background:transparent; color:var(--color-ink); border-radius:6px; cursor:pointer; }
.p27-ddbtn:hover{ background:var(--color-line); }
.p27-ddbtn .p27-caret{ opacity:.75; font-size:.8rem; line-height:1; }
.p27-navgroup.open .p27-caret{ transform:rotate(180deg); }
.p27-navgroup:focus-within:not(.open):not(:hover)>.p27-dropdown{ opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-50%) translateY(6px); }
.p27-navgroup:focus-within:not(.open):not(:hover) .p27-caret{ transform:none; }
.p27-navgroup.open>.p27-dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.p27-navgroup.esc-closed>.p27-dropdown{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
.p27-dropdown a[aria-current="page"]{ color:var(--p27-teal-text); }

/* Mobile menu: short list, groups expand on tap, CTA always visible. */
.mobile-nav{ border-top:1px solid var(--color-line); background:var(--color-paper); }
.mobile-nav ul{ padding:.5rem 1.25rem 1.25rem; list-style:none; margin:0; }
.mobile-nav li{ padding:0; margin:0; }
.mobile-nav li a{ display:block; padding:.9rem 0; font-family:'Montserrat',system-ui,sans-serif; font-weight:700; font-size:1.05rem; color:var(--color-ink); border-bottom:1px solid var(--color-line); }
.mobile-nav .m-row{ display:flex; align-items:center; border-bottom:1px solid var(--color-line); }
.mobile-nav .m-row>a{ flex:1; border-bottom:0; }
.mobile-nav .m-toggle{ width:44px; height:44px; border:0; background:transparent; color:var(--color-ink); font-size:.8rem; border-radius:8px; cursor:pointer; }
.mobile-nav .m-toggle[aria-expanded="true"] span[aria-hidden]{ display:inline-block; transform:rotate(180deg); }
.mobile-nav .p27-sub{ padding:0 0 .4rem .9rem; }
.mobile-nav .p27-sub a{ font-size:.92rem; font-weight:600; color:var(--color-muted); padding:.6rem 0; }
.mobile-nav li a.btn-mobile{ margin-top:.9rem; background:var(--color-ink); color:var(--color-paper); padding:.95rem 1.35rem; border-radius:999px; text-align:center; border-bottom:none; }
.mobile-nav a[aria-current="page"]{ color:var(--p27-teal-text); }
/* Without JavaScript the burger can't open the menu, so show it expanded. */
html:not(.js) #mobile-nav[hidden], html:not(.js) .mobile-nav .p27-sub[hidden]{ display:block; }
html:not(.js) .mobile-burger, html:not(.js) .m-toggle, html:not(.js) .p27-ddbtn{ display:none !important; }

/* ---------- Footer tap targets (WCAG 2.2 target size, 24px min) ---------- */
footer a{ display:inline-block; min-height:24px; padding-block:2px; }
footer li{ line-height:1.9; }

/* ---------- Breathing room under interior heroes ---------- */
/* Generated service / AI / Orange Park pages: the first body section had no
   top padding, so its heading sat on the hero's bottom border. */
main > section.hero + section{ padding-top:clamp(4rem,8vw,6rem); }

/* ---------- Leave room for the chat button on phones ---------- */
@media (max-width:640px){ body{ padding-bottom:84px; } }

/* ---------- Footer: long email address can't push the page wider ---------- */
footer a{ overflow-wrap:anywhere; }

/* ---------- Header between tablet and small laptop ----------
   Logo + six nav items + CTA need ~1080px. From 768px to 1079px the desktop
   nav overlapped the logo, so use the mobile menu there too. Selectors carry
   `header` so they beat each page's inline `.mobile-burger{display:none!important}`. */
@media (min-width:768px) and (max-width:1079px){
  header nav[aria-label="Primary"]{ display:none !important; }
  header .btn.btn-primary{ display:none !important; }
  header .mobile-burger{ display:inline-flex !important; }
  header .mobile-nav:not([hidden]){ display:block !important; }
}