/* =============================================================================
   layout.css — page shell: header/nav, sections, logo, scroll progress, footer
   -----------------------------------------------------------------------------
   STEP 5 REWRITE NOTE: this file is ported nearly VERBATIM from the live site's
   css/layout.css (repo root) for the flat Findings rebuild (see PLAN.md). The
   only substantive changes:
     - the #home background image path is relative to this css/ folder:
       "../header_image.jpg".
     - a new .section--full-bleed rule was added at the end for the Findings
       full-bleed video/canister clusters (the one deliberate edge-to-edge
       departure from the normal contained-column layout; see components.css
       for the figures/cards inside it).
   Everything else below (header, nav, sections, sticky title, footer) is
   unchanged from the live site.
   ============================================================================ */

/* --- Scroll progress bar (thin red line that fills as you read) ----------- */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--phr-red);
  z-index: 1003;
}

/* --- Sticky header with partner logos + section nav ----------------------- */
.site-header {
  position: sticky; top: var(--draft-banner-height); z-index: 1001; /* above Leaflet controls (z-index 1000) */
  height: var(--header-height);
  display: flex; align-items: center; gap: var(--space-4);
  /* Keep header content aligned with the section / sticky-title column. */
  padding: 0 max(var(--space-4), calc((100% - var(--content-max)) / 2));
  background: var(--white);
  border-bottom: 1px solid var(--color-border);
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* While a full-bleed video/model cluster fills the viewport (city gallery,
   canister), fade out the chrome that would otherwise sit over/around it —
   toggled by js/nav.js's initImmersiveVideoSections() via an
   IntersectionObserver on every `.section--full-bleed` block. */
body.is-video-immersive .site-header,
body.is-video-immersive .section-sticky-title,
body.is-video-immersive .findings-index {
  opacity: 0;
  pointer-events: none;
}

.site-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  min-width: 0;
}

.site-logo {
  display: block;
  width: auto;
  object-fit: contain;
}

.site-logo--phr,
.site-logo--hrc {
  height: calc(var(--header-height) - 14px);
}

/* PHR symbol rendered in pure CSS — a red circle with white "PHR".
   No image asset needed, crisp at any size, brand-compliant (§1.04). */
.phr-symbol {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;                 /* above the 24px symbol minimum    */
  background: var(--phr-red);
  color: var(--white);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.site-header .wordmark {                      /* full name must appear by the mark */
  font-family: var(--font-sans);
  font-weight: 700; font-size: var(--fs-sm);
  line-height: 1.1; color: var(--color-text);
}

/* Section navigation — flush-left text links, red highlight for active. */
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: var(--space-3); max-width: none; }
.site-nav li { margin: 0; padding: 0; }
.site-nav li::before { content: none; }       /* no bullets in the nav            */
.site-nav a {
  font-family: var(--font-sans);
  font-size: var(--fs-sm); color: var(--color-text-muted);
}
.site-nav a:hover,
.site-nav a[aria-current="true"] { color: var(--phr-red); text-decoration: none; }

/* Mobile: hamburger menu + slide-down nav panel. */
.site-header__menu-btn {
  display: none;
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
}
.site-header__menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-header__menu-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header__menu-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.site-header__menu-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 820px) {
  .site-header__menu-btn { display: flex; }
  .site-nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    margin-left: 0;
    padding: var(--space-3) max(var(--space-4), calc((100% - var(--content-max)) / 2));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
    z-index: 1000;
  }
  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .site-nav ul {
    flex-direction: column;
    gap: var(--space-2);
  }
  .site-nav a {
    display: block;
    padding: var(--space-1) 0;
  }
}
@media (max-width: 480px) {
  .site-logo--phr,
  .site-logo--hrc {
    height: calc(var(--header-height) - 14px);
  }
}

/* --- Sections ------------------------------------------------------------- */
.section {
  padding-top: clamp(var(--space-4), 3vw, var(--space-5));
  padding-bottom: clamp(var(--space-4), 3vw, var(--space-5));
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.section__inner { max-width: var(--content-max); margin: 0 auto; }

/* "Cover"/dark sections use PHR Gray, white text (mirrors the guideline covers). */
.section--dark { background: var(--color-bg-dark); color: var(--color-text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark a { color: var(--white); text-decoration: underline; }

/* A faint warm panel used to set apart secondary content. */
.section--muted { background: var(--color-bg-muted); }

/* Hidden section (e.g. §5 "In Focus") — kept in the markup & structure but not
   shown. Remove this attribute in index.html to switch it on later. */
[hidden] { display: none !important; }

/* Small kicker/eyebrow label above headings. */
.kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--phr-red);
  margin-bottom: var(--space-2);
}

#home {
  position: relative;
  min-height: calc(100svh - var(--top-chrome-height));
  display: flex;
  align-items: flex-start;
  padding-block: clamp(var(--space-4), 5vh, var(--space-5));
  padding-bottom: calc(clamp(var(--space-4), 5vh, var(--space-5)) + 2.5rem);
  background:
    linear-gradient(90deg, rgba(43, 38, 34, 0.88), rgba(43, 38, 34, 0.48)),
    url("../header_image.jpg") center / cover no-repeat;
  color: var(--white);
}

#home .section__inner {
  margin-left: max(var(--space-4), calc((100% - var(--content-max)) / 2));
  margin-right: max(var(--space-4), calc((100% - var(--content-max)) / 2));
  max-width: 900px;
}

#home .kicker {
  font-size: clamp(1.875rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: var(--space-4);
}

#home h1 {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  max-width: min(100%, 50rem);
  color: var(--white);
}

#home .lead,
#home p {
  max-width: min(100%, 50rem);
  line-height: 1.45;
  text-align: left;
}

#home .home-summary { color: rgba(255, 255, 255, 0.92); }

#home .stack > * + * {
  margin-top: var(--space-2);
}

#home .home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

#home .hero-credit {
  position: absolute;
  left: max(var(--space-4), calc((100% - var(--content-max)) / 2));
  right: var(--space-4);
  bottom: var(--space-4);
  max-width: min(calc(100% - (var(--space-4) * 2)), 46rem);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.76);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.58);
}

#home .hero-credit a {
  color: inherit;
  text-decoration-color: rgba(255, 255, 255, 0.42);
  text-underline-offset: 0.14em;
}

#home .hero-credit a:hover,
#home .hero-credit a:focus-visible {
  color: var(--white);
  text-decoration-color: currentColor;
}

#home .btn--ghost {
  border-color: var(--white);
  color: var(--white);
}

#home .btn--ghost:hover {
  border-color: var(--phr-red);
}

@media (max-width: 640px) {
  #home {
    display: block;
    min-height: auto;
    padding-bottom: clamp(var(--space-4), 5vh, var(--space-5));
  }

  #home .hero-credit {
    position: static;
    margin: var(--space-4) max(var(--space-4), calc((100% - var(--content-max)) / 2)) 0;
    max-width: none;
  }
}

/* Lead paragraph (intro copy) — larger, still flush left. */
.lead { font-size: var(--fs-lg); max-width: var(--measure); }

/* Body prose spans the full section width — matching the map + filters block —
   rather than the narrower 68ch reading measure. Only plain text that sits
   DIRECTLY in a section gets this; paragraphs and lists inside cards, tables,
   figures, and other boxes keep their own (narrower) widths. */
.section__inner > p,
.section__inner > ul,
.section__inner > ol,
.section__inner > .lead,
.section__inner > .note,
.section__inner > .deflist dd {
  max-width: none;
}

/* Body prose stays left-justified across the report. Headings, kickers, and
   notes keep their own alignment rules. */
.section__inner > p:not(.kicker):not(.note),
.section__inner > .lead,
.section__inner > .deflist dd {
  text-align: left;
}

/* Generic vertical rhythm helper. */
.stack > * + * { margin-top: var(--space-3); }

/* Sticky section subtitle shown after the section heading scrolls past. */
.section-sticky-title {
  position: fixed;
  top: var(--top-chrome-height);
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.section-sticky-title.is-visible {
  opacity: 1;
  transform: none;
}

.section-sticky-title__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--color-border);
}

.section-sticky-title__kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--phr-red);
}

.section-sticky-title__text {
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--color-text);
}

@media (max-width: 820px) {
  .section-sticky-title { display: none; }
}

/* Suppress the generic sticky section title while the Findings chapter bar
   is up — both dock at var(--top-chrome-height) and would otherwise stack. */
body.chapter-nav-active .section-sticky-title { display: none !important; }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  font-family: var(--font-sans); font-size: var(--fs-sm);
}
.site-footer .section__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--white);
}
.site-footer__logo {
  display: block;
  width: auto;
  height: 54px;
  object-fit: contain;
}
.site-footer__logo--hrc { height: 50px; }
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  margin-left: auto;
}
.site-footer__social-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.site-footer__social-group span {
  font-weight: 700;
}
.site-footer__social a {
  color: var(--color-text-on-dark);
}
.site-footer__social a:hover {
  color: var(--white);
  text-decoration: underline;
}
@media (max-width: 700px) {
  .site-footer .section__inner,
  .site-footer__social {
    align-items: flex-start;
    margin-left: 0;
  }
  .site-footer__social {
    flex-direction: column;
  }
}

/* --- Full-bleed breakout (NEW for Step 5) ----------------------------------
   Reserved for the Findings section's 4 city videos + the canister
   video/3-D-model cluster — the one deliberate edge-to-edge departure from the
   normal contained .section__inner column used everywhere else. Standard
   viewport-breakout technique: cancel out the parent's centered max-width by
   pulling the element to 100vw and re-centering with negative margins. */
.section--full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: clamp(60vh, 90vh, 900px);
  position: relative;
  overflow: hidden;
  background: var(--color-text); /* near-black fallback while video/model loads */
}