/* Explore discovery pages */

.explore-hero {
  padding: 2.5rem 0 1.5rem;
}

.explore-hero-discovery {
  padding-bottom: 2rem;
}

.explore-hero h1 {
  margin-bottom: 0.75rem;
}

.explore-header-journey {
  padding: 0 1.25rem 0.85rem;
}

.explore-journey-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
}

.explore-journey-step {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.72);
}

.explore-journey-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.75rem;
  font-weight: 700;
}

.explore-journey-step.is-active {
  color: #fff;
  font-weight: 600;
}

.explore-journey-step.is-active .explore-journey-num,
.explore-journey-step.is-done .explore-journey-num {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
}

.explore-search {
  margin-top: 1.25rem;
}

.explore-search-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.explore-search-wrap {
  position: relative;
}

.explore-search-input {
  width: 100%;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
}

.explore-search-compact {
  margin-top: 0;
}

.explore-search-compact .explore-search-input {
  font-size: var(--header-nav-link-size, 0.88rem);
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
}

/* Planner dark theme sets --text to light; keep search input readable on white. */
.site-header .explore-search-input {
  color: #1a1206;
}

.site-header .explore-search-input::placeholder {
  color: rgba(26, 18, 6, 0.58);
  opacity: 1;
}

.site-header .explore-search-suggestions {
  background: #fff;
  border-color: rgba(26, 18, 6, 0.12);
  box-shadow: 0 8px 24px rgba(26, 18, 6, 0.12);
}

.site-header .explore-search-option-main,
.site-header .city-suggestion.explore-search-option {
  color: #1a1206;
}

.site-header .explore-search-option-meta {
  color: rgba(26, 18, 6, 0.58);
}

.site-header .city-suggestion.explore-search-option:hover,
.site-header .city-suggestion.explore-search-option:focus-visible {
  background: rgba(232, 168, 56, 0.15);
  color: #1a1206;
}

.nav-search-wrap {
  flex: 1 1 14rem;
  max-width: 22rem;
  min-width: 0;
  margin: 0 0.75rem;
}

.site-header .nav {
  gap: 0.75rem;
}

@media (max-width: 900px) {
  .site-header .nav {
    flex-wrap: wrap;
  }

  .nav-search-wrap {
    order: 3;
    flex-basis: 100%;
    max-width: none;
    margin: 0.35rem 0 0;
  }
}

.explore-search-hero .explore-search-input {
  box-shadow: var(--shadow);
}

.seo-hero-photo .explore-search-label,
.seo-hero-photo .explore-search-hint {
  color: rgba(255, 255, 255, 0.92);
}

.explore-search-hint {
  margin: 0.75rem 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.explore-search-suggestions {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  box-shadow: var(--shadow);
  max-height: 18rem;
  overflow-y: auto;
}

.explore-search-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
}

.explore-search-option-main {
  font-weight: 600;
  color: var(--text);
}

.explore-search-option-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.explore-interest-card.is-search-highlight,
.explore-attraction-card.is-search-highlight,
.explore-attraction-card-base.is-search-highlight {
  outline: 2px solid var(--accent, #c45c26);
  outline-offset: 2px;
}

.explore-map {
  margin: 1.5rem 0 2rem;
}

.explore-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  gap: 0.65rem;
  max-width: 42rem;
}

.explore-map-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border-radius: 0.65rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.explore-map-state:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  color: var(--text);
}

.explore-state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.explore-state-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.explore-state-card-link {
  text-decoration: none;
  color: inherit;
  flex: 1;
}

.explore-state-card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.explore-state-card-body {
  padding: 1rem 1rem 0.5rem;
}

.explore-state-card-body h3 {
  margin: 0 0 0.65rem;
}

.explore-highlights {
  margin: 0 0 0.85rem;
  padding-left: 1.1rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.explore-state-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
  font-size: 0.82rem;
}

.explore-state-meta dt {
  color: var(--text-muted);
  font-weight: 500;
}

.explore-state-meta dd {
  margin: 0;
}

.explore-state-card-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0 1rem 1rem;
}

.explore-interest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.explore-interest-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 1rem 1.1rem;
}

.explore-interest-card h3 {
  margin-top: 0;
}

.explore-interest-card ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.explore-state-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 1.5rem;
}

.explore-signature-list {
  columns: 2;
  gap: 1.5rem;
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
}

.explore-attraction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.explore-attraction-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 1rem;
}

.explore-attraction-head h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}

.explore-attraction-location,
.explore-attraction-meta,
.explore-attraction-blurb {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.explore-attraction-facts {
  margin: 0.65rem 0;
  padding-left: 1rem;
  font-size: 0.85rem;
}

.explore-add-attraction-btn.is-selected {
  background: #2f6b3ff0;
}

.explore-attraction-card-base {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.explore-attraction-card-base.is-selected {
  border-color: rgba(47, 107, 63, 0.45);
  box-shadow: 0 0 0 2px rgba(47, 107, 63, 0.12);
}

.explore-attraction-region {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.explore-attraction-stay {
  margin: 0.35rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.explore-attraction-stay-label {
  color: #9a5f00;
  font-weight: 700;
  margin-right: 0.25rem;
}

.explore-attraction-alt-base {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.explore-attraction-details {
  margin: 0.35rem 0;
}

.explore-attraction-details summary {
  list-style: none;
  cursor: pointer;
  width: fit-content;
}

.explore-attraction-details summary::-webkit-details-marker {
  display: none;
}

.explore-attraction-details-body {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}

.explore-region-block + .explore-region-block {
  margin-top: 2rem;
}

.explore-region-intro {
  color: var(--text-muted);
  margin: -0.35rem 0 1rem;
}

.explore-schematic-map {
  position: relative;
  background: linear-gradient(180deg, #e8dfd1 0%, #d9cfbf 100%);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem 1rem 0.75rem;
}

.explore-route-map-svg {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto;
  font-family: 'Outfit', sans-serif;
}

.explore-map-state-outline {
  fill: rgba(255, 255, 255, 0.42);
  stroke: rgba(26, 18, 6, 0.18);
  stroke-width: 2;
}

.explore-map-route-line {
  fill: none;
  stroke: rgba(154, 95, 0, 0.55);
  stroke-width: 2.5;
  stroke-dasharray: 7 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.explore-map-link-line {
  stroke: rgba(26, 18, 6, 0.16);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}

.explore-map-marker {
  cursor: pointer;
  outline: none;
}

.explore-map-pin-halo {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.explore-map-pin-dot {
  fill: #fff;
  stroke-width: 2;
  transition: fill 0.15s ease, stroke 0.15s ease, transform 0.15s ease;
}

.explore-map-marker-base .explore-map-pin-dot {
  stroke: #2f6b3f;
  fill: rgba(47, 107, 63, 0.12);
}

.explore-map-marker-attraction .explore-map-pin-dot {
  stroke: #9a5f00;
  fill: rgba(232, 168, 56, 0.18);
}

.explore-map-pin-symbol {
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
}

.explore-map-marker-base .explore-map-pin-symbol {
  fill: #2f6b3f;
}

.explore-map-marker-attraction .explore-map-pin-symbol {
  fill: #9a5f00;
}

.explore-map-pin-label {
  font-size: 11px;
  font-weight: 600;
  fill: #1a1206;
  pointer-events: none;
  user-select: none;
}

.explore-map-marker:hover .explore-map-pin-halo,
.explore-map-marker.is-highlighted .explore-map-pin-halo,
.explore-map-marker:focus-visible .explore-map-pin-halo {
  fill: rgba(232, 168, 56, 0.16);
  stroke: rgba(154, 95, 0, 0.35);
}

.explore-map-marker.is-selected .explore-map-pin-dot {
  fill: rgba(232, 168, 56, 0.35);
  stroke: #9a5f00;
}

.explore-map-marker.is-selected .explore-map-pin-label {
  font-weight: 700;
}

.explore-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0.85rem 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.explore-map-legend-route {
  flex-basis: 100%;
  font-size: 0.78rem;
}

@media (max-width: 640px) {
  .explore-map-pin-label {
    font-size: 9px;
  }

  .explore-map-legend-route {
    display: none;
  }
}

.explore-route-preview-path {
  font-weight: 700;
  color: #9a5f00;
  line-height: 1.45;
}

.explore-route-preview-meta,
.explore-route-preview-leg {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.explore-base-legend {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.explore-tray-expanded .explore-tray-copy {
  flex: 1;
  min-width: 220px;
}

.explore-tray-places,
.explore-tray-bases,
.explore-tray-route {
  margin: 0.2rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  line-height: 1.45;
}

.explore-tray-route {
  font-weight: 600;
  color: #f0c96a;
}

.explore-tray-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.explore-tray-actions .btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.explore-sidebar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.explore-cluster-card + .explore-cluster-card {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.explore-cluster-route {
  font-weight: 600;
  color: #9a5f00;
}

.explore-summary-dl {
  display: grid;
  gap: 0.65rem;
  margin: 0;
}

.explore-summary-dl dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.explore-summary-dl dd {
  margin: 0.15rem 0 0;
}

.explore-tray {
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: rgba(26, 18, 6, 0.96);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.85rem 0;
}

.explore-tray-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.explore-tray-count {
  margin: 0;
  font-weight: 600;
}

.explore-tray-estimate {
  margin: 0.15rem 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
}

.explore-cta-panel {
  text-align: center;
}

.explore-note {
  color: var(--text-muted);
  margin-top: 1rem;
}

@media (max-width: 860px) {
  .explore-state-layout {
    grid-template-columns: 1fr;
  }

  .explore-signature-list {
    columns: 1;
  }

  .seo-nav-center {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }
}

@media (max-width: 640px) {
  .seo-start-choices {
    grid-template-columns: 1fr;
  }

  .explore-state-card-actions {
    flex-direction: column;
  }
}