/* =============================================================================
   Egyptian Jiu-Jitsu Federation — public site
   Palette taken from the federation crest: black ground, gold as the identity
   colour, the flag's red kept for one accent only so it never competes.
   ========================================================================== */

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/cairo-arabic.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("/assets/fonts/oswald.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/plex-sans.woff2") format("woff2");
}

:root {
  --ink:        #08080a;
  --ink-2:      #101013;   /* alternating band */
  --ink-3:      #17171b;   /* raised card */
  --paper:      #f4f1ea;
  --fog:        #b6afa4;
  --fog-dim:    #948d82;   /* 6.1:1 on --ink */
  --gold:       #d4a44c;   /* identity gold, from the crest */
  --gold-bright:#e8c56a;   /* headings and large text */
  --gold-deep:  #8a6a22;
  --gold-btn:   #b98a2f;   /* 4.8:1 with #08080a label */
  --red:        #c8102e;   /* Egyptian flag red — one accent, used sparingly */
  --green:      #1f7a3d;
  --line:       rgba(212, 164, 76, 0.18);
  --line-soft:  rgba(244, 241, 234, 0.10);
  --field-line: #5d5850;   /* 3.05:1 on --ink — the edge of a form control */
  --card:       rgba(255, 255, 255, 0.035);
  --card-hi:    rgba(212, 164, 76, 0.07);

  --ar:  "Cairo", "Segoe UI", Tahoma, sans-serif;
  --dis: "Oswald", "Arial Narrow", sans-serif;
  --lat: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  --pad: clamp(18px, 5vw, 60px);
  --max: 1240px;
  --radius: 12px;
}

* { box-sizing: border-box; }
/* overflow-x here is what stops the page being dragged sideways on a phone.
   It must be `clip`, not `hidden`: `hidden` makes this element a scroll
   container, and a scroll container silently breaks position:sticky for
   everything inside it — which is what stopped the header following the page.
   `hidden` is left first as a fallback for browsers without `clip`. */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
  /* A fragment link and an upward Tab both scroll the target to y=0, which is
     underneath the sticky header. Reserve its height so the thing you jumped
     to is actually on screen. */
  scroll-padding-top: 128px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ar);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  /* Long Arabic compounds and pasted URLs must wrap rather than widen the page. */
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 3px; }

.shell { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: #000; padding: 10px 18px; font-weight: 700;
}
.skip:focus { inset-inline-start: 0; }

/* ------------------------------------------------------------- typography */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.32; margin: 0; }
.kicker {
  font-family: var(--dis); font-size: 11.5px; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 7px;
}
.section-title { font-size: clamp(22px, 3.3vw, 33px); }
.sub { color: var(--fog); margin: 9px 0 0; max-width: 64ch; }
.lat { font-family: var(--lat); direction: ltr; unicode-bidi: isolate; }
.num { font-family: var(--dis); font-variant-numeric: tabular-nums; }

section { padding-block: clamp(44px, 6.5vw, 80px); }
.band { background: var(--ink-2); }
.head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 28px;
}
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 24px; border-radius: 7px;
  font-family: var(--ar); font-size: 15px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary { background: var(--gold-btn); color: #0a0a0b; }
.btn-primary:hover { background: var(--gold-bright); }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); background: var(--card-hi); }
.btn-sm { min-height: 38px; padding: 7px 16px; font-size: 13.5px; }
.btn-block { width: 100%; }
.more { font-size: 14.5px; font-weight: 700; color: var(--gold); }
.more::after { content: " ←"; }
.more:hover { color: var(--gold-bright); }

/* ----------------------------------------------------------------- header */
.socials { display: flex; align-items: center; gap: 6px; flex: none; }
.socials a {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--fog);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: color .18s ease, background-color .18s ease,
              border-color .18s ease, transform .18s ease;
}
.socials a:hover,
.socials a:focus-visible {
  color: #0a0a0b;
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.socials svg { width: 16px; height: 16px; fill: currentColor; display: block; }
@media (prefers-reduced-motion: reduce) { .socials a:hover { transform: none; } }

@media (max-width: 480px) { .socials a { width: 32px; height: 32px; } }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 8, 10, 0.95); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

/* Row 1 — identity, motto, accounts, primary action.
   Measured against the site's own Cairo file, this row carries about 850px of
   content: the mark and name 296px, the motto 179px, the accounts 154px, the
   button 171px. Run edge to edge on a 1900px monitor that left 992px empty —
   54% of the row — which is the hole the client kept pointing at. Held to the
   same 1240px column as the page content below, the same content fills roughly
   three quarters of the row and the leftover reads as page margin instead of a
   gap. The menu below keeps the full window because fourteen Arabic labels
   genuinely need it; a wide menu band under a centred masthead is a normal
   arrangement, and the border between them makes it deliberate. */
.bar { display: flex; align-items: center; gap: 16px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; flex: 0 1 auto; }
.brand img { width: 62px; height: 62px; object-fit: contain; flex: none; }

/* The federation's own line, holding the middle of the row. */
.bar .motto {
  flex: 1 1 auto; min-width: 0; margin: 0; text-align: center;
  font-family: var(--dis); font-size: 12.5px; letter-spacing: .12em;
  color: var(--gold); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-text { min-width: 0; }
.brand b {
  display: block; font-size: 17px; line-height: 1.3; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-text > span {
  display: block; font-family: var(--dis); font-size: 10px; letter-spacing: .18em;
  color: var(--gold); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-cta { flex: none; }
.footer-motto {
  font-family: var(--dis); font-size: 12px; letter-spacing: .2em;
  color: var(--gold); text-transform: uppercase; margin: 0 0 10px;
}

/* Measured against the site's own Cairo file: the fixed parts of this row —
   mark, name, accounts, button, burger — come to about 730px, and the motto
   needs about 180px. So it still fits at 1000px and only then has to go; the
   accounts follow at 820px, and the button stays longest because it is the one
   thing a visitor came to press. The motto is on every page in the footer, so
   it is never actually lost. */
@media (max-width: 1000px) { .bar .motto { display: none; } }
@media (max-width: 820px)  { .site-header .socials { display: none; } }

/* Row 2 — the menu, on its own full-width band.
   Measured against the site's own Cairo file, the fourteen Arabic labels need
   about 1650px of run at the header's type size. Held inside the 1240px content
   shell they wrapped, and the overflow row sat hard against the right edge —
   which reads as a mistake rather than a menu. So the band drops the shell's
   width limit and uses the whole window, the type and padding tighten as the
   window narrows, and the items are centred: one clean line on a wide monitor,
   and on a laptop two balanced rows that look chosen. */
.mainnav { border-top: 1px solid var(--line-soft); }
.mainnav .shell { max-width: none; padding-inline: clamp(12px, 2.4vw, 40px); }
.mainnav ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 3px 2px; list-style: none; margin: 0; padding: 0;
}
.mainnav a {
  display: block; color: var(--fog); border-radius: 6px; white-space: nowrap;
  padding: 10px clamp(6px, 0.55vw, 10px);
  font-size: clamp(12.4px, 0.72vw, 13.6px);
  transition: color .16s ease, background-color .16s ease;
}
.mainnav a:hover { color: var(--paper); background: rgba(255, 255, 255, .06); }
.mainnav a[aria-current="page"] { color: var(--gold-bright); box-shadow: inset 0 -2px 0 var(--gold); }

.burger {
  display: none; flex: none; background: none; border: 1px solid var(--line);
  border-radius: 7px; color: var(--paper); width: 44px; height: 44px;
  font-size: 18px; cursor: pointer;
}

@media (max-width: 1024px) {
  .burger { display: block; }
  .mainnav { display: none; }
  .mainnav.open { display: block; max-height: 68vh; overflow-y: auto; }
  .mainnav ul { flex-direction: column; gap: 0; padding-block: 6px; }
  .mainnav a { padding: 12px 6px; border-bottom: 1px solid var(--line-soft); border-radius: 0; font-size: 15px; }
  .mainnav li:last-child a { border-bottom: 0; }
}

/* Below this the federation's English name is the first thing worth dropping. */
@media (max-width: 420px) {
  .brand img { width: 44px; height: 44px; }
  .brand b { font-size: 14.5px; }
  .brand-text > span { display: none; }
  .header-cta { display: none; }
}

/* ------------------------------------------------------------------- hero */
.hero { position: relative; display: grid; align-items: center; overflow: hidden; min-height: min(84vh, 700px); }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to left, rgba(8,8,10,.97) 10%, rgba(8,8,10,.78) 52%, rgba(8,8,10,.55) 100%);
}
.hero .shell { position: relative; z-index: 1; padding-block: clamp(56px, 9vw, 104px); }
.hero-in { max-width: 780px; }
.hero h1 { font-size: clamp(28px, 5.6vw, 56px); margin: 12px 0 16px; }
.hero h1 em { font-style: normal; color: var(--gold-bright); }
.hero p.lead { color: #ded8cd; font-size: clamp(15px, 1.9vw, 18px); max-width: 58ch; margin: 0 0 26px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-motto { font-family: var(--dis); letter-spacing: .3em; font-size: 12px; color: var(--gold); text-transform: uppercase; }

/* The dark end of the gradient took the text to 3.93:1. Lightening the deep
   stop keeps the brand colour and clears 4.5:1 across the whole width. */
.ticker { position: relative; background: linear-gradient(90deg, #b98c33, var(--gold-btn)); color: #0a0a0b; overflow: hidden; white-space: nowrap; }
.ticker div { display: inline-block; padding-block: 9px; font-size: 14px; font-weight: 700; animation: slide 40s linear infinite; }
/* 2.2.2 Pause, Stop, Hide: moving text needs a way to stop it. Hovering or
   tabbing to the strip is enough — no extra control in the way of the news. */
.ticker:hover div, .ticker:focus-within div { animation-play-state: paused; }
.ticker span { padding-inline: 26px; }
.ticker span::before { content: "◆"; margin-inline-end: 12px; font-size: 8px; vertical-align: middle; opacity: .6; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ticker div { animation: none; } }

/* -------------------------------------------------------------- countdown */
.countdown { background: linear-gradient(180deg, var(--ink-2), var(--ink)); border-block: 1px solid var(--line); padding-block: 24px; }
.cd-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cd-units { display: flex; gap: 10px; }
.cd-unit { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 18px; text-align: center; min-width: 86px; }
.cd-unit b { display: block; font-family: var(--dis); font-size: 30px; font-weight: 600; color: var(--gold-bright); line-height: 1.05; font-variant-numeric: tabular-nums; }
.cd-unit span { font-size: 12.5px; color: var(--fog-dim); }

/* ------------------------------------------------------------------ cards */
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }

/* The `hidden` attribute is only `display:none` at user-agent weight, which any
   author `display` rule beats. The documents filter sets it and nothing moved.
   Give it author weight, once, for the whole stylesheet. */
[hidden] { display: none !important; }

.card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--line); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card h3 { font-size: 17px; line-height: 1.45; }
.card p { margin: 0; font-size: 14.5px; color: var(--fog); flex: 1; }
.date { font-family: var(--lat); font-size: 12px; letter-spacing: .07em; color: var(--fog-dim); }

.thumb { aspect-ratio: 16 / 10; background: var(--ink-3); position: relative; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
/* People are photographed head-up: cropping a portrait from the centre cuts the
   face off a full-length shot. Anchor the crop to the top instead. */
.thumb.portrait img, .portrait-box img { object-position: center top; }
.thumb.square { aspect-ratio: 1 / 1; }
.thumb.portrait { aspect-ratio: 4 / 5; }
.thumb-fallback {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(212,164,76,.16), rgba(8,8,10,.9));
}
.thumb-fallback img { width: 46%; height: auto; object-fit: contain; opacity: .5; }
.tag {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
  background: var(--gold-btn); color: #0a0a0b; font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 4px;
}

/* ------------------------------------------------------------------ table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--card); }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th, td { text-align: start; padding: 13px 18px; font-size: 14.5px; border-bottom: 1px solid var(--line-soft); }
th { font-size: 11.5px; letter-spacing: .11em; color: var(--gold); font-weight: 600; background: rgba(0,0,0,.3); text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(212,164,76,.04); }
td.name { font-weight: 700; }
td.rank { font-family: var(--dis); font-size: 17px; color: var(--gold-bright); width: 1%; }

.pill { display: inline-block; font-size: 12px; padding: 2px 11px; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--fog); white-space: nowrap; }
.pill.open { border-color: rgba(31,122,61,.5); color: #66d18e; background: rgba(31,122,61,.12); }
.pill.gold { border-color: var(--line); color: var(--gold-bright); background: var(--card-hi); }
.pill.study { border-color: rgba(212,164,76,.3); color: var(--fog-dim); }
/* Egyptian-flag red, the brief's accent colour, reserved for "happening now".
   Sparing on purpose: an accent that appears everywhere stops being one. */
.pill.live {
  border-color: rgba(200,16,46,.55); color: #ff7d90;
  background: rgba(200,16,46,.14); font-weight: 700;
}
.pill.live::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); margin-inline-end: 6px; vertical-align: middle;
  animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pill.live::before { animation: none; } }

/* The national-team sections carry the flag's red on their rule. */
#teams .section-title::after,
.section-title.eg::after {
  content: ""; display: block; width: 46px; height: 3px; margin-top: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--red) 0 33%, var(--paper) 33% 66%, #111 66%);
}

/* ------------------------------------------------------------------ stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr)); gap: 14px; }
.stat { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 24px 16px; text-align: center; }
.stat b { display: block; font-family: var(--dis); font-size: clamp(31px, 4.6vw, 43px); font-weight: 600; color: var(--gold-bright); line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 8px; font-size: 14px; color: var(--fog); }

/* -------------------------------------------------------- prose & blocks */
.prose { max-width: 72ch; color: var(--fog); }
.prose p { margin: 0 0 14px; }
.prose p.strong { color: var(--paper); font-weight: 700; }
.prose h3 { color: var(--paper); margin: 26px 0 8px; font-size: 18px; }
.prose ul { padding-inline-start: 1.15em; margin: 0 0 14px; }
.prose li { margin: 4px 0; }

.panel { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px; }
.panel h3 { font-size: 18px; margin-bottom: 8px; }
.panel h3::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--gold); vertical-align: middle; margin-inline-end: 10px; }
.panel p, .panel ul { color: var(--fog); font-size: 14.6px; margin: 0; }
.panel ul { padding-inline-start: 1.1em; }

blockquote.quote { margin: 0; padding-inline-start: 20px; border-inline-start: 3px solid var(--gold); color: var(--fog); font-size: 16.5px; }
blockquote.quote p:last-child { margin-bottom: 0; }

.portrait-box {
  aspect-ratio: 4 / 5; border-radius: var(--radius); border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 35%, rgba(212,164,76,.18), rgba(8,8,10,.95));
  display: grid; place-items: center; text-align: center; padding: 20px; color: var(--fog-dim); font-size: 13px;
  overflow: hidden;
}
.portrait-box img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ empty state */
/* Used wherever the federation has not supplied data yet — the page keeps its
   shape and says so plainly instead of showing invented rows. */
.empty {
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: rgba(212,164,76,.03); padding: 40px 26px; text-align: center;
}
.empty .mark { font-size: 26px; margin-bottom: 8px; opacity: .75; }
.empty b { display: block; font-size: 17px; margin-bottom: 6px; }
.empty p { color: var(--fog-dim); margin: 0 auto; max-width: 52ch; font-size: 14.5px; }
.empty .btn { margin-top: 16px; }

/* ------------------------------------------------------------------ forms */
.field { display: block; margin-bottom: 14px; }
.field > label { display: block; font-size: 13.5px; color: var(--fog); margin-bottom: 6px; }
.field .req { color: var(--gold); }
.field .hint { font-size: 12.5px; color: var(--fog-dim); margin-top: 4px; }
/* The border was rgba(244,241,234,.10) — 1.32:1 against the page, which is not
   a visible edge. 1.4.11 asks for 3:1 on the boundary of a control, and on a
   dark form the boundary is the only thing that says "type here". */
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number],
input[type=search], input[type=password], input[type=url], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 13px;
  background: rgba(255,255,255,.05); border: 1px solid var(--field-line); border-radius: 7px;
  color: var(--paper); font-family: var(--ar); font-size: 15px;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
select option { background: #17171b; color: var(--paper); }
input[type=file] { width: 100%; padding: 9px; background: rgba(255,255,255,.05); border: 1px dashed var(--line); border-radius: 7px; color: var(--fog); font-family: var(--ar); font-size: 13.5px; }
/* #6f6a62 measured 3.43:1 — below 4.5:1, and on the membership lookup the
   placeholder carries the only hint about the format of a membership number. */
input::placeholder, textarea::placeholder { color: #9a938a; opacity: 1; }

/* outline:none removed the focus ring for everyone, including forced-colors
   mode where a box-shadow is not painted at all. Keep a real outline and let
   the glow be decoration on top of it. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--gold);
  outline: 2px solid var(--gold-bright); outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(212,164,76,.16);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,164,76,.16);
}
input[type=file] { border-color: var(--field-line); }

/* consent checkbox */
.field.consent { margin-bottom: 4px; }
.consent-label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
                 font-size: 14px; color: var(--paper); line-height: 1.6; }
.consent-label input[type=checkbox] {
  flex: none; width: 20px; height: 20px; min-height: 0; margin-top: 2px;
  accent-color: var(--gold); cursor: pointer;
}

.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)); gap: 12px; align-items: end; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px; margin-bottom: 22px; }
.filters .field { margin: 0; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 16px; }
.form-grid .wide { grid-column: 1 / -1; }

.alert { border-radius: 9px; padding: 13px 16px; margin-bottom: 18px; font-size: 14.5px; border: 1px solid; }
.alert-ok { background: rgba(31,122,61,.12); border-color: rgba(31,122,61,.45); color: #7fd8a0; }
.alert-error { background: rgba(200,16,46,.1); border-color: rgba(200,16,46,.4); color: #ff8b9c; }
.alert ul { margin: 6px 0 0; padding-inline-start: 1.1em; }

/* --------------------------------------------------------------- services */
.svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(226px, 100%), 1fr)); gap: 14px; }
.svc a { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 6px; transition: border-color .18s, background .18s; }
.svc a:hover { border-color: var(--gold); background: var(--card-hi); }
.svc .ico {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 2px;
  border-radius: 10px;
  background: var(--card-hi);
  border: 1px solid var(--line);
  color: var(--gold);
}
.svc .ico svg { width: 22px; height: 22px; display: block; }
.svc a:hover .ico { background: var(--gold); color: #0a0a0b; border-color: var(--gold); }
.svc b { font-size: 15.5px; }
.svc span { font-size: 13.5px; color: var(--fog); }

/* ------------------------------------------------------------------ media */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.gallery a { aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--ink-3); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery a:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .gallery a:hover img { transform: none; } }

.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.videos .frame { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-soft); background: #000; }
.videos iframe { width: 100%; height: 100%; border: 0; }

.partners { display: flex; flex-wrap: wrap; gap: 14px; }
.partner {
  flex: 1 1 190px; min-height: 104px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--card);
  display: grid; place-items: center; text-align: center; padding: 16px;
  font-family: var(--dis); letter-spacing: .12em; font-size: 14px;
  color: var(--fog); text-transform: uppercase;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.partner:hover { color: var(--gold-bright); border-color: var(--line); }

/* Sponsor marks are supplied in their own colours — AJP's is black artwork,
   FAB's is dark blue — and none of them read on a black ground. A light tile is
   the conventional sponsor wall for exactly this reason: every logo keeps its
   real colours instead of being recoloured or inverted. */
.partner--logo {
  background: #f4f4f2;
  border-color: rgba(0, 0, 0, 0.08);
  padding: 18px 22px;
}
.partner--logo:hover { background: #fff; border-color: var(--gold); transform: translateY(-2px); }
.partner--logo img {
  max-height: 54px; max-width: 100%; width: auto; height: auto;
  object-fit: contain; mix-blend-mode: multiply;
  /* The tile is the link; the logo must never be the thing that receives the
     tap. mix-blend-mode creates a stacking context, and hit-testing through one
     is not worth relying on. */
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .partner--logo:hover { transform: none; } }

/* ------------------------------------------------------------------- misc */
.info { margin: 0; padding: 0; list-style: none; }
.info li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.6px; color: var(--fog); }
.info b { color: var(--paper); min-width: 104px; flex: none; }
@media (max-width: 480px) {
  .info li { flex-direction: column; gap: 2px; }
  .info b { min-width: 0; }
}

.breadcrumb { font-size: 13px; color: var(--fog-dim); padding-block: 16px 0; }
.breadcrumb a:hover { color: var(--gold); }

.page-head { padding-block: clamp(34px, 5vw, 56px) 0; border-bottom: 1px solid var(--line-soft); }
.page-head h1 { font-size: clamp(25px, 4vw, 38px); margin-bottom: 8px; }
.page-head .sub { margin-bottom: 26px; }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 42px; min-height: 42px; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: 8px; font-family: var(--dis); color: var(--fog); }
.pagination a:hover { border-color: var(--gold); color: var(--gold-bright); }
.pagination .current { background: var(--gold-btn); border-color: var(--gold-btn); color: #0a0a0b; font-weight: 600; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
/* The selected tab is also marked structurally, so it survives a high-contrast
   theme that discards the author's colours. */
.tab[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -2px 0 currentColor; }
.tab { font-family: var(--dis); letter-spacing: .13em; font-size: 13px; text-transform: uppercase; background: transparent; border: 1px solid var(--line-soft); color: var(--fog); border-radius: 999px; padding: 9px 20px; min-height: 40px; cursor: pointer; }
.tab[aria-selected="true"], .tab.active { background: var(--gold-btn); border-color: var(--gold-btn); color: #0a0a0b; font-weight: 600; }

.medals { display: flex; gap: 12px; font-family: var(--dis); font-size: 15px; }
.medals span::before { margin-inline-end: 5px; }
.medals .g::before { content: "🥇"; }
.medals .s::before { content: "🥈"; }
.medals .b::before { content: "🥉"; }

/* ----------------------------------------------------------------- footer */
.site-footer { background: #000; border-top: 1px solid var(--line); padding-block: 44px 20px; }
/* The footer's brand column plus its auto-fit link columns demand roughly
   390px before they will lay out. On a narrow phone that is wider than the
   viewport, and the whole page could be dragged sideways as a result — min()
   cannot rescue a multi-track template, so the column count drops explicitly. */
.fgrid { display: grid; grid-template-columns: minmax(min(220px, 100%), 1.4fr) repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 28px; }
@media (max-width: 860px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 460px) { .fgrid { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.site-footer h4 { margin: 0 0 12px; font-size: 12.5px; letter-spacing: .16em; color: var(--gold); font-family: var(--dis); text-transform: uppercase; font-weight: 500; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: block; padding: 4px 0; font-size: 14px; color: var(--fog); }
.site-footer li a:hover { color: var(--gold-bright); }
.footer-social a { display: flex; align-items: center; gap: 9px; }
.footer-social svg { width: 14px; height: 14px; fill: currentColor; flex: none; opacity: .85; }
.fbottom { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--fog-dim); }
.fbottom a:hover { color: var(--gold); }
.silka { display: flex; align-items: center; gap: 8px; font-family: var(--dis); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; }
.silka img { width: 20px; opacity: .8; }

@media print {
  .site-header, .topbar, .site-footer, .ticker, .btn, .filters { display: none; }
  body { background: #fff; color: #000; }
}


/* ------------------------------------------------------- demo preview bar
   Shown only when the demo_banner setting is set, which is true on the private
   client-preview copy and never on the live site. Deliberately loud: sample
   records must never be mistaken for the federation's real ones. */
.demo-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: repeating-linear-gradient(135deg, #7a1f1f, #7a1f1f 14px, #6a1a1a 14px, #6a1a1a 28px);
  color: #ffe9e9;
  font-family: var(--ar); font-size: 13.5px; font-weight: 700;
  padding: 9px 16px; text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.demo-bar__dot {
  width: 9px; height: 9px; border-radius: 50%; background: #ff5c5c; flex: none;
  box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.25);
}
@media print { .demo-bar { position: static; } }


/* ------------------------------------------------- narrow-screen safety net
   Grid and flex children default to min-width:auto, which means a long word, a
   wide image or a nowrap run can push a track past its share and widen the
   page. These floors are what actually keep the layout inside the viewport. */
.grid > *, .stats > *, .svc > *, .fgrid > *, .partners > *,
.filters > *, .form-grid > *, .contact > *, .vmo > * { min-width: 0; }

.card, .panel, .tile, .stat { max-width: 100%; }