/* ==========================================================
   CARO — shared chrome
   Header, mobile navigation and footer. Loaded last on every
   page so it governs regardless of what each page declares.
   ========================================================== */

:root{
  --caro-g:#1a6b3c; --caro-g2:#228B4E; --caro-gp:#e8f5ee;
  --caro-ink:#0c1a0e; --caro-b:#d0eadb; --caro-t2:#3d5c42; --caro-t3:#7a9b80;
  --caro-r:10px;
}

/* no page may scroll sideways */
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%;height:auto}

/* ---------- header ---------- */
nav{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:0 clamp(14px,4vw,40px); height:64px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--caro-b);
}
nav .nl{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
nav .nl img{height:30px;width:auto;display:block}
nav .nl-w{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:19px;
  color:var(--caro-ink);letter-spacing:.01em;white-space:nowrap}

nav .nm{display:flex;align-items:center;gap:clamp(10px,1.6vw,24px);
  list-style:none;margin:0;padding:0;flex:1 1 auto;justify-content:center;min-width:0}
nav .nm li{flex:0 0 auto}
nav .nm a{font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:500;
  color:var(--caro-t2);text-decoration:none;white-space:nowrap;
  padding:6px 2px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
nav .nm a:hover{color:var(--caro-g)}
nav .nm a.active{color:var(--caro-g);font-weight:600;border-bottom-color:var(--caro-g)}

nav .nr{display:flex;align-items:center;gap:10px;flex:0 0 auto}
nav .nc{background:var(--caro-g);color:#fff;font-family:'Inter',system-ui,sans-serif;
  font-size:14px;font-weight:600;padding:9px 18px;border-radius:7px;
  text-decoration:none;white-space:nowrap;transition:background .15s}
nav .nc:hover{background:var(--caro-g2);text-decoration:none}
nav .nb{display:none;background:none;border:none;cursor:pointer;padding:7px;
  border-radius:7px;line-height:0}
nav .nb:hover{background:var(--caro-gp)}

/* ---------- mobile drawer ---------- */
.nav-mob{display:none;position:fixed;inset:0;z-index:600;
  background:rgba(12,26,14,.97);backdrop-filter:blur(12px);
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:env(safe-area-inset-top,0px) 20px env(safe-area-inset-bottom,0px);
  overflow-y:auto}
.nav-mob.open{display:flex}
.nav-mob a{font-family:'Playfair Display',Georgia,serif;font-size:clamp(19px,5vw,26px);
  color:#fff;text-decoration:none;padding:11px 28px;border-radius:var(--caro-r);
  width:100%;max-width:330px;text-align:center;transition:background .18s}
.nav-mob a:hover,.nav-mob a.active{background:rgba(255,255,255,.1);color:#7fdca6}
.nav-mob-close{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:20px;
  background:none;border:none;cursor:pointer;color:rgba(255,255,255,.65);
  font-size:30px;line-height:1;padding:6px}
.mob-donate{background:var(--caro-g)!important;color:#fff!important;margin-top:12px}

/* ---------- footer ---------- */
footer{padding:54px clamp(16px,5vw,48px) 30px;background:var(--caro-ink);
  border-top:1px solid rgba(255,255,255,.06);color:#9bbaa4;
  font-family:'Inter',system-ui,sans-serif}
footer a{color:#9bbaa4;text-decoration:none}
footer a:hover{color:#7fdca6;text-decoration:none}
footer .fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;
  max-width:1200px;margin:0 auto 36px}
footer .fl{display:flex;align-items:center;gap:9px;margin-bottom:14px}
footer .fl img{height:28px;width:auto}
footer .fl-t{font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:18px;color:#fff}
footer .ft{font-size:13.5px;line-height:1.7;color:#9bbaa4;margin:0 0 16px;max-width:42ch}
footer .fi{font-size:12px;line-height:1.8;color:#6e8c77}
footer .fc-t{font-family:'Inter',system-ui,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#7fdca6;margin-bottom:14px}
footer .flinks{list-style:none;padding:0;margin:0}
footer .flinks li{margin-bottom:9px;font-size:13.5px;line-height:1.5}
footer .fb{max-width:1200px;margin:0 auto;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;font-size:12.5px;color:#6e8c77}
footer .fsoc{display:flex;gap:9px}
footer .fsoc a{width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:#9bbaa4;text-transform:lowercase}
footer .fsoc a:hover{background:var(--caro-g);color:#fff}

/* ---------- breakpoints ---------- */

@media(max-width:1120px){
  nav .nm{display:none}
  nav .nb{display:block}
  nav .nm,nav .nr{flex:0 0 auto}
  nav{justify-content:space-between}
  footer .fg{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:620px){
  nav{height:58px;padding:0 14px}
  nav .nl img{height:26px}
  nav .nl-w{font-size:17px}
  nav .nc{padding:8px 14px;font-size:13px}
  footer{padding:44px 16px 26px}
  footer .fg{grid-template-columns:1fr;gap:28px}
  footer .fb{flex-direction:column;align-items:flex-start;text-align:left;gap:14px}
}
@media(max-width:400px){
  nav .nc{display:none}
}

/* ---------- back to top, on every page ---------- */
.caro-top{position:fixed;right:clamp(14px,3vw,26px);
  bottom:calc(clamp(14px,3vw,26px) + env(safe-area-inset-bottom,0px));
  z-index:400;width:44px;height:44px;border-radius:50%;
  background:var(--caro-g);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(12,26,14,.22);
  opacity:0;pointer-events:none;transition:opacity .22s}
.caro-top.on{opacity:1;pointer-events:auto}
.caro-top:hover{background:var(--caro-g2)}

/* ---------- long content never forces sideways scroll ---------- */
table{max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word}

/* ---------- shared buttons, so every page has them ---------- */
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-block;padding:13px 24px;border-radius:7px;font-weight:600;
  font-size:15px;font-family:'Inter',system-ui,sans-serif;text-decoration:none;
  line-height:1.2;transition:background .15s,border-color .15s,color .15s;cursor:pointer}
.btn-p{background:var(--caro-g);color:#fff;border:1px solid var(--caro-g)}
.btn-p:hover{background:var(--caro-g2);border-color:var(--caro-g2);color:#fff;text-decoration:none}
.btn-s{background:transparent;color:var(--caro-g);border:1px solid var(--caro-b)}
.btn-s:hover{border-color:var(--caro-g);color:var(--caro-g);text-decoration:none}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn-p{background:#2aad62;border-color:#2aad62;color:#07130c}
  :root:not([data-theme="light"]) .btn-s{color:#5ec98a;border-color:#1e3a28}
}
@media(max-width:480px){.cta{flex-direction:column}.btn{text-align:center}}

/* ---------- floating film player ---------- */
.caro-film{position:fixed;right:clamp(14px,3vw,26px);
  bottom:calc(clamp(72px,9vw,84px) + env(safe-area-inset-bottom,0px));
  z-index:390;width:260px;border-radius:12px;overflow:hidden;
  background:#000;border:1px solid rgba(0,0,0,.14);
  box-shadow:0 8px 28px rgba(12,26,14,.28);
  transform:translateY(12px);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s}
.caro-film.on{opacity:1;transform:none;pointer-events:auto}
.caro-film-bar{display:flex;align-items:center;justify-content:space-between;
  background:#0c1a0e;padding:7px 10px}
.caro-film-lab{font:600 10px/1 'Inter',system-ui,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.caro-film-btns{display:flex;gap:6px}
.caro-film-btn{background:rgba(255,255,255,.12);border:none;color:#fff;
  width:22px;height:22px;border-radius:5px;cursor:pointer;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.caro-film-btn:hover{background:rgba(255,255,255,.26)}
.caro-film video{display:block;width:100%;height:auto;background:#000}
@media(max-width:900px){.caro-film{display:none}}

.caro-film-modal{position:fixed;inset:0;z-index:900;background:rgba(12,26,14,.93);
  display:none;align-items:center;justify-content:center;padding:4vw}
.caro-film-modal.on{display:flex}
.caro-film-modal-inner{position:relative;width:100%;max-width:1000px}
.caro-film-modal video{width:100%;border-radius:12px;display:block;background:#000}
.caro-film-modal-close{position:absolute;top:-46px;right:0;background:rgba(255,255,255,.12);
  border:none;color:#fff;width:36px;height:36px;border-radius:8px;cursor:pointer;font-size:18px}