/* WCAG 2.4.1. Off-screen rather than display:none — display:none removes it from the tab order,
   which defeats the point. It becomes a real, visible button the moment it takes focus. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200}
.skip-link:focus{left:16px;top:16px;background:var(--brand,#0F3D2E);color:#fff;padding:10px 16px;border-radius:12px;font-weight:650;font-size:.95rem;text-decoration:none;outline:2px solid var(--accent,#F55A3C);outline-offset:2px}

/* ONE HEADER FOR EVERY MARKETING PAGE.

   There were four. landing.html and about.html shared one implementation; institutions.html had its
   own, written with a different class vocabulary (.nav-r, .t, .idrop), a smaller logo, no Resources
   dropdown and — the part a visitor actually hits — NO MOBILE MENU AT ALL. Below 820px its nav
   links simply disappeared, with no burger to open them, so on a phone the institutions page had no
   navigation. The fourth is the app's own SiteHeader, in React.

   This is the markup and the CSS the three static pages now share, taken from landing.html as the
   most complete of them. It depends on /brand.css for its colours, so link that first.

   landing.html and about.html still carry their own copies of these rules inline. The values are
   identical, so they are harmless, and deleting them from the middle of a 1700-line file is a risk
   with nothing to show for it — that bill comes due when these pages move into Next and the header
   becomes one React component, which is the rest of this job. */

.nav-in { display: flex; align-items: center; justify-content: space-between; height: 66px }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.22rem; letter-spacing: -.03em; color: var(--ink); text-decoration: none }
.brand svg { display: block }

.nav-links { display: flex; gap: 30px; align-items: center; font-size: .95rem; color: var(--muted); font-weight: 500 }
.nav-links a { color: inherit; text-decoration: none }
.nav-links a:hover { color: var(--ink) }

.nav-drop { position: relative }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; font: inherit; font-size: .95rem; color: var(--muted); font-weight: 500; cursor: pointer }
.nav-drop:hover .nav-drop-btn, .nav-drop:focus-within .nav-drop-btn { color: var(--ink) }
.nav-drop-menu { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); padding-top: 10px; opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 60 }
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible }
.nav-drop-card { min-width: 188px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 18px 44px -14px rgba(0,0,0,.28) }
.nav-drop-card a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--ink); font-weight: 500; font-size: .94rem; text-decoration: none }
.nav-drop-card a:hover { background: var(--paper) }

.nav-ws { display: inline-flex; align-items: center; gap: 7px; color: var(--coral-deep); font-weight: 600; text-decoration: none }
.nav-ws:hover { filter: brightness(1.1) }
.nav-ws i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral-deep); animation: navWsPulse 2.4s ease-in-out infinite }
@keyframes navWsPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .nav-ws i { animation: none } }

.nav-cta { display: flex; gap: 14px; align-items: center }

/* "Hi, Ali" — revealed by the /api/me swap in the generated header, hidden until then. The [hidden]
   rule is explicit because `display:flex` on the parent would otherwise beat the attribute's own
   UA style and show an empty span. It joins .btn-plain in going away on narrow screens, where the
   single button is all that fits. */
.nav-hi { font-size: .92rem; font-weight: 650; color: var(--ink); white-space: nowrap }
.nav-hi[hidden] { display: none }

/* The burger and the menu it opens. This is the part institutions.html never had. */
.nav-burger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--ink) }
.nav-menu { display: none }

/* 820 -> 900. At 834px (an iPad in portrait) the full link row measured 477px and the right-hand
   group 205px, leaving the two flush against each other with no gap and wrapping "Back to my
   lessons" onto two lines — a 71px-tall button in a 64px header. The burger has the room. */
@media (max-width: 900px) {
  .nav-links { display: none }
  .nav-cta .btn-plain { display: none }
  .nav-hi { display: none }
  .nav-in { position: relative }
  .nav-burger { display: inline-flex; align-items: center }
  .nav-menu.open { display: flex; flex-direction: column; position: absolute; top: calc(100% + 6px); right: 0; min-width: 212px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 18px 44px -14px rgba(0,0,0,.35); z-index: 60 }
  .nav-menu.open a { padding: 11px 12px; border-radius: 9px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .98rem }
  .nav-menu.open a:hover, .nav-menu.open a:active { background: var(--paper) }
  .nav-menu-sep { height: 1px; background: var(--line); margin: 6px 4px }
  .nav-menu.open .nav-menu-cta { background: var(--coral); color: #fff; text-align: center; margin-top: 2px }
}

@media (max-width: 560px) {
  .nav-in { height: 60px }
  .brand { font-size: 1.12rem }
}

/* One visible focus ring everywhere, instead of three. Keyboard users were getting a different
   treatment on each page — and none at all on some controls. */
.nav-in a:focus-visible,
.nav-in button:focus-visible,
.nav-menu a:focus-visible {
  outline: 2px solid var(--coral-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- chat bubble clearance (audit #26) ----------
   The chat launcher is position:fixed at bottom-right, 56px square, 20px up. The page had no
   bottom padding, so the LAST thing in the footer sat under it permanently — which here is the
   trademark disclaimer ("Lisenia is an independent study tool… not official scores"), i.e. the one
   paragraph on the page that exists for legal reasons. Scrolling could not clear it, because the
   bubble is fixed.

   A floating button will always pass over content mid-scroll; that is what it is. What it must not
   do is make the END of the document unreachable. The footer therefore reserves the bubble's
   footprint, inside its own background so it reads as spacing rather than a gap. */
/* `body footer` rather than `footer`: each page carries a big inline <style> that sets
   footer{padding-bottom:60px}, and an inline block later in the document beats a linked stylesheet
   at equal specificity. One extra element in the selector settles it without touching three pages.
   88px is the bubble's 56 plus its 20 offset plus a gap, so it is larger than the 60 it replaces
   and nothing gets tighter. */
body footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)) }