/* ============================================================================
 * beach.css — I SPY SUN dynamic Spain beach pages (v2)
 * Pairs with /style.css (which supplies the design tokens + base).
 * Matches the design template: .card + .card h3 (blue header bar), Orbitron
 * headings, Exo 2 body, --primary cyan. No emojis (icons supplied separately).
 *
 * Token fallbacks (real /style.css overrides these):
 * ==========================================================================*/
:root{
  --bg-main:#f0f4f8; --card-bg:#fff; --text-main:#0f172a; --text-muted:#475569;
  --primary:#0284c7; --accent-red:#dc2626; --accent-green:#059669; --border:#cbd5e1;
  --font-hd:'Orbitron',sans-serif; --font-body:'Exo 2',sans-serif;
}

/* ---- container ---- */
.container{ max-width:900px; margin:0 auto; padding:15px 15px 80px; }

/* ---- header (aligned to 900px content width, compact, LEFT-aligned) ---- */
header{ max-width:900px; margin:15px auto 0; background:var(--primary); color:#fff; border-radius:4px 4px 0 0; padding:7px 16px 8px; text-align:left; }
header h1{ font-family:var(--font-hd); color:#fff; font-size:clamp(1.1rem,2.8vw,1.4rem); letter-spacing:-.5px; font-weight:800; line-height:1.1; margin:0; text-align:left; }
header p{ font-family:var(--font-hd); font-size:.62rem; color:rgba(255,255,255,.85); letter-spacing:1.5px; text-transform:uppercase; margin:2px 0 0; text-align:left; }

/* ---- card ---- */
.card{ background:var(--card-bg); border:1px solid var(--border); padding:25px; margin:22px 0; border-radius:4px; box-shadow:0 4px 6px rgba(0,0,0,.02); }
.card h3{ font-family:var(--font-hd); color:#fff; margin:-25px -25px 18px; padding:5px 14px; font-size:.8rem; letter-spacing:1px; text-transform:uppercase; background:var(--primary); border-radius:4px 4px 0 0; font-weight:700; }

/* ---- stat grid (live + facility headline) ---- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; }
.stat-item{ background:#f8fafc; padding:14px 10px; border-radius:4px; text-align:center; }
.stat-item .lab{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); }
.stat-item .val{ font-family:var(--font-hd); font-size:21px; font-weight:800; color:#0f172a; margin-top:3px; }
.ss-load{ font-size:14px; color:var(--text-muted); }
.note{ margin-top:14px; font-size:13px; color:var(--text-muted); background:#e0f2fe; border-radius:4px; padding:10px 13px; line-height:1.5; }
.note b{ color:var(--primary); }

/* ---- sticky section nav ---- */
.sectnav{ position:sticky; top:0; z-index:50; max-width:900px; margin:0 auto 0; background:var(--primary); border-radius:0 0 4px 4px; border-bottom:1px solid rgba(255,255,255,.18); }
.sectnav-inner{ display:flex; gap:2px; max-width:900px; margin:0 auto; padding:0 6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.sectnav-inner::-webkit-scrollbar{ display:none; }
.sectnav a{ flex:0 0 auto; display:inline-flex; align-items:center; padding:11px 15px; font-family:var(--font-hd); font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.82); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; }
.sectnav a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.6); }
.sectnav .nv-short{ display:none; }
@media (max-width:560px){
  .sectnav a{ padding:10px 12px; font-size:11px; }
  .sectnav .nv-full{ display:none; }
  .sectnav .nv-short{ display:inline; }
}
#today,#sun,#guide,#weather,#facilities,#nearby{ scroll-margin-top:54px; }

/* ---- report / editorial (Vibe + Setting) ---- */
.report .intro,.report p:first-child{ }
.report p{ margin-bottom:13px; color:#1e293b; line-height:1.7; font-size:15.5px; }
.report h4{ font-family:var(--font-hd); font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--primary); margin:6px 0 8px; }
.report h4:first-child{ margin-top:0; }
.report em{ font-style:italic; } .report strong{ font-weight:700; }
/* read-more: collapse all but the first paragraph + first heading block */
.rep-collapse{ position:relative; max-height:8.5em; overflow:hidden; }
.rep-collapse.rep-open{ max-height:none; }
.rep-collapse:not(.rep-open)::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3em; background:linear-gradient(transparent,var(--card-bg)); }
.rep-more{ margin-top:10px; font-family:var(--font-hd); font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--primary); background:none; border:1px solid var(--border); border-radius:4px; padding:7px 13px; cursor:pointer; }
.rep-more:hover{ background:#f0f9ff; }

/* ---- AEMET forecast ---- */
.aemet-fc-proxy{ font-size:13px; color:var(--text-muted); margin-bottom:10px; }
.scroll{ overflow-x:auto; margin:0 -25px; } .scroll table{ min-width:520px; }
table.fc{ width:100%; border-collapse:collapse; }
table.fc th,table.fc td{ text-align:center; padding:9px 8px; border-bottom:1px solid var(--bg-main); font-size:13px; }
table.fc thead .day{ font-family:var(--font-hd); font-size:11px; font-weight:700; text-transform:uppercase; color:var(--primary); background:#e0f2fe; }
table.fc tbody th{ text-align:left; font-weight:700; padding-left:14px; white-space:nowrap; }
table.fc tbody tr:nth-child(even) td,table.fc tbody tr:nth-child(even) th{ background:#f8fafc; }
.tmax{ color:var(--accent-red); font-weight:700; }
.uv-chip{ display:inline-block; min-width:24px; padding:1px 6px; border-radius:3px; color:#fff; font-weight:700; font-size:12px; }
.uv-chip.uv-low{ background:var(--accent-green); } .uv-chip.uv-mod{ background:#d97706; } .uv-chip.uv-high{ background:var(--accent-red); }

/* ---- facilities (grouped) ---- */
.fac-group{ margin-bottom:16px; }
.fac-ghead{ font-family:var(--font-hd); font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--primary); margin:0 0 6px; padding-bottom:4px; border-bottom:1px solid #e0f2fe; }
table.fac{ width:100%; border-collapse:collapse; }
table.fac tr{ border-bottom:1px solid var(--bg-main); } table.fac tr:nth-child(even){ background:#f8fafc; }
table.fac td{ padding:10px 13px; font-size:14px; vertical-align:middle; }
.fac-lbl{ font-weight:600; width:60%; } .fac-val{ text-align:right; padding-right:14px; font-weight:700; }
.fac-sub{ font-size:12px; color:var(--text-muted); display:block; margin-top:2px; font-weight:400; }
.yes{ color:var(--accent-green); } .no{ color:var(--accent-red); } .unk{ color:var(--text-muted); }
.chip{ display:inline-block; padding:2px 10px; border-radius:4px; color:#fff; font-size:12px; font-weight:700; background:var(--text-muted); }
.chip.wq-excellent{ background:var(--accent-green); } .chip.wq-good{ background:#16a34a; }
.chip.wq-sufficient{ background:#d97706; } .chip.wq-poor{ background:var(--accent-red); } .chip.wq-unknown{ background:var(--text-muted); }

/* ---- sunnier nearby ---- */
.sun-near-list{ list-style:none; margin:0; padding:0; }
.sun-near-list li{ border-bottom:1px solid var(--bg-main); }
.sun-near-list a{ display:flex; justify-content:space-between; align-items:center; padding:11px 4px; font-size:14px; color:var(--text-main); text-decoration:none; }
.sun-near-list a:hover{ color:var(--primary); }
.sun-pill{ font-family:var(--font-hd); font-weight:700; color:#0f172a; font-size:13px; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
.sun-cond-ic{ width:22px; height:22px; display:inline-block; vertical-align:middle; }

/* ---- attractions ---- */
.attr-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; }
.attr{ background:#f8fafc; border-radius:4px; padding:12px 14px; }
.attr .nm{ font-weight:700; font-size:14px; }
.attr .meta{ font-size:12px; color:var(--text-muted); margin-top:3px; }
.attr .star{ color:#f59e0b; font-weight:700; }
.attr-map{ display:inline-block; margin-top:8px; font-size:12px; font-weight:700; color:var(--primary); text-decoration:none; }
.attr-map:hover{ text-decoration:underline; }

/* ---- sun times ---- */
.ss-sun{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; }
.ss-sun .lab{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); text-align:center; }
.ss-sun .val{ font-family:var(--font-hd); font-size:17px; font-weight:800; color:var(--primary); text-align:center; margin-top:2px; }

/* ---- companions ---- */
.companions{ } .comp-link{ display:block; padding:13px 16px; border:1px solid #d8e6f3; border-radius:4px; background:#f5faff; color:var(--primary); text-decoration:none; font-weight:600; font-size:.95rem; }
.comp-link:hover{ background:#eaf3fd; }

/* footer */
footer{ max-width:900px; margin:0 auto; padding:20px 15px; font-size:12px; color:var(--text-muted); line-height:1.6; }
footer strong{ color:var(--text-main); }

/* ============================================================================
 * Beach-day verdict + swimming block (inside the blue header)
 * ==========================================================================*/
.beach-day{ margin-top:10px; }
.bd-toggle{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); border-radius:6px; padding:7px 13px; cursor:pointer; font-family:var(--font-body); color:#fff; font-size:14px; line-height:1.2; text-align:left; max-width:100%; }
.bd-toggle:hover{ background:rgba(255,255,255,.18); }
.bd-c-verdict{ font-weight:800; }
.bd-c-sep{ opacity:.6; }
.bd-c-swim{ font-weight:700; padding:1px 8px; border-radius:4px; background:rgba(255,255,255,.18); white-space:nowrap; }
.bd-c-swim.sw-fav{ box-shadow:inset 3px 0 0 #34d399; } .bd-c-swim.sw-caution{ box-shadow:inset 3px 0 0 #fbbf24; }
.bd-c-swim.sw-poor{ box-shadow:inset 3px 0 0 #fb923c; } .bd-c-swim.sw-no{ box-shadow:inset 3px 0 0 #f87171; }
.bd-c-swim.sw-unknown{ box-shadow:inset 3px 0 0 #cbd5e1; }
.bd-c-more{ opacity:.8; font-size:12px; transition:transform .15s; }
.bd-open .bd-c-more{ transform:rotate(180deg); }
.bd-detail{ margin-top:8px; max-width:640px; color:#fff; background:rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.22); border-radius:6px; padding:12px 14px; }
.bd-d-line{ font-family:var(--font-hd); font-weight:800; font-size:1.05rem; line-height:1.2; margin-bottom:5px; }
.bd-d-sub{ font-size:13.5px; color:rgba(255,255,255,.92); margin-bottom:10px; line-height:1.5; }
.bd-d-swim{ font-size:13.5px; line-height:1.5; padding:8px 11px; border-radius:5px; background:rgba(255,255,255,.14); margin-bottom:10px; }
.bd-d-swim b{ color:#fff; }
.bd-d-swim.sw-no{ background:rgba(220,38,38,.30); border:1px solid rgba(255,255,255,.35); }
.bd-d-swim.sw-poor{ background:rgba(234,88,12,.28); } .bd-d-swim.sw-caution{ background:rgba(217,119,6,.24); }
.bd-d-caveat{ font-size:12px; color:rgba(255,255,255,.85); line-height:1.5; }
.bd-d-caveat a{ color:#fff; font-weight:700; text-decoration:underline; }
@media (max-width:560px){
  .bd-toggle{ display:flex; width:100%; }
  .bd-c-swim{ margin-left:auto; }
  .bd-detail{ max-width:100%; }
}

/* ---- misc ---- */
.attr-body{ min-width:0; }
.nz-content-frame{ margin:22px 0; min-height:0; }  /* NetAdZone slot (style.css may override) */


/* ---- weather icons (forecast Sky row + Sun times) ---- */
.sky-cell{ display:inline-flex; gap:3px; align-items:center; justify-content:center; }
.sky-ic{ width:34px; height:34px; vertical-align:middle; display:inline-block; }
.sky-tx{ font-size:12px; color:var(--text-muted); }
table.fc td .sky-cell{ line-height:1; }
.ss-sun .sun-ic{ display:block; margin:0 auto 2px; width:28px; height:28px; }


/* tighten top gap on report cards + bigger forecast text */
.card .report{ margin-top:2px; }
.card .rep-collapse > :first-child{ margin-top:0; }
table.fc th, table.fc td{ font-size:14px; }            /* bigger forecast text */
table.fc tbody th{ font-size:14px; }
.aemet-fc-proxy{ font-size:14px; }


/* ---- "Can I swim today?" merged line (in Conditions Now) ---- */
.swim-today{ margin-top:14px; padding:13px 15px; border-radius:6px; background:#f8fafc;
  border-left:4px solid var(--text-muted); }
.swim-today.sw-fav{ border-left-color:var(--accent-green); background:#f0fdf4; }
.swim-today.sw-caution{ border-left-color:#d97706; background:#fffbeb; }
.swim-today.sw-poor{ border-left-color:#ea580c; background:#fff7ed; }
.swim-today.sw-no{ border-left-color:var(--accent-red); background:#fef2f2; }
.swim-today.sw-unknown{ border-left-color:var(--text-muted); background:#f8fafc; }
.swim-q{ font-size:16px; line-height:1.3; margin-bottom:5px; }
.swim-label{ font-family:var(--font-hd); font-weight:700; color:var(--text-main); letter-spacing:.3px; }
.swim-level{ font-family:var(--font-hd); font-weight:800; }
.swim-level.sw-fav{ color:var(--accent-green); } .swim-level.sw-caution{ color:#b45309; }
.swim-level.sw-poor{ color:#c2410c; } .swim-level.sw-no{ color:var(--accent-red); }
.swim-level.sw-unknown{ color:var(--text-muted); }
.swim-body{ font-size:14.5px; color:#1e293b; line-height:1.5; margin-bottom:7px; }
.swim-caveat{ font-size:12.5px; color:var(--text-muted); line-height:1.5; }
.swim-caveat b{ color:var(--text-main); } .swim-caveat a{ color:var(--primary); font-weight:700; }

/* ---- report text: stronger specificity so it actually applies ---- */
.card .report p{ font-size:16px; line-height:1.75; color:#1e293b; }
.card .report h4{ font-size:13.5px; font-weight:700; }
.card.card .report .rep-collapse{ font-size:16px; }


/* ---- live synced time (top-right of Live Conditions header) ---- */
.card h3{ position:relative; }
.live-synced{ position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-family:var(--font-hd); font-size:11px; font-weight:700; letter-spacing:.5px;
  color:rgba(255,255,255,.92); text-transform:none; }
@media (max-width:560px){ .live-synced{ font-size:9.5px; right:10px; } }


/* ---- facility headline stats (Beach / Size / Setting) — tighter, consistent ---- */
.fac-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px; margin-bottom:16px; }
.fac-stat{ background:#f8fafc; padding:9px 12px; border-radius:4px; text-align:center; }
.fac-stat .lab{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-muted); }
.fac-stat .fval{ font-family:var(--font-hd); font-size:15px; font-weight:700; color:#0f172a;
  margin-top:3px; line-height:1.2; }

/* ---- facility rows: +2pt for readability ---- */
table.fac td{ font-size:15.5px; }
.fac-lbl{ font-size:15.5px; }
.fac-sub{ font-size:12.5px; }