/**
 * assets/site.css — shared stylesheet for every page on the site.
 *
 * WHY THIS EXISTS
 * Every hand-built page used to carry its own copy-pasted <style> block
 * (reset, header, sidebar nav, shell grid, footer, card components, etc.).
 * That meant a single tweak — like the sidebar's sticky offset, or the
 * card component's tag position — had to be repeated in ~15 files and
 * drifted out of sync in several of them. This file is the single source
 * of truth for that shared design system; pages link to it instead of
 * re-declaring it.
 *
 * HOW TO USE THIS IN A PAGE
 *   <link rel="stylesheet" href="assets/site.css">       (from the site root)
 *   <link rel="stylesheet" href="../assets/site.css">    (from /pages/)
 *   <link rel="stylesheet" href="../../assets/site.css"> (from /pages/articles/)
 *
 * Keep page-only styling (a page's unique hero, a one-off widget, iframe
 * aspect-ratio tweaks, etc.) in that page's own <style> block. Only put
 * something here once it's genuinely shared by more than one page.
 */

:root{
  --navy:#0b1e3d;
  --navy-deep:#081530;
  --sky:#3b7dd8;
  --sky-light:#eaf2fd;
  --amber:#f2a13a;
  --amber-light:#fdf1e0;
  --strong:#c23b3b;
  --strong-light:#fbe7e7;
  --ink:#101826;
  --ink-soft:#5b6472;
  --paper:#f6f7fb;
  --white:#ffffff;
  --line:#e4e8f0;
  --radius:18px;
  --shadow:0 20px 50px -20px rgba(11,30,61,0.25);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Manrope', sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Inter', sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
p{color:var(--ink-soft); line-height:1.6; font-size:14.5px;}

/* ===== Top utility bar ===== */
.topbar{
  background:var(--navy-deep);
  color:#c9d6ef;
  font-size:12.5px;
  padding:8px 32px;
  display:flex;
  justify-content:flex-end;
  letter-spacing:.02em;
}
.topbar .socials{display:flex; align-items:center; gap:14px;}
.topbar .socials a{display:flex; opacity:.8; color:#c9d6ef; transition:opacity .15s, color .15s;}
.topbar .socials a:hover{opacity:1; color:#fff;}
.topbar .socials svg{width:15px; height:15px; display:block;}

/* ===== Header (brand + actions) ===== */
header.main{
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:18px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:50;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand .mark{
  width:42px; height:42px; border-radius:12px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
}
.brand .mark img{width:100%; height:100%; object-fit:contain;}
.brand .name{font-family:'Inter', sans-serif; font-weight:800; font-size:20px; line-height:1; letter-spacing:-0.02em;}
.brand .name small{display:block; font-family:'Manrope',sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.14em; color:var(--sky); margin-top:3px;}

.header-actions{display:flex; align-items:center; gap:14px;}

/* Admin/account shortcut — injected by shared/nav.js, only shown once
   Netlify Identity confirms someone is logged in. Hidden by default so
   logged-out visitors never see it; .show is toggled in JS. Lives in
   the main header as a labeled pill (not a bare 15px topbar glyph) so
   it's actually easy to find once someone's logged in. */
.admin-link{
  display:none;
  align-items:center; gap:7px;
  padding:8px 14px;
  border-radius:999px;
  background:var(--navy-deep);
  color:#fff;
  font-size:13px; font-weight:700;
  white-space:nowrap;
  transition:background .15s, transform .15s;
}
.admin-link.show{display:flex;}
.admin-link:hover{background:var(--sky); transform:translateY(-1px);}
.admin-link svg{width:16px; height:16px; flex:none;}

/* ===== Mobile hamburger + drawer nav ===== */
.hamburger{
  display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:40px; height:40px; flex:none;
  border:1px solid var(--line); border-radius:10px;
  background:var(--white); cursor:pointer; padding:0;
}
.hamburger span{
  display:block; width:18px; height:2px; border-radius:2px;
  background:var(--navy);
  transition:transform .25s ease, opacity .2s ease;
}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.nav-backdrop{
  position:fixed; inset:0; background:rgba(8,16,32,.5);
  z-index:100; opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.nav-backdrop.show{opacity:1; pointer-events:auto;}

.sidenav-mobile-head{display:none;}

/* ===== Layout shell — identical across every page, so the left nav
   never shifts horizontally when navigating between pages ===== */
.shell{
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 380px;
  grid-template-areas:"nav main aside";
  gap:26px;
  max-width:1400px;
  margin:32px auto;
  padding:0 32px;
  align-items:start;
}
/* Pages with no aside.rail (e.g. the Articles listing) don't need the
   380px column .shell reserves for it — drop that track so main spreads
   across the full width instead of leaving it blank. */
.shell.shell-wide{
  grid-template-columns:220px minmax(0,1fr);
  grid-template-areas:"nav main";
}

/* ===== Left icon sidebar ===== */
.sidenav{
  grid-area:nav;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:sticky;
  top:96px;
}
.sidenav a, .sidenav button.nav-toggle{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:12px 14px;
  border-radius:12px;
  font-size:13.5px; font-weight:700;
  color:var(--ink-soft);
  transition:.2s;
  background:none; border:none; cursor:pointer;
  font-family:'Manrope', sans-serif;
  text-align:left;
}
.sidenav a .ico{
  width:20px; height:20px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.sidenav a .ico img, .sidenav .nav-toggle .ico img{width:20px; height:20px; object-fit:contain;}
.sidenav a.active .ico img{filter:brightness(0) invert(1);}
.sidenav a:hover, .sidenav button.nav-toggle:hover{background:var(--sky-light); color:var(--sky);}
.sidenav a.active{background:var(--navy); color:white;}

.nav-toggle{justify-content:space-between;}
.nav-toggle .toggle-left{display:flex; align-items:center; gap:12px;}
.nav-toggle .chev{
  display:flex; align-items:center; justify-content:center;
  width:16px; height:16px; opacity:.85; transition:transform .3s ease, opacity .2s ease;
  flex:none;
}
.nav-toggle .chev img{width:16px; height:16px; object-fit:contain;}
.nav-toggle.open{background:var(--navy); color:white;}
.nav-toggle.open .chev{transform:rotate(180deg); opacity:.9;}

.submenu{
  max-height:0; overflow:hidden;
  transition:max-height .38s cubic-bezier(.65,0,.35,1);
  display:flex; flex-direction:column;
  padding-left:16px;
}
/* Applied briefly on page load when the submenu starts open, so the
   initial state is set instantly with no slide animation. Removed right
   after, so user clicks on the toggle still animate normally. */
.submenu.no-transition{transition:none !important;}
.submenu a{
  padding:9px 14px; font-size:12.5px; font-weight:600;
  color:var(--ink-soft); border-radius:10px;
}
.submenu a:hover{background:var(--sky-light); color:var(--sky);}
.submenu a.on{color:var(--sky); background:var(--sky-light); font-weight:700;}

/* ===== Main column ===== */
main{grid-area:main; display:flex; flex-direction:column; gap:26px; min-width:0;}

/* ===== Right rail ===== */
aside.rail{grid-area:aside; display:flex; flex-direction:column; gap:20px; position:sticky; top:96px;}
.rail-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
}
.rail-card h3{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;}
.rail-card p{font-size:12.5px; margin-bottom:14px;}
.cam-item{
  display:block; padding:0 0 16px; margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.cam-item:last-child{border:none; padding-bottom:0; margin-bottom:0;}
.cam-thumb{
  width:100%; height:150px; border-radius:12px; position:relative; overflow:hidden;
  background-size:cover; background-position:center; margin-bottom:10px;
}
.cam-thumb[data-youtube]{cursor:pointer;}
.cam-thumb iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.cam-thumb .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(8,16,32,0) 40%, rgba(8,16,32,.55) 100%);
  color:white; font-size:15px;
}
.cam-thumb .play span{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(2px);
}
.cam-name{font-size:14.5px; font-weight:800;}
.cam-loc{font-size:12px; color:var(--ink-soft); margin-top:2px;}

footer{
  background:var(--navy-deep); color:#93a1c4; margin-top:50px;
  padding:40px 32px; text-align:center;
}
footer p{color:#93a1c4; max-width:640px; margin:0 auto; font-size:13px;}

@media (max-width: 1100px){
  .shell, .shell.shell-wide{
    grid-template-columns:200px minmax(0,1fr);
    grid-template-areas:
      "nav main"
      "nav aside";
  }
  .shell.shell-wide{grid-template-areas:"nav main";}
  aside.rail{position:static;}
}
@media (max-width:640px){
  .shell, .shell.shell-wide{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"main" "aside";
    gap:16px; padding:0 16px;
  }
  .shell.shell-wide{grid-template-areas:"main";}
  .hamburger{display:flex;}
  .admin-link span{display:none;}
  .admin-link{padding:8px; border-radius:50%;}
  .sidenav-mobile-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding:0 6px;}
  .sidenav-mobile-head .hamburger{display:flex;}
  .sidenav{
    position:fixed; top:0; right:0; bottom:0;
    width:84%; max-width:320px;
    border-radius:0; border:none; border-left:1px solid var(--line);
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.65,0,.35,1);
    z-index:110;
    overflow-y:auto;
    padding:18px 16px 28px;
    box-shadow:var(--shadow);
  }
  .sidenav.open{transform:translateX(0);}
}

/* ===== Page header (breadcrumb + title + intro) ===== */
.breadcrumb{font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:6px;}
.breadcrumb a{color:var(--sky);}
.breadcrumb span{opacity:.5; margin:0 6px;}
.page-title{font-size:30px; margin-bottom:6px;}
.page-intro{max-width:680px; margin-bottom:22px;}

/* ===== Embedded tool card (iframe-based weather tools) ===== */
.tool-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.tool-card .frame-wrap{
  position:relative; width:100%; padding-top:62%; background:#0a1c3b;
}
.tool-card .frame-wrap iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.tool-card .tool-foot{
  padding:16px 20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
}
.tool-foot .src{font-size:12px; color:var(--ink-soft);}
.tool-foot .src a{color:var(--sky); font-weight:700;}

.tools-list a{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 4px; border-bottom:1px solid var(--line);
  font-size:13.5px; font-weight:700; color:var(--ink);
}
.tools-list a:last-child{border:none;}
.tools-list a:hover{color:var(--sky);}
.tools-list a .arrow{opacity:.4; font-weight:400;}
.tools-list a.on{color:var(--sky);}

/* ===== News / article card — used on the homepage feed and the
   Articles listing ===== */
.news-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:18px;
}
.news-grid.row2{grid-template-columns:repeat(4, 1fr); margin-top:18px;}

/* Simple, uniform article grid — same .card look, auto-fills instead of
   the homepage's fixed feature layout. Used on the homepage's "Latest
   Forecasts" teaser (2-up at this container width, via the aside-fed
   .shell). The Articles listing page opts into 3-up, full width instead
   via the .wide modifier below, since that page has no aside to share
   width with. */
.articles-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:20px;
}
.articles-grid.wide{grid-template-columns:repeat(3, 1fr);}

.card{
  border-radius:14px; overflow:hidden; position:relative;
  background:var(--navy); color:white; box-shadow:var(--shadow);
  min-height:230px; display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card.tall{min-height:340px;}
.card:hover{transform:translateY(-3px); box-shadow:0 26px 55px -22px rgba(11,30,61,.4);}
.card .photo{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:saturate(1.05);
}
.card .scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 30%, rgba(4,12,26,.9) 100%);
}
.card .content{position:relative; padding:16px;}
.card .tag{
  position:absolute; top:14px; left:14px; z-index:2;
  display:inline-block; background:var(--sky); color:white; font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:6px;
}
.card h3{font-size:16.5px; font-weight:600; line-height:1.3;}
.card .excerpt{font-size:12.5px; color:rgba(255,255,255,.75); margin-top:8px; line-height:1.5;}
.card .date{font-size:11.5px; opacity:.7; margin-top:10px; font-weight:600;}

@media (max-width: 1100px){
  .news-grid, .news-grid.row2{grid-template-columns:1fr 1fr;}
  .articles-grid.wide{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .news-grid, .news-grid.row2{grid-template-columns:1fr;}
  .articles-grid, .articles-grid.wide{grid-template-columns:1fr;}
}

/* ===== Article page (single post) — hero image, lead paragraph, body
   copy and the "back to articles" link. Used by hand-written articles
   and by every article page generate-articles.js produces. ===== */
.article-hero{
  position:relative; border-radius:var(--radius); overflow:hidden;
  min-height:340px; display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--navy); color:white; box-shadow:var(--shadow);
}
.article-hero .photo{
  position:absolute; inset:0; background-size:cover; background-position:center 35%;
  filter:saturate(1.05);
}
.article-hero .scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,16,32,.15) 0%, rgba(4,12,26,.55) 55%, rgba(4,12,26,.94) 100%);
}
.article-hero .tag{
  position:absolute; top:18px; left:18px; z-index:2;
  display:inline-block; background:var(--sky); color:white; font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:6px;
}
.article-hero .hero-content{position:relative; padding:28px 28px 24px;}
.article-hero h1{font-size:27px; line-height:1.25; color:#fff;}
.article-hero .hero-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:14px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.8);
}
.article-hero .hero-meta .dot{opacity:.5;}
.article-hero .hero-meta .avatar{
  width:22px; height:22px; border-radius:50%; background:var(--amber);
  display:flex; align-items:center; justify-content:center; color:var(--navy-deep);
  font-size:10.5px; font-weight:800;
}

.lead{
  font-size:16.5px; line-height:1.65; color:var(--ink); font-weight:500;
  margin:24px 0 6px;
}

.prose{margin-top:22px;}
.prose > p{margin-bottom:16px;}
.prose h2{font-size:19px; margin:30px 0 14px;}
.prose h3{font-size:17px; margin:26px 0 12px;}
.prose h4{font-size:15px; margin:22px 0 10px;}

.prose img{max-width:100%; height:auto; border-radius:12px; display:block;}
.prose p img{margin:8px 0;}
.prose figure.prose-image{margin:22px 0;}
.prose figure.prose-image img{width:100%; max-height:420px; object-fit:cover;}

.prose blockquote{
  margin:20px 0; padding:2px 18px; border-left:3px solid var(--sky);
  color:var(--ink-soft); font-style:italic;
}
.prose blockquote p{margin-bottom:0;}

.prose ul, .prose ol{margin:4px 0 16px 22px;}
.prose li{margin-bottom:8px; line-height:1.6;}

.prose code{
  background:var(--sky-light); color:var(--navy); padding:2px 5px;
  border-radius:4px; font-size:0.9em;
}
.prose pre{
  background:var(--navy-deep); color:#e8ecf5; padding:14px 16px;
  border-radius:10px; overflow-x:auto; margin:18px 0; font-size:13px; line-height:1.55;
}
.prose pre code{background:none; color:inherit; padding:0;}

.author-box{
  display:flex; align-items:center; gap:14px;
  margin-top:34px; padding-top:24px; border-top:1px solid var(--line);
}
.author-box .avatar{
  width:46px; height:46px; border-radius:50%; background:var(--amber);
  display:flex; align-items:center; justify-content:center; color:var(--navy-deep);
  font-family:'Inter',sans-serif; font-weight:800; font-size:16px; flex:none;
}
.author-box .name{font-weight:800; font-size:14px; color:var(--ink);}
.author-box .role{font-size:12px; color:var(--ink-soft); margin-top:2px;}

.back-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:28px;
  font-size:13px; font-weight:700; color:var(--sky);
}

@media (max-width:560px){
  .article-hero{min-height:300px;}
  .article-hero h1{font-size:23px;}
  .article-hero .hero-content{padding:22px 20px 20px;}
}