/* ============================================================
   Academy of Audio — global theme CSS: resets, layout helpers,
   and the shared nav/footer chrome (ported from the old React
   shared-chrome, including the admin-bar offset + border fixes).
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:clip}
body{font-family:var(--font-text);background:var(--surface-page);color:var(--text-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--red-500);outline-offset:3px;border-radius:2px}

/* layout helpers (centralised — were duplicated per-renderer before) */
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-6)}
.wrap-wide{max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-6)}
.measure{max-width:732px;margin:0 auto;padding:0 var(--space-6)}
.display{font-family:var(--font-display);font-weight:var(--fw-black);letter-spacing:var(--ls-mega);line-height:var(--lh-tight);text-transform:uppercase}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- NAV ---------- */
.aoa-nav{position:sticky;top:0;z-index:100;background:var(--ink-950);border:0;border-bottom:1px solid transparent;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.aoa-nav.scrolled{background:rgba(10,10,11,0.97);border-bottom-color:var(--ink-700)}
.aoa-nav-inner{display:flex;align-items:center;gap:var(--space-5);height:72px;max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-6)}
.aoa-nav-logo{display:flex;align-items:center;flex-shrink:0}
.aoa-nav-logo img{height:30px;display:block}
.aoa-nav-right{display:flex;align-items:center;gap:var(--space-5);margin-left:auto}
.aoa-nav-links{display:flex;gap:var(--space-6);flex-wrap:wrap;list-style:none;margin:0;padding:0}
.aoa-nav-links li{margin:0}
.aoa-nav-links a{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-body-sm);letter-spacing:0.04em;text-transform:uppercase;color:rgba(255,255,255,0.82);white-space:nowrap;transition:color var(--dur-fast) var(--ease-out)}
.aoa-nav-links a:hover,.aoa-nav-links .current-menu-item>a{color:#fff}
.aoa-nav-cta a{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-body-sm);letter-spacing:0.04em;text-transform:uppercase;padding:10px 18px;border-radius:var(--radius-sm);white-space:nowrap;transition:background var(--dur-fast) var(--ease-out)}
.aoa-nav-cta a:hover{background:var(--brand-hover)}
.aoa-nav-burger{all:unset;cursor:pointer;display:none;padding:8px}
.aoa-nav-burger span{display:block;width:22px;height:2px;background:#fff;margin-bottom:5px}
.aoa-nav-burger span:last-child{margin-bottom:0}
.aoa-nav-mobile{display:none;border-top:1px solid var(--ink-700);background:rgba(10,10,11,0.98)}
.aoa-nav.open .aoa-nav-mobile{display:block}
.aoa-nav-mobile ul{list-style:none;margin:0 auto;padding:var(--space-4) var(--space-6);display:flex;flex-direction:column;gap:2px;max-width:var(--container-wide)}
.aoa-nav-mobile a{display:block;padding:12px 0;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-body-sm);letter-spacing:0.04em;text-transform:uppercase;color:rgba(255,255,255,0.82)}
/* WP admin-bar offset (logged-in) */
body.admin-bar .aoa-nav{top:32px}
@media screen and (max-width:782px){body.admin-bar .aoa-nav{top:46px}}
@media (max-width:1000px){.aoa-nav-links{display:none}.aoa-nav-burger{display:inline-block}}

/* ---------- FOOTER ---------- */
.aoa-footer{background:var(--ink-950);color:#fff;border-top:2px solid var(--red-600)}
.aoa-footer-inner{max-width:var(--container-wide);margin:0 auto;padding:var(--space-8) var(--space-6) var(--space-7)}
.aoa-footer-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--space-7);align-items:start}
.aoa-footer-logo{height:34px;margin-bottom:var(--space-4);display:block}
.aoa-footer-tag{max-width:42ch;font-size:var(--fs-body-sm);line-height:var(--lh-relaxed);color:var(--ink-400);margin:0}
.aoa-footer-nav{display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;margin:0;padding:0}
.aoa-footer-nav li{margin:0}
.aoa-footer-nav a{color:var(--ink-300);font-size:var(--fs-body-sm);transition:color var(--dur-fast) var(--ease-out)}
.aoa-footer-nav a:hover{color:#fff}
.aoa-footer-legal{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--ink-800)}
.aoa-footer-legal p{font-size:12px;color:var(--ink-500);line-height:var(--lh-relaxed);max-width:72ch;margin:0}
.aoa-footer-meta{margin-top:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.aoa-footer-meta span{font-family:var(--font-mono);font-size:11px;color:var(--ink-500)}
@media (max-width:760px){.aoa-footer-grid{grid-template-columns:1fr}}

/* ---------- ENQUIRY FORMS (shared across Home / course pages) ---------- */
/* Inputs and grid/flex items carry an intrinsic min-width, so on narrow phones the
   side-by-side name fields + 300px Turnstile widget refuse to shrink and blow past the
   viewport. Let them shrink, collapse the copy|form grid, and fit the Turnstile. */
.cta-grid,.cta-grid > *,.cta-copy,.cta-form,.cta-tabs,.cta-tab{min-width:0;}
.cta-form input,.cta-form textarea,.cta-form select{min-width:0;max-width:100%;box-sizing:border-box;}
.cta-form .cf-turnstile{max-width:100%;}
/* hero split (course pages): let the text column + media card shrink to the viewport
   so the card / stat row can't push the page wider than the screen on mobile */
.hero-split,.hero-split > *,.hero-media{min-width:0;}
@media (max-width:860px){.cta-grid{grid-template-columns:1fr!important;}}
@media (max-width:560px){
  .cta-form{padding:18px!important;}
  .cta-form .cf-turnstile{transform:scale(0.86);transform-origin:top left;}
}

/* Buttons never exceed the viewport on phones — .aoa-btn is white-space:nowrap, so long
   labels ("Request the full curriculum") blow past the screen and get clipped. Let them
   wrap and cap at the container width instead. */
@media (max-width:600px){
  .aoa-btn{max-width:100%;white-space:normal;}
  /* hero/CTA button rows: stack full-width so paired buttons don't fight for space */
  .hero-cta > .aoa-btn,.hero-cta > *{width:100%;}
}