/* ===========================================================
   est_theme_v2 — Drupal-specific additions to the mockup CSS.
   Lives separate from the mockup-derived CSS so it can be
   updated independently when the mockup repo evolves.
   =========================================================== */

/* ---------- Nav dropdown anchoring (Mockup uses inline-style; Drupal-Twig needs class) ---------- */
.nav-item {
  position: relative;
}
.nav-item .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-item .nav-dropdown {
  display: none;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  display: block;
}
.nav-link {
  padding: 12px 14px;
  color: var(--ink-900);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  transition: background 120ms;
  white-space: nowrap;
}
.nav-link:hover {
  background: var(--blue-50);
}
.nav-link .caret {
  font-size: 8px;
  opacity: 0.4;
  margin-left: 2px;
}

.nav-links {
  display: flex;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink-900);
  font-size: 14px;
  letter-spacing: -0.01em;
}
.brand-mark {
  background: var(--ink-900);
  color: var(--paper);
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 3px;
  font-family: var(--mono);
}
.brand strong {
  color: var(--ink-900);
}
.brand em {
  font-style: normal;
  color: var(--accent);
}
.brand-tld {
  color: var(--ink-400);
  font-size: 12px;
}

/* ---------- Mega-menu (issue #70): grouped multi-column dropdown ----------
   Used by Use Cases / Resources — a .nav-dropdown whose children are group
   headers. Reveal is inherited from .nav-item:hover/:focus-within .nav-dropdown
   above. Right-anchored: both mega triggers sit in the right half of the bar,
   so a wide panel anchored right never overflows the viewport. */
.nav-dropdown--mega {
  left: auto;
  right: -12px;
  min-width: 0;
  max-width: calc(100vw - 32px);
}
.nav-dropdown--mega .nav-dropdown-inner {
  padding: 14px 16px;
}
.nav-mega-grid {
  column-gap: 28px;
}
.nav-dropdown--cols-2 .nav-mega-grid { columns: 2; width: min(560px, calc(100vw - 24px)); }
.nav-dropdown--cols-3 .nav-mega-grid { columns: 3; width: min(640px, calc(100vw - 24px)); }
.nav-dropdown--cols-4 .nav-mega-grid { columns: 4; width: min(1120px, calc(100vw - 64px)); }
/* The 4-column Use Cases mega is too wide to sit under its mid-bar trigger, so
   it anchors to the nav container and right-aligns there to use the full width
   (Markus: "plenty of space still"). :has() unsupported → falls back to the
   trigger-anchored position above; other (narrower) megas stay under their item. */
.nav-inner { position: relative; }
.nav-item:has(.nav-dropdown--cols-4) { position: static; }
.nav-dropdown--cols-4 { right: 0; }
/* Methodology (cols-3) is the LEFTMOST trigger, so a wider panel right-anchored
   under it would overflow off the left edge. Left-anchor it instead so it opens
   under the trigger and extends rightward into the open space (overrides the
   shared right:-12px from .nav-dropdown--mega above). */
.nav-dropdown--cols-3 { left: -12px; right: auto; }

/* ---------- Lighthouse AA contrast fixes (small accent text was < 4.5:1) ---------- */
.eyebrow { color: #1f6fa0; }                              /* was #2B8BC7 (3.7:1) */
.logo-placeholder { color: #4f5d6b; }                     /* was #8695A6 (2.9:1) */
.mp-seg-range { color: #4d5a68; }                         /* the range subline was --ink-500 (borderline); label stays --ink-700 (AA) */
.video-altlang a,
.video-valueprops .smallcaps { color: #1f6fa0; }          /* brand blue on white (3.7:1) */
.nav-mega-col {
  break-inside: avoid;
  padding-bottom: 12px;
}
.nav-mega-heading {
  font-size: 16px;          /* match the main-menu text size (was 11px) */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: #e9f2f8;      /* subtle brand-tint section band (Markus: "give a background color to the section titles") */
  border-radius: 6px;
  padding: 7px 12px;        /* even band (was 8px 12px 6px) */
  margin-bottom: 6px;       /* gap between the band and its links */
}
.nav-dropdown-item--mega {
  padding: 5px 12px;
}
.nav-dropdown-item--mega .nav-dropdown-label {
  font-weight: 500;
  font-size: 16px;        /* match the page/top-nav body size (was 13px) */
  line-height: 1.35;
}
/* Collapse to one column only on real mobile widths (the multi-column panel is
   ~564px, which still fits — right-anchored — down to ~600px viewports, so the
   3-column layout shows on normal desktop/laptop windows like the old menu).
   Below this it stacks; a tap-to-expand mobile accordion is a follow-up (#70). */
@media (max-width: 540px) {
  .nav-dropdown--mega { right: auto; left: 0; }
  .nav-dropdown--cols-2 .nav-mega-grid,
  .nav-dropdown--cols-3 .nav-mega-grid,
  .nav-dropdown--cols-4 .nav-mega-grid { columns: 1; width: min(300px, calc(100vw - 24px)); }
}

/* ---------- Generic content tables (migrated Drupal-pages) ---------- */
.content-body table,
.page-content-main table,
.content-section table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 24px 0 32px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.content-body table thead,
.page-content-main table thead,
.content-section table thead {
  background: var(--ink-100);
}
.content-body table th,
.page-content-main table th,
.content-section table th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-700);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.content-body table td,
.page-content-main table td,
.content-section table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: top;
  color: var(--ink-900);
}
.content-body table tbody tr:last-child td,
.page-content-main table tbody tr:last-child td,
.content-section table tbody tr:last-child td {
  border-bottom: 0;
}
.content-body table tbody tr:nth-child(even) td,
.page-content-main table tbody tr:nth-child(even) td,
.content-section table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--blue-50) 35%, transparent);
}
.content-body table tbody tr:hover td,
.page-content-main table tbody tr:hover td,
.content-section table tbody tr:hover td {
  background: var(--blue-50);
}
.content-body table a,
.page-content-main table a,
.content-section table a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.content-body table a:hover,
.page-content-main table a:hover,
.content-section table a:hover {
  text-decoration: underline;
}

/* Tables wrapped in a scroller — but only the table itself scrolls, not the whole body */
.content-body table,
.page-content-main table {
  max-width: 100%;
}

/* ---------- Images im content-body: niemals breiter als Container ---------- */
.content-body img,
.page-content-main img,
.content-section img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 24px auto;
  border-radius: 6px;
}
/* "data-align" classes (Drupal-CKEditor uses data-align attribute, may also use these helper classes) */
.content-body img[data-align="left"],
.page-content-main img[data-align="left"] {
  margin-left: 0;
  margin-right: auto;
}
.content-body img[data-align="right"],
.page-content-main img[data-align="right"] {
  margin-left: auto;
  margin-right: 0;
}
/* Embedded Drupal-WYSIWYG image-wrappers */
.content-body figure,
.page-content-main figure {
  margin: 24px 0;
  max-width: 100%;
}
.content-body figure img,
.page-content-main figure img {
  width: 100%;
  height: auto;
}
.content-body figcaption,
.page-content-main figcaption {
  font-size: 13px;
  color: var(--ink-500);
  text-align: center;
  margin-top: 8px;
}

/* Caption / figure-style table titles (the mockup uses "Table N: ..." text just above the table) */
.content-body p:has(+ table) {
  text-align: center;
  font-size: 13px;
  color: var(--ink-500);
  font-weight: 500;
  margin-bottom: 6px;
  margin-top: 24px;
}

/* ---------- Header / nav: spread menu items across container ---------- */
/* Nav-inner uses the same .page constraints as the rest of the site so
   the logo aligns with the page column's left edge and the menu group
   ends flush with the page column's right edge. Markup keeps the
   class="nav-inner page" wrapper; we just don't override .page here. */
/* Nav layout: logo on the left, menu items pushed to the right edge of
   the container with even gaps — mirrors the legacy site's distribution.
   The Drupal block-render system wraps {{ page.primary_menu }} in an
   unclassed <div>, so the actual flex children of .nav-inner are .brand
   and that wrapper — not .nav-links. We push the wrapper right and make
   it pass layout through to its child via display:contents below. */
.nav-inner > div:not(.brand) {
  margin-left: auto;
  display: contents;       /* let .nav-links become the direct flex child */
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;       /* now effective because parent is display:contents */
  flex: 0 1 auto;
}
.nav-link {
  padding: 12px 4px;
  font-size: 16px;         /* up from 14px — more readable, fills space */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-700);
}
.nav-link:hover {
  background: transparent;
  color: var(--blue-700);
}
.nav-link .caret {
  font-size: 11px;
  opacity: 0.55;
  margin-left: 4px;
}
/* Brand: use the original logo image instead of an "EST" text-mark */
.brand-mark.brand-mark--img {
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: 0;
}
.brand-mark.brand-mark--img img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}
/* Header brand: icon only, no wordmark */
/* Icon-only header brand (logo-icon.png is a clean 35x35 chart icon). */
.brand.brand--icon-only {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand.brand--icon-only .brand-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

/* Wordmark variant: matches the live www.eventstudytools.com header brand. */
.brand.brand--wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand.brand--wordmark .brand-logo {
  height: 44px;
  width: auto;
  display: block;
}
@media (max-width: 600px) {
  .brand.brand--wordmark .brand-logo { height: 36px; }
}

/* Footer brand: HTML wordmark (no icon, larger type than .brand default). */
.brand.brand--footer {
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand.brand--footer strong { font-weight: 700; }
.brand.brand--footer em { font-weight: 500; }
.brand.brand--footer .brand-tld {
  font-size: 18px;
  font-weight: 400;
}

/* ---------- FAQ accordion (v2 styling — clearer delineation) ---------- */
.faq-section {
  margin-bottom: 48px;
}
.faq-section + .faq-section {
  padding-top: 12px;
  border-top: 1px solid var(--ink-100);
}
.faq-section-title,
h2.faq-section-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 40px 0 24px;
  color: var(--ink-900);
  font-family: var(--sans);
  line-height: 1.2;
}
/* First section title doesn't need the top margin */
.content-body > .faq-section-title:first-child,
.content-body > h2.faq-section-title:first-child {
  margin-top: 0;
}
/* Ensure breathing room between a section title and the next FAQ card,
   even when sibling-margin-collapse would otherwise remove it */
h2.faq-section-title + details.faq-item,
.faq-section-title + details.faq-item {
  margin-top: 8px;
}
.faq-section-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The FAQ item card */
details.faq-item {
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
  transition: border-color 150ms, box-shadow 150ms;
}
details.faq-item:hover {
  border-color: var(--ink-300);
}
details.faq-item[open] {
  border-color: var(--ink-300);
  background: var(--white, #fff);
  box-shadow: 0 1px 3px rgba(14, 36, 57, 0.04), 0 4px 12px rgba(14, 36, 57, 0.04);
}

/* The clickable question (summary) */
details.faq-item > summary {
  list-style: none;
  list-style-type: none;
  cursor: pointer;
  padding: 18px 24px;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  user-select: none;
  transition: background 120ms;
  position: relative;
}
/* Hide native disclosure triangles — separate rules so the CSS aggregator
   doesn't drop the WebKit-specific one when comma-joined. */
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary::marker { display: none; content: ""; }

/* Custom toggle icon — circular badge with +/− */
details.faq-item > summary::after {
  content: "+";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink-100);
  color: var(--ink-700);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, color 120ms, transform 200ms;
}
details.faq-item[open] > summary::after {
  content: "−";
  background: var(--accent);
  color: var(--paper);
}
details.faq-item > summary:hover {
  background: color-mix(in srgb, var(--blue-50) 60%, transparent);
}
details.faq-item > summary:hover::after {
  background: var(--ink-200);
}
details.faq-item[open] > summary:hover::after {
  background: var(--blue-700, #1F6FA0);
}
details.faq-item > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The answer content */
.faq-answer {
  padding: 8px 24px 22px;
  color: var(--ink-700);
  font-size: 14.5px;
  line-height: 1.65;
  border-top: 1px solid var(--ink-100);
  margin-top: 0;
}

/* Compact tables inside FAQ answers — save vertical space */
.faq-answer table,
.faq-answer .table-scroll table {
  font-size: 13px;
  line-height: 1.4;
  margin: 12px 0;
  box-shadow: none;
}
.faq-answer table th {
  padding: 6px 12px !important;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.faq-answer table td {
  padding: 6px 12px !important;
  vertical-align: top;
  height: auto;
}
.faq-answer table tr {
  /* prevent legacy height-attributes from forcing tall rows */
  height: auto;
}
.faq-answer table p {
  margin: 0 0 4px;
}
.faq-answer table p:last-child {
  margin-bottom: 0;
}
.faq-answer > *:first-child { margin-top: 16px; }
.faq-answer img { max-width: 100%; height: auto; margin: 14px 0; border-radius: 6px; border: 1px solid var(--ink-100); }
.faq-answer ul, .faq-answer ol { margin: 10px 0 10px 24px; padding-left: 0; }
.faq-answer li { margin-bottom: 6px; }
.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer table { margin: 14px 0; font-size: 13px; }
.faq-answer a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.faq-answer a:hover { border-bottom-color: var(--accent); }

/* ---------- ARC upload: rail-card head with Step 3 badge ---------- */
.rail-stepblock-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-100);
}
.rail-stepblock-head .step-badge {
  flex-shrink: 0;
}
.rail-card-title {
  flex: 1;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.rail-stepblock-head .rail-progress {
  flex-shrink: 0;
  color: var(--ink-500);
  font-size: 12px;
  font-feature-settings: "tnum";
}

/* ---------- ARC upload: email field in the sticky run rail ---------- */
.rail-email-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-100);
}
.rail-email-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: 0.01em;
}
.rail-email-field input {
  padding: 8px 10px;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  background: var(--paper);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-900);
}
.rail-email-field input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* ---------- ARC upload: CSV validator ---------- */
.csv-validator {
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid var(--ink-200);
  background: var(--paper);
  overflow: hidden;
}
.csv-validator-ok    { border-color: color-mix(in srgb, var(--green, #4B8F6B) 40%, var(--ink-200)); }
.csv-validator-warn  { border-color: color-mix(in srgb, var(--gold, #D4A64A) 50%, var(--ink-200)); }
.csv-validator-fail  { border-color: color-mix(in srgb, var(--coral, #E07A5F) 50%, var(--ink-200)); }
.csv-validator-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
  text-align: left;
}
.csv-validator-summary:hover { background: var(--ink-100); }
.csv-validator-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: white;
}
.csv-validator-dot-ok    { background: var(--green, #4B8F6B); }
.csv-validator-dot-warn  { background: var(--gold, #D4A64A); }
.csv-validator-dot-fail  { background: var(--coral, #E07A5F); }
.csv-validator-label { flex: 1; }
.csv-validator-chev { color: var(--ink-400); font-size: 10px; }
.csv-validator-list {
  list-style: none;
  padding: 4px 12px 12px;
  margin: 0;
  border-top: 1px solid var(--ink-100);
  background: color-mix(in srgb, var(--paper) 100%, transparent);
}
.csv-check {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  font-size: 12px;
  line-height: 1.45;
  border-bottom: 1px dashed var(--ink-100);
}
.csv-check:last-child { border-bottom: 0; }
.csv-check-icon {
  flex-shrink: 0;
  font-weight: 700;
  margin-top: 1px;
  width: 14px;
  text-align: center;
}
.csv-check-ok   .csv-check-icon { color: var(--green, #4B8F6B); }
.csv-check-warn .csv-check-icon { color: var(--gold, #D4A64A); }
.csv-check-fail .csv-check-icon { color: var(--coral, #E07A5F); }
.csv-check-body { display: flex; flex-direction: column; gap: 2px; }
.csv-check-label { font-weight: 600; color: var(--ink-900); }
.csv-check-detail { color: var(--ink-500); }

/* ---------- ARC upload: green success state on uploaded files (default mockup uses blue) ---------- */
.file-slot .req-dot {
  color: var(--coral, #E07A5F);
}
.file-slot.filled .req-dot {
  color: var(--green, #4B8F6B);
}
.file-slot.filled .file-slot-drop {
  border-color: var(--green, #4B8F6B) !important;
  background: color-mix(in srgb, var(--green, #4B8F6B) 8%, var(--paper)) !important;
}
.file-slot.filled .file-slot-filled svg path[stroke="var(--accent)"] {
  stroke: var(--green, #4B8F6B) !important;
}

/* Sidebar validation-item: green check when uploaded */
.validation-item.ok .validation-icon,
.validation-item .check-icon {
  color: var(--green, #4B8F6B);
}

/* ---------- React-app pages: hide Drupal chrome (the app provides its own) ---------- */
body.path-arc-upload nav.nav,
body.path-arc-upload .breadcrumb,
body.path-arc-upload .site-footer,
body.path-arc-upload footer.footer,
body.path-arc-upload .page-main > .page > .content-above {
  display: none !important;
}

/* App-detail pages (descriptive, not the calculator) — body has its own .crumbs
   inside .aarc-header, so suppress Drupal's separate breadcrumb-block above. */
body.path-arc .breadcrumb,
body.path-avc .breadcrumb,
body.path-avyc .breadcrumb,
body.path-cata .breadcrumb,
body.path-edi .breadcrumb {
  display: none !important;
}
body.path-arc-upload .page-main {
  padding: 0;
}
body.path-arc-upload .page-main > .page {
  max-width: none;
  padding: 0;
  margin: 0;
}
body.path-arc-upload .page-content-main {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ---------- Page-content: full-width within the .page container, no offset ---------- */
.page-content-main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Drupal wraps every block in multiple empty <div>s — kill their default margins */
.page-content-main > div,
.page-content-main > div > div,
.page-content-main article,
.page-content-main article > div {
  margin: 0;
  padding: 0;
}
.page-content-main p,
.page-content-main li {
  overflow-wrap: anywhere;
}
/* Same treatment for the content-above region (page title sits there on non-front pages) */
.content-above,
.content-above > div {
  margin: 0;
  padding: 0;
}
.page-content-main .content-hero {
  margin: 0;
  padding: 32px 0 24px;
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
}
.page-content-main .content-hero-inner {
  max-width: 880px;
}
.content-hero-h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  margin: 8px 0 12px;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.content-hero-lede {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-500);
  margin: 0;
  max-width: 640px;
}
.content-hero-back {
  margin-top: 16px;
  font-size: 13px;
}
.content-hero-back a {
  color: var(--ink-500);
  text-decoration: none;
}
.content-hero-back a:hover {
  color: var(--accent);
}

/* ---------- Breadcrumb harmonization (uses default .page padding for alignment) ---------- */
.breadcrumb {
  padding: 16px 0 0;
  font-size: 13px;
  color: var(--ink-500);
}
/* DON'T override .breadcrumb .page — let it use the global .page styling (1320px max, 40px padding) */
.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb li + li::before {
  content: "/";
  color: var(--ink-300);
  font-weight: 400;
}
.breadcrumb a {
  color: var(--ink-500);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--accent);
}

/* ---------- Hero-h1-accent (Mockup uses span class for the second-half color) ---------- */
.hero-h1-accent {
  color: var(--accent);
  display: block;
}

/* ---------- References / Bibliography ---------- */
.ref-list {
  list-style: none;
  padding-left: 0;
  counter-reset: ref-counter;
  margin: 16px 0;
}
.ref-entry {
  counter-increment: ref-counter;
  position: relative;
  padding: 18px 0 18px 56px;
  border-bottom: 1px solid var(--ink-100);
  scroll-margin-top: 100px;
}
.ref-entry::before {
  content: "[" counter(ref-counter) "]";
  position: absolute;
  left: 0;
  top: 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-400);
  font-feature-settings: "tnum";
}
.ref-entry:target {
  background: color-mix(in srgb, var(--blue-50) 70%, transparent);
  border-radius: 8px;
  border-bottom-color: transparent;
  padding-left: 64px;
  padding-right: 16px;
  margin-left: -16px;
  margin-right: -16px;
}
.ref-entry:target::before {
  left: 16px;
  color: var(--accent);
  font-weight: 600;
}
.ref-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-900);
  overflow-wrap: anywhere;
}
.ref-doi {
  word-break: break-all;
  font-size: 0.92em;
}
.ref-cited-on {
  margin: 6px 0 0;
  font-size: 10px;
  color: var(--ink-400);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ref-cited-on a {
  color: var(--ink-500);
  text-decoration: none;
}
.ref-cited-on a:hover {
  color: var(--accent);
}
.ref-cited-inline {
  color: var(--ink-400);
  font-size: 0.92em;
  font-style: italic;
}
.ref-cited-inline::before {
  content: " · ";
  color: var(--ink-300);
  font-style: normal;
}
.ref-cited-inline a {
  color: var(--ink-500);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-300);
}
.ref-cited-inline a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.ref-counter {
  color: var(--ink-400);
  text-align: right;
  font-size: 12px;
  margin: 8px 0 16px;
  letter-spacing: 0.03em;
}

/* Inline cites in body-text: small chip-like rendering */
.cite-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.95em;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  padding-bottom: 0;
  transition: border-bottom-color 120ms, color 120ms;
}
.cite-link:hover {
  border-bottom-color: var(--accent);
  text-decoration: none;
}

/* Per-page references section appended at the end of nodes */
.page-references {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 2px solid var(--ink-200);
}
.page-references h2 {
  font-size: 18px;
  margin: 0 0 16px;
  color: var(--ink-700);
  letter-spacing: -0.01em;
}
.page-references ol {
  list-style: decimal;
  padding-left: 24px;
}
.page-references li {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
  color: var(--ink-700);
}
.page-references a {
  color: var(--accent);
  text-decoration: none;
}
.page-references a:hover {
  text-decoration: underline;
}

/* ============================================================
   Readability bumps — May 2026
   Several utility classes were sized for desktop wide-screens
   only and rendered as borderline-unreadable in the wild. We
   bump them globally so the same components stay legible
   across hero meta, institutions strip and app-cards.
   ============================================================ */

/* Section eyebrows (e.g. "EVENT STUDIES · NEWS ANALYTICS", "THE RESEARCH APPS") */
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.10em;
  font-weight: 600;
}

/* Smallcaps labels (hero-meta sub-labels, institutions-lead, app-card dt).
   The base rule in styles.css applies `font-variant-caps: all-small-caps`
   which renders glyphs at roughly 75% of declared size — that's why
   13px reads like 10px. We override the variant to a plain uppercase
   text-transform so the declared font-size matches the rendered size. */
.smallcaps {
  font-variant-caps: normal;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-600);
}

/* Hero lede paragraph — bump for comfortable scanning */
.hero-lede,
.hero-copy--wide .hero-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-800);
}

/* Hero meta strip — bigger mono numbers, larger labels (already covered by .smallcaps above) */
.hero-meta {
  gap: 36px;
  margin-top: 44px;
  padding-top: 28px;
}
.hero-meta .mono {
  font-size: 24px;
}

/* Institutions-strip eyebrow — long sentence, deserves explicit bump */
.smallcaps.institutions-lead {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink-700);
  margin-bottom: 18px;
  font-weight: 600;
}

/* Nav-inner: zentriert auf gleicher Breite wie .page (1320px max).
   .nav selbst (Hintergrund + Border) bleibt full-width via styles.css. */

/* Section-head two-column layout (eyebrow+h2 left, lede right):
   align lede to the bottom of the left stack so it sits on the h2 baseline,
   not on the small-text eyebrow baseline. */
.section-head {
  align-items: flex-end;
}
.section-head .lede {
  margin-bottom: 6px;
}

/* Stacked variant: title + lede are vertically stacked in the same left
   block, lede runs full container width (no 2-column section-head). */
.section-head--stacked {
  display: block;
  align-items: initial;
}
.section-head--stacked > div {
  width: 100%;
}
.section-head .section-head-lede {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-600);
  max-width: none;
}

/* Video-intro: english video on the left, value-props bullet list on the right.
   The Chinese version is no longer embedded — surfaces as a discreet text link
   below the English video, consistent with the original site's pattern. */
.video-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 920px) {
  .video-intro-grid { grid-template-columns: 1fr; gap: 32px; }
}
.video-intro-media .video-card {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.video-intro-media .video-thumb {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 240px;
  background-size: cover;
  background-position: center;
  background-color: #0d2031;
  text-decoration: none;
}
/* Padding-bottom fallback for older browsers without aspect-ratio support */
@supports not (aspect-ratio: 1) {
  .video-intro-media .video-thumb {
    height: 0;
    padding-bottom: 56.25%;
  }
}
.video-intro-media .video-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
}
.video-intro-media .video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(43, 139, 199, 0.92);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  transition: transform 120ms ease, background 120ms ease;
  z-index: 1;
}
.video-intro-media .video-thumb:hover .video-play {
  transform: translate(-50%, -50%) scale(1.06);
  background: var(--accent);
}
.video-intro-media figcaption {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}
.video-intro-media figcaption .smallcaps {
  color: var(--ink-500);
  font-size: 11px;
  margin-bottom: 4px;
}
.video-intro-media .video-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
}
.video-altlang {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.45;
}
.video-altlang a {
  color: var(--accent);
  text-decoration: none;
}
.video-altlang a:hover { text-decoration: underline; }

.video-valueprops .video-valueprops-head {
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 14px;
}
.video-valueprops ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}
.video-valueprops li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-700);
  margin-bottom: 10px;
}
.video-valueprops li:last-child { margin-bottom: 0; }
.video-valueprops a {
  color: var(--accent);
  text-decoration: none;
}
.video-valueprops a:hover { text-decoration: underline; }

/* App-card descriptions and metric labels — were 13.5/10/13, now 15/12/15 */
.app-card .app-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-700);
}
.app-card .app-metrics dt {
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-500);
}
.app-card .app-metrics dd {
  font-size: 14px;
}
.app-card .app-name {
  font-size: 18px;
}
.app-card .app-link {
  font-size: 14px;
}

/* Footer column lists (Research Apps, Methodology, etc.) — bump from default */
.footer-col ul a,
.footer-col li {
  font-size: 14px;
}
.footer-col .smallcaps {
  font-size: 12px;
  margin-bottom: 12px;
}

/* ============================================================
   Section-shading alternation (methodology-led reorder, May 2026)
   Sequence: Hero · Institutions · Methodology · Features · VideoIntro
   · AppsGrid · Citations · CtaBand.
   Methodology stays white so the timeline ribbon + step cards read
   clearly; the alternation goes white-cream-white-cream from there.
   ============================================================ */
.section.method      { background: var(--paper); }     /* white (override any prior rule) */
.section.features    { background: var(--paper-2); }   /* cream */
.section.video-intro { background: var(--paper); }     /* white (override additions.css) */
.section#apps        { background: var(--paper-2); }   /* cream */
.section.cites       { background: var(--paper); }     /* white */
.section.cta-band    { background: var(--paper-2); }   /* cream */

/* ============================================================
   Cookie banner (informational mode for now; consent-gate ready)
   Fixed bottom of viewport, hidden until JS adds .is-visible.
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(20px);
  width: min(720px, calc(100% - 32px));
  background: var(--paper, #fff);
  border: 1px solid var(--ink-200, #E3E8EF);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(10, 22, 40, 0.12), 0 2px 6px rgba(10, 22, 40, 0.06);
  padding: 16px 20px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-800, #2B3E54);
}
.cookie-banner.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.cookie-banner[hidden] { display: none; }

.cookie-banner__text {
  flex: 1 1 280px;
  margin: 0;
}
.cookie-banner__text a {
  color: var(--accent, #2B8BC7);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cookie-banner__btn {
  font: inherit;
  border: 1px solid var(--ink-200, #E3E8EF);
  background: var(--paper, #fff);
  color: var(--ink-800, #2B3E54);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.cookie-banner__btn:hover {
  border-color: var(--accent, #2B8BC7);
  color: var(--accent, #2B8BC7);
}
.cookie-banner__btn--primary {
  background: var(--accent, #2B8BC7);
  border-color: var(--accent, #2B8BC7);
  color: #fff;
}
.cookie-banner__btn--primary:hover {
  background: var(--blue-700, #1F6FA0);
  border-color: var(--blue-700, #1F6FA0);
  color: #fff;
}

@media (max-width: 600px) {
  .cookie-banner {
    bottom: 12px;
    padding: 14px 16px;
    font-size: 13px;
  }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__btn { flex: 1; }
}

/* ============================================================
   Methodology pipeline — timeline ribbon + 5 horizontal step cards
   Adapted from the May 2026 design-handoff package.
   ============================================================ */
.method-pipeline {
  margin-bottom: 32px;
}
.method-pipeline-bar {
  position: relative;
  height: 64px;
  margin-bottom: 28px;
}
.mp-seg {
  position: absolute;
  top: 16px;
  height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 14px;
  border-radius: 4px;
  transition: opacity 200ms ease, filter 200ms ease, box-shadow 200ms ease;
}
/* De-emphasise inactive segments via a flat, desaturated fill — NOT opacity,
   which would dilute the label text below WCAG AA (a11y color-contrast). The
   active segment still pops via its .mp-on ring. */
.mp-seg.mp-off { filter: saturate(0.4); background: var(--blue-50); border-color: var(--ink-200); }
.mp-seg.mp-on {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-600) 22%, transparent);
  z-index: 2;
}
.mp-event-marker.mp-off { opacity: 0.32; }
.mp-seg-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-700);
  line-height: 1;
}
.mp-seg-range {
  font-size: 10px;
  color: var(--ink-500);
  margin-top: 3px;
  line-height: 1;
}
.mp-wash {
  background: var(--blue-50);
  border: 1px solid color-mix(in srgb, var(--blue-600) 18%, transparent);
}
.mp-accent {
  background: color-mix(in srgb, var(--blue-600) 18%, var(--paper));
  border: 1px solid var(--accent);
}
.mp-accent .mp-seg-label,
.mp-accent .mp-seg-range { color: var(--blue-700); }
.mp-muted {
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
}
.mp-event-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 200ms ease;
}
.mp-marker-stem {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 2px;
  height: 42px;
  background: var(--blue-700);
  transform: translateX(-50%);
}
.mp-marker-tag {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--blue-700);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.method-pipeline-axis { height: 8px; }

.method-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .method-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .method-cards { grid-template-columns: 1fr; }
}
.method-card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  padding: 16px 14px 18px;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.method-card:hover {
  border-color: color-mix(in srgb, var(--blue-600) 45%, transparent);
}
.method-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-600) 12%, transparent);
}
.method-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.method-card-chip {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--blue-50);
  border: 1px solid color-mix(in srgb, var(--blue-600) 25%, transparent);
  color: var(--blue-700);
  border-radius: 3px;
  font-weight: 500;
  line-height: 1.3;
}
.method-viz {
  width: 100%;
  height: 60px;
  display: block;
  background: var(--paper-2);
  border-radius: 6px;
}
.method-card-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.method-card-desc {
  font-size: 12px;
  color: var(--ink-500);
  line-height: 1.5;
}

/* Drop the old vertical list styling for .method-steps (no longer used). */
.method-steps { display: none; }

/* ============================================================
   Heading anchor links (h2/h3) — hover reveals #
   ============================================================ */
.page-content-main h2,
.page-content-main h3 {
  position: relative;
  scroll-margin-top: 80px;
}
.page-content-main h2 .heading-anchor,
.page-content-main h3 .heading-anchor {
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-400);
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  font-size: 0.7em;
  line-height: 1;
  padding: 4px;
}
.page-content-main h2:hover .heading-anchor,
.page-content-main h3:hover .heading-anchor,
.page-content-main h2 .heading-anchor:focus,
.page-content-main h3 .heading-anchor:focus {
  opacity: 1;
}
.page-content-main h2 .heading-anchor:hover,
.page-content-main h3 .heading-anchor:hover {
  color: var(--accent);
}

/* (The "Last updated" footer line + its .est-last-updated styles were removed
   2026-06-17 — the changed-date is not shown on any page anymore.) */

/* ============================================================
   Code blocks: highlight.js theme overrides + copy button
   ============================================================ */
.page-content-main pre {
  position: relative;
  background: var(--ink-50, #f7f6f4);
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
  margin: 18px 0;
}
.page-content-main pre code,
.page-content-main pre code.hljs {
  background: transparent;
  padding: 0;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  color: var(--ink-800);
}
.page-content-main code:not(pre code) {
  background: var(--ink-50, #f7f6f4);
  border: 1px solid var(--ink-100);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.92em;
  color: var(--accent);
}
.code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 4px;
  padding: 3px 9px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  color: var(--ink-600);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.page-content-main pre:hover .code-copy,
.code-copy:focus {
  opacity: 1;
}
.code-copy:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ============================================================
   Print stylesheet — clean PDF/paper output
   ============================================================ */
@media print {
  /* Strip chrome */
  .nav,
  .footer,
  .breadcrumb,
  .highlighted,
  .sidebar,
  .skip-link,
  .heading-anchor,
  .code-copy,
  .rail-card,
  .est-toc,
  .page-cta,
  details.faq-item > summary::after,
  iframe,
  video,
  audio,
  noscript {
    display: none !important;
  }
  /* Open all collapsed FAQ items so print captures full content */
  details {
    display: block !important;
  }
  details > summary {
    list-style: none;
  }
  details[open] > summary,
  details > summary {
    font-weight: 600;
    margin-bottom: 6px;
  }
  details > *:not(summary) {
    display: block !important;
  }
  /* Layout */
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 11pt;
    line-height: 1.55;
  }
  .page,
  .page-main,
  .page-content,
  .page-content-main {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
  }
  /* Hyperlinks: show URL after */
  a[href]:not([href^="#"])::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }
  a[href^="/"]::after {
    content: " (https://www.eventstudytools.com" attr(href) ")";
  }
  /* No background colors on figures/cards */
  .card, .panel, table, pre {
    background: #fff !important;
    border: 1px solid #999 !important;
    box-shadow: none !important;
  }
  /* Avoid page-break inside crucial blocks */
  h1, h2, h3, h4 {
    page-break-after: avoid;
    color: #000 !important;
  }
  pre, table, figure, blockquote, .faq-item {
    page-break-inside: avoid;
  }
  /* Print URL of current page in footer */
  @page {
    margin: 1.5cm 1.5cm 2cm 1.5cm;
  }
}

/* ===========================================================
   #20: Drupal-specific design deltas that diverged from the
   mockup CSS. The shared additions.css / upload.css stay pure
   src-derived; these overrides (loaded after them) carry the
   Drupal-only evolution so the frozen mockup stays untouched.
   =========================================================== */

/* Institutions bar — the Drupal-only institutions-rotation.js emits
   .institution-chip (static chips), replacing the mockup's linked
   .logo-link. Override the row layout for nowrap chips. (Without this
   the chips render unstyled on the Drupal site; the visual-regression
   gate hides .institutions-bar, so it never caught the drift.) */
.institutions-row {
  flex-wrap: nowrap;
  gap: 18px;
  white-space: nowrap;
  overflow: hidden;
  min-height: 28px;
}
.institution-chip {
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: default;
}