/* Mazufa fixes r1 — 2026-11-11. Corrections from the design/UX audit (DUX-xx) and the
   performance audit (PERF-xx). Linked last in <head> on every page. Each block is scoped to
   markup that exists today and carries the finding it answers. Site-wide effects are limited to:
   footer link height on phones (DUX-17), 16px form text on phones (DUX-16), the language button
   and list (DUX-03/17), wrapping of over-long words (DUX-14) and the fallback fonts (DUX-04).
   !important appears only where an inline style or a script-injected rule has to be beaten. */

/* ── DUX-04 / PERF-10 — headings fell back to the browser's default serif ─────────────
   Elements whose inline style names 'Space Grotesk' alone (no fallback) get a real stack.
   Both spellings are matched: the static markup and the one the browser writes back after
   the page script touches the style. Text that Space Grotesk covers looks the same once the
   web font has loaded; symbols it lacks now come from the system sans, not the default serif. */
[style*="font-family:'Space Grotesk';"],[style$="font-family:'Space Grotesk'"],
[style*='font-family: "Space Grotesk";'],[style$='font-family: "Space Grotesk"']{
  font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif!important}
/* Arabic-script pages: Arabic letters in those elements use the site's Arabic face, then a
   system Arabic sans. :where() keeps this below the design stylesheet's own RTL rule, so
   pages where that rule already applies render exactly as before. */
:where(html[dir="rtl"]) [style*="font-family:'Space Grotesk';"],:where(html[dir="rtl"]) [style$="font-family:'Space Grotesk'"],
:where(html[dir="rtl"]) [style*='font-family: "Space Grotesk";'],:where(html[dir="rtl"]) [style$='font-family: "Space Grotesk"']{
  font-family:"Space Grotesk","IBM Plex Sans Arabic","Segoe UI",Tahoma,"SF Arabic","Geeza Pro","Noto Sans Arabic",Arial,sans-serif!important}

/* ── DUX-03 — language list ran off the screen on phones ──────────────────────────────
   The list is absolutely positioned from a button in the middle of the header. On narrow
   screens it is pinned to the viewport instead, 8px from both edges. */
@media (max-width:640px){
  #mz-lang-switch>[role="listbox"]{position:fixed!important;top:calc(var(--mznav-h,64px) + 9px + env(safe-area-inset-top,0px))!important;
    left:8px!important;right:8px!important;width:auto!important;max-width:420px;margin-inline:auto 0;box-sizing:border-box}
}

/* ── DUX-02 — pages without a header: the language button floated over the text ───────
   When the switcher has no header to mount into it is attached to <body> as position:fixed.
   It now stays at the top of the page and scrolls away with it. */
body>#mz-lang-switch{position:absolute!important}

/* ── DUX-17 — language button was 34px tall (house tap target: 40px). Header height is unchanged. */
#mz-lang-switch>button{min-height:40px}

/* ── DUX-19 — page scrolled behind the open mobile menu (needs :has; older browsers keep today's behaviour) */
@media (max-width:899px){
  html:has(#mznav-t:checked){overflow:hidden}
}

/* ── DUX-08 — status chip sat under the consent notice ────────────────────────────────
   The chip is hidden only while the notice is on screen; it returns as soon as a choice is made. */
body:has(>#mz-privacy-choice) div[role="complementary"][style*="position:fixed"][style*="bottom:22px"],
body:has(>#mz-privacy-choice) div[role="complementary"][style*="position: fixed"][style*="bottom: 22px"]{visibility:hidden}

/* ── DUX-10 — "Optional session measurement" box used browser defaults ────────────────
   Same footprint as before (within 2px); card colours as on the rest of the site. */
details[data-mz-measured-funnel]{border:1px solid rgba(255,255,255,.09)!important;border-radius:13px!important;
  background:rgba(255,255,255,.02);color:#B5B5BE;font-size:13.5px;line-height:1.7}
details[data-mz-measured-funnel]>summary{cursor:pointer;color:#D7D7DC;font-weight:600}
details[data-mz-measured-funnel] button{border-color:rgba(255,255,255,.28)!important;color:#F5F5F7!important}

/* ── DUX-14 — long tokens and bare URLs ran past the screen edge ──────────────────────
   break-word only wraps a word that would otherwise overflow; it does not change how
   tables, grids or flex rows size themselves. */
main{overflow-wrap:break-word}

/* ── DUX-15 — Rights Passport result was cut off on phones ────────────────────────────*/
@media (max-width:600px){
  main #rpvBox dl{display:block}
  main #rpvBox dt{margin-top:10px}
  main #rpvBox dd{margin:0;overflow-wrap:anywhere}
}

/* ── DUX-16 — text fields under 16px make iPhone Safari zoom the page on focus ────────
   Fields that are already larger than 16px (set inline) are left alone. */
@media (max-width:820px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]):not([style*="font-size:17"]):not([style*="font-size: 17"]):not([style*="font-size:18"]):not([style*="font-size: 18"]):not([style*="font-size:19"]):not([style*="font-size: 19"]):not([style*="font-size:2"]):not([style*="font-size: 2"]),
  select:not([style*="font-size:17"]):not([style*="font-size: 17"]):not([style*="font-size:18"]):not([style*="font-size: 18"]):not([style*="font-size:2"]):not([style*="font-size: 2"]),
  textarea:not([style*="font-size:17"]):not([style*="font-size: 17"]):not([style*="font-size:18"]):not([style*="font-size: 18"]):not([style*="font-size:2"]):not([style*="font-size: 2"]){font-size:16px!important}
}

/* ── DUX-17 — footer links were 17–21px tall and 27–31px apart ────────────────────────*/
@media (max-width:720px){
  footer div[style*="flex-direction:column"]{gap:0!important}
  footer div[style*="flex-direction:column"]>a[data-mz-action="nav"]{display:flex;align-items:center;min-height:40px}
  /* inline links (e-mail, directory, breadcrumb): taller hit area, no change to the line they sit on */
  footer div[style*="margin-top:14px"]>a[href^="mailto:"],footer a[data-mz-directory],
  main nav[aria-label][style^="margin:0 0 22px;font-size:12.5px"] a{padding-block:13px}
  /* the e-mail link in the bottom bar is a flex item: same hit area, the bar keeps its height */
  footer div[style*="display:flex"]>a[href^="mailto:"]{padding-block:13px;margin-block:-13px}
}

/* ── DUX-23 / DUX-17 — card maker: default file control and 13px checkbox ─────────────*/
main .mzs input[type="file"]{max-width:100%;color:#C7C7CE;font:inherit;font-size:14px}
main .mzs input[type="file"]::file-selector-button{margin-inline-end:12px;min-height:40px;padding:9px 16px;border:1px solid rgba(255,61,90,.5);
  border-radius:999px;background:rgba(255,61,90,.12);color:#FF8FA0;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
main .mzs input[type="checkbox"]{width:22px;min-width:22px;height:22px;flex:0 0 auto;accent-color:#E11D48;vertical-align:middle}

/* ── DUX-18 — studio tools: the error text appeared below the screen ──────────────────
   The script moves focus to the first field while the message sits under the buttons, off
   screen. While it has text it is shown as a bar under the header; empty, nothing changes. */
main .mzs>p.err:not(:empty){position:fixed;top:calc(var(--mznav-h,64px) + 13px + env(safe-area-inset-top,0px));left:12px;right:12px;
  z-index:5;max-width:720px;margin:0 auto;padding:11px 14px;border:1px solid rgba(255,61,90,.6);border-radius:12px;
  background:#1A0B0F;color:#FFD3CC;font-size:14.5px;line-height:1.5;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.6)}

/* ── DUX-20 — title checker button: white on flat #FF2D55 was 3.65:1 ──────────────────
   Site call-to-action gradient; white text on its lightest stop measures 4.7:1. */
main .mztc button{background:linear-gradient(135deg,#E11D48,#8E0F26)}

/* ── DUX-21 — transparency log date: #6E6E76 on near-black was 4.03:1 ─────────────────*/
#trBox>p[style*="#6E6E76"]{color:#9A9AA3!important}

/* ── DUX-06 — apply: the form-language selector sat under the fixed header on phones and
   was an unstyled grey control. */
main[data-mz-apply-main] select[data-mz-public56-language]{-webkit-appearance:none;appearance:none;background:#0E0E12 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23C7C7CE' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;color:#F5F5F7;padding:10px 38px 10px 14px;font:inherit;font-size:16px}
html[dir="rtl"] main[data-mz-apply-main] select[data-mz-public56-language]{background-position:left 14px center;padding:10px 14px 10px 38px}
/* below 761px the page's own rule gives <main> 24px of top padding, written when the header
   still scrolled with the page; the header is fixed now (65px), so the selector row is moved clear of it. */
@media (max-width:760px){
  body:has(nav.mznav) main[data-mz-apply-main]>label:first-child{display:block;margin-top:52px}
}

/* ── DUX-22 — apply: "Log in" sat above the line it belongs to ────────────────────────*/
main[data-mz-apply-main] div[style*="inline-flex"]>a[href="https://portal.mazufa.com/"]{display:inline-flex;align-items:center}