/* ==========================================================================
   refresh.css — visual refresh design layer
   Loaded LAST, so it reskins the existing Bootstrap 3 + custom markup without
   a rebuild. Palette: deep-ocean ground, golden-yellowtail accent, green for
   book actions.

   Structure:
     :root            design tokens
     body.rf          shared base for any refreshed page (ground, cards, type,
                      buttons) — a page opts in by adding "rf" to its body class
     body.rf-report   fish report page specifics
     body.rf-home     homepage specifics
   ========================================================================== */

:root {
  --rf-ground: #EAF1F2;
  --rf-surface: #FFFFFF;
  --rf-surface-2: #F3F7F8;
  --rf-ink: #0C2430;
  --rf-ink-soft: #51646E;
  --rf-ink-faint: #7C8E97;
  --rf-brand: #0E3A50;
  --rf-accent: #C9791A;
  --rf-accent-ink: #8A5210;
  --rf-good: #1B905A;
  --rf-good-dk: #147247;
  --rf-line: #D9E4E6;
  --rf-line-strong: #C4D3D6;
  --rf-shadow: 0 1px 2px rgba(12,36,48,.06), 0 8px 24px rgba(12,36,48,.08);
  --rf-shadow-lift: 0 2px 4px rgba(12,36,48,.08), 0 18px 40px rgba(12,36,48,.14);
  --rf-radius: 16px;
  --rf-radius-sm: 10px;
  --rf-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =========================== shared base (body.rf) ======================== */
body.rf {
  background: var(--rf-ground) !important;
  color: var(--rf-ink);
  font-family: var(--rf-sans);
}
body.rf #main {
  background: transparent !important;
  box-shadow: none !important;
}

/* generic Bootstrap panels -> clean cards */
body.rf .panel {
  background: var(--rf-surface);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius);
  box-shadow: var(--rf-shadow);
}

/* buttons */
body.rf .btn {
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
  padding: 8px 18px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
body.rf .btn:hover { transform: translateY(-1px); }
body.rf .btn-primary { background: var(--rf-good); border-color: var(--rf-good); }
body.rf .btn-primary:hover { background: var(--rf-good-dk); border-color: var(--rf-good-dk); }
body.rf .btn-success { background: var(--rf-good); border-color: var(--rf-good); }
body.rf .btn-success:hover { background: var(--rf-good-dk); border-color: var(--rf-good-dk); }
body.rf .btn-default {
  background: var(--rf-surface);
  border-color: var(--rf-line-strong);
  color: var(--rf-ink);
}
body.rf .btn-default:hover { background: var(--rf-surface-2); }

/* brand heading accent used by get_header() */
body.rf #page-header .font_36 { color: var(--rf-brand); letter-spacing: -.02em; }

/* ============================ report page ================================= */
body.rf-report #detailed_report .panel {
  padding: clamp(18px, 4vw, 34px);
}
body.rf-report #detailed_report h1.h3 {
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--rf-ink);
  margin: 4px 0 18px;
  text-wrap: balance;
}

/* catch chips (species / location / date) */
body.rf-report .rf-chips {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 0 0 18px; padding: 0; list-style: none;
}
body.rf-report .rf-chips li {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--rf-surface-2); border: 1px solid var(--rf-line);
  border-radius: 999px; padding: 6px 13px;
  font-size: 13.5px; font-weight: 600; color: var(--rf-ink);
}
body.rf-report .rf-chips li .fa { color: var(--rf-accent); }

body.rf-report .report_primary_img img.report_img {
  border-radius: var(--rf-radius); box-shadow: var(--rf-shadow-lift); width: 100%;
}
body.rf-report .report_title_data {
  color: var(--rf-ink-soft);
  border-top: 1px solid var(--rf-line); border-bottom: 1px solid var(--rf-line);
  padding: 16px 0; margin: 20px 0;
}
body.rf-report .report_title_data a { color: var(--rf-accent-ink); font-weight: 600; }
body.rf-report .report_title_data .fa { color: var(--rf-ink-faint); }
body.rf-report .report_descript_data { font-size: 17.5px; line-height: 1.72; color: var(--rf-ink); }
body.rf-report .report_descript_data a { color: var(--rf-accent-ink); }
body.rf-report #head { color: var(--rf-ink-soft); }

/* ============================ homepage ==================================== */
/* welcome + bottom copy panels */
body.rf-home .home-page-panel { padding: clamp(20px, 4vw, 34px); }
body.rf-home .home-page-panel h1 {
  font-weight: 800; letter-spacing: -.02em; color: var(--rf-ink);
  margin-top: 4px; text-wrap: balance;
}
body.rf-home .home-page-panel .lead { color: var(--rf-ink-soft); }

/* the featured-reports strip: drop the blue gradient for the clean ground */
body.rf-home #photo-bar {
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 0;
}
/* feature cards */
body.rf-home .feature-wrapper {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius) !important;
  box-shadow: var(--rf-shadow) !important;
  padding: 16px !important;
  transition: transform .14s ease, box-shadow .14s ease;
}
body.rf-home .feature-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: var(--rf-shadow-lift) !important;
}
body.rf-home .feature-wrapper .feature-img { border-radius: var(--rf-radius-sm); overflow: hidden; }
body.rf-home .feature-wrapper a { color: var(--rf-accent-ink); }

/* =========================== top chrome: wordmark logo ==================== */
body.rf #head-left .rf-wordmark {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; padding: 8px 0;
}
body.rf .rf-wordmark .rf-mark {
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(150deg, var(--rf-brand), #14536e);
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
body.rf .rf-wordmark .rf-mark svg { width: 23px; height: 23px; }
body.rf .rf-wordmark .rf-wordmark-text {
  font-size: clamp(19px, 4.5vw, 24px); font-weight: 800; letter-spacing: -.02em;
  color: var(--rf-ink); line-height: 1.02; white-space: nowrap;
}
body.rf .rf-wordmark .rf-wordmark-text b { color: var(--rf-brand); }
body.rf .rf-wordmark:hover .rf-wordmark-text { color: var(--rf-brand); }

/* footer wordmark: light variant on the dark footer */
body.rf #foot .rf-wordmark-light .rf-wordmark-text,
body.rf #foot .rf-wordmark-light .rf-wordmark-text b { color: #fff; }
body.rf #foot .rf-wordmark-light .rf-mark { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }

/* nav: gentle color polish only (no layout changes, so #cssmenu dropdowns and
   the mobile menu keep working) */
body.rf #cssmenu > ul > li > a { transition: color .12s ease; }
body.rf #cssmenu > ul > li > a:hover span,
body.rf #cssmenu > ul > li.active > a span { color: var(--rf-brand); }