/* =========================================================
   Barrierefreiheit in Wien – Storymap
   Hand-written CSS, no framework.
   ========================================================= */

/* ---------- FONTS (self-hosted) ---------- */

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/Playfair-Variable.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* chapter colors */
  --col-recht:    #844c82;   /* purple */
  --col-staedte:  #2c5f8d;   /* deep blue */
  --col-oev:      #c8102e;   /* signal red */
  --col-strasse:  #e07a3c;   /* warm orange */
  --col-src:	  #7f7f7f;   /* 50% gray */

  /* category-specific tints (currently same as chapter; tune later if needed) */
  --col-ampel:        var(--col-strasse);
  --col-gehsteig:     var(--col-strasse);
  --col-blindenleit:  var(--col-strasse);

  /* neutrals */
  --bg:           #fafaf7;
  --bg-card:      #ffffff;
  --ink:          #1a1a1a;
  --ink-muted:    #5a5a5a;
  --ink-faint:    #9a9a9a;
  --border:       #e6e3da;

  /* layout */
  --side-w:       min(440px, 42vw);
  --side-pad:     2.5rem;
  --section-gap:  8rem;
  --nav-h:        56px;

  --font-head:    "Playfair Display", Georgia, serif;
  --font-body:    "Inter", -apple-system, system-ui, sans-serif;
}

/* ---------- BASE ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 2;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.feature-meta,
.topnav-chapters .label,
.chapter-eyebrow,
.hero-eyebrow {
  hyphens: manual;
  -webkit-hyphens: manual;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--ink);
}

h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--col-oev); }

sup[id^="ref-"],
span[id^="cite-"] {
  scroll-margin-top: 15vh;
}

/* Bibliography Highlight */
@keyframes target-highlight {
  0% {
    background-color: rgba(255, 215, 0, 0.6); 
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.6); 
    border-radius: 2px;
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 4px transparent;
  }
}

sup[id^="ref-"]:target,
span[id^="cite-"]:target {
  animation: target-highlight 2s ease-out;
}

li:has(> span[id^="cite-"]:target) {
  animation: target-highlight 2s ease-out;
  padding: 2px 4px; 
  border-radius: 4px;
}

/* ---------- STICKY NAVIGATION ---------- */
#topnav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem var(--side-pad);
  gap: 2rem;
  max-width: 100vw;
}
.topnav-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.005em;
  flex: 0 0 auto;
}
.topnav-title:hover {
  color: var(--col-oev);
}

/* Desktop chapter strip: dots connected by lines */
.topnav-chapters {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 0;
}
.topnav-chapters li {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.topnav-chapters li + li::before {
  content: "";
  display: block;
  width: clamp(20px, 4vw, 64px);
  height: 1px;
  background: var(--border);
  margin: 0 4px;
}
.topnav-chapters a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  text-decoration: none;
  color: var(--ink-muted);
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.topnav-chapters a:hover {
  color: var(--ink);
  background: rgba(0,0,0,0.04);
}
.topnav-chapters .dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--ink-faint);
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
  flex: 0 0 auto;
}
.topnav-chapters a:hover .dot,
.topnav-chapters a.is-active .dot {
  background: var(--chapter-dot-col, var(--ink));
  border-color: var(--chapter-dot-col, var(--ink));
}
.topnav-chapters a.is-active .dot {
  transform: scale(1.25);
}
/* Resolve per-chapter dot colors */
.topnav-chapters a[data-nav-chapter="recht_aktivismus"] { --chapter-dot-col: var(--col-recht); }
.topnav-chapters a[data-nav-chapter="staedtebau"]       { --chapter-dot-col: var(--col-staedte); }
.topnav-chapters a[data-nav-chapter="oev"]              { --chapter-dot-col: var(--col-oev); }
.topnav-chapters a[data-nav-chapter="strassenraum"]     { --chapter-dot-col: var(--col-strasse); }
.topnav-chapters a[data-nav-chapter="quellen"]	        { --chapter-dot-col: var(--col-src); }

.topnav-chapters .label {
  font-size: 0.83rem;
  font-weight: 500;
  white-space: nowrap;
}
.topnav-chapters a.is-active .label {
  color: var(--ink);
  font-weight: 600;
}

/* Hamburger button: hidden on desktop */
.topnav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex: 0 0 auto;
}
.topnav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform 0.25s, opacity 0.25s;
}
.topnav-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.topnav-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.topnav-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- MAP (sticky within its grid cell) ---------- */
#map-container {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  padding: 1rem;
  background: var(--bg);
  /* This cell occupies grid column 2; height auto-fills column 1's content */
}
#map {
	width: 100%; 
	height: 100%; 
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

/* Leaflet attribution polish */
.leaflet-control-attribution {
  font-family: var(--font-body);
  font-size: 11px;
  background: rgba(255,255,255,0.85);
}

/* ---------- LEGEND ---------- */
.map-legend {
  background: rgba(255, 255, 255, 0.94);
  padding: 0.7rem 0.9rem 0.6rem;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--ink);
  min-width: 220px;
  max-width: 280px;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.legend-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
}
.legend-bar {
  height: 12px;
  border-radius: 2px;
  margin-bottom: 0.3rem;
  border: 1px solid rgba(0,0,0,0.08);
}
.legend-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
  padding: 0 1px;
}
.legend-scale span { flex: 0 0 auto; }
.legend-swatch {
  height: 6px;
  width: 100%;
  border-radius: 2px;
  margin: 0.5rem 0 0.35rem;
}
.legend-unit {
  font-size: 0.72rem;
  color: var(--ink-muted);
  font-style: italic;
}

/* ---------- HEX POPUP ---------- */
.hex-popup {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  text-align: center;
  padding: 0.1rem 0.3rem;
  color: var(--ink);
  line-height: 1;
}
.hex-popup span {
  font-weight: 400;
  color: var(--ink-muted);
  margin-left: 0.05rem;
}

/* ---------- HERO BACKGROUND ---------- */
.section-hero {
  background:
    linear-gradient(rgba(250,250,247,0.82), rgba(250,250,247,0.96)),
    url("../img/bg.svg") center center / cover no-repeat,
    var(--bg);
}

.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: contain;
  opacity: 5%;
  mix-blend-mode: darken; 
  pointer-events: none;
  z-index: 0;
}

/* ---------- STORY LAYOUT ---------- */
#story {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Hero is a full-width row above the map */
.section-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem var(--side-pad);
  text-align: center;
  background: var(--bg);
}
.hero-inner {
  max-width: 56ch;
}
.hero-eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  margin: 0 0 1.5rem;
  font-weight: 500;
}
.section-hero h1 {
  margin-bottom: 1rem;
}
.section-hero .lede {
  font-size: 1.2rem;
  color: var(--ink-muted);
  max-width: 50ch;
  margin: 0 auto 2rem;
}
.hero-authors {
  font-size: 0.95rem;
  color: var(--ink-faint);
  margin: 2rem 0 4rem;
}
.scroll-hint {
  font-size: 0.85rem;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Two-column body: content scrolls, map is sticky within its column */
.story-body {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  padding-bottom: 10vh;
  align-items: start;          /* lets map cell size to its content */
}
#map-container { grid-column: 2; grid-row: 1; }
#content       { grid-column: 1; grid-row: 1; padding: 0 var(--side-pad); }

/* Sections inside the content column */
.section {
  min-height: 100vh;
  padding: var(--section-gap) 0 var(--section-gap);
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-margin-top: var(--nav-h);
}

/* ---------- CHAPTERS ---------- */
.chapter-intro {
  margin-bottom: 3rem;
}
.chapter-eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  margin: 0 0 0.5rem;
  font-weight: 500;
}
.chapter-title {
  margin-bottom: 1rem;
  cursor: pointer;
  transition: color 0.2s;
}
.chapter-title:hover { color: var(--col-oev); }

.chapter-lede {
  font-size: 1.05rem;
  color: var(--ink-muted);
  max-width: 38ch;
}
.chapter-hint {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

/* per-chapter accent (used for marker subheadings, etc.) */
[data-chapter="recht_aktivismus"] { --chapter-col: var(--col-recht); }
[data-chapter="staedtebau"]       { --chapter-col: var(--col-staedte); }
[data-chapter="oev"]              { --chapter-col: var(--col-oev); }
[data-chapter="strassenraum"]     { --chapter-col: var(--col-strasse); }
[data-chapter="quellen"] 		  { --chapter-col: var(--col-src); }

/* ---------- GROUPS (sub-sections within ÖV and Straßenraum) ---------- */

/* Last group of the last chapter gets extra bottom padding so the sticky
   map remains in view long enough for the group itself to scroll past
   the top before the footer pulls the map out of stickiness. */
.section-chapter:last-of-type .group:last-child {
  padding-bottom: 80vh;
}
.group {
  margin-bottom: 3.5rem;
}
.group-title {
  margin-bottom: 1.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--chapter-col, var(--ink-faint));
  cursor: pointer;
  transition: color 0.2s;
}
.group-title:hover { color: var(--chapter-col); }

/* ---------- FEATURE CARDS ---------- */
.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--chapter-col, var(--ink-faint));
  border-radius: 4px;
  padding: 1.5rem 1.5rem 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.feature-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  transition: color 0.2s;
}
.feature-heading[data-flyto] {
  cursor: pointer;
}
.feature-heading[data-flyto]:hover h3,
.feature-heading[data-flyto]:hover h4 { color: var(--chapter-col); }
.feature-heading h3,
.feature-heading h4 { margin: 0; flex: 1; }

.marker-inline {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-block;
  margin-top: 2px;
}

.feature-meta {
  font-size: 0.85rem;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
  margin: 0 0 0.75rem;
}
.feature-card p { margin: 0 0 0.5rem; }

/* Card figure: image with optional caption + credits.
   Image is cropped to a fixed aspect via object-fit:cover, so all cards
   line up uniformly regardless of source image dimensions and there's
   no layout shift on load. Caption sits below; credits trail the caption
   inline, separated by mid-dots. */
.feature-figure {
  margin: 0.5rem 0 0.85rem;
}
.feature-figure img {
  display: block;
  width: 100%;
  height: 14rem;
  object-fit: cover;
  object-position: center;
  border-radius: 3px;
  margin: 0;
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.feature-figure img.is-loaded {
  opacity: 1;
}
.feature-figure figcaption {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-muted);
  font-style: italic;
}
.feature-figure .figure-credit {
  display: inline;
  margin-left: 0rem;
  color: var(--ink-faint);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}
.feature-figure .figure-credit a {
  color: inherit;
  text-decoration-color: var(--ink-faint);
}
.feature-figure .figure-credit a:hover {
  color: var(--ink-muted);
  text-decoration-color: var(--ink-muted);
}

.feature-source {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-top: 0.75rem;
}

.feature-card-program {
  background: transparent;
  box-shadow: none;
  border-style: dashed;
}

/* ---------- LEAFLET MARKER STYLES ---------- */
.svg-marker {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
  /* Transition declared here so it applies in BOTH directions:
     when .marker-emphasized is added AND when it's removed. */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.6s ease;
}

/* Spotlight markers get a subtle ring on hover */
.leaflet-marker-icon:hover .svg-marker {
  transform: scale(1.15);
}

/* Card hover synchronously emphasizes its marker on the map */
.leaflet-marker-icon.marker-emphasized .svg-marker {
  transform: scale(1.25);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

/* ---------- FOOTER ---------- */
#story-footer {
  position: relative;
  z-index: 2;
  background: var(--ink);
  color: var(--bg);
  padding: var(--side-pad);
  font-size: 0.95rem;
  min-height: 75vh;
  justify-content: flex-start;
}
#story-footer h2 {
  color: var(--bg);
  margin-bottom: 1rem;
}
#story-footer .citations {
  list-style: none;
  padding: 0;
  max-width: 60ch;
}
#story-footer .citations li {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
#story-footer a { color: var(--bg); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
	sup[id^="ref-"],
	span[id^="cite-"] {
		scroll-margin-top: 65vh;
	}
  :root {
    --side-w: 100vw;
    --side-pad: 1.5rem;
  }
  .story-body {
    grid-template-columns: 1fr;
  }
  #map-container,
  #content {
    grid-column: 1;
  }
  #map-container {
    grid-row: 1;
    height: calc(55vh - var(--nav-h));
    position: sticky;
    top: var(--nav-h);
  }
  #content {
    grid-row: 2;
    padding: 0 var(--side-pad);
  }
  .section { padding: 4rem 0; min-height: auto; }
  body { font-size: 16px; }

  /* Card column spans full width on mobile, so a taller crop fits better.
     Same 3:2-ish aspect, just scaled up to match the wider container. */
  .feature-figure img {
    height: 18rem;
  }

  /* Mobile nav: hide chapter strip, show hamburger.
     When expanded, chapter list drops down as a panel. */
  .topnav-burger { display: block; }
  .topnav-chapters {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(250, 250, 247, 0.98);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }
  #topnav.is-open .topnav-chapters {
    max-height: 80vh;
    opacity: 1;
    pointer-events: auto;
  }
  .topnav-chapters li + li::before {
    display: none;       /* drop the connector lines on mobile */
  }
  .topnav-chapters li {
    width: 100%;
  }
  .topnav-chapters a {
    padding: 0.85rem var(--side-pad);
    width: 100%;
    border-radius: 0;
  }
  .topnav-chapters .label {
    font-size: 1rem;
  }
}