/* CLRI brochure site — single stylesheet, mobile-first.
   Palette is derived from CLRI's visual signals: deep institutional navy +
   muted CADPAT-derived olive against a warm off-white. */

:root {
  --clri-ink:        #14171f;
  --clri-paper:      #f7f6f1;
  --clri-primary:    #1f3349;
  --clri-accent:     #4a6741;
  --clri-muted:      #6b7280;
  --clri-line:       #d8d4c7;
  --clri-overlay:    rgba(20, 23, 31, 0.55);

  --measure: 64ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-pad-y: clamp(3rem, 8vw, 6rem);

  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-stack);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--clri-ink);
  background: var(--clri-paper);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--clri-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover, a:focus-visible { color: var(--clri-accent); }
:focus-visible { outline: 2px solid var(--clri-accent); outline-offset: 3px; }

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--clri-primary);
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
h3 { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.35rem); }

p { margin: 0 0 1em; max-width: var(--measure); }

/* Skip link — visible on focus only. */
.skip-link {
  position: absolute; top: -40px; left: 1rem;
  background: var(--clri-primary); color: #fff;
  padding: 0.5rem 0.75rem; border-radius: 4px;
  z-index: 100;
}
.skip-link:focus { top: 0.5rem; }

/* ---------- Layout primitives ---------- */

.wrap {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad-y); }

.section--dark {
  color: #fff;
  background:
    linear-gradient(rgba(20, 23, 31, 0.65), rgba(20, 23, 31, 0.65)),
    url("../assets/pillars-cadpat.png") center/cover no-repeat;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark a { color: #d8e6c9; }

/* ---------- Site header / nav ---------- */

.site-header {
  background: var(--clri-primary);
  color: #fff;
  border-bottom: 4px solid var(--clri-accent);
}
.site-header .wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.75rem;
}
.site-header a { color: #fff; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.brand img { height: 36px; width: auto; flex-shrink: 0; }
.brand span {
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header right-side cluster — language toggle + menu button.
   Wrapped together so the brand can flex against the whole group. */
.header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Language toggle (FR <-> EN) — always next to the menu button. */
.lang-toggle {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  text-decoration: none;
  line-height: 1;
}
.lang-toggle:hover, .lang-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* The nav uses <details><summary> for a JS-free mobile disclosure.
   It is `position: relative` so the open <ul> can anchor to the button
   itself (not the header bar) — the dropdown opens directly below the
   menu control regardless of where the button sits in the layout. */
.nav {
  margin: 0;
  position: relative;
  flex-shrink: 0;
}
.nav > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  font-size: 0.95rem;
}
.nav > summary::-webkit-details-marker { display: none; }
.nav > summary::after { content: "  ☰"; }
.nav[open] > summary::after { content: "  ✕"; }

.nav ul {
  list-style: none;
  padding: 1rem 0 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}
.nav a {
  display: block;
  padding: 0.4rem 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.nav a[aria-current="page"] { color: #d8e6c9; font-weight: 600; }

/* Hamburger pattern is used at all widths for consistency.
   The list is a floating panel anchored to the menu button itself
   (via .nav being position: relative) so it always opens directly
   below the control. `right: 0` keeps the panel inside the viewport
   regardless of how narrow the screen is. */
.nav[open] ul {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 50;
  min-width: 12rem;
  padding: 0.75rem 1rem;
  background: var(--clri-primary);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.nav[open] ul a { border-bottom-color: rgba(255, 255, 255, 0.1); }
.nav[open] ul li:last-child a { border-bottom: 0; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  color: #fff;
  background:
    linear-gradient(var(--clri-overlay), var(--clri-overlay)),
    url("../assets/hero-dartdeparture.jpg") center/cover no-repeat;
}
.hero .wrap { padding-block: clamp(4rem, 12vw, 8rem); }
.hero h1 { color: #fff; max-width: 22ch; }
.hero p { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); max-width: 56ch; }
.hero .cta {
  display: inline-block;
  margin-top: 1rem;
  background: var(--clri-accent);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 600;
}
.hero .cta:hover, .hero .cta:focus-visible {
  background: #5b7d4f;
  color: #fff;
}

/* ---------- Pillar grid (3 cards) ---------- */

.pillars {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
.pillar {
  background: #fff;
  border: 1px solid var(--clri-line);
  border-left: 4px solid var(--clri-accent);
  padding: 1.5rem;
  border-radius: 3px;
}
.pillar h3 { margin-top: 0; }
.pillar p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Team grid ---------- */

.team {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
.bio {
  background: #fff;
  border: 1px solid var(--clri-line);
  padding: 1.5rem;
  border-radius: 3px;
}
.bio h3 { margin-top: 0; color: var(--clri-primary); }
.bio p:last-child { margin-bottom: 0; }

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

/* ---------- Two-column prose (about / what-we-do intros) ---------- */

.lede {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  color: var(--clri-ink);
  max-width: var(--measure);
  margin-bottom: 2rem;
}

/* ---------- Org pillars list (About) ---------- */

.org-pillars {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}
.org-pillars li {
  background: #fff;
  border: 1px solid var(--clri-line);
  padding: 1.25rem 1.5rem;
  border-radius: 3px;
}
.org-pillars strong { color: var(--clri-primary); display: block; margin-bottom: 0.25rem; }
@media (min-width: 768px) {
  .org-pillars { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Contact card ---------- */

.contact-card {
  background: #fff;
  border: 1px solid var(--clri-line);
  border-top: 4px solid var(--clri-accent);
  padding: 2rem;
  border-radius: 3px;
  max-width: 36rem;
}
.contact-card a { font-weight: 600; word-break: break-all; }

/* ---------- Site footer ---------- */

.site-footer {
  background: var(--clri-ink);
  color: #c8ccd4;
  padding-block: 2rem;
  margin-top: 4rem;
  font-size: 0.92rem;
}
.site-footer a { color: #c8ccd4; }
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}
.site-footer p { margin: 0; max-width: none; }

/* ---------- 404 ---------- */

.notfound {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--gutter);
}
.notfound h1 { font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem); margin-bottom: 0.2em; }

/* ---------- Bilingual splash (root /) ----------
   Plain centered card with two language buttons. Used at the root URL
   so that arriving users explicitly choose English or French, after
   which language URLs (/en/ or /fr/) take over. */

.splash {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(20, 23, 31, 0.7), rgba(20, 23, 31, 0.7)),
    url("/assets/hero-dartdeparture.jpg") center/cover no-repeat;
  color: #fff;
  padding: var(--gutter);
}
.splash-main { width: 100%; }
.splash-card {
  max-width: 36rem;
  margin: 0 auto;
  text-align: center;
  background: rgba(20, 23, 31, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 4px solid var(--clri-accent);
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: 4px;
  backdrop-filter: blur(2px);
}
.splash-logo { display: block; margin: 0 auto 1.5rem; height: auto; max-width: 60%; }
.splash h1 {
  color: #fff;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 600;
  margin: 0 0 1.75rem;
  line-height: 1.4;
}
.splash h1 span { display: block; }
.splash-h1-fr { font-size: 0.95em; color: #d8e6c9; margin-top: 0.25rem; }
.splash-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.splash-btn {
  display: block;
  padding: 0.85rem 1rem;
  background: var(--clri-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 3px;
}
.splash-btn:hover, .splash-btn:focus-visible {
  background: #5b7d4f;
  color: #fff;
}
.splash-foot {
  margin: 1.5rem 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}
.splash-foot a { color: rgba(255, 255, 255, 0.85); }