/* Q Arena website stylesheet.
   Theme: white page, navy accent, header on the logo's own navy, IBM Plex type.
   Order: fonts, tokens, base, components, hero slides, responsive, Arabic, skip link, motion.
   The Arabic block must stay after the components (it relies on specificity and order). */

/* ---- Fonts (SIL Open Font License 1.1, see assets/fonts/OFL.txt) ---- */
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* Metric-matched local fallbacks for IBM Plex Sans (Latin), measured in Chromium against the site copy:
   regular width 0.9995 x Arial, SemiBold width 0.9672 x Arial Bold. Used only until the web font loads, so the swap does not reflow text.
   ascent/descent overrides are Plex 1025/275 divided by the size-adjust. Where Arial is not installed, the browser moves to the next family. */
@font-face{font-family:"IBM Plex Sans Fallback";src:local("Arial"),local("ArialMT");font-weight:400;font-style:normal;size-adjust:99.95%;ascent-override:102.6%;descent-override:27.5%;line-gap-override:0%}
@font-face{font-family:"IBM Plex Sans Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600;font-style:normal;size-adjust:96.72%;ascent-override:106%;descent-override:28.4%;line-gap-override:0%}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---- Tokens ---- */
:root{
  color-scheme:light;
  /* Surfaces and text */
  --bg:#ffffff; --bg2:#f3f5fa; --card:#ffffff; --card2:#f8f9fd;
  --fg:#111a33; --mut:#46506b; --ink:#0a1128; --line:#d5dcec;
  /* Brand */
  --accent:#1e3a8a; --on-accent:#ffffff; --white:#ffffff; --ivory:#eef2fb;
  --navy-deep:#000425; --navy-mid:#15203d; --navy-line:#1e2a4a; --navy-ink:#f2f5ff; --blue-active:#3857c4;
  /* Shape and spacing */
  --glow:0 6px 18px rgba(30,58,138,.14);
  --radius:14px; --radius-sm:10px; --max:960px;
  --space-1:8px; --space-2:12px; --space-3:16px; --space-4:24px; --space-5:40px;
  /* Type */
  --font:"IBM Plex Sans","IBM Plex Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-ar:"IBM Plex Sans Arabic",var(--font);
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs-xs:11px; --tap:44px; --gutter-phone:18px;
  --accent-rgb:30,58,138; --navy-deep-rgb:0,4,37; --glow-hover:0 8px 22px rgba(30,58,138,.35);
}
@media (prefers-contrast:more){:root{--line:#7a87ab}}

/* ---- Base ---- */
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:var(--fg);font:15px/1.6 var(--font);background:var(--bg)}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:rgba(var(--accent-rgb),.25);color:var(--ink)}
/* The default highlight turns text dark navy, which disappears on the navy header, the filled button and the caption bars. The logo is left out so a selected image keeps the faint default tint instead of a white wash. */
header :not(img)::selection,.skip::selection,.cta:not(.alt)::selection,.slide figcaption::selection{background:var(--white);color:var(--navy-deep)}

/* ---- Announcement strip (dismissible with a hidden checkbox, no JavaScript) ---- */
.ann{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:var(--space-1) calc(44px + var(--space-1));background:var(--white);color:var(--accent);border-bottom:1px solid var(--line);font:600 var(--fs-xs)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.ann-toggle{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
.ann-toggle:checked,.ann-toggle:checked ~ .ann{display:none}
.ann-close{position:absolute;inset-inline-end:0;top:0;bottom:0;width:var(--tap,44px);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;line-height:1}
.ann-close:hover{background:var(--card2)}
.ann-toggle:focus-visible ~ .ann .ann-close{outline:2px solid var(--accent);outline-offset:-4px;border-radius:50%}

/* ---- Header: logo over navigation, on the logo's navy ---- */
header{position:sticky;top:0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);text-align:center;
  padding:var(--space-2) var(--space-4);background:var(--navy-deep);border-bottom:1px solid var(--navy-line);box-shadow:0 6px 18px rgba(var(--navy-deep-rgb),.25)}
header img{height:128px;width:auto;display:block;margin:0 auto;background:var(--navy-deep);border-radius:12px;padding:6px 12px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
header :focus-visible{outline-color:var(--white)}
nav{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:center}
nav a{color:var(--navy-ink);text-decoration:none;padding:7px 10px;border-radius:999px;font:500 var(--fs-xs)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  transition:background .15s ease,color .15s ease}
nav a:hover{background:var(--navy-mid);color:var(--white)}
nav a[aria-current="page"]{color:var(--white);background:var(--blue-active)}

/* ---- Layout and text ---- */
main{width:100%;max-width:var(--max);margin:0 auto;padding:var(--space-4) var(--space-4) 64px;flex:1}
main:focus{outline:none}
h1{font-size:clamp(26px,4.6vw,40px);line-height:1.08;letter-spacing:.01em;margin:var(--space-1) 0 var(--space-3);color:var(--accent);text-wrap:balance}
h2{font:600 var(--fs-xs)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:var(--space-5) 0 var(--space-2);
  padding-bottom:var(--space-2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--space-2)}
h2::before{content:"";width:14px;height:2px;background:var(--accent);flex:none}
p{margin:0 0 var(--space-3);text-wrap:pretty}
ul,ol{padding-inline-start:22px;margin:0 0 var(--space-3)}
li{margin:6px 0}
li::marker{color:var(--accent)}
li{text-wrap:pretty}
.card{text-wrap:balance}
strong{color:var(--ink);font-weight:600}
.lede{color:var(--mut);font-size:clamp(15px,2vw,17px);line-height:1.6;max-width:62ch}
main p,main ul,main ol{max-width:68ch}

/* ---- Buttons ---- */
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin:var(--space-3) 0 0;padding:12px 22px;border-radius:var(--radius-sm);background:var(--accent);color:var(--on-accent);
  font:700 var(--fs-xs)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;box-shadow:var(--glow);
  transition:transform .15s ease,box-shadow .15s ease}
.cta:hover{color:var(--on-accent)}
@media (hover:hover){.cta:hover{transform:translateY(-1px);box-shadow:var(--glow-hover)}}
.cta.alt{background:transparent;border:1px solid var(--accent);color:var(--accent);box-shadow:none}
.cta.alt:hover{background:var(--card2);color:var(--accent)}
.cta + .cta{margin-inline-start:var(--space-2)}

/* ---- Cards ---- */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);margin-top:var(--space-3)}
.card{background:var(--card);border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:var(--radius);padding:var(--space-3);overflow-wrap:anywhere;transition:transform .15s ease,box-shadow .15s ease}
@media (hover:hover){.card:hover{transform:translateY(-2px);box-shadow:var(--glow)}}
.card h3{margin:0 0 var(--space-1);color:var(--accent);font:700 17px/1.3 var(--font);letter-spacing:0}

/* ---- Notices ---- */
.draft{border:1px dashed var(--accent);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);color:var(--mut);margin:var(--space-3) 0;background:var(--bg2);font-family:var(--mono);font-size:12px}

/* ---- Footer ---- */
.site-footer{display:grid;grid-template-columns:1fr auto;gap:var(--space-3) var(--space-4);align-items:start;margin-top:auto;
  padding:var(--space-4) max(var(--space-4), calc((100% - var(--max)) / 2 + var(--space-4)));background:var(--bg2);border-top:1px solid var(--line)}
.foot-name{font:600 13px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--space-1)}
.foot-note{margin:0;color:var(--mut);font-size:13px;line-height:1.6;max-width:46ch}
.foot-credit{margin:var(--space-1) 0 0;color:var(--accent);font:600 var(--fs-xs)/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:flex-end;align-items:center}
.foot-links a{color:var(--fg);text-decoration:none;font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:6px 0;border-bottom:1px solid transparent;border-radius:0;transition:color .15s ease,border-color .15s ease}
/* These links live in a <nav>, so "nav a" and "nav a:hover" also match them; cancel the header pill and chip here. */
.foot-links a:hover{background:none;color:var(--accent);border-bottom-color:var(--accent)}
.foot-legal{grid-column:1 / -1;margin:0;padding-top:var(--space-3);border-top:1px solid var(--line);color:var(--mut);font:var(--fs-xs)/1.6 var(--mono);letter-spacing:.04em}
.foot-sep{margin:0 6px}

/* ---- Hero slides: horizontal scroll-snap, no JavaScript ---- */
.hero-slides{display:flex;gap:var(--space-2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;margin:0 0 var(--space-4);border-radius:var(--radius)}
.hero-slides::-webkit-scrollbar{display:none}
/* Mouse users have no swipe: show a thin scrollbar so the hidden slides can be found and reached */
@media (hover:hover) and (pointer:fine){
  .hero-slides{scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg2)}
  .hero-slides::-webkit-scrollbar{display:block;height:8px}
  .hero-slides::-webkit-scrollbar-track{background:var(--bg2)}
  .hero-slides::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
}
.hero-slides:focus-visible{outline-offset:4px}
.slide{position:relative;flex:0 0 100%;margin:0;scroll-snap-align:center;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg2);aspect-ratio:16/9}
.slide img{display:block;width:100%;height:100%;object-fit:cover}
.slide figcaption{position:absolute;inset-inline-start:0;bottom:0;padding:8px 14px;background:rgba(0,4,37,.78);color:var(--ivory);font:600 var(--fs-xs)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* ---- Responsive: tablet and desktop (min-width) ---- */
@media (min-width:641px){
html{scroll-padding-top:208px} /* sticky header is about 195px tall on every page (the lang="ar" nav link is 33.6px high, even on English pages) plus the 5px focus ring (2px outline + 3px offset), with a few px spare */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:641px){.slide{flex-basis:72%}}
@media (min-width:720px){.slide{flex-basis:calc(46% - 6px)}}
@media (min-width:884px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){.slide{flex-basis:calc(31% - 8px)}}

/* Short landscape viewports (phone on its side, 150% zoom on a laptop): a pinned 186px header would fill 40-50% of the screen */
@media (min-width:641px) and (max-height:540px){
  header{position:static}
  html{scroll-padding-top:0}
}

/* ---- Responsive: phones (max-width 640px) ---- */
@media (max-width:640.98px){
  body{line-height:1.55}
  header{position:static;padding:10px 16px}
  header img{height:88px}
  nav{gap:2px}
  nav a{padding:6px 8px;min-height:var(--tap,44px);display:inline-flex;align-items:center}
  main{padding:var(--space-3) var(--gutter-phone,18px) 48px}
  h1{font-size:26px;margin-top:4px}
  h2{margin-top:28px}
  .cta{width:100%;min-height:48px;margin-top:12px}
  .cta + .cta{margin-inline-start:0}
  .hero-slides{margin:0 calc(-1 * var(--gutter-phone)) var(--space-3);padding:0 var(--gutter-phone);border-radius:0;gap:10px;scroll-padding:0 var(--gutter-phone)}
  .slide{flex-basis:84%;border-radius:12px}
  .slide figcaption{padding:6px 10px}
  .grid{gap:10px;margin-top:12px}
  .card{padding:14px}
  .draft{padding:10px 12px}
  .site-footer{grid-template-columns:1fr;padding:var(--space-4) var(--gutter-phone)}
  .foot-links{justify-content:flex-start}
  .foot-links a{min-height:var(--tap,44px);display:inline-flex;align-items:center}
}
@media (max-width:380px){
  nav a{padding:6px 6px}
  header img{height:64px}
  .slide{flex-basis:88%}
}

/* ---- Arabic: IBM Plex Sans Arabic, no monospace caps ---- */
:lang(ar){font-family:var(--font-ar);line-height:1.85}
:lang(ar) h1,:lang(ar) h2,:lang(ar) nav a,:lang(ar) .cta,:lang(ar) .card h3,:lang(ar) .ann,:lang(ar) footer,:lang(ar) .draft{font-family:var(--font-ar);text-transform:none;letter-spacing:0}
:lang(ar) h1{line-height:1.4}
:lang(ar) h2{font-size:18px;line-height:1.6}
:lang(ar) h2::before{order:1}
/* Latin names inside Arabic copy: isolate and set LTR so trailing punctuation ("Co.") stays attached to the name. */
:lang(ar) span:lang(en){unicode-bidi:isolate;direction:ltr}
:lang(ar) nav a{font-size:14px;line-height:1.4}
.cta:lang(ar){font-family:var(--font-ar);font-size:15px;line-height:1.5;letter-spacing:0;text-transform:none}
nav a:lang(ar){font-family:var(--font-ar);font-size:14px;line-height:1.4;letter-spacing:0;text-transform:none}
:lang(ar) .card h3{line-height:1.6}
:lang(ar) ol{list-style-type:arabic-indic}
:lang(ar) .cta{font-size:15px;line-height:1.5}
:lang(ar) .ann{font-size:13px;line-height:1.6}
/* .skip sits after this block and its font shorthand would otherwise win; higher specificity keeps Plex Arabic on the Arabic skip link. */
:lang(ar) .skip{font-family:var(--font-ar);font-size:14px;line-height:1.5}
:lang(ar) .site-footer{font-size:13px;line-height:1.7}
:lang(ar) .foot-name,:lang(ar) .foot-links a,:lang(ar) .foot-legal,:lang(ar) .foot-credit{font-family:var(--font-ar);text-transform:none;letter-spacing:0}
:lang(ar) .foot-legal{font-size:13px;line-height:1.7}
:lang(ar) .foot-links a{font-size:14px}
:lang(ar) .foot-credit{font-size:13px}
:lang(ar) .slide figcaption{font-family:var(--font-ar);font-size:13px;line-height:1.5;text-transform:none;letter-spacing:0}
:lang(ar) .draft{font-size:13px}
@media (min-width:641px){:lang(ar) .draft{font-size:14px}}
@media (max-width:640.98px){
  :lang(ar) body{line-height:1.8}
  :lang(ar) h1{font-size:24px}
  :lang(ar) h2{font-size:17px}
  :lang(ar) nav a{font-size:13px}
  :lang(ar) .slide figcaption{font-size:12px}
}
@media (max-width:380px){:lang(ar) nav a{font-size:12px}}

/* ---- Skip link: visible only on keyboard focus ---- */
.skip{position:absolute;top:-64px;inset-inline-start:12px;z-index:10;padding:10px 16px;border-radius:8px;background:var(--accent);color:var(--white);font:600 13px/1.2 var(--font);text-decoration:none}
.skip:focus{top:12px;outline:2px solid var(--white);outline-offset:2px}
.skip:hover{color:var(--white)} /* a:hover would otherwise turn the text dark navy on its navy button */

/* ---- Forced colors (Windows High Contrast): keep cues that rely on fills ---- */
@media (forced-colors:active){
  .cta{border:1px solid currentColor}
  nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  html,.hero-slides{scroll-behavior:auto}
*{transition:none!important}
  .cta:hover,.card:hover{transform:none}
}


/* ---- Print: keep the text, drop interactive chrome (white CTA text would vanish once backgrounds are not printed) ---- */
@media print{
  body{display:block;min-height:0}
  header{position:static;box-shadow:none}
  .skip,.ann,.ann-toggle,header nav,.hero-slides,.foot-links,.cta{display:none}
  .card,.draft{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
}