/* ============================================================================
   INFO MODE — SEGMENTED NAV LAYOUT
   ============================================================================ */

.info-mode-overlay {
  display: none; /* Hidden by default; CSS display overrides [hidden] without this */
}

.info-mode-overlay:not([hidden]) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;   /* fallback */
  height: 100dvh;  /* dynamic: matches visible viewport as chrome shows/hides */
  z-index: 500;
  /* Adjust padding to create the perimeter gap, accounting for your header */
  padding: calc(var(--header-height, 60px) + 0.8rem) 0.8rem 0.8rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Center the floating shell */
  align-items: center;
  justify-content: center;
}

/* ── Shell ─────────────────────────────────────────────────────────────────── */

.info-shell {
  display: flex;
  flex-direction: column; /* Stack nav on top of the panels */
  height: 100%;
  width: 100%;
  max-width: 1200px; /* Constrains the width on large monitors */
  overflow: hidden;
  /* Styling to make it look like a floating card */
  border-radius: var(--radius-6xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--color-border, #e0e4e8);
}

/* ── Tab Nav — desktop sidebar ─────────────────────────────────────────────── */

.info-nav {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  overflow: visible;
  /* Gap is handled by the padding on the individual tabs to keep underlines tight */
  gap: 0;
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  border-bottom: 1px solid var(--color-border, #e0e4e8);
  border-right: none;
  flex-shrink: 0;
}

.info-tab {
  flex-shrink: 1;
  min-width: 0;
  width: auto;
  /* Padding creates the space between the text and the border */
  padding: 0 var(--space-sm); 
  border: none;
  border-radius: 0;
  position: relative;
  /* Paint-only separator controls */
  --info-separator-width: 3px;
  --info-separator-height: 80%;
  --info-separator-right: -0.1em;
  background: transparent;
  color: var(--color-ink, #1a1a1a);
  font-family: var(--font-family-base);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium, 500);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4em;
  /* Ensures the text inside the individual tab never wraps */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 0.15s ease;
}

.info-tab::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--info-separator-right);
  width: var(--info-separator-width);
  height: var(--info-separator-height);
  transform: translateY(-50%);
  background: var(--color-text-tertiary);
  pointer-events: none;
}

/* Hides the separator for nav row-end items */
.info-tab:last-child::after,
.info-tab.row-end::after {
  display: none;
}

.info-tab:hover {
  background: transparent;
  color: var(--color-ink, #1a1a1a);
}

.info-tab.active {
  background: transparent;
  color: var(--color-extra-muted, #99a1b0);
  font-weight: var(--font-weight-semibold, 600);
  text-decoration: underline;
  text-decoration-thickness: 2px; /* Control your weight here */
  text-underline-offset: 2px;     /* Control the position/gap here */
}

.info-tab:focus-visible {
  outline: 2px solid var(--color-primary, #1a56db);
  outline-offset: -2px;
}

/* ── Panels container ──────────────────────────────────────────────────────── */

.info-panels {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ── Individual panel ──────────────────────────────────────────────────────── */

.info-panel {
  display: none;
  background: color-mix(in srgb, var(--color-background) 85%, transparent);
  height: 100%;
  overflow: hidden; /* CHANGED: Locks the outer container from scrolling */
  padding: 0 var(--space-xs) var(--space-xl) var(--space-md);
  max-width: 100%;
}

.info-panel.active {
  display: flex; /* CHANGED: Initializes Flexbox instead of block */
  flex-direction: column; /* ADDED: Stacks the intro, nav, and scroll area vertically */
}

/* ── Panel intro ───────────────────────────────────────────────────────────── */

/* ADDED: Grouped panel-jump here so it also doesn't squish when the area below gets full */
.panel-intro,
.panel-jump {
  flex-shrink: 0; 
}

.panel-intro {
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border, #e0e4e8);
}

.panel-scroll-area {
  position: relative; /* ADDED: This makes JavaScript scroll calculations much easier */
  flex-grow: 1;
  overflow-y: auto; /* Handles the actual scrolling */
}

.panel-intro p {
  font-size: var(--text-base);
  line-height: var(--line-height-normal, 1.7);
  color: var(--color-muted, #555);
  margin: 0;
}

/* ── In-panel jump index ───────────────────────────────────────────────────── */

.panel-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);

}

/* ── Content sections ──────────────────────────────────────────────────────── */

.panel-section {
  border-bottom: 1px solid var(--color-border-light, #f0f0f0);
  scroll-margin-top: var(--space-md, 1rem);
}

.panel-section:last-child {
  border-bottom: none;
}

/* ── Section header (clickable accordion trigger) ── */

.section-header {
  display: grid;
  /* col 1: icon-sized; col 2: text fills remaining space; col 3: chevron */
  /* col 1: icon-sized; col 2: text fills remaining space; col 3: chevron */
  grid-template-columns: var(--size-section-icon) 1fr auto;
  align-items: left;
  gap: var(--space-sm);
  padding: var(--space-sm);
  padding-left: 0;
  cursor: pointer;
  user-select: none;
}

.section-header h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-ink, #1a1a1a);
  line-height: var(--line-height-tight, 1.25);
  display: flex;
  text-transform: uppercase;
  text-align: left;
  align-items: center;
  transition: color 0.15s ease;

  /* Span full width for true centering, indent both sides by icon+gap so text
     wraps before overlapping the icon or chevron */
  grid-column: 1 / -1;
  grid-row: 1;
  padding-inline: calc(var(--size-section-icon) + var(--space-sm));
  pointer-events: none;
}

.section-header:hover h3 {
  color: var(--color-primary, #1a56db);
}

.section-icon {
  grid-column: 1;
  grid-row: 1;
  width: var(--size-section-icon);
  height: var(--size-section-icon);
  opacity: 0.8;
  object-fit: contain;
  flex-shrink: 0;
  padding: calc(var(--size-section-icon) / 8);
  border-radius: var(--radius-full);
  background: var(--lcs-red, #ee3048);
}

.section-header[aria-expanded="true"] .section-icon {
  opacity: 1;
}

/* ── Chevron indicator ── */

.section-header::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--color-ink, #1a1a1a);
  border-bottom: 2px solid var(--color-ink, #1a1a1a);
  transform: rotate(-45deg); /* points right */
  transition: transform 0.2s ease, border-color 0.15s ease;
  justify-self: end;
  align-self: center;
  margin-right: 2px;
  }

.section-header[aria-expanded="true"]::after {
  transform: rotate(45deg); /* points down */
}

.section-header:hover::after {
  border-color: var(--color-primary, #1a56db);
}

/* ── Section body (accordion panel) ── */

.section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding-bottom 0.3s ease;
  padding: 0 var(--space-md) 0 0;
}

.section-header[aria-expanded="true"] + .section-body {
  padding-bottom: var(--space-md);
}

.panel-section p {
  margin: 0 0 var(--space-sm, 0.5rem);
  font-size: var(--text-base);
  line-height: var(--line-height-normal, 1.5);
  color: var(--color-text-secondary, #4a4a4a);
}

.panel-section p:last-child {
  margin-bottom: var(--space-md);
}

.panel-section strong {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-ink, #1a1a1a);
}

.panel-section a {
  color: var(--color-primary, #1a56db);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.panel-section a:hover {
  text-decoration: none;
}

/* ── Rich text prose styles (CKEditor output) ──────────────────────────────
   Covers all tags allowed by content_sanitizer.py: p, br, strong, em,
   ul, ol, li, blockquote, h2, h3, h4, a.
   Tailwind resets list-style:none; margin:0; padding:0 — restore here.
   Nested lists (CKEditor indent/outdent) are handled by structural nesting.  */

.panel-section h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-ink, #1a1a1a);
  margin: var(--space-md, 1rem) 0 var(--space-xs, 0.25rem);
  line-height: var(--line-height-tight, 1.25);
}

.panel-section h4 {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-ink, #1a1a1a);
  margin: var(--space-sm, 0.5rem) 0 var(--space-xs, 0.25rem);
  line-height: var(--line-height-tight, 1.25);
}

.panel-section em {
  font-style: italic;
}

.panel-section blockquote {
  border-left: 3px solid var(--color-border, #e0e4e8);
  color: var(--color-muted, #555);
  margin: var(--space-sm, 0.5rem) 0 var(--space-sm, 0.5rem) var(--space-sm, 0.5rem);
  padding-left: var(--space-sm, 0.5rem);
}

.panel-section ul,
.panel-section ol {
  margin: 0 0 var(--space-sm, 0.5rem) 0;
  padding-left: 1.5rem;
}

.panel-section ul {
  list-style: disc;
}

.panel-section ol {
  list-style: decimal;
}

.panel-section li {
  font-size: var(--text-base);
  line-height: var(--line-height-normal, 1.5);
  color: var(--color-text-secondary, #4a4a4a);
  margin-bottom: 0.25rem;
}

.panel-section .ck-indent-1 { margin-left: 2.5rem; margin-inline-start: 2.5rem; }
.panel-section .ck-indent-2 { margin-left: 5rem; margin-inline-start: 5rem; }
.panel-section .ck-indent-3 { margin-left: 7.5rem; margin-inline-start: 7.5rem; }
.panel-section .ck-indent-4 { margin-left: 10rem; margin-inline-start: 10rem; }
.panel-section .ck-indent-5 { margin-left: 12.5rem; margin-inline-start: 12.5rem; }
.panel-section .ck-indent-6 { margin-left: 15rem; margin-inline-start: 15rem; }
.panel-section .ck-indent-7 { margin-left: 17.5rem; margin-inline-start: 17.5rem; }
.panel-section .ck-indent-8 { margin-left: 20rem; margin-inline-start: 20rem; }

/* Nested list levels — CKEditor encodes indent depth via structural nesting */
.panel-section ul ul,
.panel-section ol ol,
.panel-section ul ol,
.panel-section ol ul {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.panel-section ul ul {
  list-style: circle;
}

.panel-section ul ul ul {
  list-style: square;
}

.panel-jump.panel-jump > a {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border, #e0e4e8);
  background: var(--color-surface, #fff);
  color: var(--color-primary, #1a56db);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium, 500);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.panel-jump.panel-jump > a:hover {
  background: var(--color-primary-light, #e8f0fe);
  border-color: var(--color-primary, #1a56db);
}

.panel-section ul.directions-list {
  margin: var(--space-md, 1rem) 0 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
}

.panel-section ul.directions-list li {
  font-size: var(--text-base);
  line-height: var(--line-height-normal, 1.5);
  color: var(--color-text-secondary, #4a4a4a);
}



/* ── Legacy map background (standalone info page) ──────────────────────────── */

#mapBackground {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;   /* fallback */
  height: 100dvh;  /* dynamic: matches visible viewport */
  z-index: 0;
  opacity: var(--info-map-opacity, 0.15);
}