/* Cathcart for Spokane — fluid responsive layer
   Loaded last so every page scales smoothly from small phones to wide desktops. */

:root {
  --cfs-gutter: clamp(16px, 4vw, 64px);
  --cfs-content-max: 1500px;
}

html {
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 320px;
  max-width: 100%;
  overflow-x: clip !important;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

iframe {
  width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font: inherit;
}

/* Remove legacy full-viewport offsets now that the pages are standalone. */
.cfs-header,
.cfs-simple-top,
.cfs-about-page,
.cfs-donate-section,
.cfs-end,
.cfs-signup,
.cfs-footer,
.cfs-auditor-home-insert,
.cfs-section-divider {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---------- Shared header ---------- */
.cfs-header__inner {
  width: min(calc(100% - (2 * var(--cfs-gutter))), var(--cfs-content-max)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding: clamp(14px, 1.6vw, 24px) 0 !important;
  gap: clamp(20px, 3.4vw, 54px) !important;
}

.cfs-header__logo {
  position: static !important;
  flex: 0 1 clamp(260px, 27vw, 430px) !important;
  width: clamp(260px, 27vw, 430px) !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

.cfs-header__logo img {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  transform: none !important;
}

.cfs-header nav {
  min-width: 0;
  flex: 1 1 auto;
}

.cfs-header__nav {
  flex-wrap: nowrap !important;
  gap: clamp(8px, 1vw, 15px) !important;
}

.cfs-header__nav li {
  min-width: 0;
}

.cfs-header__nav a {
  min-height: clamp(48px, 4vw, 60px) !important;
  padding: clamp(12px, 1.2vw, 17px) clamp(14px, 1.9vw, 32px) !important;
  font-size: clamp(0.82rem, 0.7vw + 0.3rem, 1.05rem) !important;
}

@media (min-width: 901px) and (max-width: 1120px) {
  .cfs-header__inner {
    --cfs-gutter: clamp(18px, 2.5vw, 30px);
    gap: clamp(18px, 2vw, 28px) !important;
  }

  .cfs-header__logo {
    flex-basis: clamp(270px, 29vw, 330px) !important;
    width: clamp(270px, 29vw, 330px) !important;
  }

  .cfs-header__nav a {
    padding-inline: clamp(12px, 1.35vw, 18px) !important;
    font-size: clamp(0.78rem, 0.78vw, 0.9rem) !important;
  }
}

@media (max-width: 900px) {
  .cfs-header__inner {
    width: 100% !important;
    padding: 14px clamp(14px, 3.5vw, 26px) 17px !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .cfs-header__logo {
    width: min(350px, 88vw) !important;
    flex-basis: auto !important;
    justify-content: center !important;
  }

  .cfs-header nav,
  .cfs-header__nav {
    width: 100%;
  }

  .cfs-header__nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .cfs-header__nav a {
    width: 100% !important;
    min-height: 46px !important;
    padding: 11px 8px !important;
    white-space: normal !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }
}

@media (max-width: 600px) {
  .cfs-header__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cfs-header__logo {
    width: min(315px, 86vw) !important;
  }
}

/* ---------- Homepage hero ---------- */
@media (min-width: 769px) {
  .cc-hero {
    min-height: clamp(590px, 46vw, 790px) !important;
    background-image:
      linear-gradient(90deg,
        rgba(255,255,255,0.98) 0%,
        rgba(255,255,255,0.90) 27%,
        rgba(255,255,255,0.40) 48%,
        rgba(255,255,255,0.04) 67%,
        rgba(255,255,255,0) 100%),
      var(--hero-photo) !important;
    background-size: cover, cover !important;
    background-position: center, center 42% !important;
    background-repeat: no-repeat !important;
  }

  .cc-hero-inner {
    width: min(calc(100% - (2 * var(--cfs-gutter))), var(--cfs-content-max)) !important;
    max-width: none !important;
    min-height: inherit !important;
    margin-inline: auto !important;
    padding: clamp(38px, 4vw, 72px) 0 clamp(44px, 4.5vw, 78px) !important;
    display: grid !important;
    grid-template-columns: minmax(390px, min(47%, 700px)) minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: start !important;
  }

  .cc-hero-content {
    width: 100% !important;
    max-width: 700px !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .cc-hero-spacer {
    min-width: 0;
  }

  .cc-slogan {
    padding-left: clamp(38px, 3.6vw, 60px) !important;
    margin-bottom: clamp(34px, 4vw, 72px) !important;
    font-size: clamp(3.25rem, 5.45vw, 5.9rem) !important;
    line-height: 0.98 !important;
  }

  .cc-slogan::before {
    width: clamp(18px, 1.9vw, 32px) !important;
  }

  .cc-slogan-line:last-child {
    gap: clamp(10px, 1.2vw, 18px) !important;
  }

  .cc-form {
    width: min(100%, 670px) !important;
    max-width: none !important;
    padding: clamp(20px, 2vw, 29px) !important;
  }

  .cc-form-row {
    gap: clamp(11px, 1.1vw, 17px) !important;
    margin-bottom: clamp(11px, 1.1vw, 17px) !important;
  }

  .cc-form-field input[type="text"],
  .cc-form-field input[type="email"] {
    min-height: clamp(43px, 3.3vw, 50px);
    padding: 11px clamp(11px, 1vw, 15px) !important;
    font-size: clamp(0.92rem, 0.35vw + 0.75rem, 1rem) !important;
  }

  .cc-form-field label,
  .cc-check {
    font-size: clamp(0.73rem, 0.28vw + 0.65rem, 0.88rem) !important;
  }

  .cc-submit {
    min-height: clamp(46px, 3.7vw, 52px);
    font-size: clamp(0.95rem, 0.35vw + 0.8rem, 1.08rem) !important;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .cc-hero {
    min-height: clamp(570px, 61vw, 680px) !important;
    background-size: cover, auto 100% !important;
    background-position: center, 68% center !important;
  }

  .cc-hero-inner {
    --cfs-gutter: clamp(20px, 3vw, 36px);
    grid-template-columns: minmax(350px, 54%) minmax(0, 1fr) !important;
  }

  .cc-slogan {
    font-size: clamp(3rem, 6.8vw, 4.75rem) !important;
    margin-bottom: clamp(30px, 4vw, 48px) !important;
  }

  .cc-form-checks {
    gap: 8px !important;
  }
}

@media (min-width: 1500px) and (min-aspect-ratio: 19/10) {
  .cc-hero {
    min-height: clamp(620px, 42vw, 760px) !important;
    background-size: cover, 100% auto !important;
    background-position: center, center 40% !important;
  }
}

@media (max-width: 768px) {
  .cc-hero {
    min-height: 0 !important;
    background-image: none !important;
  }

  .cc-hero-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .cc-hero-content {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .cc-hero-spacer {
    display: none !important;
  }

  .cc-hero-mobile-img {
    display: block !important;
    position: relative !important;
    order: 1 !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .cc-hero-mobile-img img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: 69% center !important;
  }

  .cc-slogan {
    order: 2 !important;
    position: absolute !important;
    inset: clamp(14px, 4vw, 28px) 0 auto 0 !important;
    z-index: 4 !important;
    width: min(92%, 690px) !important;
    padding: 0 clamp(18px, 5vw, 38px) 0 clamp(58px, 10vw, 86px) !important;
    margin: 0 !important;
    font-size: clamp(2.75rem, 11.7vw, 5.2rem) !important;
    line-height: 1.05 !important;
  }

  .cc-slogan::before {
    left: clamp(22px, 5vw, 38px) !important;
    width: clamp(9px, 2.1vw, 14px) !important;
    top: 5px !important;
    bottom: 5px !important;
  }

  .cc-slogan-line:last-child {
    gap: clamp(8px, 2vw, 15px) !important;
  }

  .cc-form {
    order: 3 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(26px, 7vw, 38px) clamp(16px, 5vw, 30px) !important;
    border-radius: 0 !important;
  }

  .cc-form-heading {
    display: block !important;
    font-size: clamp(1.65rem, 6vw, 2.2rem) !important;
    margin-bottom: 22px !important;
  }

  .cc-form-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
  }

  .cc-form-checks {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 540px) {
  .cc-hero-mobile-img {
    aspect-ratio: 3 / 4 !important;
  }

  .cc-slogan {
    width: 100% !important;
    font-size: clamp(2.55rem, 12.3vw, 4.1rem) !important;
  }

  .cc-form-row {
    grid-template-columns: 1fr !important;
  }

  .cc-form-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 360px) {
  .cc-slogan {
    padding-left: 52px !important;
    padding-right: 12px !important;
    font-size: 2.45rem !important;
  }

  .cc-slogan::before {
    left: 20px !important;
  }

  .cc-form-checks {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Fluid content containers ---------- */
.cfs-inner,
.cfs-wrap,
.cfs-block__inner,
.cfs-auditor-home-insert .cfs-wrap,
.cfs-footer__wrap,
.cfs-donate-wrap,
.cfs-end__inner,
.cfs-signup__wrap,
.cfs-simple-top__inner {
  width: min(calc(100% - (2 * var(--cfs-gutter))), var(--cfs-content-max)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

.cfs-simple-top__inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Allow every grid and flex child to shrink instead of forcing overflow. */
.cfs-grid > *,
.cfs-trust__grid > *,
.cfs-office__grid > *,
.cfs-proof__quotes > *,
.cfs-michael__grid > *,
.cfs-story-band > *,
.cfs-vina__grid > *,
.cfs-resume__grid > *,
.cfs-donate-grid > *,
.cfs-quotes > *,
.cfs-county__grid > *,
.cfs-field-grid > *,
.cfs-form-card__top > *,
.cfs-footer__main > *,
.cfs-footer__brand > * {
  min-width: 0 !important;
}

/* Homepage sections */
.cfs-section,
.cfs-trust__panel,
.cfs-office,
.cfs-proof,
.cfs-block {
  max-width: 100%;
}

@media (max-width: 980px) {
  .cfs-grid,
  .cfs-grid--reverse,
  .cfs-trust__grid {
    grid-template-columns: 1fr !important;
  }

  .cfs-grid--reverse > :first-child,
  .cfs-grid--reverse > :last-child {
    order: initial !important;
  }

  .cfs-photo {
    width: 100% !important;
    max-height: min(72vw, 560px);
    object-fit: cover;
  }
}

@media (max-width: 760px) {
  .cfs-section,
  .cfs-block,
  .cfs-trust__panel {
    padding-left: clamp(16px, 5vw, 28px) !important;
    padding-right: clamp(16px, 5vw, 28px) !important;
  }

  .cfs-h2,
  .cfs-title,
  .cfs-end__title,
  .cfs-donate-title,
  .cfs-signup__copy h1 {
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
}

/* ---------- About page ---------- */
@media (max-width: 939px) {
  .cfs-michael__grid,
  .cfs-story-band,
  .cfs-story-band--reverse,
  .cfs-vina__grid {
    grid-template-columns: 1fr !important;
  }

  .cfs-story-band--reverse .cfs-story-band__text,
  .cfs-story-band--reverse .cfs-story-band__media {
    order: initial !important;
  }

  .cfs-story-band__text,
  .cfs-michael__copy,
  .cfs-vina__body {
    max-width: none !important;
  }
}

@media (max-width: 699px) {
  .cfs-resume__grid {
    grid-template-columns: 1fr !important;
  }

  .cfs-photo-feature__stack {
    gap: 7px !important;
  }
}

/* ---------- Contribute page ---------- */
@media (max-width: 900px) {
  .cfs-donate-grid {
    grid-template-columns: 1fr !important;
  }

  .cfs-donate-copy,
  .cfs-donate-card {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .cfs-simple-top__inner {
    width: 100% !important;
    padding: 11px 12px !important;
  }

  .cfs-simple-top__logo img {
    width: min(230px, 62vw) !important;
  }

  .cfs-simple-top__home {
    padding-inline: 12px !important;
    font-size: 0.78rem !important;
  }

  .cfs-donate-button {
    width: 100% !important;
  }
}

/* ---------- Endorsements page ---------- */
.cfs-card__name,
.cfs-card__role,
.cfs-quote__name,
.cfs-quote__role,
.cfs-name__main,
.cfs-name__detail,
.cfs-orgs__item {
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .cfs-grid--statewide,
  .cfs-grid--county-former,
  .cfs-county__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .cfs-quotes,
  .cfs-grid,
  .cfs-grid--two,
  .cfs-grid--statewide,
  .cfs-grid--county-former,
  .cfs-county__grid,
  .cfs-party,
  .cfs-names {
    grid-template-columns: 1fr !important;
  }

  .cfs-quote,
  .cfs-card,
  .cfs-party__card,
  .cfs-county__card {
    padding-left: clamp(18px, 5vw, 28px) !important;
    padding-right: clamp(18px, 5vw, 28px) !important;
  }

  .cfs-quote__body {
    padding-left: 22px !important;
  }

  .cfs-cta {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
}

/* ---------- Signup page ---------- */
@media (max-width: 1080px) {
  .cfs-signup__intro {
    grid-template-columns: 1fr !important;
  }

  .cfs-signup__copy {
    max-width: 780px !important;
  }
}

@media (max-width: 760px) {
  .cfs-form-card__top {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .cfs-form-card__logo {
    margin-inline: auto;
  }

  .cfs-field-grid {
    grid-template-columns: 1fr !important;
  }

  .cfs-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cfs-submit-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .cfs-checks {
    grid-template-columns: 1fr !important;
  }

  .cfs-signup__tag-leading,
  .cfs-signup__tag-sunlight {
    font-size: clamp(2.45rem, 13vw, 3.3rem) !important;
  }

  .cfs-signup__tag-with {
    font-size: clamp(1.45rem, 8vw, 2.1rem) !important;
  }
}

/* ---------- Shared footer ---------- */
.cfs-footer__wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.cfs-footer__main {
  grid-template-columns: minmax(260px, 1.1fr) minmax(230px, 0.9fr) minmax(210px, 0.72fr) !important;
  gap: clamp(22px, 3.5vw, 48px) !important;
}

@media (max-width: 980px) {
  .cfs-footer__main {
    grid-template-columns: 1fr 1fr !important;
  }

  .cfs-footer__brand {
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(220px, 340px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 700px) {
  .cfs-footer__main,
  .cfs-footer__brand {
    grid-template-columns: 1fr !important;
  }

  .cfs-footer__brand {
    display: grid !important;
  }

  .cfs-footer__nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cfs-footer__nav a {
    width: 100% !important;
  }
}

@media (max-width: 420px) {
  .cfs-footer__nav {
    grid-template-columns: 1fr !important;
  }
}

/* ======================================================================
   FINAL VIEWPORT-PROPORTIONAL LAYOUT
   Keeps the composition proportional on large desktops, high-resolution
   displays, and non-100% browser zoom instead of collapsing into a narrow
   centered max-width column.
   ====================================================================== */

@media (min-width: 1200px) {
  /* Header: scale with the viewport, matching the original wide composition. */
  .cfs-header__inner {
    width: 86vw !important;
    max-width: none !important;
    min-height: 14vw !important;
    padding: 2.7vw 0 !important;
    gap: 4.5vw !important;
  }

  .cfs-header__logo {
    flex: 0 0 20.5vw !important;
    width: 20.5vw !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .cfs-header__logo img {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    transform: none !important;
  }

  .cfs-header nav {
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
  }

  .cfs-header__nav {
    width: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 0.9vw !important;
  }

  .cfs-header__nav a {
    min-height: 3.6vw !important;
    padding: 0.85vw 1.8vw !important;
    font-size: 1.05vw !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Hero: preserve the same proportions at every wide-screen size. */
  .cc-hero {
    width: 100% !important;
    height: 46.75vw !important;
    min-height: 0 !important;
    max-height: none !important;
    background-image: var(--hero-photo) !important;
    background-size: 100% auto !important;
    background-position: center 38% !important;
    background-repeat: no-repeat !important;
  }

  .cc-hero-inner {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .cc-hero-content {
    position: absolute !important;
    z-index: 2 !important;
    left: 3.8vw !important;
    top: 4.4vw !important;
    width: 41.5vw !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .cc-hero-spacer {
    display: none !important;
  }

  .cc-slogan {
    width: 100% !important;
    padding-left: 3.8vw !important;
    margin: 0 0 4.6vw !important;
    font-size: 6.15vw !important;
    line-height: 0.98 !important;
    letter-spacing: -0.025em !important;
  }

  .cc-slogan::before {
    left: 0 !important;
    top: 0.08vw !important;
    bottom: 0.3vw !important;
    width: 2vw !important;
  }

  .cc-slogan-line:last-child {
    gap: 1.15vw !important;
    margin-top: 0.35vw !important;
  }

  .cc-form {
    width: 100% !important;
    max-width: none !important;
    padding: 1.6vw !important;
  }

  .cc-form-row {
    gap: 0.9vw !important;
    margin-bottom: 0.9vw !important;
  }

  .cc-form-field input[type="text"],
  .cc-form-field input[type="email"] {
    min-height: 2.95vw !important;
    padding: 0.65vw 0.75vw !important;
    font-size: 0.96vw !important;
  }

  .cc-form-field label,
  .cc-check {
    margin-top: 0.35vw !important;
    font-size: 0.82vw !important;
  }

  .cc-form-checks {
    gap: 1vw !important;
    margin: 0.35vw 0 1vw !important;
  }

  .cc-check {
    gap: 0.5vw !important;
  }

  .cc-check input {
    width: 1.35vw !important;
    height: 1.35vw !important;
    min-width: 1.35vw !important;
  }

  .cc-submit {
    min-height: 3.15vw !important;
    padding: 0.75vw 1.2vw !important;
    font-size: 1.05vw !important;
  }

  /* The four campaign priorities should span the viewport, not a narrow box. */
  .cfs-trust__wrap {
    width: 100% !important;
    max-width: none !important;
    padding: 0 0 3.4vw !important;
  }

  .cfs-trust__tabs {
    width: 100% !important;
    max-width: none !important;
  }

  .cfs-trust__tab {
    min-height: 9.2vw !important;
    padding: 1.2vw 0.8vw !important;
    font-size: 2.35vw !important;
  }

  .cfs-trust__panel {
    width: 92vw !important;
    max-width: none !important;
    margin: 0.7vw auto 0 !important;
  }

  /* Let the remaining standalone pages make useful use of wide displays. */
  .cfs-inner,
  .cfs-wrap,
  .cfs-block__inner,
  .cfs-auditor-home-insert .cfs-wrap,
  .cfs-footer__wrap,
  .cfs-donate-wrap,
  .cfs-end__inner,
  .cfs-signup__wrap,
  .cfs-simple-top__inner {
    width: 92vw !important;
    max-width: none !important;
  }
}

/* Tablet transition: switch the hero to the stacked mobile composition before
   it becomes cramped beside the stacked navigation. */
@media (min-width: 769px) and (max-width: 900px) {
  .cc-hero {
    min-height: 0 !important;
    height: auto !important;
    background-image: none !important;
  }

  .cc-hero-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .cc-hero-content {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .cc-hero-spacer {
    display: none !important;
  }

  .cc-hero-mobile-img {
    display: block !important;
    position: relative !important;
    order: 1 !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .cc-hero-mobile-img img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: 69% center !important;
  }

  .cc-slogan {
    order: 2 !important;
    position: absolute !important;
    inset: clamp(18px, 4vw, 32px) 0 auto 0 !important;
    z-index: 4 !important;
    width: min(92%, 690px) !important;
    padding: 0 38px 0 86px !important;
    margin: 0 !important;
    font-size: clamp(4.5rem, 10vw, 5.4rem) !important;
    line-height: 1.05 !important;
  }

  .cc-slogan::before {
    left: 38px !important;
    width: 14px !important;
    top: 5px !important;
    bottom: 5px !important;
  }

  .cc-form {
    order: 3 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 34px 28px 40px !important;
    border-radius: 0 !important;
  }
}