# app/assets/stylesheets/application.css
/*= require_tree . */
/*= require_self */

/* app/assets/stylesheets/application.css */
@import "vendor/bootstrap.min.css";

/* your overrides below */
:root {
  --bs-body-font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: #ece4e7; /* very light mauve grey */
}

body {
  background-color: var(--bs-body-bg) !important;
  font-family: var(--bs-body-font-family);
  font-weight: 500;
  letter-spacing: .1px;
}

/* util width + map height */
.w-32px { width: 32px; }
#locations-map.map-frame {
  height: 420px;  
}

/* Page-section header (used at the top of every tab) */
.site-header {
  background: linear-gradient(135deg, #1f1903, #2f2706) !important; /* very dark olive-brown */
  border: none !important;
  border-radius: .5rem;
  padding: .65rem 1rem !important;
  margin-bottom: 1rem !important;
  color: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
  text-align: center;
}

/* All text inside the site header is light by default */
.site-header,
.site-header p,
.site-header .text-secondary,
.site-header .text-muted,
.site-header small {
  color: #f3e0d6 !important;
  margin-bottom: 0;
}

/* Logo text — white, bold, Montserrat, tighter, centered */
.site-header .logo {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: .4px;
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  margin-bottom: 0;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  text-align: center;
}

/* Underline accent — soft warm cream, full text width */
.site-header .logo::after {
  content: "";
  display: block;
  margin-top: 4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #f3d2bc, #d4a690);
  border-radius: 2px;
}

/* Subtitle styling */
.site-header .subtitle {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-size: .85rem;
  font-weight: 500;
  color: #f3e0d6 !important;
  margin-top: .15rem;
  margin-bottom: 0;
  letter-spacing: .15px;
  padding-left: 0;
}

/* Drop the leaf emoji prefix — cleaner contemporary look */
.site-header .subtitle::before { content: none; }

/* Buttons sitting in the header (e.g. "All locations", "View Season") */
.site-header .btn,
.site-header .btn-outline-primary,
.site-header .btn-outline-secondary,
.site-header .btn-outline-success,
.site-header .btn.btn-outline-primary.btn-sm,
.site-header .btn.btn-outline-secondary.btn-sm,
.site-header .btn.btn-outline-success.btn-sm {
  color: #fff !important;
  border-color: rgba(255,255,255,.6) !important;
  background: transparent !important;
}
.site-header .btn:hover,
.site-header .btn-outline-primary:hover,
.site-header .btn-outline-secondary:hover,
.site-header .btn-outline-success:hover,
.site-header .btn.btn-outline-primary.btn-sm:hover,
.site-header .btn.btn-outline-secondary.btn-sm:hover,
.site-header .btn.btn-outline-success.btn-sm:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* Links inside the header (e.g. "← All Food Sources") */
.site-header a:not(.btn) {
  color: #fbe1d2 !important;
  text-decoration-color: rgba(255,255,255,.5);
}
.site-header a:not(.btn):hover {
  color: #fff !important;
}

/* Force nav to be horizontal */
.site-nav {
  display: flex;
  flex-direction: row;   /* <--- important */
  gap: 1.5rem;           /* space between links */
}

/* Links */
.site-nav .nav-link {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  color: #14532d; /* forest green */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.25rem 0;
  position: relative;
  transition: color 0.3s ease;
  white-space: nowrap;   /* prevent wrapping */
}

.site-nav .nav-link:hover {
  color: #1ec474; /* bright pine — same hue family as #0e3f24 */
  text-decoration: none;
}

.site-nav .nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(to right, #22c55e, #15803d);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.site-nav .nav-link:hover::after {
  width: 100%;
}

/* Card header styling */
.card-header {
  background: linear-gradient(to right, #06291a, #0e3f24); /* deep forest gradient */
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  border-bottom: none;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
  font-size: 0.95rem;
}

/* Add subtle shadow for depth */
.card-header {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

/* Optional: rounded top corners if card doesn’t have them already */
.card-header:first-child {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}


/* Card base */
.card.text-center.shadow-sm {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover lift + stronger shadow */
.card.text-center.shadow-sm:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Numbers */
.card .h4 {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  color: #14532d; /* forest green */
  margin-bottom: 0.25rem;
  transition: color 0.2s ease;
}

/* Numbers turn brighter green on hover */
.card.text-center.shadow-sm:hover .h4 {
  color: #1ec474; /* bright pine — same hue family as #0e3f24 */
}

/* Labels */
.card small {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  color: #374151;
  letter-spacing: 0.5px;
}

/* Page title */
.container.my-4 > h1.h3 {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: .3px;
  margin-bottom: 1rem;
  background: linear-gradient(to right, #166534, #4ade80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Card headers (global) */
.card-header {
  background: linear-gradient(to right, #06291a, #0e3f24); /* deep forest gradient */
  color: #fff;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  border-bottom: none;
  font-size: .9rem;
  padding: .65rem 1rem;
}

/* ---- Top Survivors card grid ---- */
.card.h-100.text-center {
  border: 1px solid #eaf8ef;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card.h-100.text-center:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* Avatar circle */
.fg-avatar {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #166534, #22c55e);
  color: #fff; font-weight: 800; font-size: 1rem;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* Survivor name link */
.st-link { color: #14532d; text-decoration: none; }
.st-link:hover { color: #15803d; text-decoration: underline; }

/* Count text */
.card.small, .card small { color: #374151; }

/* ---- Table styling ---- */
.table-responsive {
  border: 1px solid #e5f7ea;
  border-radius: .5rem;
  /* overflow-x: auto, not hidden. Overriding Bootstrap with hidden clipped
     any table wider than its container and gave no way to reach the rest —
     the admin user directory's action buttons were simply unreachable. */
  overflow-x: auto;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

/* Header row */
table.table thead.table-light {
  background: linear-gradient(to right, #06291a, #0e3f24); /* deep forest gradient */
  color: #fff;
}
table.table thead th {
  border: none !important;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: .8rem;
  color: #fff;
}

/* Body rows */
table.table tbody tr:hover { background-color: #f0fdf4 !important; }
table.table tbody td { vertical-align: middle; font-size: .98rem; }

/* Name links in table */
table a.link-primary {
  color: #14532d !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
table a.link-primary:hover {
  color: #15803d !important;
  border-color: #86efac;
}

/* Right column numbers */
td.text-end { font-variant-numeric: tabular-nums; }

/* ===== HERO CARD ===== */
.card.bg-success.text-white {
  /* forest gradient overlay */
  background: linear-gradient(135deg, #166534, #22c55e);
  border: 0;
}
.card.bg-success.text-white .card-body {
  padding: 1.5rem 1.25rem;
}
.card.bg-success.text-white h1.h2 {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: .3px;
  margin-bottom: .25rem;
}

/* Quick-stat badges inside hero */
.card.bg-success.text-white .badge.bg-light.text-dark {
  border-radius: 9999px;
  background: #f0fdf4 !important;
  color: #0b3b1f !important;
  border: 1px solid #bbf7d0;
  font-weight: 700;
}

/* Secondary tiny stat chips */
.card.bg-success.text-white .badge.bg-dark-subtle,
.card.bg-success.text-white .badge.bg-primary-subtle,
.card.bg-success.text-white .badge.bg-success-subtle {
  border-radius: 9999px;
  font-weight: 600;
}

/* ===== SECTION CARDS / HEADERS ===== */
.card.shadow, .card.shadow-sm, .card {
  border: 1px solid #eaf8ef;
  border-radius: .6rem;
}
.card-header {
  background: linear-gradient(to right, #06291a, #0e3f24);
  color: #fff;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  border: none;
  font-size: .9rem;
  padding: .65rem 1rem;
}

/* ===== TABLES ===== */
.table-responsive {
  border-top: 1px solid #e5f7ea;
  border-bottom-left-radius: .6rem;
  border-bottom-right-radius: .6rem;
  overflow-x: auto;
}
table.table thead {
  background: linear-gradient(to right, #06291a, #0e3f24);
  color: #fff;
}
table.table thead th {
  border: none !important;
  text-transform: uppercase;
  letter-spacing: .35px;
  font-size: .8rem;
}
table.table tbody tr:hover { background: #f0fdf4 !important; }
table.table tbody td { vertical-align: middle; }

/* Result badge colors in Appearances table */
.badge.bg-success { background-color: #16a34a !important; }
.badge.bg-danger { background-color: #dc2626 !important; }

/* “Brought / Given” subtle badges (Bootstrap 5.3 “-subtle” helpers) */
.badge.bg-success-subtle {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0;
}
.badge.bg-primary-subtle {
  background: #eff6ff !important;
  color: #1e3a8a !important;
  border: 1px solid #bfdbfe;
}

/* ===== LISTS ===== */
.list-group-item {
  border-color: #eaf8ef;
}
.list-group-item:hover {
  background: #f0fdf4;
}

/* ===== LINKS ===== */
/* :not(.btn) matters. A link styled as a button inside a card was having its
   own bottom border replaced by the transparent underline below — the Cancel
   button on the profile editor looked like it was missing one side — and on
   hover the border-color rule repainted its whole outline green. */
a.link-primary, .card a:not(.btn) {
  color: #14532d;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
a.link-primary:hover, .card a:not(.btn):hover {
  color: #15803d;
  border-color: #86efac;
}

/* ===== MISC LAYOUT ===== */
.row.g-3 .card,
.row.g-4 .card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.row.g-3 .card:hover,
.row.g-4 .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Make numeric columns align nicely */
.text-end { font-variant-numeric: tabular-nums; }

/* Small muted helpers inside hero or sections */
.text-success-emphasis { color: #14532d !important; }
.text-primary-emphasis { color: #0f3c8a !important; }

/* ===== Page header (reuse from Home) ===== */
.site-header {
  border-bottom: 3px solid #2f5233;
}
.site-header .logo {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: .3px;
  background: linear-gradient(to right, #166534, #4ade80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.site-header .subtitle {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-size: 1.02rem;
  color: #374151;
  margin-top: .25rem;
  letter-spacing: .2px;
  position: relative;
  padding-left: 0.9rem;
}
.site-header .subtitle::before {
  content: none;
}

/* ===== Card headers (global) ===== */
.card-header {
  background: linear-gradient(to right, #06291a, #0e3f24);
  color: #fff;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  border: none;
  font-size: .9rem;
  padding: .65rem 1rem;
}

/* ===== Table styling ===== */
.table-responsive {
  border: 1px solid #e5f7ea;
  border-radius: .5rem;
  /* overflow-x: auto, not hidden. Overriding Bootstrap with hidden clipped
     any table wider than its container and gave no way to reach the rest —
     the admin user directory's action buttons were simply unreachable. */
  overflow-x: auto;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
table.table thead.table-light {
  background: linear-gradient(to right, #06291a, #0e3f24);
  color: #fff;
}
table.table thead th {
  border: none !important;
  font-weight: 700;
  letter-spacing: .35px;
  text-transform: uppercase;
  font-size: .8rem;
}
table.table tbody tr:hover { background-color: #f0fdf4 !important; }
table.table tbody td { vertical-align: middle; }
table a.link-primary {
  color: #14532d !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
table a.link-primary:hover {
  color: #15803d !important;
  border-color: #86efac;
}

/* ===== Season episode mini-cards (inside seasons grid) ===== */
.card .card-body .row.g-3 .card {
  border: 1px solid #eaf8ef;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card .card-body .row.g-3 .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.card .card-body .card-title a {
  color: #14532d;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.card .card-body .card-title a:hover {
  color: #15803d;
  border-color: #86efac;
}
.card .card-body .card-text.small,
.card .card-body .text-muted { color: #4b5563; }

/* ===== Buttons in filter/header ===== */
.btn.btn-outline-secondary.btn-sm {
  color: #14532d;
  border-color: #86efac;
}
.btn.btn-outline-secondary.btn-sm:hover {
  color: #0b3b1f;
  background: #dcfce7;
  border-color: #22c55e;
}
.btn.btn-outline-primary.btn-sm {
  color: #14532d;
  border-color: #86efac;
}
.btn.btn-outline-primary.btn-sm:hover {
  background: #dcfce7;
  border-color: #22c55e;
}

/* Numbers align neat */
.text-end { font-variant-numeric: tabular-nums; }

.series-nav .btn {
  color: #14532d;
  border-color: #86efac;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.series-nav .btn:hover {
  color: #0b3b1f;
  background: #dcfce7;
  border-color: #22c55e;
}

html { scroll-behavior: smooth; }
.series-anchor { scroll-margin-top: 80px; } /* adjust if you have a sticky navbar */
.series-nav .btn {
  color: #14532d;
  border-color: #86efac;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.series-nav .btn:hover {
  color: #0b3b1f;
  background: #dcfce7;
  border-color: #22c55e;
}

/* Reuse your site header + logo + subtitle styles already defined */

/* Make meta cards consistent with forest theme */
.card.shadow-sm .card-header {
  background: linear-gradient(to right, #06291a, #0e3f24);
  color: #fff;
  font-weight: 700;
  letter-spacing: .35px;
  text-transform: uppercase;
  border: none;
  font-size: .9rem;
  padding: .55rem .9rem;
}

/* Table polish */
.table-responsive { border: 1px solid #e5f7ea; border-radius: .5rem; overflow-x: auto; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
table.table thead.table-light { background: linear-gradient(to right, #06291a, #0e3f24); color: #fff; }
table.table thead th { border: none !important; font-weight: 700; letter-spacing: .35px; text-transform: uppercase; font-size: .8rem; }
table.table tbody tr:hover { background: #f0fdf4 !important; }
.text-end { font-variant-numeric: tabular-nums; }

/* Page header uses your existing .site-header, .logo, .subtitle styles */

/* Card header: reuses global gradient if already set for .card-header */

/* Season card synopsis (lives inside dark green card-header) */
.card-header .season-synopsis {
  color: rgba(255, 255, 255, .85);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}
.card-header .text-transform-none {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* Map frame */
.map-frame {
  height: 540px;           /* adjust as needed */
  min-height: 360px;
  border-radius: .5rem;
  overflow: hidden;
  border: 1px solid #e5f7ea;
  box-shadow: inset 0 0 0 1px rgba(22,101,52,.03);
}

/* Legend dot */
.legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: radial-gradient(circle at 30% 30%, #4ade80, #166534);
  box-shadow: 0 0 0 2px #bbf7d0 inset, 0 0 8px rgba(34,197,94,.35);
}

/* Button tone */
.btn.btn-outline-secondary.btn-sm {
  color: #14532d;
  border-color: #86efac;
}
.btn.btn-outline-secondary.btn-sm:hover {
  color: #0b3b1f;
  background: #dcfce7;
  border-color: #22c55e;
}

/* Optional: tighten card padding on small screens */
@media (max-width: 576px) {
  .map-frame { height: 420px; }
}

.survivor-name {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-weight: 900;
  font-size: 2.25rem;          /* bigger than default h2 */
  letter-spacing: .5px;
  line-height: 1.2;
  background: linear-gradient(to right, #166534, #4ade80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: .5rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,.15);
}

.series-header td {
  background: linear-gradient(to right, #06291a, #0e3f24) !important; /* deep forest — matches card headers */
  color: #fff !important;
  font-weight: bold;
}

/* make subheaders a touch smaller/tighter if you like */
.subhead-row th { font-size: .9rem; font-weight: 600; }

/* Reusable stat pills */
.stat-pill {
  display: inline-flex;
  align-items: center;
  padding: .4rem .75rem;
  font-size: .95rem;
  font-weight: 600;
  border-radius: 9999px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  color: #14532d;
  border: 1px solid #bbf7d0;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.stat-pill strong {
  font-weight: 700;
  color: #064e3b;
}

.avatar-lg {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border: 3px solid #bbf7d0;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.avatar-lg:hover {
  transform: scale(1.03);
}

@media (max-width: 576px) {
  .avatar-lg { width: 120px; height: 120px; }
}

/* Stacked first/last name under top-survivor avatars */
.survivor-name-stack {
  display: block;
  text-align: center;
  margin-top: .25rem;
  line-height: 1.15;
  font-size: 1.4rem; /* 40% larger than default body size */
  min-height: 2.6em; /* reserve 2 lines so cards align even if last name is empty */
}
.survivor-name-stack .first-name,
.survivor-name-stack .last-name {
  display: block;
  font-weight: 700;
  letter-spacing: .2px;
}
.survivor-name-stack .last-name { font-weight: 600; }

/* Header banner — full original width, shorter cropped height */
.site-banner {
  display: inline-block;
  width: 100%;
  max-width: 1200px;
  height: 380px;
  object-fit: cover;
  object-position: 50% 100%; /* anchor at bottom so all text is visible */
}
@media (max-width: 576px) {
  .site-banner { height: 170px; }
}

/* Quick Stats labels (Series / Seasons / Episodes / etc.) */
.card-body.py-3 .h4.mb-0 + small.text-muted {
  font-size: 1rem;
  font-weight: 600;
}

/* Justify items-table content closer to the center of the card */
table.items-compact {
  width: 100%;
}

/* Green gradient on the Name | Total header bar */
table.items-compact thead tr {
  background: linear-gradient(to right, #06291a, #0e3f24);
}
table.items-compact thead th {
  background: transparent !important;
  color: #fff !important;
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: .8rem;
  border: none !important;
}

/* Portrait-style avatar for Top Survivors grids */
.avatar-portrait {
  width: 130px;
  height: 170px;
  object-fit: cover;
  border: 3px solid #b88070; /* terra cotta faded 30% lighter */
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  background: #fff;
  transition: transform .2s ease;
}

.avatar-portrait:hover {
  transform: scale(1.03);
}

@media (max-width: 576px) {
  .avatar-portrait { width: 100px; height: 130px; }
}

/* Country grid: flag-coloured country / state outline.
   Background = flag image (sized to cover the box). Mask = country/state
   outline SVG (alpha mask), so only the country shape shows through and the
   rest is transparent. Browsers without mask-image support still see the
   flag rectangle, which is a graceful fallback. */
/* Wrapper element exists only to host filter: drop-shadow(). CSS applies
   filter BEFORE mask on the same element, so the shadow would be clipped
   off by the mask. On a parent of the masked element the filter runs on
   the child's already-masked output and so traces the visible silhouette.
   Stacked layers:
     1) white halo — provides contrast against dark backgrounds (the green
        site-header on /episodes/by_country/<Name>) for countries whose
        flags are entirely dark (Alaska's navy, etc.).
     2) thin dark stroke — provides contrast against light backgrounds (the
        Locations grid) for flags with white areas (Peru, Mexico, etc.).
     3) faint depth shadow. */
.country-shape-wrap {
  display: inline-block;
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 1px rgba(0, 0, 0, 0.7))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.country-shape {
  width: 110px;
  height: 80px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask: var(--outline-url) center / contain no-repeat;
          mask: var(--outline-url) center / contain no-repeat;
  transition: transform .2s ease;
}
.country-card:hover .country-shape {
  transform: scale(1.05);
}
.country-card:hover { text-decoration: none; }

/* Hero-sized variant used on the country show page */
.country-shape-lg {
  width: 220px;
  height: 160px;
}

/* Homepage Top Countries: fixed-width column so the card-header label sits
   directly above the numeric column at every viewport. Smaller on phones
   (the short "Chal" label is swapped in there so the narrower cell fits). */
.top-countries-label { width: 96px; white-space: nowrap; }
.top-countries-table td:nth-child(2) { width: 96px; }
@media (max-width: 575.98px) {
  .top-countries-label { width: 56px; }
  .top-countries-table td:nth-child(2) { width: 56px; }
}

/* Mobile-friendly stacked table layout. Apply class="table-stack" alongside
   .table. Below 768px every <tr> collapses into a vertical card showing each
   cell on its own line with its column label rendered from data-label="…".
   Desktop view is unchanged. */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack tbody, .table-stack tbody tr, .table-stack tbody td { display: block; width: 100%; }
  .table-stack tbody tr {
    border: 1px solid #e5f7ea;
    border-radius: .5rem;
    margin-bottom: .75rem;
    padding: .6rem .75rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
  }
  .table-stack tbody td {
    padding: .25rem 0;
    border: 0 !important;
    text-align: left !important;
  }
  .table-stack tbody td::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 110px;
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .35px;
    color: #6c757d;
    margin-right: .5rem;
  }
  /* Drop the bordered table-responsive frame on mobile — each row is its own
     card with its own border, and the outer frame would be redundant. */
  .table-stack-host .table-responsive { border: 0; box-shadow: none; }
}

@media (max-width: 576px) {
  .country-shape    { width: 90px;  height: 65px; }
  .country-shape-lg { width: 140px; height: 100px; }
}

/* Smaller avatar for podcast/book host cards */
.podcast-host-avatar {
  width: 80px;
  height: 100px;
  object-fit: cover;
  border: 2px solid #b88070;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  background: #fff;
  transition: transform .2s ease;
  display: block;
}

.podcast-host-avatar:hover {
  transform: scale(1.05);
}

[id^="series-"] { scroll-margin-top: 80px; }

/* Stop mid-word breaks on survivor names */
.wrap-name,
.wrap-name a {
  white-space: normal;
  word-break: normal;      /* undo break-word/break-all */
  overflow-wrap: normal;   /* don't force mid-word wraps */
  hyphens: manual;         /* no auto hyphenation */
}
/* ===== Header bar font + color overrides (final) ===== */
.card-header,
table.table thead.table-light,
table.table thead th {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 800 !important;
  background: linear-gradient(to right, #06291a, #0e3f24) !important;
  color: #fff !important;
}
table.table thead.table-light { background: linear-gradient(to right, #06291a, #0e3f24) !important; }

/* Secondary text ("3 found", "12 total") inside the dark green card headers.
   Bootstrap's .text-muted is !important gray and .card small is dark gray,
   both nearly unreadable on the green gradient. */
.card-header .text-muted,
.card-header small,
.card-header .small {
  color: rgba(255, 255, 255, .82) !important;
  font-weight: 600;
  letter-spacing: .3px;
}

/* Make links inside survivor bios visibly clickable */
.survivor-bio a {
  color: #14532d;
  text-decoration: underline;
  text-decoration-color: #1ec474;
  text-underline-offset: 3px;
  font-weight: 600;
}
.survivor-bio a:hover {
  color: #1ec474;
  text-decoration-color: #14532d;
}

/* Warm amber/honey variant — complements the dark forest green */
.site-header.site-header-faded {
  background: linear-gradient(135deg, #b8893d, #cda04a) !important;
}


/* ===== Forum fixes (found in browser QA) ===== */

/* Attached images ran past the content box on narrow screens, forcing the
   whole page to scroll sideways. */
.forum-post-body img,
.forum-post-images img {
  max-width: 100%;
  height: auto;
}

/* Buttons in the dark site header showed no visible focus: Bootstrap marks
   focus with a box-shadow that disappears against the olive background.
   Keyboard users could tab onto "New topic" with no indication. */
.site-header .btn:focus-visible,
.site-header a:focus-visible {
  outline: 3px solid #ffd479 !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* ===== Forum: mention typeahead ===== */
.forum-mention-menu {
  position: absolute;
  z-index: 1080;
  min-width: 240px;
  max-width: 380px;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d6cfc2;
  border-radius: .4rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
  padding: .25rem;
}
.forum-mention-item {
  padding: .35rem .5rem;
  border-radius: .3rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.forum-mention-item.is-active,
.forum-mention-item:hover { background: #f1ece2; }
.forum-mention-label { font-weight: 600; font-size: .9rem; }
.forum-mention-sub { font-size: .75rem; color: #6b6459; }

/* ===== Forum: opening post vs replies =====
   The post that started the topic sits on a slightly darker ground than the
   replies beneath it, so the thread reads as question-then-answers. */
.forum-post-opening { background-color: #e4ded3; }
.forum-post-reply   { background-color: #f3efe8; }

/* Rows and cards with a single obvious destination. The link inside is still
   the real link; this only widens the area for pointer users. */
.forum-clickable { cursor: pointer; }
.card.forum-clickable { transition: box-shadow .15s ease, transform .15s ease; }
.card.forum-clickable:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); transform: translateY(-2px); }

/* "Sign out" is a button_to form rather than an anchor like every other nav
   item, so it needs help sitting on the same line. Bootstrap's p-0 used to
   cancel the .site-nav .nav-link vertical padding, leaving it 0.25rem high. */
.site-nav form.button_to {
  display: flex;
  align-items: center;
  margin: 0;
}
.site-nav .nav-link.btn {
  border: 0;
  background: none;
  box-shadow: none;
  line-height: inherit;
  vertical-align: baseline;
  text-decoration: none;
}


/* The member's own profile link in the nav carries their username and their
   picture, so it keeps its capitalisation instead of being uppercased like
   the section links, and its avatar must not be stretched by the flex row. */
.site-nav .nav-link.d-inline-flex { text-transform: none; letter-spacing: 0; }
.site-nav .nav-link.d-inline-flex img,
.site-nav .nav-link.d-inline-flex span.rounded-circle { flex: 0 0 auto; }

/* ===== Forum promo banner =====
   Sits above page content on the wiki, not on the forum itself. Uses the
   site's forest palette rather than a Bootstrap alert colour, so it reads as
   part of the site rather than as a warning. */
.forum-promo {
  background: linear-gradient(135deg, #0e3f24, #14532d);
  color: #f3f7f4;
  border-radius: .5rem;
  padding: .7rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.forum-promo-body {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.forum-promo-tag {
  background: #86efac;
  color: #0e3f24;
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: .15rem .45rem;
  border-radius: .25rem;
  flex: 0 0 auto;
}
.forum-promo-text { flex: 1 1 16rem; font-size: .95rem; }
.forum-promo-actions { display: flex; gap: .5rem; flex-wrap: wrap; flex: 0 0 auto; }
.forum-promo .btn-outline-light { border-color: rgba(255,255,255,.65); color: #fff; }
.forum-promo .btn-outline-light:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.forum-promo-close {
  background: none;
  border: 0;
  color: #cfe3d6;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 .25rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.forum-promo-close:hover { color: #fff; }
.forum-promo-close:focus-visible { outline: 3px solid #ffd479; outline-offset: 2px; }

@media (max-width: 575px) {
  .forum-promo { align-items: flex-start; }
  .forum-promo-actions { width: 100%; }
}

/* Admin shop cards: every card uses the same three-column grid, so photos and buttons
   line up identically from card to card. */
.shop-product-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 190px;
  gap: 1rem;
  align-items: start;
}
.shop-product-image {
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  background: #fff;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .5rem;
  overflow: hidden;
}
.shop-product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.shop-product-image .shop-product-placeholder { font-size: 2.25rem; color: #adb5bd; }
.shop-product-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.shop-product-actions .btn {
  width: 100%;
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
  /* Long store names wrap onto a second line instead of being cut off. */
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Narrow phones leave the text column ~100px wide. Bootstrap's .badge is white-space: nowrap, so
   "Confirmed on the show" and friends stuck out of the card; let them wrap, and break any long
   unbroken string (product names, brands, URLs) instead of overflowing. */
.shop-product-info {
  min-width: 0;
  overflow-wrap: anywhere;
}
.shop-product-info .badge {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}
.shop-buy-note {
  margin-top: .15rem;
  font-size: .75rem;
  line-height: 1.25;
  color: #6c757d;
  text-align: center;
}
@media (max-width: 767px) {
  .shop-product-row { grid-template-columns: 88px minmax(0, 1fr); }
  .shop-product-image { width: 88px; height: 88px; }
  .shop-product-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .shop-product-actions .shop-buy { flex: 1 1 140px; }
}

/* Each shop product reads as its own card: darker outline, rounded corners, space between. */
ul.list-group > li.list-group-item.shop-product {
  margin: .75rem .75rem 0;
  border: 1px solid #8c959d;
  border-radius: .5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
ul.list-group > li.list-group-item.shop-product:last-child { margin-bottom: .75rem; }

/* Phones: the page already pads the content (main px-5 + container + card), so give the text
   column back some room: smaller photo and tighter card chrome; on the very narrowest phones
   the text goes under the photo instead of beside it. */
@media (max-width: 575px) {
  .shop-product-row { grid-template-columns: 64px minmax(0, 1fr); gap: .75rem; }
  .shop-product-image { width: 64px; height: 64px; }
  .shop-product-image .shop-product-placeholder { font-size: 1.75rem; }
  ul.list-group > li.list-group-item.shop-product { margin-left: .5rem; margin-right: .5rem; padding-left: .75rem; padding-right: .75rem; }
}
@media (max-width: 359px) {
  .shop-product-row { grid-template-columns: minmax(0, 1fr); }
  .shop-product-actions { grid-column: auto; }
}

/* A product card reached from a link on another page (e.g. a survivor's gear in a table). */
.shop-product { scroll-margin-top: 1rem; }
.shop-product:target { background: #fff8e1; outline: 2px solid #f0ad4e; outline-offset: -2px; }

/* ===== Mobile pass (phones) =====
   Everything below is inside a max-width media query, so desktop is untouched. Findings and
   screenshots: tmp/mobile_audit/REPORT.md. */

/* Wrap very long unbroken strings (URLs, e-mail addresses, long usernames) instead of pushing the
   page sideways. break-word (not anywhere) so table/flex min-content sizes stay as they were. */
@media (max-width: 767.98px) {
  #content p, #content li, #content h1, #content h2, #content h3, #content h4, #content h5,
  #content h6, #content dd, #content blockquote, #content a { overflow-wrap: break-word; }

  /* Stacked-table cells: one long unbroken token (a URL in a title) widened the whole table. */
  .table-stack tbody td { overflow-wrap: anywhere; }
  /* The forum topic title is the card heading: no "TOPIC" label eating 110px beside it. */
  .table-stack tbody td[data-label="Topic"]::before { display: none; }
}

@media (max-width: 575.98px) {
  /* The wiki wrapped every page in main.px-5 (48px) plus a nested .container (12px): at 320px that
     left only ~200px for content. Keep a small gutter on phones. */
  /* 12px, not less: a .row placed straight in #content has -12px side margins. */
  main.container.px-5 { padding-left: .75rem !important; padding-right: .75rem !important; }
  /* Not the footer: its nested .row needs the default 12px container padding to cancel its -12px margin. */
  main.container > .container:not(.footer) { --bs-gutter-x: .75rem; }

  /* Primary nav: 10-12 links wrap to 5-7 rows. Tight columns, no row gap, and 44px-high targets. */
  .site-nav { gap: 0 1rem; }
  .site-nav .nav-link { padding: .65rem .15rem; }
  .site-nav .nav-link::after { bottom: 6px; }

  /* Header "All locations" button is absolutely positioned top-right on desktop; on phones it sat
     on top of the page title. Put it in the flow, right-aligned. */
  .site-header.position-relative > a.position-absolute {
    position: static !important;
    display: block;
    width: fit-content;
    margin: 0 0 .5rem auto !important;
  }
  .site-header .logo { overflow-wrap: anywhere; }
  .survivor-name { font-size: 1.75rem; overflow-wrap: anywhere; }

  /* Survivor-count pills (Locations: lists every country) are pill-shaped; a multi-line pill turned
     into a big oval and ran past the card. */
  .stat-pill { display: flex; align-items: flex-start; max-width: 100%; border-radius: 1rem; }
  .stat-pill > span:last-child { min-width: 0; overflow-wrap: anywhere; }

  /* Social buttons and header badges are nowrap by default and stuck out of their card. */
  .social-btn { max-width: 100%; white-space: normal; text-align: left; overflow-wrap: anywhere; }
  .card-header .flex-wrap > .badge, td .badge {
    white-space: normal;
    max-width: 100%;
    text-align: left;
    overflow-wrap: anywhere;
  }

  /* Survivor cards: two columns of ~130px. Shrink the stacked name so long names fit. */
  .survivor-name-stack { font-size: 1.05rem; min-height: 2.3em; overflow-wrap: anywhere; }

  /* iOS Safari zooms the page when an input under 16px gets focus. */
  .form-control, .form-control-sm, .form-select, .form-select-sm, textarea { font-size: 16px; }

  /* Tap targets: Bootstrap's .btn-sm is 31px high; the forum promo close icon was 22px. */
  .btn-sm { --bs-btn-padding-y: .5rem; }
  .forum-promo-close { min-width: 44px; min-height: 44px; font-size: 1.6rem; margin: -.5rem -.5rem 0 0; }

  /* Footer link lists: 21px-high links stacked with no gap. */
  .footer ul li a { display: inline-block; padding: .4rem 0; }

  /* Forum thread titles and breadcrumbs may contain one very long word. */
  .site-header nav.small { overflow-wrap: anywhere; }
}

/* Links inside the dark-green card headers (e.g. "See the full ... guide" on an item page) inherited the
   dark-green link colour and were unreadable on every screen size. */
.card-header a:not(.btn) { color: #bbf7d0; text-decoration: underline; }
.card-header a:not(.btn):hover { color: #fff; border-color: transparent; }

/* Forum post bodies are user-written HTML: long links, code blocks, tables and quotes must scroll or
   wrap inside the post instead of widening the whole page. */
/* A single very long unbroken word in a page title (e.g. a forum thread) must wrap, at any width. */
.site-header .logo { min-width: 0; overflow-wrap: anywhere; }
.forum-post-body { overflow-wrap: anywhere; min-width: 0; }
.forum-post-body pre { max-width: 100%; overflow-x: auto; }
.forum-post-body table { display: block; max-width: 100%; overflow-x: auto; }
.forum-post-body img { max-width: 100%; height: auto; }

/* ===== Long-list pages on phones: /survivors, /shop (+ guides, shelves), /items =====
   Phones were scrolling 40,000-97,000px. Nothing is removed from the HTML: the layouts get
   denser, secondary text sits in closed <details> (still in the DOM, still crawlable), and the
   page gets jump links + a back-to-top button. Everything is inside max-width:767.98px unless
   it only re-opens things for desktop. Numbers: tmp/mobile_audit/ (not committed). */

/* Back to top: phones only, plain in-page link. Browsers with scroll-driven animations reveal it
   after ~600px of scrolling; the rest just show it. */
.back-to-top { display: none; }
@media (max-width: 767.98px) {
  /* Smooth scrolling over a 20,000px page stopped hundreds of pixels short of the target. */
  html:has(.back-to-top) { scroll-behavior: auto; }
  a.back-to-top, a.back-to-top:hover, a.back-to-top:focus {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    width: 44px; height: 44px; border-radius: 50%; border: 0;
    background: #0e3f24; color: #fff; font-size: 1.4rem; line-height: 1; text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35); z-index: 1030;
  }
  @supports (animation-timeline: scroll()) {
    a.back-to-top {
      opacity: 0; pointer-events: none;
      animation: back-to-top-in linear both; animation-timeline: scroll(root block); animation-range: 500px 800px;
    }
    @keyframes back-to-top-in { to { opacity: 1; pointer-events: auto; } }
  }
}

/* In-page jump links (survivor initials, shop categories, items sections): wrapped chips. */
.survivor-az, .shop-jump, .items-jump { display: flex; flex-wrap: wrap; gap: .4rem; }
.survivor-az a, .shop-jump a, .items-jump a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; min-width: 38px; padding: .25rem .75rem;
  border: 1px solid #b6c4b9; border-radius: 1rem; background: #f4f8f5;
  color: #0e3f24; font-size: .9rem; font-weight: 600; text-decoration: none;
}
.survivor-az a { padding: .25rem 0; width: 38px; }
[id^="az-"], .shop-jump + .card, #top-brought, #top-given, #rarest-items, #items-by-type, #items-by-country { scroll-margin-top: .5rem; }

@media (max-width: 767.98px) {
  /* ----- Survivors: compact list. Avatar left, name and counts right, two columns (one under 360px). ----- */
  #survivors-results { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
  #survivors-results > div > a.card { border: 1px solid rgba(0, 0, 0, .12) !important; }
  #survivors-results .card-body {
    display: grid !important; grid-template-columns: 40px minmax(0, 1fr); column-gap: .5rem;
    align-content: center; align-items: center; text-align: left;
    padding: .4rem .4rem !important;
  }
  #survivors-results .card-body > img { grid-column: 1; grid-row: 1 / span 3; width: 40px; height: 52px; margin: 0 !important; border-width: 2px; border-radius: 4px; }
  #survivors-results .card-body > :not(img) { grid-column: 2; justify-self: start; min-width: 0; }
  #survivors-results .survivor-name-stack { font-size: .9rem; min-height: 0; margin-top: 0; text-align: left; letter-spacing: 0; overflow-wrap: break-word; }
  #survivors-results .survivor-name-stack .first-name,
  #survivors-results .survivor-name-stack .last-name { display: inline; }
  #survivors-results .survivor-name-stack .first-name::after { content: " "; }
  #survivors-results .card-body > small { font-size: .75rem; line-height: 1.2; margin-top: .1rem !important; }
  #survivors-results .card-body > .badge { margin-top: .15rem !important; }
  #survivors-results .avatar-portrait:hover { transform: none; }

  /* ----- Shop cards (also on guide pages and the episode/survivor/country/item shelves) ----- */
  ul.list-group > li.list-group-item.shop-product { margin-top: .5rem; padding-top: .6rem; padding-bottom: .6rem; }
  .shop-product-row { gap: .5rem .75rem; }
  .shop-product-info .fw-semibold { font-size: .95rem; line-height: 1.25; }
  .shop-product-actions { gap: .4rem; }
  .shop-product-actions .btn { min-height: 2.5rem; font-size: .875rem; }
  .shop-more { margin-top: .15rem; }
  .shop-more-toggle { display: flex; align-items: center; min-height: 40px; color: #0e3f24; font-size: .875rem; font-weight: 600; cursor: pointer; }
  .shop-more[open] > .shop-more-toggle { min-height: 32px; }

  /* ----- Items: one header row per country card until it is opened ----- */
  details.m-collapse-card > summary { justify-content: flex-start !important; gap: .5rem; cursor: pointer; list-style: none; min-height: 44px; }
  details.m-collapse-card > summary::-webkit-details-marker { display: none; }
  details.m-collapse-card > summary > span:last-child { margin-left: auto; }
  details.m-collapse-card > summary::before { content: "\25B8"; display: inline-block; width: 1em; transition: transform .15s; }
  details.m-collapse-card[open] > summary::before { transform: rotate(90deg); }
  .items-jump { margin-top: -.5rem; }
  .items-country-grid { --bs-gutter-y: .5rem; }
}
/* Page-level spacing that made every one of these pages longer than it had to be on a phone. */
@media (max-width: 575.98px) {
  .shop-jump { margin-top: -.5rem; }
}

/* Desktop: the <details> above are only a phone affordance. Browsers that can restyle the closed
   content (::details-content) show it open and drop the toggle; the rest (older Safari) keep the
   native, clickable summary, so nothing is ever unreachable. A shop card that is the #anchor
   target is always shown open, on phones too. */
@supports selector(::details-content) {
  @media (min-width: 768px) {
    .shop-more::details-content, details.m-collapse-card::details-content { content-visibility: visible; }
    .shop-more-toggle { display: none; }
    details.m-collapse-card > summary { cursor: default; }
  }
  .shop-product:target .shop-more::details-content { content-visibility: visible; }
  .shop-product:target .shop-more-toggle { display: none; }
}