. */ .skip-link{ position:absolute; top:-100px; left:16px; z-index:9999; padding:12px 20px; background:var(--teal); color:var(--navy); font-weight:700; font-size:.9rem; text-decoration:none; border-radius:var(--radius-sm,10px); transition:top .15s ease; } .skip-link:focus{top:16px;outline:2px solid var(--navy);outline-offset:2px} /* Make :target main programmatically focusable in the AT tree so the skip-link lands focus on it. tabindex="-1" handles this on the element itself. */ main:focus{outline:none} /* a11y: sitewide visible keyboard focus ring */ :focus-visible{outline:2px solid #2BD4CB;outline-offset:3px;border-radius:4px} /* ═══════════════════════════════════════════════════════════════════════ Mobile navigation — authoritative block (2026-06-02) Fixes: (1) dropdown subpages not opening on touch, (2) tablet 561–959px dead-zone where no menu showed, (3) top-bar crowding. Pairs with nav.js. Single breakpoint at 959/960px so the hamburger drawer and the desktop nav never gap. Loaded last → overrides the older max-width:560px nav rules. ═══════════════════════════════════════════════════════════════════════ */ .brand span{white-space:nowrap} @media(max-width:959px){ /* ── top bar: brand + hamburger only (lang toggle + CTA move into drawer via nav.js) ── */ .nav__row{gap:10px;flex-wrap:nowrap} .brand{font-size:.98rem;min-width:0} .brand__mark{width:40px;height:40px} .nav-hamburger{display:inline-flex !important;background:transparent;border:0;color:var(--ink);padding:6px;cursor:pointer;font-size:1.4rem;line-height:1;min-width:44px;min-height:44px;align-items:center;justify-content:center;flex:0 0 auto} /* ── slide-down drawer ── */ .nav__links{ display:flex;flex-direction:column;position:fixed;top:60px;left:0;right:auto; box-sizing:border-box;width:100vw;max-width:100vw;overflow-x:hidden; background:rgba(5,11,21,.98);backdrop-filter:blur(14px); border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:14px 22px 22px;gap:4px;align-items:stretch; max-height:calc(100vh - 60px);overflow-y:auto; transform:translateY(-100%);transition:transform .22s ease;visibility:hidden;z-index:79; } .nav__links.is-open{transform:translateY(0);visibility:visible} /* ── dropdowns become tap-to-open accordions — headings + subpages centered ── */ .nav__dd{position:static;width:100%;text-align:center;border-bottom:1px solid rgba(255,255,255,.06)} .nav__dd:last-of-type{border-bottom:0} .nav__dd-trigger{padding:14px 8px;font-size:1rem;width:100%;justify-content:center;gap:8px;color:var(--ink)} .nav__dd:hover .nav__dd-panel{display:none} /* kill hover-open on touch */ .nav__dd-panel{ position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto; background:transparent;box-shadow:none;backdrop-filter:none;border:0; padding:2px 0 12px;margin:0;min-width:0;display:none; } .nav__dd-panel::before,.nav__dd-panel::after{display:none} .nav__dd-trigger[aria-expanded="true"] + .nav__dd-panel{display:flex;flex-direction:column;align-items:center;gap:2px;transform:none;left:auto;top:auto} .nav__dd-panel a{display:block;max-width:100%;padding:11px 10px;border-radius:8px;font-size:.95rem;text-align:center;white-space:normal;line-height:1.3} /* ── top bar: natural order brand | ☰ | CTA — hamburger always visible ── */ .nav__right{gap:8px;min-width:0;flex:0 1 auto} /* CTA stays visible; compact + wrap-safe so the longer PT label never overflows */ .nav__right .btn{font-size:.78rem;padding:9px 12px;line-height:1.15;white-space:normal;text-align:center;flex:0 1 auto;min-width:0} /* ── language toggle relocated into the drawer (set by nav.js) ── */ .lang-toggle--in-drawer{align-self:center;margin-top:16px} } @media(min-width:960px){.nav-hamburger{display:none}}