@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,300..800;1,300..800&display=swap");
@import url("/Content/CDN/css/site.css");

/* Deliberate empty rule — do not remove. If anything is ever lost from
   the very start of this file, the browser's error recovery stops at
   the first "{ }" it finds. This gives it one to land on, so the damage
   is limited to the @import lines above instead of swallowing the
   :root block below and leaving every var() in this file undefined. */
.css-guard {}

/* ============================================================
   Mike Minogue for Governor — Action Site Custom CSS
   Brand tokens taken from minogueforma.com.
   Bitter stands in for Recoleta — see the note at the end of this file.

   PASTE CAREFULLY: the @import lines must stay on the first three
   lines, and nothing may be lost from the very start of the file.
   A single missing character at the top makes the browser swallow
   everything up to the first "{" — which would take out the whole
   :root block below, leaving every var() reference in this file
   undefined and most of the site unstyled.

   Structure:
   Font Imports / Root Variables / General Body Styles /
   Header Styles / Button Styles / Main Section Styles /
   Events Filter Pills / Miscellaneous Styles /
   Footer Styles / Media Query Styles
   ============================================================ */

/* Root Variables */
:root {
  /* Brand palette, lifted from minogueforma.com */
  --navy: #224058;
  --navy-dark: #1a3244;
  --navy-20: rgba(34, 64, 88, 0.2);
  --red: #df1d25;
  --red-dark: #b8171e;
  --cyan: #00bfe0;
  --blue: #0483c8;
  --light: #cbf0f6;
  --ink: #363636;

  --heading-font: "Recoleta", "Bitter", Georgia, serif;
  --body-copy-font: "Montserrat", sans-serif;
  --button-corner: 7px;

  /* Logo is a stacked lockup, viewBox 485 x 360 (aspect 1.348:1). */
  --logo-height: 62px;
  --logo-height-mobile: 46px;

  /* Retheme the platform's own variables. /CDN/css/new-layout.css sets
     these from the site's Portal colour settings (currently #660022 /
     #28ace2) and drives the Take Action / button-variable styling off
     them. Redefining them here re-colours all of that cleanly, with no
     !important needed, because this file loads after new-layout.css.
     Worth setting the same values in the Portal colour settings so
     anything generated outside this file matches too. */
  --primary-color: #df1d25;
  --secondary-color: #224058;
  --tertiary-color: #ffffff;
}

/* General Body Styles */
body {
  font-family: var(--body-copy-font) !important;
  font-size: 15px;
  color: var(--ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.action-item-headline,
fieldset.call-to-action legend,
.volunteer-name h3,
.top-priority,
.secondary-priority,
.section-title {
  font-family: var(--heading-font);
  color: var(--navy);
  font-weight: 700;
}

a {
  color: var(--blue);
}

a:hover {
  color: var(--red);
}

/* Banner and carousel captions sit on top of photographs, so they keep
   white type with a shadow rather than the navy set above. */
.carousel-caption .title,
.carousel-caption h1,
.carousel-caption h2,
.carousel-caption h3,
.banner-section .title {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* Header Styles */
header#action-site-header,
header .navbar {
  background-color: #ffffff;
  border-bottom: 1px solid #e8edf1;
}

header .navbar .navbar-brand,
header .navbar #logo {
  padding-top: 6px;
  padding-bottom: 6px;
  margin: 0;
  display: flex;
  align-items: center;
}

header .navbar #logo img {
  width: auto !important;
  height: var(--logo-height) !important;
  max-height: var(--logo-height) !important;
  max-width: 100% !important;
  display: block;
}

/* Interim: paints the campaign logo in until one is uploaded in the
   Portal — #logo is currently an empty <a> with no image. The
   :not(:has(img)) guard means this switches itself off the moment a
   logo is set, so nothing doubles up. Delete once the upload is done. */
#logo:not(:has(img)) {
  display: inline-block;
  width: calc(var(--logo-height) * 1.348);
  height: var(--logo-height);
  background: url("https://minogueforma.com/wp-content/uploads/2025/09/MikeMinogue_Approved_Logos_Gradient.svg") center / contain no-repeat;
}

header .navbar-nav .nav-item-link,
header nav ul li a {
  font-family: var(--body-copy-font) !important;
  color: var(--navy) !important;
  font-size: 15px;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em;
  padding: 10px 14px !important;
  transition: color 0.2s ease-in-out;
}

header .navbar-nav .nav-item-link:hover,
header nav ul li a:hover {
  color: var(--red) !important;
  text-decoration: none;
}

/* Donate reads as the red CTA from the campaign site's top bar. */
header .donate-nav-item {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

header .donate-nav-item a {
  background-color: var(--red);
  color: #ffffff !important;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 9px 22px !important;
  border-radius: var(--button-corner);
  transition: background-color 0.2s ease-in-out;
}

header .donate-nav-item a:hover,
header .donate-nav-item:hover a {
  background-color: var(--red-dark);
  color: #ffffff !important;
  text-decoration: none;
}

.navbar .navbar-toggler {
  border: 0;
  font-size: 1.35rem;
  padding: 6px 10px;
  border-radius: var(--button-corner);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-color: var(--navy) !important;
}

.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 3px var(--navy-20);
}

/* Button Styles */
.btn,
.btn-default {
  background: var(--navy);
  font-family: var(--heading-font) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center !important;
  text-shadow: none !important;
  border: none !important;
  border-radius: var(--button-corner);
  transition: background-color 0.2s ease-in-out;
}

.btn:hover,
.btn-default:hover,
.btn-default:focus {
  background: var(--navy-dark) !important;
  color: #ffffff !important;
}

/* The campaign's own form CTA ("Sign Now") is red. */
.btn-primary,
#action-item-form-submit {
  background: var(--red) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
#action-item-form-submit:hover {
  background: var(--red-dark) !important;
  color: #ffffff !important;
}

/* Platform buttons take their colour from --primary-color /
   --secondary-color above; these only carry shape and type. */
.btn-primary,
.btn-default,
.button-primary,
.button-secondary,
.button-variable {
  border-radius: var(--button-corner);
  font-family: var(--heading-font);
}

/* Main Section Styles */
main .section-navigation .rounded-circle {
  background-color: var(--navy);
  color: #ffffff;
}

main .card-section .section-title .fa {
  color: var(--navy) !important;
}

main .card-section .badge {
  background-color: var(--navy);
}

main .card-section .button-nav-container button svg {
  border-color: var(--navy);
  fill: var(--navy);
}

/* Sign-up form panel — navy with white type, matching the sign-up modal
   on minogueforma.com. The platform already sets this section's labels
   to white, so a light background here leaves them invisible. */
main .form-section>div,
main .form-section>div form {
  background-color: var(--navy);
}

main .form-section .form-title,
main .form-section .volunteer-name,
main .form-section label,
main .form-section .label-bold,
main .form-section .checkbox,
main .form-section p,
main .form-section h1,
main .form-section h2,
main .form-section h3,
main .form-section .toggle-button,
main .form-section .link-show-password {
  color: #ffffff !important;
}

/* Action section stays light, so its type is pinned dark for the same
   reason — the platform's default copy colour here is white. */
main .action-section {
  background-color: var(--light);
}

main .action-section,
main .action-section h1,
main .action-section h2,
main .action-section h3,
main .action-section p,
main .action-section .section-title,
main .action-section #toggleButtonViewAll {
  color: var(--navy);
}

main .action-section .action-buttons a {
  border-color: var(--red);
  background-color: var(--red);
  color: #ffffff !important;
}

main .action-section .action-buttons a:hover {
  border-color: var(--red-dark);
  background-color: var(--red-dark);
}

/* Events filter pills (LOCATION / ANY DATE / IN PERSON / ONLINE /
   HYBRID). The platform gives these a near-white fill, so they must not
   take the white text set on .btn above — that left them unreadable. */
.btn.btn-pill,
.btn-pill {
  background-color: #f2f6f5 !important;
  color: var(--navy) !important;
  font-family: var(--body-copy-font) !important;
  font-weight: 600 !important;
  border: 1px solid #dde5e8 !important;
}

.btn.btn-pill:hover,
.btn-pill:hover {
  background-color: #e4ecef !important;
  color: var(--navy) !important;
}

.btn.btn-pill.active,
.btn-pill.active {
  background-color: var(--navy) !important;
  color: #ffffff !important;
  border-color: var(--navy) !important;
}

/* Miscellaneous Styles */
.call-center-block .btn-primary {
  width: 214px !important;
}

.profile-volunteer .fa.fa-check-circle-o[title] {
  color: var(--cyan) !important;
}

.fieldset-login .btn-default {
  width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

#changePassword.btn-default {
  width: 215px !important;
}

ul.nav-filter.more-than-6-items li.active a,
ul.nav-filter.more-than-6-items li a:hover {
  color: var(--red);
}

#signed-petitions .view-petitions-calls a,
.thumbnail .caption a {
  color: var(--navy) !important;
  font-family: var(--body-copy-font) !important;
  font-weight: 600;
  font-size: 15px;
}

#signed-petitions .view-petitions-calls a:hover,
.thumbnail .caption a:hover {
  color: var(--red) !important;
}

.image-tag>span {
  background-color: var(--navy) !important;
  color: #ffffff;
  font-weight: 600;
  font-family: var(--body-copy-font) !important;
}

#collapse-message,
#collapse-link,
#expand-message,
span.fa.fa-plus-square,
.event-container a {
  color: var(--navy);
}

/* ============================================================
   Footer Styles
   Mirrors minogueforma.com: navy panel carrying the inverse logo,
   white panel carrying links and disclaimers.
   ============================================================ */
footer.footer {
  padding: 0 !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
  font-family: var(--body-copy-font);
}

footer .footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 22%) 1fr;
  align-items: stretch;
}

footer .footer-brand {
  background-color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

footer .footer-brand img {
  width: 100%;
  max-width: 210px;
  height: auto;
  display: block;
}

footer .footer-main {
  background-color: #ffffff;
  color: var(--navy);
  padding: 48px clamp(20px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

/* The platform puts a hairline border on <nav>; clear it here. */
footer .footer-nav,
footer nav {
  border: 0 !important;
  background: none !important;
  margin: 0;
}

footer .footer-social {
  display: flex;
  gap: 26px;
  align-items: center;
}

footer .footer-social a {
  color: var(--navy);
  line-height: 0;
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

footer .footer-social a:hover {
  color: var(--red);
  transform: translateY(-2px);
}

footer .footer-social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
}

footer .footer-nav a {
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

footer .footer-nav a:hover {
  color: var(--red);
}

footer .footer-paidfor {
  border: 1px solid var(--navy);
  padding: 8px 32px;
  font-size: 15px;
  color: var(--navy);
}

footer .footer-disclaimer,
footer .footer-sms {
  font-size: 14px;
  line-height: 1.6;
  color: var(--navy);
  max-width: 62ch;
}

footer .footer-sms {
  font-size: 13px;
}

footer .footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
}

footer .footer-legal a {
  color: var(--navy);
  font-size: 14px;
  text-decoration: none;
}

footer .footer-legal a:hover {
  color: var(--red);
  text-decoration: underline;
}

/* Media Query Styles */
@media (max-width: 991px) {
  footer .footer-grid {
    grid-template-columns: 1fr;
  }

  footer .footer-brand {
    padding: 34px 24px;
  }

  footer .footer-brand img {
    max-width: 170px;
  }

  footer .footer-main {
    padding: 34px 20px 40px;
  }

  #logged-user-not-correct.user-edit {
    float: none !important;
    margin-top: 10px;
    display: block;
    margin: 15px auto 0 auto;
  }

  .call-center-block .btn-primary {
    margin-top: 20px;
  }
}

@media (max-width: 767px) {
  header .navbar #logo img,
  #logo:not(:has(img)) {
    height: var(--logo-height-mobile) !important;
    max-height: var(--logo-height-mobile) !important;
  }

  #logo:not(:has(img)) {
    width: calc(var(--logo-height-mobile) * 1.348);
  }

  header .navbar-nav .nav-item-link,
  header nav ul li a {
    padding: 10px 0 !important;
  }

  header .donate-nav-item {
    margin-left: 0;
    margin-top: 8px;
  }

  header .donate-nav-item a {
    display: inline-block;
  }

  #changePassword.btn-default,
  .btn.btn-primary,
  .btn.btn-default {
    width: 100% !important;
  }

  .call-center-block .btn-primary {
    margin-top: 0;
  }
}

/* ------------------------------------------------------------
   NOTE — headline font
   minogueforma.com sets headlines in Recoleta, a licensed font
   self-hosted there as .ttf. Those files are served without an
   Access-Control-Allow-Origin header, so loading them from this
   domain fails with a CORS network error (verified) — which is why
   Bitter is imported above as the stand-in.

   To use the real thing: upload the four .ttf files to this action
   site's asset library (Cloudinary serves Access-Control-Allow-Origin: *),
   then uncomment the block below and swap in the returned URLs.
   --heading-font already lists Recoleta first, so it takes over
   automatically with no other edits.

@font-face { font-family: Recoleta; font-weight: 400; font-display: swap;
  src: url("<cloudinary-url>/Recoleta-Regular.ttf") format("truetype"); }
@font-face { font-family: Recoleta; font-weight: 500; font-display: swap;
  src: url("<cloudinary-url>/RecoletaMedium.ttf") format("truetype"); }
@font-face { font-family: Recoleta; font-weight: 600; font-display: swap;
  src: url("<cloudinary-url>/Recoleta-SemiBold.ttf") format("truetype"); }
@font-face { font-family: Recoleta; font-weight: 700; font-display: swap;
  src: url("<cloudinary-url>/RecoletaBold.ttf") format("truetype"); }

   Source files currently live at
   https://minogueforma.com/wp-content/uploads/2025/09/
   Confirm the Recoleta licence covers this additional domain first.
   ------------------------------------------------------------ */