/* =============================================================================
 * IEC shell components: layout primitives, section header, buttons, header and
 * navbar, mobile drawer, footer, form helpers, entry loader.
 * Semantic tokens only. Breakpoints: sm 640 / md 768 / lg 1024. Logical
 * properties throughout so one sheet serves RTL and LTR.
 * ========================================================================== */

/* ---- Layout primitives ---- */
.container {
  margin-inline: auto;
  max-width: var(--container-max);
  padding-inline: var(--container-gutter);
}

/* Fluid rhythm: one curve instead of three steps that stopped at 1024px. */
.section {
  padding-block: clamp(3rem, 1.4rem + 4.2vw, 8rem);
}

.section--tint {
  background: var(--color-surface-tint);
}

/* ---- Section header (kicker + heading + sub) ---- */
.section-header {
  max-width: 640px;
}

.section-header.is-center {
  margin-inline: auto;
  text-align: center;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-link);
}

.section-header.is-center .kicker {
  justify-content: center;
}

.kicker::before {
  content: '';
  display: inline-block;
  height: 2.5px;
  width: 1.5rem;
  border-radius: 2px;
  background: var(--color-gold-400);
}

.section-header h1,
.section-header h2 {
  margin-top: 0.75rem;
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: 700;
  color: var(--color-ink);
}

.section-header .sub {
  margin-top: 0.875rem;
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-muted);
}

/* ---- Buttons (variants: primary / light / ghost; sizes: sm / md / lg) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  font-weight: 600;
  text-align: center;
  transition: transform var(--motion-base) var(--ease-out),
    background-color var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  cursor: not-allowed;
  background: var(--color-disabled-bg);
  color: var(--color-disabled-fg);
}

.btn--md {
  padding: 0.625rem 1.5rem;
  font-size: 1rem;
}

.btn--sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
}

.btn--lg {
  padding: 0.75rem 2rem;
  font-size: var(--text-body-lg);
}

.btn--primary {
  background: var(--color-cta);
  color: var(--color-on-brand);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--color-cta-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn--light {
  background: var(--color-surface);
  color: var(--color-brand-deep);
}

.btn--light:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--color-on-brand);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}

.btn--ghost:hover {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}

/* ---- Header / Navbar ---- */
/* The header palette lives in custom properties so every control reads one
   source. It is a solid bar on every page; on the homepage the bar is fixed
   over the hero (script only) and `is-stuck` marks the scrolled state. */
.site-header {
  /* One palette, swapped as a set: the hero overlay state below redefines these
     and nothing else. 76% over the blur, not the old 94% — that read as a
     painted bar rather than glass. */
  --header-bg: color-mix(in srgb, var(--color-surface) 76%, transparent);
  --header-line: rgba(0, 0, 0, 0.06);
  --header-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
  --header-blur: blur(16px);
  --header-fg: var(--color-green-700);
  --header-fg-strong: var(--color-green-800);
  --header-tint: color-mix(in srgb, var(--color-green-600) 10%, transparent);
  --header-line-soft: color-mix(in srgb, var(--color-green-600) 30%, transparent);
  --header-chip-bg: color-mix(in srgb, var(--color-green-600) 7%, transparent);

  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  border-bottom: 1px solid var(--header-line);
  background: var(--header-bg);
  box-shadow: var(--header-shadow);
  backdrop-filter: var(--header-blur);
  -webkit-backdrop-filter: var(--header-blur);
  transition: background-color var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    backdrop-filter var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}

/* Homepage: the bar takes no layout space so the hero starts at the very top.
   Script-gated because `is-stuck` is toggled by main.js; without JS the sticky
   default above stays in force. */
@media (scripting: enabled) {
  .page-has-hero .site-header {
    position: fixed;
    inset-inline: 0;
  }
}

/* Fully opaque while the hero is behind the bar (and always, without JS). */
.page-has-hero .site-header:not(.is-stuck) {
  background: var(--color-surface);
}

/* The header shares the hero's measure so the logo lines up with the headline;
   the fallbacks keep every other page on the standard container. */
.navbar {
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-inline: auto;
  max-width: 100%;
  padding-block: 0.7rem;
  padding-inline: var(--hero-gutter, var(--container-gutter));
}

/* The lockup is the brand: the actions give way, never the logo. */
.navbar__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  text-decoration: none;
  transition: transform var(--motion-base) var(--ease-out);
}

.navbar__logo:hover {
  transform: scale(1.02);
}

/* Sized by height (64px ceiling keeps the bar height fixed); width follows the
   3:1 lockup. Fluid below the ceiling so the mark tracks the viewport. */
.navbar__logo img {
  height: clamp(2.4rem, 1.9rem + 1.9vw, 4rem);
  width: auto;
  max-height: 64px;
  object-fit: contain;
}

.navbar__nav {
  margin-inline-start: auto;
  display: none;
  align-items: center;
  gap: 0.5rem;
}

/* Primary routes read in the brand green (~8:1 on the bar), not body ink. */
.nav-link {
  font-family: var(--font-display);
  position: relative;
  border-radius: 9999px;
  padding: 0.6rem 1.125rem;
  font-size: 1.05rem;
  font-weight: 600;
  /* A two-word label breaking in half makes the whole bar taller — which is how
     the condensed state ended up TALLER than the resting one. */
  white-space: nowrap;
  color: var(--header-fg);
  transition: background-color var(--motion-base) var(--ease-out),
    color var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
  text-decoration: none;
}

@media (hover: hover) {
  .nav-link:hover {
    background: var(--header-tint);
    color: var(--header-fg-strong);
    transform: translateY(-1px);
  }
}

/* Keyboard gets the same affordance a mouse gets. */
.nav-link:focus-visible {
  background: var(--header-tint);
  color: var(--header-fg-strong);
}

/* Current page: a gold rule under the label, not a filled pill (a pill reads
   as a button). */
.nav-link[aria-current='page'] {
  color: var(--header-fg-strong);
}

.nav-link[aria-current='page']::after {
  content: '';
  position: absolute;
  inset-inline: 1.125rem;
  bottom: 0.28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-gold-400);
}

.navbar__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.navbar__cta {
  display: none;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .navbar__cta {
    display: inline-flex;
  }
}

@media (min-width: 1024px) {

  /* Three tracks so the nav sits dead-centre in the bar: the logo and the
     actions get equal side columns, the nav is the auto middle. */
  .navbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1.5rem;
  }

  .navbar__logo {
    justify-self: start;
  }

  .navbar__nav {
    display: flex;
    justify-content: center;
    margin-inline-start: 0;
  }

  .navbar__actions {
    justify-self: end;
    margin-inline-start: 0;
  }
}

/* Small desktop (1024-1199): the full nav is on but ~90px short of its
   measure, so the pills tighten rather than dropping links. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .navbar {
    gap: 1.25rem;
  }

  .navbar__nav {
    gap: 0.25rem;
  }

  .nav-link {
    padding: 0.55rem 0.75rem;
    font-size: 0.975rem;
    white-space: nowrap;
  }

  .nav-link[aria-current='page']::after {
    inset-inline: 0.75rem;
  }

  .navbar__actions {
    gap: 0.625rem;
  }
}

/* Below the desktop nav: logo — [contact ≥768] — locale — [CTA ≥640] — burger */
@media (max-width: 1023px) {
  .navbar {
    gap: 0.75rem;
    padding-block: 0.6rem;
  }

  .navbar__actions {
    gap: 0.5rem;
  }
}

/* ---- Contact link with arrow ---- */
.nav-contact-link {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #181c19;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
  transition: opacity var(--motion-base) var(--ease-out);
}

.nav-contact-link .nav-contact-label {
  border-bottom: 1.5px solid #181c19;
  padding-bottom: 2px;
}

.nav-contact-link .nav-arrow {
  color: #181c19;
  flex-shrink: 0;
  display: inline-block;
  transition: transform var(--motion-base) var(--ease-out);
}

.nav-contact-link:hover {
  opacity: 0.75;
}

.nav-contact-link:hover .nav-arrow {
  transform: translate(2px, -2px);
}

/* Phones: contact lives in the drawer; in the bar it cost the logo its width. */
@media (max-width: 767px) {
  .nav-contact-link {
    display: none;
  }
}

/* ---- Compact single-target locale switch pill ---- */
.locale-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.125rem;
  padding: 0.2rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(8, 76, 54, 0.2);
  background: #ffffff;
  color: #181c19;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
  direction: ltr;
  transition: background-color var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    color var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
}

.locale-switch:hover {
  background: #ffffff;
  border-color: rgba(8, 76, 54, 0.45);
  box-shadow: 0 3px 10px rgba(8, 76, 54, 0.1);
  color: #084c36;
  transform: translateY(-1px);
}

.locale-switch:hover .locale-icon--planet {
  transform: rotate(15deg);
}

.locale-switch:hover .locale-icon--sa {
  transform: scale(1.08);
}

.locale-switch span[lang] {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

.locale-switch span[lang='en'] {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}

.locale-switch span[lang='ar'] {
  font-family: var(--font-display);
}

.locale-switch__divider {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: rgba(24, 28, 25, 0.22);
}

.locale-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #084c36;
  transition: transform var(--motion-base) var(--ease-out);
}

.locale-icon--sa {
  color: #084c36;
}

.locale-icon--planet {
  color: #084c36;
}

/* Homepage, hero behind the bar */
@media (scripting: enabled) {
  .page-has-hero .site-header:not(.is-stuck) .locale-switch {
    border: 1px solid rgba(8, 76, 54, 0.22);
    background: #ffffff;
  }
}

@media (max-width: 767px) {
  .locale-switch {
    height: 1.95rem;
    padding: 0.15rem 0.6rem;
    gap: 0.35rem;
  }

  .locale-switch span[lang] {
    font-size: 0.78rem;
  }
}

/* ---- Mobile navigation ---- */
.mobile-nav {
  display: block;
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none;
  }
}

.mobile-nav__trigger {
  display: grid;
  place-items: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: var(--radius-lg);
  color: var(--header-fg);
}

/* The 22px glyph sits in a 44px target; pulling the target toward the edge
   puts the glyph on the logo's optical margin. */
@media (max-width: 1023px) {
  .mobile-nav__trigger {
    margin-inline-end: -0.5rem;
  }
}

.drawer {
  font-family: var(--font-display);
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}

.drawer[hidden] {
  display: none;
}

.drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 36, 24, 0.4);
  backdrop-filter: blur(4px);
}

.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  width: min(340px, 86vw);
  padding: 1.125rem 1.125rem max(1.5rem, env(safe-area-inset-bottom, 0px));
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--color-line);
}

.drawer__brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.drawer__brand img {
  height: 2.6rem;
  width: auto;
}

.drawer__close {
  display: grid;
  place-items: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: var(--radius-lg);
  color: var(--color-muted);
  transition: color var(--motion-base);
}

.drawer__close:hover {
  color: var(--color-ink);
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.drawer__link {
  font-family: var(--font-display);
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius-lg);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-green-800);
  transition: background-color var(--motion-base);
}

.drawer__link:hover,
.drawer__link:active,
.drawer__link[aria-current='page'] {
  background: var(--color-surface-tint);
}

/* The same gold "you are here" as the desktop nav, on the reading edge. */
.drawer__link[aria-current='page']::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 25%;
  height: 50%;
  width: 3px;
  border-radius: 2px;
  background: var(--color-gold-400);
}

.drawer__cta {
  margin-top: 1.25rem;
  min-height: 3rem;
  width: 100%;
}

/* ---- Footer ---- */
.site-footer {
  position: relative;
  display: block;
  width: 100%;
  margin-top: clamp(4rem, 6vw, 6rem);
  background: #ffffff;
  border-top: 1px solid rgba(8, 76, 54, 0.1);
  padding-block: clamp(3.5rem, 5vw, 4.5rem) clamp(2rem, 3vw, 2.5rem);
  color: #4b5550;
}

.site-footer>.container {
  display: flex;
  flex-direction: column;
}

/* Top tier: brand + social */
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* The brand lockup is a link to the logo mini-game. Reset the anchor and let the
   whole block lift on hover/focus so the click target reads as one piece. */
.footer__brand-link {
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
  transition: transform var(--motion-base) var(--ease-out);
}

.footer__brand-link:hover {
  transform: scale(1.02);
}

.footer__brand-link:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 4px;
}

.footer__logo {
  height: clamp(3.5rem, 3rem + 1.5vw, 4.75rem);
  width: auto;
  max-height: 76px;
  object-fit: contain;
  /* A rare, small double-hop — not a loop that keeps moving. 94% of the cycle
     is stillness; the mark only nudges the eye toward the mini-game behind it,
     it does not perform. Paused on hover/focus so it never fights the lift the
     link itself already does. */
  animation: footer-logo-invite 9s ease-in-out infinite;
}

.footer__brand-link:hover .footer__logo,
.footer__brand-link:focus-visible .footer__logo {
  animation-play-state: paused;
}

@keyframes footer-logo-invite {

  0%,
  82% {
    transform: translateY(0);
  }

  85% {
    transform: translateY(-7px);
  }

  88% {
    transform: translateY(0);
  }

  91% {
    transform: translateY(-3px);
  }

  94%,
  100% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer__logo {
    animation: none;
  }
}

.footer__brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer__club-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  font-weight: 700;
  color: #084c36;
  margin: 0;
  letter-spacing: -0.015em;
}

.footer__tagline {
  display: block;
  font-size: 0.925rem;
  line-height: 1.55;
  color: #55625b;
  margin: 0;
  max-width: 440px;
}

.footer__social-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}

.footer__social-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #717d77;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__social .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.6rem;
  width: 2.6rem;
  border-radius: 50%;
  background: #f8faf9;
  color: #084c36;
  border: 1px solid rgba(8, 76, 54, 0.12);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer__social .social-link:hover,
.footer__social .social-link:focus-visible {
  background: #084c36;
  color: #ffffff;
  border-color: #084c36;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px -2px rgba(8, 76, 54, 0.3);
}

/* Seven icons on one row at every phone width. */
@media (max-width: 479px) {
  .footer__social {
    gap: 0.45rem;
  }

  .footer__social .social-link {
    height: 2.4rem;
    width: 2.4rem;
  }
}

@media (max-width: 359px) {
  .footer__social {
    gap: 0.3rem;
  }

  .footer__social .social-link {
    height: 2.125rem;
    width: 2.125rem;
  }
}

.footer__divider {
  width: 100%;
  height: 1px;
  background: rgba(8, 76, 54, 0.09);
  margin-block: clamp(2rem, 3vw, 2.75rem);
}

/* Middle tier: link columns */
.footer__grid {
  display: grid;
  gap: clamp(2rem, 3.5vw, 3.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Two columns: the info column spans the row instead of standing alone. */
  .footer__info-col {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 2rem;
  }

  .footer__info-col {
    grid-column: auto;
  }
}

@media (min-width: 960px) {
  .footer__grid {
    grid-template-columns: 1.3fr 1.3fr 1.4fr;
    gap: clamp(2rem, 3.5vw, 3.5rem);
  }
}

.footer-col__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #141715;
  margin: 0 0 1.15rem 0;
  letter-spacing: -0.01em;
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col__link {
  color: #526058;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-block;
}

.footer-col__link:hover {
  color: #084c36;
  font-weight: 600;
  transform: translateX(-4px);
}

[dir='ltr'] .footer-col__link:hover {
  transform: translateX(4px);
}

/* Third column: headquarters + contact action */
.footer__info-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer__location {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1.15rem;
}

.footer__loc-text {
  font-size: 0.925rem;
  line-height: 1.6;
  color: #55625b;
  margin: 0;
}

.footer__contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  border-radius: 9999px;
  background: rgba(8, 76, 54, 0.07);
  border: 1px solid rgba(8, 76, 54, 0.16);
  color: #084c36;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.footer__contact-btn:hover {
  background: #084c36;
  color: #ffffff;
  border-color: #084c36;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(8, 76, 54, 0.2);
}

.footer__contact-btn svg {
  transition: transform 0.2s ease;
}

.footer__contact-btn:hover svg {
  transform: translate(-2px, -2px);
}

[dir='ltr'] .footer__contact-btn:hover svg {
  transform: translate(2px, -2px);
}

/* Bottom colophon: credit at the reading start, copyright at the reading end.
   space-between pushes them to opposite sides, and the writing direction
   decides which physical side each lands on. */
.footer__bottom {
  margin-top: clamp(2.25rem, 3.5vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(8, 76, 54, 0.09);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: #717d77;
}

.footer__credit,
.footer__copy {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: #717d77;
}

/* The three developer names in the colophon. Matches the quiet rhythm of the
   copyright line beside it; clean unboxed typography with a subtle ink tone
   and an elegant hover accent. */
.footer__dev-link {
  color: #4a5750;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.footer__dev-link:hover {
  color: #084c36;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Measured: the two share a line down to 880px in Arabic and 800px in English
   (the Arabic copyright is the wider of the two). Below 900px, then, the pair
   stacks — credit first — and centres, rather than wrapping mid-phrase. The one
   threshold covers both locales so they behave identically. */
@media (max-width: 899px) {
  .footer__bottom {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }
}

@media (max-width: 767px) {
  .site-footer {
    margin-top: clamp(3rem, 8vw, 4rem);
    padding-block: 2.75rem 1.75rem;
  }

  .footer__top {
    gap: 1.5rem;
  }

  .footer__brand {
    gap: 1rem;
  }

  .footer__logo {
    height: 3.25rem;
  }

  .footer__club-name {
    font-size: 1.2rem;
  }

  .footer__tagline {
    font-size: 0.875rem;
  }

  .footer__divider {
    margin-block: 1.75rem;
  }

  .footer__grid {
    gap: 1.75rem;
  }

  .footer-col__title {
    margin-bottom: 0.75rem;
  }

  .footer-col__list {
    gap: 0.25rem;
  }

  /* Comfortable rows to tap: the text stays, the target grows. */
  .footer-col__link {
    padding-block: 0.35rem;
  }

  .footer__bottom {
    margin-top: 2rem;
    gap: 0.35rem;
  }
}

/* ---- Form accessibility ---- */
/* One announced summary per invalid submission; also the programmatic focus
   target (tabindex="-1" in the macro). */
.form__error-summary {
  margin-bottom: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid #b42318;
  background: #fef3f2;
  padding: .75rem 1rem;
  color: var(--color-ink);
}

.form__error-summary-title {
  margin: 0 0 .35rem;
  font-weight: 600;
}

.form__error-summary ul {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.form__error-summary li {
  font-size: var(--text-body-sm);
}

/* The asterisk is aria-hidden; `required` carries the state and the note
   explains the convention once per form. */
.field__req {
  color: #b42318;
}

.form__required-note {
  margin: 0 0 1rem;
  font-size: var(--text-body-sm);
  color: var(--color-muted);
}

/* ---- Entry loader ----------------------------------------------------------
   A white plate over the homepage carrying the lockup, released by a timer in
   main.js. Hidden by default and shown only where scripting exists, so a
   browser that cannot run the release never sees a permanent white screen.

   Four layers, one file: each layer is the same untouched `iec-logo.png` in
   the same box, clipped to one region (symbol / rule / Arabic / English) so it
   can be revealed on its own schedule. The cuts fall in transparent gutters of
   the 2172x724 canvas, so the assembled result is the source pixel for pixel. */
.loader {
  display: none;
}

@media (scripting: enabled) {

  /* First entry of the session only: entry.js puts `.entry-first` on <html>
     from the <head>. Without it (blocked or failed) the plate stays down. */
  .entry-first .loader {
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: var(--z-loader);
    background: var(--color-surface);
    padding-inline: 1.5rem;
    /* Exit: the whole plate slides down as one surface. Accelerate curve on
       purpose; the --ease-* tokens are all entrance curves. */
    transform: translateY(0);
    transition: transform 350ms cubic-bezier(0.4, 0, 1, 1);
    will-change: transform;
  }

  .is-unlocking .loader {
    transform: translateY(100%);
  }

  /* Restated: the display above would otherwise beat the UA [hidden] rule. */
  .loader[hidden] {
    display: none;
  }

  .loader__logo {
    position: relative;
    width: min(420px, 76vw);
    aspect-ratio: 2172 / 724;
  }

  /* Resting state is the finished lockup; every animation only holds a layer
     back from it (fill-mode both), so anything that stops the animations lands
     on the complete logo. */
  .loader__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Region cuts as % of the 2172x724 canvas:
     x1337 = 61.547%, x1423 = 65.5157%, y378 = 52.2099% */
  .loader__layer--symbol {
    clip-path: inset(0 0 0 65.5157%);
    /* Scale about the symbol's own centre, not the shared box's. */
    transform-origin: 80.663% 48.4116%;
    animation: iec-loader-symbol 220ms var(--ease-out) 0ms both;
  }

  /* Wiped with clip-path, not scaleY: a resting transform resamples the image
     and the assembled logo drifts from the source. Shares the Arabic's delay so
     the separator never stands alone. */
  .loader__layer--rule {
    clip-path: inset(0 34.4843% 0 61.547%);
    animation: iec-loader-rule 160ms var(--ease-out) 300ms both;
  }

  .loader__layer--ar {
    clip-path: inset(0 38.453% 47.7901% 0);
    animation: iec-loader-ar 280ms var(--ease-out) 300ms both;
  }

  .loader__layer--en {
    clip-path: inset(52.2099% 38.453% 0 0);
    animation: iec-loader-en 230ms var(--ease-out) 520ms both;
  }

  /* Hold the homepage entrance until the plate lifts. The hero is a CSS
     animation (pausable); reveals are transitions, so they are pinned to their
     "from" state instead. Both scoped to `.is-loading`, set by main.js. */
  .is-loading [data-hero] {
    animation-play-state: paused;
  }

  .is-loading [data-reveal] {
    opacity: 0;
    transform: translateY(var(--motion-distance));
  }

  /* Scroll lock on the root (the drawer and lightbox own body.style.overflow),
     kept through both phases so the page cannot scroll under a moving plate. */
  .is-loading,
  .is-unlocking {
    overflow: hidden;
  }
}

/* Reduced motion: no slide (main.js never adds `.is-unlocking` either). */
@media (prefers-reduced-motion: reduce) {

  .entry-first .loader,
  .is-unlocking .loader {
    transition: none !important;
    transform: none !important;
  }
}

/* Assembly keyframes. Each runs from a held state to the layer's resting
   state, so the final frame is "no animation applied". Start values are
   measured ink edges, so each wipe begins where its artwork begins. The short
   `visibility` gates hide the sub-pixel sliver that fill-mode would otherwise
   leave standing through the delay (visibility, not opacity: opacity would
   promote the layer and resample it). */
@keyframes iec-loader-symbol {
  from {
    opacity: 0;
    transform: scale(0.94);
  }

  /* `none`, not `scale(1)`: an identity transform still promotes the layer. */
  to {
    opacity: 1;
    transform: none;
  }
}

/* Top to bottom over the rule's ink span (y201-y504). */
@keyframes iec-loader-rule {
  from {
    clip-path: inset(0 34.4843% 72.2376% 61.547%);
    visibility: hidden;
  }

  5% {
    visibility: hidden;
  }

  7% {
    visibility: visible;
  }

  70% {
    clip-path: inset(0 34.4843% 30.3867% 61.547%);
  }

  to {
    clip-path: inset(0 34.4843% 0 61.547%);
    visibility: visible;
  }
}

/* Right to left, the direction the Arabic reads. */
@keyframes iec-loader-ar {
  from {
    clip-path: inset(0 38.453% 47.7901% 59.3923%);
    visibility: hidden;
  }

  1.5% {
    visibility: hidden;
  }

  2.5% {
    visibility: visible;
  }

  to {
    clip-path: inset(0 38.453% 47.7901% 0);
    visibility: visible;
  }
}

/* Left to right for the Latin line. The gate covers the frames where only the
   bare stem of the "I" would be visible. */
@keyframes iec-loader-en {
  from {
    clip-path: inset(52.2099% 92.5414% 0 0);
    visibility: hidden;
  }

  2.9% {
    visibility: hidden;
  }

  4.2% {
    visibility: visible;
  }

  to {
    clip-path: inset(52.2099% 38.453% 0 0);
    visibility: visible;
  }
}

/* Reduced motion: no assembly. Explicit because the global rule in base.css
   collapses durations but not delays. */
@media (prefers-reduced-motion: reduce) {
  .loader__layer {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* Condensed header: measure, padding and glass only. Font size and gaps are
   deliberately left alone — animating those makes the labels jump under the
   pointer. Script-gated because the class is only ever added by main.js. */
@media (scripting: enabled) {
  .site-header.is-condensed {
    --header-bg: color-mix(in srgb, var(--color-surface) 86%, transparent);
    --header-blur: blur(20px);
    --header-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.10);
  }

  /* Drawn in proportionally rather than capped at a fixed width: a cap below the
     bar's own content squeezes the pills until they wrap, which made the
     condensed bar TALLER than the resting one. */
  .site-header.is-condensed .navbar {
    max-width: min(calc(100% - 2 * clamp(1rem, 5vw, 7rem)), 92rem);
    padding-block: 0.35rem;
  }

  .navbar {
    transition: max-width var(--motion-gentle) var(--ease-emphasized),
      padding-block var(--motion-gentle) var(--ease-emphasized);
  }

  /* The lockup is the tallest thing in the bar, so the height only comes down
     if it does too. */
  .site-header.is-condensed .navbar__logo img {
    max-height: 52px;
    transition: max-height var(--motion-gentle) var(--ease-emphasized);
  }

  /* Phone: the bar is already near its minimum and the drawer trigger needs its
     touch target, so only the glass changes. */
  @media (max-width: 720px) {
    .site-header.is-condensed .navbar {
      max-width: var(--hero-measure, var(--container-max));
      padding-block: 0.55rem;
    }
  }
}

/* =========================================================================
   Modern Custom Select Component
   ========================================================================= */
.select-wrap {
  position: relative !important;
  width: 100% !important;
  display: block !important;
}

.custom-select-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.custom-select-container {
  position: relative;
  width: 100%;
}

.custom-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1.1rem;
  background: #fbfdfc;
  border: 1.5px solid #d4ded9;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.975rem;
  color: #141c18;
  cursor: pointer;
  outline: none;
  text-align: start;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) inset;
}

.custom-select-trigger:hover {
  border-color: #9eb5aa;
  background: #ffffff;
}

.custom-select-trigger:focus-visible,
.custom-select-trigger.is-open {
  border-color: #084c36;
  background: #ffffff;
  box-shadow: 0 0 0 3.5px rgba(8, 76, 54, 0.12);
}

.custom-select-trigger.is-placeholder {
  color: #79837d;
}

.custom-select-trigger__label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select-trigger__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #79837d;
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.custom-select-trigger.is-open .custom-select-trigger__icon {
  transform: rotate(180deg);
  color: #084c36;
}

.custom-select-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline: 0;
  width: 100%;
  background: #ffffff;
  border: 1.5px solid rgba(8, 76, 54, 0.16);
  border-radius: 12px;
  box-shadow: 0 16px 36px -4px rgba(8, 76, 54, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06);
  padding: 0.4rem;
  z-index: 100;
  margin: 0;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
}

.custom-select-menu.is-open {
  display: block !important;
}

.custom-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #2c3832;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.custom-select-option:hover,
.custom-select-option.is-highlighted {
  background: #f0fdf4;
  color: #084c36;
}

.custom-select-option.is-selected {
  background: rgba(8, 76, 54, 0.08);
  color: #084c36;
  font-weight: 700;
}

.custom-select-option__check {
  display: none;
  color: #084c36;
  flex-shrink: 0;
}

.custom-select-option.is-selected .custom-select-option__check {
  display: inline-flex;
}

/* =========================================================================
   Secret Developer Easter Egg Modal
   ========================================================================= */
.dev-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8, 28, 20, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-modal-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.dev-modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border-radius: 1.25rem;
  border: 1.5px solid rgba(8, 76, 54, 0.16);
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
  padding: 2rem 1.75rem 1.75rem;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.dev-modal-overlay.is-active .dev-modal-card {
  transform: scale(1) translateY(0);
}

.dev-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background: rgba(8, 76, 54, 0.08);
  border: 1px solid rgba(8, 76, 54, 0.18);
  color: #084c36;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.dev-modal-header h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0d281e;
  margin: 0 0 0.5rem;
}

.dev-modal-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #55625b;
  margin: 0 0 1.5rem;
}

.dev-modal-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.dev-modal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  background: #f8faf9;
  border: 1px solid rgba(8, 76, 54, 0.09);
  transition: all 0.2s ease;
}

.dev-modal-item:hover {
  background: #ffffff;
  border-color: #084c36;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(8, 76, 54, 0.1);
}

.dev-modal-item__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dev-modal-item__name {
  font-weight: 700;
  font-size: 1rem;
  color: #1a2e26;
}

.dev-modal-item__role {
  font-size: 0.8rem;
  color: #63756d;
}

.dev-modal-item__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  background: #084c36;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.dev-modal-item__btn:hover {
  background: #0b6145;
  transform: translateY(-1px);
}

.dev-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(8, 76, 54, 0.08);
  padding-top: 1rem;
}

.dev-modal-footer__tag {
  font-size: 0.775rem;
  color: #83918a;
}

.dev-modal-close-btn {
  padding: 0.45rem 1.15rem;
  border-radius: 0.5rem;
  background: #f1f5f3;
  border: 1px solid #d4ded9;
  color: #37423c;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dev-modal-close-btn:hover {
  background: #e5ece8;
  color: #0d281e;
}

.dev-modal-x {
  position: absolute;
  top: 1.25rem;
  inset-inline-end: 1.25rem;
  background: none;
  border: none;
  color: #8b9891;
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.dev-modal-x:hover {
  background: rgba(8, 76, 54, 0.08);
  color: #084c36;
}