/* Zygon Academy — Coaches 2.0 site header
   Markup: resources/views/partials/site-header.blade.php · Behaviour: public/js/site-header.js
   Everything is scoped under #zygon-site-header so it can't affect the rest of the site.
   Fonts (Oswald, Montserrat) are already loaded by layouts/app.blade.php. */

/* The bar is 72px; page templates offset their content by --navbar-h. */
:root{--navbar-h:72px}

#zygon-site-header,#zygon-site-header *{box-sizing:border-box}
/* Fixed like the previous navbar, so every template's margin-top: var(--navbar-h) still lines up. */
#zygon-site-header{position:fixed;top:0;left:0;right:0;z-index:1000}
#zygon-site-header [hidden]{display:none!important}
/* :where() keeps this reset at id-only specificity, so the .zh-btn / .zh-icon / .zh-burger rules below win. */
#zygon-site-header :where(button.zh-btn,button.zh-icon){all:unset;box-sizing:border-box;cursor:pointer;font-family:inherit}
#zygon-site-header .zh-panel a,#zygon-site-header .zh-logo,#zygon-site-header .zh-pill{color:inherit;text-decoration:none}
#zygon-site-header h3,#zygon-site-header h4,#zygon-site-header p{margin:0}
#zygon-site-header .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#zygon-site-header :focus-visible{outline:3px solid #7fd3f0;outline-offset:3px}

/* ══ SITE HEADER (Coaches 2.0) — black bar, same on every page ══ */
#zygon-site-header .zh{position:relative;z-index:80;background:#000;color:#fff;font-family:Montserrat,'Helvetica Neue',Arial,sans-serif}
#zygon-site-header .zh-in{height:72px;display:flex;align-items:center;gap:30px;max-width:1440px;margin:0 auto;padding:0 32px}
#zygon-site-header .zh-logo{display:flex;align-items:center;font-family:Oswald,'Arial Narrow',sans-serif;font-weight:300;font-size:27px;letter-spacing:1px;color:#fff;white-space:nowrap;flex-shrink:0}
#zygon-site-header .zh-logo img{display:block;height:28px;width:auto}
#zygon-site-header .zh-logo span{color:#7fd3f0}
#zygon-site-header .zh-links{display:flex;align-items:center;gap:4px}
#zygon-site-header .zh-btn{color:#fff;font-size:15px;font-weight:700;height:72px;padding:0 12px;display:flex;align-items:center;gap:7px;border-bottom:2px solid transparent;white-space:nowrap}
#zygon-site-header .zh-btn[aria-expanded="true"],#zygon-site-header .zh-btn.cur{border-bottom-color:#7fd3f0}
#zygon-site-header .zh-btn svg{width:10px;height:10px;transition:transform .2s}
#zygon-site-header .zh-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
#zygon-site-header .zh-badge{font-size:10px;letter-spacing:1px;color:#000;background:#7fd3f0;padding:3px 6px;border-radius:4px}

/* Search — the site's existing search form (.search-box from app.css), placed in the bar */
#zygon-site-header .zh-search{margin-left:6px;list-style:none}
#zygon-site-header .zh-search .search-box{width:230px}

#zygon-site-header .zh-right{margin-left:auto;display:flex;align-items:center;gap:12px}
#zygon-site-header .zh-pill{display:flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:13px;font-weight:600;white-space:nowrap}
#zygon-site-header .zh-pill:hover{border-color:#7fd3f0;color:#fff}
/* Account icon — the site's existing user dropdown (.user-dropdown from app.css) */
#zygon-site-header .user-dropdown .nav-user-icon{width:44px;height:44px;margin:0;border-radius:50%;justify-content:center}
#zygon-site-header .user-dropdown .nav-user-icon:hover{background:rgba(255,255,255,.1)}
#zygon-site-header .zh-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff}
#zygon-site-header .zh-icon:hover{background:rgba(255,255,255,.1)}
#zygon-site-header .zh-burger{display:none}
/* Account links inside the phone menu (≤768px, where app.css hides the dropdown) */
#zygon-site-header .zh-mob{display:none}

#zygon-site-header .zh-panel{position:absolute;left:0;right:0;top:72px;background:#fff;color:#1d1d1f;box-shadow:0 24px 48px rgba(0,0,0,.2);border-top:1px solid #e4e2ea;max-height:calc(100vh - 72px);overflow-y:auto}
#zygon-site-header .zh-scrim{position:fixed;inset:72px 0 0 0;background:rgba(0,0,0,.3);z-index:79}
#zygon-site-header .zh-pin{max-width:1440px;margin:0 auto;padding:28px 64px 36px}
#zygon-site-header .zh-drop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
#zygon-site-header .zh-drop h4{margin:0 0 10px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#5b5b66;font-weight:700}
#zygon-site-header .zh-drop a{display:block;padding:6px 0;font-size:15px;font-weight:500}
/* Third-level WordPress items (e.g. the languages under Accelerated Language Learning) */
#zygon-site-header .zh-drop .zh-sub a{padding:3px 0 3px 14px;font-size:14px;color:#5b5b66}
#zygon-site-header .zh-drop a:hover,#zygon-site-header .zh-help a:hover,#zygon-site-header .zh-side a:hover{color:#2f7fc4}

/* Coaches 2.0 panel */
#zygon-site-header .zh-acct{border-radius:16px;background:#f5f3f8;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
#zygon-site-header .zh-acctl{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
#zygon-site-header .zh-lbl{font-size:12px;letter-spacing:2px;font-weight:700;text-transform:uppercase;color:#5b5b66}
#zygon-site-header .zh-big{font-family:Oswald,sans-serif;font-size:30px;font-weight:500;color:#111;line-height:1.1}
#zygon-site-header .zh-meter{height:6px;border-radius:3px;background:#e0dbe8;margin-top:8px;width:230px}
#zygon-site-header .zh-meter i{display:block;height:6px;border-radius:3px;background:#2f7fc4}
#zygon-site-header .zh-b{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:999px;border:2px solid #000;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;font-family:inherit}
#zygon-site-header .zh-b.dk{background:#000;color:#fff}
#zygon-site-header .zh-b.lt{background:#fff;color:#000}
#zygon-site-header .zh-help{display:grid;grid-template-columns:repeat(2,auto);gap:10px 36px}
#zygon-site-header .zh-help a{font-size:15px;font-weight:600}
#zygon-site-header .zh-cont{margin-top:18px;display:flex;align-items:center;gap:16px;padding:12px 18px;border-radius:14px;border:1px solid #c6b8f7;background:#f8f6ff}
#zygon-site-header .zh-cont b{display:block;font-size:16px}
#zygon-site-header .zh-cont span{display:block;font-size:14px;color:#5b5b66}
#zygon-site-header .zh-row{margin-top:22px;display:flex;gap:32px;align-items:stretch}
#zygon-site-header .zh-elias{width:250px;flex-shrink:0;border-radius:16px;background:#eef5fc;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
#zygon-site-header .zh-elias h3{font-family:Oswald,sans-serif;font-size:22px;font-weight:500;text-transform:uppercase;color:#111;line-height:1.1}
#zygon-site-header .zh-elias p{font-size:14px;color:#3d3d45}
#zygon-site-header .zh-grid{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 12px;align-content:start}
#zygon-site-header .zh-eyebrow{font-size:12px;letter-spacing:3px;font-weight:700;text-transform:uppercase;color:#5b5b66;margin:0 0 8px 10px}
#zygon-site-header .zh-co{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px}
#zygon-site-header .zh-co:hover{background:#f5f3f8}
/* photo orbs: the coach's face inside a glowing ring of their world colour */
#zygon-site-header .zh-orb{position:relative;width:var(--sz,76px);height:var(--sz,76px);border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:radial-gradient(circle,var(--cc) 0%,color-mix(in srgb,var(--cc) 60%,transparent) 62%,transparent 71%);transition:transform .25s}
#zygon-site-header .zh-orb::after{content:"";position:absolute;inset:6%;border-radius:50%;box-shadow:0 0 22px color-mix(in srgb,var(--cc) 70%,transparent);opacity:0;transition:opacity .3s}
#zygon-site-header .zh-face{width:80%;height:80%;border-radius:50%;background:#ddd center/cover;border:3px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,.18)}
#zygon-site-header .zh-co:hover .zh-orb,#zygon-site-header .zh-elias:hover .zh-orb,#zygon-site-header .zh-cont:hover .zh-orb{transform:scale(1.06)}
#zygon-site-header .zh-co:hover .zh-orb::after,#zygon-site-header .zh-elias:hover .zh-orb::after{opacity:1}
#zygon-site-header .zh-co em .ln{display:none}
#zygon-site-header .zh-co:hover em .mt,#zygon-site-header .zh-co:focus-visible em .mt{display:none}
#zygon-site-header .zh-co:hover em .ln,#zygon-site-header .zh-co:focus-visible em .ln{display:inline;font-style:italic;color:#3d3d45}
#zygon-site-header .zh-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#1c9d5a}
#zygon-site-header .zh-live i{width:7px;height:7px;border-radius:50%;background:#1c9d5a;animation:zhPulse 2s infinite}
@keyframes zhPulse{70%{box-shadow:0 0 0 8px rgba(28,157,90,0)}0%{box-shadow:0 0 0 0 rgba(28,157,90,.55)}}
@media (prefers-reduced-motion:reduce){#zygon-site-header .zh-live i{animation:none}}
#zygon-site-header .zh-co b{display:block;font-family:Oswald,sans-serif;font-weight:500;font-size:19px;text-transform:uppercase;color:#111;line-height:1.1}
#zygon-site-header .zh-co small{display:block;font-size:13px;font-weight:700}
#zygon-site-header .zh-co em{display:block;font-size:13px;color:#5b5b66;font-style:normal}
#zygon-site-header .zh-side{width:230px;flex-shrink:0;border-left:1px solid #e4e2ea;padding-left:26px;display:flex;flex-direction:column;gap:14px}
#zygon-site-header .zh-side a{font-size:15px;font-weight:600}
#zygon-site-header .zh-side .zh-eyebrow{margin:0;color:#2f7fc4}

@media (max-width:1100px){#zygon-site-header .zh-side{display:none}#zygon-site-header .zh-search .search-box{width:180px}#zygon-site-header .zh-in{gap:18px}}
@media (max-width:900px){
  #zygon-site-header .zh-in{gap:8px;padding:0 12px}#zygon-site-header .zh-logo{font-size:22px}
  #zygon-site-header .zh-links{display:none}
  #zygon-site-header .zh-links.open{display:flex;position:absolute;top:72px;left:0;right:0;background:#000;flex-direction:column;align-items:stretch;padding:8px 20px 20px;gap:0;max-height:calc(100vh - 72px);overflow-y:auto}
  #zygon-site-header .zh-links.open .zh-btn{height:52px}
  #zygon-site-header .zh-links.open .zh-search{margin:10px 0 0}
  #zygon-site-header .zh-links.open .zh-search .search-box{width:100%}
  #zygon-site-header .zh-burger{display:grid;order:3}#zygon-site-header .zh-right{order:2;gap:4px}#zygon-site-header .zh-pill{display:none}
  #zygon-site-header .zh-panel{position:fixed;top:72px;bottom:0;max-height:none}
  #zygon-site-header .zh-pin{padding:20px}
  #zygon-site-header .zh-row{flex-direction:column}#zygon-site-header .zh-elias{width:auto}
  #zygon-site-header .zh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #zygon-site-header .zh-drop{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  #zygon-site-header .zh-links.open .zh-mob{display:flex;align-items:center;gap:10px;height:48px;color:#fff;font-size:15px;font-weight:600;border-top:1px solid rgba(255,255,255,.12);text-decoration:none}
  #zygon-site-header .zh-links.open .zh-mob:first-of-type{margin-top:12px}
  #zygon-site-header .zh-links.open .zh-mob i{width:18px;text-align:center;opacity:.8}
}
@media (max-width:560px){#zygon-site-header .zh-grid,#zygon-site-header .zh-help{grid-template-columns:1fr}#zygon-site-header .zh-drop{grid-template-columns:1fr}}