/* ============================================================
   ESA Humanitarian — styles.css
   Palette: from the ESA logo — navy frame, pillar blue/green/gold
   Type:    Bricolage Grotesque (display) + Source Serif 4 (body)
   Themes:  light always by default; dark only when the visitor chooses it,
            via data-theme="dark" on the root element
   ============================================================ */

/* ---------- Tokens: light (default) ---------- */
:root {
  --paper:      #F5F7FA;
  --card:       #FFFFFF;
  --ink:        #182635;
  --ink-soft:   #47596C;
  --brand:      #1467AE;  /* link/icon blue (darkened logo blue for AA contrast) */
  --navy:       #1F3D64;  /* logo frame — impact band + footer ground */
  --art:        #1B7ED2;  /* logo pillar blue, for illustration strokes */
  --green:      #4E8F22;  /* logo pillar green (darkened for light ground) */
  --gold:       #F2B70A;  /* logo pillar gold — donate CTAs, accents */
  --gold-ink:   #8A6200;
  --mist:       #C9D7E6;
  --line:       #D9E0E8;
  --on-navy:    #EEF3F9;
  --on-navy-soft: #A9BFD8;
  --focus:      #1467AE;
  --shadow:     0 1px 2px rgba(24, 38, 53, 0.06), 0 8px 24px rgba(24, 38, 53, 0.08);

  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  --wrap: 1140px;
  --radius: 14px;

  color-scheme: light;
}

/* ---------- Tokens: dark (only when the visitor opts in) ---------- */
:root[data-theme="dark"] {
  --paper:      #101721;
  --card:       #18212D;
  --ink:        #E6ECF3;
  --ink-soft:   #9FAFC2;
  --brand:      #5FA9E8;
  --navy:       #16283F;
  --art:        #5FA9E8;
  --green:      #7CC24E;
  --gold:       #F0BC3F;
  --gold-ink:   #F0BC3F;
  --mist:       #223349;
  --line:       #263344;
  --on-navy:    #E6ECF3;
  --on-navy-soft: #97ACC6;
  --focus:      #F0BC3F;
  --shadow:     0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

img, svg { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.08;
  text-wrap: balance;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); font-weight: 800; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; font-weight: 700; }

p { margin: 0 0 1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-underline-offset: 0.16em; }
a:hover { color: var(--gold-ink); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  z-index: 100;
  background: var(--brand);
  color: var(--on-navy);
  padding: 0.5rem 1rem;
  border-radius: 0 0 8px 8px;
  transition: top 120ms ease;
}
.skip-link:focus-visible { top: 0; color: var(--on-navy); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}
.brand__logo {
  width: auto;
  height: 2.7rem;
  flex: none;
  border-radius: 6px;
}
.brand__logo--footer { height: 3.6rem; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand__name em { font-style: normal; font-weight: 600; color: var(--brand); }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
}
.site-nav__list a { text-decoration: none; color: var(--ink-soft); }
.site-nav__list a:hover { color: var(--brand); }
.site-nav__cta a.btn { color: #241A05; }

.header__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.5vw, 0.9rem);
}

/* ---------- Light / dark toggle ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--brand);
  border-color: var(--brand);
}
.theme-toggle__icon { width: 1.15rem; height: 1.15rem; }
.theme-toggle__icon[hidden] { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 1rem; height: 2px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  padding: 0.62rem 1.25rem;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover { transition: none; transform: none; }
}

.btn--gold {
  background: var(--gold);
  color: #241A05;
  box-shadow: var(--shadow);
}
.btn--gold:hover { color: #241A05; }

.btn--ghost {
  border-color: var(--brand);
  color: var(--brand);
  background: transparent;
}
.btn--ghost:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }

.btn--lg { padding: 0.8rem 1.6rem; font-size: 1.05rem; }

/* ---------- Shared band / section scaffolding ---------- */
.band { padding-block: clamp(3.2rem, 7.5vw, 5.5rem); }
.band--tint { background: color-mix(in srgb, var(--mist) 32%, var(--paper)); }
.band--navy { background: var(--navy); color: var(--on-navy); }

.band__head { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.band__head--split {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.band__intro {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 56ch;
  margin-top: 0.9rem;
}
.band--navy .band__intro { color: var(--on-navy-soft); }

.band__closing {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 68ch;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-ink);
  margin: 0 0 0.9rem;
}
.eyebrow--onnavy { color: var(--gold); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem); }

/* Two columns on desktop: headline over body copy on the left, the photograph
   spanning both rows on the right. Named areas so the narrow layout can slot the
   photograph between the headline and the paragraph. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr);
  grid-template-areas:
    "head  photo"
    "body  photo";
  column-gap: clamp(2rem, 4vw, 3.2rem);
  row-gap: clamp(1.4rem, 2.6vw, 2rem);
  align-content: center;
}
.hero__head { grid-area: head; }
.hero__body { grid-area: body; }
/* Row gap handles the space below the headline, so drop its own margin.
   Slightly smaller than the global h1 so the long words still fit the narrower
   copy column that the wider photograph leaves. */
.hero__head h1 {
  margin-bottom: 0;
  font-size: clamp(2.4rem, 4.8vw, 3.6rem);
}

.hero__lede {
  font-size: clamp(1.08rem, 1.8vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 54ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.hero__trustline {
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.hero__photo { grid-area: photo; align-self: center; margin: 0; }
.hero__photo .photo {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero__photo figcaption {
  margin-top: 0.9rem;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- Photos & captioned figures ---------- */
.photo { display: block; width: 100%; height: auto; }

.figure { margin: 0; }
.figure .photo {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.figure figcaption {
  margin-top: 0.85rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
}
.figure--compact figcaption { font-size: 0.9rem; }
.figure--compact .photo {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.2rem);
}

/* Four-photo galleries go two-up so each image stays large */
.gallery--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- About ---------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.about__copy > p:first-child {
  font-size: 1.1rem;
  margin-bottom: 1.8rem;
}

.principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.principles--stack { grid-template-columns: 1fr; gap: 1.3rem; }
/* Principle rules pick up the three logo-pillar colors in order */
.principles h3 {
  border-top: 3px solid var(--art);
  padding-top: 0.8rem;
}
.principles li:nth-child(2) h3 { border-top-color: var(--green); }
.principles li:nth-child(3) h3 { border-top-color: var(--gold); }
.principles p { font-size: 0.98rem; color: var(--ink-soft); }

/* ---------- Programs ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.card__body { padding: 1.4rem 1.3rem 1.5rem; }
.card__icon { width: 1.8rem; height: 1.8rem; color: var(--brand); margin-bottom: 0.7rem; }
.card h3 { font-size: 1.08rem; margin-bottom: 0.4em; }
.card p { font-size: 0.94rem; color: var(--ink-soft); }
/* Program icons carry the logo-pillar colors in order */
.card-grid .card:nth-child(3n + 2) .card__icon { color: var(--green); }
.card-grid .card:nth-child(3n + 3) .card__icon { color: var(--gold-ink); }

/* ---------- Film (video band) ---------- */

.film__frame {
  margin: 0;
  /* The source is 848px wide, so capping here keeps it from being upscaled */
  max-width: 720px;
}
.video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  border-radius: var(--radius);
  background: #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 18px 44px rgba(0, 0, 0, 0.32);
}
.film__frame figcaption {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.6;
  color: var(--on-navy-soft);
  max-width: 60ch;
}
.film__cta { margin-top: clamp(1.6rem, 3vw, 2.2rem); max-width: none; }

/* ---------- Education feature ---------- */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.feature .figure figcaption { font-size: 1rem; }
/* Portrait photographs in the 4:3 cards: hold the crop on the subject */
.figure--compact .photo--tall { object-position: 50% 22%; }
.figure--compact .photo--mid { object-position: 50% 52%; }
.figure--compact .photo--upper { object-position: 50% 30%; }
.feature__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}
.feature__aside p {
  font-size: 1.08rem;
  line-height: 1.55;
  max-width: 30ch;
}

/* ---------- How we work (on navy) ---------- */
.work__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.work__lede {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.45;
  margin-bottom: 1.3rem;
}
.work__note { color: var(--on-navy-soft); font-size: 0.99rem; }

.work__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.work__list li { border-left: 3px solid var(--gold); padding-left: 1.1rem; }
.work__list li:nth-child(2) { border-left-color: var(--art); }
.work__list li:nth-child(3) { border-left-color: var(--green); }
.work__list h3 { font-size: 1.05rem; margin-bottom: 0.25em; }
.work__list p { font-size: 0.96rem; color: var(--on-navy-soft); }

.work__photo { margin: clamp(2.2rem, 4vw, 3rem) 0 0; }
.work__photo .photo {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), 0 16px 40px rgba(0, 0, 0, 0.28);
}
.work__photo figcaption {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--on-navy-soft);
  max-width: 60ch;
}

.commitment {
  margin: clamp(2.6rem, 5vw, 4rem) 0 0;
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--on-navy) 7%, transparent);
  border-left: 4px solid var(--gold);
}
.commitment p {
  font-size: clamp(1.02rem, 1.8vw, 1.16rem);
  line-height: 1.6;
  max-width: 72ch;
}
.commitment cite {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Get involved ---------- */
.involve-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}
.involve {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}
.involve p { font-size: 0.96rem; color: var(--ink-soft); flex: 1; }
.involve .btn { margin-top: 1rem; }
.involve--give { border-top: 4px solid var(--gold); }
.involve p.involve__note {
  margin-top: 0.85rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-soft);
  flex: none;
}

/* ---------- Contact ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.contact__list li {
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.1rem;
}
.contact__aside {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.98rem;
  color: var(--ink-soft);
}

.contact p.contact__note {
  margin-top: 0.45rem;
  margin-bottom: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
}

.contact__label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-bottom: 0.25rem;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: var(--on-navy);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.site-footer a { color: var(--on-navy); }
.site-footer a:hover { color: var(--gold); }

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.brand--footer { color: var(--on-navy); }
.brand--footer .brand__name em { color: var(--gold); }

.site-footer__tag {
  margin-top: 0.8rem;
  font-style: italic;
  color: var(--on-navy-soft);
}

.site-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}
.site-footer__nav a { text-decoration: none; }

.site-footer__legal {
  font-size: 0.85rem;
  color: var(--on-navy-soft);
  max-width: none;
}

/* ---------- Scroll reveal (JS adds .reveal--in) ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal--in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
/* No-JS fallback: main.js adds .js to <html>; without it, everything stays visible */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "photo"
      "body";
  }
  .hero__photo { max-width: 34rem; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__grid { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; }
  .work__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .site-footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { position: relative; }
  .site-nav__list {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 12rem;
    padding: 0.5rem;
  }
  .site-nav__list.is-open { display: flex; }
  .site-nav__list li a { display: block; padding: 0.6rem 0.9rem; border-radius: 8px; }
  .site-nav__list li a:hover { background: color-mix(in srgb, var(--mist) 35%, transparent); }
  .site-nav__cta { margin-top: 0.4rem; }
  .site-nav__cta a.btn { text-align: center; }

  .principles { grid-template-columns: 1fr; }
  .gallery--pair { grid-template-columns: 1fr; }
  .involve-grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
}

/* Narrow phones: reclaim room in the header so the wordmark is never clipped */
@media (max-width: 560px) {
  .brand__logo { height: 2.2rem; }
  .brand__name { font-size: 1rem; }
  .nav-toggle { padding: 0.5rem 0.7rem; }
  .nav-toggle__label {
    position: absolute;
    width: 1px; height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  .theme-toggle { width: 2.2rem; height: 2.2rem; }
}

@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
}