/* ============================================================
   TREVOR OZAWA — City Council District 4
   Shared brand foundation  ·  v1.0
   Palette + type + reusable marks (iwa bird, wave, wordmark)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  /* Core palette — from brand standards guide */
  --navy:#012060;        /* Primary Navy   */
  --ocean:#C7D9F2;       /* Ocean Blue bg  */
  --wave:#0A2E7A;        /* Wave Blue      */
  --red:#D71920;         /* Campaign Red   */
  --white:#FFFFFF;

  /* Derived tints (kept in-family, oklch-harmonious) */
  --ocean-50:#EAF2FB;
  --ocean-100:#DCE9F8;
  --ocean-200:#C7D9F2;
  --ocean-300:#A7C2E8;
  --sky:#9FC0E8;
  --navy-90:rgba(1,32,96,.90);
  --navy-70:rgba(1,32,96,.70);
  --navy-50:rgba(1,32,96,.50);
  --ink:#0B1B3A;
  --paper:#F7FAFE;
  --hair:rgba(1,32,96,.14);

  /* Type */
  --display:'Anton',system-ui,sans-serif;     /* heavy condensed — wordmark/hero */
  --head:'Oswald',system-ui,sans-serif;        /* condensed headings */
  --body:'Montserrat',system-ui,sans-serif;    /* body / UI */

  --r-lg:22px;
  --r-md:14px;
  --r-sm:10px;
  --shadow:0 18px 50px -22px rgba(1,32,96,.45);
  --shadow-sm:0 8px 24px -14px rgba(1,32,96,.4);
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--navy);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* ---- Faux-italic condensed display (matches the OZAWA wordmark) ---- */
.italic-condensed{ font-style:normal; transform:skewX(-9deg); transform-origin:left bottom; display:inline-block; }

/* ============================================================
   WORDMARK LOCKUP  (rendered by ozawa-brand.js into [data-logo])
   ============================================================ */
/* Real logo artwork (PNG injected by ozawa-brand.js) */
.ozlogo{ display:inline-flex; line-height:0; user-select:none; }
.ozlogo .logo-img{ display:block; width:auto; height:74px; }

.navmark{ display:inline-flex; align-items:center; text-decoration:none; line-height:0; }
.navmark .logo-img{ display:block; width:auto; height:46px; }

/* Standalone 'iwa bird artwork */
[data-iwa] img{ width:100%; height:auto; display:block; }

/* ============================================================
   BUTTONS  (per brand: primary navy/white, secondary white/navy border)
   ============================================================ */
.btn{
  font-family:var(--head); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  font-size:.92rem; border:0; border-radius:var(--r-sm); padding:.85em 1.6em;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.5em;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s;
}
.btn:active{ transform:translateY(1px) scale(.99) }
.btn--primary{ background:var(--navy); color:var(--white); }
.btn--primary:hover{ background:var(--wave); box-shadow:var(--shadow-sm); transform:translateY(-1px) }
.btn--red{ background:var(--red); color:var(--white); }
.btn--red:hover{ background:#b8141b; box-shadow:0 10px 28px -14px rgba(215,25,32,.7); transform:translateY(-1px) }
.btn--ghost{ background:transparent; color:var(--navy); border:2px solid var(--navy); }
.btn--ghost:hover{ background:var(--navy); color:var(--white); transform:translateY(-1px) }
.btn--ghost-light{ background:transparent; color:var(--white); border:2px solid rgba(255,255,255,.7); }
.btn--ghost-light:hover{ background:var(--white); color:var(--navy); }
.btn--lg{ font-size:1.02rem; padding:1em 1.9em; }
.btn--block{ width:100%; justify-content:center; }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.field{ width:100%; font-family:var(--body); font-size:1rem; color:var(--navy);
  background:var(--white); border:1.5px solid var(--hair); border-radius:var(--r-sm);
  padding:.85em 1em; transition:border-color .15s, box-shadow .15s; }
.field::placeholder{ color:var(--navy-50) }
.field:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 4px rgba(1,32,96,.12) }
select.field{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23012060' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1em center; padding-right:2.6em; }
.label{ font-family:var(--head); font-weight:500; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--navy-70); display:block; margin-bottom:.4rem; }

/* Donation chips */
.dchips{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.dchip{
  font-family:var(--head); font-weight:600; font-size:1.05rem; letter-spacing:.02em;
  padding:.75em .4em; border-radius:var(--r-sm); cursor:pointer; text-align:center;
  background:var(--white); color:var(--navy); border:1.5px solid var(--hair);
  transition:all .16s ease;
}
.dchip:hover{ border-color:var(--navy); transform:translateY(-1px) }
.dchip[aria-pressed="true"]{ background:var(--navy); color:var(--white); border-color:var(--navy); box-shadow:var(--shadow-sm) }
.dchip--red[aria-pressed="true"]{ background:var(--red); border-color:var(--red) }

/* Segmented "what they need" pills */
.need-grid{ display:flex; flex-wrap:wrap; gap:.5rem; }
.need-pill{
  font-family:var(--head); font-weight:500; font-size:.84rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.6em 1em; border-radius:999px; cursor:pointer;
  background:var(--white); color:var(--navy); border:1.5px solid var(--hair); transition:all .15s;
}
.need-pill:hover{ border-color:var(--navy) }
.need-pill[aria-pressed="true"]{ background:var(--red); color:var(--white); border-color:var(--red) }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.wrap{ width:min(1180px,92vw); margin-inline:auto; }
.wrap-narrow{ width:min(880px,92vw); margin-inline:auto; }
.eyebrow{ font-family:var(--head); font-weight:600; letter-spacing:.28em; text-transform:uppercase; font-size:.78rem; color:var(--red); }
.eyebrow--light{ color:var(--ocean-200) }

/* Reveal on scroll — capture-safe: content is ALWAYS visible (opacity:1).
   Only a small translate animates in, so a paused/stuck transition never blanks content. */
.js [data-reveal]{ transform:translateY(16px); transition:transform .65s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.js [data-reveal].in{ transform:none; }
@media (prefers-reduced-motion:reduce){ .js [data-reveal]{transform:none;transition:none} }

/* Accordion */
.acc__item{ border-bottom:1.5px solid var(--hair); }
.acc__head{ display:flex; align-items:center; gap:1rem; width:100%; background:none; border:0; cursor:pointer;
  padding:1.15rem .25rem; text-align:left; font-family:var(--head); }
.acc__num{ font-family:var(--display); font-size:1.5rem; color:var(--red); transform:skewX(-9deg); min-width:2.2rem; }
.acc__title{ font-weight:600; font-size:1.45rem; color:var(--navy); flex:1; letter-spacing:.005em; }
.acc__chev{ width:22px;height:22px; color:var(--navy); transition:transform .3s; flex-shrink:0 }
.acc__item.open .acc__chev{ transform:rotate(180deg) }
.acc__body{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.acc__body-inner{ padding:0 .25rem 1.3rem 3.5rem; color:var(--navy-70); line-height:1.7; }

/* Carousel */
.caro{ position:relative; }
.caro__track{ display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:.5rem; -ms-overflow-style:none; scrollbar-width:none; }
.caro__track::-webkit-scrollbar{ display:none }
.caro__nav{ display:flex; gap:.7rem; }
.caro__btn{ width:54px;height:54px;border-radius:50%; border:0; cursor:pointer; display:grid;place-items:center;
  background:var(--navy); color:var(--white); transition:background .15s, transform .15s; }
.caro__btn:hover{ background:var(--red); transform:translateY(-1px) }

/* Toast / success */
.formdone{ display:none; }
.is-submitted .formdone{ display:block; }
.is-submitted .formlive{ display:none; }

/* Footer base */
.site-foot{ background:var(--navy); color:var(--white); }
.site-foot a{ text-decoration:none; opacity:.85 }
.site-foot a:hover{ opacity:1 }
.disclaimer{ font-family:var(--head); letter-spacing:.08em; text-transform:uppercase; font-size:.72rem;
  border:1.5px solid rgba(255,255,255,.5); padding:.85em 1.4em; border-radius:6px; text-align:center; }

/* image-slot defaults inside our pages */
image-slot{ --is-bg:var(--ocean-100); display:block; }