/* Shared light-only header. Independent of the inherited page layouts. */
html { color-scheme: light; scroll-padding-top: 100px; }
.oej-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.oej-header.is-scrolled { box-shadow: 0 4px 16px #14304a0d; }
.oej-header-inner { width: min(1440px, calc(100% - 48px)); min-height: 80px; margin: auto; display: flex; align-items: center; gap: clamp(20px, 2.5vw, 40px); }
.oej-brand { flex: none; display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.oej-brand .oej-mark { width: 38px; height: 38px; padding: 2px; }
.oej-brand span:last-child { font: 650 12px/1.4 var(--body); white-space: nowrap; }
.oej-desktop { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.oej-nav, .oej-utilities, .oej-languages, .oej-account { display: flex; align-items: center; }
.oej-nav { gap: clamp(14px, 1.7vw, 28px); margin-inline: auto; }
.oej-utilities { gap: clamp(14px, 1.7vw, 24px); }
.oej-account { gap: 16px; }
.oej-header a, .oej-header summary { -webkit-tap-highlight-color: transparent; }
.oej-nav a, .oej-languages a, .oej-account a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font: 550 12px/1.4 var(--body); color: var(--ink); text-decoration: none; white-space: nowrap; }
.oej-nav a:hover, .oej-signin:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 5px; }
.oej-languages { gap: 3px; }
.oej-languages a { min-width: 28px; }
.oej-languages span { font-size: 12px; color: var(--line-strong); }
.oej-languages a[aria-current], .oej-nav a[aria-current] { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 5px; font-weight: 750; }
.oej-account .oej-signup { padding-inline: 16px; border-radius: 6px; background: var(--button-bg); color: var(--button-ink); font-weight: 650; }
.oej-account .oej-signup:hover { background: var(--button-hover); }
.oej-header :is(a, summary):focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 4px; }
.oej-menu { display: none; }
.price-description { color: var(--ink); margin: 14px 0 18px; font-size: 16px; line-height: 1.65; }
.pricing-clarity { max-width: 680px; margin: 12px 0 24px; color: var(--muted); }
.repair-band, .next-step, .main-finding { border: 1px solid var(--line); }
/* Small accents retain navy; large panels use paper or white. */
@media (min-width: 1200px) {
 .oej-nav a, .oej-languages a, .oej-account a { font-size: 13px; }
 .oej-brand span:last-child { font-size: 13px; }
}
@media (max-width: 1023px) {
 html { scroll-padding-top: 88px; }
 .oej-header-inner { min-height: 72px; justify-content: space-between; gap: 16px; }
 .oej-desktop { display: none; }
 .oej-menu { display: block; }
 .oej-menu summary { min-height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer; list-style: none; color: var(--ink); font: 650 13px/1.4 var(--body); }
 .oej-menu summary::-webkit-details-marker { display: none; }
 .oej-menu[open] summary { background: var(--inset); }
 .oej-menu[open] summary svg { transform: rotate(90deg); }
 .oej-menu-panel { position: absolute; top: 100%; left: 0; right: 0; padding: 16px 24px 24px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 12px 20px #14304a12; max-height: calc(100dvh - 72px); overflow-y: auto; }
 .oej-menu[open] .oej-menu-panel { animation: oej-menu-reveal 180ms ease-out; }
 .oej-menu-panel .oej-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
 .oej-menu-panel .oej-nav a { justify-content: flex-start; min-height: 48px; font-size: 15px; }
 .oej-menu-panel .oej-languages { padding-block: 12px; border-block: 1px solid var(--line); margin-block: 12px 16px; }
 .oej-menu-panel .oej-languages a { min-width: 44px; font-size: 14px; }
 .oej-menu-panel .oej-account { gap: 24px; }
 .oej-menu-panel .oej-account a { font-size: 14px; }
 .oej-menu-panel .oej-signup { flex: 1; max-width: 240px; }
}
@media (max-width: 480px) {
 .oej-header-inner { width: calc(100% - 32px); min-height: 68px; gap: 12px; }
 .oej-brand { gap: 7px; }
 .oej-brand .oej-mark { width: 32px; height: 32px; }
 .oej-brand span:last-child { font-size: 11px; }
 .oej-menu summary { padding-inline: 10px; gap: 8px; }
 .oej-menu-panel { padding-inline: 16px; max-height: calc(100dvh - 68px); }
}
/* W3-T6 UX-4 (A34, FU-3): 44 × 44 px header targets and a header that fits from 320 px:
   the menu button shows its icon only (its text stays its accessible name) and, below 380 px,
   the brand words take two short lines. Nothing in the header is under 12 px. */
.oej-brand { min-height: 44px; min-width: 44px; }
.oej-nav a, .oej-languages a { min-width: 44px; }
@media (max-width: 480px) {
 .oej-brand span:last-child { font-size: 12px; }
 .oej-menu summary { width: 44px; padding: 0; justify-content: center; }
 .oej-menu summary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* With 44 px nav and language targets the narrow desktop row (1024–1199 px) needs tighter gaps. */
@media (min-width: 1024px) and (max-width: 1199px) {
 .oej-header-inner { gap: 16px; }
 .oej-desktop { gap: 12px; }
 .oej-nav, .oej-utilities { gap: 10px; }
}
@media (max-width: 379px) {
 .oej-brand span:last-child { white-space: normal; max-width: 8.6em; line-height: 1.25; }
}
@keyframes oej-menu-reveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .oej-menu-panel { animation: none !important; } }
@media print { .oej-header { display: none; } }