/* ─────────────────────────────────────────────────────────────────────────────
   SurfTidal — Design System
   Dark ocean aesthetic · Barlow Condensed + Barlow · Mobile-first
───────────────────────────────────────────────────────────────────────────── */

:root {
  --ocean:    #07111f;
  --deep:     #0d1e38;
  --mid:      #112952;
  --card:     rgba(255,255,255,0.05);
  --card-border: rgba(255,255,255,0.08);
  --teal:     #00c9b1;
  --teal2:    #00a896;
  --amber:    #f5a623;
  --red:      #f04e37;
  --green:    #5bc85b;
  --white:    #eef3f8;
  --muted:    #7a8fa6;
  --faint:    #3a4d61;

  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;

  --max-w: 1100px;
  --pad:   1.25rem;
}

/* ── RESET ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--ocean); color: var(--white); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal2); }
img { max-width: 100%; display: block; }

/* ── LAYOUT ─────────────────────────────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); }
.section-heading { font-family: var(--font-head); font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; color: var(--white); margin-bottom: 1.25rem; letter-spacing: 0.02em; }

/* ── HEADER ─────────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(7,17,31,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--card-border); }
.header-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-logo { font-family: var(--font-head); font-size: 1.5rem; font-weight: 900; letter-spacing: 0.04em; display: flex; align-items: center; gap: 0.2rem; }
.logo-surf   { color: var(--white); }
.logo-tidal  { color: var(--teal); }
.logo-wave   { color: var(--teal); font-size: 1.1rem; margin-left: 2px; }
.footer-logo .logo-wave { display: none; }
@media (max-width: 600px) {
}

/* ── BEACH HERO ─────────────────────────────────────────────────────────────── */
.beach-hero { position: relative; padding: 4rem 0 3rem; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #07111f 0%, #0d2545 50%, #071e38 100%); z-index: 0; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(0,201,177,0.08) 0%, transparent 60%); }
.hero-content { position: relative; z-index: 1; }
.hero-location { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem; }
.hero-flag { font-size: 1rem; }
.hero-title { font-family: var(--font-head); font-size: clamp(3rem, 10vw, 6rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.01em; margin-bottom: 0.75rem; }
.hero-tagline { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1rem; }
.hero-updated { font-size: 0.8rem; color: var(--muted); }
.hero-updated strong { color: var(--teal); }
.stale-warning { color: var(--amber); }

/* ── SCORE SECTION ──────────────────────────────────────────────────────────── */
.score-section { padding: 1.5rem 0; }
.score-card { background: linear-gradient(135deg, rgba(0,201,177,0.1) 0%, rgba(0,201,177,0.03) 100%); border: 1px solid rgba(0,201,177,0.2); border-radius: var(--r-lg); padding: 1.75rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.score-left { display: flex; align-items: center; gap: 1.5rem; flex: 1; min-width: 260px; }
.score-ring-wrap { position: relative; width: 90px; height: 90px; flex-shrink: 0; }
.score-ring { width: 90px; height: 90px; }
.ring-track { stroke: rgba(255,255,255,0.08); }
.ring-fill { transition: stroke-dasharray 1s ease; }
.ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-score { font-family: var(--font-head); font-size: 2rem; font-weight: 900; line-height: 1; }
.ring-ten { font-size: 0.7rem; color: var(--muted); }
.score-rating { font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; }
.score-date { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.35rem; }
.score-summary { font-size: 0.9rem; color: var(--muted); line-height: 1.5; max-width: 380px; }
.score-right { flex-shrink: 0; }
.best-window-card { background: rgba(0,0,0,0.25); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 1rem 1.5rem; text-align: center; }
.bw-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; }
.bw-time { font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: var(--teal); line-height: 1; }
.bw-score { font-size: 0.8rem; color: var(--muted); margin-top: 0.25rem; }

/* ── METRICS GRID ───────────────────────────────────────────────────────────── */
.metrics-section { padding: 1.5rem 0; }
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.9rem; }
.metric-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 1.25rem; transition: border-color 0.2s, transform 0.2s; }
.metric-card:hover { border-color: rgba(0,201,177,0.3); transform: translateY(-2px); }
.metric-card.metric-highlight { border-color: rgba(0,201,177,0.3); background: rgba(0,201,177,0.06); }
.metric-icon { font-size: 1.25rem; margin-bottom: 0.5rem; }
.metric-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
.metric-value { font-family: var(--font-head); font-size: 2rem; font-weight: 800; line-height: 1; margin-bottom: 0.25rem; }
.metric-unit { font-size: 1rem; color: var(--muted); font-weight: 400; }
.metric-sub { font-size: 0.78rem; color: var(--muted); }
.tag-green  { color: var(--teal); font-weight: 600; }
.tag-orange { color: var(--amber); font-weight: 600; }

/* ── TIMELINE ───────────────────────────────────────────────────────────────── */
.timeline-section { padding: 1.5rem 0; }
.timeline-wrap { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-lg); padding: 1.5rem; }
.timeline-scroll { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 0.5rem; }
.timeline-scroll::-webkit-scrollbar { height: 4px; }
.timeline-scroll::-webkit-scrollbar-track { background: transparent; }
.timeline-scroll::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 2px; }
.hour-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; }
.hour-col.is-best .hour-label { color: var(--teal); font-weight: 700; }
.hour-col.is-best .hour-bar-wrap { box-shadow: 0 0 0 1.5px rgba(0,201,177,0.5); border-radius: 6px; }
.hour-label { font-size: 0.65rem; color: var(--muted); white-space: nowrap; }
.hour-bar-wrap { height: 72px; width: 32px; display: flex; align-items: flex-end; background: rgba(255,255,255,0.04); border-radius: 5px; overflow: hidden; }
.hour-bar { width: 100%; border-radius: 5px 5px 0 0; transition: height 0.8s ease; }
.hour-score { font-size: 0.72rem; font-weight: 700; }
.hour-wave  { font-size: 0.6rem; color: var(--muted); }
.timeline-legend { margin-top: 1rem; font-size: 0.72rem; color: var(--muted); display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ── TIDES ──────────────────────────────────────────────────────────────────── */
.tides-section { padding: 1.5rem 0; }
.tides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.9rem; }
.tide-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.9rem; }
.tide-icon { font-size: 1.75rem; }
.tide-type { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.tide-time { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.tide-height { font-size: 0.85rem; color: var(--teal); }

/* ── GUIDE SECTION ──────────────────────────────────────────────────────────── */
.guide-section { padding: 2.5rem 0; border-top: 1px solid var(--card-border); }
.guide-inner { display: grid; grid-template-columns: 1fr 280px; gap: 2.5rem; align-items: start; }
@media (max-width: 800px) { .guide-inner { grid-template-columns: 1fr; } }
.guide-heading { font-family: var(--font-head); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; margin-bottom: 1.25rem; }
.guide-facts { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.fact-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--card-border); font-size: 0.875rem; }
.fact-row:last-child { border-bottom: none; }
.fact-label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }
.fact-val { font-weight: 500; text-align: right; }
.guide-body p { font-size: 0.95rem; color: rgba(238,243,248,0.82); line-height: 1.75; margin-bottom: 1rem; }

/* Nearby sidebar */
.nearby-section { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-lg); padding: 1.25rem; }
.nearby-heading { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.nearby-card { display: flex; flex-direction: column; gap: 0.2rem; background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: var(--r-sm); padding: 0.75rem 1rem; margin-bottom: 0.6rem; transition: border-color 0.15s; }
.nearby-card:hover { border-color: rgba(0,201,177,0.3); }
.nearby-name   { font-weight: 600; font-size: 0.9rem; color: var(--white); }
.nearby-region { font-size: 0.75rem; color: var(--muted); }
.nearby-score  { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; margin-top: 0.25rem; }

/* ── AUTHOR BOX ─────────────────────────────────────────────────────────────── */
.author-box { border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); padding: 2rem 0; margin-top: 1rem; }
.author-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); display: flex; gap: 1.5rem; align-items: flex-start; }
.author-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--teal2)); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; color: var(--ocean); flex-shrink: 0; }
.author-content { flex: 1; }
.author-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); display: block; margin-bottom: 0.2rem; }
.author-name { font-family: var(--font-head); font-size: 1.25rem; font-weight: 800; color: var(--white); margin-bottom: 0.15rem; }
.author-title { font-size: 0.8rem; color: var(--teal); display: block; margin-bottom: 0.75rem; }
.author-bio { font-size: 0.875rem; color: var(--muted); line-height: 1.65; margin-bottom: 0.75rem; }
.author-links { font-size: 0.78rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.author-link-label { color: var(--white); font-weight: 500; }
.author-divider { color: var(--faint); }
@media (max-width: 600px) { .author-inner { flex-direction: column; } }

/* ── FOOTER ─────────────────────────────────────────────────────────────────── */
.site-footer { background: var(--deep); border-top: 1px solid var(--card-border); padding: 3rem 0 0; margin-top: 2rem; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad) 2rem; display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; }
@media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr; gap: 2rem; } }
.footer-tagline { font-size: 0.85rem; color: var(--muted); margin-top: 0.6rem; line-height: 1.6; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 500px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.footer-col h4 { font-family: var(--font-head); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.75rem; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.4rem; }
.footer-col a { font-size: 0.875rem; color: rgba(238,243,248,0.6); }
.footer-col a:hover { color: var(--teal); }
.footer-bottom { border-top: 1px solid var(--card-border); padding: 1.25rem var(--pad); }
.footer-bottom-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-data-credit { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.4rem; }
.footer-data-credit a { color: var(--faint); }
.footer-data-credit a:hover { color: var(--teal); }
.footer-legal { font-size: 0.72rem; color: var(--faint); line-height: 1.6; }

/* ── HOMEPAGE ───────────────────────────────────────────────────────────────── */
.home-hero { position: relative; padding: 5rem 0 4rem; overflow: hidden; text-align: center; }
.home-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(0,201,177,0.08) 0%, transparent 65%), linear-gradient(180deg, #07111f 0%, #0a1e36 100%); }
.home-hero-content { position: relative; z-index: 1; }
.home-title { font-family: var(--font-head); font-size: clamp(3.5rem, 10vw, 7rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.02em; margin-bottom: 1rem; }
.home-title-accent { color: var(--teal); }
.home-sub { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--muted); max-width: 600px; margin: 0 auto 1.5rem; line-height: 1.65; }
.home-stats { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; }
.home-stat { font-size: 0.85rem; color: var(--muted); }
.home-stat strong { color: var(--teal); font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; display: block; }

.country-section { padding: 2rem 0; }
.country-heading { font-family: var(--font-head); font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; border-bottom: 1px solid var(--card-border); padding-bottom: 0.6rem; }
.beach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.beach-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-lg); padding: 1.25rem 1.5rem; transition: border-color 0.2s, transform 0.2s; display: flex; flex-direction: column; gap: 0.6rem; }
.beach-card:hover { border-color: rgba(0,201,177,0.3); transform: translateY(-2px); color: var(--white); }
.beach-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.beach-card-name { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: var(--white); }
.beach-card-region { font-size: 0.78rem; color: var(--muted); }
.beach-card-score { text-align: right; }
.bcs-num { font-family: var(--font-head); font-size: 2rem; font-weight: 900; line-height: 1; }
.bcs-ten { font-size: 0.8rem; color: var(--muted); }
.bcs-loading { color: var(--faint); }
.beach-card-metrics { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); }
.bcs-label { font-weight: 600; }
.beach-card-cta { font-size: 0.8rem; color: var(--teal); font-weight: 500; }

.why-section { padding: 3rem 0; border-top: 1px solid var(--card-border); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.why-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-lg); padding: 1.5rem; }
.why-icon { font-size: 1.75rem; margin-bottom: 0.75rem; }
.why-card h3 { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; }
.why-card p { font-size: 0.875rem; color: var(--muted); line-height: 1.65; }

.data-note-section { padding: 1.5rem 0 2rem; }
.data-note { font-size: 0.8rem; color: var(--faint); line-height: 1.7; max-width: 800px; }
.data-note strong { color: var(--muted); }

/* ── 404 ─────────────────────────────────────────────────────────────────────── */
.not-found { padding: 6rem var(--pad); text-align: center; }
.not-found h1 { font-family: var(--font-head); font-size: 3rem; margin-bottom: 1rem; }

/* ── UTILITIES ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .score-card { flex-direction: column; }
  .score-left { flex-direction: column; text-align: center; align-items: center; }
  .score-summary { text-align: center; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
}

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(7,17,31,0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.07); }
.header-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* Logo */
.site-logo { display: flex; align-items: center; gap: 0.3rem; font-family: var(--font-head); font-size: 1.55rem; font-weight: 900; letter-spacing: 0.02em; line-height: 1; }
.logo-icon { color: var(--teal); font-size: 1.2rem; margin-right: 2px; transition: transform 0.3s ease; }
.site-logo:hover .logo-icon { transform: translateX(3px); }
.logo-surf  { color: var(--white); }
.logo-tidal { color: var(--teal); }

/* Desktop nav */

/* Hamburger */

/* Mobile menu */


/* ── FOOTER — updated styles ─────────────────────────────────────────────── */
.site-footer { background: var(--deep); border-top: 1px solid rgba(255,255,255,0.07); padding: 3.5rem 0 0; margin-top: 3rem; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad) 2.5rem; display: grid; grid-template-columns: 220px 1fr; gap: 4rem; align-items: start; }
@media (max-width: 750px) { .footer-inner { grid-template-columns: 1fr; gap: 2rem; } }

.footer-logo { font-size: 1.35rem; margin-bottom: 0.85rem; display: inline-flex; }
.footer-tagline { font-size: 0.875rem; color: var(--muted); line-height: 1.65; margin-bottom: 0.5rem; }
.footer-update-note { font-size: 0.75rem; color: var(--faint); }

.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 500px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.footer-col h4 { font-family: var(--font-head); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--white); margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a { font-size: 0.875rem; color: var(--muted); transition: color 0.15s; }
.footer-col a:hover { color: var(--teal); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding: 1.25rem var(--pad); }
.footer-bottom-inner { max-width: var(--max-w); margin: 0 auto; display: flex; flex-direction: column; gap: 0.35rem; }
.footer-legal     { font-size: 0.72rem; color: var(--faint); line-height: 1.7; }
.footer-data-attr { font-size: 0.72rem; color: var(--faint); }
.footer-data-attr a { color: var(--faint); text-decoration: underline; text-underline-offset: 3px; }
.footer-data-attr a:hover { color: var(--teal); }

/* ── HOMEPAGE — hero, tools, section heads ───────────────────────────────── */
.hero-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.75rem; }
.hero-cta-row { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 1.75rem; }
.btn-primary { display: inline-block; background: var(--teal); color: var(--ocean); font-weight: 700; font-size: 0.9rem; padding: 0.7rem 1.5rem; border-radius: 8px; transition: background 0.2s, transform 0.15s; letter-spacing: 0.02em; }
.btn-primary:hover { background: var(--teal2); color: var(--ocean); transform: translateY(-1px); }
.btn-ghost { display: inline-block; border: 1px solid rgba(255,255,255,0.18); color: var(--white); font-weight: 500; font-size: 0.9rem; padding: 0.7rem 1.5rem; border-radius: 8px; transition: border-color 0.2s, background 0.2s; }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); background: rgba(0,201,177,0.05); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.section-sub  { font-size: 0.9rem; color: var(--muted); margin-top: 0.2rem; }
.section-link { font-size: 0.85rem; font-weight: 500; color: var(--teal); white-space: nowrap; flex-shrink: 0; }
.section-link:hover { color: var(--teal2); }
.view-all-row { display: flex; justify-content: center; margin-top: 1.5rem; }

.featured-section { padding: 2.5rem 0; }
.tools-section    { padding: 2.5rem 0; border-top: 1px solid rgba(255,255,255,0.06); }

/* Tools grid */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.tool-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-lg); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; transition: border-color 0.2s, transform 0.2s; }
.tool-card:hover { border-color: rgba(0,201,177,0.35); transform: translateY(-2px); color: var(--white); }
.tool-icon  { font-size: 1.75rem; }
.tool-body  { flex: 1; }
.tool-title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 0.35rem; }
.tool-desc  { font-size: 0.82rem; color: var(--muted); line-height: 1.6; }
.tool-cta   { font-size: 0.8rem; font-weight: 600; color: var(--teal); }

/* ── NAVIGATION — single clean block, no conflicts ───────────────────────── */

/* Logo */
.site-logo { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-head); font-size: 1.55rem; font-weight: 900; letter-spacing: 0.02em; line-height: 1; text-decoration: none; }
.logo-icon  { color: var(--teal); font-size: 1.2rem; margin-right: 2px; transition: transform 0.3s ease; display: inline-block; }
.site-logo:hover .logo-icon { transform: translateX(3px); }
.logo-surf  { color: var(--white); }
.logo-tidal { color: var(--teal); }

/* Desktop nav — visible above 700px */
.site-nav { display: flex; align-items: center; gap: 0.25rem; }
.nav-link  { font-size: 0.875rem; font-weight: 500; color: var(--muted); padding: 0.45rem 0.8rem; border-radius: 6px; transition: color 0.15s, background 0.15s; white-space: nowrap; text-decoration: none; }
.nav-link:hover      { color: var(--white); background: rgba(255,255,255,0.06); }
.nav-link.nav-active { color: var(--teal); }

/* Hamburger button — hidden above 700px */
.nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; }
.hamburger-bar { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; transform-origin: center; }
.nav-toggle.is-open .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile dropdown menu */
.mobile-menu { display: flex; flex-direction: column; background: var(--deep); border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-menu[hidden] { display: none !important; }
.mobile-link { display: block; padding: 0.9rem 1.5rem; font-size: 0.95rem; font-weight: 500; color: var(--muted); border-left: 3px solid transparent; transition: color 0.15s, border-color 0.15s, background 0.15s; text-decoration: none; }
.mobile-link:hover      { color: var(--white); background: rgba(255,255,255,0.04); }
.mobile-link.nav-active { color: var(--teal); border-left-color: var(--teal); background: rgba(0,201,177,0.05); }

/* Switch at 700px — hide desktop nav, show hamburger */
@media (max-width: 700px) {
  .site-nav   { display: none; }
  .nav-toggle { display: flex; }
}

/* ── BEACH PAGE — new sections ───────────────────────────────────────────── */

/* Breadcrumb */
.hero-breadcrumb { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.hero-breadcrumb a { color: var(--muted); transition: color 0.15s; }
.hero-breadcrumb a:hover { color: var(--teal); }
.hero-breadcrumb span { color: var(--faint); }
.hero-title-sub { color: var(--teal); font-weight: 400; }

/* Section intro */
.section-intro { font-size: 0.88rem; color: var(--muted); margin-top: -0.75rem; margin-bottom: 1.25rem; line-height: 1.6; }

/* Tides note */
.tides-note { font-size: 0.75rem; color: var(--faint); margin-top: 0.85rem; }

/* Monthly breakdown */
.monthly-section { margin-top: 2rem; }
.monthly-heading { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.monthly-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
@media (max-width: 600px) { .monthly-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 380px) { .monthly-grid { grid-template-columns: repeat(3, 1fr); } }
.month-card { border-radius: var(--r-sm); padding: 0.6rem 0.4rem; text-align: center; border: 1px solid var(--card-border); background: var(--card); }
.month-name { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.25rem; }
.month-rating { font-size: 0.72rem; font-weight: 700; margin-bottom: 0.2rem; }
.month-note { font-size: 0.6rem; color: var(--muted); line-height: 1.3; display: none; }
.month-epic  .month-rating { color: #00c9b1; }
.month-great .month-rating { color: #5bc85b; }
.month-good  .month-rating { color: #f5a623; }
.month-fair  .month-rating { color: #f04e37; }
.month-epic  { border-color: rgba(0,201,177,0.3); background: rgba(0,201,177,0.07); }
.month-great { border-color: rgba(91,200,91,0.3); background: rgba(91,200,91,0.07); }
.month-good  { border-color: rgba(245,166,35,0.3); background: rgba(245,166,35,0.07); }
.month-fair  { border-color: rgba(240,78,55,0.3); background: rgba(240,78,55,0.07); }

/* Nearby card update */
.nearby-card { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: var(--r-sm); padding: 0.75rem 1rem; margin-bottom: 0.6rem; transition: border-color 0.15s; text-decoration: none; }
.nearby-card:hover { border-color: rgba(0,201,177,0.3); }
.nearby-name   { font-weight: 600; font-size: 0.9rem; color: var(--white); }
.nearby-region { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
.nearby-score  { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; flex-shrink: 0; }

/* ── FAQ SECTION ─────────────────────────────────────────────────────────── */
.faq-section { padding: 2.5rem 0; border-top: 1px solid rgba(255,255,255,0.06); }
.faq-list { max-width: 780px; margin-top: 1.25rem; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.07); }
.faq-item:first-child { border-top: 1px solid rgba(255,255,255,0.07); }
.faq-question { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; text-align: left; color: var(--white); font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; line-height: 1.4; transition: color 0.15s; }
.faq-question:hover { color: var(--teal); }
.faq-question[aria-expanded="true"] { color: var(--teal); }
.faq-icon { font-size: 1.3rem; font-weight: 300; color: var(--teal); flex-shrink: 0; line-height: 1; transition: transform 0.2s; }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 0 1.1rem; }
.faq-answer p { font-size: 0.9rem; color: rgba(238,243,248,0.75); line-height: 1.75; }

/* Metric note — small disclaimer under metric sub */
.metric-note { font-size: 0.68rem; color: var(--faint); margin-top: 4px; font-style: italic; }