/* ============================================================
   AtlasNLP — style.css  (Surf Daybreak design system)
   ============================================================ */

/* --- Tokens ------------------------------------------------- */
:root {
  --bg:       #DFF1EC;
  --dark:     #0C3340;
  --mid:      #2A7088;
  --light:    #5AB4B8;
  --card:     #DFF1EC;   /* all card/container backgrounds = page bg; borders define them */
  --stat:     #CAE9E1;
  --border:   #B8DAD2;
  --coral:    #FF7A5C;
  --muted:    #5A8894;
  --text:     #3D6470;
  --heading:  #0C3340;
  --foam:     #DFF1EC;
  --nav-link: #9FC4B8;
  --white:    #FFFFFF;   /* kept white only for text on dark/coral backgrounds */

  --nav-h:    58px;
  --max-w:    1280px;
  --r:        12px;
  --r-sm:     7px;
  --r-xs:     4px;
  --border-1: 0.5px solid var(--border);
  --shadow:   0 2px 8px rgba(12,51,64,.08);
  --t:        160ms ease;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--coral); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: var(--font); cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* --- Typography -------------------------------------------- */
h1 { font-size: 38px;  font-weight: 500; line-height: 1.15; color: var(--heading); }
h2 { font-size: 26px;  font-weight: 500; line-height: 1.25; color: var(--heading); }
h3 { font-size: 18px;  font-weight: 500; color: var(--heading); }
h4 { font-size: 15px;  font-weight: 500; color: var(--heading); }
p  { font-size: 15px;  color: var(--text); line-height: 1.65; }

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  display: block;
}
.sec-label { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; display: block; }
.sec-title  { font-size: 20px; font-weight: 500; color: var(--heading); margin-bottom: 6px; }
.sec-sub    { font-size: 15px; color: var(--muted); }
.text-muted { color: var(--muted); font-size: 13px; }
.text-coral { color: var(--coral); }
.text-center { text-align: center; }

/* --- Layout ------------------------------------------------- */
.pg { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }

/* Sections constrained to 1280px, centred; nav/footer handle their own padding */
.section {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  padding: 2.5rem 2rem 4rem;
}

/* --- Nav ---------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--dark);
  display: flex;
  align-items: center;
  /* Padding trick: centres content to 1280px on wide viewports */
  padding: 0 max(2rem, calc(50% - 640px));
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--foam);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
}
.logo:hover { text-decoration: none; color: var(--white); }
.logo-mark {
  width: 28px;
  height: 28px;
  background: var(--coral);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-mark i { color: var(--white); font-size: 15px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}
.nl {
  color: var(--nav-link);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  transition: color var(--t);
}
.nl:hover, .nl.active { color: var(--foam); text-decoration: none; }
.nl.active { border-bottom: 1.5px solid var(--coral); padding-bottom: 2px; }
.nav-cta {
  background: var(--coral);
  color: var(--white);
  border: none;
  border-radius: 5px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: opacity var(--t);
}
.nav-cta:hover { opacity: .88; }
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--nav-link); border-radius: 2px; }

/* --- Hero --------------------------------------------------- */
.hero-page {
  background: linear-gradient(135deg, var(--dark) 0%, var(--mid) 100%);
  color: var(--white);
  /* Same padding trick for max-width content centering */
  padding: 3rem max(2rem, calc(50% - 640px)) 2.5rem;
  min-height: 180px;
}
.hero-page .eyebrow { color: var(--nav-link); }
.hero-page h1 { color: var(--white); font-size: 30px; margin-bottom: 10px; }
.hero-page p  { color: var(--nav-link); font-size: 15px; max-width: 640px; }

/* --- Hero (homepage, dark gradient) ------------------------ */
.hero {
  background: linear-gradient(135deg, #0B1D2E 0%, #1B4F72 100%);
  padding: 4.5rem max(2rem, calc(50% - 640px)) 3.5rem;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero__eyebrow {
  display: inline-block;
  background: rgba(255,255,255,.12);
  color: #AED6F1;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .75rem;
  border-radius: var(--r-xs);
  margin-bottom: 1.25rem;
}
.hero h1 { color: #fff; font-size: 38px; margin-bottom: 1rem; }
.hero h1 span { color: var(--coral); }
.hero__lead { color: #AED6F1; font-size: 15px; max-width: 540px; margin-bottom: 1.75rem; line-height: 1.7; }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .btn-p { background: var(--coral); color: var(--white); }
.hero .btn-p:hover { opacity: .88; color: var(--white); }
.hero .btn-o { border-color: rgba(174,214,241,.5); color: #AED6F1; }
.hero .btn-o:hover { background: rgba(255,255,255,.1); color: #fff; }
.hero__chart {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r);
  padding: 1.5rem;
}
.hero__chart-label { font-size: 11px; color: #AED6F1; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; margin-bottom: .75rem; }

/* --- Buttons ----------------------------------------------- */
.btn-p {
  background: var(--dark);
  color: var(--foam);
  border: none;
  border-radius: var(--r-sm);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: opacity var(--t);
  text-decoration: none;
}
.btn-p:hover { opacity: .85; color: var(--foam); text-decoration: none; }

.btn-o {
  background: transparent;
  color: var(--dark);
  border: 1.5px solid var(--dark);
  border-radius: var(--r-sm);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background var(--t), color var(--t);
  text-decoration: none;
}
.btn-o:hover { background: var(--dark); color: var(--foam); text-decoration: none; }

.btn-coral {
  background: var(--coral);
  color: var(--white);
  border: none;
  border-radius: var(--r-sm);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: opacity var(--t);
  text-decoration: none;
}
.btn-coral:hover { opacity: .88; text-decoration: none; color: var(--white); }

.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: var(--r-xs); }
.btn-ghost { background: transparent; color: var(--dark); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 6px 12px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; transition: background var(--t); }
.btn-ghost:hover { background: var(--stat); }
.btn-ds { font-size: 13px; padding: 6px 12px; border-radius: var(--r-xs); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--dark); background: transparent; color: var(--dark); font-weight: 500; font-family: var(--font); }
.btn-ds:hover { background: var(--stat); }
.btn-ds.p { background: var(--dark); color: var(--foam); border-color: var(--dark); }
.btn-ds.coral-p { background: var(--coral); border-color: var(--coral); color: var(--white); }

/* --- Stat strip (dark ocean, gold numbers) ----------------- */
.stat-strip {
  background: #1B4F72;
  padding: 2rem max(2rem, calc(50% - 640px));
}
.stat-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.stat-card { text-align: center; }
.stat-card__value {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 500;
  line-height: 1;
  color: #F39C12;
  margin-bottom: .3rem;
}
.stat-card__label { font-size: 13px; color: #AED6F1; font-weight: 400; }

/* --- Cards -------------------------------------------------- */
.card {
  background: var(--card);
  border: var(--border-1);
  border-radius: var(--r);
  padding: 1.75rem;
}
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Finding cards */
.finding-card {
  background: var(--card);
  border: var(--border-1);
  border-radius: var(--r);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}
.finding-icon { width: 36px; height: 36px; background: var(--stat); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.finding-icon i { color: var(--dark); font-size: 18px; }
.finding-icon.coral { background: #FFE8E2; }
.finding-icon.coral i { color: #CC4A2A; }
.finding-num { font-size: 30px; font-weight: 500; color: var(--dark); margin-bottom: 4px; line-height: 1; }
.finding-num span { color: var(--coral); }
.finding-label { font-size: 14px; font-weight: 500; color: var(--dark); margin-bottom: 8px; }
.finding-desc { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* Analysis finding layout */
.finding-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
  padding: 3rem 0;
  border-bottom: var(--border-1);
}
.finding-split:last-child { border-bottom: none; }
.finding-split.flipped { direction: rtl; }
.finding-split.flipped > * { direction: ltr; }
.finding-prose { display: flex; flex-direction: column; gap: .8rem; }
.finding-tag { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.finding-stat-big { font-size: 3.2rem; font-weight: 500; color: var(--coral); line-height: 1; }
.finding-chart-h { min-height: 340px; position: relative; }
.finding-chart-h.tall { min-height: 460px; }

/* Dataset cards */
.ds-card {
  background: var(--card);
  border: var(--border-1);
  border-radius: var(--r);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}
.ds-card.gold-card { border: 1.5px solid var(--coral); }
.ds-title { font-size: 15px; font-weight: 500; color: var(--heading); margin-bottom: 6px; }
.ds-desc  { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.ds-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ds-chip  { font-size: 12px; background: var(--stat); color: var(--dark); border: var(--border-1); border-radius: var(--r-xs); padding: 3px 8px; }
.ds-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Badges ------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 10px;
}
.badge-core { background: var(--dark); color: var(--foam); }
.badge-gold { background: var(--coral); color: var(--white); }
.badge-blue   { background: var(--stat); color: var(--dark); }
.badge-green  { background: #D5F5E3; color: #1E8449; }
.badge-amber  { background: #FEF0CD; color: #7D5A00; }
.badge-red    { background: #FFE8E2; color: #CC4A2A; }
.badge-gray   { background: #EAECEE; color: #566573; }

/* --- Map/viz card ------------------------------------------ */
.viz-card {
  background: var(--card);
  border: var(--border-1);
  border-radius: var(--r);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.viz-card h3 { margin-bottom: 4px; }
.viz-card .text-muted { margin-bottom: 1.25rem; }
.map-wrap { background: var(--card); border: var(--border-1); border-radius: var(--r); padding: 1.25rem; position: relative; }
.map-legend { display: flex; gap: 8px; align-items: center; margin-bottom: .875rem; flex-wrap: wrap; }
.leg-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); }
.leg-swatch { width: 14px; height: 10px; border-radius: 2px; }
.map-note { font-size: 12px; color: var(--muted); margin-top: .75rem; text-align: center; }

/* Fixed-aspect map container (2:1 ratio, no zoom on homepage) */
.map-aspect {
  position: relative;
  width: 100%;
  padding-bottom: 50%;
  height: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg);
}
.map-aspect svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.map-tooltip {
  position: absolute;
  background: var(--dark);
  color: var(--foam);
  padding: .45rem .85rem;
  border-radius: var(--r-xs);
  font-size: 13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 20;
  white-space: nowrap;
}
.heatmap-tooltip {
  position: fixed;
  background: var(--dark);
  color: var(--foam);
  padding: .45rem .85rem;
  border-radius: var(--r-xs);
  font-size: 13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 200;
}

/* --- Table -------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--r); border: var(--border-1); }
table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); }
thead th {
  background: var(--dark);
  color: var(--foam);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .75rem 1rem;
  text-align: left;
  white-space: nowrap;
  user-select: none;
}
thead th.sortable { cursor: pointer; }
thead th.sortable:hover { background: var(--mid); }
thead th .sort-arrow { margin-left: .2rem; opacity: .45; }
thead th.sort-asc .sort-arrow::after  { content: " ▲"; opacity: 1; }
thead th.sort-desc .sort-arrow::after { content: " ▼"; opacity: 1; }
thead th:not(.sort-asc):not(.sort-desc) .sort-arrow::after { content: " ⇅"; }
tbody tr { border-bottom: var(--border-1); }
tbody tr:hover { background: var(--stat); }  /* visible hover since card bg = page bg */
tbody td { padding: .7rem 1rem; vertical-align: top; font-size: 14px; }
tbody td:first-child { font-weight: 500; }

/* --- Filter bar -------------------------------------------- */
.filter-bar {
  background: var(--card);
  border: var(--border-1);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.filter-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: .3rem; flex: 1; min-width: 150px; }
.filter-group label { font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.filter-group input,
.filter-group select {
  padding: .5rem .75rem;
  border: var(--border-1);
  border-radius: var(--r-xs);
  font-family: var(--font);
  font-size: 13px;
  color: var(--heading);
  background: var(--stat);  /* slightly darker so inputs are visible on same-bg card */
  transition: border-color var(--t);
  width: 100%;
}
.filter-group input:focus,
.filter-group select:focus { outline: none; border-color: var(--mid); box-shadow: 0 0 0 2px rgba(42,112,136,.15); }

/* Toggle pills */
.toggle-pills { display: flex; border: var(--border-1); border-radius: var(--r-sm); overflow: hidden; }
.toggle-pill {
  flex: 1;
  padding: .5rem 1rem;
  font-size: 13px;
  font-weight: 500;
  background: var(--card);
  border: none;
  color: var(--muted);
  transition: background var(--t), color var(--t);
  white-space: nowrap;
  font-family: var(--font);
}
.toggle-pill.active { background: var(--dark); color: var(--foam); }

/* Result bar */
.result-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: .875rem; }
.result-count { font-size: 13px; color: var(--muted); font-weight: 500; }

/* Chips */
.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--stat); color: var(--dark); border-radius: 999px; padding: .2rem .7rem; font-size: 12px; font-weight: 500; }
.chip__remove { cursor: pointer; color: var(--dark); background: none; border: none; font-size: 1rem; line-height: 1; padding: 0; }
.chip__remove:hover { color: var(--coral); }

/* Pagination */
.pagination { display: flex; align-items: center; gap: .4rem; margin-top: 1.25rem; flex-wrap: wrap; }
.pagination button { min-width: 34px; height: 34px; border-radius: var(--r-xs); border: var(--border-1); background: var(--card); color: var(--heading); font-size: 13px; font-weight: 500; font-family: var(--font); transition: background var(--t); }
.pagination button:hover:not(:disabled) { background: var(--stat); }
.pagination button.active { background: var(--dark); color: var(--foam); border-color: var(--dark); }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.pagination__ellipsis { color: var(--muted); font-size: 13px; }

/* --- Spinner ----------------------------------------------- */
.spinner-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; gap: .75rem; color: var(--muted); font-size: 13px; }
.spinner { width: 36px; height: 36px; border: 2.5px solid var(--border); border-top-color: var(--mid); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-msg { background: #FFE8E2; color: #CC4A2A; border-radius: var(--r-sm); padding: 1rem 1.25rem; font-size: 13px; }

/* --- Section link ------------------------------------------ */
.sec-link { font-size: 14px; color: var(--coral); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 500; }
.sec-link:hover { text-decoration: underline; }

/* --- Footer ------------------------------------------------- */
.footer {
  background: var(--dark);
  /* Same padding trick as nav */
  padding: 1.5rem max(2rem, calc(50% - 640px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: auto;
}
.ft { color: var(--nav-link); font-size: 13px; }
.ft-links { display: flex; gap: 20px; flex-wrap: wrap; }
.ft-link { color: var(--nav-link); font-size: 13px; text-decoration: none; }
.ft-link:hover { color: var(--foam); text-decoration: none; }

/* --- CTA section ------------------------------------------- */
.cta-section { background: var(--stat); padding: 3rem 2rem; text-align: center; }
.cta-section h2 { margin-bottom: .6rem; }
.cta-section p  { max-width: 560px; margin: 0 auto 1.75rem; }
.cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* --- Map section vertical breathing (homepage) ------------- */
.map-section-home {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 900px) {
  .finding-split { grid-template-columns: 1fr; gap: 2rem; }
  .finding-split.flipped { direction: ltr; }
  .card-grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-links { display: none; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--dark); padding: 1rem 2rem; gap: .875rem; z-index: 99; }
  .nav-links.open { display: flex; }
  .nav { position: relative; }
  .hamburger { display: flex; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__chart { display: none; }
  .stat-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid-2 { grid-template-columns: 1fr; }
  .filter-group { min-width: 100%; }
  .finding-split { gap: 1.5rem; }
}

@media (max-width: 600px) {
  .card-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .stat-strip__grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 2rem 1.25rem 3rem; }
  .nav { padding: 0 1.25rem; }
  .footer { padding: 1.25rem; }
  h1 { font-size: 28px; }
  .hero h1 { font-size: 28px; }
  .hero-page h1 { font-size: 24px; }
}