/* ============================================================================
   chrome.css — the ONE copy of the sitewide chrome styles.
   Served as /assets/chrome.css and linked by every page.

   Owns: the nav bar, the mobile hamburger, the signup form, its inline
   confirmation. Change it here, upload this one file, invalidate — done.
   Page-specific styling stays inline on each page.

   Colour variables: generated pages define --chrome/--ink/--accent in :root;
   every rule here carries a literal fallback so the WordPress-export pages
   (which define nothing) render identically. Dark pages override
   --nav-panel-bg / --nav-panel-rule inline to flip the dropdown.
   ========================================================================= */

.sts-nav{
  position:sticky; top:0; z-index:9999;
  display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px;
  padding:14px 40px; background:var(--chrome,#F7F3E6);
}
.sts-nav .brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.sts-nav .brand img{width:48px; height:48px; display:block;}
.sts-nav .brand span{font-family:"Bobby Jones",sans-serif; font-weight:600; font-size:20px; color:var(--blue,#0097F2);}
.sts-nav-links{order:10; margin-left:auto; display:flex; align-items:center; gap:28px; flex-wrap:wrap;}
.sts-nav-links a{font-size:17px; font-weight:600; color:var(--ink,#282726); text-decoration:none; transition:color .15s ease; white-space:nowrap;}
.sts-nav-links a:hover{color:var(--accent,#DA702C);}
.sts-nav-links a.current{color:var(--accent-deep,#BC5215);}

/* ---- mobile hamburger: free links stay visible, the rest fold ---- */
.sts-nav-toggle{display:none;}
.sts-nav-more{display:contents;}
/* Guard: body is a flex item with min-width:auto on the generated pages, so it
   can refuse to shrink below a wide fixed-width child (archived emails carry
   inline width:425px images). Cheap insurance against mobile overflow. */
html,body,.wrap{min-width:0;}
@media(max-width:640px){
  .sts-nav{padding:12px 20px;}
  .sts-nav-links{gap:18px; position:relative; width:100%; margin-left:0;}
  .sts-nav-links a{font-size:15px;}
  .sts-nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin:-11px -10px -11px auto; padding:0;
    background:none; border:0; cursor:pointer; color:inherit; -webkit-appearance:none;
  }
  .sts-nav-toggle svg{width:22px; height:22px; display:block;}
  .sts-nav-toggle:focus-visible{outline:2px solid var(--ink,#282726); outline-offset:2px; border-radius:4px;}
  .sts-nav-more{
    display:none; position:absolute; top:calc(100% + 12px); right:0; z-index:10000;
    flex-direction:column; align-items:flex-end; gap:16px;
    background:var(--nav-panel-bg,var(--chrome,#F7F3E6));
    border:1px solid var(--nav-panel-rule,rgba(40,39,38,.16));
    border-radius:6px; padding:16px 20px; min-width:168px;
    box-shadow:0 8px 24px rgba(40,39,38,.14);
  }
  .sts-nav-more[data-open="true"]{display:flex;}
}

/* ---- the signup form (homepage hero, closing band, letters, /coaching/) ---- */
.clurb-form{margin:0; display:flex; flex-direction:column; gap:12px; align-items:center;}
.clurb-form .row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
.clurb-form input{
  padding:13px 16px; font:inherit; font-size:16px; width:240px; max-width:100%;
  color:var(--ink,#282726); background:#fff; border:1px solid #e3e3e3; border-radius:4px;
}
.clurb-form input:focus{outline:2px solid var(--accent,#DA702C); outline-offset:1px; border-color:var(--accent,#DA702C);}
/* .cta on the pages is written for an <a>; the form's <button> needs the reset */
.clurb-form .cta{margin-top:6px; cursor:pointer; font:inherit; font-weight:700;
                 font-size:17px; -webkit-appearance:none;}
.form-msg{margin:18px 0 0; font-size:17px; font-weight:600; display:none;}
.form-msg.ok{display:block; color:var(--green,#24837B);}
.form-msg.err{display:block; color:var(--accent-deep,#BC5215);}

/* ---- sticky-footer slack ----
   html,body are a column flex container with min-height:100vh and
   footer{margin-top:auto}, so on a page shorter than the viewport the leftover
   space belongs to BODY and shows its cream background — a stray stripe between
   the last coloured band and the footer. The band directly above the footer
   absorbs that slack instead, so its colour reaches the footer at any window
   height. Covers .closing (homepage, /library/), .moved (interstitials) and
   .join (letters, transparent so growing it is invisible) without naming any of
   them, which is the point: new pages inherit the fix. */
body > section:last-of-type{flex:1 0 auto;}