/* ============================================================
 * Resource Guide — Shared rail (gh-rail) styles
 *
 * Used by every guide page (index + deep pages). The visual
 * rules mirror the original block in guide-home.css; keep them
 * in sync. Page-specific shell layout (single-viewport for the
 * index, scrollable canvas for deep pages) lives in
 * guide-home.css / guide-deep.css respectively.
 * ============================================================ */

/* ---- rail ---- */
.gh-rail {
  background: linear-gradient(180deg, #144a55 0%, #1a5f6d 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0 1rem;
  min-width: 0;
}
.gh-rail__back {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.1rem 1.25rem 0.9rem;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.gh-rail__back:hover { color: #fff; }
.gh-rail__back-arrow {
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.gh-rail__back-label {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

/* ---- where-you-live toggle ---- */
.gh-where {
  display: grid;
  grid-template-columns: 1.4rem 1fr auto;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  text-align: left;
  padding: 0.7rem 1.25rem;
  cursor: pointer;
  font: inherit;
  transition: background 0.18s;
}
.gh-where:hover { background: rgba(244, 126, 96, 0.10); }
.gh-where[aria-expanded="true"] { background: rgba(244, 126, 96, 0.16); }
.gh-where__icon {
  color: var(--color-coral, #f47e60);
  font-size: 0.95rem;
}
.gh-where__text {
  display: flex; flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.gh-where__eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.gh-where__value {
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gh-where__chev {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  transition: transform 0.22s;
}
.gh-where[aria-expanded="true"] .gh-where__chev {
  transform: rotate(90deg);
  color: var(--color-coral, #f47e60);
}

/* ---- topic list ---- */
.gh-topics {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0 0;
  flex: 1;
}
.gh-topic {
  display: grid;
  grid-template-columns: 4px 1.6rem 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 1.25rem 0.55rem 0;
  color: #fff;
  text-decoration: none;
  border-left: 4px solid transparent;
  transition: background 0.18s, border-left-color 0.18s;
}
.gh-topic:hover { background: rgba(255,255,255,0.06); }
.gh-topic[data-c="0"] { border-left-color: var(--section-0, #c2703e); }
.gh-topic[data-c="1"] { border-left-color: var(--section-1, #2a7a8a); }
.gh-topic[data-c="2"] { border-left-color: var(--section-2, #c49a2a); }
.gh-topic[data-c="3"] { border-left-color: var(--section-3, #6a8a5a); }
.gh-topic[data-c="4"] { border-left-color: var(--section-4, #3a7a2a); }
.gh-topic[data-c="5"] { border-left-color: var(--section-5, #8a4a6a); }
.gh-topic[data-c="6"] { border-left-color: var(--section-6, #4a6a8a); }
.gh-topic[data-c="7"] { border-left-color: var(--section-7, #8b6914); }
.gh-topic[data-c="events"] { border-left-color: rgba(212, 168, 71, 0.6); }
.gh-topic[data-c="practices"] { border-left-color: rgba(244, 126, 96, 0.6); }
.gh-topic__spacer { width: 4px; }
.gh-topic__icon { font-size: 1.05rem; opacity: 0.9; }
.gh-topic__label {
  font-size: 0.9rem;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  padding-right: 0.5rem;
}
.gh-topic__count { font-size: 0.75rem; opacity: 0.55; }
.gh-topic--coming { cursor: default; }
.gh-topic--coming:hover { background: transparent; }
.gh-topic--coming .gh-topic__count {
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(212, 168, 71, 0.25);
  color: #d4a847;
  padding: 0.1rem 0.4rem; border-radius: 999px;
  white-space: nowrap;
}

/* ---- current-section state (deep pages) ---- */
.gh-topic--current {
  background: rgba(255,255,255,0.10);
  font-weight: 600;
}
.gh-topic--current:hover { background: rgba(255,255,255,0.12); }
.gh-topic--current .gh-topic__label { font-weight: 600; }
.gh-topic--current .gh-topic__count { opacity: 0.85; }

/* ---- rail footer ---- */
.gh-rail__footer {
  padding: 0.75rem 1.25rem 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.gh-rail__footer-link {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: space-between;
}
.gh-rail__footer-link:hover { color: #fff; }

/* ---- towns column (expands from rail) ---- */
.gh-towns {
  background: #f5f0e6;
  border-right: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
  padding: 1.05rem 0 1rem;
  min-width: 0;
}
.gh-shell.is-expanded .gh-towns { overflow-y: auto; }
.gh-towns__heading {
  font-family: 'Poppins', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a7860;
  padding: 0 1rem 0.5rem;
  margin: 0;
}
.gh-towns__list { list-style: none; margin: 0; padding: 0; }
.gh-towns__item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.45rem 1rem;
  cursor: pointer;
  color: var(--color-text-primary, #2c2416);
  font-size: 0.85rem;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-left-color 0.15s;
  white-space: nowrap;
}
.gh-towns__item:hover { background: rgba(244, 126, 96, 0.08); }
.gh-towns__item.is-selected {
  background: rgba(244, 126, 96, 0.14);
  border-left-color: var(--color-coral, #f47e60);
  font-weight: 600;
}
.gh-towns__item-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(0,0,0,0.25);
  display: inline-block;
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.gh-towns__item.is-selected .gh-towns__item-dot {
  background: var(--color-coral, #f47e60);
  border-color: var(--color-coral, #f47e60);
}
.gh-towns__item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.gh-towns__divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 0.5rem 1rem;
}