/* tour.css — Capital Crashpad Shepherd.js tour styles
   Overrides Shepherd defaults to feel native to the dashboard. */

/* ─── Popover container ───────────────────────────────────────────────── */

.shepherd-element {
  max-width: 420px;
  border-radius: 10px;              /* matches $border-radius in styles.scss */
  border: 1px solid #e3eafc;        /* matches .metric-definitions border */
  /* Calmer shadow — present enough to read as elevated, quiet enough not
     to compete with the map. Site info cards use 0 1px 4px …0.02–0.04. */
  box-shadow: 0 4px 16px rgba(26, 35, 126, 0.08);
  background: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  z-index: 10000;
}

.shepherd-content {
  padding: 0;
  border-radius: 10px;
}

/* ─── Map step positioning ─────────────────────────────────────────────── */

.shepherd-element.cc-tour-map-step {
  position: fixed !important;
  left: 50% !important;
  bottom: 16px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 600px) {
  .shepherd-element.cc-tour-map-step {
    width: calc(100vw - 20px);
    max-width: none;
    bottom: 10px !important;
  }
}

/* ── Tour control spotlight ───────────────────────────────────────── */

.cc-tour-highlight {
  position: relative;
  z-index: 10001;
  animation: cc-tour-highlight-pulse 0.9s ease-in-out 1;
}

@keyframes cc-tour-highlight-pulse {
  0% {
    filter: brightness(1);
  }

  35% {
    filter: brightness(1.15);
  }

  100% {
    filter: brightness(1);
  }
}

/* Choropleth buttons */
#choropleth-control .cc-tour-highlight {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 6px rgba(0, 133, 161, 0.65);
}

/* Absolute / Relative control */
.slider-wrapper.cc-tour-highlight {
  box-shadow:
    0 0 0 4px rgba(0, 133, 161, 0.18),
    0 0 0 7px rgba(0, 133, 161, 0.55);
  border-radius: 8px;
}

/* ─── Header ──────────────────────────────────────────────────────────── */

.shepherd-header {
  padding: 1.2em 1.4em 0.5em;
  border-bottom: none;
  background: transparent;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Deep navy matches the dashboard h1 (#1a237e in styles.scss) */
.shepherd-title {
  font-size: 1.12em;
  font-weight: 700;
  color: #1a237e;
  letter-spacing: 0.01em;
  flex: 1;
  line-height: 1.3;
}

/* Expanded tap target; border-radius scopes the focus ring */
.shepherd-cancel-icon {
  color: #bbb;
  font-size: 1.3em;
  line-height: 1;
  transition: color 0.2s;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
  border-radius: 4px;
}

.shepherd-cancel-icon:hover {
  color: #555;
}

.shepherd-cancel-icon:focus-visible {
  outline: 2px solid #0085a1;
  outline-offset: 1px;
  color: #555;
}

/* ─── Body text ───────────────────────────────────────────────────────── */

.shepherd-text {
  padding: 0.3em 1.4em 0.8em;
  font-size: 0.94em;
  color: #444;
  line-height: 1.65;               /* matches case_study.css body rhythm */
}

.shepherd-text p {
  margin: 0 0 0.7em;
}

.shepherd-text p:last-child {
  margin-bottom: 0;
}

/* Epistemic caveat — border color matches .why-brief in styles.scss (#b0b6c3) */
.shepherd-text .cc-tour-caveat {
  font-size: 0.88em;
  color: #777;
  font-style: italic;
  border-left: 3px solid #b0b6c3;
  padding-left: 0.8em;
  margin-top: 0.6em;
  line-height: 1.55;
}

/* Closing paragraph on the handoff step */
.shepherd-text .cc-tour-closing {
  font-size: 0.9em;
  color: #555;
  border-top: 1px solid #e8eaf2;   /* consistent with footer divider below */
  padding-top: 0.8em;
  margin-top: 0.6em;
  line-height: 1.75;
}

/* ─── Footer / buttons ────────────────────────────────────────────────── */

.shepherd-footer {
  padding: 0.7em 1.4em 1.1em;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  border-top: 1px solid #e8eaf2;   /* more legible than the previous #f0f2fa */
  flex-wrap: wrap;
  border-radius: 0 0 10px 10px;
}

/* Auto-advance steps (e.g. relative-demo) render an empty <footer>;
   collapse it rather than leaving dead padding at the card bottom. */
.shepherd-footer:empty {
  border-top: none;
  padding-top: 0;
  padding-bottom: 0.5em;
}

/* ─── Buttons ─────────────────────────────────────────────────────────── */

/* Pill shape mirrors the .analysis-button idiom throughout the dashboard */
.cc-tour-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 15px;
  font-size: 0.88em;
  font-family: inherit;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  border: 1.5px solid transparent;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
}

.cc-tour-btn:focus-visible {
  outline: 2px solid #0085a1;
  outline-offset: 2px;
}

/* Primary: teal fill — $primary-color from styles.scss */
.cc-tour-btn--primary {
  background: #0085a1;
  color: #fff;
  border-color: #0085a1;
}

.shepherd-element .cc-tour-btn--primary:hover {
  background: #006b82;
  border-color: #006b82;
}

/* Secondary: transparent with border — mirrors .analysis-button outline style */
.cc-tour-btn--secondary {
  background: transparent;
  color: #333;
  border-color: #bbb;              /* #bbb instead of #ccc — matches tour trigger border */
}

.shepherd-element .cc-tour-btn--secondary:hover {
  background: #f5f5f5;
  border-color: #999;
  color: #111;
}

/* Ghost: low-priority action (Skip).
   #999 instead of #bbb — meaningfully better contrast on white. */
.cc-tour-btn--ghost {
  background: transparent;
  color: #999;
  border-color: transparent;
  font-size: 0.83em;
  padding: 6px 10px;
}

.shepherd-element .cc-tour-btn--ghost:hover {
  color: #555;
  text-decoration: underline;
  background: transparent;
}

/* ─── Arrow ───────────────────────────────────────────────────────────── */

.shepherd-arrow::before {
  background: #fff;
}

/* Arrow border matches the card border for all four Popper placement axes */
.shepherd-element[data-popper-placement^="top"] .shepherd-arrow::before,
.shepherd-element[data-popper-placement^="bottom"] .shepherd-arrow::before,
.shepherd-element[data-popper-placement^="left"] .shepherd-arrow::before,
.shepherd-element[data-popper-placement^="right"] .shepherd-arrow::before {
  border-color: #e3eafc;
}

/* ─── Modal overlay ───────────────────────────────────────────────────── */

.shepherd-modal-overlay-container {
  /* useModalOverlay: false in tour.js — this is a harmless no-op */
  fill-opacity: 0.45;
}

/* ─── Tour trigger button (in dashboard header) ───────────────────────── */

.tour-link {
  margin-top: 10px;
  margin-bottom: 2px;
}

/* Quieter font-size positions this as secondary below the .analysis-button */
#take-tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: 1.5px solid #bbb;
  border-radius: 999px;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  color: #777;
  background: transparent;
  transition: all 0.2s ease;
  letter-spacing: 0.2px;
}

#take-tour-btn:hover {
  border-color: #0085a1;
  color: #0085a1;
  background: rgba(0, 133, 161, 0.04);
}

#take-tour-btn:focus-visible {
  outline: 2px solid #0085a1;
  outline-offset: 2px;
}

#take-tour-btn i {
  font-size: 0.9em;
  opacity: 0.85;
}

/* ─── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  /* 12px margin each side — slightly more standard than the previous 10px */
  .shepherd-element {
    max-width: calc(100vw - 24px);
  }

  .shepherd-footer {
    justify-content: center;
  }

  /* On mobile the tour button stacks under the case study link */
  .tour-link {
    display: block;
    text-align: center;
  }
}