/*
Theme Name: Vote Gold
Theme URI: https://votegold.com
Author: Vote Gold
Description: Single-page theme for Vote Gold - Changing LA one voter registration at a time
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: votegold
*/

/* ============================================================
       AVENIR NEXT LT PRO — Self-hosted @font-face
       Update the path to match your actual theme folder name.
    ============================================================ */
    @font-face {
      font-family: "Avenir Next LT Pro";
      src: url("<?php echo get_template_directory_uri(); ?>/fonts/avenir/AvenirNextLTPro-Regular.otf") format("opentype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: "Avenir Next LT Pro";
      src: url("<?php echo get_template_directory_uri(); ?>/fonts/avenir/AvenirNextLTPro-It.otf") format("opentype");
      font-weight: 400;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: "Avenir Next LT Pro";
      src: url("<?php echo get_template_directory_uri(); ?>/fonts/avenir/AvenirNextLTPro-Demi.otf") format("opentype");
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: "Avenir Next LT Pro";
      src: url("<?php echo get_template_directory_uri(); ?>/fonts/avenir/AvenirNextLTPro-HeavyCn.otf") format("opentype");
      font-weight: 900;
      font-style: normal;
      font-display: swap;
    }

    /* ============================================================
       DESIGN TOKENS
    ============================================================ */
    :root {
      --purple:  #3B22BC;
      --gold:    #FFB039;
      --neutral: #FFFCF5;
      --red:     #EA3333;
      --dark:    #272727;
      --white:   #FFFFFF;

      --font-display: "Avenir Next LT Pro", sans-serif;
      /*--font-eyebrow: "Brice", sans-serif;*/
      --font-eyebrow: "Acme", sans-serif;
      --font-body:    "Epilogue", sans-serif;

      --max-width: 1280px;
      --radius-btn: 8px;
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      font-size: 20px;
      line-height: 1.6;
      color: var(--dark);
      background: var(--white);
    }

    .hide, .gform_required_legend, .gfield--type-hidden {display: none;}

    img { display: block; max-width: 100%; height: auto; }
    a   { color: inherit; text-decoration: none; }

    .container {
      max-width: var(--max-width);
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    }

    /* ============================================================
       TYPOGRAPHY SCALE
    ============================================================ */
    .t-eyebrow {
      font-family: var(--font-eyebrow);
      font-size: 24px;
      font-weight: 600;
      text-transform: uppercase;
    }

    .t-h1 {
      font-family: var(--font-display);
      font-size: clamp(64px, 10vw, 100px);
      font-weight: 900;
      line-height: 1;
      text-transform: uppercase;
    }

    .t-h2 {
      font-family: var(--font-display);
      font-size: clamp(40px, 6vw, 80px);
      font-weight: 700;
      line-height: 1.1;
      text-transform: uppercase;
    }

    .t-h3 {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 700;
      line-height: 1.2;
    }

    .t-h4 {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      line-height: 1.3;
    }

    .t-quote {
      font-family: var(--font-display);
      font-size: clamp(32px, 5vw, 60px);
      font-weight: 700;
      line-height: 1.2;
    }

    .t-body {
      font-family: var(--font-body);
      font-size: 20px;
      line-height: 1.7;
    }
    .t-body2 {
      color: #dfdfdf;
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.6;
      letter-spacing: 0.32px;
      margin-bottom: 20px;
    }

    /* ============================================================
       BUTTONS
    ============================================================ */
    .btn {
      display: inline-block;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.85rem 2rem;
      border: 2px solid transparent;
      border-radius: var(--radius-btn);
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
    }

    .btn--purple {
      background: var(--purple);
      color: var(--white);
      border-color: var(--purple);
      width:100%;
    }
    .btn--purple:hover {
      background: #2e1a97;
      color: var(--white);
    }

    .btn--gold {
      background: var(--gold);
      color: var(--dark);
      border-color: var(--gold);
    }
    .btn--gold:hover {
      background: transparent;
      color: var(--gold);
    }

    .btn--white {
      background: var(--white);
      color: var(--dark);
      border-color: var(--white);
    }
    .btn--white:hover {
      background: transparent;
      color: var(--white);
    }

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

    /* ============================================================
       HEADER / NAV
    ============================================================ */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 500;
      background: var(--white);
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }

    .site-header__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-block: 1rem;
    }

    .site-header__logo img {
      height: 28px;
      width: auto;
    }

    .site-nav {
      display: flex;
      align-items: center;
      gap: 2rem;
      list-style: none;
    }

    .site-nav a {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 400;
      color: var(--dark);
      transition: color 0.2s;
    }
    .site-nav a:hover { color: var(--red); }

    .site-header__cta { flex-shrink: 0; }

    /* Mobile hamburger — hidden by default on desktop */
    .nav-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.25rem;
    }
    .nav-toggle span {
      display: block;
      width: 26px;
      height: 2px;
      background: var(--dark);
      margin: 5px 0;
      transition: transform 0.3s;
    }

    /* ============================================================
       POPUP MAKER — overlay z-index fix
    ============================================================ */
    .pum-overlay {
      z-index: 999999 !important;
    }

    .pum-container {
      z-index: 1000000 !important;
    }

    /* ============================================================
       SECTION 1: HERO
    ============================================================ */
    .hero {
      background: var(--red);
      overflow: hidden;
      position: relative;
    }

    .hero__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: end;
      min-height: clamp(500px, 70vw, 760px);
    }

    .hero__content {
      padding-block: clamp(3rem, 4vw, 4rem);
      display: flex;
      flex-direction: column;
      gap: 5px;
      text-align: center;
    }

    .hero__eyebrow {
      color: var(--white);
    }

    .hero__headline {
      color: var(--gold);
    }

    .hero__subtext {
      color: var(--white);
      font-family: var(--font-body);
      font-size: 18px;
      max-width: 480px;
      margin: 0 auto;
      font-weight: 400;
    }

    /* Join The Movement Form Box */
    .hero__form-box {
        background: transparent;
        border-radius: 8px;
        padding: 20px;
        max-width: 480px;
        border: 3px solid var(--gold);
        margin: 20px auto 0;
    }

    .hero__form-title, .popuptitle {
        font-family: var(--font-display);
        font-size: 32px;
        font-weight: 700;
        text-align: center;
        text-transform: uppercase;
        color: var(--white);
        margin-bottom: 10px;
    }

    /* Gravity Forms overrides inside hero */
    .hero__form-box .gform_wrapper {
      margin: 0;
    }
    .hero__form-box .gform_fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .hero__form-box .gfield {
      margin: 0;
    }
    .hero__form-box .gfield--width-full {
      grid-column: 1 / -1;
    }
    .hero__form-box input[type="text"],
    .hero__form-box input[type="email"],
    .hero__form-box input[type="tel"],
    #popmake-349 input[type="text"],
    #popmake-349 input[type="email"],
    #popmake-349 input[type="tel"] {
      width: 100%;
      padding: 0.65rem 0.85rem;
      background-color: #ffffff !important;
      border: 2px solid var(--white);
      border-radius: 4px;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 400;
    }
    #popmake-349 .gfield_description {display:none;}
    .hero__form-box input[type="text"]:focus,
    .hero__form-box input[type="email"]:focus,
    .hero__form-box input[type="tel"]:focus,
    #popmake-349 input[type="text"]:focus,
    #popmake-349 input[type="email"]:focus,
    #popmake-349 input[type="tel"]:focus,
    .hero__form-box input[type="text"]:active,
    .hero__form-box input[type="email"]:active,
    .hero__form-box input[type="tel"]:active,
    #popmake-349 input[type="text"]:active,
    #popmake-349 input[type="email"]:active,
    #popmake-349 input[type="tel"]:active  {
      outline: none;
      background-color: #ffffff !important;
      border-color: var(--gold);
      border-width: 2px;
    }

    .hero__form-box .gform_footer,
    .hero__form-box .gform_page_footer {
      margin-top: 0.75rem;
    }
    .hero__form-box .gform_button, #popmake-349 .gform_button {
      width: 100%;
      background: var(--purple);
      color: var(--white);
      border: none;
      border-radius: var(--radius-btn);
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.9rem;
      cursor: pointer;
      transition: background 0.2s;
    }
    .hero__form-box .gform_button:hover, 
    #popmake-349 .gform_button:hover {
      background: #2e1a97;
    }

    .hero__form-box .gfield_label { display: none; }
    .hero__form-box .gfield_description { display: none; }
    .hero__form-box .validation_message { font-size: 12px; color: var(--red); }

    .hero__image {
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      height: 100%;
    }

    .hero__image img {
      width: 100%;
      object-fit: contain;
      display: block;
    }

    /* ============================================================
       SECTION 2: TESTIMONIAL / QUOTE
    ============================================================ */
    .quote-section {
      background: var(--white);
      padding-block: clamp(3rem, 6vw, 5rem);
    }

    .quote-section blockquote {
      color: var(--dark);
    }

    .quote-section cite {
      display: block;
      margin-top: 1.5rem;
      font-style: normal;
    }

    .quote-section__name {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 900;
      color: var(--red);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .quote-section__title {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 900;
      color: var(--red);
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-top: 0.25rem;
    }

    /* ============================================================
       SECTION 3: TICKER BAR
    ============================================================ */
    .ticker-bar {
      background: var(--dark);
      padding-block: 0.85rem;
      overflow: hidden;
      white-space: nowrap;
    }

    .ticker-bar__track {
      display: inline-flex;
      animation: ticker-scroll 45s linear infinite;
    }

    .ticker-bar__track span {
        font-family: var(--font-display);
        font-size: 40px;
        font-weight: 900;
        color: var(--gold);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        padding-inline: 1rem;
    }

    .ticker-bar__track span::before {
      content: "•";
      color: var(--gold);
      margin-right: 1rem;
    }

    @keyframes ticker-scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ============================================================
       SECTION 4: MEET ELIZABETH
    ============================================================ */
    .meet {
      background: var(--white);
      
    }
    .meet__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        max-width: inherit;
        margin-inline: auto;
    }
    .meet__image img {
      width: 100%;
      object-fit: cover;
    }

    .meet__content {
      display: flex;
      flex-direction: column;
      gap: 0;
      max-width: 600px;
      margin: 0 auto;
    }

    .meet__eyebrow {
      color: var(--dark);
    }

    .meet__headline {
      color: var(--red);
      line-height: 1;
    }

    .meet__body p {
      color: #4f4f4f;
      margin-top: 1rem;
    }

    /* ============================================================
       SECTION 5: VOTE GOLD MISSION
    ============================================================ */
    .mission {
      background: var(--purple);
      padding-block: clamp(3rem, 6vw, 5rem);
    }

    .mission__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
    }

    .mission__logo img {
      height: 80px;
      width: auto;
    }

    .mission__logo .mission__logo-text {
      font-family: var(--font-eyebrow);
      font-size: 36px;
      font-weight: 900;
      color: var(--white);
      letter-spacing: 0.04em;
    }

    .mission__text-headline {
      font-family: var(--font-display);
      font-weight: 900;
      color: var(--white);
      margin-bottom: 0.75rem;
    }

    .mission__text p {
      color: rgba(255,255,255,0.85);
    }

    /* ============================================================
       SECTION 6: TAKE ACTION
    ============================================================ */
    .take-action {
      position: relative;
      background: var(--dark);
      padding-block: clamp(3rem, 6vw, 6rem);
      overflow: hidden;
      margin: 7%;
      border-radius: 8px;
    }

    .take-action__bg {
      position: absolute;
      inset: 0;
      background-image: url('/wp-content/uploads/2026/02/Action-bg-scaled.jpg');  /* BG image – client to supply */
      background-size: cover;
      background-position: center;
      
      opacity: 0.35;
    }

    .take-action__inner {
      position: relative;
      z-index: 1;
    }

    .take-action__headline {
      color: var(--white);
      text-align: center;
      margin-bottom: clamp(2rem, 4vw, 3.5rem);
    }

    .take-action__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }

    .action-card {
      background: rgba(255,255,255,1);
      border: 3px solid var(--gold);
      border-radius: 8px;
      padding: 2rem 1.5rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    .action-card__icon {
      width: 102px;
      height: 102px;
      object-fit: contain;
    }

    .action-card__title {
      color: var(--dark);
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    .action-card__body {
      color: var(--dark);
      font-size: 16px;
      flex: 1;
    }


    .separator .container img {
        margin: -15% auto 0;
        position: relative;
        z-index: 1;
        max-width: 340px;
    }

    /* ============================================================
       SECTION 8: DONATE / MOVE CALIFORNIA
    ============================================================ */
    .donate {
      background: var(--red);
      padding-block: clamp(3rem, 6vw, 5rem);
      text-align: center;
    }

    .donate__headline {
      color: var(--white);
      margin-bottom: 0.5rem;
    }

    .donate__sub {
      color: rgba(255,255,255,0.85);
      font-size: 18px;
      margin-bottom: 2rem;
    }

    .donate__amounts {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }

    .donate__btn {
      min-width: 240px;
      padding: 1rem 2rem;
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 700;
      border-radius: var(--radius-btn);
      border: 2px solid var(--white);
      background: var(--white);
      color: var(--dark);
      cursor: pointer;
      text-decoration: none;
      text-transform: uppercase;
      display: inline-block;
      transition: background 0.2s, color 0.2s, border 0.2s;
    }

    .donate__btn--active {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--white);
    }
    .donate__btn--active:hover, .donate__btn:hover  {
      background: var(--dark);
      border-color: var(--dark);
      color: var(--white);
    }

    /* ============================================================
       FOOTER
    ============================================================ */
    .site-footer {
      background: var(--dark);
      padding-block: 3rem 1.5rem;
    }

    .site-footer__top {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
        align-items: stretch;
        padding-bottom: 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 1.5rem;
    }

    .site-footer__brand { min-width:33vw; }

    .site-footer__logo img {
      height: 48px;
      width: auto;
      margin-bottom: 0.75rem;
    }

    .site-footer__tagline {
      font-size: 16px;
      color: var(--neutral);
      line-height: 1.5;
    }

    .site-footer__social {
      display: flex;
      gap: 0.75rem;
      margin-top: 1rem;
    }

    .site-footer__connect .site-footer__social a {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-size: 14px;
    }

    
    .site-footer__brand .site-footer__social a:hover {
      color: var(--white);
    }
    .site-footer__connect .site-footer__social a:hover, 
    .site-footer__brand .site-footer__social a {color: var(--gold); }

    .site-footer__links h4 {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1rem;
    }

    .site-footer__links ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .site-footer__links a {
      font-size: 15px;
      color: var(--white);
      transition: color 0.2s;
    }
    .site-footer__links a:hover { color: var(--gold); }

    .site-footer__connect h4 {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1rem;
    }

    .site-footer__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .site-footer__copyright {
      font-size: 13px;
      color: rgba(255,255,255,0.4);
    }

    .site-footer__legal {
      display: flex;
      gap: 1.5rem;
    }

    .site-footer__legal a {
      font-size: 13px;
      color: rgba(255,255,255,0.4);
      transition: color 0.2s;
    }
    .site-footer__legal a:hover { color: var(--white); }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (min-width: 768px) and (max-width: 1140px) {
      .take-action__grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 1024px) {
      .site-nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        padding: 1.5rem;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        z-index: 99;
      }
      .site-header__cta {
        display: flex; /* override the display:none we had */
      }

      .site-header__right {
        display: flex;
        align-items: center;
        gap: 0.75rem;
      }
      .site-nav.is-open { display: flex; }
      .nav-toggle { display: block; }

      .meet__inner {
        grid-template-columns: 1fr;
      }
      .meet__content, .donate {padding: 20px;}
      .mission__inner {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .site-header__logo img { height: 16px;  }
      .hero__inner {
        grid-template-columns: 1fr;
        min-height: auto;
      }
      .hero__image { display: block; order: 1; }
      .hero__content {order:2;}
      
      .take-action__grid {
        grid-template-columns: 1fr;
      }
      .donate__amounts {
        flex-direction: column;
        align-items: center;
      }
      .donate__btn {
        width: 100%;
        max-width: 320px;
      }
      .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
      }
      .site-footer__top {
        grid-template-columns: 1fr;
      }
    }