/* UX/accessibility fixes (audit 09.11.2026) */
/* 1. Focus ring: lime is invisible on light backgrounds (1.27:1) -> ink on light, lime on dark */
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline-color:var(--ink)}
.dark :focus-visible,.on-dark :focus-visible,.hero-l :focus-visible,.stats :focus-visible,.res-side :focus-visible,footer :focus-visible,.cookie :focus-visible,#cookie-banner :focus-visible,.fab:focus-visible{outline-color:var(--lime)}
.btn-primary:focus-visible{outline-color:var(--ink);box-shadow:0 0 0 2px var(--paper)}
.hero-l .btn-primary:focus-visible,.dark .btn-primary:focus-visible,.on-dark .btn-primary:focus-visible{outline-color:#fff;box-shadow:none}
/* 2. Touch targets: footer links >= 44px on phones */
@media(max-width:760px){footer li a{display:inline-block;padding:11px 0}footer ul{gap:0}}
/* 3. Typography: avoid one-word last lines in running text */
p,li,dd{text-wrap:pretty}
/* 4. Arabic: negative letter-spacing breaks cursive joining */
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4,[dir=rtl] .stat b,[dir=rtl] .form-h,[dir=rtl] summary,[dir=rtl] .tile .tt,[dir=rtl] .lead,[dir=rtl] .eyebrow,[dir=rtl] .kicker,[dir=rtl] .hfacts b,[dir=rtl] .step b.n{letter-spacing:0}

/* ---- QA round 2 (09.11.2026) ---- */
/* 5. Long words / nowrap buttons must never widen the page on phones (iPhone SE 375, Android 320) */
h1,h2,h3,.lead{overflow-wrap:break-word}
@media(max-width:760px){
/* ux.css is @imported before site.css rules, so selectors need extra specificity (body .btn) */
body .btn{white-space:normal;height:auto;min-height:52px;padding-block:12px;line-height:1.25;text-align:center}
.hero-l h1,.head-band h1{font-size:clamp(26px,8.4vw,38px);hyphens:auto;-webkit-hyphens:auto}
.hero-l .acts .btn,.cta-band .btn-row .btn{max-width:100%}
.crumbs li{min-width:0;overflow-wrap:anywhere}
h1,h2{overflow-wrap:anywhere}
}
@media(max-width:360px){.mbar{gap:6px}.mbar a{font-size:13px;gap:4px;padding:0 4px}.mbar a svg{width:16px;height:16px}}
/* 6. Touch targets >= 44px on phones/tablets */
.top .brand{min-width:44px;min-height:44px;justify-content:center}
@media(max-width:1100px){
footer .legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
footer .legal .r{line-height:1.2}
footer.minimal .links a{display:inline-flex;align-items:center;min-height:44px;padding:0}
.rows a{display:inline-block;padding:10px 0}
}
@media(min-width:375px) and (max-width:1100px){.lang a,.lang span{min-width:40px;justify-content:center}}
@media(min-width:390px) and (max-width:1100px){.lang a,.lang span{min-width:44px}}
/* 7. Placeholder phone guard (see site.js): stub tel: links are rendered as plain text, header/mobile-bar phone buttons hidden */
.ph-off{cursor:default;text-decoration:none!important}
.top .phone.ph-off,.mbar a.ph-off,.fab.ph-off{display:none!important}
@media(max-width:760px){body .mbar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
/* 8. Tablet portrait (761-1100): hero form is narrow, stack the two selects so labels/placeholders are not truncated */
@media(min-width:761px) and (max-width:1100px){.hero-r .two{grid-template-columns:1fr}.hero-r .two .field+.field{margin-top:28px}}
/* 9. Focus ring (fixes #1 above: ux.css is @imported BEFORE site.css, so the earlier rules lost to `a:focus-visible{outline:2px solid var(--lime)}`).
   Same selectors with a `body` prefix: ink ring on light surfaces, lime ring on dark surfaces. */
body .btn:focus-visible,body a:focus-visible,body button:focus-visible,body input:focus-visible,body select:focus-visible,body textarea:focus-visible,body summary:focus-visible,body [tabindex]:focus-visible{outline-color:var(--ink)}
body .dark :focus-visible,body .on-dark :focus-visible,body .hero-l :focus-visible,body .head-band :focus-visible,body .cta-band :focus-visible,body .stats :focus-visible,body .res-side :focus-visible,body .magnet :focus-visible,body footer :focus-visible,body .cookie :focus-visible,body .mbar :focus-visible{outline-color:var(--lime)}
body .btn-primary:focus-visible{outline-color:var(--ink);box-shadow:0 0 0 2px var(--paper)}
body .hero-l .btn-primary:focus-visible,body .head-band .btn-primary:focus-visible,body .cta-band .btn-primary:focus-visible,body .dark .btn-primary:focus-visible,body .on-dark .btn-primary:focus-visible,body .magnet .btn-primary:focus-visible,body .res-side .btn-primary:focus-visible,body .cookie .btn-primary:focus-visible,body .mbar .req:focus-visible{outline-color:#fff;box-shadow:none}
body .skip:focus-visible{outline-color:var(--ink)}
/* 10. Form fields: the underline thickens on focus but that alone is a weak indicator -> add a real ring (keyboard + mouse) */
body .field input:focus-visible,body .field select:focus-visible,body .field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
body .on-dark .field input:focus-visible,body .on-dark .field select:focus-visible,body .on-dark .field textarea:focus-visible,body .magnet .field input:focus-visible,body .magnet .field select:focus-visible{outline-color:#fff}
body a.fab:focus-visible{outline-color:var(--ink)}