/* Geesi Nomad — style.css v2 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:     #0F1F45;
  --navy-dk:  #0a1628;
  --white:    #ffffff;
  --off-wh:   #f4f5f7;
  --green:    #007A3D;
  --red:      #CE1126;
  --text:     #0F1F45;
  --muted:    #6b7280;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, system-ui, sans-serif;
  --max-w: 1200px;
  --px: clamp(1rem, 4vw, 2.5rem);
}

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); color: var(--text); background: var(--white); line-height: 1.65; }
img  { display: block; max-width: 100%; height: auto; }

.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--px);
}

/* ── Flag stripe ───────────────────────────────────── */
.flag-stripe {
  display: flex;
  height: 6px;
  flex-shrink: 0;
}
.flag-stripe > span         { flex: 1; }
.flag-stripe > span:nth-child(1) { background: #007A3D; }
.flag-stripe > span:nth-child(2) { background: #e8e8e8; } /* off-white so the band is visible against page bg */
.flag-stripe > span:nth-child(3) { background: #000000; }

/* ── Header ────────────────────────────────────────── */
.site-header {
  background: var(--navy);
  padding-block: 1.25rem;
}
.site-header > .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Brand — text shows by default; swapped for image when loaded */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  gap: 0;
}
.brand-wordmark {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.brand-name {
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.brand-tagline {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1;
}
.brand-logo {
  display: none;
  height: 56px;
  width: auto;
}
.brand.logo-loaded .brand-wordmark { display: none; }
.brand.logo-loaded .brand-logo     { display: block; }

/* ── Hero ──────────────────────────────────────────── */
.hero {
  background: var(--navy);
  color: var(--white);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  position: relative;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green) 0%, var(--red) 50%, var(--green) 100%);
}

.hero-inner {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.hero-text { flex: 1; min-width: 0; }

.sponsor-label {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 3px;
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}

.hero-sub {
  font-size: clamp(0.9375rem, 1.8vw, 1.125rem);
  color: rgba(255,255,255,0.68);
  line-height: 1.7;
  max-width: 44ch;
}

.hero-img-wrap {
  flex: 0 0 clamp(220px, 28vw, 380px);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.55);
}

@media (max-width: 700px) {
  .hero-inner { flex-direction: column; }
  .hero-img-wrap {
    flex: none;
    width: 100%;
    max-width: 320px;
    align-self: center;
  }
}

/* ── Announcement ──────────────────────────────────── */
.announcement {
  padding-block: clamp(4rem, 8vw, 6rem);
  background: var(--white);
}

.ann-inner {
  max-width: 68ch;
  margin: 0 auto;
}

.eyebrow {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.9rem;
}

.ann-inner h2 {
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 2rem;
}

.ann-body {
  border-left: 4px solid var(--green);
  padding-left: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 2.5rem;
}
.ann-body p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 1.5rem;
}
.ann-body p:last-child { margin-bottom: 0; }

/* Coming-soon callout */
.callout {
  background: var(--navy);
  border-left: 4px solid var(--red);
  border-radius: 0 8px 8px 0;
  padding: 1.375rem 1.75rem;
}
.callout-tag {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
}
.callout p {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.5;
  margin: 0;
}

/* ── Partners ──────────────────────────────────────── */
.partners {
  background: var(--off-wh);
  border-top: 1px solid rgba(0,0,0,0.07);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
}

.partners-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 2.5rem;
}

.partners-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem 2.5rem;
}

/* Each partner: shows text name by default, replaced by logo on load */
.partner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner-name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.partner-img {
  display: none;
  height: 72px;
  width: auto;
  object-fit: contain;
}
.partner.logo-loaded .partner-name { display: none; }
.partner.logo-loaded .partner-img  { display: block; }

.partner-sep {
  font-size: 1.75rem;
  font-weight: 300;
  color: #d1d5db;
  line-height: 1;
  flex-shrink: 0;
}

/* Syrian flag */
.flag-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.syria-flag {
  width: 72px;
  height: 48px;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  overflow: hidden;
  display: block;
}
.flag-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* ── Footer ────────────────────────────────────────── */
.site-footer {
  background: var(--navy-dk);
  padding-block: 2rem;
  text-align: center;
}
.site-footer p {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.42);
}
.site-footer a {
  color: rgba(255,255,255,0.62);
  text-decoration: none;
}
.site-footer a:hover { color: var(--white); }

/* ── A11y ──────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }