@charset "utf-8";
/* ==========================================================================
   Mobile UI fixes (loaded last so it wins the cascade).
   Grouped by issue: overflow, media, typography, layout, tap targets.
   Rules are scoped with `body ` where needed to out-specify component
   inline <style> blocks that render after the <head> stylesheets.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kill horizontal scrolling / content spilling off screen
   -------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Break long words / URLs so they don't force the page wider than the screen */
p,
li,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
td,
th,
blockquote,
figcaption {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* --------------------------------------------------------------------------
   2. Media scales inside its container
   -------------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
}

/* All videos: show full frame; section height follows video aspect ratio */
video {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

/* Hero sections with background video */
#home.full-screen-block,
.full-screen-block:has(> video.bg_video) {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Desktop: header overlays hero video */
@media (min-width: 769px) {
  #home.full-screen-block > #header:not(.header-top-fixed),
  #home > #header:not(.header-top-fixed) {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 150;
  }

  #home .slick-slider {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 2;
    pointer-events: none;
  }

  #home .slick-slider .slick-list,
  #home .slick-slider .slick-track,
  #home .slick-slider .slick-slide,
  #home .slick-slider .slick-slide > div,
  #home .slick-slider .full-screen-block {
    height: 100% !important;
  }
}

/* Home desktop scrolled navbar: let the brand fill the fixed bar cleanly. */
@media (min-width: 769px) {
  #header.header-top-fixed:not(.force-small-header) .navbar.navbar-small .navbar-header {
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
  }

  #header.header-top-fixed:not(.force-small-header) .navbar.navbar-small .header-logo {
    height: 100px !important;
    padding: 4px 16px !important;
    display: flex !important;
    align-items: center !important;
  }

  #header.header-top-fixed:not(.force-small-header) .navbar.navbar-small .header-logo img {
    height: 92px !important;
    max-height: 92px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  #header.header-top-fixed:not(.force-small-header) .navbar-default .navbar-nav > li > .bg-icon i,
  #header.header-top-fixed:not(.force-small-header) .navbar-default:not(.nav-icons-only) .navbar-nav > li > .bg-icon i {
    font-size: 40px !important;
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow:
      0 2px 5px rgba(0, 0, 0, 0.95),
      0 0 14px rgba(255, 219, 94, 0.75) !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)) !important;
  }

  #header.header-top-fixed:not(.force-small-header) .navbar-default .navbar-nav > li::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    pointer-events: none;
    z-index: 1;
  }

  #header.header-top-fixed:not(.force-small-header) .navbar-default .navbar-nav > li > .bg-icon,
  #header.header-top-fixed:not(.force-small-header) .navbar-default .navbar-nav > li > a,
  #header.header-top-fixed:not(.force-small-header) .navbar-default .navbar-nav > li > .link-item,
  #header.header-top-fixed:not(.force-small-header) .navbar-default .navbar-nav > li > .services-link {
    z-index: 4 !important;
  }
}

/* Mobile: stack header above video so the top is not cropped/hidden */
@media (max-width: 768px) {
  #home.full-screen-block,
  .full-screen-block:has(> video.bg_video) {
    display: flex !important;
    flex-direction: column !important;
  }

  #home.full-screen-block > #header,
  #home > #header,
  .full-screen-block:has(> video.bg_video) > #header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    z-index: 2 !important;
  }

  #home.full-screen-block > video.bg_video,
  .full-screen-block:has(> video.bg_video) > video.bg_video {
    order: 2 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: top center !important;
    display: block !important;
    pointer-events: none !important;
    -webkit-touch-callout: none !important;
  }

  #home .slick-slider {
    order: 3 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  #home .slick-slider .slick-list,
  #home .slick-slider .slick-track,
  #home .slick-slider .slick-slide,
  #home .slick-slider .slick-slide > div,
  #home .slick-slider .full-screen-block {
    height: 0 !important;
    min-height: 0 !important;
  }
}

/* Freeze navbar at top once user scrolls */
#home.full-screen-block > #header.header-top-fixed,
#home > #header.header-top-fixed,
#header.header-top-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}

/* Internal pages (Layout): in-flow spacer + collapsed fixed header */
:root {
  --layout-header-height: 100px;
  --layout-mobile-header-height: 72px;
  --a4h-page-gradient: linear-gradient(to right, #ffdb5e 0%, #ffffff 100%);
}

/* Reserve document flow space under position:fixed internal headers */
.internal-header-spacer {
  display: block;
  width: 100%;
  height: var(--layout-header-height);
  margin-bottom: -1px;
  background: var(--a4h-page-gradient);
  flex-shrink: 0;
  pointer-events: none;
}

body .page-with-fixed-header {
  padding-top: 0 !important;
}

/* Inner fixed pages: prevent Safari/macOS from showing the dark body or
   header shadow as a black strip between the navbar and page content. */
body {
  background: var(--a4h-page-gradient) !important;
}

#header.force-small-header.header-top-fixed {
  background: var(--a4h-page-gradient) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

#header.force-small-header.header-top-fixed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--a4h-page-gradient);
  pointer-events: none;
}

#header.force-small-header.header-top-fixed .full-screen-block,
#header.force-small-header .header-body,
#header.force-small-header .header-body-fixed,
#header.force-small-header #container-fixed,
#header.force-small-header .navbar-default,
#header.force-small-header .navbar.navbar-small,
#header.force-small-header .navbar-header {
  background: var(--a4h-page-gradient) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

/* Prevent page titles from being pulled under the fixed navbar */
body .page-with-fixed-header .hero,
body .page-with-fixed-header .about-topWrap,
body .page-with-fixed-header .hra-topWrap,
body .page-with-fixed-header h1.head-title,
body .page-with-fixed-header .hra-topTitle,
body .page-with-fixed-header .a4h-main-header,
body .page-with-fixed-header .about-topTitle,
body .page-with-fixed-header .membership-volunteer-title {
  margin-top: 0 !important;
}

body .page-with-fixed-header .hra-topTitle .uppercase,
body .page-with-fixed-header .head-title .uppercase {
  margin-top: 0 !important;
}

body .page-with-fixed-header h1.white {
  margin-top: 0 !important;
}

/* Show full heading text on internal pages (some pages force single-line ellipsis) */
body .page-with-fixed-header .hra-topTitle .uppercase,
body .page-with-fixed-header .hra-topTitle span,
body .page-with-fixed-header .head-title span {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word;
}

@media (max-width: 768px) {
  .internal-header-spacer {
    height: var(--layout-mobile-header-height);
  }

  /* Kill the dark strip under the fixed navbar (body bg was showing through) */
  body {
    background: linear-gradient(to right, #ffdb5e 0%, #ffffff 100%) !important;
  }

  #header.force-small-header.header-top-fixed,
  #header.header-top-fixed {
    background: linear-gradient(to right, #ffdb5e 0%, #ffffff 100%) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }

  #header.force-small-header .header-body-fixed,
  #header.force-small-header .navbar-default,
  #header.force-small-header .navbar-header {
    background: linear-gradient(to right, #ffdb5e 0%, #ffffff 100%) !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  #header .navbar-default .navbar-collapse:not(.show) {
    box-shadow: none !important;
    border-top: none !important;
  }

  /* main.css sets internal-page logo to 90px — shrink for mobile bar */
  #header.force-small-header .navbar-default.navbar-small .navbar-header .header-logo img,
  #header.force-small-header .navbar-default.navbar-small .navbar-header img,
  #header.force-small-header .header-logo img,
  #header.force-small-header .navbar.navbar-small .header-logo img {
    height: 56px !important;
    width: auto !important;
    max-height: 56px !important;
  }

  #header.force-small-header .navbar-default.navbar-small .navbar-header,
  #header.force-small-header .navbar-header {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 12px !important;
    align-items: center !important;
  }

  #header.force-small-header.header-top-fixed,
  #header.force-small-header.header-top-fixed .full-screen-block,
  #header.force-small-header .header-body,
  #header.force-small-header .header-body-fixed,
  #header.force-small-header #container-fixed,
  #header.force-small-header .navbar-default,
  #header.force-small-header .navbar-default.navbar-small {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-shadow: none !important;
  }

  #header.force-small-header.header-top-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
  }

  #header.force-small-header .navbar-default .navbar-collapse {
    height: auto !important;
  }

  body .page-with-fixed-header > main.services-content {
    padding-top: 8px !important;
  }

  body .page-with-fixed-header .block.color-scheme-4,
  body .page-with-fixed-header .voter-guide-page .hero,
  body .page-with-fixed-header .about-topWrap,
  body .page-with-fixed-header .hra-topWrap {
    padding-top: 0.75rem !important;
  }
}

/* Footer: keep logo circular/proportional on mobile */
@media (max-width: 768px) {
  #footer .footer-bottom-custom {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    margin-left: 0 !important;
    padding: 24px 16px !important;
    text-align: center !important;
  }

  #footer .footer-logo-left {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 auto !important;
  }

  #footer .footer-logo-left img {
    width: auto !important;
    height: 72px !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  #footer .footer-center-content {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }

  #footer .footer-bottom-custom .social-list {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
}

/* Page video wrappers: drop fixed aspect-ratio boxes; flow with video */
.howl-fullVideo,
.hra-fullVideo,
.fog-fullVideo,
.a4h-fullVideo,
.lep-fullVideo,
.fog-containerVideo,
.video-frame,
.video-showcase-container,
.home-hero {
  height: auto !important;
  aspect-ratio: unset !important;
  overflow: visible !important;
}

.howl-fullVideo video,
.hra-fullVideo video,
.fog-fullVideo video,
.a4h-fullVideo video,
.lep-fullVideo video,
.fog-containerVideo video,
.video-frame video,
.video-showcase-container video,
.home-hero video {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

iframe,
embed,
object,
svg {
  max-width: 100%;
}

/* Wide tables / preformatted blocks scroll instead of stretching the page */
table {
  max-width: 100%;
}

pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ==========================================================================
   Phone + small tablet (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
  /* ---- State chapter pages (35 pages share .chapter-container) ---- */
  body .chapter-container {
    padding: 24px 16px !important;
  }
  body .chapter-container .chapter-title {
    font-size: 26px !important;
    letter-spacing: 1px !important;
    margin-bottom: 24px !important;
    word-break: break-word;
  }
  body .chapter-container .leader {
    font-size: 16px !important;
    margin-top: 12px !important;
  }
  body .chapter-container .section-title {
    font-size: 17px !important;
    margin-top: 20px !important;
  }
  body .chapter-container p,
  body .chapter-container li {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  body .chapter-container ul {
    margin-left: 18px !important;
  }

  /* ---- Layout: force common multi-column patterns to stack ---- */
  body .row {
    margin-left: 0;
    margin-right: 0;
  }
  body [class*="col-"] {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body .d-flex,
  body .flex-row {
    flex-wrap: wrap;
  }

  /* ---- Reduce oversized horizontal padding used across content pages ---- */
  body .pad-l-80,
  body .pad-r-80,
  body .pad-l-60,
  body .pad-r-60 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---- Cap any element that hard-codes a width wider than the phone ---- */
  body main img,
  body .services-content img,
  body .chapter-container img {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Endorsement cards need full-bleed portraits — not voter-guide seals */
  body main .cards img,
  body main .cards--two img,
  body main .candidate-img-container img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Selected candidate modal: full uncropped photo */
  body main .modalImage img,
  body .modalImage img,
  body main .modalImage img.modal-portrait,
  body .modalImage img.modal-portrait,
  body .modalContainer .modalImage img.modal-portrait {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 40vh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
  }

  /* Voter guide: keep seal / photo sizes from component CSS */
  body main .candidate-card img.endorsement-seal,
  body .voter-guide-page .endorsement-seal {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    object-fit: contain !important;
    object-position: center center !important;
    flex-shrink: 0 !important;
  }

  body main .candidate-card img.candidate-photo,
  body .voter-guide-page .candidate-photo {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    object-fit: cover !important;
    object-position: top center !important;
    flex-shrink: 0 !important;
  }

  /* A4H chapter cards: icon-sized state images, 2-col friendly */
  body main .chapter-card > img {
    width: 100% !important;
    max-width: 100% !important;
    height: 120px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  body main .chapters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  body main .map-section {
    display: block !important;
  }

  body main .video-showcase-section {
    display: block !important;
  }

  /* A4H Events logos + carousel images */
  body main .logo-card img,
  body main .event-card img,
  body main .slide-main img {
    width: 100% !important;
    max-width: 100% !important;
  }

  body main .event-card img {
    width: min(78vw, 300px) !important;
  }

  /* ---- Tap targets: make interactive elements comfortably tappable ---- */
  body .services-content a:not(.header-logo),
  body .chapter-container a,
  body button,
  body .btn,
  body .fog-btn,
  body input[type="submit"] {
    min-height: 44px;
  }

  body button,
  body .btn,
  body .fog-btn,
  body input[type="submit"],
  body input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  body .donate-cta-section .volunteer-btn {
    width: auto !important;
    max-width: calc(100vw - 56px) !important;
    min-height: 44px !important;
    padding: 10px 20px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* Form fields shouldn't overflow and shouldn't trigger iOS zoom (<16px) */
  body input,
  body select,
  body textarea {
    max-width: 100%;
    font-size: 16px;
  }
}

/* ==========================================================================
   4. Mobile navigation menu (<= 768px)
   Fixes contrast/readability issues from desktop theme rules:
   - dark blue link text (#0d2849 / #003366) on dark menu overlay
   - yellow-white header gradient bleeding into menu rows (EVENTS white block)
   ========================================================================== */
@media (max-width: 768px) {
  /* ---- Top bar only keeps the brand gradient; menu panel is solid dark ---- */
  #header .navbar-default,
  #header .header-body-fixed .navbar-default,
  #header.header-top-fixed .navbar-default,
  #header.force-small-header .navbar-default {
    background: transparent !important;
  }
  #header .navbar-default .navbar-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 12px;
    position: relative;
    z-index: 3;
    background: linear-gradient(to right, #ffdb5e 0%, #ffffff 100%) !important;
  }
  #header .header-logo {
    height: auto !important;
    padding: 2px 8px !important;
    display: flex !important;
    align-items: center !important;
  }
  #header .header-logo img,
  #header.force-small-header .header-logo img,
  #header .navbar.navbar-small .header-logo img {
    height: 56px !important;
    width: auto !important;
    max-height: 56px !important;
    object-fit: contain !important;
  }
  #header .navbar-toggle {
    display: block !important;
    margin: 0 !important;
    padding: 8px 10px;
    background-color: #b46e3c !important;
    border: 1px solid #b46e3c !important;
    border-radius: 4px;
  }

  #header .navbar-default .navbar-toggle .icon-bar,
  #header .navbar-single .navbar-toggle .icon-bar {
    background-color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #header .navbar-default .navbar-toggle:hover,
  #header .navbar-default .navbar-toggle:focus,
  #header .navbar-single .navbar-toggle:hover,
  #header .navbar-single .navbar-toggle:focus {
    background-color: #9a5d33 !important;
    border-color: #9a5d33 !important;
  }

  #header .navbar-default {
    position: relative;
  }

  /* ---- Dropdown panel: opaque dark background, full width ---- */
  #header .navbar-default .navbar-collapse,
  #header .navbar-default .navbar-collapse.show {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 72px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #1a1a1a !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45) !important;
    border-top: 2px solid #b46e3c !important;
    z-index: 2000 !important;
  }

  /* ---- Reset desktop side-panel / hover nav into a stacked list ---- */
  #header .navbar-default .navbar-nav,
  #header .navbar-default .navbar-nav:hover,
  #header .header-body-fixed .navbar-default .navbar-nav {
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    background: transparent !important;
  }

  #header .navbar-default .navbar-nav > li,
  #header .navbar-default .navbar-nav > li.home,
  #header .navbar-default .navbar-nav > li.about,
  #header .navbar-default .navbar-nav > li.service,
  #header .navbar-default .navbar-nav > li.work,
  #header .navbar-default .navbar-nav > li.blog,
  #header .navbar-default .navbar-nav > li.contact,
  #header .header-body-fixed .navbar-default .navbar-nav > li,
  #header .header-body-fixed .navbar-default .navbar-nav > li.service {
    position: relative !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 50px !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #header .navbar-default .navbar-nav > li .bg-icon,
  #header .navbar-default .navbar-nav > li .rotated-title,
  #header .navbar-default .navbar-nav > li .bg-nav-gr {
    display: none !important;
  }

  /* ---- ALL top-level links: white text, no background bleed ---- */
  #header .navbar-default .navbar-nav > li > a,
  #header .navbar-default .navbar-nav > li > .link-item,
  #header .navbar-default .navbar-nav > li > .services-link,
  #header .header-body-fixed .navbar-default .navbar-nav > li > a,
  #header .header-body-fixed .navbar-default .navbar-nav > li > .link-item,
  #header .header-body-fixed .navbar-default .navbar-nav > li.service > .services-link,
  #header .header-body-fixed .navbar-default .navbar-nav > li.service,
  #header .navbar-default .navbar-nav > li.contact.orange-transparent > a,
  #header .navbar-default .navbar-nav > li.contact.orange-transparent > .link-item,
  #header .navbar-default .navbar-nav > li.work > a,
  #header .navbar-default .navbar-nav > li.work > .link-item {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    padding: 15px 46px 15px 18px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-indent: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: transparent !important;
    background-image: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    z-index: 5 !important;
  }

  #header .navbar-default .navbar-nav > li > a:hover,
  #header .navbar-default .navbar-nav > li > .link-item:hover,
  #header .navbar-default .navbar-nav > li > .services-link:hover,
  #header .navbar-default .navbar-nav > li.sub-open > .services-link,
  #header .header-body-fixed .navbar-default .navbar-nav > li.service:hover,
  #header .header-body-fixed .navbar-default .navbar-nav > li.work.service:hover,
  #header .header-body-fixed .navbar-default .navbar-nav > li.service:hover > .services-link,
  #header .header-body-fixed .navbar-default .navbar-nav > li.work.service:hover > .services-link,
  #header .header-body-fixed .navbar-default .navbar-nav > li.service.sub-open > .services-link,
  #header .header-body-fixed .navbar-default .navbar-nav > li.work.service.sub-open > .services-link {
    background: rgba(180, 110, 60, 0.45) !important;
    background-image: none !important;
    color: #ffffff !important;
  }

  #header .navbar-default .navbar-nav > li.contact.orange-transparent,
  #header .header-body-fixed .navbar-default .navbar-nav > li.contact.orange-transparent {
    background: #ffd3a6 !important;
    background-color: #ffd3a6 !important;
    background-image: none !important;
    border-bottom-color: rgba(13, 40, 73, 0.18) !important;
  }

  #header .navbar-default .navbar-nav > li.contact.orange-transparent > a,
  #header .navbar-default .navbar-nav > li.contact.orange-transparent > .link-item,
  #header .header-body-fixed .navbar-default .navbar-nav > li.contact.orange-transparent > a,
  #header .header-body-fixed .navbar-default .navbar-nav > li.contact.orange-transparent > .link-item,
  #header .navbar-default .navbar-nav > li.contact.orange-transparent > a:hover,
  #header .navbar-default .navbar-nav > li.contact.orange-transparent > .link-item:hover,
  #header .navbar-default .navbar-nav > li.contact.orange-transparent > a:focus,
  #header .navbar-default .navbar-nav > li.contact.orange-transparent > .link-item:focus {
    background: #ffd3a6 !important;
    background-color: #ffd3a6 !important;
    background-image: none !important;
    color: #0d2849 !important;
    -webkit-text-fill-color: #0d2849 !important;
    text-shadow: none !important;
  }

  /* ---- MISSION / EVENTS toggles: out-specify legacy main.css rules that
     forced a near-white background + centered text on these two items only,
     so they match the other (dark, left-aligned) top-level links. ---- */
  #header .navbar-default .navbar-nav > li.service > a.link-item.services-link,
  #header .navbar-default .navbar-nav > li.work.service > a.link-item.services-link {
    padding: 15px 46px 15px 18px !important;
    text-align: left !important;
    text-indent: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }
  #header .navbar-default .navbar-nav > li.service:hover > a.link-item.services-link,
  #header .navbar-default .navbar-nav > li.service.sub-open > a.link-item.services-link,
  #header .navbar-default .navbar-nav > li.work.service:hover > a.link-item.services-link,
  #header .navbar-default .navbar-nav > li.work.service.sub-open > a.link-item.services-link {
    background: rgba(180, 110, 60, 0.45) !important;
    background-color: rgba(180, 110, 60, 0.45) !important;
    color: #ffffff !important;
  }

  /* ---- +/- on items with submenus ---- */
  #header .navbar-default .navbar-nav > li.service > .services-link::after,
  #header .navbar-default .navbar-nav > li.work.service > .services-link::after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
    color: #ffd27a;
    font-weight: 400;
  }
  #header .navbar-default .navbar-nav > li.service.sub-open > .services-link::after,
  #header .navbar-default .navbar-nav > li.work.service.sub-open > .services-link::after {
    content: "\2013";
  }

  /* ---- Submenus: hidden until .sub-open ---- */
  #header .navbar-default .navbar-nav > li .sub-menu-container,
  #header .navbar-default .navbar-nav > li.service > .sub-menu-container,
  #header .navbar-default .navbar-nav > li.work.service > .sub-menu-container,
  #header .header-body-fixed .navbar-default .navbar-nav > li.service > .sub-menu-container,
  #header .header-body-fixed .navbar-default .navbar-nav > li.work.service > .sub-menu-container,
  #header .header-body-fixed .navbar.is-layout2 .service > .sub-menu-container,
  #header .header-body-fixed .navbar.is-layout2 .work.service > .sub-menu-container {
    position: static !important;
    display: none !important;
    opacity: 1 !important;
    visibility: hidden !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 0 10px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    isolation: auto !important;
  }
  #header .navbar-default .navbar-nav > li.sub-open > .sub-menu-container,
  #header .navbar-default .navbar-nav > li.service.sub-open > .sub-menu-container,
  #header .navbar-default .navbar-nav > li.work.service.sub-open > .sub-menu-container,
  #header .header-body-fixed .navbar.is-layout2 .service.sub-open > .sub-menu-container,
  #header .header-body-fixed .navbar.is-layout2 .work.service.sub-open > .sub-menu-container {
    display: block !important;
    visibility: visible !important;
  }
  #header .navbar-default .navbar-nav > li .sub-menu-container::before,
  #header .navbar-default .navbar-nav > li .sub-menu-container::after {
    display: none !important;
  }

  /* ---- Submenu links ---- */
  #header .navbar-default .navbar-nav .sub-menu-list,
  #header .navbar-default .navbar-nav .sub-sub-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  #header .navbar-default .navbar-nav .sub-menu-list > li {
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  #header .navbar-default .navbar-nav .sub-menu-list .has-submenu > .submenu-title {
    display: block !important;
    padding: 12px 18px 6px 26px !important;
    color: #ffd27a !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    background: transparent !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  #header .navbar-default .navbar-nav .sub-menu-list > li > a:not(.submenu-title),
  #header .navbar-default .navbar-nav .sub-menu-list > li > .link-item:not(.submenu-title),
  #header .navbar-default .navbar-nav .sub-sub-menu > li > a,
  #header .navbar-default .navbar-nav .sub-sub-menu > li > .link-item,
  #header .navbar-default .navbar-nav > li.service .sub-menu-list li a,
  #header .navbar-default .navbar-nav > li.service .sub-menu-list li .link-item {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 18px 11px 38px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    text-indent: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  #header .navbar-default .navbar-nav .sub-menu-list a:hover,
  #header .navbar-default .navbar-nav .sub-menu-list .link-item:hover,
  #header .navbar-default .navbar-nav .sub-sub-menu a:hover {
    background: rgba(180, 110, 60, 0.45) !important;
    color: #ffffff !important;
  }
  #header .navbar-default .navbar-nav .work.service .sub-menu-list .has-submenu > .submenu-title {
    color: #ffffff !important;
    font-weight: 500 !important;
    padding: 12px 18px 12px 26px !important;
  }
}

/* ==========================================================================
   Small phones (<= 480px): tighten a bit further
   ========================================================================== */
@media (max-width: 480px) {
  body .chapter-container {
    padding: 20px 14px !important;
  }
  body .chapter-container .chapter-title {
    font-size: 22px !important;
  }
}

/* ==========================================================================
   Desktop: icons ONLY — hide link text on icons (open + scrolled nav)
   (Keep vertical .rotated-title labels on the open side panels.)
   ========================================================================== */
@media (min-width: 769px) {
  /* Hide the clickable label text sitting on top of icons */
  #header .navbar-default.nav-icons-only .navbar-nav > li > a,
  #header .navbar-default.nav-icons-only .navbar-nav > li > .link-item,
  #header .navbar-default.nav-icons-only .navbar-nav > li > .services-link,
  #header .navbar-default.nav-icons-only .navbar-nav > li.contact.orange-transparent > a,
  #header .navbar-default.nav-icons-only .navbar-nav > li.contact.orange-transparent > .link-item,
  #header.header-top-fixed .navbar-default .navbar-nav > li > a,
  #header.header-top-fixed .navbar-default .navbar-nav > li > .link-item,
  #header.header-top-fixed .navbar-default .navbar-nav > li > .services-link,
  #header .header-body-fixed .navbar-default .navbar-nav > li > a,
  #header .header-body-fixed .navbar-default .navbar-nav > li > .link-item,
  #header .header-body-fixed .navbar-default .navbar-nav > li > .services-link,
  #header.header-top-fixed .navbar-default .navbar-nav > li.contact.orange-transparent > a,
  #header.header-top-fixed .navbar-default .navbar-nav > li.contact.orange-transparent > .link-item,
  #header .header-body-fixed .navbar-default .navbar-nav > li.contact.orange-transparent > a,
  #header .header-body-fixed .navbar-default .navbar-nav > li.contact.orange-transparent > .link-item {
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    text-indent: 0 !important;
    overflow: hidden !important;
  }

  #header .navbar-default.nav-icons-only .navbar-nav > li > a *,
  #header .navbar-default.nav-icons-only .navbar-nav > li > .link-item *,
  #header .navbar-default.nav-icons-only .navbar-nav > li > .services-link *,
  #header.header-top-fixed .navbar-default .navbar-nav > li > a *,
  #header.header-top-fixed .navbar-default .navbar-nav > li > .link-item *,
  #header.header-top-fixed .navbar-default .navbar-nav > li > .services-link *,
  #header .header-body-fixed .navbar-default .navbar-nav > li > a *,
  #header .header-body-fixed .navbar-default .navbar-nav > li > .link-item *,
  #header .header-body-fixed .navbar-default .navbar-nav > li > .services-link * {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Scrolled/fixed top bar: center icons in compact row */
  #header.header-top-fixed .navbar-default .navbar-nav > li > .bg-icon,
  #header .header-body-fixed .navbar-default .navbar-nav > li > .bg-icon {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    z-index: 3 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  /* Open side nav: keep icons at top (original theme layout) */
  #header:not(.header-top-fixed) .navbar-default.nav-icons-only .navbar-nav > li > .bg-icon {
    top: 30px !important;
    left: 40px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  #header.header-top-fixed .navbar-default .navbar-nav > li > .bg-icon i,
  #header .header-body-fixed .navbar-default .navbar-nav > li > .bg-icon i {
    display: inline-block !important;
    font-size: 34px !important;
    line-height: 1 !important;
    color: #f1e4c9 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #header:not(.header-top-fixed) .navbar-default.nav-icons-only .navbar-nav > li > .bg-icon i {
    font-size: 60px !important;
    line-height: 80px !important;
    color: #948565 !important;
  }

  /* Vertical side labels only on home open side nav */
  #header:not(.header-top-fixed):not(.force-small-header) .navbar-default.nav-icons-only .navbar-nav > li > .rotated-title {
    display: block !important;
  }
}

/* Desktop fixed/compact navbar: show each icon's name below the icon. */
@media (min-width: 769px) {
  #header.header-top-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li > a,
  #header.header-top-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li > .link-item,
  #header.header-top-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li > .services-link,
  #header .header-body-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li > a,
  #header .header-body-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li > .link-item,
  #header .header-body-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li > .services-link {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 4px 9px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.2px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-indent: 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  #header.header-top-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li > a *,
  #header.header-top-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li > .link-item *,
  #header.header-top-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li > .services-link *,
  #header .header-body-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li > a *,
  #header .header-body-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li > .link-item *,
  #header .header-body-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li > .services-link * {
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #header.header-top-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li > .bg-icon,
  #header .header-body-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li > .bg-icon {
    top: 38% !important;
  }

  /* Donate has extra legacy selector specificity; keep its label visible too. */
  #header.header-top-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li.contact.orange-transparent > a,
  #header.header-top-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li.contact.orange-transparent > .link-item,
  #header .header-body-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li.contact.orange-transparent > a,
  #header .header-body-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li.contact.orange-transparent > .link-item {
    font-size: 11px !important;
    line-height: 1.15 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Inner desktop pages: match the home scrolled navbar treatment. */
@media (min-width: 769px) {
  #header.force-small-header.header-top-fixed .navbar.navbar-small .navbar-header {
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
  }

  #header.force-small-header.header-top-fixed .navbar.navbar-small .header-logo {
    height: 100px !important;
    padding: 4px 16px !important;
    display: flex !important;
    align-items: center !important;
  }

  #header.force-small-header.header-top-fixed .navbar.navbar-small .header-logo img {
    height: 92px !important;
    max-height: 92px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  #header.force-small-header.header-top-fixed .navbar-default .navbar-nav > li > .bg-icon i,
  #header.force-small-header.header-top-fixed .navbar-default:not(.nav-icons-only) .navbar-nav > li > .bg-icon i {
    font-size: 40px !important;
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow:
      0 2px 5px rgba(0, 0, 0, 0.95),
      0 0 14px rgba(255, 219, 94, 0.75) !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)) !important;
  }

  #header.force-small-header.header-top-fixed .navbar-default .navbar-nav > li::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    pointer-events: none;
    z-index: 1;
  }

#header.force-small-header.header-top-fixed .navbar-default .navbar-nav > li > .bg-icon,
  #header.force-small-header.header-top-fixed .navbar-default .navbar-nav > li > a,
  #header.force-small-header.header-top-fixed .navbar-default .navbar-nav > li > .link-item,
  #header.force-small-header.header-top-fixed .navbar-default .navbar-nav > li > .services-link {
    z-index: 4 !important;
  }
}

/* Desktop viewport-fit video only for root home and the four main A4H org pages */
@media (min-width: 769px) {
  #home.full-screen-block.viewport-video-page {
    display: block !important;
    height: 100vh !important;
    height: 100svh !important;
    min-height: 520px !important;
    max-height: 100vh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    background-size: cover !important;
  }

  #home.full-screen-block.viewport-video-page > video.bg_video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
}
