/*
Theme Name: Hartland Area Project
Theme URI: https://hartlandareaproject.org
Author: Hartland Area Project
Author URI: https://hartlandareaproject.org
Description: A warm, action-first WordPress block theme for the Hartland Area Project community foundation. Cinematic video hero, full-bleed image scenes, and scroll animations grounded in the Crouse legacy; built for easy upkeep by a volunteer board.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 0.9.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hartland-area-project
*/

/* ─────────────────────────────────────────────────────────────────────────
   Ported from the approved prototype (design/preview/assets/site.css).
   theme.json carries the color/type/spacing tokens for the editor; this file
   carries the bespoke components (cinematic hero, scenes, banners, cards,
   galleries, scroll-reveal) that core blocks can't express on their own.
   Apply these class names to blocks via the "Additional CSS class(es)" field
   or via patterns.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --cream:#FAF6EE; --cream-2:#F2EBDB; --paper:#FFFFFF;
  --ink:#23201A; --ink-2:#564E41;
  --pine:#1D3A30; --pine-deep:#15281F;
  --amber:#E0992B; --amber-2:#F4B743;
  --clay:#B5481F; --clay-2:#9C3C18;
  --sage:#7C8A76; --line:#E5DBC8;
  --maxw:1140px; --r:14px;
  --sans:"Public Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
}
html{scroll-behavior:smooth}
.hap-eyebrow,.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin:0 0 14px}
.eyebrow.on-dark,.eyebrow--on-dark{color:var(--amber-2)}

/* Buttons (layered onto core button block via classes where needed) */
.btn{display:inline-flex;box-sizing:border-box;max-width:100%;align-items:center;gap:9px;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:16px;padding:13px 22px;border-radius:999px;border:1.5px solid transparent;text-decoration:none;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.btn--donate{background:var(--clay);color:#fff;box-shadow:0 6px 18px -8px rgba(181,72,31,.7)}
.btn--donate:hover{background:var(--clay-2);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--cream)}
.btn--ghost-light{background:transparent;color:var(--cream);border-color:rgba(255,255,255,.5)}
.btn--ghost-light:hover{background:var(--cream);color:var(--pine);border-color:var(--cream)}
.btn--sm{padding:10px 18px;font-size:15px}
.soon-pill{display:inline-block;font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--clay);padding:.6em 1.15em;border-radius:999px;box-shadow:0 6px 18px -8px rgba(181,72,31,.7)}

/* Layout container + utilities (restored from prototype) */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.muted{color:var(--ink-2)}
.textlink{color:var(--clay);font-weight:600;text-decoration:none;border-bottom:2px solid rgba(181,72,31,.25);padding-bottom:1px}
.textlink:hover{border-bottom-color:var(--clay)}
.crumbs{font-size:13px;color:var(--sage);font-weight:600;letter-spacing:.04em;margin-bottom:16px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--clay)}

/* Grids */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.split.wide-left{grid-template-columns:1.2fr .8fr}

/* Card / tile text */
.tile p,.card p{color:var(--ink-2);font-size:15.5px}
.tile h3,.card h3{margin-bottom:6px}

/* Checklist */
.checklist{margin:14px 0 22px;padding-left:0;list-style:none;color:var(--ink-2);font-size:15.5px}
.checklist li{padding:8px 0 8px 26px;position:relative;border-bottom:1px solid var(--line)}
.checklist li:last-child{border-bottom:0}
.checklist li::before{content:"";position:absolute;left:0;top:15px;width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(224,153,43,.18)}

/* Pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(250,246,238,.18);border-radius:var(--r);overflow:hidden}

/* People / board */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.person{text-align:center}
.person b{display:block;font-family:var(--serif);font-size:17px;font-weight:600}
.person span{font-size:13px;color:var(--ink-2)}
.person p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:9px auto 0;max-width:240px}
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* Prose */
.prose{max-width:72ch}
.prose h2{margin:36px 0 12px}
.prose h3{margin:28px 0 8px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;color:var(--ink-2)}
.prose li{margin:6px 0}

/* News */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.post .body{padding:22px}
.post .date{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--clay)}
.post h3{font-size:19px;margin:8px 0 10px}
.post p{font-size:14.5px;color:var(--ink-2);margin:0}

/* Donation widget + forms (inner pages) */
.donate-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:0 24px 50px -34px rgba(35,32,26,.45)}
.toggle{display:flex;gap:6px;background:var(--cream-2);border-radius:999px;padding:5px;margin-bottom:18px}
.toggle button{flex:1;border:0;background:transparent;padding:10px;border-radius:999px;font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--ink-2);cursor:pointer}
.toggle button.on{background:var(--clay);color:#fff}
.amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.amounts button{border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:14px 0;font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink);cursor:pointer}
.amounts button.on{border-color:var(--clay);background:rgba(181,72,31,.06);color:var(--clay)}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field select,.field input,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--sans);font-size:15px;background:var(--paper);color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.note{font-size:13px;color:var(--sage);margin-top:10px}
.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* FAQ */
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:4px 20px;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:600;padding:16px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{padding-bottom:16px;margin:0;color:var(--ink-2);font-size:15.5px}

/* Responsive */
@media (max-width:900px){
  .split,.split.wide-left{grid-template-columns:1fr;gap:28px}
  .g2,.g3,.g4,.news,.people,.pillars{grid-template-columns:1fr}
  .people{grid-template-columns:repeat(2,1fr)}
  .form .row2{grid-template-columns:1fr}
}

/* Spam honeypot — visually hidden, kept off-screen */
.hap-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* Form success/error notices */
.hap-msg{border-radius:12px;padding:14px 18px;margin:0 0 18px;font-size:15px;font-weight:500;border:1px solid}
.hap-msg--ok{background:#eef5ec;border-color:#bcd9b3;color:#2f5d28}
.hap-msg--err{background:#fbece7;border-color:#e9c3b4;color:#9c3c18}

/* Volunteer opportunity cards */
.op-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.op-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(35,32,26,.5)}
.op-card__img{display:block;width:100%;aspect-ratio:16/10;background-size:cover;background-position:center}
.op-card__body{display:flex;flex-direction:column;gap:7px;padding:20px 22px}
.op-card__org{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--clay)}
.op-card__title{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.2}
.op-card__meta{font-size:14px;color:var(--ink-2);line-height:1.5}
.op-card__slots{align-self:flex-start;font-size:12.5px;font-weight:700;background:rgba(224,153,43,.16);color:#8a5a00;padding:4px 11px;border-radius:999px}
.op-card__slots--full{background:#eee;color:var(--ink-2)}
.op-card__cta{margin-top:4px;font-weight:600;color:var(--clay)}

/* Header / nav */
header{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px solid var(--line)}
.nav{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:104px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand-logo{height:84px;width:auto;display:block}
.brand-logo--white{display:none}
.menu{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.menu a{text-decoration:none;font-weight:500;font-size:15.5px;color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--ink);border-bottom-color:var(--amber)}
.menu a.is-active{color:var(--ink);font-weight:600;border-bottom-color:var(--clay)}
body.has-hero header:not(.is-solid) .menu a.is-active{color:#fff;border-bottom-color:var(--amber-2)}
.nav-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--ink)}
/* white logo / light nav while floating over the hero */
body.has-hero header:not(.is-solid) .brand-logo--color{display:none}
body.has-hero header:not(.is-solid) .brand-logo--white{display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
/* legibility for light nav text over the bright video hero */
body.has-hero header:not(.is-solid) .menu a{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.55)}
body.has-hero header:not(.is-solid) .nav-cta .btn--ghost{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}
body.has-hero header:not(.is-solid) .burger{color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
/* While the header floats over the hero, drop the logo + buttons down so they breathe from the very top edge */
body.has-hero header:not(.is-solid) .nav{height:auto;padding-top:32px;padding-bottom:8px}
@media (max-width:900px){
  .nav{height:74px}
  .brand-logo{height:46px}
  .menu,.nav-cta .btn--ghost{display:none}
  .burger{display:block}
  .menu.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--cream);border-bottom:1px solid var(--line);box-shadow:0 18px 30px -22px rgba(21,40,31,.5);padding:6px 24px 14px;z-index:60}
  .menu.open a,
  body.has-hero header:not(.is-solid) .menu.open a{display:block;text-align:left;padding:15px 2px;font-size:16px;font-weight:600;color:var(--ink);text-shadow:none;border-bottom:1px solid var(--line)}
  .menu.open a:last-child{border-bottom:0}
  .menu.open a:hover{color:var(--clay)}
}

/* Cinematic hero — large historic image/video background */
.hero-cine{position:relative;min-height:86vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--pine-deep)}
.hero-cine .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.hero-cine .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,40,31,.28) 0%,rgba(21,40,31,.52) 50%,rgba(21,40,31,.90) 100%)}
.hero-cine .scrim::after{content:"";position:absolute;inset:0;background:radial-gradient(58% 60% at 84% 14%,rgba(244,183,67,.32),transparent 60%)}
.hero-cine .inner{position:relative;z-index:2;color:var(--cream);padding-top:150px;padding-bottom:64px}
.hero-cine h1{color:var(--cream);font-size:clamp(42px,6.6vw,80px);max-width:15ch}
.hero-cine .lead{color:rgba(250,246,238,.92);max-width:60ch;margin-top:16px}
.statstrip{display:flex;gap:46px;flex-wrap:wrap;padding:28px 24px}
.statstrip b{font-family:var(--serif);font-size:30px;font-weight:600;display:block;line-height:1;color:var(--pine)}
.statstrip span{font-size:13.5px;color:var(--ink-2);display:block;margin-top:6px;max-width:200px}
@media (max-width:900px){.hero-cine{min-height:76vh}.hero-cine .inner{padding-top:112px}}

@keyframes hap-kenburns{0%{transform:scale(1.03)}100%{transform:scale(1.17)}}
.hero-cine .bg{animation:hap-kenburns 26s ease-in-out infinite alternate;transform-origin:62% 42%}

/* Scroll reveal — blurred & offset until in view, then sharp */
.reveal{opacity:0;filter:blur(12px);transform:translateY(26px);transition:opacity .85s ease,filter .85s ease,transform .85s ease;will-change:opacity,filter,transform}
.reveal.in{opacity:1;filter:blur(0);transform:none}
@media (prefers-reduced-motion:reduce){.hero-cine .bg{animation:none}.reveal{opacity:1;filter:none;transform:none;transition:none}}

/* Full-viewport image scenes — fixed background, floating glass panel of text */
.scene{position:relative;min-height:100vh;display:flex;align-items:center;background-size:cover;background-position:center top;background-attachment:fixed}
.scene::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,40,31,.72),rgba(21,40,31,.26) 55%,rgba(21,40,31,.04))}
.scene.right::before{background:linear-gradient(270deg,rgba(21,40,31,.72),rgba(21,40,31,.26) 55%,rgba(21,40,31,.04))}
.scene.center{justify-content:center;text-align:center}
.scene.center::before{background:radial-gradient(130% 100% at 50% 50%,rgba(21,40,31,.42),rgba(21,40,31,.86))}
.scene .panel{position:relative;z-index:2;max-width:640px;color:var(--cream);text-shadow:0 2px 4px rgba(0,0,0,.6),0 4px 24px rgba(0,0,0,.5)}
.scene.right .panel{margin-left:auto}
.scene.center .panel{margin:0 auto;max-width:700px}
.scene .panel h2,.scene .panel h3{color:var(--cream)}
.scene .panel h2{font-size:clamp(34px,5vw,58px);line-height:1.08}
.scene .panel .lead{color:rgba(250,246,238,.92);margin-top:14px}
.scene .panel .eyebrow{color:var(--amber-2)}
.scene .panel .note{color:rgba(250,246,238,.78)}
.scene .panel .scene-list{list-style:none;margin:14px 0 0;padding:0}
.scene .panel .scene-list li{padding:10px 0;border-top:1px solid rgba(250,246,238,.18);font-size:15.5px}
.scene .panel .scene-list li b{font-family:var(--serif);color:var(--amber-2);font-weight:600}
@media (max-width:900px){.scene{background-attachment:scroll;background-position:center;min-height:auto;padding:72px 0}}
/* Per-scene desktop focal point: set --bpos inline on a .scene (e.g. style="--bpos:40%"); mobile stays center */
@media (min-width:901px){.scene{background-position:center var(--bpos,top)}}

/* Inner-page banner — image background, text floats over */
.banner{position:relative;min-height:54vh;display:flex;align-items:flex-end;background-size:cover;background-position:center top;overflow:hidden}
.banner::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,40,31,.28) 0%,rgba(21,40,31,.52) 50%,rgba(21,40,31,.90) 100%)}
.banner .wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:50px}
/* Text floats directly on the image — readability from the scrim + text-shadow + a soft glass */
.banner-panel{position:relative;max-width:680px;color:var(--cream);text-shadow:0 2px 4px rgba(0,0,0,.6),0 4px 24px rgba(0,0,0,.5)}
/* Soft feathered "glass" just behind the hero text — subtle backdrop-blur whose edges fade out (no hard box) */
.scene .panel::before,.banner-panel::before{content:"";position:absolute;z-index:-1;inset:-16px -22px;border-radius:28px;background:rgba(21,40,31,.18);-webkit-mask-image:radial-gradient(135% 128% at 50% 50%,#000 56%,transparent 100%);mask-image:radial-gradient(135% 128% at 50% 50%,#000 56%,transparent 100%)}
.banner h1{color:var(--cream);max-width:20ch;margin:0;font-size:clamp(42px,6.6vw,80px)}
.banner .lead{color:rgba(250,246,238,.92);margin-top:12px}
.banner .eyebrow{color:var(--amber-2)}
.banner-panel .crumbs{color:rgba(250,246,238,.7)}
.banner-panel .crumbs a{color:var(--amber-2)}
@media (max-width:900px){.banner{min-height:auto;background-position:center}.banner .wrap{padding-top:96px;padding-bottom:36px}}
/* Per-banner desktop focal point: set --bpos inline on a .banner (e.g. style="--bpos:22%")
   to shift its image down so a low subject/face shows. Defaults to top. Mobile keeps centered. */
@media (min-width:901px){.banner{background-position:center var(--bpos,top)}}
/* Optional full-bleed banner video (e.g. Volunteer). Sits under the gradient + panel.
   Plays on mobile too, like the homepage hero (poster image shows until it loads). */
.banner-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;border:0;background:var(--pine-deep)}
.banner--video::before{z-index:1}
@media (max-width:900px){.banner--video{min-height:46vh}}

/* Footer — horizontal columns on desktop, dark pine background */
footer{background:var(--pine-deep);color:rgba(250,246,238,.72);padding:58px 0 32px;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:36px;border-bottom:1px solid rgba(250,246,238,.14)}
footer h4{font-family:var(--sans);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-2);margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:10px}
footer a{text-decoration:none;color:rgba(250,246,238,.72)}
footer a:hover{color:var(--cream)}
.fbrand b{font-family:var(--serif);font-size:21px;color:var(--cream);font-weight:600}
.fbrand p{margin:14px 0 0;max-width:36ch;color:rgba(250,246,238,.6);font-size:14px}
.fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:22px;font-size:13px;color:rgba(250,246,238,.5)}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}

/* Transparent header floating over a full-bleed hero; solid once scrolled */
body.has-hero .wp-block-template-part:first-child header,
body.has-hero header{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom-color:transparent;transition:background .3s ease,border-color .3s ease}
body.has-hero header::after{content:"";position:absolute;left:0;right:0;top:0;height:240px;background:linear-gradient(180deg,rgba(21,40,31,.88),rgba(21,40,31,0));z-index:-1;pointer-events:none;transition:opacity .3s ease}
body.has-hero header.is-solid::after{opacity:0}
body.has-hero header.is-solid{background:var(--cream);border-bottom:1px solid var(--line)}

/* Keep the fixed/sticky header clear of the WP admin bar while logged in, so it
   doesn't slide under the bar and look cramped on scroll. Public visitors have no
   admin bar, so the default top:0 is correct for them. */
body.admin-bar header,
body.admin-bar.has-hero header{top:32px}
@media screen and (max-width:782px){
  body.admin-bar header,
  body.admin-bar.has-hero header{top:46px}
}

/* Sections / layout helpers */
.band{padding:72px 0}
.band--cream2{background:var(--cream-2)}
.band--pine{background:var(--pine);color:var(--cream)}
.sec-head{max-width:64ch;margin-bottom:40px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* Cards / tiles */
.card,.tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.tile{transition:transform .18s ease,box-shadow .18s ease}
.tile:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(35,32,26,.4)}
.card .tag,.tile .tag{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);margin-bottom:12px}

/* Pillars (3 tenants) */
.pillar{padding:32px 28px}
.pillar .num{font-family:var(--serif);font-size:15px;color:var(--amber-2);letter-spacing:.1em;font-weight:600}

/* Numbered steps */
.steps{counter-reset:step}
.step{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
.step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pine);color:var(--cream);font-family:var(--serif);font-weight:600;margin-bottom:12px}

/* Tables */
.table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:15.5px}
.table th,.table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
.table th{background:var(--cream-2);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pill{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:999px}
.pill--open{background:rgba(124,138,118,.2);color:var(--pine)}
.pill--soon{background:rgba(224,153,43,.18);color:var(--clay)}

/* Heritage gallery */
.gallery figure{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:grayscale(.08)}
.gallery figcaption{padding:13px 16px;font-size:13.5px;color:var(--ink-2);line-height:1.45}

/* People / board */
.avatar{width:104px;height:104px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;background:linear-gradient(150deg,var(--cream-2),#E7DCC6);border:1px solid var(--line);font-family:var(--serif);font-size:32px;font-weight:600;color:var(--pine)}

/* Callout / final CTA */
.callout{background:linear-gradient(160deg,var(--pine),var(--pine-deep));color:var(--cream);text-align:center;border-radius:24px;padding:60px 30px;position:relative;overflow:hidden}
.callout::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 50% 0%,rgba(244,183,67,.22),transparent 60%)}
.callout>*{position:relative}
.callout h2{color:var(--cream)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tile{transition:none}}

/* ── Organizer manage page (attendance) ── */
.mng-shift{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:16px}
.mng-shift h3{margin:0 0 8px}
.mng-shift .table{margin:0}

/* ── Giving: live-platform embed placeholder ── */
.give-embed__placeholder{border:2px dashed var(--line);border-radius:12px;padding:22px;text-align:center;background:var(--cream)}

/* ── Honorees (past award & scholarship recipients) ── */
.honoree-year{margin-bottom:48px}
.honoree-year__head{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--pine);padding-bottom:10px;margin:0 0 24px;border-bottom:2px solid var(--line)}
.honoree-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.honoree-card__photo{display:block;width:100%;aspect-ratio:4/5;background-size:cover;background-position:center top;background-color:var(--cream-2)}
.honoree-card__photo--blank{display:grid;place-items:center;font-family:var(--serif);font-size:54px;font-weight:600;color:var(--sage);background:linear-gradient(150deg,var(--cream-2),#E7DCC6)}
.honoree-card__body{display:flex;flex-direction:column;gap:5px;padding:18px 20px}
.honoree-card__award{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--clay)}
.honoree-card__name{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.2}
.honoree-card__blurb{font-size:14.5px;color:var(--ink-2);line-height:1.5;margin-top:2px}

/* ───────────────────────────────────────────────────────────────────────
   Volunteer Hub — shift scheduler (posting form, calendar, signup)
   ─────────────────────────────────────────────────────────────────────── */

/* Posting form: schedule fieldset */
.sched{border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 6px;margin:6px 0 14px;background:var(--cream)}
.sched>legend{font-family:var(--serif);font-size:18px;font-weight:600;padding:0 8px;color:var(--ink)}
.hap-when{margin-bottom:4px}
.hap-weekdays{display:flex;flex-wrap:wrap;gap:8px}
.hap-wd{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;color:var(--ink-2);background:var(--paper);cursor:pointer;user-select:none;transition:border-color .12s ease,background .12s ease}
.hap-wd:hover{border-color:var(--sage)}
.hap-wd input{width:auto;margin:0}
.hap-wd:has(input:checked){border-color:var(--pine);background:#eef3ef;color:var(--pine)}

/* Wide signup card so the calendar has room */
.donate-box--wide{padding:26px 28px}
@media (max-width:600px){.donate-box--wide{padding:18px 14px}}

/* At-a-glance details on the opportunity sidebar */
.op-detail{margin:6px 0;font-size:15.5px;color:var(--ink-2)}

/* ── FullCalendar theming to brand tokens ── */
.hap-calendar{
  --fc-border-color:var(--line);
  --fc-page-bg-color:var(--paper);
  --fc-neutral-bg-color:#faf7f0;
  --fc-today-bg-color:rgba(224,153,43,.12);
  --fc-button-text-color:#fff;
  --fc-button-bg-color:var(--pine);
  --fc-button-border-color:var(--pine);
  --fc-button-hover-bg-color:var(--pine-deep);
  --fc-button-hover-border-color:var(--pine-deep);
  --fc-button-active-bg-color:var(--pine-deep);
  --fc-button-active-border-color:var(--pine-deep);
  --fc-event-bg-color:#eef5ec;--fc-event-border-color:#bcd9b3;--fc-event-text-color:#2f5d28;
  font-family:var(--sans);
  margin:6px 0 8px;
}
.hap-calendar .fc{font-size:14.5px}
.hap-calendar .fc .fc-toolbar-title{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink)}
.hap-calendar .fc .fc-button{font-family:var(--sans);font-weight:600;text-transform:capitalize;border-radius:10px;box-shadow:none;padding:7px 13px}
.hap-calendar .fc .fc-button:focus{box-shadow:0 0 0 3px rgba(29,58,48,.25)}
.hap-calendar .fc .fc-col-header-cell-cushion{font-weight:700;color:var(--ink-2);text-decoration:none;padding:8px 4px}
.hap-calendar .fc .fc-daygrid-day-number{color:var(--ink-2);text-decoration:none;padding:6px 8px}
.hap-calendar .fc-theme-standard td,.hap-calendar .fc-theme-standard th{border-color:var(--line)}

/* Shift blocks (events) — instantly readable open / full / selected */
.hap-calendar .hap-blk{border-radius:8px;border-width:1px;border-style:solid;padding:2px 6px;font-weight:600;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease}
.hap-calendar .hap-blk .fc-event-title,.hap-calendar .hap-blk .fc-event-time{font-weight:600;white-space:normal}
.hap-calendar .hap-blk--open{background:#eef5ec;border-color:#bcd9b3;color:#2f5d28}
.hap-calendar .hap-blk--open:hover{box-shadow:0 6px 16px -8px rgba(47,93,40,.6);transform:translateY(-1px)}
.hap-calendar .hap-blk--full{background:#f0ece4;border-color:var(--line);color:#9a8f7d;cursor:not-allowed;opacity:.75}
.hap-calendar .hap-blk--selected{background:var(--clay)!important;border-color:var(--clay)!important;color:#fff!important;box-shadow:0 6px 16px -8px rgba(181,72,31,.7)}
.hap-calendar .hap-blk--selected .fc-event-title,.hap-calendar .hap-blk--selected .fc-event-time{color:#fff!important}
.hap-calendar .fc-daygrid-event-dot{display:none}

/* Selected-shifts summary */
.hap-selected{margin:18px 0 6px}
.hap-selected__head{font-family:var(--serif);font-size:18px;font-weight:600;margin:0 0 10px}
.hap-selected__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hap-selected__list li{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#eef5ec;border:1px solid #bcd9b3;border-radius:10px;padding:10px 14px;font-size:15px;color:#2f5d28}
.hap-selected__list li em{color:#8a5a00;font-style:normal;font-weight:700}
.hap-selected__rm{flex:none;width:26px;height:26px;border-radius:50%;border:0;background:rgba(47,93,40,.12);color:#2f5d28;font-size:18px;line-height:1;cursor:pointer}
.hap-selected__rm:hover{background:var(--clay);color:#fff}

/* Recurring-commitment widget */
.hap-recurring{border:1px dashed var(--line);border-radius:var(--r);padding:16px 18px 18px;margin:6px 0 4px;background:var(--cream)}
.hap-recurring__head{font-family:var(--serif);font-size:17px;font-weight:600;margin:0 0 4px}

/* Disabled submit (no shifts picked yet) */
.hap-signup-submit:disabled{background:var(--line);color:var(--ink-2);box-shadow:none;cursor:not-allowed;transform:none}

/* Light-background outline buttons (share / add recurring) */
.hap-share{margin-top:14px}
.btn--outline-clay,.hap-share__fb,.hap-share__copy,.hap-rec-add{background:transparent;color:var(--clay);border:1.5px solid var(--clay)}
.btn--outline-clay:hover,.hap-share__fb:hover,.hap-share__copy:hover,.hap-rec-add:hover{background:var(--clay);color:#fff;border-color:var(--clay)}

/* Mobile: roomier toolbar + tap targets (the board is mobile-sensitive) */
@media (max-width:900px){
  .hap-calendar .fc .fc-toolbar.fc-header-toolbar{flex-direction:column;gap:10px;align-items:stretch}
  .hap-calendar .fc .fc-toolbar-chunk{display:flex;justify-content:center}
  .hap-calendar .fc .fc-button{min-height:44px}
  .hap-calendar .fc .fc-toolbar-title{font-size:18px;text-align:center}
  .hap-wd{padding:10px 16px}
}