/* theme.css — additions made during the WordPress build (loaded after the prototype's CSS) */
[hidden]{display:none!important}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* the admin bar (editors only) should not push the fixed top bar under it */
.admin-bar .top{top:32px}
@media (max-width:782px){.admin-bar .top{top:46px}}
:focus-visible{outline:1px solid currentColor;outline-offset:3px}

/* ---------- Lesson (single-gfx_lesson.php) ---------- */
/* locked player frame: same frame as the board's player, no video source is printed */
.gfx-p-lesson .vlocked img{opacity:.35}
.gfx-p-lesson .vlock{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;text-align:center;padding:0 20px}
.gfx-p-lesson .vlock .pc{width:64px;height:64px;border:1px solid rgba(255,255,255,.8);border-radius:50%;display:flex;align-items:center;justify-content:center}
.gfx-p-lesson .vlock .pc svg{width:16px;height:16px}
.gfx-p-lesson .vlock a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;background:#fff;color:#0a0a0a;transition:background .3s}
.gfx-p-lesson .vlock a:hover{background:rgba(255,255,255,.85)}
.gfx-p-lesson .sl[aria-disabled=true]{cursor:not-allowed}
.gfx-p-lesson .b2[aria-disabled=true],.gfx-p-lesson .b0[aria-disabled=true]{cursor:not-allowed}
.gfx-p-lesson .dl button[aria-disabled=true]{cursor:not-allowed}
.gfx-p-lesson .pane > :first-child{margin-top:0}
.gfx-p-lesson .pane img{max-width:100%;height:auto}

/* ---------- Text: legal pages + 404 (page.php, 404.php) ---------- */
/* the board's tabs are buttons; here they are links to the three legal pages */
.gfx-p-text a.tab{display:inline-flex;align-items:center;text-transform:none;letter-spacing:normal}

/* ---------- Mobile pass: menu on boards that had none (Course, Teaser, legal pages, 404) ---------- */
:is(.gfx-p-course,.gfx-p-teaser,.gfx-p-text) .menu-b{display:none}
:is(.gfx-p-course,.gfx-p-teaser,.gfx-p-text) .mmenu{position:fixed;inset:0;z-index:25;background:var(--bg);color:var(--fg);display:flex;flex-direction:column;justify-content:flex-end;padding:0 20px 120px;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);visibility:hidden}
:is(.gfx-p-course,.gfx-p-teaser,.gfx-p-text) .mmenu.open{clip-path:inset(0 0 0 0);visibility:visible}
:is(.gfx-p-course,.gfx-p-teaser,.gfx-p-text) .mmenu a{display:flex;align-items:baseline;gap:14px;font-size:40px;letter-spacing:-.03em;line-height:1.15;padding:6px 0;border-bottom:1px solid var(--line)}
:is(.gfx-p-course,.gfx-p-teaser,.gfx-p-text) .mmenu a .jp{font-size:12px;color:var(--mute)}
@media (max-width:820px){
  :is(.gfx-p-course,.gfx-p-teaser,.gfx-p-text) .theme-b{grid-column:3 / 4;margin-right:0}
  :is(.gfx-p-course,.gfx-p-teaser,.gfx-p-text) .menu-b{display:flex;grid-column:4 / 5;justify-self:end;width:44px;height:44px;margin-top:-10px;margin-right:-10px;flex-direction:column;justify-content:center;align-items:center;gap:6px}
  :is(.gfx-p-course,.gfx-p-teaser,.gfx-p-text) .menu-b i{display:block;width:20px;height:1px;background:currentColor;transition:transform .5s var(--ease)}
  :is(.gfx-p-course,.gfx-p-teaser,.gfx-p-text) .menu-b.open i:first-child{transform:translateY(3.5px) rotate(45deg)}
  :is(.gfx-p-course,.gfx-p-teaser,.gfx-p-text) .menu-b.open i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
}
/* keep the sticky buy/join pill out of the open mobile menu */
.mmenu.open ~ .pill{opacity:0!important;pointer-events:none!important}

/* Home hero reel: the glitch animates the wrapper (Safari ignores clip-path/filter animations on <video>) */
.gfx-p-home .reel-v>video{display:block;width:100%;height:100%;object-fit:cover}
.gfx-p-home .reel.glitch .reel-v.on{will-change:clip-path,transform}