/* ============================================================================
   legal.css — Sargazo Watch information & legal pages
   (Privacy · Terms · Disclaimer · Contact · About). Pairs with sitebar.css
   (top) and sitefoot.css (bottom). Self-contained document typography in the
   same turquoise / Manrope system as Forecast & Blog.
   ============================================================================ */
:root{
  --accent:#006d99; --accent-bright:#18a8c9;
  --ink:#0c1d28; --ink-soft:#41525d; --ink-faint:#7d8a93;
  --line:rgba(12,29,40,.10); --surface:#fff; --surface-warm:#f6f4ef;
  --radius:18px; --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(12,29,40,.06), 0 4px 14px rgba(12,29,40,.07);
  --shadow-md:0 6px 20px rgba(12,29,40,.10), 0 24px 60px rgba(12,29,40,.14);
  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:var(--font); color:var(--ink); background:var(--surface-warm); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---- breadcrumb ---- */
.lg-crumb{max-width:760px; margin:0 auto; padding:22px 24px 0; font-size:12.5px; font-weight:650; color:var(--ink-faint); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.lg-crumb a{color:var(--ink-faint);}
.lg-crumb a:hover{color:var(--accent); text-decoration:none;}
.lg-crumb .sep{opacity:.5;}
.lg-crumb .cur{color:var(--ink-soft);}

/* ---- document column ---- */
.lg-wrap{max-width:760px; margin:0 auto; padding:14px 24px 24px;}
.lg-head{padding:18px 0 26px; border-bottom:1px solid var(--line); margin-bottom:34px;}
.lg-eyebrow{font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 12px;}
.lg-head h1{font-size:clamp(30px,4.4vw,44px); line-height:1.04; letter-spacing:-.035em; font-weight:800; margin:0; text-wrap:balance;}
.lg-head .lg-lead{font-size:16.5px; line-height:1.55; color:var(--ink-soft); margin:16px 0 0; max-width:62ch;}
.lg-updated{margin-top:16px; font-size:12.5px; font-weight:700; color:var(--ink-faint); display:inline-flex; align-items:center; gap:8px;}
.lg-updated .dot{width:7px; height:7px; border-radius:50%; background:var(--accent-bright);}

/* sections */
.lg-sec{margin-top:38px;}
.lg-sec:first-of-type{margin-top:0;}
.lg-sec h2{font-size:21px; line-height:1.2; letter-spacing:-.02em; font-weight:800; margin:0 0 12px; scroll-margin-top:90px;}
.lg-sec h3{font-size:16px; font-weight:750; margin:22px 0 6px; color:var(--ink);}
.lg-sec p{font-size:15.5px; line-height:1.62; color:var(--ink-soft); margin:0 0 14px;}
.lg-sec p:last-child{margin-bottom:0;}
.lg-sec strong{color:var(--ink); font-weight:750;}
.lg-sec ul,.lg-sec ol{margin:0 0 14px; padding-left:22px;}
.lg-sec li{font-size:15.5px; line-height:1.6; color:var(--ink-soft); margin:6px 0;}
.lg-sec li strong{color:var(--ink);}
.lg-sec a{font-weight:650;}

/* table of contents (Privacy / Terms) */
.lg-toc{margin:0 0 8px; padding:18px 22px; border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm); border:1px solid rgba(12,29,40,.05);}
.lg-toc h4{margin:0 0 12px; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);}
.lg-toc ol{margin:0; padding:0; list-style:none; counter-reset:toc; columns:2; column-gap:30px;}
.lg-toc li{counter-increment:toc; margin:0 0 9px; font-size:14px; line-height:1.35; break-inside:avoid;}
.lg-toc li::before{content:counter(toc) ". "; color:var(--accent); font-weight:800;}
.lg-toc a{color:var(--ink-soft); font-weight:650;}
.lg-toc a:hover{color:var(--accent); text-decoration:none;}
@media (max-width:560px){ .lg-toc ol{columns:1;} }

/* callout box (disclaimers, key statements) */
.lg-note{margin:18px 0; padding:18px 20px; border-radius:var(--radius); background:#fbf6ec; border:1px solid #f0e3c8;}
.lg-note p{margin:0; font-size:14px; line-height:1.6; color:#6b5224;}
.lg-note p + p{margin-top:10px;}
.lg-note strong{color:#5a4111;}
.lg-note.accent{background:#eef5f8; border-color:#cfe6ee;}
.lg-note.accent p{color:#2c5a6e;}
.lg-note.accent strong{color:#06303f;}

/* definition rows (what we collect) */
.lg-deflist{margin:8px 0 16px; display:grid; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface);}
.lg-defrow{display:grid; grid-template-columns:200px 1fr; gap:18px; padding:15px 20px;}
.lg-defrow + .lg-defrow{border-top:1px solid var(--line);}
.lg-defrow dt{font-size:13.5px; font-weight:750; color:var(--ink); margin:0;}
.lg-defrow dd{margin:0; font-size:14px; line-height:1.55; color:var(--ink-soft);}
@media (max-width:560px){ .lg-defrow{grid-template-columns:1fr; gap:4px;} }

/* ---- contact form ---- */
.lg-form{margin-top:8px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-sm); border:1px solid rgba(12,29,40,.05); padding:26px 26px 28px;}
.lg-field{margin-bottom:18px;}
.lg-field:last-of-type{margin-bottom:0;}
.lg-field label{display:block; font-size:13px; font-weight:750; color:var(--ink); margin-bottom:7px;}
.lg-field label .req{color:var(--accent); font-weight:800;}
.lg-input,.lg-textarea,.lg-select{
  width:100%; font-family:var(--font); font-size:15px; color:var(--ink);
  background:#fbfcfd; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; transition:border-color .15s, box-shadow .15s; -webkit-appearance:none;
}
.lg-textarea{min-height:140px; resize:vertical; line-height:1.5;}
.lg-input:focus,.lg-textarea:focus,.lg-select:focus{outline:none; border-color:var(--accent-bright); box-shadow:0 0 0 3px rgba(24,168,201,.15);}
/* honeypot — hidden from real users, catches bots */
.lg-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.lg-submit{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--font);
  font-size:15px; font-weight:750; color:#fff; cursor:pointer;
  background:linear-gradient(180deg,#0a85b3,var(--accent)); border:none;
  padding:13px 26px; border-radius:999px; box-shadow:0 3px 12px rgba(0,109,153,.30);
  transition:transform .12s, filter .15s, opacity .15s;
}
.lg-submit:hover{filter:brightness(1.06); transform:translateY(-1px);}
.lg-submit:disabled{opacity:.55; cursor:default; transform:none; filter:none;}
.lg-formnote{margin-top:14px; font-size:12.5px; line-height:1.5; color:var(--ink-faint);}
.lg-status{margin-top:16px; padding:13px 16px; border-radius:var(--radius-sm); font-size:14px; font-weight:650; line-height:1.45; display:none;}
.lg-status.show{display:block;}
.lg-status.ok{background:#e8f6ee; border:1px solid #bfe6cd; color:#1d6b3c;}
.lg-status.err{background:#fbeaea; border:1px solid #efc9c9; color:#9a2a2a;}

/* contact side cards */
.lg-contactgrid{display:grid; grid-template-columns:1.25fr .85fr; gap:24px; align-items:start;}
@media (max-width:720px){ .lg-contactgrid{grid-template-columns:1fr;} }
.lg-side{display:flex; flex-direction:column; gap:16px;}
.lg-card{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-sm); border:1px solid rgba(12,29,40,.05); padding:20px 22px;}
.lg-card h3{margin:0 0 8px; font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--ink);}
.lg-card p{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-soft);}
.lg-card p + p{margin-top:10px;}
.lg-card a{font-weight:700;}

/* ---- FAQ (About) ---- */
.lg-faq{margin-top:10px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface);}
.lg-faq details{border-top:1px solid var(--line);}
.lg-faq details:first-child{border-top:none;}
.lg-faq summary{list-style:none; cursor:pointer; padding:17px 22px; font-size:15.5px; font-weight:750; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:14px;}
.lg-faq summary::-webkit-details-marker{display:none;}
.lg-faq summary .chev{flex:none; width:18px; height:18px; transition:transform .2s; color:var(--accent);}
.lg-faq details[open] summary .chev{transform:rotate(180deg);}
.lg-faq .ans{padding:0 22px 18px; font-size:14.5px; line-height:1.6; color:var(--ink-soft);}
.lg-faq .ans p{margin:0 0 10px;}
.lg-faq .ans p:last-child{margin-bottom:0;}

/* about feature rows */
.lg-feat{display:flex; gap:14px; align-items:flex-start; margin-top:18px;}
.lg-feat .ic{width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center; color:#fff; background:radial-gradient(120% 120% at 30% 20%, var(--accent-bright), var(--accent) 72%);}
.lg-feat h3{margin:0 0 3px; font-size:15px; font-weight:750;}
.lg-feat p{margin:0; font-size:14px; line-height:1.55; color:var(--ink-soft);}

/* back-to-map CTA reused from forecast */
.lg-cta{margin-top:40px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:20px 24px; border-radius:var(--radius); background:linear-gradient(120deg,#063b51,#006d99); color:#fff; box-shadow:var(--shadow-md);}
.lg-cta .ct{font-size:16px; font-weight:750;}
.lg-cta .cs{font-size:13px; opacity:.85; margin-top:2px;}
.lg-cta a.btn{margin-left:auto; background:#fff; color:var(--accent); font-weight:750; font-size:14px; padding:11px 20px; border-radius:999px; white-space:nowrap;}
.lg-cta a.btn:hover{text-decoration:none; transform:translateY(-1px);}
@media (max-width:600px){ .lg-cta a.btn{margin-left:0;} }