/* GSN Safety Services — 2026 site redesign
   Design tokens shared with the homepage preview artifact. */

:root{
  --navy-950:#30383B;
  --navy-800:#454F53;
  --navy-700:#687277;
  --green-600:#4C7A2E;
  --green-500:#6FA33D;
  --green-100:#E7F0DE;
  --paper:#F6F7F5;
  --card:#FFFFFF;
  --ink:#16233A;
  --slate:#55647A;
  --slate-soft:#7A879C;
  --line:#E1E5E0;
  --focus:#8FBF63;
  --green-700:#3D6224;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Aptos,'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:Aptos,'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.18;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
p{margin:0 0 1em; line-height:1.65; color:var(--slate);}
ul,ol{margin:0 0 1em; padding-left:1.3em; color:var(--slate); line-height:1.65;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

/* ---------- Utility bar (email/phone, every page) ---------- */
.util-bar{display:none;} /* 15 Sept 2026: email/phone removed from top bar - Contact button covers this */
.util-row{display:flex; justify-content:flex-end; gap:20px; padding:7px 28px;}
.util-row a{font-weight:600;}
.util-row a:hover{color:#fff;}

/* ---------- Header / nav (built from the toplevelmenu loop) ---------- */
.brand img.logo{height:76px; width:auto; display:block;}
.brand img.logo.logo-home{height:113px;}
header.site-header{
  background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:24px 28px;}
.brand{display:flex; align-items:center; gap:10px; font-family:Aptos,'Plus Jakarta Sans',sans-serif;}
.brand-mark{width:38px;height:38px;border-radius:10px; background:linear-gradient(155deg,var(--green-600),var(--green-500)); display:flex;align-items:center;justify-content:center;flex:none;}
.brand-mark svg{width:20px;height:20px;}
.brand-name{font-weight:800; font-size:1.12rem; line-height:1.05; color:var(--ink);}
.brand-name span{display:block; font-weight:600; font-size:.66rem; letter-spacing:.09em; color:var(--slate-soft); text-transform:uppercase;}

nav.primary{display:flex; align-items:center; gap:8px; position:relative; flex:1; padding:0 12px; justify-content:flex-end;}
nav.primary > .nav-item{position:relative;}
nav.primary a.nav-link{display:inline-block; padding:9px 16px; border-radius:8px; font-size:.83rem; font-weight:700; color:#fff; background:var(--green-700); white-space:nowrap; transition:background .15s,color .15s;}
nav.primary a.nav-link:hover, nav.primary a.nav-link:focus-visible, nav.primary a.nav-link:active{background:var(--green-600); color:#fff; outline:none;}
nav.primary a.nav-link:focus-visible, nav.primary a.nav-link:active{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--navy-950);}
.nav-item.current > a.nav-link{color:#fff; background:var(--green-700); box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--navy-950);}
.submenu{display:none; position:absolute; top:100%; left:0; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:6px; min-width:200px; box-shadow:0 12px 28px rgba(16,30,50,.12); z-index:50;}
.nav-item:hover .submenu, .nav-item:focus-within .submenu{display:block;}
.submenu a{display:block; padding:8px 10px; border-radius:6px; font-size:.88rem; color:var(--slate); font-weight:600;}
.submenu a:hover{background:var(--green-100); color:var(--green-600);}

.header-actions{display:flex; align-items:center; gap:8px; flex:none;}
.btn{display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-radius:9px; font-size:.83rem; font-weight:700; border:1.5px solid transparent; cursor:pointer; white-space:nowrap;}
.btn:focus-visible, .btn:active{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--navy-950);}
.btn-ghost{border-color:var(--line); color:var(--ink); background:transparent;}
.btn-ghost:hover{border-color:var(--navy-700); background:var(--paper);}
.btn-solid{background:var(--green-700); color:#fff;}
.btn-solid:hover{background:var(--green-600);}
.btn svg{width:16px;height:16px;flex:none;}

.mobile-toggle{display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:8px; cursor:pointer;}
.mobile-toggle svg{width:20px;height:20px;color:var(--ink);}

/* ---------- Hero (banner_top pages only) ---------- */
.hero{position:relative; overflow:hidden; background:radial-gradient(ellipse 900px 500px at 82% -10%, var(--navy-700), var(--navy-950) 60%); color:#fff;}
.hero-inner{position:relative; padding:56px 0;}
.hero-slides{position:relative; width:100%; aspect-ratio:16/6; min-height:260px; border-radius:0; overflow:hidden;}
.hero-slides img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease;}
.hero-slides img.is-active{opacity:1;}

/* ---------- Plain page header (no banner) ---------- */
.page-spacer{height:8px; background:var(--paper);}

/* ---------- Posts / News teaser cards ---------- */
.posts{padding:48px 0; background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.posts .section-eyebrow{max-width:700px;margin:0 auto 24px;text-align:center;}
.posts-grid{display:grid; gap:16px; grid-template-columns:repeat(var(--posts-cols,3),1fr);}
.posts-block{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:10px;}
.posts-block img{width:42px;height:42px;border-radius:10px;object-fit:cover;}
.posts-block .header{font-family:Aptos,'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:1.02rem; color:var(--ink);}
.posts-block p{margin:0; font-size:.92rem;}
.posts-block .shaded{margin-top:auto;}
.posts-block .shaded a{display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:700; color:var(--green-600);}
.green-large{display:none;} /* legacy bullet glyph no longer needed with card layout */

/* ---------- Main content (pagecontent HTML from the CMS) ---------- */
.content-home{padding:56px 0;}
.funny{max-width:760px; margin:0 auto;}
.funny h1{font-size:clamp(1.7rem,3vw,2.3rem); text-wrap:balance;}
.funny h2{font-size:1.35rem; margin-top:1.4em;}
.funny img.float-right{float:right; margin:0 0 20px 24px; max-width:220px; border-radius:14px;}
.funny img{border-radius:14px;}
.funny strong{color:var(--ink);}
.funny blockquote{margin:1.5em 0; padding:16px 20px; border-left:3px solid var(--green-500); background:var(--green-100); border-radius:0 10px 10px 0; font-style:italic; color:var(--ink);}
.funny table{border-collapse:collapse; width:100%; margin:1em 0;}
.funny table td, .funny table th{border:1px solid var(--line); padding:8px 10px; text-align:left;}

/* ---------- Post detail (posts-detail.php) ---------- */
.post-detail{padding:56px 0; max-width:760px; margin:0 auto;}
.post-detail h3{font-size:1.7rem;}
.post-detail .blue{margin-top:24px;}
.post-detail .blue a{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:9px; background:var(--green-700); color:#fff; font-weight:700; font-size:.9rem;}
.post-detail .blue img{display:none;}

/* ---------- RSS block (rare, kept functional) ---------- */
.posts h2{text-align:center; margin-bottom:24px;}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--navy-950); color:#9AA9C0; padding:24px 0 14px;}
.foot-grid{display:grid; grid-template-columns:repeat(4,1fr) 1.3fr; gap:24px; padding-bottom:14px; border-bottom:1px solid #1E3350; align-items:start;}
.foot-grid .large-text{display:block; color:#fff; font-family:Aptos,'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.92rem; margin-bottom:10px;}
.foot-grid p{color:#9AA9C0; font-size:.87rem; margin:0 0 4px;}
.foot-grid .legal a{display:block; color:#E7ECF5; font-size:.87rem; margin-bottom:6px;}
.foot-grid .legal a:hover{color:#fff;}
.foot-grid .logos img{height:120px; width:170px; object-fit:contain; background:#fff; border-radius:8px; padding:8px;}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:10px; font-size:.78rem; color:#71809A;}
.foot-bottom a{color:#9AA9C0;}
.foot-bottom a:hover{color:#fff;}

@media (max-width: 900px){
  nav.primary{display:none;}
  .mobile-toggle{display:inline-flex; align-items:center; justify-content:center;}
  .header-actions .btn-ghost{display:none;}
  .posts-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr; row-gap:24px;}
  .foot-grid .legal{grid-column:1 / -1;}
}
@media (max-width: 620px){
  .posts-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .header-actions .btn span.full{display:none;}
}

/* Mobile nav drawer, shown when body has .nav-open */
@media (max-width:900px){
  nav.primary.is-open{
    display:flex; flex-direction:column; align-items:stretch; gap:8px;
    position:absolute; top:100%; left:0; right:0; background:var(--card);
    border-bottom:1px solid var(--line); padding:8px 20px 16px; box-shadow:0 16px 28px rgba(16,30,50,.12);
  }
  nav.primary.is-open .submenu{position:static; display:block; box-shadow:none; border:none; padding-left:14px;}
}