/* ============================================================ components.css — cross-page component behaviors that are NOT already carried verbatim in the per-page CSS. Adds only: (a) accessible hit-area padding for small links (no visual change), (b) mobile drawer scaffolding for the shared header, (c) sticky-apply body-space reservation guard. The full visual component styles (cards, buttons, badges, dashboard, FAQ, forms, etc.) live verbatim in assets/css/pages/*.css from the LOCKED masters and are NOT duplicated here. ============================================================ */ /* ---- Accessible hit areas for small text links (>=44px) ---- Applied via padding so the visual design is unchanged (link text position/size identical to the approved masters; only the tappable box grows). Documented in TEST_REPORT + TODO register. */ @media (max-width:900px){ .nav a, .footer__list a, .footer__slim-links a, .breadcrumb a, .header__login, .header__login--reduced{ display:inline-flex;align-items:center;min-height:44px; } .footer__list a,.footer__slim-links a{padding-block:6px} } /* ---- Mobile navigation drawer (shared header) ---- Hidden by default; navigation.js toggles [data-drawer-open] on . The approved masters show a hamburger at tablet/mobile; this provides the accessible slide-in panel the button controls. */ .drawer{ position:fixed;inset:0 0 0 auto;width:min(88vw,360px); background:var(--lh-color-bg);z-index:var(--lh-z-drawer); transform:translateX(100%);transition:transform var(--lh-transition); box-shadow:var(--lh-shadow-float);padding:24px 20px; display:flex;flex-direction:column;gap:6px;overflow-y:auto; } .drawer[hidden]{display:none} body[data-drawer-open] .drawer{transform:translateX(0)} .drawer__backdrop{ position:fixed;inset:0;background:rgba(15,23,42,.44); z-index:var(--lh-z-drawer);opacity:0;pointer-events:none; transition:opacity var(--lh-transition); } body[data-drawer-open] .drawer__backdrop{opacity:1;pointer-events:auto} body[data-drawer-open]{overflow:hidden} /* scroll lock while drawer open */ .drawer__close{ align-self:flex-end;width:44px;height:44px;display:inline-flex; align-items:center;justify-content:center;border:1px solid var(--lh-color-border); border-radius:var(--lh-radius-input);background:#fff;color:var(--lh-color-ink);margin-bottom:8px; } .drawer a{ display:flex;align-items:center;min-height:48px;padding:0 8px; font-size:16px;font-weight:600;color:var(--lh-color-slate);text-decoration:none; border-bottom:1px solid var(--lh-color-border); } .drawer a[aria-current="page"]{color:var(--lh-color-ink)} .drawer .btn{margin-top:16px;width:100%} /* Desktop: never show drawer/hamburger (approved header shows full nav) */ @media (min-width:901px){ .drawer,.drawer__backdrop,.t-hamburger{display:none !important} } /* ---- Sticky Apply body-space guard ---- Pages that include .sticky-apply already reserve padding-bottom in the locked mobile CSS. This guard ensures it holds even if a page adds the bar without the reservation. */ @media (max-width:640px){ body:has(.sticky-apply){padding-bottom:76px} } /* ---- Safe placeholder links ---- Links whose destination is a documented TODO carry [data-todo-link]; global.js prevents the default jump so a bare "#" never scrolls the page. */ a[data-todo-link]{cursor:pointer}