/* ============================================================
   HookedFishing — Master Stylesheet
   Version: 1.0
   Load via: /wp-content/themes/generatepress-child/hooked-master.css
   ============================================================

   TABLE OF CONTENTS
   1.  Fonts & Variables
   2.  Base Reset
   3.  Typography
   4.  Buttons
   5.  Hero Section
   6.  Body / Content Area
   7.  Section Labels & Headings
   8.  Cards — Report, Water, Guide
   9.  Stat Grid
   10. CTA Block
   11. Internal Links Block
   12. Badges & Pills
   13. Conditions Bar
   14. How It Works
   15. Hatch Chart Preview
   16. Guides Section
   17. Email / Newsletter Section
   18. Partners Bar
   19. Account Page
   20. Forms
   21. GP Header Overrides
   22. GP Footer Area
   23. Utilities
   24. Responsive
   ============================================================ */


/* ── 1. Fonts & Variables ─────────────────────────────────── */

/* Kill GP page container max-width */
#page.grid-container,
.site.grid-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Force full width even if GP sidebar setting persists */
.site-content .content-area,
#primary,
.is-right-sidebar #primary,
.is-left-sidebar #primary {
  width: 100% !important;
  max-width: 100% !important;
}

.is-right-sidebar,
.is-left-sidebar,
.widget-area.sidebar {
  width: 0 !important;
  display: none !important;
}

:root {
  --hk-deep:      #0a2530;
  --hk-dark:      #1a5f78;
  --hk-mid:       #2585a3;
  --hk-light:     #4aa8c4;
  --hk-pale:      #e8f6fb;
  --hk-border:    #d8eef6;
  --hk-gold:      #c07a1e;
  --hk-footer-bg: #0e2d38;
  --hk-text:      #0f2830;
  --hk-muted:     #4a7080;
  --hk-hint:      #6a8f9a;
  --hk-faint:     #8ab0bc;
  --hk-serif:     'Cormorant Garamond', Georgia, serif;
  --hk-sans:      'Plus Jakarta Sans', system-ui, sans-serif;
  --hk-radius:    12px;
  --hk-radius-sm: 8px;
  --hk-radius-pill: 100px;
}


/* ── 2. Base Reset ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--hk-sans);
  color: var(--hk-text);
  background: #f4f8fa;
  margin: 0;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--hk-mid); text-decoration: none; }
a:hover { color: var(--hk-dark); }


/* ── 3. Typography ────────────────────────────────────────── */
.hk-h1 {
  font-family: var(--hk-serif);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 12px;
}

.hk-h2 {
  font-family: var(--hk-serif);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 600;
  color: var(--hk-text);
  line-height: 1.2;
  margin: 36px 0 12px;
}

.hk-h3 {
  font-family: var(--hk-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--hk-text);
  margin: 24px 0 10px;
}

.hk-p {
  font-size: 15px;
  color: var(--hk-muted);
  line-height: 1.85;
  margin-bottom: 18px;
}

.hk-ul {
  font-size: 15px;
  color: var(--hk-muted);
  line-height: 1.9;
  padding-left: 20px;
  margin-bottom: 20px;
}

.hk-ul li { margin-bottom: 6px; }

.hk-lead {
  font-size: 17px;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  margin: 0 0 22px;
  max-width: 620px;
}

.hk-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hk-mid);
  margin-bottom: 10px;
  display: block;
}

.hk-label--faint { color: var(--hk-faint); }

em.hk-accent {
  font-style: italic;
  color: var(--hk-light);
}

.hk-divider {
  border: none;
  border-top: 1px solid var(--hk-border);
  margin: 32px 0;
}


/* ── 4. Buttons ───────────────────────────────────────────── */
.hk-btn,
.hk-btn-ghost,
.hk-btn-outline {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--hk-radius-sm);
  font-family: var(--hk-sans);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1;
}

.hk-btn {
  background: var(--hk-gold);
  color: #fff;
}
.hk-btn:hover { background: #a06010; color: #fff; }

.hk-btn-primary {
  background: var(--hk-mid);
  color: #fff;
}
.hk-btn-primary:hover { background: var(--hk-dark); color: #fff; }

.hk-btn-ghost {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
}
.hk-btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }

.hk-btn-outline {
  background: transparent;
  color: var(--hk-dark);
  border: 1.5px solid var(--hk-border);
  font-weight: 600;
}
.hk-btn-outline:hover { background: var(--hk-pale); color: var(--hk-dark); }

.hk-btn-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}


/* ── 5. Hero Section ──────────────────────────────────────── */
.hk-hero {
  background: linear-gradient(160deg, #0a2530 0%, #1a5f78 55%, #2585a3 100%);
  padding: 64px 24px 52px;
  position: relative;
  overflow: hidden;
}

.hk-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2388cfe0' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.hk-hero-inner {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}

.hk-hero-tag {
  display: inline-block;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.75);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--hk-radius-pill);
  margin-bottom: 14px;
}

.hk-hero h1,
.hk-hero .hk-h1 {
  font-family: var(--hk-serif);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 600;
  color: #fff;
  line-height: 1.12;
  margin: 0 0 14px;
}

.hk-hero .hk-lead {
  font-size: 16px;
  color: rgba(255,255,255,.72);
  max-width: 600px;
  line-height: 1.7;
  margin: 0 0 22px;
}


/* ── 6. Body / Content Area ───────────────────────────────── */
.hk-body {
  max-width: 860px;
  margin: 0 auto;
  padding: 44px 24px 64px;
}

.hk-body--wide {
  max-width: 1100px;
  margin: 0 auto;
  padding: 44px 24px 64px;
}

/* Remove GP container constraints */
.page-template-default .content-area,
.page-template-default .site-main,
.page-template-default article.page,
.page-template-default .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.entry-header { display: none; }


/* ── 7. Section Labels & Headings ─────────────────────────── */
.section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hk-mid);
  margin-bottom: 10px;
}

.section-title {
  font-family: var(--hk-serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  color: var(--hk-text);
  line-height: 1.15;
  margin: 0 0 16px;
}

.section-title em {
  font-style: italic;
  color: var(--hk-mid);
}

.section-sub {
  font-size: 16px;
  color: var(--hk-muted);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 0 28px;
}

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 72px 0;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 20px;
}

.view-all {
  font-size: 14px;
  color: var(--hk-mid);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}


/* ── 8. Cards ─────────────────────────────────────────────── */
/* Report Card */
.hk-rcard {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: box-shadow .18s;
}
.hk-rcard:hover { box-shadow: 0 4px 16px rgba(37,133,163,.1); }

.hk-rcard-water {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hk-mid);
  margin-bottom: 3px;
}

.hk-rcard-title {
  font-family: var(--hk-serif);
  font-size: 17px;
  font-weight: 600;
  font-style: italic;
  color: var(--hk-text);
  margin-bottom: 4px;
}

.hk-rcard-meta {
  font-size: 12px;
  color: var(--hk-hint);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Water Card */
.hk-wcard {
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 10px;
}

.hk-wcard-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--hk-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* Guide Card */
.hk-gcard {
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 10px;
}

/* Info Card */
.hk-card {
  background: var(--hk-pale);
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 22px 24px;
  margin-bottom: 20px;
}

.hk-card--white {
  background: #fff;
}

.hk-card--warning {
  background: #fff4f2;
  border-color: #f5c4b0;
}

/* Report card grid */
.reports-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.report-card {
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rc-photo { aspect-ratio: 16/7; overflow: hidden; }
.rc-photo img, .rc-photo svg { width: 100%; height: 100%; object-fit: cover; }
.rc-body { padding: 14px 16px 8px; flex: 1; }
.rc-river { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--hk-mid); margin-bottom: 4px; }
.rc-title { font-family: var(--hk-serif); font-size: 16px; font-weight: 600; color: var(--hk-text); margin-bottom: 6px; line-height: 1.3; }
.rc-excerpt { font-size: 13px; color: var(--hk-muted); line-height: 1.6; }
.rc-badges { padding: 0 16px 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.rc-meta { padding: 10px 16px 14px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #f0f6fa; }
.rc-meta-left { display: flex; align-items: center; gap: 8px; }
.rc-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.rc-user { font-size: 12px; font-weight: 500; color: var(--hk-text); }
.rc-stats { display: flex; gap: 8px; }
.rc-stat { font-size: 11px; color: var(--hk-hint); }


/* ── 9. Stat Grid ─────────────────────────────────────────── */
.hk-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0;
}

.hk-stat {
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 20px;
  text-align: center;
}

.hk-stat-val {
  font-family: var(--hk-serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--hk-dark);
  line-height: 1;
}

.hk-stat-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hk-faint);
  margin-top: 5px;
}


/* ── 10. CTA Block ────────────────────────────────────────── */
.hk-cta {
  background: linear-gradient(135deg, var(--hk-dark), var(--hk-mid));
  border-radius: 14px;
  padding: 32px 28px;
  color: #fff;
  margin: 36px 0;
}

.hk-cta h3,
.hk-cta .hk-cta-title {
  font-family: var(--hk-serif);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #fff;
}

.hk-cta p,
.hk-cta .hk-cta-sub {
  color: rgba(255,255,255,.72);
  font-size: 14px;
  margin: 0 0 20px;
  line-height: 1.6;
}

.hk-cta a {
  background: #fff;
  color: var(--hk-dark);
  padding: 10px 24px;
  border-radius: var(--hk-radius-sm);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
}

.hk-cta a:hover { background: var(--hk-pale); color: var(--hk-dark); }


/* ── 11. Internal Links Block ─────────────────────────────── */
.hk-links {
  background: var(--hk-pale);
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 20px 24px;
  margin: 28px 0;
}

.hk-links-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hk-mid);
  margin-bottom: 12px;
}

.hk-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hk-links li a {
  font-size: 13px;
  color: var(--hk-mid);
  text-decoration: none;
  background: #fff;
  border: 1px solid #c8eaf3;
  padding: 5px 13px;
  border-radius: var(--hk-radius-pill);
  display: inline-block;
  font-weight: 500;
  transition: background .12s, border-color .12s;
}

.hk-links li a:hover {
  background: var(--hk-pale);
  border-color: var(--hk-mid);
}


/* ── 12. Badges & Pills ───────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--hk-radius-pill);
  line-height: 1.5;
}

.badge-teal  { background: var(--hk-pale); color: var(--hk-dark); border: 1px solid #c8eaf3; }
.badge-gold  { background: #fef5e7; color: #a06010; border: 1px solid #f5d49a; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-amber { background: #fef9c3; color: #854d0e; }
.badge-red   { background: #fee2e2; color: #991b1b; }

.bg-sp  { background: var(--hk-pale); color: var(--hk-dark); }
.bg-mt  { background: #fef5e7; color: #a06010; }
.bg-hot { background: #fff0e6; color: #c04010; }

.pill-good { background: #dcfce7; color: #166534; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--hk-radius-pill); }
.pill-fair { background: #fef9c3; color: #854d0e; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--hk-radius-pill); }
.pill-poor { background: #fee2e2; color: #991b1b; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--hk-radius-pill); }


/* ── 13. Conditions Bar ───────────────────────────────────── */
.conditions-bar {
  background: var(--hk-deep);
  padding: 0;
  overflow: hidden;
  position: relative;
}

.conditions-inner {
  display: flex;
  align-items: stretch;
  max-width: none;
  animation: hk-ticker 60s linear infinite;
  width: max-content;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.conditions-inner:hover {
  animation-play-state: paused;
}

@keyframes hk-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.cond-river {
  flex: 0 0 auto;
  min-width: 180px;
  padding: 16px 24px;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: background .3s;
}

.cond-river.hk-cond-active {
  background: rgba(255,255,255,.06);
}

.cond-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--hk-radius-pill);
}

.pill-good { background: rgba(34,197,94,.2); color: #22c55e; }
.pill-low  { background: rgba(234,179,8,.2);  color: #eab308; }
.pill-high { background: rgba(239,68,68,.2);  color: #ef4444; }

.cond-river {
  flex: 0 0 215px;
  min-width: 215px;
  padding: 16px 20px;
  border-right: 1px solid rgba(255,255,255,.08);
}

.cond-river-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 8px;
}

.cond-stats { display: flex; gap: 16px; align-items: flex-end; }

.cond-stat-val {
  font-family: var(--hk-serif);
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}

.cond-stat-lbl {
  font-size: 10px;
  color: rgba(255,255,255,.4);
  margin-top: 3px;
}

.cond-usgs {
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.cond-usgs-link {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  text-decoration: none;
  white-space: nowrap;
}


/* ── 14. How It Works ─────────────────────────────────────── */
.hiw { background: #f4f8fa; }

.hiw .section-label,
.hiw .section-title {
  text-align: center;
}

.hiw .section-title {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hiw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.hiw-step {
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: 14px;
  padding: 28px 24px;
}

.step-num {
  font-family: var(--hk-serif);
  font-size: 56px;
  font-weight: 600;
  color: var(--hk-pale);
  line-height: 1;
  margin-bottom: 12px;
}

.step-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--hk-text);
  margin-bottom: 10px;
}

.step-desc {
  font-size: 14px;
  color: var(--hk-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

.step-free {
  font-size: 11px;
  font-weight: 700;
  color: var(--hk-mid);
  text-transform: uppercase;
  letter-spacing: .08em;
}


/* ── 15. Hatch Chart Preview ──────────────────────────────── */
.hatch-feature {
  background: var(--hk-deep);
  padding: 72px 24px;
}

.hatch-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: center;
}

.hatch-text .section-title { color: #fff; }
.hatch-text .section-sub   { color: rgba(255,255,255,.6); }

.hatch-btn {
  display: inline-block;
  margin-top: 24px;
  color: var(--hk-light);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.hatch-chart-preview {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 20px;
}

.hcp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.hcp-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); }

.hcp-months {
  display: grid;
  grid-template-columns: 70px repeat(12, 1fr);
  gap: 3px;
  margin-bottom: 6px;
}

.hcp-months div {
  font-size: 10px;
  color: rgba(255,255,255,.35);
  text-align: center;
}

.hcp-row {
  display: grid;
  grid-template-columns: 70px repeat(12, 1fr);
  gap: 3px;
  margin-bottom: 3px;
}

.hcp-insect { font-size: 11px; color: rgba(255,255,255,.5); display: flex; align-items: center; }

.hcp-cell {
  height: 14px;
  border-radius: 3px;
  background: rgba(255,255,255,.06);
}

.hcp-cell.pk { opacity: 1; }
.hcp-cell.on { opacity: .5; }
.hcp-cell.off { background: rgba(255,255,255,.06); }
.hcp-cell.now { outline: 2px solid rgba(255,255,255,.4); outline-offset: 1px; }


/* ── 16. Guides Section ───────────────────────────────────── */
.guides-section { background: #fff; padding: 72px 0; }

.guides-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}

.guide-cards { display: flex; flex-direction: column; gap: 14px; }

.guide-card {
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.guide-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.guide-info h4 { font-size: 15px; font-weight: 600; color: var(--hk-text); margin: 0 0 2px; }
.guide-info p  { font-size: 12px; color: var(--hk-hint); margin: 0 0 4px; }

.guide-rivers { font-size: 11px; color: var(--hk-mid); font-weight: 500; }

.guide-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--hk-radius-pill);
  background: var(--hk-pale);
  color: var(--hk-dark);
  border: 1px solid #c8eaf3;
  flex-shrink: 0;
}

.guide-badge.featured {
  background: #fef5e7;
  color: #a06010;
  border-color: #f5d49a;
}


/* ── 17. Email / Newsletter Section ───────────────────────── */
.email-section { background: var(--hk-pale); padding: 72px 24px; text-align: center; }

.email-inner { max-width: 560px; margin: 0 auto; }

.email-form {
  display: flex;
  gap: 8px;
  margin: 24px 0 12px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.email-form input {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid var(--hk-border);
  border-radius: var(--hk-radius-sm);
  font-size: 14px;
  font-family: var(--hk-sans);
  color: var(--hk-text);
  background: #fff;
}

.email-form button {
  padding: 12px 22px;
  background: var(--hk-dark);
  color: #fff;
  border: none;
  border-radius: var(--hk-radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--hk-sans);
  white-space: nowrap;
}

.email-note { font-size: 12px; color: var(--hk-faint); }


/* ── 18. Partners Bar ─────────────────────────────────────── */
.partners { background: #fff; padding: 28px 24px; border-top: 1px solid var(--hk-border); }

.partners-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 32px; }

.partners-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hk-faint); white-space: nowrap; }

.partners-logos { display: flex; gap: 28px; flex-wrap: wrap; }

.partner-logo { font-size: 13px; font-weight: 600; color: var(--hk-faint); letter-spacing: .02em; }


/* ── 19. Account Page ─────────────────────────────────────── */
.hk-tabs-wrap {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--hk-border);
  overflow: hidden;
  width: 100%;
  margin-bottom: 20px;
}

.hk-tab-btns { display: flex; border-bottom: 1px solid var(--hk-border); }

.hk-tab-btn {
  flex: 1;
  padding: 13px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hk-hint);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--hk-sans);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: all .15s;
}

.hk-tab-btn.active {
  color: #fff;
  font-weight: 600;
  background: var(--hk-dark);
  border-bottom-color: var(--hk-dark);
  border-radius: 4px 4px 0 0;
}

.hk-tab-panel { display: none; padding: 20px; }
.hk-tab-panel.active { display: block; }

.hk-prog-bar { background: #d8eef6; border-radius: var(--hk-radius-pill); height: 8px; overflow: hidden; margin-top: 8px; }
.hk-prog-fill { background: linear-gradient(90deg, var(--hk-mid), var(--hk-light)); height: 100%; border-radius: var(--hk-radius-pill); }


/* ── 20. Forms ────────────────────────────────────────────── */
.hk-form-field { margin-bottom: 18px; }

.hk-form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hk-mid);
  margin-bottom: 6px;
}

.hk-input,
.hk-select,
.hk-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--hk-border);
  border-radius: var(--hk-radius-sm);
  font-size: 14px;
  font-family: var(--hk-sans);
  color: var(--hk-text);
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s;
}

.hk-input:focus,
.hk-select:focus,
.hk-textarea:focus {
  outline: none;
  border-color: var(--hk-mid);
}

.hk-textarea { height: 110px; resize: vertical; line-height: 1.6; }

.hk-submit {
  background: var(--hk-mid);
  color: #fff;
  padding: 13px 28px;
  border: none;
  border-radius: var(--hk-radius-sm);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--hk-sans);
  transition: background .15s;
}

.hk-submit:hover { background: var(--hk-dark); }

/* Hero email capture */
.hero-capture {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 24px 0 12px;
}

.hero-capture input {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: var(--hk-radius-sm);
  background: rgba(255,255,255,.9);
  font-size: 14px;
  font-family: var(--hk-sans);
  color: var(--hk-text);
}

.hero-capture button {
  padding: 12px 22px;
  background: var(--hk-dark);
  color: #fff;
  border: none;
  border-radius: var(--hk-radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--hk-sans);
  white-space: nowrap;
}

.hero-note { font-size: 12px; color: rgba(255,255,255,.45); margin: 0; }


/* ── 21. GP Header Overrides ──────────────────────────────── */
.site-header {
  background: #fff !important;
  border-bottom: 1px solid var(--hk-border);
  box-shadow: none !important;
}

.site-header .inside-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  min-height: 64px;
  display: flex;
  align-items: center;
}

.site-header .inside-navigation,
.main-navigation .inside-navigation {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.custom-logo { height: 40px; width: auto; }

.main-navigation .menu-item > a,
.main-navigation .page_item > a {
  font-family: var(--hk-sans);
  font-size: 14px;
  font-weight: 500;
  color: #2d5060;
  padding: 7px 13px;
  border-radius: 7px;
  transition: background .15s, color .15s;
}

.main-navigation .menu-item > a:hover,
.main-navigation .page_item > a:hover {
  background: var(--hk-pale);
  color: var(--hk-dark);
}

.main-navigation .current-menu-item > a,
.main-navigation .current-page-item > a,
.main-navigation .current-menu-ancestor > a {
  background: var(--hk-pale);
  color: var(--hk-dark);
  font-weight: 600;
}

body.logged-in .hk-nav-login,
body.logged-in .hk-nav-signup { display: none !important; }
body:not(.logged-in) .hk-nav-account { display: none !important; }

.nav-account-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hk-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .15s;
}

.nav-account-avatar:hover { background: var(--hk-mid); }

/* Space between Submit Report and avatar */
.hk-nav-submit { margin-right: 4px; }
.hk-nav-account { margin-left: 4px; }

/* Logged-out nav buttons */
.hk-nav-login { margin-right: 6px; }
.hk-nav-signup { margin-right: 6px; }

/* All nav action buttons — compact height */
.hk-nav-submit a {
  padding: 6px 14px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

.hk-nav-link-login {
  background: var(--hk-pale) !important;
  color: var(--hk-dark) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 7px !important;
  text-decoration: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  transition: background .15s !important;
  line-height: 1.3 !important;
}

.hk-nav-link-login:hover {
  background: var(--hk-border) !important;
  color: var(--hk-dark) !important;
}

.hk-nav-link-signup {
  background: var(--hk-mid) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 7px !important;
  text-decoration: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  transition: background .15s !important;
  line-height: 1.3 !important;
}

.hk-nav-link-signup:hover {
  background: var(--hk-dark) !important;
  color: #fff !important;
}

.menu-toggle {
  color: var(--hk-dark);
  border: 1.5px solid var(--hk-border);
  border-radius: 7px;
}

/* Mobile login / avatar — next to hamburger */
.hk-mobile-login,
.hk-mobile-avatar {
  display: none;
}

@media (max-width: 768px) {
  .hk-mobile-login {
    display: inline-block;
    background: var(--hk-pale);
    color: var(--hk-dark);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--hk-sans);
    padding: 6px 14px;
    border-radius: 7px;
    text-decoration: none;
    margin-left: 8px;
  }

    .hk-mobile-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--hk-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--hk-sans);
    text-decoration: none;
    margin-left: 8px;
    line-height: 1 !important;
    text-align: center !important;
  }
}



/* Nav account circle — force center on all screen sizes */
.hk-nav-account a,
.hk-nav-account > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
}
/* ── 22. GP Footer Area ───────────────────────────────────── */
.site-footer,
.site-footer .inside-site-footer {
  background: var(--hk-footer-bg) !important;
  padding: 0 !important;
  border: none !important;
}

/* GP Footer Widgets container */
.footer-widgets,
.footer-widgets-container {
  background: var(--hk-footer-bg) !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.inside-footer-widgets {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

.inside-footer-widgets.grid-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* GP renders 1 widget column — force full width */
.footer-widget-1 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove GP widget wrapper padding/borders */
.footer-widgets .widget,
.footer-widgets .inside-footer-widgets .widget,
.footer-widgets .footer-widget-1,
.footer-widgets [class*="footer-widget-"],
.footer-widgets [class*="grid-parent"],
.footer-widgets [class*="grid-"],
.footer-widgets aside,
.footer-widgets .textwidget,
.footer-widgets .custom-html-widget,
.footer-widgets .inner-padding {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
}

.hk-footer {
  background: var(--hk-footer-bg);
  color: rgba(255,255,255,.6);
  font-family: var(--hk-sans);
}

.hk-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 28px;
}

.hk-footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.hk-footer-logo {
  display: inline-block;
  margin-bottom: 14px;
  text-decoration: none;
}

.hk-footer-logo img {
  height: 36px;
  width: auto;
}

.hk-footer-tagline {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.45);
  margin: 0 0 20px;
  max-width: 300px;
}

.hk-footer-socials {
  display: flex;
  gap: 12px;
}

.hk-footer-socials a {
  color: rgba(255,255,255,.35);
  transition: color .15s;
  text-decoration: none;
}

.hk-footer-socials a:hover {
  color: rgba(255,255,255,.8);
}

.hk-footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin: 0 0 16px;
}

.hk-footer-col a {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  padding: 4px 0;
  transition: color .15s;
}

.hk-footer-col a:hover {
  color: #fff;
}

.hk-footer-bottom {
  padding-top: 24px;
  font-size: 12px;
  color: rgba(255,255,255,.25);
  text-align: center;
}

@media (max-width: 640px) {
  .hk-footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* ── 23. Utilities ────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s, transform .5s; }
.reveal.visible { opacity: 1; transform: none; }

.text-center { text-align: center; }
.text-teal { color: var(--hk-mid); }
.text-white { color: #fff; }
.text-muted { color: var(--hk-muted); }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 24px; }
.mt-lg { margin-top: 40px; }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }

#toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--hk-dark);
  color: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
  transition: all .3s;
  z-index: 9999;
  pointer-events: none;
  font-family: var(--hk-sans);
}


/* ── 24. Responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
  .reports-grid    { grid-template-columns: 1fr; }
  .hiw-grid        { grid-template-columns: 1fr; }
  .hatch-inner     { grid-template-columns: 1fr; }
  .guides-inner    { grid-template-columns: 1fr; }
  .hk-stat-grid    { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .hk-hero         { padding: 48px 20px 40px; }
  .hk-body         { padding: 28px 16px 48px; }
  .section         { padding: 48px 0; }
  .hk-stat-grid    { grid-template-columns: 1fr 1fr; }
  .email-form      { flex-direction: column; }
  .site-header .inside-header { padding: 0 16px; }
  .custom-logo     { height: 32px; }
  .main-navigation .menu-item > a { font-size: 13px; padding: 6px 10px; }
}
/* ============================================================
   HookedFishing — Homepage Addition
   Paste into: Appearance → Customize → Additional CSS
   Add BEFORE the responsive section (section 24)
   ============================================================ */


/* ── GP Container Full-Width Overrides ───────────────────────
   GeneratePress wraps content in .grid-container and 
   .inside-article which constrain width. These overrides
   let full-width sections (hero, conditions, hatch, etc.)
   break out of the container.
   ─────────────────────────────────────────────────────────── */
.page-template-default .grid-container,
.page-template-default .inside-article {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.page-template-default .site-content .content-area {
  width: 100% !important;
  max-width: 100% !important;
}


/* ── Homepage Hero ───────────────────────────────────────────
   The river SVG scene + headline + email capture
   ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #dceef5 0%, #c4e2ef 40%, #b0d8e8 100%);
}

.hero-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.hero-scene svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-content {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px 20px;
  z-index: 2;
}

/* ── Hero Category Cards ─────────────────────────────────── */
.hero-cards {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 20px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.hero-card {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 12px;
  padding: 18px 16px;
  text-decoration: none;
  color: var(--hk-text);
  text-align: center;
  transition: transform .15s, box-shadow .15s, background .15s;
}

.hero-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(10,37,48,.12);
  background: #fff;
  color: var(--hk-text);
}

.hero-card-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 8px;
}

.hero-card-title {
  font-family: var(--hk-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--hk-text);
  margin-bottom: 3px;
}

.hero-card-sub {
  font-size: 11px;
  color: var(--hk-hint);
  line-height: 1.4;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hk-muted);
  margin-bottom: 16px;
}

.eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hk-mid);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.hero-headline {
  font-family: var(--hk-serif);
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 600;
  color: var(--hk-deep);
  line-height: 1.05;
  margin: 0 0 16px;
}

.hero-headline em {
  font-style: italic;
  color: var(--hk-mid);
}

h1.hero-headline {
  font-family: var(--hk-serif);
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 600;
  color: var(--hk-deep);
  line-height: 1.05;
  margin: 0 0 16px;
}

.hero-sub {
  font-size: 16px;
  color: var(--hk-muted);
  line-height: 1.75;
  max-width: 580px;
  margin: 0 0 28px;
}

/* hero-capture and hero-note already in master CSS (lines 1007-1038) */


/* ── Homepage Footer Override ────────────────────────────────
   If old embedded <footer> is still in the page HTML,
   hide it — GP handles the real footer.
   ─────────────────────────────────────────────────────────── */
.entry-content > footer,
.elementor-widget-html footer {
  display: none !important;
}


/* ── Homepage Section Spacing Fix ────────────────────────────
   The sections need full-width backgrounds but centered content.
   .section-inner handles the centering (max-width: 1100px).
   ─────────────────────────────────────────────────────────── */
.section {
  padding: 72px 0;
}

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}


/* ── Conditions Bar Full Width ───────────────────────────────
   Already styled in master CSS section 13, but needs
   the .cond-pill class for the status pills inline.
   ─────────────────────────────────────────────────────────── */
.cond-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--hk-radius-pill);
}


/* ── Reports Preview Section ─────────────────────────────────
   .reports-grid and .report-card already in master CSS.
   Just need the section wrapper.
   ─────────────────────────────────────────────────────────── */
.reports-preview {
  width: 100%;
}

.reports-preview .section-header {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.reports-preview .section-header .view-all {
  margin-top: 4px;
}


/* ── Homepage Responsive Additions ───────────────────────────*/
@media (max-width: 900px) {
  .hero-content {
    padding: 60px 20px 16px;
  }
  .hero-headline {
    font-size: clamp(28px, 5vw, 44px);
  }
  .hero-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .hero-content {
    padding: 48px 16px 14px;
  }
  .hero-sub {
    font-size: 14px;
  }
  .hero-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 16px 16px;
  }
  .hero-card {
    padding: 14px 12px;
  }
  .hero-card-icon {
    font-size: 22px;
  }
  .hero-card-title {
    font-size: 13px;
  }
  /* On mobile — stop animation, make the OUTER bar scrollable */
  .conditions-bar {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .conditions-bar::-webkit-scrollbar { display: none; }
  .conditions-inner {
    animation: none !important;
    transform: none !important;
    overflow: visible !important;
    /* Let width be natural — don't force max-content which includes hidden space */
  }
  .conditions-inner:hover { animation-play-state: running; }
  /* Hide duplicate set so no empty space after card 20 */
  .conditions-inner .cond-river:nth-child(n+21) { display: none !important; width: 0 !important; min-width: 0 !important; padding: 0 !important; border: none !important; overflow: hidden !important; }
  /* Wider cards so pill doesn't overflow into next card */
  .cond-river {
    flex: 0 0 215px !important;
    min-width: 215px !important;
    max-width: 215px !important;
  }
}


/* ── Logo Size Fix ───────────────────────────────────────── */
.site-header .custom-logo-link img,
.site-header .custom-logo {
  height: 40px !important;
  width: auto !important;
  max-height: 40px !important;
}

/* ============================================================
   25. River Page Styles
   Covers all 75+ river/lake pages — shared template classes
   ============================================================ */

/* ── River Hero Extensions ───────────────────────────────── */
.hk-hero-breadcrumb {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  margin-bottom: 12px;
}
.hk-hero-breadcrumb a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
}
.hk-hero-breadcrumb a:hover { color: #fff; }

.hk-hero-title {
  font-family: var(--hk-serif);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 10px;
}

.hk-hero-sub {
  font-size: 16px;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 600px;
}

.hk-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.hk-hbadge {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  padding: 5px 12px;
  border-radius: var(--hk-radius-pill);
  white-space: nowrap;
}


/* ── USGS Live Conditions Card (in hero) ─────────────────── */
.hk-cond-card {
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 20px 24px;
  margin-top: 28px;
}

.hk-cc-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hk-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse-dot 2s infinite;
}

.hk-cc-pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--hk-radius-pill);
  margin-bottom: 14px;
}

.hk-cc-stats {
  display: flex;
  gap: 28px;
  margin-bottom: 16px;
}

.hk-cc-stat-val {
  font-family: var(--hk-serif);
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}

.hk-cc-stat-lbl {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  margin-top: 4px;
}

.hk-range-wrap {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  margin-bottom: 8px;
}

.hk-range-ideal {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(34,197,94,.3);
  border-radius: 3px;
}

.hk-range-needle {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 14px;
  background: #fff;
  border-radius: 2px;
  transform: translateX(-50%);
}

.hk-range-lbl {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,.35);
  margin-bottom: 10px;
}

.hk-cc-update {
  font-size: 11px;
  color: rgba(255,255,255,.35);
}

.hk-cc-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.45);
  text-decoration: none;
}
.hk-cc-link:hover { color: rgba(255,255,255,.7); }


/* ── River Page Body Layout ──────────────────────────────── */
.hk-page-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.hk-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* ── River Page Sections ─────────────────────────────────── */
.hk-section {
  margin-bottom: 36px;
}

.hk-section-head {
  margin-bottom: 16px;
}

.hk-section-title {
  font-family: var(--hk-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--hk-text);
  margin: 0 0 4px;
}

.hk-section-sub {
  font-size: 13px;
  color: var(--hk-hint);
  margin: 0;
}

.hk-section-body {
  font-size: 15px;
  color: var(--hk-muted);
  line-height: 1.8;
}

.hk-section-body p {
  margin: 0 0 16px;
}

.hk-overview p {
  font-size: 15px;
  color: var(--hk-muted);
  line-height: 1.85;
  margin-bottom: 18px;
}


/* ── Hatch Chart Grid (river page version) ───────────────── */
.hk-hatch-wrap {
  overflow-x: auto;
}

.hk-hatch-grid {
  display: grid;
  grid-template-columns: 140px repeat(12, 1fr);
  gap: 3px;
  min-width: 600px;
}

.hk-mhdr,
.hk-mhdr-now {
  font-size: 11px;
  font-weight: 600;
  color: var(--hk-hint);
  text-align: center;
  padding: 6px 0;
}

.hk-mhdr-now {
  color: var(--hk-dark);
  font-weight: 700;
}

.hk-ins-lbl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hk-text);
  padding: 4px 0;
}

.hk-ins-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hk-hcell {
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.hk-hcell.hk-peak {
  opacity: 1;
}

.hk-hcell.hk-on {
  opacity: .45;
}

.hk-hcell.hk-off {
  background: var(--hk-pale);
  color: transparent;
}

.hk-hcell.hk-now {
  outline: 2px solid var(--hk-dark);
  outline-offset: 1px;
}

.hk-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.hk-leg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--hk-hint);
}

.hk-leg-sw {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}


/* ── Fly Pattern Grid ────────────────────────────────────── */
.hk-fly-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.hk-fly-group {
  background: var(--hk-pale);
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 16px;
}

.hk-fly-ins {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hk-text);
  margin-bottom: 10px;
}

.hk-fly-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hk-fly-patterns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hk-fly-pat {
  font-size: 12px;
  font-weight: 500;
  color: var(--hk-dark);
  background: #fff;
  border: 1px solid var(--hk-border);
  padding: 4px 10px;
  border-radius: var(--hk-radius-pill);
}


/* ── Access Sections ─────────────────────────────────────── */
.hk-access-item {
  border-left: 3px solid var(--hk-mid);
  padding-left: 16px;
  margin-bottom: 20px;
}

.hk-access-item h4 {
  font-family: var(--hk-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--hk-text);
  margin: 0 0 6px;
}

.hk-access-item p {
  font-size: 14px;
  color: var(--hk-muted);
  line-height: 1.7;
  margin: 0;
}


/* ── Species & Regulations ───────────────────────────────── */
.hk-species-item {
  margin-bottom: 18px;
}

.hk-species-item h4 {
  font-family: var(--hk-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--hk-text);
  margin: 0 0 4px;
}

.hk-species-item p {
  font-size: 14px;
  color: var(--hk-muted);
  line-height: 1.7;
  margin: 0;
}

.hk-regs {
  font-size: 13px;
  color: var(--hk-muted);
  line-height: 1.7;
  background: #fff4f2;
  border: 1px solid #f5c4b0;
  border-radius: var(--hk-radius-sm);
  padding: 14px 16px;
}


/* ── Pro Tips ────────────────────────────────────────────── */
.hk-tip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--hk-border);
}

.hk-tip:last-child { border-bottom: none; }

.hk-tip-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 2px;
}

.hk-tip p {
  font-size: 14px;
  color: var(--hk-muted);
  line-height: 1.7;
  margin: 0;
}


/* ── River Page Guide Cards ──────────────────────────────── */
.hk-guide-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.hk-guide-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hk-pale);
  color: var(--hk-dark);
  font-family: var(--hk-serif);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hk-guide-info { flex: 1; min-width: 0; }

.hk-guide-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--hk-text);
}

.hk-guide-biz {
  font-size: 12px;
  color: var(--hk-hint);
  margin-top: 2px;
}

.hk-guide-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--hk-mid);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.hk-guide-btn:hover {
  background: var(--hk-pale);
  border-color: var(--hk-mid);
}


/* ── Related Waters ──────────────────────────────────────── */
.hk-related-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hk-related-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, border-color .15s;
}

.hk-related-item:hover {
  box-shadow: 0 4px 16px rgba(37,133,163,.08);
  border-color: var(--hk-mid);
}

.hk-related-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--hk-text);
  white-space: nowrap;
}

.hk-related-reason {
  font-size: 13px;
  color: var(--hk-hint);
  flex: 1;
}

.hk-related-arrow {
  font-size: 16px;
  color: var(--hk-mid);
  flex-shrink: 0;
}


/* ── Sidebar Cards ───────────────────────────────────────── */
.hk-scard {
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius);
  overflow: hidden;
}

.hk-scard-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--hk-text);
  padding: 14px 18px;
  border-bottom: 1px solid var(--hk-border);
  background: var(--hk-pale);
}

.hk-scard-body {
  padding: 16px 18px;
}

.hk-quick-stat {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f6fa;
  font-size: 13px;
}

.hk-quick-stat:last-child { border-bottom: none; }

.hk-qs-lbl {
  color: var(--hk-hint);
}

.hk-qs-val {
  font-weight: 600;
  color: var(--hk-text);
  text-align: right;
}

.hk-best-month {
  display: inline-block;
  background: var(--hk-pale);
  color: var(--hk-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: var(--hk-radius-pill);
  border: 1px solid var(--hk-border);
  margin: 3px 4px 3px 0;
}


/* ── River Page Responsive ───────────────────────────────── */
@media (max-width: 900px) {
  .hk-page-body {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px 16px 48px;
    min-width: 0;
  }
  .hk-main,
  .hk-sidebar,
  .hk-section,
  .hk-section-body,
  .hk-section-head {
    min-width: 0;
    max-width: 100%;
  }
  .hk-fly-grid {
    grid-template-columns: 1fr;
  }
  .hk-sidebar {
    order: -1;
  }
}

@media (max-width: 640px) {
  .hk-cc-stats {
    flex-wrap: wrap;
    gap: 16px;
  }
  .hk-hero-badges {
    gap: 6px;
  }
  .hk-hbadge {
    font-size: 11px;
    padding: 4px 10px;
  }
}

/* Hide GP default copyright bar — custom footer replaces it */
.site-info,
.site-info .inside-site-info {
  display: none !important;
}


/* ============================================================
   26. Rivers Index Page
   ============================================================ */
.hk-rivers-page {
  font-family: var(--hk-sans);
  color: var(--hk-text);
}

/* ── Rivers Hero ─────────────────────────────────────────── */
.hk-rivers-page .hk-hero {
  background: linear-gradient(160deg, #0a2530 0%, #1a5f78 55%, #2585a3 100%);
  padding: 64px 24px 48px;
  position: relative;
  overflow: hidden;
}

.hk-hero-waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.hk-wave svg {
  width: 100%;
  height: auto;
  display: block;
}

.hk-hero-inner {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.hk-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.hk-hero-eyebrow-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.15);
}

.hk-hero-eyebrow-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}

.hk-hero-title {
  font-family: var(--hk-serif);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 600;
  color: #fff;
  line-height: 1.12;
  margin: 0 0 16px;
}

.hk-hero-title em {
  font-style: italic;
  color: var(--hk-light);
}

.hk-hero-sub {
  font-size: 16px;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 0 28px;
}

/* Stats row */
.hk-hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.hk-hs {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
}

.hk-hs-val {
  font-family: var(--hk-serif);
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
}

.hk-hs-lbl {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  margin-top: 4px;
  white-space: nowrap;
}

.hk-hs-div {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.15);
}

/* ── Filter Bar ──────────────────────────────────────────── */
.hk-filter-bar {
  background: #fff;
  border-bottom: 1px solid var(--hk-border);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.hk-filter-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hk-fi-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--hk-hint);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hk-fi-div {
  width: 1px;
  height: 24px;
  background: var(--hk-border);
}

.hk-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--hk-pale);
  border: 1.5px solid var(--hk-border);
  border-radius: 8px;
  padding: 7px 12px;
}

.hk-search-icon {
  font-size: 14px;
}

.hk-search-wrap input {
  border: none;
  background: transparent;
  font-family: var(--hk-sans);
  font-size: 14px;
  color: var(--hk-text);
  outline: none;
  width: 140px;
}

.hk-states {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.hk-state {
  padding: 5px 12px;
  border-radius: 6px;
  font-family: var(--hk-sans);
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--hk-border);
  background: #fff;
  color: var(--hk-muted);
  cursor: pointer;
  transition: all .15s;
}

.hk-state:hover {
  background: var(--hk-pale);
  border-color: var(--hk-mid);
  color: var(--hk-dark);
}

.hk-state.active {
  background: var(--hk-dark);
  border-color: var(--hk-dark);
  color: #fff;
}

.hk-type-wrap {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.hk-type-btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-family: var(--hk-sans);
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--hk-border);
  background: #fff;
  color: var(--hk-muted);
  cursor: pointer;
  transition: all .15s;
}

.hk-type-btn:hover {
  background: var(--hk-pale);
}

.hk-type-btn.active {
  background: var(--hk-deep);
  border-color: var(--hk-deep);
  color: #fff;
}

.hk-results-count {
  font-size: 13px;
  color: var(--hk-hint);
  font-weight: 500;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Rivers Body ─────────────────────────────────────────── */
.hk-rivers-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 24px 64px;
}

/* Featured section */
.hk-featured-head {
  margin-bottom: 20px;
}

.hk-section-title {
  font-family: var(--hk-serif);
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 600;
  color: var(--hk-text);
  margin: 0 0 4px;
}

.hk-section-sub {
  font-size: 14px;
  color: var(--hk-hint);
}

/* Featured cards scroll */
.hk-featured-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hk-featured-scroll::-webkit-scrollbar {
  display: none;
}

.hk-feat-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s;
}

.hk-feat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(10,37,48,.1);
  color: inherit;
}

.hk-feat-scene {
  position: relative;
  height: 120px;
  overflow: hidden;
}

.hk-feat-scene svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hk-feat-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
  padding: 3px 10px;
  border-radius: 100px;
}

.hk-feat-body {
  padding: 14px 16px 16px;
}

.hk-feat-name {
  font-family: var(--hk-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--hk-text);
  margin-bottom: 2px;
}

.hk-feat-state {
  font-size: 12px;
  color: var(--hk-hint);
  margin-bottom: 8px;
}

.hk-feat-desc {
  font-size: 13px;
  color: var(--hk-muted);
  line-height: 1.6;
  margin-bottom: 10px;
}

.hk-feat-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.hk-ft {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--hk-pale);
  color: var(--hk-dark);
}

.hk-ft.ft-tail { background: #e8f6fb; color: #1a5f78; }
.hk-ft.ft-free { background: #eef7f2; color: #1a6030; }
.hk-ft.ft-spring { background: #f0eaf8; color: #6a30a8; }

/* ── State Sections ──────────────────────────────────────── */
.hk-state-section {
  margin-top: 40px;
}

.hk-state-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hk-border);
}

.hk-state-flag {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

.hk-state-name {
  font-family: var(--hk-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--hk-text);
}

.hk-state-count {
  font-size: 13px;
  color: var(--hk-hint);
  margin-left: auto;
}

/* ── River Card Grid ─────────────────────────────────────── */
.hk-river-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.hk-river-card {
  display: block;
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: 12px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}

.hk-river-card:hover {
  border-color: var(--hk-mid);
  box-shadow: 0 4px 16px rgba(10,37,48,.08);
  color: inherit;
}

.hk-rc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.hk-rc-name {
  font-family: var(--hk-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--hk-text);
}

.hk-rc-type {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
}

.hk-rc-type.type-tail { background: #e8f6fb; color: #1a5f78; }
.hk-rc-type.type-free { background: #eef7f2; color: #1a6030; }
.hk-rc-type.type-spring { background: #f0eaf8; color: #6a30a8; }
.hk-rc-type.type-desert { background: #fef5e7; color: #a06010; }
.hk-rc-type.type-wild { background: #f3e8ff; color: #7a30b0; }

.hk-rc-section {
  font-size: 13px;
  color: var(--hk-hint);
  margin-bottom: 10px;
}

.hk-rc-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.hk-rc-species {
  color: var(--hk-mid);
  font-weight: 600;
}

.hk-rc-months {
  color: var(--hk-hint);
}

.hk-rc-arrow {
  margin-left: auto;
  color: var(--hk-faint);
  font-size: 16px;
  transition: transform .15s;
}

.hk-river-card:hover .hk-rc-arrow {
  transform: translateX(3px);
  color: var(--hk-mid);
}

/* No results */
.hk-no-results {
  text-align: center;
  padding: 60px 24px;
  color: var(--hk-hint);
}

.hk-no-results h3 {
  font-family: var(--hk-serif);
  font-size: 24px;
  color: var(--hk-text);
  margin: 0 0 8px;
}

/* Live conditions float */
.hk-live-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--hk-dark);
  color: #fff;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 999;
  box-shadow: 0 4px 16px rgba(10,37,48,.25);
  transition: background .15s;
}

.hk-live-float:hover {
  background: var(--hk-mid);
  color: #fff;
}

.hk-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulse-dot 2s infinite;
}

/* ── Rivers Page Responsive ──────────────────────────────── */
@media (max-width: 900px) {
  .hk-hero-stats {
    gap: 12px;
  }
  .hk-hs {
    padding: 0 16px;
  }
  .hk-hs-val {
    font-size: 22px;
  }
  .hk-filter-inner {
    gap: 10px;
  }
  .hk-river-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hk-rivers-page .hk-hero {
    padding: 48px 20px 36px;
  }
  .hk-hero-stats {
    flex-wrap: wrap;
    gap: 8px;
  }
  .hk-hs-div {
    display: none;
  }
  .hk-hs {
    flex: 0 0 calc(50% - 4px);
    padding: 10px 0;
    background: rgba(255,255,255,.06);
    border-radius: 8px;
  }
  .hk-filter-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .hk-fi-div {
    display: none;
  }
  .hk-results-count {
    margin-left: 0;
  }
  .hk-feat-card {
    flex: 0 0 220px;
  }
}


/* ============================================================
   27. Lakes Index Page (extends Rivers CSS)
   ============================================================ */
.hk-lakes-page { font-family: var(--hk-sans); color: var(--hk-text); }
.hk-lakes-body { max-width: 1100px; margin: 0 auto; padding: 36px 24px 64px; }

.hk-lake-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.hk-lake-card {
  display: block;
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: 12px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}

.hk-lake-card:hover {
  border-color: var(--hk-mid);
  box-shadow: 0 4px 16px rgba(10,37,48,.08);
  color: inherit;
}

.hk-lc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.hk-lc-name { font-family: var(--hk-serif); font-size: 18px; font-weight: 600; color: var(--hk-text); }
.hk-lc-type { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; }
.hk-lc-type.type-reservoir { background: #e8f6fb; color: #1a5f78; }
.hk-lc-type.type-natural { background: #eef7f2; color: #1a6030; }
.hk-lc-type.type-tribal { background: #f3e8ff; color: #7a30b0; }
.hk-lc-type.type-national { background: #fff3e0; color: #a05820; }
.hk-lc-region { font-size: 13px; color: var(--hk-hint); margin-bottom: 10px; }
.hk-lc-bottom { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.hk-lc-species { color: var(--hk-mid); font-weight: 600; }
.hk-lc-best { color: var(--hk-hint); }
.hk-lc-arrow { margin-left: auto; color: var(--hk-faint); font-size: 16px; transition: transform .15s; }
.hk-lake-card:hover .hk-lc-arrow { transform: translateX(3px); color: var(--hk-mid); }

@media (max-width: 900px) {
  .hk-lake-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   28. Individual Water Page (Lake + River detail pages)
   ============================================================ */
.hk-lake-page, .hk-river-page { font-family: var(--hk-sans); color: var(--hk-text); }

/* ── Hero (individual water) ─────────────────────────────── */
.hk-lake-page .hk-hero,
.hk-river-page .hk-hero {
  background: linear-gradient(160deg, #0a2530 0%, #1a5f78 55%, #2585a3 100%);
  padding: 48px 24px 40px;
  position: relative;
}
.hk-breadcrumb { font-size: 13px; color: rgba(255,255,255,.45); margin-bottom: 12px; }
.hk-breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; }
.hk-breadcrumb a:hover { color: #fff; }
.hk-hero-badge { display: inline-block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); padding: 4px 12px; border-radius: 100px; margin-bottom: 12px; }
.hk-hero-name { font-family: var(--hk-serif); font-size: clamp(28px, 4.5vw, 42px); font-weight: 600; color: #fff; margin: 0 0 8px; line-height: 1.15; }
.hk-hero-region { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.6; margin-bottom: 24px; max-width: 640px; }

/* Stats row in individual water hero */
.hk-lake-page .hk-hero-stats,
.hk-river-page .hk-hero-stats { display: flex; flex-wrap: wrap; gap: 0; }
.hk-stat { display: flex; flex-direction: column; align-items: center; padding: 0 20px; }
/* Stat boxes have a light/white background on the dark hero — use dark text */
.hk-lake-page .hk-stat-val,
.hk-river-page .hk-stat-val { font-family: var(--hk-serif); font-size: 18px; font-weight: 600; color: var(--hk-text); line-height: 1.2; text-align: center; }
.hk-lake-page .hk-stat-lbl,
.hk-river-page .hk-stat-lbl { font-size: 11px; color: var(--hk-hint); margin-top: 3px; text-align: center; text-transform: uppercase; letter-spacing: .06em; }
/* Fallback white for stats NOT on individual water pages (homepage etc.) */
.hk-stat-val { font-family: var(--hk-serif); font-size: 18px; font-weight: 600; color: #fff; line-height: 1.2; text-align: center; }
.hk-stat-lbl { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 3px; text-align: center; }
.hk-stat + .hk-stat { border-left: 1px solid rgba(255,255,255,.12); }

/* ── Page Body: Main + Sidebar ───────────────────────────── */
@media (min-width: 901px) {
	.hk-page-body { max-width: 1100px; margin: 0 auto; padding: 32px 24px 64px; display: grid; grid-template-columns: 1fr 320px; gap: 40px; }
}
.hk-main { min-width: 0; }
.hk-sidebar { min-width: 0; }

/* ── Sections ────────────────────────────────────────────── */
.hk-section { margin-bottom: 32px; }
.hk-section-head { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--hk-border); }
.hk-lake-page .hk-section-title,
.hk-river-page .hk-section-title { font-family: var(--hk-serif); font-size: 22px; font-weight: 600; color: var(--hk-text); margin: 0; }

/* Overview text */
.hk-overview { font-size: 15px; line-height: 1.8; color: var(--hk-muted); white-space: pre-line; }

/* ── Techniques ──────────────────────────────────────────── */
.hk-tech-list { display: flex; flex-direction: column; gap: 16px; }
.hk-tech-item { display: flex; gap: 14px; padding: 14px; background: var(--hk-pale); border-radius: 10px; }
.hk-tech-icon { font-size: 24px; flex-shrink: 0; width: 40px; text-align: center; }
.hk-tech-name { font-weight: 700; font-size: 15px; color: var(--hk-text); margin-bottom: 3px; }
.hk-tech-desc { font-size: 13px; color: var(--hk-muted); line-height: 1.6; }

/* ── Hatch Chart — legacy table markup (lake pages) ─────── */
.hk-hatch-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.hk-hatch-table tr + tr { border-top: 1px solid var(--hk-border); }
.hk-hatch-table .hk-hi-name {
  display: table-cell;
  font-size: 13px;
  font-weight: 600;
  color: var(--hk-text);
  padding: 10px 12px 10px 0;
  white-space: nowrap;
  width: 155px;
  vertical-align: middle;
}
.hk-hi-bar { padding: 10px 0; vertical-align: middle; }
.hk-hm-row { display: flex; gap: 3px; }
.hk-hatch-table .hk-hm-cell {
  flex: 1;
  height: 26px;
  border-radius: 4px;
  min-width: 0;
}

/* ── Hatch Chart — div/grid markup (river pages) ─────────── */
.hk-hatch-chart { width: 100%; }

.hk-hatch-months {
  display: grid;
  grid-template-columns: 155px repeat(12, 1fr);
  gap: 2px;
  font-size: 10px;
  color: var(--hk-hint);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 5px;
}
.hk-hatch-months .hk-hm-cur { color: var(--hk-mid); font-weight: 700; }

.hk-hatch-row {
  display: grid;
  grid-template-columns: 155px 1fr;
  gap: 4px;
  margin-bottom: 3px;
  align-items: center;
}

.hk-hatch-chart .hk-hi-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hk-text);
  white-space: nowrap;
  padding-right: 8px;
  line-height: 1.3;
}
.hk-hi-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hk-hm-cells {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
}

/* shared cell styles for grid/div context */
.hk-hatch-chart .hk-hm-cell {
  height: 26px;
  border-radius: 4px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
  color: transparent;
}
.hk-hm-cell.hk-peak {
  background: var(--hk-cell-color, var(--hk-mid));
  color: rgba(255,255,255,.92);
}
.hk-hm-cell.hk-on {
  background: var(--hk-cell-color, var(--hk-mid));
  opacity: .42;
  color: rgba(255,255,255,.85);
}
.hk-hm-cell.hk-off {
  background: var(--hk-border);
  opacity: .5;
}
.hk-hm-cell.hk-now {
  outline: 2px solid var(--hk-mid);
  outline-offset: -2px;
  border-radius: 4px;
}
/* Only truly inactive cells go blank with just the outline */
.hk-hm-cell.hk-off.hk-now {
  opacity: 1;
  background: transparent;
}
/* Active and peak cells keep their color + text, just get the outline */
.hk-hm-cell.hk-on.hk-now {
  opacity: 1;
}
.hk-hm-cell.hk-peak.hk-now { color: rgba(255,255,255,.95); }

/* shared legend */
.hk-hatch-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 11px;
  color: var(--hk-hint);
}
.hk-hl-item { display: flex; align-items: center; gap: 6px; }
.hk-hl-swatch {
  width: 20px;
  height: 14px;
  border-radius: 3px;
  background: var(--hk-mid);
  flex-shrink: 0;
}
.hk-hl-swatch.hl-peak { opacity: 1; }
.hk-hl-swatch.hl-on   { opacity: .42; }
.hk-hl-swatch.hl-off  { background: var(--hk-border); opacity: .5; }
.hk-hl-swatch.hl-now  { background: transparent; border: 2px solid var(--hk-mid); }

/* Hide old-style legend items (.hk-hl-dot) if JS didn't clean them up */
.hk-hl-dot { display: none !important; }
.hk-hatch-legend:not(:has(.hk-hl-swatch)) { display: none !important; }
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hk-fly-card {
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: 12px;
  padding: 16px;
}
.hk-fly-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
}
.hk-fly-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hk-fly-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--hk-text);
}
.hk-fly-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hk-fly-chip {
  font-size: 12px;
  color: var(--hk-dark);
  background: var(--hk-pale);
  border: 1px solid var(--hk-border);
  border-radius: 100px;
  padding: 3px 11px;
  line-height: 1.5;
}

/* keep old .hk-fly-grid working on any pages that still use it */
.hk-fly-grid { display: flex; flex-direction: column; gap: 14px; }
.hk-fly-group { padding: 12px 0; border-bottom: 1px solid var(--hk-border); }
.hk-fly-group:last-child { border-bottom: none; }
.hk-fly-hatch { font-size: 13px; font-weight: 700; color: var(--hk-dark); margin-bottom: 4px; }
.hk-fly-patterns { font-size: 13px; color: var(--hk-muted); line-height: 1.7; }
.hk-fp { color: var(--hk-mid); }

/* responsive */
@media (max-width: 640px) {
  .hk-fly-card-grid { grid-template-columns: 1fr; }
  .hk-hatch-months,
  .hk-hatch-row { grid-template-columns: 110px repeat(12, 1fr); }
  .hk-hatch-row { grid-template-columns: 110px 1fr; }
  .hk-hi-name { font-size: 11px; }
  .hk-hm-cell { height: 20px; font-size: 7px; }
}

/* ── Species Cards ───────────────────────────────────────── */
.hk-sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.hk-sp-card { background: var(--hk-pale); border-radius: 10px; padding: 16px; }
.hk-sp-name { font-family: var(--hk-serif); font-size: 17px; font-weight: 600; color: var(--hk-text); margin-bottom: 6px; }
.hk-sp-detail { font-size: 13px; color: var(--hk-muted); line-height: 1.6; }

/* ── Access Points ───────────────────────────────────────── */
.hk-access-list { display: flex; flex-direction: column; gap: 14px; }
.hk-access-item { padding: 14px; background: var(--hk-pale); border-radius: 10px; }
.hk-access-name { font-size: 14px; font-weight: 700; color: var(--hk-text); margin-bottom: 4px; }
.hk-access-desc { font-size: 13px; color: var(--hk-muted); line-height: 1.6; }

/* ── Pro Tips ────────────────────────────────────────────── */
.hk-tips-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.hk-tip-item { display: flex; gap: 10px; font-size: 14px; line-height: 1.7; color: var(--hk-muted); }
.hk-tip-bullet { color: var(--hk-mid); font-weight: 700; flex-shrink: 0; }

/* ── Regulations ─────────────────────────────────────────── */
.hk-regs-text { font-size: 14px; line-height: 1.7; color: var(--hk-muted); padding: 14px; background: #fef8f0; border: 1px solid #f0dcc0; border-radius: 10px; }

/* ── Sidebar CTAs ────────────────────────────────────────── */
.hk-submit-cta, .hk-guide-cta {
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.hk-submit-cta { background: linear-gradient(135deg, #0a2530, #1a5f78); color: #fff; }
.hk-guide-cta { background: var(--hk-pale); border: 1px solid var(--hk-border); }
.hk-submit-cta h3, .hk-guide-cta h3 { font-family: var(--hk-serif); font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.hk-submit-cta h3 { color: #fff; }
.hk-guide-cta h3 { color: var(--hk-text); }
.hk-submit-cta p { font-size: 13px; color: rgba(255,255,255,.65); margin: 0 0 14px; line-height: 1.6; }
.hk-guide-cta p { font-size: 13px; color: var(--hk-muted); margin: 0 0 14px; line-height: 1.6; }
.hk-submit-cta a { display: inline-block; background: #c07a1e; color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; }
.hk-submit-cta a:hover { background: #a86818; color: #fff; }
.hk-guide-cta a { display: inline-block; background: var(--hk-dark); color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; }
.hk-guide-cta a:hover { background: var(--hk-deep); color: #fff; }

/* ── Related Waters ──────────────────────────────────────── */
.hk-rel-grid { display: flex; flex-direction: column; gap: 8px; }
.hk-rel-card { display: block; padding: 12px 14px; background: #fff; border: 1px solid var(--hk-border); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color .15s; }
.hk-rel-card:hover { border-color: var(--hk-mid); color: inherit; }
.hk-rel-card.hk-rel-river { border-left: 3px solid var(--hk-mid); }
.hk-rel-name { display: block; font-family: var(--hk-serif); font-size: 15px; font-weight: 600; color: var(--hk-text); margin-bottom: 2px; }
.hk-rel-why { display: block; font-size: 12px; color: var(--hk-hint); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .hk-page-body { grid-template-columns: 1fr; }
  .hk-stat { padding: 8px 12px; }
  .hk-stat + .hk-stat { border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
  .hk-lake-page .hk-hero-stats,
  .hk-river-page .hk-hero-stats { flex-wrap: wrap; gap: 4px; }
  .hk-stat { flex: 0 0 calc(50% - 2px); }
  .hk-hi-name { width: 100px; font-size: 12px; }
}

@media (max-width: 640px) {
  .hk-lake-page .hk-hero,
  .hk-river-page .hk-hero { padding: 36px 20px 28px; }
  .hk-sp-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   29. Login Page
   ============================================================ */
.hk-login-page {
  min-height: 100vh;
  background: linear-gradient(160deg, #f0f8fc 0%, #ddf0f8 50%, #c8e8f4 100%);
  font-family: var(--hk-sans);
  display: flex;
  flex-direction: column;
}

/* ── Top bar ── */
.hk-login-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(37,133,163,.1);
}
.hk-login-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.hk-login-logo-text {
  font-family: var(--hk-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--hk-dark);
  letter-spacing: -.3px;
}
.hk-login-logo-text span { color: var(--hk-light); }
.hk-login-bar-link {
  font-size: 13px;
  color: var(--hk-mid);
  text-decoration: none;
  font-weight: 500;
}
.hk-login-bar-link:hover { color: var(--hk-dark); }

/* ── Main layout ── */
.hk-login-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 64px;
}
.hk-login-wrap {
  width: 100%;
  max-width: 440px;
}

/* ── Above card ── */
.hk-login-above { margin-bottom: 24px; }
.hk-login-headline {
  font-family: var(--hk-serif);
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 600;
  color: var(--hk-text);
  line-height: 1.1;
  margin: 0 0 10px;
}
.hk-login-headline em {
  font-style: italic;
  color: var(--hk-mid);
}
.hk-login-sub {
  font-size: 15px;
  color: var(--hk-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── Card ── */
.hk-login-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(10,37,48,.1), 0 1px 4px rgba(10,37,48,.06);
  overflow: hidden;
}
.hk-login-card-head {
  padding: 24px 28px 0;
  border-bottom: 1px solid var(--hk-border);
  padding-bottom: 20px;
  margin-bottom: 4px;
}
.hk-login-card-title {
  font-family: var(--hk-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--hk-text);
  margin-bottom: 4px;
}
.hk-login-card-sub {
  font-size: 13px;
  color: var(--hk-hint);
}

/* ── UM form overrides ── */
.hk-login-card .um { padding: 24px 28px 28px !important; }
.hk-login-card .um .um-field-label label {
  font-family: var(--hk-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--hk-muted) !important;
  margin-bottom: 6px !important;
}
.hk-login-card .um input[type="text"],
.hk-login-card .um input[type="email"],
.hk-login-card .um input[type="password"] {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1.5px solid var(--hk-border) !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  font-family: var(--hk-sans) !important;
  color: var(--hk-text) !important;
  background: #fafcfe !important;
  transition: border-color .15s !important;
  box-shadow: none !important;
  outline: none !important;
}
.hk-login-card .um input[type="text"]:focus,
.hk-login-card .um input[type="email"]:focus,
.hk-login-card .um input[type="password"]:focus {
  border-color: var(--hk-mid) !important;
  background: #fff !important;
}
.hk-login-card .um .um-button,
.hk-login-card .um input[type="submit"] {
  width: 100% !important;
  padding: 13px !important;
  background: var(--hk-mid) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: var(--hk-sans) !important;
  cursor: pointer !important;
  transition: background .15s !important;
  letter-spacing: .01em !important;
  margin-top: 4px !important;
}
.hk-login-card .um .um-button:hover,
.hk-login-card .um input[type="submit"]:hover {
  background: var(--hk-dark) !important;
}
/* Keep me signed in checkbox */
.hk-login-card .um .um-field-checkbox label,
.hk-login-card .um .um-field-checkbox span {
  font-size: 13px !important;
  color: var(--hk-muted) !important;
  font-family: var(--hk-sans) !important;
}
/* Forgot password link */
.hk-login-card .um .um-login-forgot {
  display: block !important;
  text-align: center !important;
  margin-top: 14px !important;
  font-size: 13px !important;
  color: var(--hk-mid) !important;
  text-decoration: none !important;
}
.hk-login-card .um .um-login-forgot:hover { color: var(--hk-dark) !important; }
/* Register button (secondary) */
.hk-login-card .um .um-button.um-alt {
  background: var(--hk-pale) !important;
  color: var(--hk-dark) !important;
  border: 1.5px solid var(--hk-border) !important;
}
.hk-login-card .um .um-button.um-alt:hover {
  background: var(--hk-border) !important;
}
/* Error messages */
.hk-login-card .um .um-notice.red {
  background: #fef0e8 !important;
  border: 1px solid #f5c4a0 !important;
  color: #8a3010 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  margin-bottom: 16px !important;
}

/* ── Below card ── */
.hk-login-below {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--hk-muted);
}
.hk-login-below a {
  color: var(--hk-mid);
  font-weight: 600;
  text-decoration: none;
}
.hk-login-below a:hover { color: var(--hk-dark); }

/* ── Trust bar ── */
.hk-login-trust {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(37,133,163,.12);
}
.hk-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--hk-hint);
  font-weight: 500;
}
.hk-trust-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hk-light);
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .hk-login-bar { padding: 14px 20px; }
  .hk-login-main { padding: 32px 16px 48px; }
  .hk-login-card-head { padding: 20px 20px 16px; }
  .hk-login-card .um { padding: 20px 20px 24px !important; }
  .hk-login-trust { gap: 12px; }
}


/* ============================================================
   30. Account / Dashboard Page
   ============================================================ */
.hk-dash-page {
  font-family: var(--hk-sans);
  color: var(--hk-text);
  background: #f4f8fa;
  min-height: 100vh;
  /* Local CSS vars used in JS-rendered sections */
  --b7:   #f4f8fa;
  --pale: #d8eef6;
  --ink:  #0f2830;
  --mist: #6a8f9a;
}

/* ── Login Wall ─────────────────────────────────────────── */
.hk-login-wall {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 48px 24px;
  text-align: center;
}
.hk-lw-icon  { font-size: 48px; margin-bottom: 16px; }
.hk-lw-title { font-family: var(--hk-serif); font-size: 28px; font-weight: 600; color: var(--hk-text); margin-bottom: 10px; }
.hk-lw-sub   { font-size: 15px; color: var(--hk-muted); max-width: 400px; line-height: 1.6; margin-bottom: 28px; }
.hk-lw-btns  { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hk-lw-primary {
  background: var(--hk-mid); color: #fff; padding: 12px 28px;
  border-radius: 9px; font-size: 14px; font-weight: 700;
  text-decoration: none; transition: background .15s;
}
.hk-lw-primary:hover { background: var(--hk-dark); color: #fff; }
.hk-lw-ghost {
  background: #fff; color: var(--hk-dark); padding: 12px 28px;
  border-radius: 9px; font-size: 14px; font-weight: 700;
  border: 1.5px solid var(--hk-border); text-decoration: none; transition: background .15s;
}
.hk-lw-ghost:hover { background: var(--hk-pale); color: var(--hk-dark); }

/* ── Profile Hero ───────────────────────────────────────── */
.hk-profile-hero {
  background: linear-gradient(135deg, #0a2530 0%, #1a5f78 60%, #2585a3 100%);
  padding: 40px 24px 36px;
  position: relative;
  overflow: hidden;
}
.hk-profile-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(74,168,196,.2) 0%, transparent 60%);
  pointer-events: none;
}
.hk-ph-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hk-avatar {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.hk-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hk-ph-info { flex: 1; min-width: 0; }
.hk-ph-name  { font-family: var(--hk-serif); font-size: 26px; font-weight: 600; color: #fff; line-height: 1.2; }
.hk-ph-role  { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 3px; }
.hk-ph-badge { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); padding: 3px 10px; border-radius: 100px; }
.hk-ph-stats { display: flex; gap: 0; margin-left: auto; }
.hk-ph-stat  { display: flex; flex-direction: column; align-items: center; padding: 0 20px; }
.hk-ph-stat + .hk-ph-stat { border-left: 1px solid rgba(255,255,255,.12); }
.hk-ph-stat-val { font-family: var(--hk-serif); font-size: 24px; font-weight: 600; color: #fff; line-height: 1; }
.hk-ph-stat-lbl { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; }

/* ── Dashboard Body ─────────────────────────────────────── */
.hk-dash-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 64px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
.hk-dash-main  { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hk-dash-sidebar { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ── Tabs ───────────────────────────────────────────────── */
.hk-tabs {
  display: flex;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: 12px;
  padding: 5px;
}
.hk-tab {
  flex: 1;
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: var(--hk-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--hk-hint);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.hk-tab:hover  { color: var(--hk-dark); background: var(--hk-pale); }
.hk-tab.active { background: var(--hk-mid); color: #fff; }
.hk-tab-panel  { display: none; }
.hk-tab-panel.active { display: block; }

/* ── Section Cards ──────────────────────────────────────── */
.hk-section-card {
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: 14px;
  overflow: hidden;
}
.hk-sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hk-border);
}
.hk-sc-title  { font-size: 14px; font-weight: 700; color: var(--hk-text); }
.hk-sc-action { font-size: 13px; font-weight: 600; color: var(--hk-mid); text-decoration: none; }
.hk-sc-action:hover { color: var(--hk-dark); }
.hk-sc-body   { padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; }

/* ── Report Rows ────────────────────────────────────────── */
.hk-my-report {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hk-border);
  cursor: pointer;
  transition: background .12s;
  border-radius: 4px;
}
.hk-my-report:last-child { border-bottom: none; }
.hk-my-report:hover { background: var(--hk-pale); padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.hk-mr-date   { display: flex; flex-direction: column; align-items: center; width: 38px; flex-shrink: 0; }
.hk-mr-date-m { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--hk-mid); letter-spacing: .06em; }
.hk-mr-date-d { font-size: 20px; font-weight: 700; color: var(--hk-text); line-height: 1.1; }
.hk-mr-body   { flex: 1; min-width: 0; }
.hk-mr-title  { font-size: 14px; font-weight: 600; color: var(--hk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-mr-meta   { font-size: 12px; color: var(--hk-hint); margin-top: 2px; }
.hk-mr-stats  { display: flex; gap: 10px; margin-top: 4px; }
.hk-mr-stat   { font-size: 12px; color: var(--hk-muted); }
.hk-mr-likes  { font-size: 13px; color: var(--hk-faint); flex-shrink: 0; }

/* ── Quick Actions ──────────────────────────────────────── */
.hk-qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hk-qa {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px;
  background: var(--hk-pale);
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s;
}
.hk-qa:hover    { background: var(--hk-border); }
.hk-qa-icon     { font-size: 20px; margin-bottom: 4px; }
.hk-qa-lbl      { font-size: 13px; font-weight: 700; color: var(--hk-text); }
.hk-qa-sub      { font-size: 11px; color: var(--hk-hint); }

/* ── Skeleton Loading ───────────────────────────────────── */
.hk-dash-skel {
  height: 52px;
  background: linear-gradient(90deg, #eef6fb 25%, #dff0f8 50%, #eef6fb 75%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: hk-skel-shimmer 1.4s infinite;
  margin-bottom: 8px;
}
@keyframes hk-skel-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Empty State ────────────────────────────────────────── */
.hk-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--hk-hint);
  font-size: 14px;
}
.hk-empty p  { margin: 0 0 12px; }
.hk-empty a  { display: inline-block; background: var(--hk-mid); color: #fff; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; }
.hk-empty a:hover { background: var(--hk-dark); color: #fff; }

/* ── Badge Card ─────────────────────────────────────────── */
.hk-badge-card {
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: 14px;
  padding: 18px 18px 20px;
}
.hk-badge-title { font-size: 13px; font-weight: 700; color: var(--hk-text); margin-bottom: 4px; }
.hk-badge-sub   { font-size: 12px; color: var(--hk-hint); margin-bottom: 16px; line-height: 1.5; }
.hk-badge-tiers { display: flex; flex-direction: column; gap: 10px; }
.hk-badge-tier  { display: flex; align-items: center; gap: 10px; }
.hk-bt-dot      { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.hk-bt-info     { flex: 1; }
.hk-bt-name     { font-size: 13px; font-weight: 600; color: var(--hk-text); }
.hk-bt-req      { font-size: 11px; color: var(--hk-hint); }
.hk-bt-check    { font-size: 13px; color: var(--hk-hint); flex-shrink: 0; font-weight: 700; }
.hk-badge-tier:has(.hk-bt-check:contains("✓")) .hk-bt-name { color: var(--hk-mid); }

/* ── Side Card ──────────────────────────────────────────── */
.hk-side-card {
  background: #fff;
  border: 1px solid var(--hk-border);
  border-radius: 14px;
  overflow: hidden;
}
.hk-sdc-head  { padding: 14px 16px; border-bottom: 1px solid var(--hk-border); }
.hk-sdc-title { font-size: 13px; font-weight: 700; color: var(--hk-text); }
.hk-sdc-body  { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.hk-profile-field { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hk-pf-label  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hk-faint); flex-shrink: 0; }
.hk-pf-val    { font-size: 13px; color: var(--hk-text); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.hk-edit-profile {
  display: block;
  text-align: center;
  padding: 9px;
  background: var(--hk-pale);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hk-mid);
  text-decoration: none;
  margin-top: 4px;
  transition: background .15s;
}
.hk-edit-profile:hover { background: var(--hk-border); color: var(--hk-dark); }
.hk-logout-btn {
  width: 100%;
  padding: 9px;
  background: transparent;
  border: 1.5px solid #f5c4a0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #c45c10;
  cursor: pointer;
  font-family: var(--hk-sans);
  transition: all .15s;
}
.hk-logout-btn:hover { background: #fef0e6; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .hk-dash-body { grid-template-columns: 1fr; }
  .hk-ph-stats  { margin-left: 0; width: 100%; justify-content: flex-start; }
  .hk-ph-inner  { gap: 16px; }
}
@media (max-width: 640px) {
  .hk-profile-hero { padding: 28px 20px 24px; }
  .hk-dash-body    { padding: 20px 16px 48px; }
  .hk-qa-grid      { grid-template-columns: 1fr 1fr; }
  .hk-tabs         { overflow-x: auto; }
  .hk-tab          { flex: 0 0 auto; }

  /* Stats — wrap into compact rows on mobile */
  .hk-ph-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .hk-ph-stats {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-left: 0;
    background: rgba(255,255,255,.06);
    border-radius: 10px;
    overflow: hidden;
  }
  .hk-ph-stat {
    flex: 1 1 30%;
    min-width: 80px;
    padding: 10px 12px;
    border-right: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-sizing: border-box;
  }
  .hk-ph-stat + .hk-ph-stat { border-left: none; }
  .hk-ph-stat-val { font-size: 18px; }
  .hk-ph-stat-lbl { font-size: 10px; white-space: nowrap; }
}


/* ============================================================
   31. Standalone page cleanup
   ============================================================ */
/* Hide the custom login bar — the main site nav handles navigation */
.hk-login-bar { display: none !important; }


/* ── Login page: kill white gap under nav, pull form up ──── */
body.hk-page-login .site-content,
body.hk-page-login #primary,
body.hk-page-login .entry-content,
body.hk-page-login article,
body.hk-page-login .content-area {
  padding: 0 !important;
  margin: 0 !important;
}
body.hk-page-login .hk-login-page {
  margin-top: 0 !important;
}
body.hk-page-login .hk-login-main {
  padding-top: 28px !important;
}


/* ── Account/Edit page: light blue gradient background matching old design ── */
body.hk-page-account-edit .site-content,
body.page-id-1190 .site-content,
body[class*="page-template"] .hk-ep-wrap {
  background: transparent;
}
/* Apply gradient to the page background when on account/edit */
body.hk-page-account-edit,
body.hk-page-account-edit #page {
  background: linear-gradient(160deg, #f4fbfe 0%, #dff2fa 50%, #cce8f5 100%) !important;
  min-height: 100vh;
}
/* Also scope to the ep-wrap directly in case body class isn't set */
.hk-ep-wrap {
  background: linear-gradient(160deg, #f4fbfe 0%, #dff2fa 50%, #cce8f5 100%);
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50% + 24px);
  padding-right: calc(50vw - 50% + 24px);
  min-height: 100vh;
}


/* ============================================================
   31. SHARED PAGE COMPONENTS (Reports, Conditions, Hatch, Guides)
   ============================================================ */

/* ── Shared: dark hero header ─────────────────────────────── */
.hk-reports-header,
.hk-cond-header,
.hk-hatch-header,
.hk-guides-header {
  background: linear-gradient(135deg, #071c24 0%, #0a2d3a 50%, #0d3545 100%);
  padding: 52px 0 44px;
  position: relative;
  overflow: hidden;
}
.hk-reports-header::before,
.hk-cond-header::before,
.hk-hatch-header::before,
.hk-guides-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(37,133,163,.12) 0%, transparent 70%);
  pointer-events: none;
}

.hk-reports-header-top,
.hk-cond-header-inner,
.hk-hatch-header-inner,
.hk-guides-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.hk-hatch-header-inner,
.hk-guides-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* ── Shared: page label ───────────────────────────────────── */
.hk-reports-label,
.hk-cond-label,
.hk-hatch-label,
.hk-g-label {
  font-family: var(--hk-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hk-light);
  margin-bottom: 10px;
}

/* ── Shared: hero title ───────────────────────────────────── */
.hk-reports-title,
.hk-cond-title,
.hk-hatch-title,
.hk-g-title {
  font-family: var(--hk-serif);
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.3px;
  margin: 0 0 10px;
}
.hk-reports-title em,
.hk-cond-title em,
.hk-hatch-title em,
.hk-g-title em {
  font-style: italic;
  color: var(--hk-light);
}

/* ── Shared: hero subtitle ────────────────────────────────── */
.hk-cond-sub,
.hk-hatch-sub,
.hk-g-sub {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
  max-width: 560px;
  margin: 0;
}

/* ── Shared: filter bar ───────────────────────────────────── */
.hk-filter-bar,
.hk-guides-filters-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 32px;
}
.hk-guides-filters {
  background: #fff;
  border-bottom: 1px solid var(--hk-border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.hk-filter-bar {
  background: #fff;
  border-bottom: 1px solid var(--hk-border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.hk-filter-label,
.hk-state-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hk-hint);
  white-space: nowrap;
}
.hk-filter-div {
  width: 1px;
  height: 20px;
  background: var(--hk-border);
}

/* ── Shared: filter selects ───────────────────────────────── */
.hk-fsel-sm {
  height: 34px;
  padding: 0 30px 0 12px;
  border: 1.5px solid var(--hk-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--hk-sans);
  color: var(--hk-text);
  background: #f9fdff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236a8f9a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color .15s;
}
.hk-fsel-sm:focus { outline: none; border-color: var(--hk-mid); }
.hk-fsel-sm.hk-active { border-color: var(--hk-mid); background-color: var(--hk-pale); color: var(--hk-dark); font-weight: 600; }

/* ── Shared: sort buttons ─────────────────────────────────── */
.hk-sort-btn {
  height: 34px;
  padding: 0 14px;
  border: 1.5px solid var(--hk-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--hk-sans);
  font-weight: 500;
  color: var(--hk-muted);
  background: #f9fdff;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.hk-sort-btn:hover { border-color: var(--hk-mid); color: var(--hk-mid); }
.hk-sort-btn.active {
  background: var(--hk-mid);
  border-color: var(--hk-mid);
  color: #fff;
  font-weight: 600;
}

/* ── Shared: sidebar cards ────────────────────────────────── */
.hk-scard {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: var(--hk-radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.hk-scard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hk-muted);
  border-bottom: 1px solid var(--hk-border);
  background: #f9fdff;
}
.hk-scard-title { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--hk-muted); }
.hk-scard-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--hk-pale);
  color: var(--hk-mid);
  border: 1px solid var(--hk-border);
  border-radius: 100px;
  padding: 2px 8px;
}

/* ── Shared: status pills ─────────────────────────────────── */
.hk-rc-pill, .pill-good, .pill-low, .pill-high, .pill-load {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 3px 9px;
  border-radius: 100px;
}
.pill-good  { background: #eef7f2; color: #1a6030; }
.pill-low   { background: #e8f0fb; color: #185fa5; }
.pill-high  { background: #fef0e6; color: #c45c10; }
.pill-load  { background: var(--hk-pale); color: var(--hk-hint); }

/* ── Shared: stars ────────────────────────────────────────── */
.s-on  { color: #e8a830; }
.s-off { color: #d8eef6; }

/* ── Shared: search input ─────────────────────────────────── */
.hk-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 160px;
  max-width: 280px;
}
.hk-search-icon {
  position: absolute;
  left: 10px;
  font-size: 13px;
  pointer-events: none;
  opacity: .5;
}
.hk-search-wrap input,
.hk-search {
  width: 100%;
  height: 34px;
  padding: 0 12px 0 32px;
  border: 1.5px solid var(--hk-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--hk-sans);
  background: #f9fdff;
  color: var(--hk-text);
  transition: border-color .15s;
}
.hk-search { padding: 0 12px; }
.hk-search-wrap input:focus, .hk-search:focus {
  outline: none;
  border-color: var(--hk-mid);
}

/* ── Shared: page body layout ─────────────────────────────── */
.hk-reports-body,
.hk-guides-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: start;
}
.hk-sidebar,
.hk-guides-sidebar {
  position: sticky;
  top: 70px;
}


/* ============================================================
   32. REPORTS PAGE
   ============================================================ */

.hk-reports-page { background: #f4f8fa; min-height: 100vh; }

/* Header top row */
.hk-reports-header-top {
  padding-bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.hk-reports-count {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  font-weight: 400;
  padding-bottom: 6px;
}

/* ── Report Card ──────────────────────────────────────────── */
.hk-feed { display: flex; flex-direction: column; gap: 12px; }

.hk-rcard {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: var(--hk-radius);
  cursor: pointer;
  transition: box-shadow .18s, border-color .18s, transform .18s;
  overflow: hidden;
}
.hk-rcard:hover {
  border-color: #b0d8ea;
  box-shadow: 0 4px 20px rgba(37,133,163,.1);
  transform: translateY(-1px);
}

/* Card head */
.hk-rc-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid #f0f8fb;
}
.hk-rc-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.8);
}
.hk-rc-meta h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--hk-text);
  margin: 0 0 2px;
  line-height: 1.3;
}
.hk-rc-meta p {
  font-size: 11px;
  color: var(--hk-hint);
  margin: 0;
}
.hk-rc-loc { margin-left: auto; text-align: right; }
.hk-rc-river {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hk-mid);
}
.hk-rc-section {
  font-size: 11px;
  color: var(--hk-hint);
  margin-top: 2px;
  text-align: right;
}

/* Card body */
.hk-rc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--hk-text);
  margin-bottom: 5px;
  line-height: 1.4;
}
.hk-rc-excerpt {
  font-size: 13px;
  color: var(--hk-muted);
  line-height: 1.55;
}

/* Card stats strip */
.hk-rc-stats {
  display: flex;
  border-top: 1px solid #f0f8fb;
  border-bottom: 1px solid #f0f8fb;
}
.hk-rc-stat {
  flex: 1;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-right: 1px solid #f0f8fb;
}
.hk-rc-stat:last-child { border-right: none; }
.hk-rc-stat.hl { background: #f4fbfe; }
.hk-rc-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hk-hint);
}
.hk-rc-stat-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--hk-text);
  line-height: 1.2;
}
.hk-rc-stat-val .u {
  font-size: 10px;
  font-weight: 400;
  color: var(--hk-hint);
}

/* Card footer */
.hk-rc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  flex-wrap: wrap;
  gap: 6px;
}
.hk-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
}
.hk-bg-sp { background: #f0f8eb; color: #3a7020; border: 1px solid #c8e0b8; }
.hk-bg-mt { background: var(--hk-pale); color: var(--hk-dark); border: 1px solid var(--hk-border); }
.hk-rc-acts { display: flex; gap: 4px; }
.hk-act-btn {
  height: 28px;
  padding: 0 10px;
  border: 1.5px solid var(--hk-border);
  border-radius: 7px;
  font-size: 12px;
  font-family: var(--hk-sans);
  color: var(--hk-hint);
  background: #f9fdff;
  cursor: pointer;
  transition: all .15s;
}
.hk-act-btn:hover { border-color: var(--hk-mid); color: var(--hk-mid); }
.hk-act-btn.liked { color: #c04040; border-color: #f0c0c0; background: #fef5f5; }

/* Skeleton */
.hk-skeleton { display: flex; flex-direction: column; gap: 12px; }
.hk-skel-card {
  height: 160px;
  background: linear-gradient(90deg, #e8f4fb 25%, #f4fbfe 50%, #e8f4fb 75%);
  background-size: 200% 100%;
  animation: hk-shimmer 1.5s infinite;
  border-radius: var(--hk-radius);
  border: 1.5px solid var(--hk-border);
}
@keyframes hk-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Empty / load more */
.hk-empty-state {
  text-align: center;
  padding: 48px 24px;
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: var(--hk-radius);
}
.hk-empty-state h3 { font-family: var(--hk-serif); font-size: 22px; font-style: italic; color: var(--hk-text); margin: 0 0 8px; }
.hk-empty-state p  { font-size: 13px; color: var(--hk-hint); margin: 0 0 16px; }
.hk-empty-state a  { display: inline-block; background: var(--hk-mid); color: #fff; padding: 9px 20px; border-radius: 9px; font-size: 13px; font-weight: 600; }
.hk-load-more { text-align: center; padding: 20px 0 4px; }
.hk-load-btn {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: 9px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hk-mid);
  cursor: pointer;
  transition: all .15s;
  font-family: var(--hk-sans);
}
.hk-load-btn:hover { background: var(--hk-mid); color: #fff; border-color: var(--hk-mid); }

/* Reports sidebar */
.hk-cta-card {
  background: linear-gradient(135deg, #071c24, #0d3545);
  border-radius: var(--hk-radius);
  padding: 20px;
  margin-bottom: 16px;
  border: 1.5px solid rgba(74,168,196,.2);
}
.hk-cta-title { font-family: var(--hk-serif); font-size: 20px; font-weight: 600; font-style: italic; color: #fff; margin-bottom: 6px; }
.hk-cta-title em { color: var(--hk-light); }
.hk-cta-sub { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.55; margin-bottom: 14px; }
.hk-cta-btn {
  display: block;
  background: #e8a830;
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s;
  letter-spacing: .02em;
}
.hk-cta-btn:hover { background: #c98820; color: #fff; }

/* Conditions sidebar widget */
.hk-cond-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hk-border);
  border-bottom: 1px solid var(--hk-border);
}
.hk-ci {
  background: #fff;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hk-ci-lbl { font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--hk-hint); }
.hk-ci-val { font-size: 20px; font-weight: 700; color: var(--hk-text); line-height: 1.2; }
.hk-ci-val .u { font-size: 10px; font-weight: 400; color: var(--hk-hint); }
.hk-ci-st { font-size: 11px; font-weight: 600; }
.hk-ci-st.good { color: #2d7a45; }
.hk-ci-st.fair { color: #a07020; }

/* Flow bar */
.hk-flow-bar { padding: 12px 16px; }
.hk-flow-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--hk-muted); margin-bottom: 8px; }
.hk-flow-track {
  position: relative;
  height: 8px;
  background: #e8f4fb;
  border-radius: 100px;
  overflow: visible;
  margin-bottom: 6px;
}
.hk-flow-fill { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg, #4aa8c4, #2585a3); border-radius: 100px; }
.hk-flow-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 14px;
  height: 14px;
  background: var(--hk-mid);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(37,133,163,.3);
}
.hk-flow-zones { display: flex; justify-content: space-between; font-size: 10px; color: var(--hk-hint); }

/* Hatches sidebar */
.hk-hatch-list { padding: 8px 0; }
.hk-hi { display: flex; align-items: center; gap: 8px; padding: 7px 16px; }
.hk-hi:hover { background: #f9fdff; }
.hk-hd { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hk-hi-name { font-size: 13px; color: var(--hk-text); flex: 1; }
.hk-hi-lbl { font-size: 11px; font-weight: 700; }

/* Top waters */
.hk-wl { display: flex; flex-direction: column; }
.hk-wl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  text-decoration: none;
  border-bottom: 1px solid #f0f8fb;
  transition: background .12s;
}
.hk-wl-item:last-child { border-bottom: none; }
.hk-wl-item:hover { background: #f4fbfe; }
.hk-wl-rank { font-size: 11px; font-weight: 700; color: var(--hk-hint); width: 22px; flex-shrink: 0; }
.hk-wl-name { font-size: 13px; color: var(--hk-text); font-weight: 500; flex: 1; }
.hk-wl-cnt  { font-size: 11px; color: var(--hk-hint); white-space: nowrap; }
.hk-stars   { display: flex; gap: 1px; font-size: 11px; flex-shrink: 0; }


/* ============================================================
   33. CONDITIONS PAGE
   ============================================================ */

.hk-cond-page { background: #f4f8fa; min-height: 100vh; }

/* Live badge */
.hk-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 5px 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}
.hk-live-dot {
  width: 7px;
  height: 7px;
  background: #4cd080;
  border-radius: 50%;
  flex-shrink: 0;
  animation: hk-pulse-g 2s ease-in-out infinite;
}
@keyframes hk-pulse-g { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

/* State bar */
.hk-state-bar {
  background: #fff;
  border-bottom: 1px solid var(--hk-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hk-state-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
}
.hk-state-btn {
  height: 32px;
  padding: 0 14px;
  border: 1.5px solid var(--hk-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--hk-sans);
  font-weight: 500;
  color: var(--hk-muted);
  background: #f9fdff;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.hk-state-btn:hover { border-color: var(--hk-mid); color: var(--hk-mid); }
.hk-state-btn.active { background: var(--hk-mid); border-color: var(--hk-mid); color: #fff; font-weight: 600; }

/* Body layout */
.hk-cond-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: start;
}
.hk-cond-sidebar { position: sticky; top: 70px; }

/* Region header */
.hk-region-head { margin-bottom: 18px; }
.hk-region-title { font-family: var(--hk-serif); font-size: 26px; font-weight: 600; font-style: italic; color: var(--hk-text); margin: 0 0 4px; }
.hk-region-sub { font-size: 13px; color: var(--hk-hint); }

/* River card grid */
.hk-river-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.hk-rc {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: var(--hk-radius);
  padding: 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  position: relative;
}
.hk-rc:hover { border-color: #b0d8ea; box-shadow: 0 3px 12px rgba(37,133,163,.1); }
.hk-rc.active { border-color: var(--hk-mid); background: #f4fbfe; box-shadow: 0 0 0 3px rgba(37,133,163,.1); }
.hk-rc-pill {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
}
.hk-rc .hk-rc-name { font-size: 14px; font-weight: 600; color: var(--hk-text); margin: 0 0 2px; padding-right: 50px; }
.hk-rc .hk-rc-section { font-size: 11px; color: var(--hk-hint); margin-bottom: 10px; }
.hk-rc .hk-rc-stats { display: flex; gap: 12px; }
.hk-rc .hk-rc-stat { display: flex; flex-direction: column; }
.hk-rc .hk-rc-stat-val { font-size: 16px; font-weight: 700; color: var(--hk-text); line-height: 1.2; }
.hk-rc .hk-rc-stat-lbl { font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hk-hint); }
.hk-rc-gauge { font-size: 10px; color: var(--hk-faint); margin-top: 8px; }

/* Detail panel */
.hk-detail {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: var(--hk-radius);
  overflow: hidden;
  min-height: 80px;
}
.hk-det-empty {
  padding: 28px;
  font-size: 13px;
  color: var(--hk-hint);
  text-align: center;
}
.hk-det-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--hk-border);
  background: #f9fdff;
}
.hk-det-title { font-size: 18px; font-weight: 700; color: var(--hk-text); margin-bottom: 3px; }
.hk-det-section { font-size: 12px; color: var(--hk-hint); }
.hk-det-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: var(--hk-border);
  border-bottom: 1px solid var(--hk-border);
}
.hk-ds {
  background: #fff;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hk-ds-lbl { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--hk-hint); }
.hk-ds-val { font-size: 26px; font-weight: 700; color: var(--hk-text); line-height: 1.2; }
.hk-ds-val .u { font-size: 12px; font-weight: 400; color: var(--hk-hint); }
.hk-ds-sub { font-size: 12px; font-weight: 600; }
.hk-ds-sub.good { color: #2d7a45; }

/* Range bar */
.hk-det-range { padding: 16px 20px; border-bottom: 1px solid var(--hk-border); }
.hk-det-range-lbl { font-size: 11px; font-weight: 600; color: var(--hk-hint); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em; }
.hk-range-bar-wrap {
  position: relative;
  height: 10px;
  background: #e8f0f8;
  border-radius: 100px;
  margin-bottom: 8px;
  overflow: visible;
}
.hk-range-ideal {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(45,122,69,.2);
  border: 1px solid rgba(45,122,69,.3);
  border-radius: 100px;
}
.hk-range-needle {
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 16px;
  height: 16px;
  background: var(--hk-mid);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(37,133,163,.4);
}
.hk-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--hk-hint); }
.hk-range-labels .cur { font-weight: 600; color: var(--hk-mid); }

/* USGS footer */
.hk-det-usgs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #f9fdff;
  border-bottom: 1px solid var(--hk-border);
}
.hk-det-usgs-id { font-size: 11px; color: var(--hk-hint); }
.hk-det-usgs-link { font-size: 12px; color: var(--hk-mid); font-weight: 600; text-decoration: none; }
.hk-det-usgs-link:hover { color: var(--hk-dark); }
.hk-det-river-link {
  display: block;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hk-mid);
  text-decoration: none;
  background: #f9fdff;
  transition: background .12s;
}
.hk-det-river-link:hover { background: var(--hk-pale); }

/* Sidebar all-rivers list */
.hk-all-list { max-height: 400px; overflow-y: auto; }
.hk-al-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f4f8fa;
  transition: background .12s;
}
.hk-al-item:last-child { border-bottom: none; }
.hk-al-item:hover { background: #f4fbfe; }
.hk-al-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hk-al-name { font-size: 12px; color: var(--hk-text); flex: 1; font-weight: 500; }
.hk-al-flow { font-size: 11px; color: var(--hk-hint); white-space: nowrap; }
.hk-al-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 100px;
}


/* ============================================================
   34. HATCH CHART PAGE
   ============================================================ */

.hk-hatch-page { background: #f4f8fa; min-height: 100vh; }

/* River selector */
.hk-hatch-controls { flex-shrink: 0; }
.hk-hatch-sel {
  height: 42px;
  padding: 0 40px 0 16px;
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 10px;
  font-size: 14px;
  font-family: var(--hk-sans);
  font-weight: 500;
  color: #fff;
  background: rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  min-width: 220px;
  transition: background .15s;
}
.hk-hatch-sel:focus { outline: none; background-color: rgba(255,255,255,.18); }
.hk-hatch-sel option { background: #0d3545; color: #fff; }

/* Body */
.hk-hatch-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 32px;
}

/* Month bar */
.hk-month-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.hk-mb {
  flex: 1;
  min-width: 48px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid var(--hk-border);
  border-radius: 8px;
  background: #fff;
  color: var(--hk-muted);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.hk-mb:hover { border-color: var(--hk-mid); color: var(--hk-mid); }
.hk-mb.now { border-color: var(--hk-mid); color: var(--hk-mid); font-weight: 700; outline: 2px solid rgba(37,133,163,.2); outline-offset: 1px; }
.hk-mb.active { background: var(--hk-mid); border-color: var(--hk-mid); color: #fff; }

/* Hatch grid card */
.hk-grid-card {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: var(--hk-radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.hk-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hk-border);
  background: #f9fdff;
  flex-wrap: wrap;
  gap: 10px;
}
.hk-grid-title { font-size: 13px; font-weight: 700; color: var(--hk-text); }
.hk-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hk-leg { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--hk-muted); }
.hk-leg-sw { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

/* Scrollable grid */
.hk-grid-wrap { overflow-x: auto; }
.hk-grid {
  display: grid;
  min-width: 700px;
  border-collapse: collapse;
}

/* Month header row */
.hk-month-hdr {
  padding: 8px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--hk-hint);
  letter-spacing: .05em;
  border-bottom: 1px solid var(--hk-border);
  background: #f9fdff;
}
.hk-month-hdr.cur { color: var(--hk-mid); background: var(--hk-pale); }

/* Insect label */
.hk-grid-lbl {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hk-text);
  border-bottom: 1px solid #f4f8fa;
  background: #fff;
}
.hk-grid-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Grid cells */
.hk-cell {
  padding: 5px 3px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  border-bottom: 1px solid #f4f8fa;
  border-left: 1px solid #f4f8fa;
  transition: opacity .1s;
}
.hk-cell.pk { color: rgba(255,255,255,.9); }
.hk-cell.on { color: rgba(255,255,255,.8); opacity: .5; }
.hk-cell.off { background: #f9fdff; color: transparent; }
.hk-cell.now-col { outline: 2px solid rgba(37,133,163,.25); outline-offset: -2px; }

/* Fly recommendations */
.hk-fly-section {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: var(--hk-radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.hk-fly-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--hk-border);
  background: #f9fdff;
}
.hk-fly-title { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--hk-muted); }
.hk-fly-month { font-size: 12px; color: var(--hk-hint); }
.hk-fly-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--hk-border); }
.hk-fly-card { background: #fff; padding: 14px 16px; }
.hk-fly-ins { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.hk-fly-ins-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hk-fly-ins-name { font-size: 13px; font-weight: 700; color: var(--hk-text); }
.hk-fly-patterns { display: flex; flex-direction: column; gap: 5px; }
.hk-fp { display: flex; justify-content: space-between; align-items: center; }
.hk-fp-name { font-size: 12px; color: var(--hk-text); }
.hk-fp-size { font-size: 11px; color: var(--hk-hint); font-style: italic; }

/* Insect cards */
.hk-insect-section { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.hk-ins-card {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: var(--hk-radius);
  overflow: hidden;
}
.hk-ins-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hk-border);
  background: #f9fdff;
}
.hk-ins-card-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.hk-ins-card-name { font-size: 13px; font-weight: 700; color: var(--hk-text); flex: 1; }
.hk-ins-card-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 100px; white-space: nowrap; }
.hk-ins-card-body { padding: 12px 16px 8px; font-size: 13px; color: var(--hk-muted); line-height: 1.55; }
.hk-ins-card-tip {
  padding: 8px 16px 12px;
  font-size: 12px;
  color: var(--hk-muted);
  font-style: italic;
  line-height: 1.5;
}


/* ============================================================
   35. GUIDES PAGE
   ============================================================ */

.hk-guides-page { background: #f4f8fa; min-height: 100vh; }

/* Sort row inside guides filters */
.hk-sort-row { display: flex; gap: 4px; }
.hk-clear-btn {
  height: 34px;
  padding: 0 12px;
  border: 1.5px solid #f0c0b0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #c04020;
  background: #fff8f5;
  cursor: pointer;
  font-family: var(--hk-sans);
  display: none;
  transition: all .15s;
}
.hk-clear-btn.visible { display: inline-flex; align-items: center; gap: 4px; }
.hk-clear-btn:hover { background: #fee0d8; }
.hk-guides-count { font-size: 12px; color: var(--hk-hint); margin-left: auto; white-space: nowrap; }

/* Guide card grid */
.hk-guides-grid { display: flex; flex-direction: column; gap: 16px; }

.hk-gcard {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: var(--hk-radius);
  overflow: hidden;
  transition: box-shadow .18s, border-color .18s;
}
.hk-gcard:hover { border-color: #b0d8ea; box-shadow: 0 4px 20px rgba(37,133,163,.1); }
.hk-gcard.featured { border-color: #e8c860; box-shadow: 0 0 0 2px rgba(232,168,48,.1); }
.hk-gcard.hk-hidden { display: none; }

/* Guide card head */
.hk-gc-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f0f8fb;
}
.hk-gc-av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.8);
}
.hk-gc-info { flex: 1; min-width: 0; }
.hk-gc-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.hk-gc-name { font-size: 16px; font-weight: 700; color: var(--hk-text); }
.hk-gc-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
}
.badge-featured { background: #fef5e7; color: #c07a1e; border: 1px solid #f0d890; }
.badge-verified { background: #eef7f2; color: #1a6030; border: 1px solid #b8d9c5; }
.hk-gc-biz { font-size: 13px; font-weight: 600; color: var(--hk-mid); margin-bottom: 3px; }
.hk-gc-exp { font-size: 12px; color: var(--hk-hint); margin-bottom: 5px; }
.hk-gc-stars { display: flex; align-items: center; gap: 6px; }
.hk-gc-star-row { display: flex; gap: 1px; font-size: 13px; }
.hk-gc-review-cnt { font-size: 12px; color: var(--hk-hint); }
.hk-gc-actions { display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; }
.hk-gc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--hk-sans);
  border: 1.5px solid;
  transition: all .15s;
  text-decoration: none;
}
.btn-book { background: #e8a830; border-color: #e8a830; color: #fff; }
.btn-book:hover { background: #c98820; border-color: #c98820; color: #fff; }
.btn-profile { background: #fff; border-color: var(--hk-border); color: var(--hk-muted); }
.btn-profile:hover { border-color: var(--hk-mid); color: var(--hk-mid); }

/* Guide card body */
.hk-gc-body { padding: 16px 20px; }
.hk-gc-bio { font-size: 13px; color: var(--hk-muted); line-height: 1.6; margin: 0 0 14px; }
.hk-gc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.hk-gc-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
}
.tag-river   { background: var(--hk-pale); color: var(--hk-dark); border: 1px solid var(--hk-border); }
.tag-species { background: #f0f8eb; color: #3a7020; border: 1px solid #c8e0b8; }
.tag-method  { background: #f8f4fc; color: #6040a0; border: 1px solid #d8c8f0; }

/* Guide stats */
.hk-gc-stats {
  display: flex;
  gap: 1px;
  background: var(--hk-border);
  border: 1px solid var(--hk-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.hk-gs {
  flex: 1;
  background: #f9fdff;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hk-gs-val { font-size: 17px; font-weight: 700; color: var(--hk-text); }
.hk-gs-lbl { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--hk-hint); }

/* Guide recent reports */
.hk-gc-reports { background: #f9fdff; border: 1px solid var(--hk-border); border-radius: 9px; overflow: hidden; }
.hk-gc-rep-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hk-hint);
  padding: 8px 14px;
  border-bottom: 1px solid var(--hk-border);
}
.hk-gc-rep-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid #f4f8fa;
  font-size: 12px;
}
.hk-gc-rep-item:last-child { border-bottom: none; }
.hk-gc-rep-water { font-weight: 600; color: var(--hk-text); }
.hk-gc-rep-detail { color: var(--hk-hint); }

/* No results */
.hk-no-results { display: none; text-align: center; padding: 48px 24px; background: #fff; border: 1.5px solid var(--hk-border); border-radius: var(--hk-radius); }
.hk-no-results.visible { display: block; }
.hk-no-results h3 { font-family: var(--hk-serif); font-size: 22px; font-style: italic; color: var(--hk-text); margin: 0 0 8px; }
.hk-no-results p  { font-size: 13px; color: var(--hk-hint); margin: 0; }
.hk-no-results-reset { background: none; border: none; font-size: 13px; color: var(--hk-mid); font-weight: 600; cursor: pointer; padding: 0; font-family: var(--hk-sans); }

/* Guides sidebar CTA */
.hk-guide-cta {
  background: linear-gradient(135deg, #071c24, #0d3545);
  border-radius: var(--hk-radius);
  padding: 20px;
  margin-bottom: 16px;
  border: 1.5px solid rgba(74,168,196,.2);
}
.hk-guide-cta-title { font-family: var(--hk-serif); font-size: 20px; font-weight: 600; font-style: italic; color: #fff; margin-bottom: 6px; }
.hk-guide-cta-title em { color: var(--hk-light); }
.hk-guide-cta-sub { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.55; margin-bottom: 10px; }
.hk-guide-cta-price { font-size: 12px; color: rgba(255,255,255,.45); margin-bottom: 14px; }
.hk-guide-cta-btn {
  display: block;
  width: 100%;
  background: #e8a830;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--hk-sans);
  transition: background .15s;
  letter-spacing: .02em;
}
.hk-guide-cta-btn:hover { background: #c98820; }

/* Sidebar river list */
.hk-fr-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f4f8fa;
  transition: background .12s;
}
.hk-fr-item:last-child { border-bottom: none; }
.hk-fr-item:hover { background: #f4fbfe; }
.hk-fr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hk-mid); flex-shrink: 0; }
.hk-fr-name { font-size: 13px; color: var(--hk-text); flex: 1; font-weight: 500; }
.hk-fr-cnt  { font-size: 11px; color: var(--hk-hint); }

/* ── Guide Listing Modal ──────────────────────────────────── */
.hk-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,28,36,.7);
  backdrop-filter: blur(6px);
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
@media (min-width: 600px) { .hk-modal-overlay { align-items: center; } }
.hk-modal-overlay.open { opacity: 1; pointer-events: auto; }
.hk-modal {
  background: #fff;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  border-radius: 16px 16px 0 0;
  overflow-y: auto;
  transform: translateY(40px);
  transition: transform .3s cubic-bezier(.22,.68,0,1.2);
  box-shadow: 0 -8px 48px rgba(7,28,36,.3);
}
@media (min-width: 600px) { .hk-modal { border-radius: 16px; transform: scale(.95); max-height: 90vh; }
  .hk-modal-overlay.open .hk-modal { transform: scale(1); } }
.hk-modal-overlay.open .hk-modal { transform: translateY(0); }

.hkg-mhead {
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--hk-border);
  background: linear-gradient(135deg, #071c24, #0d3545);
  position: relative;
}
.hkg-mhead-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hk-sans);
  transition: background .15s;
}
.hkg-mhead-close:hover { background: rgba(255,255,255,.22); }
.hkg-mhead-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hk-light); margin-bottom: 6px; }
.hkg-mhead-title { font-family: var(--hk-serif); font-size: 26px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.hkg-mhead-title em { font-style: italic; color: var(--hk-light); }
.hkg-mhead-sub { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.55; margin: 0; }

/* Plans */
.hkg-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 20px 24px 0; }
.hkg-plan {
  border: 2px solid var(--hk-border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.hkg-plan:hover { border-color: var(--hk-mid); }
.hkg-plan.selected { border-color: var(--hk-mid); background: #f4fbfe; }
.hkg-plan-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--hk-border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: transparent;
  margin-bottom: 8px;
  transition: all .15s;
}
.hkg-plan.selected .hkg-plan-radio { border-color: var(--hk-mid); background: var(--hk-mid); color: #fff; }
.hkg-plan-name { font-size: 14px; font-weight: 700; color: var(--hk-text); margin-bottom: 2px; }
.hkg-plan-price { font-size: 20px; font-weight: 800; color: var(--hk-text); margin-bottom: 4px; }
.hkg-plan-price span { font-size: 13px; font-weight: 400; color: var(--hk-hint); }
.hkg-plan-tag { font-size: 11px; color: #c07a1e; font-weight: 600; margin-bottom: 4px; }
.hkg-plan-desc { font-size: 12px; color: var(--hk-muted); line-height: 1.45; }

/* Modal form */
.hkg-form { padding: 0 24px; }
.hkg-fsec-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hk-mid);
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--hk-border);
  margin-bottom: 14px;
}
.hkg-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.hkg-ff { margin-bottom: 12px; }
.hkg-ff:last-child { margin-bottom: 0; }
.hkg-flabel { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hk-muted); margin-bottom: 5px; }
.hkg-finput,
.hkg-fselect,
.hkg-ftextarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--hk-border);
  border-radius: 9px;
  font-size: 13px;
  font-family: var(--hk-sans);
  color: var(--hk-text);
  background: #f9fdff;
  transition: border-color .15s;
}
.hkg-finput:focus, .hkg-fselect:focus, .hkg-ftextarea:focus { outline: none; border-color: var(--hk-mid); background: #fff; }
.hkg-finput.err, .hkg-fselect.err, .hkg-ftextarea.err { border-color: #e05030; background: #fff8f5; }
.hkg-fselect { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236a8f9a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px; background-color: #f9fdff; cursor: pointer; }
.hkg-ftextarea { height: 100px; resize: vertical; line-height: 1.6; }
.hkg-checkrow { display: flex; flex-wrap: wrap; gap: 6px; }
.hkg-checkrow label { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--hk-text); cursor: pointer; padding: 4px 8px; border: 1.5px solid var(--hk-border); border-radius: 7px; background: #f9fdff; transition: border-color .12s; }
.hkg-checkrow label:hover { border-color: var(--hk-mid); }
.hkg-checkrow input[type=checkbox] { accent-color: var(--hk-mid); width: 13px; height: 13px; }
.hkg-fhint { font-size: 11px; color: var(--hk-hint); margin-top: 4px; }

/* Submit bar */
.hkg-submit-bar {
  padding: 16px 24px 24px;
  border-top: 1px solid var(--hk-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hkg-submit-note { font-size: 12px; color: var(--hk-muted); line-height: 1.5; }
.hkg-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 28px;
  background: var(--hk-mid);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--hk-sans);
  transition: background .15s;
  align-self: flex-end;
}
.hkg-submit-btn:hover { background: var(--hk-dark); }
.hkg-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Success state */
.hkg-success { display: none; text-align: center; padding: 48px 24px; }
.hkg-success.show { display: block; }
.hkg-success-icon { font-size: 48px; margin-bottom: 16px; }
.hkg-success h3 { font-family: var(--hk-serif); font-size: 28px; font-style: italic; color: var(--hk-text); margin: 0 0 10px; }
.hkg-success p { font-size: 14px; color: var(--hk-muted); line-height: 1.6; margin: 0 0 24px; }
.hkg-success-close {
  background: var(--hk-mid);
  color: #fff;
  border: none;
  padding: 11px 28px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--hk-sans);
}


/* ============================================================
   36. RESPONSIVE — All new pages
   ============================================================ */

@media (max-width: 900px) {
  .hk-reports-body,
  .hk-cond-body,
  .hk-guides-body { grid-template-columns: 1fr; padding: 20px 20px; }
  .hk-sidebar,
  .hk-cond-sidebar,
  .hk-guides-sidebar { position: static; }
  .hk-hatch-header-inner,
  .hk-guides-header-inner { flex-direction: column; gap: 16px; }
  .hk-hatch-sel { min-width: 100%; }
  .hk-det-stats { grid-template-columns: repeat(3,1fr); }
  .hk-river-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .hk-gc-head { flex-wrap: wrap; }
  .hk-gc-actions { flex-direction: row; width: 100%; }
  .hk-gc-btn { flex: 1; }
}

@media (max-width: 600px) {
  .hk-reports-header,
  .hk-cond-header,
  .hk-hatch-header,
  .hk-guides-header { padding: 36px 0 28px; }
  .hk-reports-header-top,
  .hk-cond-header-inner,
  .hk-hatch-header-inner,
  .hk-guides-header-inner { padding: 0 20px; }
  .hk-filter-bar,
  .hk-guides-filters-inner { padding: 10px 16px; }
  .hk-state-inner { padding: 8px 16px; }
  .hk-hatch-body,
  .hk-reports-body,
  .hk-cond-body,
  .hk-guides-body { padding: 16px; }
  .hk-det-stats { grid-template-columns: 1fr 1fr; }
  .hkg-frow { grid-template-columns: 1fr; }
  .hkg-plans { grid-template-columns: 1fr; }
  .hk-rc-stats { flex-wrap: wrap; }
  .hk-rc-stat { min-width: 45%; }
  .hk-insect-section { grid-template-columns: 1fr; }
  .hk-fly-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   37. BLOG — Index page
   ============================================================ */

.hk-blog-page { background: #f4f8fa; min-height: 100vh; }

/* ── Hero header ──────────────────────────────────────────── */
.hk-blog-header {
  background: linear-gradient(135deg, #071c24 0%, #0a2d3a 50%, #0d3545 100%);
  padding: 52px 0 44px;
  position: relative;
  overflow: hidden;
}
.hk-blog-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 80% 50%, rgba(37,133,163,.1) 0%, transparent 70%);
  pointer-events: none;
}
.hk-blog-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hk-blog-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hk-light);
  margin-bottom: 10px;
}
.hk-blog-title {
  font-family: var(--hk-serif);
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.3px;
  margin: 0 0 10px;
}
.hk-blog-title em { font-style: italic; color: var(--hk-light); }
.hk-blog-sub {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  max-width: 520px;
  line-height: 1.6;
  margin: 0;
}
.hk-blog-count {
  font-size: 13px;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
  padding-bottom: 4px;
}

/* ── Category filter bar ──────────────────────────────────── */
.hk-blog-cats {
  background: #fff;
  border-bottom: 1px solid var(--hk-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 0;
  z-index: 40;
}
.hk-blog-cats-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
}
.hk-cat-btn {
  height: 32px;
  padding: 0 14px;
  border: 1.5px solid var(--hk-border);
  border-radius: 100px;
  font-size: 12px;
  font-family: var(--hk-sans);
  font-weight: 600;
  color: var(--hk-muted);
  background: #f9fdff;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.hk-cat-btn:hover { border-color: var(--hk-mid); color: var(--hk-mid); }
.hk-cat-btn.active { background: var(--hk-mid); border-color: var(--hk-mid); color: #fff; }

/* ── Body layout ──────────────────────────────────────────── */
.hk-blog-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 32px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}
.hk-blog-sidebar {
  position: sticky;
  top: 60px;
}

/* ── Featured post ────────────────────────────────────────── */
.hk-blog-featured {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  cursor: pointer;
  transition: box-shadow .2s, border-color .2s;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 280px;
}
.hk-blog-featured:hover {
  border-color: #b0d8ea;
  box-shadow: 0 6px 28px rgba(37,133,163,.12);
}
.hk-blog-feat-img {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a2d3a, #1a5f78);
  min-height: 260px;
}
.hk-blog-feat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.hk-blog-featured:hover .hk-blog-feat-img img { transform: scale(1.03); }
.hk-blog-feat-img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  opacity: .3;
}
.hk-feat-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--hk-mid);
  color: #fff;
  padding: 4px 10px;
  border-radius: 100px;
}
.hk-blog-feat-content {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hk-blog-feat-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hk-mid);
  margin-bottom: 10px;
}
.hk-blog-feat-title {
  font-family: var(--hk-serif);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 600;
  color: var(--hk-text);
  line-height: 1.25;
  letter-spacing: -.2px;
  margin-bottom: 12px;
}
.hk-blog-feat-excerpt {
  font-size: 14px;
  color: var(--hk-muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 20px;
}
.hk-blog-feat-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hk-blog-feat-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--hk-pale);
  flex-shrink: 0;
  border: 2px solid var(--hk-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--hk-mid);
}
.hk-blog-feat-av img { width: 100%; height: 100%; object-fit: cover; }
.hk-blog-feat-byline { display: flex; flex-direction: column; gap: 1px; }
.hk-blog-feat-author { font-size: 12px; font-weight: 600; color: var(--hk-text); }
.hk-blog-feat-date   { font-size: 11px; color: var(--hk-hint); }
.hk-blog-feat-read   {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--hk-mid);
  background: var(--hk-pale);
  border: 1px solid var(--hk-border);
  border-radius: 100px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* ── Post grid ────────────────────────────────────────────── */
.hk-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

/* ── Post card ────────────────────────────────────────────── */
.hk-post-card {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .18s, border-color .18s, transform .18s;
  display: flex;
  flex-direction: column;
}
.hk-post-card:hover {
  border-color: #b0d8ea;
  box-shadow: 0 4px 20px rgba(37,133,163,.1);
  transform: translateY(-2px);
}
.hk-pc-img {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a2d3a, #1a5f78);
  flex-shrink: 0;
}
.hk-pc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.hk-post-card:hover .hk-pc-img img { transform: scale(1.05); }
.hk-pc-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  opacity: .25;
}
.hk-pc-cat {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 9px;
  border-radius: 100px;
  background: rgba(7,28,36,.6);
  backdrop-filter: blur(4px);
}
.hk-pc-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hk-pc-title {
  font-family: var(--hk-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--hk-text);
  line-height: 1.35;
  letter-spacing: -.1px;
  margin-bottom: 7px;
}
.hk-pc-excerpt {
  font-size: 12px;
  color: var(--hk-muted);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hk-pc-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #f0f8fb;
  padding-top: 10px;
}
.hk-pc-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hk-pale);
  border: 1.5px solid var(--hk-border);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--hk-mid);
}
.hk-pc-av img { width: 100%; height: 100%; object-fit: cover; }
.hk-pc-author { font-size: 11px; font-weight: 600; color: var(--hk-text); }
.hk-pc-date   { font-size: 11px; color: var(--hk-hint); margin-left: auto; }
.hk-pc-read   { font-size: 10px; color: var(--hk-hint); white-space: nowrap; }

/* ── Load more / skeleton ──────────────────────────────────── */
.hk-blog-skel { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.hk-blog-skel-card {
  height: 280px;
  background: linear-gradient(90deg, #e8f4fb 25%, #f4fbfe 50%, #e8f4fb 75%);
  background-size: 200% 100%;
  animation: hk-shimmer 1.5s infinite;
  border-radius: 14px;
  border: 1.5px solid var(--hk-border);
}

/* ── Blog sidebar ─────────────────────────────────────────── */
.hk-blog-cta {
  background: linear-gradient(135deg, #071c24, #0d3545);
  border-radius: var(--hk-radius);
  padding: 20px;
  margin-bottom: 16px;
  border: 1.5px solid rgba(74,168,196,.2);
}
.hk-blog-cta-title { font-family: var(--hk-serif); font-size: 18px; font-weight: 600; font-style: italic; color: #fff; margin-bottom: 6px; }
.hk-blog-cta-title em { color: var(--hk-light); }
.hk-blog-cta-sub { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.5; margin-bottom: 12px; }
.hk-blog-cta-btn {
  display: block;
  background: #e8a830;
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s;
}
.hk-blog-cta-btn:hover { background: #c98820; color: #fff; }

/* Sidebar category list */
.hk-sb-cat-list { display: flex; flex-direction: column; }
.hk-sb-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  border-bottom: 1px solid #f4f8fa;
  cursor: pointer;
  transition: background .12s;
  text-decoration: none;
}
.hk-sb-cat-item:last-child { border-bottom: none; }
.hk-sb-cat-item:hover { background: #f4fbfe; }
.hk-sb-cat-name { font-size: 13px; color: var(--hk-text); font-weight: 500; }
.hk-sb-cat-cnt  { font-size: 11px; color: var(--hk-hint); background: #f4f8fa; padding: 2px 7px; border-radius: 100px; }

/* Sidebar recent posts */
.hk-sb-post-item {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #f4f8fa;
  cursor: pointer;
  transition: background .12s;
  text-decoration: none;
}
.hk-sb-post-item:last-child { border-bottom: none; }
.hk-sb-post-item:hover { background: #f4fbfe; }
.hk-sb-post-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #0a2d3a, #1a5f78);
}
.hk-sb-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hk-sb-post-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: .3;
}
.hk-sb-post-info { display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.hk-sb-post-title { font-size: 12px; font-weight: 600; color: var(--hk-text); line-height: 1.4; }
.hk-sb-post-date  { font-size: 11px; color: var(--hk-hint); }

/* ── Blog empty state ─────────────────────────────────────── */
.hk-blog-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 60px 24px;
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: 16px;
}
.hk-blog-empty h3 { font-family: var(--hk-serif); font-size: 24px; font-style: italic; color: var(--hk-text); margin: 0 0 8px; }
.hk-blog-empty p  { font-size: 14px; color: var(--hk-hint); margin: 0; }


/* ============================================================
   38. BLOG — Single post (GeneratePress template styling)
   ============================================================ */

/* Only fires on single posts */
.single-post .site-content,
.single-post .content-area {
  background: #f4f8fa;
}

/* Post header above content */
.single-post .hk-post-header {
  background: linear-gradient(135deg, #071c24 0%, #0a2d3a 60%, #0d3545 100%);
  padding: 52px 0 48px;
  position: relative;
  overflow: hidden;
}
.single-post .hk-post-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 75% 50%, rgba(37,133,163,.1) 0%, transparent 70%);
  pointer-events: none;
}
.single-post .hk-post-header-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}
.single-post .hk-post-header-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hk-light);
  margin-bottom: 12px;
  text-decoration: none;
  display: inline-block;
}
.single-post .hk-post-header-title {
  font-family: var(--hk-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.3px;
  margin: 0 0 16px;
}
.single-post .hk-post-header-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.single-post .hk-post-header-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.single-post .hk-post-header-av img { width: 100%; height: 100%; object-fit: cover; }
.single-post .hk-post-header-byline { display: flex; flex-direction: column; gap: 2px; }
.single-post .hk-post-header-author { font-size: 13px; font-weight: 600; color: #fff; }
.single-post .hk-post-header-date   { font-size: 12px; color: rgba(255,255,255,.55); }
.single-post .hk-post-header-read   {
  margin-left: auto;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  padding: 4px 12px;
}

/* Post featured image */
.single-post .hk-post-hero-img {
  max-width: 820px;
  margin: -24px auto 0;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}
.single-post .hk-post-hero-img img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(7,28,36,.2);
  display: block;
}

/* Post body layout */
.single-post .entry-content,
.single-post .hk-post-content {
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 32px 48px;
}

/* Post content typography */
.single-post .entry-content p {
  font-size: 16px;
  line-height: 1.8;
  color: #1a2c35;
  margin-bottom: 20px;
}
.single-post .entry-content h2 {
  font-family: var(--hk-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--hk-text);
  margin: 36px 0 14px;
  line-height: 1.25;
}
.single-post .entry-content h3 {
  font-family: var(--hk-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--hk-text);
  margin: 28px 0 10px;
}
.single-post .entry-content h4 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hk-mid);
  margin: 24px 0 8px;
}
.single-post .entry-content ul,
.single-post .entry-content ol {
  padding-left: 22px;
  margin-bottom: 20px;
}
.single-post .entry-content li {
  font-size: 16px;
  line-height: 1.7;
  color: #1a2c35;
  margin-bottom: 6px;
}
.single-post .entry-content a {
  color: var(--hk-mid);
  text-decoration: underline;
  text-decoration-color: var(--hk-border);
  text-underline-offset: 3px;
  transition: color .15s;
}
.single-post .entry-content a:hover { color: var(--hk-dark); }
.single-post .entry-content strong { font-weight: 700; color: var(--hk-text); }
.single-post .entry-content em { font-style: italic; }
.single-post .entry-content img {
  border-radius: 10px;
  margin: 8px 0 16px;
  box-shadow: 0 2px 12px rgba(7,28,36,.08);
}
.single-post .entry-content blockquote {
  border-left: 3px solid var(--hk-mid);
  margin: 24px 0;
  padding: 14px 20px;
  background: var(--hk-pale);
  border-radius: 0 10px 10px 0;
  font-family: var(--hk-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--hk-text);
  line-height: 1.6;
}
.single-post .entry-content blockquote cite {
  display: block;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  color: var(--hk-muted);
  margin-top: 8px;
}
.single-post .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 14px;
}
.single-post .entry-content th {
  background: #071c24;
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.single-post .entry-content td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--hk-border);
  color: var(--hk-text);
  line-height: 1.5;
}
.single-post .entry-content tr:nth-child(even) td { background: #f9fdff; }

/* Inline tip box */
.single-post .entry-content .hk-tip {
  background: #f0f8eb;
  border: 1.5px solid #c8e0b8;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 20px 0;
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: #2a5020;
  line-height: 1.55;
}
.single-post .entry-content .hk-tip::before { content: '💡'; flex-shrink: 0; margin-top: 1px; }
.single-post .entry-content .hk-callout {
  background: var(--hk-pale);
  border: 1.5px solid var(--hk-border);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 20px 0;
  font-size: 14px;
  color: var(--hk-muted);
  line-height: 1.6;
}

/* Author box */
.hk-author-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: 14px;
  padding: 20px;
  max-width: 820px;
  margin: 0 auto 32px;
  padding-left: 32px;
  padding-right: 32px;
}
.hk-author-box-av {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--hk-border);
  background: var(--hk-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--hk-mid);
}
.hk-author-box-av img { width: 100%; height: 100%; object-fit: cover; }
.hk-author-box-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hk-mid);
  margin-bottom: 3px;
}
.hk-author-box-name { font-size: 16px; font-weight: 700; color: var(--hk-text); margin-bottom: 5px; }
.hk-author-box-bio  { font-size: 13px; color: var(--hk-muted); line-height: 1.55; }

/* Related posts */
.hk-related {
  max-width: 820px;
  margin: 0 auto 48px;
  padding: 0 32px;
}
.hk-related-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hk-muted);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hk-border);
}
.hk-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.hk-related-card {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow .15s, border-color .15s;
}
.hk-related-card:hover { border-color: #b0d8ea; box-shadow: 0 3px 14px rgba(37,133,163,.1); }
.hk-related-thumb {
  height: 100px;
  background: linear-gradient(135deg, #0a2d3a, #1a5f78);
  overflow: hidden;
}
.hk-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hk-related-body { padding: 10px 12px; }
.hk-related-cat   { font-size: 10px; font-weight: 700; color: var(--hk-mid); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.hk-related-title-text {
  font-family: var(--hk-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--hk-text);
  line-height: 1.35;
}


/* ============================================================
   39. BLOG — Responsive
   ============================================================ */

@media (max-width: 1000px) {
  .hk-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .hk-blog-skel { grid-template-columns: repeat(2, 1fr); }
  .hk-blog-body { grid-template-columns: 1fr; padding: 20px; }
  .hk-blog-sidebar { position: static; }
  .hk-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .hk-blog-header { padding: 36px 0 28px; }
  .hk-blog-header-inner { padding: 0 20px; flex-direction: column; gap: 8px; align-items: flex-start; }
  .hk-blog-cats-inner { padding: 8px 16px; }
  .hk-blog-body { padding: 16px; }
  .hk-blog-featured { grid-template-columns: 1fr; }
  .hk-blog-feat-img { min-height: 200px; }
  .hk-blog-grid { grid-template-columns: 1fr; }
  .hk-blog-skel { grid-template-columns: 1fr; }
  .hk-related-grid { grid-template-columns: 1fr; }
  .single-post .hk-post-header-inner { padding: 0 20px; }
  .single-post .entry-content,
  .single-post .hk-post-content,
  .hk-author-box,
  .hk-related { padding-left: 20px; padding-right: 20px; }
  .hk-author-box { flex-direction: column; }
}


/* ============================================================
   40. SINGLE POST — Cleanup & Comments
   ============================================================ */

/* Hide GP default entry header (we inject our own) */
.single-post .entry-header { display: none !important; }

/* Hide GP entry footer (cats + prev/next nav) */
.single-post .entry-footer { display: none !important; }
.single-post .post-navigation { display: none !important; }

/* Content area max-width and spacing */
.single-post .site-main { background: #f4f8fa; }
.single-post article.post { background: transparent; }
.single-post .entry-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 32px 20px;
  background: #fff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 2px 12px rgba(7,28,36,.06);
}

/* Author box spacing */
.hk-author-box {
  max-width: 760px;
  margin: 24px auto;
  padding: 20px 24px;
}

/* Related posts spacing */
.hk-related {
  max-width: 760px;
  margin: 0 auto 40px;
  padding: 0 0;
}

/* ── Comments ─────────────────────────────────────────────── */
.single-post .comments-area {
  max-width: 760px;
  margin: 0 auto 48px;
  padding: 0 0;
  background: transparent;
}
.single-post .comments-title {
  font-family: var(--hk-serif);
  font-size: 22px;
  font-weight: 600;
  font-style: italic;
  color: var(--hk-text);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hk-border);
}
/* Individual comments */
.single-post .comment-list { list-style: none; padding: 0; margin: 0 0 28px; }
.single-post .comment-list li { margin: 0; }
.single-post .comment-body {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.single-post .comment-author .fn {
  font-size: 14px;
  font-weight: 700;
  color: var(--hk-text);
}
.single-post .comment-author a { color: var(--hk-text); text-decoration: none; }
.single-post .comment-meta {
  font-size: 12px;
  color: var(--hk-hint);
  margin-bottom: 8px;
}
.single-post .comment-meta a { color: var(--hk-hint); text-decoration: none; }
.single-post .comment-content p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--hk-muted);
  margin: 0;
}
.single-post .reply a {
  font-size: 12px;
  font-weight: 600;
  color: var(--hk-mid);
  text-decoration: none;
}
/* Avatar */
.single-post .comment-author img {
  border-radius: 50%;
  border: 2px solid var(--hk-border);
}

/* Comment form */
.single-post .comment-respond {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: 14px;
  padding: 24px;
}
.single-post .comment-reply-title {
  font-family: var(--hk-serif);
  font-size: 20px;
  font-weight: 600;
  font-style: italic;
  color: var(--hk-text);
  margin: 0 0 18px;
}
.single-post .comment-form label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hk-muted);
  margin-bottom: 5px;
}
.single-post .comment-form input[type="text"],
.single-post .comment-form input[type="email"],
.single-post .comment-form input[type="url"],
.single-post .comment-form textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--hk-border);
  border-radius: 9px;
  font-size: 14px;
  font-family: var(--hk-sans);
  color: var(--hk-text);
  background: #f9fdff;
  transition: border-color .15s;
  box-sizing: border-box;
}
.single-post .comment-form input:focus,
.single-post .comment-form textarea:focus {
  outline: none;
  border-color: var(--hk-mid);
  background: #fff;
}
.single-post .comment-form textarea { height: 120px; resize: vertical; line-height: 1.6; }
.single-post .comment-form .comment-form-comment { margin-bottom: 14px; }
.single-post .comment-form .comment-form-author,
.single-post .comment-form .comment-form-email,
.single-post .comment-form .comment-form-url { margin-bottom: 12px; }
.single-post .form-submit { margin: 0; }
.single-post .form-submit .submit {
  background: var(--hk-mid);
  color: #fff;
  border: none;
  padding: 11px 28px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--hk-sans);
  transition: background .15s;
}
.single-post .form-submit .submit:hover { background: var(--hk-dark); }
.single-post .logged-in-as {
  font-size: 13px;
  color: var(--hk-muted);
  margin-bottom: 14px;
}
.single-post .logged-in-as a { color: var(--hk-mid); }
.single-post .comment-notes {
  font-size: 12px;
  color: var(--hk-hint);
  margin-bottom: 14px;
}
/* Post Comment button override */
.single-post #submit {
  background: var(--hk-mid) !important;
  color: #fff !important;
  border: none !important;
  padding: 11px 28px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: var(--hk-sans) !important;
  transition: background .15s !important;
}
.single-post #submit:hover { background: var(--hk-dark) !important; }

/* Responsive */
@media (max-width: 700px) {
  .single-post .entry-content { padding: 24px 20px 16px; border-radius: 0; }
  .hk-author-box { margin: 16px 20px; }
  .hk-related { margin: 0 20px 32px; }
  .single-post .comments-area { margin: 0 20px 32px; }
}


/* ============================================================
   41. SEO PAGES — Standard page content styling
   ============================================================ */

/* Apply to all standard pages that aren't custom templates */
.page:not(.page-template-elementor_canvas) .site-main,
.page:not(.page-template-elementor_canvas) .content-area {
  background: #f4f8fa;
}

/* Content container */
.page:not(.page-template-elementor_canvas) .entry-content {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 32px 48px;
  background: #fff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 2px 12px rgba(7,28,36,.06);
}

/* Page hero header — auto-generated from page title */
.page:not(.page-template-elementor_canvas) .entry-header {
  background: linear-gradient(135deg, #071c24 0%, #0a2d3a 60%, #0d3545 100%);
  padding: 48px 0 44px;
  margin-bottom: 0;
}
.page:not(.page-template-elementor_canvas) .entry-header .entry-title {
  font-family: var(--hk-serif);
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 600;
  color: #fff;
  letter-spacing: -.3px;
  line-height: 1.2;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Typography inside SEO pages */
.page:not(.page-template-elementor_canvas) .entry-content h1 {
  font-family: var(--hk-serif);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 600;
  color: var(--hk-text);
  line-height: 1.25;
  margin: 0 0 18px;
  letter-spacing: -.2px;
}
.page:not(.page-template-elementor_canvas) .entry-content h2 {
  font-family: var(--hk-serif);
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 600;
  color: var(--hk-text);
  margin: 36px 0 14px;
  padding-top: 8px;
  border-top: 1px solid #f0f8fb;
  line-height: 1.3;
}
.page:not(.page-template-elementor_canvas) .entry-content h3 {
  font-family: var(--hk-serif);
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 600;
  color: var(--hk-text);
  margin: 28px 0 10px;
}
.page:not(.page-template-elementor_canvas) .entry-content h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hk-mid);
  margin: 24px 0 8px;
}
.page:not(.page-template-elementor_canvas) .entry-content p {
  font-size: 16px;
  line-height: 1.8;
  color: #1a2c35;
  margin-bottom: 18px;
}
.page:not(.page-template-elementor_canvas) .entry-content ul,
.page:not(.page-template-elementor_canvas) .entry-content ol {
  padding-left: 22px;
  margin-bottom: 18px;
}
.page:not(.page-template-elementor_canvas) .entry-content li {
  font-size: 16px;
  line-height: 1.75;
  color: #1a2c35;
  margin-bottom: 6px;
}
.page:not(.page-template-elementor_canvas) .entry-content a {
  color: var(--hk-mid);
  text-decoration: underline;
  text-decoration-color: var(--hk-border);
  text-underline-offset: 3px;
}
.page:not(.page-template-elementor_canvas) .entry-content a:hover { color: var(--hk-dark); }
.page:not(.page-template-elementor_canvas) .entry-content strong { font-weight: 700; color: var(--hk-text); }
.page:not(.page-template-elementor_canvas) .entry-content img {
  border-radius: 10px;
  margin: 8px 0 16px;
  box-shadow: 0 2px 12px rgba(7,28,36,.08);
}
.page:not(.page-template-elementor_canvas) .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 14px;
}
.page:not(.page-template-elementor_canvas) .entry-content th {
  background: #071c24;
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.page:not(.page-template-elementor_canvas) .entry-content td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--hk-border);
  color: var(--hk-text);
  line-height: 1.5;
}
.page:not(.page-template-elementor_canvas) .entry-content tr:nth-child(even) td {
  background: #f9fdff;
}

/* Hide GP entry footer on regular pages */
.page:not(.page-template-elementor_canvas) .entry-footer { display: none !important; }

/* Responsive */
@media (max-width: 700px) {
  .page:not(.page-template-elementor_canvas) .entry-content { padding: 24px 20px 32px; border-radius: 0; }
  .page:not(.page-template-elementor_canvas) .entry-header .entry-title { padding: 0 20px; }
  .page:not(.page-template-elementor_canvas) .entry-header { padding: 36px 0 32px; }
}


/* ============================================================
   42. SEO PAGES — GP layout overrides (fixes full-width issue)
   ============================================================ */

/* Target GP's actual container classes */
.page-template-default .site-main,
.page-template-default #primary {
  background: #f4f8fa;
}

/* Content width — override GP grid */
.page-template-default .entry-content,
.page-template-default .entry-content.grid-container,
.page-template-default .inside-article .entry-content {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 36px 32px 48px !important;
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(7,28,36,.06) !important;
  box-sizing: border-box !important;
}

/* Dark title header — full width breakout */
.page-template-default .entry-header {
  background: linear-gradient(135deg, #071c24 0%, #0a2d3a 55%, #0d3545 100%) !important;
  padding: 52px 32px 48px !important;
  margin: 0 !important;
  width: 100% !important;
}
.page-template-default .entry-header .entry-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(26px, 4vw, 42px) !important;
  font-weight: 600 !important;
  color: #fff !important;
  letter-spacing: -.3px !important;
  line-height: 1.2 !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  text-transform: none !important;
}

/* GP inside-article wrapper — remove default padding */
.page-template-default .inside-article {
  padding: 0 !important;
}

/* Hide entry footer */
.page-template-default .entry-footer { display: none !important; }

/* CTA boxes full-width fix — they use inline styles so contain them */
.page-template-default .entry-content > div[style*="linear-gradient"] {
  border-radius: 12px;
  margin: 28px 0;
}

/* Responsive */
@media (max-width: 900px) {
  .page-template-default .entry-content,
  .page-template-default .entry-content.grid-container {
    max-width: 100% !important;
    border-radius: 0 !important;
    padding: 24px 20px 32px !important;
  }
  .page-template-default .entry-header {
    padding: 36px 20px 32px !important;
  }
}

/* CTA box headings — force white text */
.page-template-default .entry-content div[style*="linear-gradient"] h3,
.page-template-default .entry-content div[style*="linear-gradient"] h2,
.page-template-default .entry-content div[style*="linear-gradient"] p {
  color: #fff !important;
}


/* ============================================================
   43. BREADCRUMBS & RELATED LINKS — SEO pages
   ============================================================ */

/* ── Breadcrumbs ──────────────────────────────────────────── */
.hk-breadcrumb-wrap {
  background: #071c24;
  padding: 10px 32px;
  display: flex;
  align-items: center;
}
.hk-breadcrumb {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  font-size: 12px;
  color: rgba(255,255,255,.45);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.hk-breadcrumb a {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color .15s;
}
.hk-breadcrumb a:hover { color: #4aa8c4; }
.hk-breadcrumb .sep { opacity: .35; font-size: 11px; }
.hk-breadcrumb .current { color: rgba(255,255,255,.75); }

/* ── Related pages section ────────────────────────────────── */
.hk-related-pages {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 32px 48px;
}
.hk-rp-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hk-muted);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hk-border);
}
.hk-rp-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}
.hk-rp-card {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: 12px;
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hk-rp-card:hover {
  border-color: #b0d8ea;
  box-shadow: 0 3px 12px rgba(37,133,163,.1);
}
.hk-rp-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hk-mid);
}
.hk-rp-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--hk-text);
  line-height: 1.35;
}
.hk-rp-card-arrow {
  font-size: 12px;
  color: var(--hk-mid);
  margin-top: 4px;
}

@media (max-width: 700px) {
  .hk-breadcrumb-wrap { padding: 10px 20px; }
  .hk-related-pages { padding: 24px 20px 32px; }
  .hk-rp-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .hk-rp-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   44. BLOG / ELEMENTOR PAGES — Full width inside Default Template
   Force full-width content for pages using our custom HTML widgets
   ============================================================ */

/* Target pages that use our full-width widgets */
/* GP wraps content in .site-main > article > .inside-article > .entry-content */
/* We need to break out of the max-width container */

.page-id-blog .inside-article,
.blog .inside-article,
body.page .inside-article {
  padding: 0 !important;
  max-width: 100% !important;
}

/* Remove GP's content container constraints for Elementor widget pages */
/* Blog page + any page using our custom widgets */
.page-id-blog .entry-content,
.page-id-blog .entry-header,
.blog .entry-content,
.blog .entry-header {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Hide GP title area on widget pages */
.page-id-blog .entry-header { display: none !important; }


/* ============================================================
   45. CLUSTER INDEX PAGES
   ============================================================ */

.hk-cluster-page { background: #f4f8fa; min-height: 100vh; }

/* ── Hero ─────────────────────────────────────────────────── */
.hk-cluster-hero {
  background: linear-gradient(135deg, #071c24 0%, #0a2d3a 55%, #0d3545 100%);
  padding: 56px 0 48px;
  position: relative;
  overflow: hidden;
}
.hk-cluster-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 75% 50%, rgba(37,133,163,.12) 0%, transparent 70%);
  pointer-events: none;
}
.hk-cluster-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.hk-cluster-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hk-light);
  margin-bottom: 10px;
}
.hk-cluster-title {
  font-family: var(--hk-serif);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -.3px;
  margin: 0 0 12px;
}
.hk-cluster-title em { font-style: italic; color: var(--hk-light); }
.hk-cluster-sub {
  font-size: 15px;
  color: rgba(255,255,255,.6);
  max-width: 580px;
  line-height: 1.6;
  margin: 0 0 20px;
}
.hk-cluster-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  padding: 5px 14px;
  font-size: 12px;
  color: rgba(255,255,255,.65);
}

/* ── Search/filter bar ────────────────────────────────────── */
.hk-cluster-filter {
  background: #fff;
  border-bottom: 1px solid var(--hk-border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.hk-cluster-filter-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hk-cluster-search {
  flex: 1;
  max-width: 360px;
  height: 36px;
  padding: 0 14px 0 36px;
  border: 1.5px solid var(--hk-border);
  border-radius: 9px;
  font-size: 13px;
  font-family: var(--hk-sans);
  background: #f9fdff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a8f9a' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;
  color: var(--hk-text);
  transition: border-color .15s;
}
.hk-cluster-search:focus { outline: none; border-color: var(--hk-mid); background-color: #fff; }
.hk-cluster-result-count {
  font-size: 12px;
  color: var(--hk-hint);
  margin-left: auto;
  white-space: nowrap;
}

/* ── Body ─────────────────────────────────────────────────── */
.hk-cluster-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 32px 48px;
}

/* ── Card grid ────────────────────────────────────────────── */
.hk-cluster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ── Individual card ──────────────────────────────────────── */
.hk-ci-card {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: 14px;
  padding: 20px;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hk-ci-card:hover {
  border-color: #b0d8ea;
  box-shadow: 0 4px 18px rgba(37,133,163,.1);
  transform: translateY(-2px);
}
.hk-ci-card-icon {
  font-size: 22px;
  margin-bottom: 4px;
  line-height: 1;
}
.hk-ci-card-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hk-mid);
}
.hk-ci-card-title {
  font-family: var(--hk-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--hk-text);
  line-height: 1.35;
}
.hk-ci-card-desc {
  font-size: 12px;
  color: var(--hk-muted);
  line-height: 1.55;
  flex: 1;
}
.hk-ci-card-arrow {
  font-size: 13px;
  color: var(--hk-mid);
  font-weight: 600;
  margin-top: 4px;
}
.hk-ci-card.hidden { display: none; }

/* ── Empty state ──────────────────────────────────────────── */
.hk-cluster-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 48px;
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: 14px;
  display: none;
}
.hk-cluster-empty.show { display: block; }
.hk-cluster-empty h3 { font-family: var(--hk-serif); font-size: 20px; font-style: italic; color: var(--hk-text); margin: 0 0 6px; }
.hk-cluster-empty p { font-size: 13px; color: var(--hk-hint); margin: 0; }

/* ── Bottom CTA ───────────────────────────────────────────── */
.hk-cluster-cta {
  background: linear-gradient(135deg, #071c24, #0d3545);
  border-radius: 16px;
  padding: 28px 32px;
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border: 1.5px solid rgba(74,168,196,.15);
}
.hk-cluster-cta-text h3 {
  font-family: var(--hk-serif);
  font-size: 22px;
  font-weight: 600;
  font-style: italic;
  color: #fff;
  margin: 0 0 4px;
}
.hk-cluster-cta-text h3 em { color: var(--hk-light); }
.hk-cluster-cta-text p { font-size: 13px; color: rgba(255,255,255,.6); margin: 0; }
.hk-cluster-cta-btn {
  background: #e8a830;
  color: #fff;
  padding: 11px 24px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}
.hk-cluster-cta-btn:hover { background: #c98820; color: #fff; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .hk-cluster-grid { grid-template-columns: repeat(2,1fr); }
  .hk-cluster-body { padding: 24px 20px 32px; }
}
@media (max-width: 600px) {
  .hk-cluster-hero { padding: 36px 0 32px; }
  .hk-cluster-hero-inner { padding: 0 20px; }
  .hk-cluster-filter-inner { padding: 10px 16px; }
  .hk-cluster-grid { grid-template-columns: 1fr; }
  .hk-cluster-cta { flex-direction: column; text-align: center; }
}


/* ============================================================
   50. SUBMIT REPORT PAGE
   ============================================================ */

.hk-submit-page {
  font-family: var(--hk-sans);
  background: #f4f8fa;
  min-height: 100vh;
}

/* ── Top bar ──────────────────────────────────────────────── */
.hk-sub-bar {
  background: #071c24;
  padding: 10px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hk-sub-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.hk-sub-logo-text {
  font-family: var(--hk-sans);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.2px;
}
.hk-sub-logo-text span { color: var(--hk-light); }
.hk-sub-bar-links { display: flex; align-items: center; gap: 20px; }
.hk-sub-bar-link {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color .15s;
}
.hk-sub-bar-link:hover { color: rgba(255,255,255,.9); }

/* ── Main wrapper ─────────────────────────────────────────── */
.hk-sub-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 32px 64px;
}

/* ── Page header ──────────────────────────────────────────── */
.hk-sub-header { margin-bottom: 32px; }
.hk-sub-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hk-mid);
  margin-bottom: 8px;
}
.hk-sub-title {
  font-family: var(--hk-serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  color: var(--hk-text);
  line-height: 1.15;
  margin: 0 0 10px;
}
.hk-sub-title em { font-style: italic; color: var(--hk-mid); }
.hk-sub-desc {
  font-size: 14px;
  color: var(--hk-muted);
  max-width: 560px;
  line-height: 1.6;
  margin: 0;
}

/* ── Grid layout ──────────────────────────────────────────── */
.hk-sub-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}

/* ── Form sections ────────────────────────────────────────── */
.hk-sub-form { display: flex; flex-direction: column; gap: 16px; }

.hk-form-section {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 2px 8px rgba(7,28,36,.04);
}

.hk-section-title {
  font-family: var(--hk-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--hk-text);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hk-section-num {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #1a5f78, #2585a3);
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--hk-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Field layout ─────────────────────────────────────────── */
.hk-fg { margin-bottom: 16px; }
.hk-fg:last-child { margin-bottom: 0; }
.hk-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hk-f3   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

.hk-fl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #4a7080;
  margin-bottom: 7px;
}
.hk-fl small { font-size: 10px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--hk-hint); }
.req { color: #e05252; }

.hk-fi,
.hk-fsel,
.hk-fta {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid #d8eef6;
  border-radius: 9px;
  font-size: 13.5px;
  font-family: var(--hk-sans);
  background: #f9fdff;
  color: var(--hk-text);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.hk-fi:focus,
.hk-fsel:focus,
.hk-fta:focus {
  outline: none;
  border-color: var(--hk-mid);
  box-shadow: 0 0 0 3px rgba(37,133,163,.1);
  background: #fff;
}
.hk-fsel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a7080' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
  cursor: pointer;
}
.hk-fta { resize: vertical; line-height: 1.6; }
.hk-hint {
  display: block;
  font-size: 11px;
  color: var(--hk-hint);
  margin-top: 5px;
  line-height: 1.4;
}

/* ── Water clarity ────────────────────────────────────────── */
.hk-clarity {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.hk-cl {
  padding: 7px 14px;
  background: #f4f8fa;
  border: 1.5px solid var(--hk-border);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hk-muted);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.hk-cl:hover { border-color: var(--hk-mid); color: var(--hk-mid); }
.hk-cl.on {
  background: var(--hk-mid);
  border-color: var(--hk-mid);
  color: #fff;
}

/* ── Tags (species, method, hatch) ───────────────────────── */
.hk-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.hk-tag {
  padding: 6px 13px;
  background: #f4f8fa;
  border: 1.5px solid var(--hk-border);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hk-muted);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.hk-tag:hover { border-color: var(--hk-mid); }
.hk-tag.sp.on { background: rgba(37,133,163,.12); border-color: var(--hk-mid); color: #1a5f78; }
.hk-tag.mt.on { background: rgba(74,168,196,.15); border-color: #4aa8c4; color: #0f4a60; }
.hk-tag.ht.on { background: rgba(200,130,30,.12); border-color: #c8821e; color: #8a5010; }

/* ── Stars ────────────────────────────────────────────────── */
.hk-stars { display: flex; gap: 4px; margin-top: 4px; }
.hk-star {
  font-size: 28px;
  color: #d8eef6;
  cursor: pointer;
  transition: color .1s;
  line-height: 1;
}
.hk-star.on    { color: #e8a830; }
.hk-star.hover { color: #f0c060; }
.hk-star:hover { color: #f0c060; }

/* ── Photo upload ─────────────────────────────────────────── */
.hk-photo-drop {
  border: 2px dashed #c8eaf3;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  background: #f9fdff;
  transition: border-color .15s, background .15s;
}
.hk-photo-drop:hover { border-color: var(--hk-mid); background: #f0fafd; }
.hk-photo-drop-text { font-size: 13px; font-weight: 600; color: var(--hk-mid); margin-top: 10px; }
.hk-photo-drop-sub  { font-size: 11px; color: var(--hk-hint); margin-top: 4px; }

/* ── Submit button ────────────────────────────────────────── */
.hk-submit-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #1a6b88, #2585a3);
  color: #fff;
  border: none;
  border-radius: 11px;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--hk-sans);
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  margin-top: 4px;
}
.hk-submit-btn:hover   { opacity: .9; transform: translateY(-1px); }
.hk-submit-btn:active  { transform: translateY(0); }
.hk-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ── Auth banner ──────────────────────────────────────────── */
#hk-auth-banner a { font-weight: 700; }

/* ── Sidebar ──────────────────────────────────────────────── */
.hk-sub-sidebar { display: flex; flex-direction: column; gap: 16px; }

.hk-side-card {
  background: #fff;
  border: 1.5px solid var(--hk-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(7,28,36,.04);
}
.hk-side-head {
  padding: 13px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hk-mid);
  background: #f4f8fa;
  border-bottom: 1px solid var(--hk-border);
}
.hk-side-body { padding: 14px 18px; }

/* Tips */
.hk-side-tip {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hk-border);
}
.hk-side-tip:last-child { border-bottom: none; }
.hk-tip-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.hk-tip-text { font-size: 12px; color: var(--hk-muted); line-height: 1.55; }
.hk-tip-text strong { color: var(--hk-text); font-weight: 600; display: block; margin-bottom: 2px; }

/* Conditions */
.hk-cond-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--hk-border);
  gap: 10px;
}
.hk-cond-row:last-child { border-bottom: none; }
.hk-cond-river  { font-size: 13px; font-weight: 600; color: var(--hk-text); }
.hk-cond-detail { font-size: 11px; color: var(--hk-hint); margin-top: 2px; }
.hk-cond-pill {
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.pill-good { background: #e4f5ec; color: #1a6b4a; }
.pill-fair { background: #fef5e7; color: #9b6010; }
.pill-poor { background: #fef0f0; color: #9b2c2c; }

/* Activity */
.hk-act-item {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hk-border);
}
.hk-act-item:last-child { border-bottom: none; }
.hk-act-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hk-act-text { font-size: 12px; color: var(--hk-muted); line-height: 1.5; }
.hk-act-text strong { color: var(--hk-text); }
.hk-act-time { font-size: 11px; color: var(--hk-hint); margin-top: 2px; }

/* ── Toast ────────────────────────────────────────────────── */
#hk-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #1a5f78;
  color: #fff;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--hk-sans);
  opacity: 0;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(7,28,36,.2);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .hk-sub-grid { grid-template-columns: 1fr; }
  .hk-sub-sidebar { order: -1; }
}
@media (max-width: 640px) {
  .hk-sub-main { padding: 24px 20px 40px; }
  .hk-form-section { padding: 18px 16px; }
  .hk-frow, .hk-f3 { grid-template-columns: 1fr; gap: 0; }
  .hk-sub-bar { padding: 10px 16px; }
}

/* Hide duplicate nav bar on submit page (GP nav now handles this) */
.hk-submit-page .hk-sub-bar { display: none !important; }

/* Remove white gap at bottom of advertise page */
.page-template-default .entry-content:has(.hk-adv),
.page-template-page-fullwidth-php .entry-content:has(.hk-adv) {
  padding-bottom: 0 !important;
}
.hk-adv-contact-bg {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
  margin-bottom: -48px;
}


/* ============================================================
   51. LEGAL / PLAIN CONTENT PAGES (Privacy, Terms, About, etc.)
   ============================================================ */

/* These pages have simple WP editor content — style it cleanly */
.page-template-page-fullwidth-php .site-main > .entry-content:not(:has(.hk-adv)):not(:has(.hk-submit-page)):not(:has(.hk-gear)):not(:has(.hk-contact-wrap)),
.page-template-page-fullwidth-php .hk-fullwidth-page > article .entry-content {
  max-width: 760px;
  margin: 48px auto 64px;
  padding: 0 32px;
}

/* Simpler targeting for pages using Full Width with plain WP content */
.hk-fullwidth-page .inside-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 32px 64px;
}

/* Override for pages that have custom widget content */
.hk-fullwidth-page .inside-article:has(.hk-adv),
.hk-fullwidth-page .inside-article:has(.hk-submit-page),
.hk-fullwidth-page .inside-article:has(.hk-gear),
.hk-fullwidth-page .inside-article:has(.hk-contact-wrap),
.hk-fullwidth-page .inside-article:has(.hk-cluster-page) {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Legal page headings */
.hk-fullwidth-page .inside-article h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  color: #0f2830;
  line-height: 1.15;
  margin: 0 0 16px;
}
.hk-fullwidth-page .inside-article h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: #0f2830;
  margin: 36px 0 10px;
  padding-top: 20px;
  border-top: 1px solid #ddeef5;
}
.hk-fullwidth-page .inside-article h2:first-of-type { border-top: none; margin-top: 24px; }
.hk-fullwidth-page .inside-article p {
  font-size: 14.5px;
  line-height: 1.75;
  color: #2a4a55;
  margin: 0 0 14px;
}
.hk-fullwidth-page .inside-article a {
  color: #2585a3;
}
.hk-fullwidth-page .inside-article strong {
  color: #0f2830;
  font-weight: 700;
}

@media (max-width: 640px) {
  .hk-fullwidth-page .inside-article { padding: 32px 20px 48px; }
}


/* ============================================================
   52. hk-page-content — wrapper for all Full Width pages
   ============================================================ */

/* Default: plain content pages — full width container, inner content constrained */
.hk-page-content {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Override: custom widget pages go full width */
.hk-page-content:has(.hk-adv),
.hk-page-content:has(.hk-submit-page),
.hk-page-content:has(.hk-gear),
.hk-page-content:has(.hk-contact-wrap),
.hk-page-content:has(.hk-cluster-page),
.hk-page-content:has(.hk-reports-page),
.hk-page-content:has(.hk-cond-page),
.hk-page-content:has(.hk-angler-page) {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Plain content typography — only for .hk-page-content pages (non-Elementor) */
.hk-page-content > h1 { font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(28px,4vw,44px);font-weight:600;color:#0f2830;line-height:1.15;margin:0 0 14px; }
.hk-page-content > h2 { font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:600;color:#0f2830;margin:36px 0 10px;padding-top:24px;border-top:1px solid #ddeef5; }
.hk-page-content > h2:first-of-type { border-top:none;margin-top:24px; }
.hk-page-content > h3 { font-size:16px;font-weight:700;color:#0f2830;margin:24px 0 8px; }
.hk-page-content > p { font-size:14.5px;line-height:1.75;color:#2a4a55;margin:0 0 14px; }
.hk-page-content > a { color:#2585a3; }
.hk-page-content > ul, .hk-page-content > ol { padding-left:20px;margin:0 0 16px; }
.hk-page-content > li { font-size:14.5px;color:#2a4a55;line-height:1.7;margin-bottom:4px; }
.hk-page-content > hr { border:none;border-top:1px solid #ddeef5;margin:32px 0; }

@media (max-width: 640px) {
  .hk-page-content { padding: 0 20px; margin: 32px auto 48px; }
}

/* Conditions page hero — force white text */
.hk-conditions-hero h1,
.hk-conditions-hero .hk-conditions-title,
.hk-cond-hero h1,
.hk-cond-hero-title { color: #fff !important; }

/* Fix conditions hero h1 */
.hk-cond-title { color: #fff !important; }

/* Fix homepage and all Elementor pages — don't constrain width */
.hk-page-content:has(.elementor),
.hk-page-content:has(.e-con) {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Weather tag group — matches existing tag styling */
.hk-tag.wx.on { background: rgba(37,133,163,.15); border-color: #4aa8c4; color: #0f4a60; }

/* Weather badge on report cards */
.hk-report-weather {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--hk-muted);
  background: #f0f8fb;
  border-radius: 100px;
  padding: 3px 9px;
  border: 1px solid var(--hk-border);
}
.hk-report-weather-icon { font-size: 13px; }

/* Conditions hero — all text white */
.hk-cond-label,
.hk-cond-sub,
.hk-cond-title { color: #fff !important; }
.hk-cond-label { color: #4aa8c4 !important; }
.hk-cond-sub { color: rgba(255,255,255,.6) !important; }



/* ── SEO page entry-header — force all text white ─────────── */
.page-template-default .entry-header,
.page-template-default .entry-header * {
  color: #fff !important;
}
.page-template-default .entry-header .entry-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(26px, 4vw, 42px) !important;
  font-weight: 600 !important;
  color: #fff !important;
}
/* Eyebrow label above title */
.page-template-default .entry-header > div[style*="font-size:11px"],
.page-template-default .entry-header > div[style*="teal"],
.page-template-default .entry-header > div[style*="4aa8c4"] {
  color: #4aa8c4 !important;
}

/* Also remove the :has() based rules that were breaking things */
.hk-page-content:has(.elementor),
.hk-page-content:has(.e-con) {
  max-width: unset !important;
  margin: unset !important;
  padding: unset !important;
}


/* ============================================================
   53. ABOUT PAGE (.hkp)
   ============================================================ */
.hkp { font-family:'Plus Jakarta Sans',sans-serif; }

.hkp-hero {
  background:linear-gradient(135deg,#071c24 0%,#0a2d3a 55%,#0d3545 100%);
  padding:64px 0 56px;
}
.hkp-hero > * {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
}
.hkp-hero-inner {
  max-width:640px;
}
.hkp-hero-tag {
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#4aa8c4;margin-bottom:14px;
}
.hkp-hero h1 {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(32px,5vw,52px);font-weight:600;color:#fff;
  line-height:1.1;margin:0 0 16px;
}
.hkp-hero p {
  font-size:15px;color:rgba(255,255,255,.6);line-height:1.75;
  max-width:520px;margin:0;
}

.hkp-body { }

.hkp-h2 {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:26px;font-weight:600;color:#0f2830;
  margin:40px 0 12px;padding-top:28px;border-top:1px solid #ddeef5;
}
.hkp-h2:first-of-type { border-top:none;margin-top:0;padding-top:0; }

.hkp-p {
  font-size:15px;line-height:1.8;color:#2a4a55;margin:0 0 16px;
}

.hkp-stat-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin:28px 0 32px;
}
.hkp-stat {
  background:linear-gradient(135deg,#071c24,#0a2d3a);
  border-radius:14px;padding:24px 20px;text-align:center;
}
.hkp-stat-val {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:34px;font-weight:600;color:#fff;line-height:1;
}
.hkp-stat-lbl {
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-top:6px;
}

.hkp-divider {
  border:none;border-top:1px solid #ddeef5;margin:36px 0;
}

.hkp-cta {
  background:#f0f8fb;border:1.5px solid #c8eaf3;border-radius:16px;
  padding:28px 32px;margin-top:8px;
}
.hkp-cta h3 {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:22px;font-weight:600;color:#0f2830;margin:0 0 8px;
}
.hkp-cta p {
  font-size:14px;color:#4a7080;line-height:1.65;margin:0 0 18px;
}
.hkp-btn {
  display:inline-block;background:linear-gradient(135deg,#1a6b88,#2585a3);
  color:#fff;padding:12px 24px;border-radius:9px;font-size:14px;font-weight:700;
  text-decoration:none;transition:opacity .15s;
}
.hkp-btn:hover { opacity:.88;color:#fff; }

@media(max-width:640px){
  .hkp-hero { margin:-32px -20px 36px;padding:44px 20px 44px; }
  .hkp-stat-grid { grid-template-columns:1fr; }
  .hkp-cta { padding:22px 20px; }
}


/* ============================================================
   54. LEGAL PAGES — Privacy Policy, Terms of Service
       (page-template-default with WP editor content)
   ============================================================ */

/* Dark hero header */
.page-template-default .entry-header {
  background:linear-gradient(135deg,#071c24 0%,#0a2d3a 55%,#0d3545 100%);
  padding:64px 0 56px;
  position:relative;
  margin: 0 !important;
}
.page-template-default .entry-header::before,
.page-template-default .entry-header .entry-title {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
  display: block;
}
.page-template-default .entry-header::before {
  content:'Legal';
  display:block;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#4aa8c4;margin-bottom:12px;
}
.page-template-default .entry-header .entry-title {
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:clamp(28px,4vw,44px) !important;
  font-weight:600 !important;
  color:#fff !important;
  line-height:1.1 !important;
  margin:0 !important;
  max-width:640px;
}

/* Content body */
.page-template-default .entry-content {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 40px 48px 64px !important;
}
.page-template-default .entry-content p {
  font-size:14.5px;line-height:1.8;color:#2a4a55;margin:0 0 16px;
}
.page-template-default .entry-content h2 {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:22px;font-weight:600;color:#0f2830;
  margin:36px 0 10px;padding-top:24px;
  border-top:1px solid #ddeef5;
}
.page-template-default .entry-content h2:first-of-type {
  border-top:none;margin-top:0;padding-top:0;
}
.page-template-default .entry-content a { color:#2585a3; }
.page-template-default .entry-content strong { color:#0f2830;font-weight:700; }

/* Safety disclaimer in red on Terms */
.page-template-default .entry-content p[style*="color:red"],
.page-template-default .entry-content p[style*="color:#c0"] {
  background:#fef5f4;border-left:3px solid #e05040;
  padding:12px 16px;border-radius:0 8px 8px 0;
  font-size:13.5px;line-height:1.7;
}

/* "Contact us →" link style */
.page-template-default .entry-content a[href*="contact"] {
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;color:#2585a3;text-decoration:none;
}
.page-template-default .entry-content a[href*="contact"]:hover {
  text-decoration:underline;
}

@media(max-width:768px){
  .page-template-default .entry-header { margin:-30px -30px 0;padding:40px 30px 36px; }
}

/* Constrain hero text without requiring HTML changes */
.hkp-hero > *:not(.hkp-hero-inner) { max-width: 600px; }
.hkp-body {
  max-width: 860px;
  margin: 48px auto 64px;
  padding: 0 48px;
}

/* Legal pages — entry-meta (date/author line) styling */
.page-template-default .entry-meta { display:none; }

/* Default Template pages — full width layout */
.page-template-default .inside-article {
  max-width: 100% !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

@media(max-width:768px){
  .page-template-default .entry-header { padding:44px 0 36px; }
  .page-template-default .entry-header::before,
  .page-template-default .entry-header .entry-title { padding-left:24px;padding-right:24px; }
  .page-template-default .entry-content { padding:32px 24px 48px !important; }
  .hkp-hero { padding:44px 0; }
  .hkp-hero > * { padding-left:24px;padding-right:24px; }
  .hkp-body { padding:24px 24px 48px; }
}


/* ============================================================
   99. FORCE LAYOUT — About, Privacy, Terms (override all conflicts)
   ============================================================ */

/* Full width containers — no constraints */
.hk-fullwidth-page .hk-page-content,
.page-template-default .inside-article {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* About page hero — full width */
.hkp-hero {
  width: 100% !important;
  margin: 0 !important;
  padding: 64px 0 56px !important;
  box-sizing: border-box !important;
}
/* About page hero inner content — centered */
.hkp-hero-tag,
.hkp-hero h1,
.hkp-hero p {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
}

/* About page body — centered readable width */
.hkp-body {
  max-width: 860px !important;
  margin: 48px auto 64px !important;
  padding: 0 48px !important;
  box-sizing: border-box !important;
}

/* Legal page hero — full width */
.page-template-default .entry-header {
  width: 100% !important;
  margin: 0 !important;
  padding: 64px 0 56px !important;
  box-sizing: border-box !important;
}
/* Legal page hero inner content — centered */
.page-template-default .entry-header::before,
.page-template-default .entry-header .entry-title {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Legal page body — centered */
.page-template-default .entry-content {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 40px 48px 64px !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .hkp-hero { padding: 44px 0 40px !important; }
  .hkp-hero-tag, .hkp-hero h1, .hkp-hero p { padding-left: 24px !important; padding-right: 24px !important; }
  .hkp-body { padding: 0 24px !important; margin: 32px auto 48px !important; }
  .page-template-default .entry-header { padding: 44px 0 36px !important; }
  .page-template-default .entry-header::before,
  .page-template-default .entry-header .entry-title { padding-left: 24px !important; padding-right: 24px !important; }
  .page-template-default .entry-content { padding: 32px 24px 48px !important; }
}


/* ── Updated hero CTA buttons ─────────────────────────────── */
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.hero-btn-primary {
  display: inline-block;
  background: #e8a830;
  color: #fff;
  padding: 13px 28px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: background .15s;
}
.hero-btn-primary:hover { background: #c98820; color: #fff; }
.hero-btn-ghost {
  display: inline-block;
  background: rgba(255,255,255,.1);
  color: #fff;
  padding: 13px 24px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  border: 1.5px solid rgba(255,255,255,.2);
  transition: background .15s;
}
.hero-btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Tighter hero on mobile so USGS bar is visible */
@media (max-width: 640px) {
  .hero { padding-top: 32px !important; padding-bottom: 16px !important; }
  .hero-content { padding-bottom: 8px !important; }
  .hero-headline { font-size: clamp(26px, 7vw, 38px) !important; }
  .hero-sub { font-size: 14px !important; margin-bottom: 16px !important; }
  .hero-cta-row { gap: 10px; }
  .hero-btn-primary, .hero-btn-ghost { padding: 11px 20px; font-size: 14px; }
  .hero-note { display: none; }
}

/* Browse Guides button */
.guides-section .hk-btn-primary {
  background: linear-gradient(135deg,#1a6b88,#2585a3) !important;
  color: #fff !important;
  padding: 13px 28px !important;
  border-radius: 9px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans',sans-serif !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: opacity .15s !important;
}
.guides-section .hk-btn-primary:hover { opacity: .88 !important; color: #fff !important; }

/* USGS bar — prevent stat labels wrapping to 2 lines */
.cond-stats { align-items: flex-start; flex-wrap: nowrap; }
.cond-stat-lbl {
  white-space: nowrap !important;
  font-size: 10px;
}
.cond-stats > div { flex-shrink: 0; }


/* ============================================================
   HATCH CHART MOBILE FIX — All three implementations
   (lake pages, river pages, hatch chart page)
   ============================================================ */

/* ── 1. LAKE PAGES: .hk-hatch-table ─────────────────────── */
.hk-section-body:has(.hk-hatch-table),
.hk-hatch-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hk-hatch-table {
  min-width: 500px;
  width: 100%;
  border-collapse: collapse;
}
.hk-hi-name {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
  white-space: nowrap;
  padding-right: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #0f2830;
  min-width: 120px;
}
.hk-hm-row {
  display: flex;
  gap: 3px;
}
.hk-hm-cell {
  flex: 1;
  min-width: 20px;
  height: 28px;
  border-radius: 4px;
}

/* ── 2. RIVER PAGES: .hk-hatch-grid ─────────────────────── */
.hk-hatch-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #c8eaf3 transparent;
}
.hk-hatch-grid {
  display: grid;
  grid-template-columns: 140px repeat(12, minmax(36px, 1fr)) !important;
  min-width: 600px;
  gap: 0;
}
.hk-ins-lbl {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 0;
  font-size: 12px;
  font-weight: 600;
  color: #0f2830;
  white-space: nowrap;
}
.hk-hcell {
  font-size: 10px;
  padding: 4px 2px;
  text-align: center;
  border-radius: 4px;
  margin: 2px;
}
.hk-mhdr, .hk-mhdr-now {
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 4px 2px;
  color: #6a8f9a;
}
.hk-mhdr-now { color: #1a5f78; font-weight: 800; }

/* ── 3. HATCH CHART PAGE: .hk-grid ──────────────────────── */
.hk-grid-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #c8eaf3 transparent;
}
.hk-grid {
  min-width: 680px;
  display: grid;
  grid-template-columns: 140px repeat(12, minmax(38px, 1fr)) !important;
}
.hk-grid-lbl {
  position: sticky !important;
  left: 0 !important;
  background: #fff !important;
  z-index: 2 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 0;
  font-size: 12px;
  color: #0f2830;
  white-space: nowrap;
  border-right: 1px solid #f0f8fb;
}
.hk-grid-lbl .hk-grid-dot,
.hk-grid-lbl > div:first-child {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hk-month-hdr {
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 4px 2px;
  color: #6a8f9a;
}
.hk-month-hdr.cur { color: #1a5f78; font-weight: 800; }
.hk-cell {
  font-size: 9px;
  text-align: center;
  padding: 5px 2px;
  border-radius: 4px;
  margin: 2px;
  color: rgba(255,255,255,.85);
  font-weight: 600;
}
.hk-cell.off { background: #eef6fb !important; color: transparent; }
.hk-cell.now-col { outline: 2px solid #1a5f78; outline-offset: -2px; }

/* Mobile label size reduction */
@media (max-width: 640px) {
  .hk-grid-lbl,
  .hk-ins-lbl,
  .hk-hi-name { font-size: 11px; min-width: 100px; }
  .hk-grid { grid-template-columns: 100px repeat(12, minmax(30px, 1fr)) !important; }
  .hk-hatch-grid { grid-template-columns: 100px repeat(12, minmax(28px, 1fr)) !important; }
  .hk-hatch-table { min-width: 420px; }
  .hk-hm-cell { min-width: 16px; height: 24px; }
}

/* Force all containers inside .hk-page-body to constrain to viewport on mobile.
   Use !important to defeat any Elementor wrapper widths.
   Excludes .hk-hatch-grid so the chart can keep its 600px scroll content. */
@media (max-width: 900px) {
	.hk-page-body,
	.hk-page-body > *,
	.hk-page-body > * > *,
	.hk-page-body > * > * > *,
	.hk-page-body > * > * > * > *,
	.hk-section,
	.hk-section-body,
	.hk-section-head,
	.hk-main,
	.hk-sidebar,
	.hk-hatch-wrap {
		min-width: 0 !important;
		max-width: 100% !important;
	}
}

/* ─────────────────────────────────────────────────────────────
   REGISTER PAGE — added 2026-05-01
   The .hk-reg-* markup is present in the rendered HTML but had
   no matching CSS. This restores the 2-column layout with a
   clean form card on the right and value-prop content on the left.
   ───────────────────────────────────────────────────────────── */

.hk-page-register {
	background: #f9fdff;
}

.hk-reg-bar {
	background: #fff;
	border-bottom: 1px solid var(--hk-border);
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 14px;
	color: var(--hk-muted);
}
.hk-reg-bar-link {
	margin-left: auto;
	color: var(--hk-mid);
	text-decoration: none;
	font-weight: 500;
}
.hk-reg-bar-link:hover { text-decoration: underline; }
.hk-reg-logo,
.hk-reg-logo-text {
	font-family: var(--hk-serif);
	color: var(--hk-text);
	font-weight: 600;
}

.hk-reg-page {
	min-height: 70vh;
}

.hk-reg-main {
	max-width: 1100px;
	margin: 0 auto;
	padding: 48px 24px 80px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
	gap: 60px;
	align-items: start;
}

.hk-reg-left,
.hk-reg-right {
	min-width: 0;
	max-width: 100%;
}

.hk-reg-headline {
	font-family: var(--hk-serif);
	font-size: 56px;
	line-height: 1.05;
	font-weight: 600;
	color: var(--hk-text);
	margin: 0 0 20px;
}
.hk-reg-headline em,
.hk-reg-headline i {
	font-style: italic;
	color: var(--hk-mid);
	font-weight: 600;
}

.hk-reg-tagline {
	font-size: 17px;
	line-height: 1.6;
	color: var(--hk-muted);
	margin: 0 0 32px;
}

.hk-reg-perks {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 36px;
	list-style: none;
	padding: 0;
}
.hk-reg-perk {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	color: var(--hk-text);
	line-height: 1.4;
}
.hk-reg-perk-dot,
.hk-perk-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hk-mid);
	flex-shrink: 0;
}

.hk-reg-rivers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.hk-river-pill {
	background: #e8f4f8;
	color: var(--hk-dark);
	padding: 6px 12px;
	border-radius: 14px;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}

.hk-reg-card {
	background: #fff;
	border: 1px solid var(--hk-border);
	border-radius: 14px;
	padding: 36px;
	box-shadow: 0 8px 32px rgba(13, 53, 73, 0.08);
}
.hk-reg-card-head {
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--hk-border);
}
.hk-reg-card-title {
	font-family: var(--hk-serif);
	font-size: 26px;
	font-weight: 600;
	margin: 0 0 6px;
	color: var(--hk-text);
	line-height: 1.2;
}
.hk-reg-card-sub {
	font-size: 14px;
	color: var(--hk-muted);
	margin: 0;
	line-height: 1.4;
}

.hk-reg-terms {
	margin-top: 18px;
	font-size: 12px;
	color: var(--hk-hint);
	text-align: center;
	line-height: 1.5;
}
.hk-reg-terms a {
	color: var(--hk-mid);
	text-decoration: none;
}
.hk-reg-terms a:hover { text-decoration: underline; }

/* Mobile: collapse to single column */
@media (max-width: 900px) {
	.hk-reg-main {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding: 28px 16px 48px;
	}
	.hk-reg-headline { font-size: 38px; }
	.hk-reg-tagline { font-size: 15px; }
	.hk-reg-card { padding: 24px; }
	.hk-reg-card-title { font-size: 22px; }
}

/* ─────────────────────────────────────────────────────────────
   REGISTER PAGE v2 — fix for 3-column layout (left props +
   center form card + right social proof)
   ───────────────────────────────────────────────────────────── */

/* Override the previous 2-column rule */
.hk-reg-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(380px, 460px) minmax(0, 1fr);
	gap: 40px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 24px 80px;
	align-items: start;
}

/* Direct children of grid container all get min-width: 0 to prevent overflow */
.hk-reg-main > * {
	min-width: 0;
	max-width: 100%;
}

/* The middle unnamed div wraps the form card */
.hk-reg-main > div:not(.hk-reg-left):not(.hk-reg-right) {
	grid-column: 2;
	min-width: 0;
}

/* Social proof right column */
.hk-reg-right {
	background: transparent;
	padding: 0;
}

.hk-social-title {
	font-family: var(--hk-serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--hk-text);
	margin: 0 0 16px;
	letter-spacing: -0.01em;
}

.hk-report-preview {
	background: #fff;
	border: 1px solid var(--hk-border);
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 12px;
	box-shadow: 0 2px 8px rgba(13, 53, 73, 0.04);
}
.hk-rp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hk-rp-av {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--hk-mid);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.hk-rp-name { font-size: 13px; font-weight: 600; color: var(--hk-text); }
.hk-rp-river { font-size: 11px; color: var(--hk-hint); }
.hk-rp-text { font-size: 13px; line-height: 1.5; color: var(--hk-muted); margin: 0 0 8px; }
.hk-rp-stats { display: flex; gap: 12px; font-size: 11px; color: var(--hk-hint); }
.hk-rp-stat strong { color: var(--hk-text); font-weight: 600; }

.hk-stat-bar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 16px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--hk-border);
	border-radius: 10px;
}
.hk-sb-item { text-align: center; }
.hk-sb-val { display: block; font-family: var(--hk-serif); font-size: 18px; font-weight: 600; color: var(--hk-mid); }
.hk-sb-lbl { display: block; font-size: 10px; color: var(--hk-hint); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* TABLET: drop the right column (social proof) */
@media (max-width: 1100px) {
	.hk-reg-main {
		grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
		max-width: 1000px;
		gap: 48px;
	}
	.hk-reg-right { display: none; }
}

/* MOBILE: stack to single column */
@media (max-width: 800px) {
	.hk-reg-main {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding: 28px 16px 48px;
	}
	.hk-reg-main > div:not(.hk-reg-left):not(.hk-reg-right) {
		grid-column: 1;
	}
	.hk-reg-headline { font-size: 38px; }
	.hk-reg-tagline { font-size: 15px; }
	.hk-reg-card { padding: 22px; }
	.hk-reg-card-title { font-size: 22px; }
}