/*
 * Public site design system (see docs/DESIGN_SYSTEM.md for the full
 * rationale behind every token/component below). Loaded once, after
 * Bootstrap's own CSS, by views/layouts/public_header.php — every public
 * page inherits it. NEVER loaded by an admin page (public/admin separation,
 * CLAUDE.md Phase 2.0).
 */

:root {
  /* ---- Color ---- */
  --brand-primary: #1B4B91;
  --brand-primary-dark: #123869;
  --brand-accent: #E8763C;
  --brand-dark: #0E1B2A;
  --brand-muted: #5B6472;

  --surface: #FFFFFF;
  --surface-subtle: #F6F7F5;
  --surface-dark: #132538;

  --border: #E4E7EC;
  --border-dark: rgba(255, 255, 255, 0.14);

  --text-primary: #12181F;
  --text-secondary: #5B6472;
  --text-on-dark: #F3F5F7;
  --text-on-dark-muted: rgba(243, 245, 247, 0.68);

  /* ---- Typography ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Spacing ---- */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --container-max: 1320px;
  --section-space-y: clamp(3rem, 6vw, 6rem);
  --header-height: 72px;

  /* ---- Radius & elevation ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 32, 0.06);
  --shadow-md: 0 12px 24px -8px rgba(16, 24, 32, 0.16);
  --shadow-focus: 0 0 0 3px rgba(27, 75, 145, 0.25);

  /* Re-point Bootstrap's own primary-color variables at the brand color
     so every page this phase did NOT individually rewrite (conferences.php,
     conference-detail.php, organization-detail.php, series-detail.php,
     topic-detail.php — all untouched Phase 2.0-2.3 logic) still renders
     with ONE consistent brand color for .btn-primary/.badge.bg-primary/
     .text-primary/.border-primary, rather than Bootstrap's stock blue
     sitting next to this phase's --brand-primary. Layout/structure on
     those pages is completely unchanged — this is a color-only bridge. */
  --bs-primary: #1B4B91;
  --bs-primary-rgb: 27, 75, 145;
  --bs-link-color: #1B4B91;
  --bs-link-color-rgb: 27, 75, 145;
  --bs-link-hover-color: #123869;
  --bs-link-hover-color-rgb: 18, 56, 105;
}

/* ============================================================
   Base
   ============================================================ */

html {
  overflow-x: hidden;
}
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Sticky footer: on short-content pages (e.g. Topics), #main-content
   grows to fill any leftover viewport height so the footer sits flush
   against the bottom of the screen instead of floating mid-page with
   blank space beneath it. Long pages are unaffected — content still
   pushes the footer down normally. */
#main-content {
  flex: 1 0 auto;
}

h1, h2, h3, .section-title, .hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

a {
  color: var(--brand-primary);
}
a:hover {
  color: var(--brand-primary-dark);
}

.container {
  max-width: var(--container-max);
}

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.eyebrow-on-dark {
  color: #fff;
}
.eyebrow-accent {
  color: var(--brand-accent);
}
.text-on-dark-muted {
  color: var(--text-on-dark-muted);
}

.section-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.15;
}

.section-lede {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 640px;
}

section[data-section] {
  padding-top: var(--section-space-y);
  padding-bottom: var(--section-space-y);
}

/* Focus visibility, site-wide */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
input:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--shadow-focus);
  border-color: var(--brand-primary);
}
.form-control:focus,
.form-select:focus {
  box-shadow: var(--shadow-focus);
  border-color: var(--brand-primary);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Buttons
   ============================================================ */

/* Bootstrap bakes .btn-primary's colors in as literal values rather than
   var(--bs-primary) at the component layer, so the :root override above
   doesn't reach it — pages this phase didn't individually rewrite
   (conference-detail.php, conferences.php, organizations.php,
   series-detail.php) still use plain .btn-primary/.btn-outline-primary,
   so those are re-pointed at the brand color directly here. Layout is
   untouched; only color. */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-dark);
  --bs-btn-hover-border-color: var(--brand-primary-dark);
  --bs-btn-active-bg: var(--brand-primary-dark);
  --bs-btn-active-border-color: var(--brand-primary-dark);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
}
.badge.bg-primary,
.bg-primary {
  background-color: var(--brand-primary) !important;
}
.text-primary {
  color: var(--brand-primary) !important;
}

.btn-brand {
  background: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 0.65rem 1.35rem;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-brand:hover,
.btn-brand:focus {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-brand-outline {
  background: transparent;
  border: 1.5px solid var(--brand-primary);
  color: var(--brand-primary);
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 0.6rem 1.3rem;
  transition: background-color .18s ease;
}
.btn-brand-outline:hover {
  background: rgba(27, 75, 145, 0.08);
  color: var(--brand-primary-dark);
}

.btn-ghost-light {
  background: transparent;
  border: 1.5px solid var(--border-dark);
  color: var(--text-on-dark);
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 0.6rem 1.3rem;
  transition: background-color .18s ease, border-color .18s ease;
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* ============================================================
   Header / Navigation
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--header-height);
  background: var(--brand-dark);
  border-bottom: 1px solid var(--border-dark);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
}
.site-header .navbar-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--text-on-dark);
}
.site-header .navbar-brand:hover {
  color: #fff;
}
.site-header .navbar-brand .bi {
  font-size: 1.5rem;
  color: var(--brand-accent);
}
.site-header .nav-link {
  font-weight: 500;
  color: var(--text-on-dark-muted);
  padding: 0.4rem 0.85rem;
  position: relative;
}
.site-header .nav-link.active,
.site-header .nav-link:hover {
  color: #fff;
}
.site-header .nav-link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.15rem;
  height: 2px;
  background: var(--brand-accent);
  transform: scaleX(0);
  transition: transform .18s ease;
}
.site-header .nav-link:hover::after,
.site-header .nav-link.active::after {
  transform: scaleX(1);
}

/* Collapsed (mobile/tablet) menu panel: must be opaque — it sits above
   page content (often a dark hero), so a transparent panel would make
   its own links unreadable against whatever is behind it. Kept on the
   same dark surface as the header itself rather than switching to white,
   so the collapsed panel reads as a continuation of the navbar, not a
   different component. */
@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--brand-dark);
    border-bottom: 1px solid var(--border-dark);
    box-shadow: var(--shadow-md);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }
  .site-header .nav-link::after {
    display: none;
  }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  background: var(--brand-dark);
  color: var(--text-on-dark);
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, var(--brand-dark) 32%, rgba(14,27,42,.72) 55%, rgba(14,27,42,.25) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(3rem, 8vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.hero-title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.08;
  color: #fff;
  margin-bottom: var(--space-md);
}
.hero-subtitle {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--text-on-dark-muted);
}

/* ---- Search card ---- */

.search-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
  margin-top: var(--space-xl);
}
.search-fields {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.search-field {
  flex: 1 1 0;
  padding: 0.6rem 1rem;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.search-field:last-of-type {
  border-right: none;
}
.search-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.15rem;
}
.search-field input,
.search-field select {
  border: 0;
  padding: 0;
  width: 100%;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: transparent;
}
.search-field input:focus,
.search-field select:focus {
  outline: none;
  box-shadow: none;
}
.search-submit {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .search-fields {
    flex-direction: column;
    border: none;
    gap: 0.6rem;
  }
  .search-field {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
  }
  .search-submit {
    border-radius: var(--radius-md);
    width: 100%;
  }
}

/* ---- Chips ---- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.chip:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: #fff;
}
.chip-on-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-dark);
  color: var(--text-on-dark);
}
.chip-on-dark:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.chip-compact {
  padding: 0.3rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  background: transparent;
}
.chip-compact:hover {
  background: var(--surface-subtle);
}

/* ============================================================
   Trust / value strip
   ============================================================ */

.trust-item .trust-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(27, 75, 145, 0.08);
  color: var(--brand-primary);
  font-size: 1.35rem;
  margin-bottom: var(--space-sm);
}
.trust-item h3 {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}
.trust-item p {
  color: var(--text-secondary);
  font-size: 0.925rem;
  margin-bottom: 0;
}

/* ============================================================
   Cards — conferences / topics / locations
   ============================================================ */

.conf-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.conf-card:hover {
  border-color: rgba(27, 75, 145, 0.35);
  box-shadow: var(--shadow-md);
  color: inherit;
}
.conf-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-subtle);
}
.conf-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.conf-card:hover .conf-card-media img {
  transform: scale(1.03);
}
.badge-type {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
}
/* Conference Recommendation Label (owner-directed, post-Phase 2.6): a
   small, restrained badge on the card media — same "pill on the image"
   treatment as .badge-type above, positioned opposite it. Colors reuse
   the exact tier palette already established by .recommendation-bar-fill-*
   on the conference detail page, so the label means the same thing in
   both places. */
.badge-recommendation {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
}
.badge-recommendation-top-choice { color: #1c7a4e; }
.badge-recommendation-recommended { color: #5ba97c; }
.badge-recommendation-consider { color: var(--brand-primary); }
.badge-recommendation-caution { color: #c98a2c; }
.badge-recommendation-skip { color: var(--text-secondary); }
.badge-recommendation-none {
  color: var(--text-secondary);
  font-weight: 500;
}
.conf-card-body {
  padding: var(--space-lg);
}
.conf-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.2rem;
  line-height: 1.3;
}
.conf-card-org {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 0.65rem;
}
.conf-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}
.conf-card-meta .bi {
  color: var(--brand-primary);
  margin-right: 0.35rem;
}
.conf-card-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}
.conf-card-topics .badge {
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.55rem;
}
.conf-card-action {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-primary);
}
.conf-card:hover .conf-card-action {
  color: var(--brand-primary-dark);
}

/* ---- Topic / location tiles ---- */

.topic-tile,
.location-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.topic-tile:hover,
.location-tile:hover {
  border-color: rgba(27, 75, 145, 0.35);
  box-shadow: var(--shadow-sm);
  color: inherit;
}
.topic-tile-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}
.topic-tile-count {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.topic-tile .bi-arrow-right,
.location-tile .bi-arrow-right {
  color: var(--brand-primary);
  flex-shrink: 0;
}

.location-tile {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.location-tile-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.location-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.location-tile:hover .location-tile-media img {
  transform: scale(1.04);
}
.location-tile-body {
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ============================================================
   Editorial / value section
   ============================================================ */

.editorial-section {
  background: var(--surface-subtle);
}
.editorial-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.editorial-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.editorial-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.editorial-list li {
  display: flex;
  gap: 0.65rem;
  padding: 0.55rem 0;
  color: var(--text-secondary);
}
.editorial-list li .bi {
  color: var(--brand-accent);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* ============================================================
   Organizer CTA (dark section)
   ============================================================ */

.cta-dark {
  background: linear-gradient(135deg, var(--brand-dark) 0%, #16304A 100%);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
}
.cta-dark h2 {
  color: #fff;
}
.cta-dark p {
  color: var(--text-on-dark-muted);
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--brand-dark);
  color: var(--text-on-dark-muted);
}
.site-footer .footer-brand {
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
  font-size: 1.2rem;
}
.site-footer h6 {
  color: var(--text-on-dark);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.site-footer a {
  color: var(--text-on-dark-muted);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--brand-accent);
}
.site-footer .footer-bottom {
  border-top: 1px solid var(--border-dark);
  font-size: 0.8125rem;
}

/* ============================================================
   Empty state
   ============================================================ */

.empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  color: var(--text-secondary);
  background: var(--surface-subtle);
}

/* ============================================================
   Conference Detail page (see docs/DESIGN_SYSTEM.md "Conference
   Detail Page"). Editorial two-column hero + a 70/30 content/sidebar
   split below it — a deliberately different composition from the
   homepage's full-bleed dark hero, using the same tokens/typography.
   ============================================================ */

/* ---- Photographic conference hero (full-bleed background image,
   dark gradient overlay for legible white text) plus the section
   sub-nav bar immediately beneath it — same visual language as the
   homepage's .hero/.hero-media pattern, applied to a single edition. */
.detail-hero-photo {
  position: relative;
  color: var(--text-on-dark);
  overflow: hidden;
}
.detail-hero-photo-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.detail-hero-photo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-hero-photo-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,27,42,.45) 0%, rgba(14,27,42,.82) 100%);
}
.detail-hero-photo-inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(3.75rem, 8.5vw, 5.5rem);
  padding-bottom: clamp(3.25rem, 6.5vw, 4.5rem);
}
.detail-hero-photo-title {
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.08;
  color: #fff;
  margin-bottom: var(--space-sm);
  overflow-wrap: break-word;
}
.detail-hero-photo-org {
  font-size: 1.15rem;
  font-weight: 500;
}
.detail-hero-photo-org a {
  color: var(--text-on-dark);
  text-decoration: none;
}
.detail-hero-photo-org a:hover {
  color: #fff;
}
.detail-hero-photo-meta {
  font-size: 1.05rem;
  color: var(--text-on-dark-muted);
}
.detail-hero-photo-meta a {
  color: var(--text-on-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--border-dark);
}
.detail-hero-photo-meta a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
.detail-hero-photo-meta .bi {
  color: var(--brand-accent);
  margin-right: 0.35rem;
}
.status-pill-on-dark {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.status-pill-on-dark.status-pill-reg-open {
  background: rgba(52, 199, 89, 0.22);
  border-color: rgba(52, 199, 89, 0.5);
}

/* Section sub-nav directly beneath the hero photo — jump links to the
   page's own sections only (never a fixed list; conference-detail.php
   renders one entry per section that actually exists for this edition).
   Same dark surface as .site-header so it reads as an extension of the
   hero rather than a new component. Single-row horizontal scroll on
   narrow screens instead of wrapping, same technique used for the
   sibling meet2learn platform's organizer sub-nav. */
.detail-hero-subnav {
  background: var(--brand-dark);
  border-top: 1px solid var(--border-dark);
}
.detail-hero-subnav-inner {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: var(--space-xl);
}
.detail-hero-subnav-inner::-webkit-scrollbar {
  display: none;
}
.detail-hero-subnav-inner a {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.85rem 0.1rem;
  color: var(--text-on-dark-muted);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.detail-hero-subnav-inner a:hover {
  color: #fff;
}
.detail-hero-subnav-inner a:focus-visible {
  color: #fff;
  border-bottom-color: var(--brand-accent);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

/* ---- In-page section headings (smaller than the homepage's marketing .section-title) ---- */
.detail-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  margin-bottom: var(--space-md);
  /* .site-header is position:sticky — without this, jumping to any
     #...-heading anchor (the section sub-nav, a paginated section's
     "back to top of this list" link) lands the heading right under the
     sticky header, half hidden. */
  scroll-margin-top: calc(var(--header-height) + 1rem);
}
.detail-section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-top: 1px solid var(--border);
}
.detail-section:first-of-type {
  border-top: none;
}
.detail-prose {
  max-width: 74ch;
  color: var(--text-primary);
  line-height: 1.75;
}
.detail-prose p + p {
  margin-top: 1rem;
}

/* ---- Important Dates timeline ---- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline-item {
  position: relative;
  display: flex;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  padding-left: 0.1rem;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.3rem;
  bottom: -0.5rem;
  width: 1px;
  background: var(--border);
}
.timeline-item:last-child::before {
  display: none;
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-marker {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  margin-top: 0.4rem;
}
.timeline-item.is-conference .timeline-marker {
  background: var(--brand-primary);
  box-shadow: 0 0 0 1px var(--brand-primary);
  width: 13px;
  height: 13px;
  margin-top: 0.3rem;
}
.timeline-label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.timeline-value {
  font-weight: 600;
  color: var(--text-primary);
}
.timeline-item.is-conference .timeline-label {
  color: var(--brand-primary);
}
.timeline-item.is-conference .timeline-value {
  font-size: 1.1rem;
  font-family: var(--font-display);
}

/* A timeline entry whose own date has already passed (a deadline that's
   closed, or a conference that's already ended) is struck through rather
   than removed — the date is still real, published information, just no
   longer actionable. Works for both plain and .is-conference entries. */
.timeline-item.is-past .timeline-label,
.timeline-item.is-past .timeline-value {
  text-decoration: line-through;
  color: var(--text-secondary);
  opacity: 0.65;
}
.timeline-item.is-past .timeline-marker {
  background: var(--border);
  box-shadow: 0 0 0 1px var(--border);
}

/* ---- Organization panel ---- */
.org-panel {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.org-avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
}
.org-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1c7a4e;
}

/* ---- Venue panel ---- */
.venue-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background: var(--surface-subtle);
}

/* ---- Attendee Recommendation (Phase 1.8) ----
   A trust/information signal, not a survey or a "score" — white surface,
   a single subtle border, generous padding, restrained green/blue accents
   only (CLAUDE.md Phase 1.8 Part 6/7). Deliberately plainer than a
   dashboard: no gradients, no card shadows, no traffic-light red. */
.recommendation-info-icon {
  color: var(--text-secondary);
  cursor: help;
  line-height: 1;
}
.recommendation-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.recommendation-panel-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2xl);
}
.recommendation-percent {
  text-align: center;
  min-width: 120px;
}
.recommendation-percent-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: #1c7a4e;
}
.recommendation-percent-label {
  margin-top: var(--space-xs);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.3;
}
.recommendation-average {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
}
.recommendation-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}
.recommendation-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 70px;
  align-items: center;
  gap: var(--space-sm);
}
.recommendation-bar-label {
  font-size: 0.875rem;
  font-weight: 600;
}
.recommendation-bar-track {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-subtle);
  overflow: hidden;
}
.recommendation-bar-fill {
  height: 100%;
  border-radius: 999px;
}
.recommendation-bar-fill-top_choice { background: #1c7a4e; }
.recommendation-bar-fill-recommend { background: #5ba97c; }
.recommendation-bar-fill-consider { background: var(--brand-primary); opacity: 0.55; }
.recommendation-bar-fill-caution { background: #c98a2c; }
.recommendation-bar-fill-skip { background: var(--border); }
.recommendation-bar-value {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-align: right;
}
.recommendation-note {
  display: block;
  padding-left: var(--space-lg);
  border-left: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.875rem;
  max-width: 200px;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
}
.recommendation-note:hover {
  color: var(--brand-primary);
  text-decoration-color: currentColor;
}
@media (max-width: 767.98px) {
  .recommendation-panel-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .recommendation-bar-row {
    grid-template-columns: 90px 1fr 60px;
  }
  .recommendation-note {
    max-width: none;
    padding-left: 0;
    padding-top: var(--space-md);
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

/* ---- Attendee Reviews (owner-directed, post-Phase 2.6) ----
   Amazon-style layout: reviewer identity in a fixed-width left column,
   rating + comment filling the rest. Plain white surface, hairline
   dividers between reviews (no per-review card border/shadow — that
   would read as a stack of separate boxes rather than one continuous
   list, the same reasoning the sidebar's single-panel redesign already
   established for this design system). */
.review-list {
  display: flex;
  flex-direction: column;
}
.review-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-xl);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--border);
}
.review-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.review-item:first-child {
  padding-top: 0;
}
.review-item-author {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.reviewer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.reviewer-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.3;
}
.reviewer-date {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.review-item-body {
  min-width: 0;
}
.review-tier-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-subtle);
  margin-bottom: 0.5rem;
}
.review-tier-top_choice { color: #1c7a4e; }
.review-tier-recommend { color: #5ba97c; }
.review-tier-consider { color: var(--brand-primary); }
.review-tier-caution { color: #c98a2c; }
.review-tier-skip { color: var(--text-secondary); }
.review-comment {
  color: var(--text-primary);
  line-height: 1.7;
  margin-bottom: 0;
  max-width: 68ch;
}
@media (max-width: 767.98px) {
  .review-item {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .review-item-author {
    flex-direction: row;
    align-items: center;
  }
}

/* ---- Main/sidebar layout grid ----
   CSS Grid (not flexbox `order`) so the sidebar can visually span BOTH
   the primary content and the secondary ("Previous Editions") block on
   desktop while still reading top-to-bottom in one natural mobile order.
   (A `display: contents` + grid-`order` approach was tried to reorder
   "Important Dates" ahead of Overview/Topics/etc. on mobile without
   duplicating markup, but real Chromium rendering placed the promoted
   items into 3 implicit grid COLUMNS instead of stacking them in the
   single explicit column — a live, reproducible bug, not just a spec
   nuance — so that approach was reverted. The mobile reorder is instead
   done with a small, deliberately duplicated "Important Dates" block:
   see the `d-lg-none` copy in the template, right after the Attendee
   Recommendation section.) */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "primary"
    "sidebar"
    "related"
    "reviews";
  gap: var(--space-2xl);
}
.detail-layout-primary { grid-area: primary; min-width: 0; }
.detail-layout-sidebar { grid-area: sidebar; min-width: 0; }
.detail-layout-related { grid-area: related; min-width: 0; }
.detail-layout-reviews { grid-area: reviews; min-width: 0; }

/* "Previous Editions" (owner-directed, post-Phase 2.6) lives inside
   .detail-layout-primary now, right after Venue, instead of its own
   grid row — a separate "secondary" row that spanned the sidebar area
   forced CSS Grid to inflate that row's height to match the sidebar's
   full content height whenever "Previous Editions" was short/absent
   (any series with 0-1 editions), leaving a large blank gap before
   Related Conferences/Reviews. Folding it into the primary column's
   normal document flow removes the extra grid row entirely, so there's
   nothing left to inflate. */

@media (min-width: 992px) {
  .detail-layout {
    grid-template-columns: 7fr 3fr;
    column-gap: var(--space-3xl);
    row-gap: var(--space-2xl);
    grid-template-areas:
      "primary  sidebar"
      "related  related"
      "reviews  reviews";
  }
}

/* Tighten the dead whitespace before Related Conferences / Attendee
   Reviews (owner-directed) — each is the sole child of its own grid-area
   wrapper, so it loses .detail-section's border-top divider via the
   :first-of-type rule above, on top of the full 2rem/2rem section
   padding AND the grid's own row-gap, stacking to ~112px of unbroken
   whitespace at desktop widths. Scoped to these two wrappers' own
   .detail-section padding plus the grid row-gap only — never touches
   column-gap (the primary/sidebar split) or the Overview/Topics/
   Organizer/Venue rhythm inside .detail-layout-primary. Left untouched
   below 992px, where this same row-gap also separates the stacked
   primary->sidebar block in the single-column layout. */
.detail-layout-primary > .detail-section:last-child {
  padding-bottom: var(--space-md);
}
.detail-layout-related > .detail-section {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.detail-layout-reviews > .detail-section {
  padding-top: var(--space-md);
}
@media (min-width: 992px) {
  .detail-layout {
    row-gap: var(--space-lg);
  }
}

/* ---- Sidebar ---- */
.detail-sidebar-sticky {
  position: static;
}
@media (min-width: 992px) {
  .detail-sidebar-sticky {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
  }
}

/* Mobile-only duplicate of the "Important Dates" card (owner-directed —
   see the `.detail-mobile-dates` block in conference-detail.php, right
   after Attendee Recommendation). Only ever one copy visible at a time:
   Bootstrap's `d-lg-none` / `d-none d-lg-block` utilities on the two
   copies already handle that; this just removes the sidebar-only
   `mb-3` spacing (meant to separate it from the action-panel button
   card beneath it in the sticky sidebar column) from the mobile copy,
   which has no such sibling. */
.detail-mobile-dates.action-panel {
  margin-bottom: var(--space-2xl);
}

/* ONE consolidated panel, not a stack of separately-bordered mini-cards
   (found during this phase's own visual-quality review: 4-5 individually
   bordered sidebar cards read as a generic settings/dashboard widget
   list, not a premium editorial panel — see docs/DESIGN_SYSTEM.md
   "Sidebar"). Internal sections are separated by a hairline
   `border-top`, so there is exactly ONE outer border for the whole
   sidebar regardless of how many sections it has. */
.action-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.action-panel-section {
  padding: var(--space-lg);
}
.action-panel-section + .action-panel-section {
  border-top: 1px solid var(--border);
}
.action-panel-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
/* A standalone sidebar card (e.g. the Important Dates card) can title
   itself with the same .detail-h2 heading the primary column's own
   sections use, for visual parity — just smaller, since the sidebar
   column is narrower than the main content column. */
.action-panel-section .detail-h2 {
  font-size: 1.15rem;
}
.action-panel-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
}
.action-panel-link:hover {
  color: var(--brand-primary-dark);
}
.action-panel-link-group + .action-panel-link-group {
  margin-top: 0.85rem;
}
.action-panel-link-group-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

/* ---- Share row ---- */
.share-row {
  display: flex;
  gap: 0.5rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--surface);
  transition: border-color .15s ease, color .15s ease;
}
.share-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* ---- Previous editions list ---- */
.edition-timeline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  margin-bottom: 0.6rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.edition-timeline-item:hover {
  border-color: rgba(27, 75, 145, 0.35);
  box-shadow: var(--shadow-sm);
  color: inherit;
}
.edition-timeline-item.is-current {
  background: var(--surface-subtle);
  border-color: var(--border);
  cursor: default;
}
.edition-timeline-year {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  min-width: 3.5em;
}
.edition-timeline-meta {
  color: var(--text-secondary);
  font-size: 0.9rem;
  flex: 1;
}
.edition-timeline-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-primary);
  white-space: nowrap;
}

/* ---- Participant dashboard shell (owner-directed) ----
   The same "fixed sidebar, nav links, footer logout link" visual
   language the admin sidebar (admin.css) uses, reimplemented here for
   the public side rather than sharing that stylesheet (Public/Admin
   Separation) — this sidebar sits BELOW the sticky public navbar
   instead of replacing it. */
.dashboard-shell {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - var(--header-height));
}
.dashboard-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--brand-dark);
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
}
.dashboard-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dashboard-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-on-dark-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  border-left: 3px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}
.dashboard-nav-link i {
  font-size: 1.05rem;
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}
.dashboard-nav-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.dashboard-nav-link.is-active {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-weight: 600;
  border-left-color: var(--brand-accent);
}
.dashboard-sidebar-footer {
  border-top: 1px solid var(--border-dark);
  padding: 0.75rem;
  flex-shrink: 0;
}
.dashboard-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-xl);
  background: var(--surface-subtle);
  min-height: calc(100vh - var(--header-height));
}
@media (max-width: 991.98px) {
  .dashboard-shell {
    flex-direction: column;
  }
  .dashboard-sidebar {
    position: static;
    width: 100%;
    height: auto;
  }
  .dashboard-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0.75rem;
    gap: 0.35rem;
  }
  .dashboard-nav-link {
    flex-shrink: 0;
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .dashboard-nav-link.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--brand-accent);
  }
  .dashboard-sidebar-footer {
    border-top: none;
    padding: 0 0.75rem 0.75rem;
  }
  .dashboard-content {
    min-height: auto;
    padding: var(--space-lg);
  }
}

/* ---- Favorite toggle button (owner-directed) ---- */
.favorite-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: border-color .15s ease, color .15s ease;
}
.favorite-toggle:hover {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}
.favorite-toggle.is-favorited {
  border-color: var(--brand-accent);
  background: rgba(232, 118, 60, 0.08);
  color: var(--brand-accent);
}
.favorite-toggle.is-favorited i {
  font-weight: 900;
}
/* On the dark, full-bleed conference-detail hero — frosted-glass
   treatment, same technique the homepage's "How It Works" button
   already uses on a photo background, so the button reads clearly
   against a variable/dark photo rather than the plain light surface
   the default .favorite-toggle assumes. */
.favorite-toggle-on-dark-wrap .favorite-toggle,
.favorite-toggle-on-dark-wrap .favorite-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.favorite-toggle-on-dark-wrap .favorite-toggle.is-favorited {
  background: rgba(232, 118, 60, 0.35);
  border-color: var(--brand-accent);
  color: #fff;
}

/* ---- My Favorites / My Reviews tab lists ---- */
.dashboard-tabs .nav-link {
  color: var(--text-secondary);
  font-weight: 600;
}
.dashboard-tabs .nav-link.active {
  color: var(--brand-primary);
}
.dashboard-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
}
.dashboard-list-item:last-child {
  border-bottom: none;
}
.dashboard-list-item-title {
  font-weight: 600;
  color: var(--text-primary);
}
.dashboard-list-item-meta {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* ============================================================
   Auth pages (login) — full-bleed light section, single centered card.
   ============================================================ */
.auth-page {
  min-height: calc(100vh - 260px);
  display: flex;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(27, 75, 145, 0.05) 0%, rgba(27, 75, 145, 0) 45%),
    var(--surface);
  padding: var(--space-3xl) 0;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-2xl);
}
.auth-card h1 {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
}
.auth-card .section-lede {
  font-size: 0.95rem;
  max-width: none;
  margin-bottom: var(--space-lg);
}
.auth-input-group {
  position: relative;
}
/* Only the leading (left) field icon — deliberately NOT a bare `.bi`
   selector, which would also catch the eye icon nested inside the
   toggle button below and absolutely-position it against that button's
   own (small) box instead of just centering in it. */
.auth-input-group .auth-field-icon {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}
.auth-input-group .form-control {
  padding-left: 2.5rem;
}
.auth-input-group.has-toggle .form-control {
  padding-right: 2.75rem;
}
.auth-input-group .auth-toggle-visibility {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  line-height: 1;
}
.auth-input-group .auth-toggle-visibility:hover {
  color: var(--brand-primary);
  background: var(--surface-subtle);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  margin: var(--space-lg) 0;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ============================================================
   Organizations directory (public/organizations.php)
   ============================================================ */

/* ---- Hero ---- */
.org-directory-hero {
  /* Deliberate one-off: a cool blue-gray, not --surface-subtle (warm
     off-white) — see docs/DESIGN_SYSTEM.md's Organizations directory
     note for why this is a scoped literal rather than a new :root token. */
  background: #F5F8FC;
  padding: var(--space-xl) 0;
}
.org-directory-hero-inner {
  position: relative;
  min-height: 145px;
  display: flex;
  align-items: center;
}
/* The search/filter toolbar now lives inside the hero (owner-directed,
   matching locations.php's own hero shape). Unlike .locations-hero-copy
   (a single search box, fine at a fixed 640px), this toolbar has a
   search field + 2 selects + a button — at a fixed 640px cap the two
   selects were shrunk down to ~99px each, clipping "All Locations" /
   "Name A-Z" down to a couple of characters (owner-reported: "cannot
   read"). A calc() cap claims all available width except a fixed
   clearance for the icon column, same technique as
   .conf-directory-hero-copy below, so the fields get real room at
   every breakpoint down to where the icon is hidden. */
.org-directory-hero-copy {
  max-width: calc(100% - 200px);
  position: relative;
  z-index: 1;
}
.org-directory-hero-copy .section-title {
  margin: 0.35rem 0 0.5rem;
}
@media (max-width: 767.98px) {
  .org-directory-hero-copy {
    max-width: 100%;
  }
}
/* Decorative icon: absolutely positioned against the hero's own
   .container (see the ".org-directory-hero > .container" rule below),
   not a flex sibling of the copy column - the exact same technique
   locations.php's own decorative icon already uses, and the fix
   already applied to the Organization Detail hero icon (a flex-sibling
   icon would otherwise force the toolbar to compete for width, and had
   its own alignment bug when done as position:absolute directly on the
   full-bleed section instead of the .container). */
.org-directory-hero > .container {
  position: relative;
}
.org-directory-hero-visual {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 35%;
  max-width: 220px;
  text-align: center;
}
.org-directory-hero-icon {
  display: block;
  font-size: 9rem;
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.14;
}
.org-directory-hero-visual-caption {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
@media (max-width: 767.98px) {
  .org-directory-hero-visual {
    display: none;
  }
  .org-directory-hero-inner {
    min-height: 0;
  }
}

/* ---- Search / filter toolbar ---- */
.org-toolbar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: var(--space-lg);
}
.org-toolbar-field {
  position: relative;
  height: 48px;
  /* Deliberate one-off, paired with the hero background above (same
     cool-blue cast) — see docs/DESIGN_SYSTEM.md. */
  border: 1px solid #D9E2EC;
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.org-toolbar-search {
  flex: 1 1 52%;
  min-width: 160px;
}
.org-toolbar-field:not(.org-toolbar-search) {
  flex: 1 1 19%;
  /* Floor so "All Locations"/"Name A-Z" can't be shrunk down to a
     couple of clipped characters at narrower desktop widths — see the
     .org-directory-hero-copy comment above for the bug this pairs with. */
  min-width: 140px;
}
.org-toolbar-search .bi-search {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
}
.org-toolbar-search input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 0.85rem 0 2.4rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.org-toolbar-field select {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 0.85rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.org-toolbar-search input:focus,
.org-toolbar-field select:focus {
  outline: none;
  box-shadow: none;
}
.org-toolbar-field:focus-within {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-focus);
}
.org-toolbar-submit {
  flex: 0 0 140px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
/* Tablet: search occupies its own full-width row, location/sort/search
   share a roomier second row — the single-row desktop proportions
   (search ~52%, each select ~19%) get uncomfortably cramped at tablet
   widths (e.g. a "All Locations" option label visibly clipped at
   768px), so this widens each control instead of just relying on the
   full mobile stack for that fix. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .org-toolbar {
    flex-wrap: wrap;
  }
  .org-toolbar-search {
    flex: 1 1 100%;
  }
  .org-toolbar-field:not(.org-toolbar-search),
  .org-toolbar-submit {
    flex: 1 1 0;
  }
}
@media (max-width: 767.98px) {
  .org-toolbar {
    flex-direction: column;
  }
  .org-toolbar-search,
  .org-toolbar-field:not(.org-toolbar-search),
  .org-toolbar-submit {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ---- Result count ---- */
.org-result-count {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ---- Organization card ----
   A compact horizontal card (logo, name/location/stats, chevron) — a
   new class since this internal shape differs from .topic-tile/
   .conf-card, but it borrows the same border/hover/radius language those
   already establish for consistency. */
.org-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: 100%;
  min-height: 112px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.org-card:hover,
.org-card:focus-visible {
  border-color: rgba(27, 75, 145, 0.35);
  box-shadow: var(--shadow-md);
  color: inherit;
}
.org-card-logo {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
}
.org-card-logo img {
  max-width: 48px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.org-card-monogram {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
}
.org-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.org-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.org-card-location,
.org-card-stats {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.org-card-location {
  margin-bottom: 0.15rem;
}
.org-card-location .bi,
.org-card-stats .bi {
  color: var(--brand-primary);
  flex-shrink: 0;
}
.org-card-chevron {
  flex: 0 0 auto;
  font-size: 1.125rem;
  color: var(--text-secondary);
  transition: transform .18s ease, color .18s ease;
}
.org-card:hover .org-card-chevron {
  transform: translateX(3px);
  color: var(--brand-primary);
}

/* ---- Empty state ---- */
.org-empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  color: var(--text-secondary);
}
.org-empty-state > .bi {
  font-size: 2rem;
  color: var(--text-secondary);
  opacity: 0.4;
  margin-bottom: var(--space-md);
}
.org-empty-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.org-empty-subtitle {
  margin-bottom: var(--space-md);
}
.org-empty-clear {
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: underline;
}

/* ============================================================
   Topics directory (public/topics.php) — deliberately its own
   topic-directory / topic-toolbar / topic-card classes, not a reuse of
   the homepage's .topic-tile or the Organizations page's .org-*: same
   precedent as .org-card not reusing .topic-tile despite the similarity
   (see the Organizations directory section above) — a new page gets its
   own page-scoped classes that borrow the same visual language.
   ============================================================ */

/* ---- Hero ---- */
.topic-directory-hero {
  /* Same deliberate one-off cool blue-gray as .org-directory-hero. */
  background: #F5F8FC;
  padding: var(--space-xl) 0;
}
.topic-directory-hero-inner {
  position: relative;
  min-height: 145px;
  display: flex;
  align-items: center;
}
/* See .org-directory-hero-copy's comment above (same pattern, same
   owner-directed reason and the same fixed cap .locations-hero-copy
   uses). */
.topic-directory-hero-copy {
  max-width: 640px;
  position: relative;
  z-index: 1;
}
.topic-directory-hero-copy .section-title {
  margin: 0.35rem 0 0.5rem;
}
.topic-directory-hero > .container {
  position: relative;
}
.topic-directory-hero-visual {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 35%;
  max-width: 220px;
  text-align: center;
}
.topic-directory-hero-icon {
  display: block;
  font-size: 9rem;
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.14;
}
.topic-directory-hero-visual-caption {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--text-secondary);
}
@media (max-width: 767.98px) {
  .topic-directory-hero-visual {
    display: none;
  }
  .topic-directory-hero-inner {
    min-height: 0;
  }
}

/* ---- Search / sort toolbar ---- */
.topic-toolbar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: var(--space-lg);
}
.topic-toolbar-field {
  position: relative;
  height: 48px;
  border: 1px solid #D9E2EC;
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.topic-toolbar-search {
  flex: 1 1 65%;
  min-width: 0;
}
.topic-toolbar-field:not(.topic-toolbar-search) {
  flex: 1 1 20%;
  min-width: 0;
}
.topic-toolbar-search .bi-search {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
}
.topic-toolbar-search input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 0.85rem 0 2.4rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.topic-toolbar-field select {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 0.85rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.topic-toolbar-search input:focus,
.topic-toolbar-field select:focus {
  outline: none;
  box-shadow: none;
}
.topic-toolbar-field:focus-within {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-focus);
}
.topic-toolbar-submit {
  flex: 0 0 140px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .topic-toolbar {
    flex-wrap: wrap;
  }
  .topic-toolbar-search {
    flex: 1 1 100%;
  }
  .topic-toolbar-field:not(.topic-toolbar-search),
  .topic-toolbar-submit {
    flex: 1 1 0;
  }
}
@media (max-width: 767.98px) {
  .topic-toolbar {
    flex-direction: column;
  }
  .topic-toolbar-search,
  .topic-toolbar-field:not(.topic-toolbar-search),
  .topic-toolbar-submit {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ---- Result count ---- */
.topic-result-count {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ---- Topic card ---- */
.topic-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: 100%;
  min-height: 86px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.topic-card:hover,
.topic-card:focus-visible {
  border-color: rgba(27, 75, 145, 0.35);
  box-shadow: var(--shadow-md);
  color: inherit;
}
.topic-card-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
/* Blue/orange reuse the existing brand tokens (same treatment .trust-icon
   already uses: a light tint of the token + the token itself as the
   glyph color). Green/purple have no existing token — this site's
   established palette is navy/blue/orange only (docs/DESIGN_SYSTEM.md) —
   so these two are new, narrowly page-scoped literal pairs, used only by
   these icon variants, never a large fill. See docs/DESIGN_SYSTEM.md's
   "Topics directory" section for the full reasoning. */
.topic-card-icon-blue {
  background: rgba(27, 75, 145, 0.08);
  color: var(--brand-primary);
}
.topic-card-icon-orange {
  background: rgba(232, 118, 60, 0.12);
  color: var(--brand-accent);
}
.topic-card-icon-green {
  background: rgba(21, 154, 120, 0.1);
  color: #159A78;
}
.topic-card-icon-purple {
  background: rgba(124, 90, 199, 0.1);
  color: #7C5AC7;
}
.topic-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.topic-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}
.topic-card-count {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.topic-card-chevron {
  flex: 0 0 auto;
  font-size: 1.125rem;
  color: var(--text-secondary);
  transition: transform .18s ease, color .18s ease;
}
.topic-card:hover .topic-card-chevron {
  transform: translateX(3px);
  color: var(--brand-primary);
}

/* ---- Empty state ---- */
.topic-empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  color: var(--text-secondary);
}
.topic-empty-state > .bi {
  font-size: 2rem;
  color: var(--text-secondary);
  opacity: 0.4;
  margin-bottom: var(--space-md);
}
.topic-empty-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.topic-empty-subtitle {
  margin-bottom: var(--space-md);
}
.topic-empty-clear {
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: underline;
}

/* ============================================================
   Conferences directory (public/conferences.php) - deliberately its
   own conf-directory-hero and conf-toolbar classes, not a reuse of the
   Organizations or Topics directory classes, matching the precedent
   those two already established (see the sections above): a new page
   gets its own page-scoped classes that borrow the same visual
   language, never literal cross-page class reuse. Cards keep using the
   existing shared conf-card component unchanged (see the Cards
   section far above) - only the hero and the search/filter toolbar
   are new here.
   ============================================================ */

/* ---- Hero ---- */
.conf-directory-hero {
  background: #F5F8FC;
  padding: var(--space-xl) 0;
}
.conf-directory-hero-inner {
  position: relative;
  min-height: 145px;
  display: flex;
  align-items: center;
}
/* See .org-directory-hero-copy's comment above (same pattern). Unlike
   Organizations/Topics, this toolbar's second row has six filter
   fields (~830px unwrapped minimum), too wide for the fixed 640px cap
   .locations-hero-copy uses — a calc() cap is used instead so the copy
   column claims all available width except a fixed clearance for the
   icon column, at every breakpoint down to where the icon is hidden. */
.conf-directory-hero-copy {
  max-width: calc(100% - 200px);
  position: relative;
  z-index: 1;
}
.conf-directory-hero-copy .section-title {
  margin: 0.35rem 0 0.5rem;
}
.conf-directory-hero-copy .section-lede {
  max-width: 640px;
}
@media (max-width: 767.98px) {
  .conf-directory-hero-copy {
    max-width: 100%;
  }
}
.conf-directory-hero > .container {
  position: relative;
}
.conf-directory-hero-visual {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 35%;
  max-width: 180px;
  text-align: center;
}
.conf-directory-hero-icon {
  display: block;
  font-size: 9rem;
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.14;
}
.conf-directory-hero-visual-caption {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--text-secondary);
}
@media (max-width: 767.98px) {
  .conf-directory-hero-visual {
    display: none;
  }
  .conf-directory-hero-inner {
    min-height: 0;
  }
}

/* ---- Search / filter toolbar ----
   Two rows: search+button, then the six filter controls (year, topic,
   type, country, city, sort) - more controls than the Organizations/
   Topics toolbars have room for in one row, so this keeps the existing
   two-row structure but gives every control the same bordered-field
   treatment those two toolbars already use. */
.conf-toolbar {
  margin-top: var(--space-lg);
}
.conf-toolbar-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.conf-toolbar-row-search {
  margin-bottom: 10px;
}
.conf-toolbar-row-filters {
  flex-wrap: wrap;
}
.conf-toolbar-field {
  position: relative;
  height: 48px;
  border: 1px solid #D9E2EC;
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.conf-toolbar-search {
  flex: 1 1 auto;
  min-width: 0;
}
.conf-toolbar-row-filters .conf-toolbar-field {
  flex: 1 1 0;
  min-width: 130px;
}
.conf-toolbar-search .bi-search {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
}
.conf-toolbar-field select,
.conf-toolbar-field input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  color: var(--text-primary);
}
/* Must come after the generic ".conf-toolbar-field input" rule above -
   same specificity (one class + element), so source order decides the
   left-padding conflict; this one needs to win so the icon has room. */
.conf-toolbar-search input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 0.85rem 0 2.4rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.conf-toolbar-search input:focus,
.conf-toolbar-field select:focus,
.conf-toolbar-field input:focus {
  outline: none;
  box-shadow: none;
}
.conf-toolbar-field:focus-within {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-focus);
}
.conf-toolbar-submit {
  flex: 0 0 140px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
/* Tablet: 6 filter fields at flex:1 1 0 naturally wrap 5-then-1 once
   they run out of row width, leaving the sort field alone on its own
   row - an even 3-per-row wrap reads cleaner. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .conf-toolbar-row-filters .conf-toolbar-field {
    flex: 1 1 calc(33.333% - 7px);
    min-width: 0;
  }
}
@media (max-width: 767.98px) {
  .conf-toolbar-row-search {
    flex-direction: column;
  }
  .conf-toolbar-search,
  .conf-toolbar-submit {
    flex: 1 1 auto;
    width: 100%;
  }
  .conf-toolbar-row-filters .conf-toolbar-field {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
  }
}

/* ---- Result count ---- */
.conf-result-count {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ============================================================
   Organization detail page (public/organization-detail.php) -
   deliberately its own org-detail-hero / org-series-card / etc.
   classes, not a reuse of org-directory-hero or org-card (a different
   layout shape: logo left, content center, favorite right, plus a
   stats bar) - same precedent every page this session already
   established. "Similar Organizations" below reuses the real org-card
   component (renderOrganizationCard()) rather than a new card design,
   per the brief's own explicit instruction.
   ============================================================ */

/* ---- Hero ---- */
.org-detail-hero {
  background: #F5F8FC;
  padding: var(--space-2xl) 0 calc(var(--space-2xl) + 48px);
  overflow: hidden;
}
/* Scoped to this hero's own .container only (not a global .container
   change) - the decorative icon needs to anchor to the CONTENT column's
   right edge, not the full-bleed section's, which spans the whole
   viewport width. Without this, "right: 2%" on .org-detail-hero-icon
   measured from the browser edge instead of the content edge, pushing
   the icon far right of the actual hero content on wide screens. */
.org-detail-hero > .container {
  position: relative;
}
.org-detail-hero-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  position: relative;
  z-index: 1;
}
.org-detail-hero-logo {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  overflow: hidden;
}
.org-detail-hero-logo img {
  max-width: 120px;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.org-detail-hero-logo-fallback {
  background: rgba(27, 75, 145, 0.08);
}
.org-detail-hero-monogram {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;
  color: var(--brand-primary);
}
.org-detail-hero-body {
  flex: 1 1 auto;
  min-width: 0;
}
.org-detail-hero-name {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  margin-bottom: 0.5rem;
  overflow-wrap: break-word;
}
.org-detail-hero-location {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.org-detail-hero-location .bi {
  color: var(--brand-primary);
}
.org-detail-hero-website {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
  margin-bottom: 0.75rem;
}
.org-detail-hero-website:hover {
  color: var(--brand-primary-dark);
}
.org-detail-hero-description {
  max-width: 700px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 0;
}
.org-detail-hero-favorite {
  flex: 0 0 auto;
}
.org-detail-hero-icon {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10rem;
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .org-detail-hero-inner {
    flex-wrap: wrap;
  }
  .org-detail-hero-logo {
    width: 96px;
    height: 96px;
    padding: 10px;
  }
  .org-detail-hero-logo img {
    max-width: 76px;
    max-height: 76px;
  }
  .org-detail-hero-monogram {
    font-size: 1.5rem;
  }
  .org-detail-hero-favorite {
    width: 100%;
  }
  .org-detail-hero-icon {
    display: none;
  }
}

/* ---- Statistics bar (overlaps the hero's bottom edge on desktop) ---- */
.org-detail-stats {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md) var(--space-lg);
  margin-top: -40px;
  position: relative;
  z-index: 2;
}
.org-detail-stats-item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0 var(--space-sm);
  border-left: 1px solid var(--border);
}
.org-detail-stats-item:first-child {
  border-left: none;
  padding-left: 0;
}
.org-detail-stats-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: rgba(27, 75, 145, 0.08);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.org-detail-stats-value {
  display: block;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-primary);
  line-height: 1.2;
}
.org-detail-stats-value-text {
  font-size: 0.9375rem;
}
.org-detail-stats-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
@media (max-width: 991.98px) {
  .org-detail-stats {
    flex-wrap: wrap;
    row-gap: var(--space-md);
  }
  .org-detail-stats-item {
    flex: 1 1 50%;
  }
  .org-detail-stats-item:nth-child(2n+1) {
    border-left: none;
  }
}
@media (max-width: 767.98px) {
  .org-detail-stats {
    margin-top: var(--space-lg);
  }
}

/* ---- Main/sidebar sections ---- */
.org-detail-main-row {
  margin-top: var(--space-2xl);
}
.org-detail-section {
  margin-bottom: var(--space-2xl);
}
.org-detail-section-lede {
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}
.org-detail-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  color: var(--text-secondary);
  background: var(--surface-subtle);
}
.org-detail-about {
  max-width: 74ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---- Conference series card ---- */
.org-series-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-md);
}
.org-series-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border);
}
.org-series-card-name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--brand-primary);
  text-decoration: none;
}
.org-series-card-name:hover {
  color: var(--brand-primary-dark);
}
.org-series-card-meta {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.org-series-card-body {
  padding: var(--space-lg);
}
.org-series-card-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: var(--space-sm);
}
.org-series-card-upcoming {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.org-series-card-upcoming-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-primary);
}
.org-series-card-edition {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
  text-decoration: none;
}
.org-series-card-edition:hover {
  color: var(--brand-primary);
}
.org-series-card-no-upcoming {
  color: var(--text-secondary);
  margin-bottom: 0;
  font-size: 0.875rem;
}
.org-series-card-past {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.org-series-card-past-label {
  font-weight: 600;
  margin-right: 0.3rem;
}
.org-series-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 1rem;
  background: var(--surface-subtle);
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
}
.org-series-card-footer a {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 600;
}
.org-series-card-footer a:hover {
  color: var(--brand-primary-dark);
}
.org-series-card-view {
  margin-left: auto;
}

/* ---- Sidebar cards ---- */
.org-detail-sidebar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}
.org-detail-sidebar-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: var(--space-sm);
}
.org-detail-sidebar-row {
  padding: 0.55rem 0;
}
.org-detail-sidebar-row + .org-detail-sidebar-row {
  border-top: 1px solid var(--border);
}
.org-detail-sidebar-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.15rem;
}
.org-detail-sidebar-value {
  font-size: 0.875rem;
  color: var(--text-primary);
}
.org-detail-sidebar-value a {
  color: var(--brand-primary);
  text-decoration: none;
}
.org-detail-sidebar-value a:hover {
  color: var(--brand-primary-dark);
}
.org-detail-cta-card {
  background: var(--surface-subtle);
}
.org-detail-cta-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

/* ---- Similar Organizations ---- */
.org-detail-similar {
  border-top: 1px solid var(--border);
  padding-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
.org-detail-similar-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: var(--space-lg);
}
.org-detail-similar-viewall {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--brand-primary);
  text-decoration: none;
}
.org-detail-similar-viewall:hover {
  color: var(--brand-primary-dark);
}

/* ============================================================
   Locations directory (public/locations.php) - a new public page (no
   prior implementation existed), not a redesign. New locations-hero and
   location-card/location-section classes, deliberately not a reuse of
   the Organizations/Topics/Conferences directory hero or card classes -
   same precedent every page this session already established: a new
   page gets its own page-scoped classes that borrow the same visual
   language. location-card is closer in shape to conf-card (image on
   top, body below) than org-card/topic-card (icon-left row), since
   that's what real destination photography calls for here.
   ============================================================ */

/* ---- Hero ---- */
.locations-hero {
  background: #F5F8FC;
  padding: var(--space-xl) 0;
}
.locations-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  position: relative;
}
.locations-hero-copy {
  max-width: 640px;
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
}
.locations-hero-copy .section-title {
  margin: 0.35rem 0 0.5rem;
}
.locations-hero-copy .section-lede {
  margin-bottom: var(--space-lg);
}
.locations-hero-search-form {
  display: flex;
  align-items: stretch;
  gap: 10px;
  max-width: 620px;
}
.locations-hero-search-field {
  position: relative;
  flex: 1 1 auto;
  height: 48px;
  border: 1px solid #D9E2EC;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.locations-hero-search-field .bi-search {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
}
.locations-hero-search-field input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 0.85rem 0 2.4rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.locations-hero-search-field input:focus {
  outline: none;
  box-shadow: none;
}
.locations-hero-search-field:focus-within {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-focus);
}
.locations-hero-search-submit {
  flex: 0 0 150px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.locations-hero-map {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11rem;
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .locations-hero-map {
    display: none;
  }
  .locations-hero-search-form {
    flex-direction: column;
    max-width: none;
  }
  .locations-hero-search-submit {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ---- Section header (shared by both United States / International) ---- */
.location-section {
  margin-bottom: var(--space-2xl);
}
.location-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: var(--space-lg);
}
.location-section-lede {
  color: var(--text-secondary);
  margin-top: 0.25rem;
}
.location-section-viewall {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--brand-primary);
  text-decoration: none;
  white-space: nowrap;
}
.location-section-viewall:hover {
  color: var(--brand-primary-dark);
}
.location-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  color: var(--text-secondary);
  background: var(--surface-subtle);
}

/* ---- Location card (image-topped) ---- */
.location-card {
  display: block;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.location-card:hover,
.location-card:focus-visible {
  border-color: rgba(27, 75, 145, 0.35);
  box-shadow: var(--shadow-md);
  color: inherit;
}
.location-card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-subtle);
}
.location-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.location-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
}
.location-card-name {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--brand-primary);
}
.location-card-count {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 0.1rem;
}
.location-card-chevron {
  flex-shrink: 0;
  color: var(--brand-primary);
  transition: transform .18s ease;
}
.location-card:hover .location-card-chevron {
  transform: translateX(3px);
}


/* ============================================================
   Forums (owner-directed, phpBB-style board — see docs/DESIGN_SYSTEM.md
   "Forums"). Board index: dark section header + forum rows with
   topic/post counts and the latest post. Forum page: classic topic
   table (solved rows tinted green). Topic page: original post then
   plain-text replies, each as a card.
   ============================================================ */

.forum-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}
.forum-block-header {
  margin: 0;
  padding: 0.8rem 1.25rem;
  background: var(--brand-dark);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.forum-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 7.5rem 16rem;
  align-items: center;
  gap: var(--space-md);
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
}
.forum-block-header + .forum-row {
  border-top: 0;
}
.forum-row-icon {
  font-size: 1.35rem;
  color: var(--brand-primary);
  opacity: 0.7;
}
.forum-row-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  text-decoration: none;
}
.forum-row-title:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}
.forum-row-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}
.forum-row-stats {
  display: flex;
  flex-direction: column;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-align: right;
}
.forum-row-stats strong {
  color: var(--text-primary);
}
.forum-row-last {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  font-size: 0.8125rem;
}
.forum-row-last-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--text-secondary);
}
.forum-row-last-text a {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 767.98px) {
  .forum-row {
    grid-template-columns: 2rem minmax(0, 1fr);
  }
  .forum-row-stats {
    grid-column: 2;
    flex-direction: row;
    gap: var(--space-md);
    text-align: left;
  }
  .forum-row-last {
    grid-column: 2;
  }
}

/* Initial-letter avatar (no user photos yet). */
.forum-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid rgba(27, 75, 145, 0.35);
  background: rgba(27, 75, 145, 0.06);
  color: var(--brand-primary);
  font-weight: 700;
}
.forum-avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.8125rem;
}

.forum-side-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem;
}
.forum-side-title {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.forum-side-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.forum-side-list li {
  padding: 0.55rem 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
}
.forum-side-list li:first-child {
  border-top: 0;
  padding-top: 0;
}
.forum-side-list span {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.forum-breadcrumb {
  font-size: 0.875rem;
  margin-bottom: var(--space-md);
}
.forum-search {
  display: flex;
  gap: 0.5rem;
  max-width: 480px;
}

/* ---- Topic table (forum page) ---- */
.forum-topic-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.forum-topic-head,
.forum-topic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem 5rem 5rem 5.5rem;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.85rem 1.25rem;
}
.forum-topic-head {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.forum-topic-head span:not(:first-child),
.forum-topic-num,
.forum-topic-user {
  text-align: center;
}
.forum-topic-row + .forum-topic-row {
  border-top: 1px solid var(--border);
}
/* Same green tint as the classic "solved" row, scoped to forums only. */
.forum-topic-row.is-solved {
  background: #E6F6E6;
}
.forum-topic-title a {
  font-size: 1.0625rem;
  color: var(--text-primary);
  text-decoration: none;
}
.forum-topic-title a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}
.forum-topic-meta {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}
.forum-topic-num {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.forum-topic-num-label {
  display: none;
}
.forum-solved-badge {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  background: #198754;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 767.98px) {
  .forum-topic-head {
    display: none;
  }
  .forum-topic-row {
    grid-template-columns: repeat(3, auto) 1fr;
    gap: 0.35rem var(--space-md);
  }
  .forum-topic-title {
    grid-column: 1 / -1;
  }
  .forum-topic-user {
    display: none;
  }
  .forum-topic-num {
    font-size: 0.8125rem;
    text-align: left;
  }
  .forum-topic-num-label {
    display: inline;
  }
}

/* ---- Topic page ---- */
.forum-thread {
  max-width: 920px;
}
.forum-thread-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.forum-thread-stats {
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.forum-post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem;
  margin-bottom: var(--space-md);
  scroll-margin-top: calc(var(--header-height) + 1rem);
}
.forum-post-original {
  border-left: 4px solid var(--brand-primary);
}
.forum-post-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.forum-post-author {
  display: block;
  font-weight: 600;
}
.forum-post-date {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.forum-post-tag {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-primary);
}
.forum-post-body {
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.forum-reply-box {
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  margin-top: var(--space-lg);
}

/* "Sample" label for content from seeded demo accounts (users.is_demo) —
   reviews, rating panels, forum posts. Deliberately quiet but visible. */
.sample-badge {
  display: inline-block;
  vertical-align: middle;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* About / Privacy Policy / Terms of Use — plain long-form reading pages. */
.legal-page {
  max-width: 760px;
  padding-block: var(--space-lg);
  line-height: 1.7;
}
.legal-page h2 {
  font-size: 1.25rem;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}
.legal-page li {
  margin-bottom: 0.4rem;
}
.legal-updated {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* Forum "Report" disclosure under each post. */
.forum-report {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
}
.forum-report summary {
  display: inline-block;
  cursor: pointer;
  color: var(--text-secondary);
  list-style: none;
}
.forum-report summary::-webkit-details-marker {
  display: none;
}
.forum-report summary:hover {
  color: var(--bs-danger);
}
.forum-report form {
  max-width: 480px;
}