# 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, #8a3f2c, #aa553a) !important; /* deeper orange-red terra cotta */
  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") */
.site-header .btn-outline-primary,
.site-header .btn-outline-secondary,
.site-header .btn-outline-success {
  color: #fff;
  border-color: rgba(255,255,255,.55);
  background: transparent;
}
.site-header .btn-outline-primary:hover,
.site-header .btn-outline-secondary:hover,
.site-header .btn-outline-success:hover {
  background: rgba(255,255,255,.15);
  border-color: #fff;
  color: #fff;
}

/* 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: hidden;
  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: hidden;
}
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 ===== */
a.link-primary, .card a {
  color: #14532d;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
a.link-primary:hover, .card a: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: hidden;
  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: hidden; 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 */

/* 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-color: #228B22 !important; /* forest green */
  color: #fff !important;               /* white font */
  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; }

/* 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: 60%;
  margin-left: auto;
  margin-right: auto;
}

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

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