/* v3.38: powaynec.com recompiled its external JupiterX CSS so the
   hard-linked stylesheet 404s — that file used to hide the JupiterX
   a11y skip-link. On the cloned interior pages it now renders as a
   stray "Skip to content" link at the top. Hide it here (still
   keyboard-focusable for accessibility) so the site no longer depends
   on the external WP CSS. */
.jupiterx-a11y-skip-navigation-link {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.jupiterx-a11y-skip-navigation-link:focus {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  background: #0e3b21 !important;
  color: #fff !important;
  z-index: 100001 !important;
  border-radius: 6px !important;
}

.pnec-top-green-nav {
  background: rgba(39, 174, 96, 0.65) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  margin: 0 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}

.jupiterx-header-custom .elementor-2820 > .elementor-element-c8c3c8c {
  background: rgba(39, 174, 96, 0.65) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

body.pnec-enhanced-raw-page .jupiterx-header-custom .elementor-2820 > .elementor-element-090b3a9 {
  padding-top: 72px !important;
}

.pnec-top-green-nav .elementor-container {
  min-height: 58px !important;
}

.pnec-top-green-nav .elementor-widget-wrap {
  padding: 0 !important;
}

.pnec-top-green-nav .elementor-spacer,
.pnec-top-green-nav .elementor-spacer-inner {
  display: none !important;
  height: 0 !important;
}

.pnec-top-green-nav .elementor-nav-menu--main .elementor-nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  min-height: 58px;
}

/* v3.35: on interior pages the .pnec-nav-logo is position:absolute so
   it's out of flow — the centred menu doesn't reserve any space for it
   and its left edge ran right up against the logo (~13px gap), making
   the wordmark look cramped vs the spacious home page (~124px gap).
   Reserve a fluid "logo gutter" on the menu so the centred items always
   clear the logo, matching the home page's breathing room. Scoped to
   body.pnec-enhanced-raw-page so the home page (which has no such class
   and is already correct) is never affected. ~113px gap at desktop. */
body.pnec-enhanced-raw-page .pnec-top-green-nav .elementor-nav-menu--main .elementor-nav-menu {
  box-sizing: border-box;
  padding-left: clamp(150px, 15vw, 210px) !important;
}

.pnec-top-green-nav .elementor-item {
  color: #fff !important;
  font-weight: 600 !important;
}

.pnec-top-green-nav .elementor-item:hover,
.pnec-top-green-nav .elementor-item-active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

.pnec-top-green-nav .elementor-menu-toggle {
  color: #fff !important;
}

.pnec-top-green-nav .elementor-nav-menu--dropdown {
  background: #27ae60 !important;
}

body.pnec-enhanced-raw-page .jupiterx-main {
  padding-top: 0 !important;
}

/* v3.33: on interior pages (header template 2820) the nav section
   c8c3c8c is extracted by JS to the absolute green bar, leaving the
   old logo+donate strip (section 090b3a9) orphaned — that's the
   broken overlapping strip in the user's screenshot. Hide ONLY that
   orphaned strip (not the whole .elementor-2820, so the nav is never
   hidden during the pre-JS window). The real logo now lives in the
   green bar; the page title lives in the photo hero. Scoped to
   .elementor-2820 so the HOME page (template 6) is untouched. */
body.pnec-enhanced-raw-page .jupiterx-header .elementor-2820 > .elementor-element-090b3a9 {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   v3.33: REAL logo + rotating photo hero (replaces the v3.29–v3.32
   text-wordmark + cream-strip approach the user rejected).

   1. .pnec-nav-logo — the real white PNEC logo, injected by
      poway-page-enhancements.js as the first child of the green nav
      bar. Because the bar is position:absolute, the logo lives IN
      it → the nav can never overlap the logo.
   2. The first <section> (page-title band) becomes a photo hero:
      .pnec-hero-gallery (4 cross-fading Poway photos) + a dark-green
      overlay, with the page title centred in WHITE on top — the
      same look as the home page hero-slider.
   ════════════════════════════════════════════════════════════════ */

/* --- Logo in the green nav bar ----------------------------------- */
.pnec-top-green-nav .elementor-container {
  position: relative !important;
}
.pnec-nav-logo {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 5;
  line-height: 0;
}
.pnec-nav-logo img {
  height: 44px;
  width: auto;
  display: block;
}

/* --- Page-title band → rotating photo hero ---------------------- */
body.pnec-enhanced-raw-page .jupiterx-main .pnec-hero-band.elementor-section {
  position: relative !important;
  min-height: 340px !important;
  padding: 132px 32px 56px !important;   /* top clears the ~58px absolute nav + breathing room */
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0e3b21 !important;        /* fallback behind the photos */
}
.pnec-hero-gallery {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pnec-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.pnec-hero-slide.is-active { opacity: 1; }
.pnec-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,32,18,0.55) 0%, rgba(8,32,18,0.62) 100%);
}
/* The Elementor column/widget that holds the page title sits above */
body.pnec-enhanced-raw-page .jupiterx-main .pnec-hero-band.elementor-section > .elementor-container {
  position: relative;
  z-index: 1;
}
body.pnec-enhanced-raw-page .jupiterx-main .pnec-hero-band.elementor-section .elementor-widget-container {
  padding: 0 !important;
}
body.pnec-enhanced-raw-page .jupiterx-main .pnec-hero-band.elementor-section .raven-heading,
body.pnec-enhanced-raw-page .jupiterx-main .pnec-hero-band.elementor-section .raven-heading-title,
body.pnec-enhanced-raw-page .jupiterx-main .pnec-hero-band.elementor-section .elementor-heading-title {
  margin: 0 auto !important;
  display: block;
  max-width: min(1120px, 88vw);
  line-height: 1.08 !important;
  white-space: normal !important;
  overflow-wrap: break-word;
  text-align: center !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.45) !important;
  opacity: 1 !important;
  font-size: clamp(2rem, 5vw, 3.1rem) !important;
  font-weight: 800 !important;
}

.pnec-preparedness-band {
  background: #f7fbf8;
  border-top: 1px solid rgba(39, 174, 96, 0.22);
  border-bottom: 1px solid rgba(39, 174, 96, 0.22);
  padding: 30px 24px;
}

.pnec-preparedness-band-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 24px;
  align-items: center;
}

.pnec-preparedness-kicker {
  display: block;
  color: #1e7d48;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.pnec-preparedness-band h2 {
  color: #0a1628;
  font-size: 1.45rem;
  line-height: 1.2;
  margin: 0 0 8px;
}

.pnec-preparedness-band p {
  color: #42515f;
  font-size: 0.94rem;
  line-height: 1.6;
  margin: 0;
}

.pnec-preparedness-band-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pnec-preparedness-band-actions a {
  background: #ffffff;
  border: 1px solid #cfe6d7;
  border-radius: 8px;
  color: #0a1628;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 12px 14px;
  text-decoration: none;
}

.pnec-preparedness-band-actions a:hover {
  background: #eaf6ee;
  color: #1e7d48;
}

@media (max-width: 900px) {
  body.pnec-enhanced-raw-page .jupiterx-main .pnec-hero-band.elementor-section {
    min-height: 260px !important;
    padding: 112px 18px 44px !important;
  }
  .pnec-nav-logo { left: 16px; }
  .pnec-nav-logo img { height: 38px; }

  /* v3.35: logo is smaller here — a tighter gutter still clears it
     without crowding the menu at mid widths. */
  body.pnec-enhanced-raw-page .pnec-top-green-nav .elementor-nav-menu--main .elementor-nav-menu {
    padding-left: 120px !important;
  }

  .pnec-preparedness-band-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pnec-top-green-nav .elementor-container,
  .pnec-top-green-nav .elementor-nav-menu--main .elementor-nav-menu {
    min-height: 52px !important;
  }

  body.pnec-enhanced-raw-page .jupiterx-main .pnec-hero-band.elementor-section {
    min-height: 220px !important;
    padding: 96px 16px 36px !important;
  }
  .pnec-nav-logo { left: 12px; }
  .pnec-nav-logo img { height: 34px; }

  /* v3.35: phone layout uses the hamburger / dropdown — drop the gutter
     so nothing pushes the collapsed menu or toggle off-centre. */
  body.pnec-enhanced-raw-page .pnec-top-green-nav .elementor-nav-menu--main .elementor-nav-menu {
    padding-left: 0 !important;
  }

  .pnec-preparedness-band {
    padding: 24px 18px;
  }

  .pnec-preparedness-band h2 {
    font-size: 1.22rem;
  }

  .pnec-preparedness-band-actions {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════
   v3.40: "feels alive" motion layer for the cloned interior pages.
   scroll-reveal.js is already loaded site-wide and adds .pnec-reveal /
   .is-in, but its CSS partner lived in main.css which the cloned pages
   never load — so it did nothing. Port it here (poway-unified-ui.css
   loads on every interior page). Plus tasteful, transform-only hover
   micro-interactions and smooth in-page scrolling. All disabled under
   prefers-reduced-motion. Nothing here can hide content permanently —
   scroll-reveal.js only adds .pnec-reveal when it runs and a hardened
   failsafe always reveals.
   ════════════════════════════════════════════════════════════════ */
.pnec-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 720ms cubic-bezier(.2,.8,.2,1),
              transform 720ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.pnec-reveal.is-in,
.no-js .pnec-reveal { opacity: 1; transform: none; }

/* Smooth in-page anchor scrolling (Find-your-neighborhood #anchors,
   skip-link target, FAQ jumps, etc.) */
html { scroll-behavior: smooth; }

/* Tasteful hover/active micro-interactions — transform/opacity/shadow
   only (no layout shift), 180–240ms. */
.pnec-top-green-nav .elementor-item {
  transition: color 160ms ease, background 180ms ease,
              transform 180ms ease !important;
}
.pnec-top-green-nav .elementor-item:hover { transform: translateY(-1px); }

.pnec-preparedness-band-actions a,
.elementor-button,
.jupiterx-footer .elementor-button,
a.pnec-cta, .pnec-nmap-cta {
  transition: transform 200ms cubic-bezier(.2,.8,.2,1),
              box-shadow 240ms ease, background-color 200ms ease,
              color 200ms ease !important;
}
.pnec-preparedness-band-actions a:hover,
.elementor-button:hover,
.jupiterx-footer .elementor-button:hover,
a.pnec-cta:hover, .pnec-nmap-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 90, 50, 0.22);
}
.pnec-preparedness-band-actions a:active,
.elementor-button:active,
a.pnec-cta:active, .pnec-nmap-cta:active { transform: translateY(0); }

/* Feature/post/event cards: gentle raise on hover */
.elementor-post, .elementor-icon-box-wrapper,
.feature-card, .event-card, .tile {
  transition: transform 220ms cubic-bezier(.2,.8,.2,1),
              box-shadow 260ms ease;
}
.elementor-post:hover, .feature-card:hover,
.event-card:hover, .tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(15, 30, 25, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pnec-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pnec-top-green-nav .elementor-item,
  .pnec-preparedness-band-actions a, .elementor-button,
  .jupiterx-footer .elementor-button, a.pnec-cta, .pnec-nmap-cta,
  .elementor-post, .feature-card, .event-card, .tile {
    transition: none !important;
    transform: none !important;
  }
}