# 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; }

/* 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; }