/* 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. */
.swc-nav-overlay #swc-mega-nav:has(.swc-panel-open) .swc-nav-bar { background: #004F83; }
.swc-nav-overlay #swc-mega-nav:has(.swc-panel-open) .swc-utility-bar { background: #111; }

/* 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; }
}