/* SWC Global Nav — ported from approved V3 build (page 214628434058).
   Source of truth is this file, not the page. Edit here, then deploy.
   Generated by scripts/swc/extract-v3-nav-to-theme.js */
/* Push body content below fixed custom nav */
body { padding-top: 167px !important; }
@media (max-width: 991px) { body { padding-top: 130px !important; } }
@media (max-width: 767px) { body { padding-top: 100px !important; } }

/* ── Nav Shell (fixed) ── */
#swc-mega-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  font-family: 'acumin-pro', Arial, sans-serif;
  box-sizing: border-box;
}

/* Utility bar */
.swc-utility-bar {
  background: #111;
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 32px;
  line-height: 1.4;
}
.swc-utility-bar a {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 4px 14px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
  transition: background 0.2s;
}
.swc-utility-bar a:hover { background: rgba(255,255,255,0.15); }

/* Main nav bar */
.swc-nav-bar {
  background: #004F83;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 130px;
  overflow: hidden;
  transition: height 0.3s ease;
}
#swc-mega-nav.swc-sticky .swc-nav-bar {
  height: 72px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

/* Logo — large is already white PNG, no filter */
.swc-logo-wrap { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.swc-logo-large { height: 90px !important; width: auto !important; max-width: none !important; }
.swc-logo-small { height: 50px !important; width: auto !important; max-width: none !important; filter: brightness(0) invert(1); display: none; }
#swc-mega-nav.swc-sticky .swc-logo-large { display: none; }
#swc-mega-nav.swc-sticky .swc-logo-small { display: block; }

/* Nav links */
.swc-nav-links { display: flex; align-items: center; gap: 0; flex: 1; justify-content: center; }
.swc-nav-item {
  color: #fff; font-size: 15px; font-weight: 500; letter-spacing: 0.02em;
  padding: 8px 18px; cursor: pointer; position: relative; text-decoration: none;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  transition: opacity 0.15s; border-radius: 3px;
}
.swc-nav-item:hover { background: rgba(255,255,255,0.12); }

/* CLEAN Pro sets `a:hover, a:focus { color: #341570 }` (brand Peak purple). Nav items are
   a mix of <div> and <a> — News & Events is the only anchor — so that rule beat our base
   .swc-nav-item colour and only that item turned purple on rollover. Pinning every link
   state at (0,2,0) beats the theme's (0,1,1) without needing !important. */
.swc-nav-item:link,
.swc-nav-item:visited,
.swc-nav-item:hover,
.swc-nav-item:focus,
.swc-nav-item:active { color: #fff; }

/* Same theme rule would turn panel links purple on keyboard focus; match their hover. */
.swc-mega-links a:focus { color: #004F83; }

/* Short header state. The exact height is set inline by swc-global-nav.js (231px
   desktop / 170px mobile, per the Figma header spec) because a stylesheet rule cannot
   shrink these sections. Do NOT add a min-height here — an earlier 231px floor silently
   blocked the 170px mobile spec. This rule only clears inherited constraints. */
.swc-hero-compact {
  min-height: 0 !important;
  position: relative;
}

/* Blog post headers position their wave in normal flow (position:relative), unlike site
   pages where it is absolute and pinned to the bottom. With an explicit section height the
   in-flow wave ends ~1px short, exposing a hairline of Tekhelet beneath the white wave —
   it reads as a stray rule between the header and the content.
   Pin it to the bottom so the wave always meets the section edge exactly. Scoped to
   .swc-hero-compact, i.e. only where we set the height ourselves.

   !important is required: the blog template ships its own .blog-header .c-wave-con-btm
   rule inline in the page, which loads after this stylesheet and wins an equal-specificity
   tie. Without it the wave stays in flow — a 1px hairline on desktop and a 20px blue band
   on mobile, where the wave is shorter. */
.swc-hero-compact > .c-wave-con-btm {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* ── Image headers: nav overlays, no blue bar ─────────────────────────────
   The rule: a header carrying an image runs full-bleed under the nav, and the nav
   goes transparent over it. Blue (image-free) headers keep the solid bar.

   swc-global-nav.js adds .swc-nav-overlay to the root element when the header section has a
   background image, or when a page carries data-swc-nav-overlay (video heroes).

   Ported from the SWC Advocacy Action module, where this treatment was proven on
   the Safe Worship Zones page. That module scopes the same rules to body:has(.swc-aa);
   these are the sitewide generalisation. Both can coexist — identical declarations.

   Body offset is NOT handled here. The nav JS sets body padding-top as an inline
   !important, which outranks any stylesheet, so it zeroes the offset itself. */
.swc-nav-overlay #swc-mega-nav .swc-nav-bar,
.swc-nav-overlay #swc-mega-nav .swc-utility-bar {
  background: transparent;
  transition: background .25s ease, height .3s ease;
}

/* Bright artwork passes under the nav, so carry a gradient with it — enough to hold
   the white logo and links without reading as a bar. */
.swc-nav-overlay #swc-mega-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3,26,42,.78) 0%, rgba(3,26,42,.35) 60%, rgba(3,26,42,0) 100%);
  transition: opacity .25s ease;
}

/* Past the fold it becomes an ordinary solid nav again. */
.swc-nav-overlay #swc-mega-nav.swc-sticky .swc-nav-bar { background: #004F83; }
.swc-nav-overlay #swc-mega-nav.swc-sticky .swc-utility-bar { background: #111; }
.swc-nav-overlay #swc-mega-nav.swc-sticky::before { opacity: 0; }

/* An open mega panel needs solid ground, not the hero artwork behind it.
   Keyed off .swc-panel-is-open on the root element, set by the nav JS. The previous
   selector was #swc-mega-nav:has(.swc-panel-open) — which never matched, because the
   panels are SIBLINGS of the nav, not descendants. The visible symptom was the panel
   rendering behind the transparent nav with the gradient painted over its top edge. */
.swc-nav-overlay.swc-panel-is-open #swc-mega-nav .swc-nav-bar { background: #004F83 !important; }
.swc-nav-overlay.swc-panel-is-open #swc-mega-nav .swc-utility-bar { background: #111 !important; }
.swc-nav-overlay.swc-panel-is-open #swc-mega-nav::before { opacity: 0; }

/* Full-height image headers: keep the title clear of the wave.
   These sections are display:flex / align-items:flex-end, so their content sits at the
   very bottom — directly under the wave, which masks it out. /about/about-simon-wiesenthal
   happened to carry a 150px bottom margin on its container and looked right;
   /give/planned-giving had none and its sub-title was cut in half by the wave.
   Make it a rule instead of per-page luck: reserve the wave's height plus breathing room.
   Scoped to :not(.swc-hero-compact) — short headers have a fixed height and an empty
   container, where this margin would only cause overflow. */
   Applied as padding on the SECTION, not margin on the container: these sections are
   flex/align-items:flex-end, so bottom padding lifts the content, and it cannot be
   overridden by the per-page container margin rules that differ between these pages.
   Marked by JS as .swc-hero-titled — only heroes that actually carry a title. Image
   bands have no text and must keep their exact height. */
.swc-hero-titled {
  padding-bottom: 150px !important;
}
@media (max-width: 767px) {
  .swc-hero-titled {
    padding-bottom: 100px !important;
  }
}

/* ── Site search ──────────────────────────────────────────────────────────
   Real HubSpot site search, not a mock: posts to /search-results with the
   same `term` + `type` fields the CLEAN Pro header used, so results pages
   behave identically to before the nav swap. */
.swc-search-wrap { position: relative; display: flex; align-items: center; }
.swc-search-panel {
  position: absolute; top: calc(100% + 10px); right: 0; display: none;
  background: #fff; padding: 10px; border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22); z-index: 10001;
}
.swc-search-panel.swc-search-open { display: block; }
.swc-search-panel form { display: flex; align-items: center; gap: 6px; margin: 0; }
.swc-search-panel input[type="text"] {
  width: 240px; padding: 8px 10px; font-size: 14px; line-height: 1.3;
  border: 1px solid #cdd9e5; border-radius: 3px; color: #33475b; background: #fff;
}
.swc-search-panel input[type="text"]:focus { outline: 2px solid #004F83; outline-offset: 0; }
.swc-search-panel button[type="submit"] {
  padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  color: #fff; background: #004F83; border: none; border-radius: 3px;
}
.swc-search-btn[aria-expanded="true"] { background: rgba(255,255,255,0.18); border-radius: 3px; }

@media (max-width: 767px) {
  .swc-search-panel { position: fixed; top: 64px; left: 0; right: 0; border-radius: 0; }
  .swc-search-panel input[type="text"] { width: 100%; }
}

/* ── Keep Exploring accordion ─────────────────────────────────────────────
   Applies wherever the KE sidebar exists (interior templates: pillar,
   home-opt-1). Moved here from per-page footerHtml so every page with a
   Keep Exploring menu gets the treatment, not just the demo pages. */
.c-col.c-2 .c-content-con h3 {
  position: relative; cursor: pointer; padding-right: 2rem;
  margin-bottom: 8px; user-select: none;
}
.c-col.c-2 .c-content-con h3::after {
  content: '+'; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); font-size: 1.4em; font-weight: 300; line-height: 1;
}
.c-col.c-2 .c-content-con h3[aria-expanded='true']::after { content: '−'; }
.c-col.c-2 .c-content-con .hs-menu-wrapper {
  overflow: hidden; max-height: 0; transition: max-height 0.3s ease;
}
.c-col.c-2 .c-content-con .hs-menu-wrapper.ke-open { max-height: 600px; }
#ke-bottom-wrapper {
  background: #ffffff; padding: 28px 20px; border-top: 1px solid rgba(0,0,0,0.1);
}
#ke-bottom-wrapper .c-col.c-2 { padding-left: 0; width: 100%; }
#ke-bottom-wrapper .c-col.c-2 .c-content-con { display: block !important; border-left: none; padding-left: 0; }
#ke-bottom-wrapper .c-col.c-2 .c-content-con h3 {
  font-size: 14px !important; font-weight: 500 !important;
  text-transform: uppercase !important; letter-spacing: 1.12px !important;
  color: rgb(0,79,131) !important;
}

/* Desktop: bottom-align the KE column with the page h1 */
@media (min-width: 768px) {
  .c-col.c-2 { display: flex; flex-direction: column; justify-content: flex-end; }
  .c-col.c-2 .c-content-con { margin-top: 0; }
  .c-col.c-2 .c-content-con h3 { margin-top: 0; }
}
.swc-nav-caret { font-size: 10px; opacity: 0.7; transition: transform 0.2s; }
.swc-nav-item.swc-open .swc-nav-caret { transform: rotate(180deg); }

/* Nav extras */
.swc-nav-extras { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.swc-search-btn { background: none; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; color: #fff; }
.swc-search-btn svg { fill: #fff; width: 18px; height: 18px; }
.swc-btn-donate {
  background: #E87722; color: #fff !important; font-weight: 700; font-size: 14px;
  padding: 10px 22px; border-radius: 100px; text-decoration: none; white-space: nowrap; transition: background 0.2s;
}
.swc-btn-donate:hover { background: #d06a1a; }
.swc-btn-honor {
  background: rgba(255,255,255,0.15); color: #fff !important; font-size: 14px;
  padding: 10px 20px; border-radius: 100px; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.3); transition: background 0.2s;
}
.swc-btn-honor:hover { background: rgba(255,255,255,0.25); }

/* ── Megamenu Panels — position:fixed, OUTSIDE #swc-mega-nav, own stacking context ── */
.swc-mega-panel {
  position: fixed;
  top: 167px;
  left: 0; right: 0;
  background-color: #ffffff;
  border-top: 3px solid #004F83;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  display: none;
  z-index: 9999;
  animation: swcMegaFadeIn 0.18s ease;
}
@keyframes swcMegaFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.swc-mega-panel.swc-panel-open { display: block; }
.swc-mega-inner { max-width: 1200px; margin: 0 auto; padding: 36px 32px 40px; background-color: #ffffff; }

/* Shared column styles */
.swc-mega-grid { display: grid; gap: 32px; }
.swc-mega-col-heading {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #004F83; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid #004F83;
}
.swc-mega-links { list-style: none; margin: 0; padding: 0; }
.swc-mega-links li { margin-bottom: 8px; }
.swc-mega-links a { color: #222; text-decoration: none; font-size: 14px; line-height: 1.4; display: block; transition: color 0.15s; }
.swc-mega-links a:hover { color: #004F83; }
.swc-mega-links a.swc-link-primary { font-weight: 600; color: #004F83; font-size: 15px; }

/* Force consistent thumbnail height — overrides CLEAN Pro img { height: auto } */
.swc-mega-panel img { height: 170px !important; width: 100% !important; object-fit: cover !important; display: block !important; }

/* ── Hamburger button ── */
.swc-hamburger {
  display: none;
  background: none; border: none; cursor: pointer; padding: 6px 4px;
  flex-direction: column; gap: 5px; align-items: center; flex-shrink: 0;
}
.swc-hamburger span {
  display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.swc-hamburger.swc-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.swc-hamburger.swc-open span:nth-child(2) { opacity: 0; }
.swc-hamburger.swc-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer ── */
#swc-mobile-drawer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #004F83;
  z-index: 9998;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
#swc-mobile-drawer.swc-drawer-open { transform: translateX(0); }
.swc-mobile-nav { padding: 110px 28px 60px; }
.swc-mobile-nav-item { border-bottom: 1px solid rgba(255,255,255,0.18); }
.swc-mobile-nav-item > a,
.swc-mobile-nav-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  color: #fff; font-size: 20px; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; background: none; border: none; cursor: pointer;
  padding: 18px 0; font-family: 'acumin-pro', Arial, sans-serif; text-align: left;
}
.swc-mobile-caret { font-size: 22px; font-weight: 300; line-height: 1; transition: transform 0.2s; }
.swc-mobile-nav-toggle.swc-sub-open .swc-mobile-caret { transform: rotate(45deg); }
.swc-mobile-sub { display: none; padding: 4px 0 16px; }
.swc-mobile-sub.swc-sub-open { display: block; }
.swc-mobile-sub a {
  display: block; color: rgba(255,255,255,0.78); font-size: 15px; font-weight: 400;
  padding: 10px 0; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: 'acumin-pro', Arial, sans-serif;
}
.swc-mobile-sub a:last-child { border-bottom: none; }
.swc-mobile-sub a:hover { color: #fff; }

/* Group headings inside a drawer accordion, mirroring the desktop panel's columns.
   Without these, "Our Work" is 15 undifferentiated links in a row. */
.swc-mobile-group {
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 18px 0 6px;
  font-family: 'acumin-pro', Arial, sans-serif;
}
.swc-mobile-group:first-child { padding-top: 4px; }
/* A heading follows the previous group's last link — drop that link's divider so the
   heading reads as the start of a new group rather than a continuation. */
.swc-mobile-sub a:has(+ .swc-mobile-group) { border-bottom: none; }
.swc-mobile-actions { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.swc-mobile-donate-btn {
  display: block; background: #E87722; color: #fff !important; font-weight: 700; font-size: 16px;
  padding: 16px 24px; border-radius: 100px; text-decoration: none; text-align: center;
  font-family: 'acumin-pro', Arial, sans-serif;
}
.swc-mobile-newsletter-btn {
  display: block; color: #fff !important; font-size: 14px; text-align: center;
  text-decoration: none; opacity: 0.8; font-family: 'acumin-pro', Arial, sans-serif;
}
.swc-mobile-newsletter-btn:hover { opacity: 1; }

/* ── Responsive breakpoints ── */
@media (max-width: 991px) {
  .swc-nav-links { display: none; }
  .swc-nav-extras .swc-btn-honor { display: none; }
  .swc-hamburger { display: flex; }
}
@media (max-width: 767px) {
  .swc-utility-bar { display: none; }
  .swc-nav-bar { height: 64px !important; }
  body { padding-top: 64px !important; }

  /* The V3 build set the logo to 90px with no mobile override, so it overflowed the
     64px bar and was clipped by its overflow:hidden — it read as oversized next to the
     45px bar / 51px logo on the current site. 44px sits inside the bar with even
     clearance and lands close to today's proportions. */
  .swc-logo-large { height: 44px !important; }
  .swc-logo-small { height: 44px !important; }
}