/* The site header (shell/header.php + shell/account.php): wordmark, sections, language menu, account menu,
   cart, mobile menu and a section's own bar under it (Academy's). Loaded by the new shell (shell_view.php)
   and by the old layout (shared/head.php), so every page shares one header. Everything is scoped to the
   header's own classes: the old layout's global styles (adapt-main.css) must not reach in, and these must
   not reach out. */

:root { --g: #00FF50; --ink: #0a0a0a; --paper: #f5f5f3; --gut: clamp(20px, 4vw, 56px); }
.hp-hd, .hp-menu, .hp-sub { font-family: 'Archivo', sans-serif; -webkit-font-smoothing: antialiased; line-height: normal; color: var(--paper); }
.hp-hd, .hp-menu, .hp-sub, .hp-hd *, .hp-menu *, .hp-sub * { box-sizing: border-box; }
.hp-hd a, .hp-menu a, .hp-sub a { color: inherit; text-decoration: none; border: 0; }
.hp-hd a:hover, .hp-menu a:hover, .hp-sub a:hover { color: var(--g); }
.hp-hd .g { color: var(--g); }
.hp-hd b, .hp-hd small, .hp-hd em, .hp-hd strong, .hp-sub strong { font-family: inherit; letter-spacing: inherit; }
.hp-hd button { font-family: inherit; }

.hp-btn-g { background: var(--g); color: var(--ink) !important; padding: 11px 18px; font: 800 12px 'Archivo', sans-serif; letter-spacing: .1em; }
.hp-btn-g:hover { background: var(--paper); }

/* — header — */
.hp-hd {
    position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; height: 74px;
    padding: 0 var(--gut); color: var(--paper);
    background: linear-gradient(180deg, rgba(10,10,10,.7), rgba(10,10,10,0));
    border-bottom: 1px solid transparent; transition: background .35s, border-color .35s, height .35s cubic-bezier(.2,.7,.2,1), transform .9s .25s cubic-bezier(.2,.7,.2,1);
}
.hp-hd.solid { background: rgba(10,10,10,.94); border-bottom-color: #222; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hp-logo { font: 900 24px/1 'Archivo', sans-serif; letter-spacing: -.05em; color: var(--paper); }
.hp-nav { display: flex; gap: clamp(18px, 2.2vw, 40px); margin-left: clamp(24px, 3vw, 56px); font: 600 12.5px 'Archivo', sans-serif; letter-spacing: .14em; }
.hp-hd-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.hp-search { width: 19px; height: 19px; cursor: pointer; }
.hp-hd-login { font: 600 12.5px 'Archivo', sans-serif; letter-spacing: .1em; }
/* admins only: the way into admin/ */
.hp-hd-admin { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid rgba(245,245,243,.35); color: var(--paper); font: 700 12px 'Archivo', sans-serif; letter-spacing: .12em; transition: border-color .2s, color .2s, height .35s; }
.hp-hd-admin svg { width: 14px; height: 14px; }
.hp-hd-admin:hover, .hp-hd-admin.on { border-color: var(--g); color: var(--g); }
.hp-scrolled .hp-hd-admin { height: 28px; }
@media (max-width: 700px) { .hp-hd-admin span { display: none; } .hp-hd-admin { padding: 0 9px; } }

/* — language dropdown — */
.hp-lang { position: relative; }
.hp-lang-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; background: transparent; color: inherit; border: 1px solid rgba(245,245,243,.35); font: 700 12px 'Archivo', sans-serif; letter-spacing: .12em; cursor: pointer; }
.hp-lang-btn:hover, .hp-lang.open .hp-lang-btn { border-color: var(--g); color: var(--g); }
.hp-lang-btn svg { width: 9px; height: 6px; transition: transform .2s; }
.hp-lang.open .hp-lang-btn svg { transform: rotate(180deg); }
.hp-lang-list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 50px rgba(0,0,0,.45); padding: 6px 0; }
.hp-lang-list[hidden] { display: none; }
.hp-lang-list a { display: flex; align-items: baseline; gap: 12px; padding: 9px 14px; font: 500 13.5px 'Archivo', sans-serif; }
.hp-lang-list a b { width: 22px; font-weight: 800; font-size: 12px; letter-spacing: .1em; }
.hp-lang-list a:hover { background: #fff; color: var(--ink); }
.hp-lang-list a.on { background: var(--g); color: var(--ink); }

/* — header: the section you are in, the mobile menu, and a solid bar for pages without a hero — */
.hp-nav a { display: flex; flex-direction: column; gap: 5px; line-height: 1; }
.hp-nav-t { font: 700 13px 'Archivo', sans-serif; letter-spacing: .16em; }
.hp-nav-d { font: 600 8.5px 'Archivo', sans-serif; letter-spacing: .2em; color: #8d8d88; white-space: nowrap; }
.hp-nav a:hover .hp-nav-d { color: inherit; }
.hp-nav a.on, .hp-nav a.on .hp-nav-d { color: var(--g); }
.hp-menu a small { font: 600 10px 'Archivo', sans-serif; letter-spacing: .18em; color: #8d8d88; margin-left: 8px; vertical-align: middle; }

/* — a section's own bar under the header (Academy's: academy/nav.php) — */
.hp-sub { position: fixed; top: 74px; left: 0; right: 0; z-index: 19; background: rgba(10,10,10,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid #222; border-bottom: 1px solid #222; transition: transform .9s .35s cubic-bezier(.2,.7,.2,1), top .35s cubic-bezier(.2,.7,.2,1), background .35s; }
.hp-js:not(.hp-ready) .hp-sub { transform: translateY(-160%); }
.hp-sub .an { display: block; }
.hp-sub .an_in { display: flex; align-items: stretch; height: 52px; padding: 0 var(--gut); }
.hp-sub .an_mark { display: flex; align-items: center; gap: 12px; padding-right: 26px; margin-right: 6px; border-right: 1px solid #262626; color: var(--paper); white-space: nowrap; }
.hp-sub .an_mark .material-symbols-outlined { color: var(--g); font-size: 22px; }
.hp-sub .an_mark strong { font: 900 15px 'Archivo', sans-serif; letter-spacing: .06em; }
.hp-sub .an_tabs { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.hp-sub .an_tabs::-webkit-scrollbar { display: none; }
.hp-sub .an_tab { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 14px; font: 500 14.5px 'Archivo', sans-serif; color: #a9a9a4; white-space: nowrap; }
.hp-sub .an_tab:hover { color: var(--paper); }
.hp-sub .an_tab.is_on { color: var(--paper); font-weight: 800; }
.hp-sub .an_tab.is_on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--g); }
.hp-sub .an_n { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; background: #1c1c1c; color: var(--g); font: 800 11.5px 'Archivo', sans-serif; }
.hp-sub .an_badge { margin: 0 0 0 auto; align-self: center; padding-left: 16px; }
.hp-sub .an_badge span { display: inline-block; padding: 9px 18px; border: 2px solid var(--g); color: var(--g); font: 800 12px 'Archivo', sans-serif; letter-spacing: .22em; }
.hp-sub .an_badge a span { transition: background .2s, color .2s; }
.hp-sub .an_badge a:hover span { background: var(--g); color: var(--ink); }
.hp-has-sub .hp-menu { top: 126px; }
@media (max-width: 1000px) { .hp-sub .an_badge { display: none; } }
@media (max-width: 700px) { .hp-sub .an_mark strong { display: none; } .hp-sub .an_mark { padding-right: 12px; } .hp-sub .an_tab { font-size: 13.5px; padding: 0 10px; } }
.hp-burger { display: none; width: 40px; height: 40px; padding: 0; background: none; border: 1px solid rgba(245,245,243,.35); cursor: pointer; position: relative; }
.hp-burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--paper); transition: transform .25s, top .25s; }
.hp-burger span:first-child { top: 15px; } .hp-burger span:last-child { top: 23px; }
.hp-menu-open .hp-burger span:first-child { top: 19px; transform: rotate(45deg); }
.hp-menu-open .hp-burger span:last-child { top: 19px; transform: rotate(-45deg); }
.hp-menu { position: fixed; top: 74px; left: 0; right: 0; z-index: 19; background: #0a0a0a; border-bottom: 1px solid #222; padding: 10px var(--gut) 22px; display: flex; flex-direction: column; }
.hp-menu[hidden] { display: none; }
.hp-menu a { padding: 14px 0; border-bottom: 1px solid #1e1e1e; font: 800 22px 'Archivo', sans-serif; letter-spacing: -.02em; }
.hp-menu a.on { color: var(--g); }
.hp-menu a.hp-menu-sub { font: 700 13px 'Archivo', sans-serif; letter-spacing: .12em; border-bottom: 0; padding-top: 18px; }
.hp-menu-open .hp-hd { background: rgba(10,10,10,.97); }
.hp-solid-hd .hp-hd { background: rgba(10,10,10,.94); border-bottom-color: #222; }
.hp-solid-hd #hpMain { padding-top: 74px; }
@media (max-width: 1000px) { .hp-burger { display: block; } }
@media (max-width: 700px) { .hp-hd-right { gap: 12px; } .hp-search { display: none; } }

/* — scrolled: the header shrinks to 40px, the nav keeps its names but drops the [descriptions],
     and a section bar moves up under it — */
.hp-logo, .hp-nav-d, .hp-hd .hp-btn-g, .hp-lang-btn, .hp-burger { transition: font-size .35s, max-height .35s, opacity .25s, margin .35s, padding .35s, height .35s, width .35s; }
.hp-nav-d { max-height: 12px; overflow: hidden; }
.hp-hd.solid { height: 40px; }
.hp-hd.solid .hp-logo { font-size: 19px; }
.hp-hd.solid .hp-nav a { gap: 0; }
.hp-hd.solid .hp-nav a { position: relative; }
.hp-hd.solid .hp-nav-d { position: absolute; top: 100%; left: 0; max-height: 0; opacity: 0; }
.hp-hd.solid .hp-nav-t { font-size: 12px; }
.hp-hd.solid .hp-btn-g { padding: 7px 14px; font-size: 11px; }
.hp-hd.solid .hp-lang-btn { height: 28px; }
.hp-hd.solid .hp-burger { width: 32px; height: 30px; }
.hp-hd.solid .hp-burger span { left: 8px; right: 8px; }
.hp-hd.solid .hp-burger span:first-child { top: 10px; } .hp-hd.solid .hp-burger span:last-child { top: 17px; }
.hp-menu-open .hp-hd.solid .hp-burger span:first-child, .hp-menu-open .hp-hd.solid .hp-burger span:last-child { top: 14px; }
.hp-scrolled .hp-sub { top: 40px; }
/* the section bar shrinks with the header: 52px to 40px */
.hp-sub .an_in, .hp-sub .an_tab, .hp-sub .an_mark strong, .hp-sub .an_mark .material-symbols-outlined, .hp-sub .an_badge span, .hp-sub .an_n { transition: height .35s, font-size .35s, padding .35s, min-width .35s; }
.hp-scrolled .hp-sub .an_in { height: 40px; }
.hp-scrolled .hp-sub .an_mark strong { font-size: 13px; }
.hp-scrolled .hp-sub .an_mark .material-symbols-outlined { font-size: 18px; }
.hp-scrolled .hp-sub .an_tab { font-size: 13px; }
.hp-scrolled .hp-sub .an_n { height: 18px; min-width: 20px; font-size: 10.5px; }
.hp-scrolled .hp-sub .an_badge span { padding: 5px 14px; font-size: 10.5px; }
.hp-scrolled .hp-menu { top: 40px; }
.hp-scrolled.hp-has-sub .hp-menu { top: 80px; }

/* — the signed-in corner: account pill, its menu, the cart (shell/account.php) — */
.hp-acct { position: relative; }
.hp-acct-pill { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 14px; border-radius: 999px; background: rgba(245,245,243,.08); color: var(--paper); border: 1px solid rgba(245,245,243,.35); cursor: pointer; font: inherit; transition: background .2s, color .2s, border-color .2s, padding .35s; }
.hp-acct-pill:hover { border-color: var(--g); }
.hp-acct.open .hp-acct-pill { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.hp-acct-caret { width: 9px; height: 6px; opacity: .7; transition: transform .2s; }
.hp-acct.open .hp-acct-caret { transform: rotate(180deg); }
.hp-acct-av { width: 34px; height: 34px; flex: none; border-radius: 999px; background: #333 center / cover; border: 2px solid var(--g); display: grid; place-items: center; font: 800 12px 'Archivo', sans-serif; color: var(--paper); transition: width .35s, height .35s; }
.hp-acct-av.big { width: 64px; height: 64px; font-size: 18px; }
.hp-acct-menu { position: absolute; right: 0; top: calc(100% + 10px); width: min(372px, calc(100vw - 24px)); max-height: calc(100vh - 100px); overflow: auto; background: var(--paper); color: var(--ink); box-shadow: 0 24px 70px rgba(0,0,0,.55); z-index: 45; }
.hp-acct-menu[hidden] { display: none; }
.hp-acct-menu a:hover { color: var(--ink); }
.hp-acct-menu .material-symbols-outlined { font-size: 22px; font-variation-settings: 'wght' 300; line-height: 1; }
/* head: face, name, what they do, plan and role, and the way to their profile; a hazard stripe under it */
.hp-acct-head { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px 24px; background: var(--ink); color: var(--paper); }
.hp-acct-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: repeating-linear-gradient(-45deg, var(--g) 0 5px, var(--ink) 5px 10px); }
.hp-acct-who { min-width: 0; flex: 1; }
.hp-acct-hname { font: 900 17px/1.1 'Archivo', sans-serif; letter-spacing: -.02em; }
.hp-acct-sub { font: 500 12px/1.4 'Archivo', sans-serif; color: #bdbdb8; margin-top: 4px; }
.hp-acct-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hp-acct-tags:empty { display: none; }
.hp-acct-tag { padding: 3px 8px; border: 1px solid #555; font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .14em; color: var(--paper); }
.hp-acct-tag.g { background: var(--g); border-color: var(--g); color: var(--ink); }
.hp-acct-tag[hidden] { display: none; }
.hp-acct-menu a.hp-acct-profile { flex: none; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .14em; color: var(--g); padding-top: 2px; }
.hp-acct-menu a.hp-acct-profile:hover { color: var(--paper); }
/* four cards, two by two */
.hp-acct-cards { display: grid; grid-template-columns: 1fr 1fr; }
.hp-acct-cards a { display: flex; flex-direction: column; gap: 3px; padding: 16px 16px 14px; border-bottom: 1px solid #deded9; min-width: 0; }
.hp-acct-cards a:nth-child(odd) { border-right: 1px solid #deded9; }
.hp-acct-cards a:hover { background: #fff; }
.hp-acct-cards .material-symbols-outlined { margin-bottom: 10px; }
.hp-acct-cards b { font: 900 14.5px/1.15 'Archivo', sans-serif; letter-spacing: -.02em; }
.hp-acct-cards small { font: 500 11.5px/1.35 'Archivo', sans-serif; color: #4a4a46; }
/* rows */
.hp-acct-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid #deded9; font: 600 13.5px 'Archivo', sans-serif; color: var(--ink); }
a.hp-acct-row:hover { background: #fff; }
.hp-acct-row em { margin-left: auto; font: 800 10px 'Archivo', sans-serif; font-style: normal; letter-spacing: .14em; color: #4a4a46; text-transform: uppercase; }
.hp-acct-langs { margin-left: auto; display: flex; border: 1px solid var(--ink); }
.hp-acct-langs a { padding: 5px 8px; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .1em; }
.hp-acct-langs a + a { border-left: 1px solid #deded9; }
.hp-acct-langs a:hover { background: #fff; }
.hp-acct-langs a.on { background: var(--ink); color: var(--g) !important; }
.hp-acct-menu a.hp-acct-out { border-bottom: 0; font: 800 11.5px 'Archivo', sans-serif; letter-spacing: .14em; color: #8f1d0c; }
.hp-acct-menu a.hp-acct-out:hover { color: #8f1d0c; background: #fff; }
.hp-cart { position: relative; display: grid; place-items: center; width: 40px; height: 40px; color: var(--paper); }
.hp-cart[hidden] { display: none; }
.hp-cart svg { width: 24px; height: 24px; }
.hp-cart-n { position: absolute; top: 0; right: -2px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--g); color: var(--ink); font: 800 10.5px 'Archivo', sans-serif; border: 2px solid var(--ink); }
.hp-hd.solid .hp-acct-pill { padding: 2px 2px 2px 10px; }
.hp-hd.solid .hp-acct-pill .hp-acct-av { width: 26px; height: 26px; }
.hp-hd.solid .hp-cart { width: 32px; height: 32px; }
@media (max-width: 700px) { .hp-acct-caret { display: none; } .hp-acct-pill { padding: 2px; border: 0; background: none; } .hp-acct-menu { position: fixed; right: 12px; top: 64px; } }

@media (max-width: 1000px) { .hp-nav { display: none; } }
@media (max-width: 700px) { .hp-hd-login { display: none; } }
.hp-btn-g { white-space: nowrap; }
@media (max-width: 700px) { .hp-hd .hp-btn-g { padding: 10px 12px; font-size: 11px; letter-spacing: .06em; } }


/* — on the old layout (shared/masthead.php): 60px, solid, no shrinking; its pages are laid out under a
     60px masthead. #masthead survives only as the host of the old message box, which its CSS places. — */
.hp-hd.hp-legacy { height: 60px; background: rgba(10,10,10,.97); border-bottom-color: #222; z-index: 30; }
.hp-hd.hp-legacy + .hp-menu { top: 60px; z-index: 29; }
.hp-hd.hp-legacy .hp-acct-menu { max-height: calc(100vh - 80px); }
#masthead.hp-mh-host { position: fixed; top: 0; left: 0; width: 100%; height: 0; background: none; display: block; z-index: 29; }
@media (max-width: 700px) { .hp-hd.hp-legacy .hp-acct-menu { top: 56px; } }

/* the INSTRUCTOR tag in the account menu opens the instructor dashboard */
.hp-acct-tag.is-link { text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.hp-acct-tag.is-link:hover { background: var(--g); color: var(--ink); border-color: var(--g); }