/* =====================================================
   ANTHONY VERRELLI — Campaign Website
   Static HTML/CSS Cutup  |  mobile-first
   ===================================================== */


/* =====================================================
   RESET
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html                   { scroll-behavior: smooth; }
body                   { background-color: var(--navy); }
img, svg               { display: block; max-width: 100%; }
ul                     { list-style: none; }
a                      { color: inherit; text-decoration: none; }
button                 { cursor: pointer; border: none; background: none; font: inherit; }
input, button, select  { font: inherit; }


/* =====================================================
   DESIGN TOKENS
   ===================================================== */
:root {
  /* Colors */
  --navy:       #142f5a;
  --yellow:     #ffc622;
  --white:      #ffffff;
  --text-dark:  #111827;

  /* Typography */
  --font-display:  'montserrat', sans-serif;
  --font-alt:      'montserrat-alternates', 'montserrat', sans-serif;
  --font-body:     'acumin-pro', sans-serif;

  /* Layout */
  --container-max:   1360px;
  --container-pad-x: clamp(1.25rem, 5vw, 4.5rem);

  /* Header */
  --header-h: 88px;
}


/* =====================================================
   UTILITIES
   ===================================================== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 80vw;             /* comp content column: ~10vw inset each side */
  max-width: 80vw;
  margin-inline: auto;
}


/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.7em 1.75em;
  border: 2px solid transparent;
  border-radius: 0;
  transition: opacity 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  line-height: 1;
}
.btn:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.btn--yellow {
  background-color: var(--yellow);
  color: var(--navy);
  border-color: var(--yellow);
}
.btn--yellow:hover { opacity: 0.85; }

/* Non-Donate gold buttons (intro CTA, form submit): the shared opacity hover
   muddied the gold and navy text against navy sections. Keep the text navy and
   deepen the gold background instead. Scoped to these classes only — Donate
   buttons keep their original hover untouched. */
.intro__cta:hover,
.btn--submit:hover {
  opacity: 1;
  background-color: #e6ad12;
  border-color: #e6ad12;
  color: var(--navy);
}

.btn--outline-yellow {
  background: transparent;
  border-color: var(--yellow);
  color: var(--yellow);
}
.btn--outline-yellow:hover {
  background: var(--yellow);
  color: var(--navy);
}


/* =====================================================
   HERO NAV  (nav row inside the hero — not sticky, scrolls away)
   ===================================================== */
.hero__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  padding-inline: 4.3vw;
  padding-top: 2.9vw;
  padding-bottom: 2.9vw;
}

/* Logo */
.site-header__logo-link { flex-shrink: 0; line-height: 0; }
.site-header__logo      { height: max(40px, 5.9vw); width: auto; }

/* Nav wrapper */
.site-nav {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* --- Hamburger (hidden desktop) --- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 6px;
  z-index: 210;
}
.hamburger__line {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Nav list --- */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
}

.site-nav__link {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: max(13px, 1.25vw);
  line-height: 1.78;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--white);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.site-nav__link:hover        { color: var(--yellow); }
.site-nav__link--active      { border-bottom-color: var(--yellow); }
.site-nav__link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* Mobile Donate item — hidden at desktop, revealed in drawer */
.site-nav__donate-item { display: none; }
.site-nav__donate-btn  { font-size: 1rem; padding: 0.6em 2em; }

/* Header Donate CTA */
.site-header__donate {
  flex-shrink: 0;
  padding: 0.65em 1.5em;
  font-weight: 700;
  font-size: max(0.9rem, 1.85vw);
  letter-spacing: 0;
}
/* Keep the navy label readable on hover: base/Kadence a:hover recolours links
   to the highlight (≈ the gold background), making the text vanish. Hold it at
   navy so contrast matches the resting state. Header donate button only. */
.site-header__donate:hover { color: var(--navy); }


/* =====================================================
   HERO
   ===================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--navy);
  min-height: 48.6vw;   /* = composite image aspect (1440x700) — 100% proportional */
}

/* Candidate photo. <picture> swaps the source:
   desktop = full composite (navy + diagonal + candidate baked in),
   mobile  = candidate-only crop. Absolute full-bleed on desktop;
   becomes an in-flow banner (between nav and form) on mobile. */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
  user-select: none;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  display: block;
}

.hero__grid {
  position: relative;
  min-height: inherit;
  display: flex;
  flex-direction: column;
}

/* nav + content sit above the photo layer */
.hero__nav,
.hero__body {
  position: relative;
  z-index: 1;
}
/* nav holds the mobile drawer, so it must outrank the hero body or the
   open menu gets painted over by the headline and form */
.hero__nav { z-index: 60; }

.hero__body {
  flex: 1;
  display: flex;
  align-items: flex-start;          /* top-anchor under nav, like the comp */
  padding-left: 9.6vw;              /* content inset measured from comp */
  padding-right: 4vw;
  padding-top: 0;
  padding-bottom: 4.6vw;
}

.hero__content {
  width: 35vw;          /* content/form block width from comp */
  max-width: 35vw;
}

/* ---- Headline ---- (sizes are comp-px / 1440 in vw; exact type specs come later) */
.hero__headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: max(2rem, 6.13vw);
  line-height: 0.91;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--white);
}

.hero__tagline {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: max(1.25rem, 4.24vw);
  line-height: 1.05;
  text-transform: none;
  letter-spacing: 0;
  color: var(--yellow);
  margin-top: 0;
}

/* ---- Signup form ---- */
.hero__form-wrap {
  margin-top: 1.25vw;
}

.hero__join-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(1.1rem, 2.77vw);
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.2vw;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: max(6px, 0.6vw);
}

.form-row {
  display: flex;
  gap: max(8px, 1vw);
}

.form-row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: max(8px, 1vw);
}

.form-field       { display: flex; flex: 1; }

.form-field input {
  width: 100%;
  height: max(44px, 3.3vw);
  padding: 0 1em;
  background: var(--white);
  border: none;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(15px, 1.85vw);
  letter-spacing: 0;
  text-transform: uppercase;
  appearance: none;
}
.form-field input::placeholder { color: var(--navy); opacity: 1; }
.form-field input:focus         { outline: 3px solid var(--yellow); outline-offset: 0; }

.btn--submit {
  width: 100%;
  height: max(44px, 3.3vw);
  padding: 0;
  font-weight: 700;
  font-size: max(15px, 1.85vw);
  letter-spacing: 0;
}

.form-success {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--yellow);
  margin-top: 0.5rem;
}
.form-success[hidden] { display: none; }


/* =====================================================
   INTRO / BIO
   ===================================================== */
.intro {
  background: var(--navy);
  padding-block: 3vw;
}

.intro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5vw;
  align-items: start;
}

.intro__photo {
  width: 100%;
  height: auto;
  display: block;
}

.intro__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: max(1.6rem, 3.76vw);
  line-height: 1.0;
  letter-spacing: 0;
  color: var(--yellow);
  margin-bottom: 1.4vw;
}

.intro__body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: max(1rem, 1.6vw);
  line-height: 1.39;
  color: var(--white);
  margin-bottom: 2vw;
}
.intro__body strong {
  font-family: var(--font-display);
  font-weight: 700;
}

.intro__cta {
  font-weight: 700;
  font-size: max(0.9rem, 1.85vw);
  letter-spacing: 0;
  padding: 0.6em 1.1em;
}


/* =====================================================
   DONATE BAND
   ===================================================== */
.donate-band {
  background: var(--yellow);
  padding-block: 4vw;
}

.donate-band__inner {
  text-align: center;
}

.donate-band__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: max(1.4rem, 3.76vw);
  line-height: 1.0;
  color: var(--navy);
  letter-spacing: 0;
  margin-bottom: 3.5vw;
}

.donate-band__tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1vw;
}

.donate-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: max(48px, 4.6vw);
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: max(1rem, 1.7vw);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3em 0.3em;
  border: 2px solid var(--navy);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.donate-tile:hover       { background: transparent; color: var(--navy); }
.donate-tile:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }


/* =====================================================
   PULL QUOTE
   ===================================================== */
.quote-section {
  background: var(--navy);
  padding-block: 5vw;
}

.pull-quote {
  max-width: 56vw;
  margin-inline: auto;
  text-align: center;
  border-left: 0;   /* override inherited base/Kadence blockquote left bar */
}

.pull-quote__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: max(1.05rem, 2.10vw);
  line-height: 1.39;
  color: var(--white);
  margin-bottom: 1.4vw;
}

.pull-quote__attribution {
  display: block;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: max(0.9rem, 2.10vw);
  line-height: 1.39;
  color: var(--yellow);
  letter-spacing: 0;
}


/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
  background: var(--navy);
  padding-block: 4vw;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vw;
}

.site-footer__logo-link { line-height: 0; }
.site-footer__logo      { height: max(110px, 12vw); width: auto; }

/* Footer nav */
.footer-nav__list {
  display: flex;
  align-items: center;
  gap: 2vw;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-nav__link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(0.75rem, 0.95vw);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;          /* default: white, no underline (header state logic) */
  transition: color 0.18s ease;
}
.footer-nav__link:hover        { color: var(--yellow); }   /* hover: gold text */
.footer-nav__link:focus-visible { outline: 2px solid var(--yellow); }

/* Active (current page): gold underline, text stays white — mirrors the header
   nav's active state. WordPress marks the current item's <li> with
   current-menu-item / current_page_item (footer renders via wp_nav_menu). */
.footer-nav__list .current-menu-item > .footer-nav__link,
.footer-nav__list .current_page_item > .footer-nav__link {
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-underline-offset: 3px;
}

.footer-nav__fb-link {
  display: flex;
  align-items: center;
  transition: opacity 0.18s ease;
}
.footer-nav__fb-link:hover         { opacity: 0.8; }
.footer-nav__fb-link:focus-visible  { outline: 2px solid var(--yellow); }
.footer-nav__fb-link img           { width: max(28px, 2.2vw); height: max(28px, 2.2vw); }

/* Disclaimer */
.site-footer__disclaimer {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: max(0.8rem, 1.39vw);
  line-height: 1.2;
  color: var(--white);
  text-align: center;
}


/* =====================================================
   RESPONSIVE — MOBILE / TABLET OVERRIDES
   ===================================================== */

/* ---- ≤ 1024px: hamburger nav + hero stacks (composite swaps to mobile crop) ---- */
@media (max-width: 1024px) {

  .hamburger { display: flex; }

  /* logo left, hamburger hard right */
  .site-nav { justify-content: flex-end; }

  .site-nav__list {
    position: fixed;
    inset: 0 0 0 30%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 2.5rem 2rem;
    gap: 1.75rem;
    background: var(--navy);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 205;
    box-shadow: -4px 0 24px rgba(0,0,0,0.35);
  }

  .site-nav__list.is-open { transform: translateX(0); }

  .site-nav__link { font-size: 1.1rem; }

  /* Show Donate inside the drawer, hide it from the header */
  .site-nav__donate-item { display: block; }
  .site-header__donate   { display: none; }

  /* Intro stacks */
  .intro__inner {
    grid-template-columns: 1fr;
  }

  /* Hero stacks: nav -> photo -> form, on navy.
     The <picture> source swaps to the candidate-only crop at this width. */
  .hero {
    min-height: 0;
    overflow: visible;
  }

  .hero__grid { min-height: 0; }

  .hero__photo {
    position: static;
    z-index: auto;
  }
  .hero__photo img {
    height: auto;        /* in-flow banner: natural ratio of the mobile crop */
    object-fit: contain;
  }

  .hero__body {
    align-items: flex-start;
    padding-left: var(--container-pad-x);
    padding-right: var(--container-pad-x);
    padding-top: 1.25rem;
    padding-bottom: 1.75rem;
  }

  .hero__content {
    width: 100%;
    max-width: 100%;
  }

  /* lower-section column: padded full width on tablet/mobile, not 80vw */
  .container {
    width: auto;
    max-width: 100%;
    padding-inline: 6vw;
  }
  .pull-quote { max-width: 100%; }
}

/* ---- ≤ 768px: donate tiles 3×2 ---- */
@media (max-width: 768px) {
  .donate-band__tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- ≤ 600px: small mobile ---- */
@media (max-width: 600px) {

  .hero__headline { font-size: clamp(2.5rem, 14vw, 3.5rem); }
  .hero__tagline  { font-size: clamp(1.4rem, 7vw, 2rem); }

  .form-row--2col {
    grid-template-columns: 1fr;
  }

  .form-field input,
  .btn--submit {
    height: 52px;
  }

  /* Donate tiles 2×3 */
  .donate-band__tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Wider mobile nav drawer */
  .site-nav__list {
    inset: 0 0 0 0;
    align-items: center;
  }
}