/* ==========================================================================
   NPTC — Elementor bridge
   Purpose: make Elementor's own wrappers disappear so the widget markup sits
   in the document flow exactly like the original static HTML.
   ========================================================================== */

/* ---- 1a. Frontend: dissolve the wrappers around NPTC widgets ----
   display:contents removes the box from the layout tree entirely, so
   <section>, <header>, <footer> behave 1:1 with the source design
   (including position:sticky on the header, which needs <body> as its
   containing block).

   Scoped with .nptc-flow (the class the importer puts on each section) so
   that a NON-NPTC section dropped on the same page keeps its normal layout. */
body.nptc-page:not(.elementor-editor-active) .nptc-flow,
body.nptc-page:not(.elementor-editor-active) .nptc-flow > .elementor-container,
body.nptc-page:not(.elementor-editor-active) .nptc-flow > .elementor-container > .elementor-column,
body.nptc-page:not(.elementor-editor-active) .nptc-flow > .e-con-inner,
body.nptc-page:not(.elementor-editor-active) .nptc-flow .elementor-widget-wrap,
body.nptc-page:not(.elementor-editor-active) [class*="elementor-widget-nptc-"],
body.nptc-page:not(.elementor-editor-active) [class*="elementor-widget-nptc-"] > .elementor-widget-container{
  display: contents !important;
}

/* ---- 1b. Same thing for widgets added by hand (no .nptc-flow class) and for
        Elementor's newer Flexbox Containers (.e-con).
        Kept in a SEPARATE rule: if a browser doesn't understand :has() it
        drops only this block, and 1a still covers every imported page.       */
body.nptc-page:not(.elementor-editor-active) .elementor:has([class*="elementor-widget-nptc-"]),
body.nptc-page:not(.elementor-editor-active) .elementor-inner:has([class*="elementor-widget-nptc-"]),
body.nptc-page:not(.elementor-editor-active) .elementor-section-wrap:has([class*="elementor-widget-nptc-"]),
body.nptc-page:not(.elementor-editor-active) .elementor-section:has([class*="elementor-widget-nptc-"]),
body.nptc-page:not(.elementor-editor-active) .elementor-container:has([class*="elementor-widget-nptc-"]),
body.nptc-page:not(.elementor-editor-active) .elementor-column:has([class*="elementor-widget-nptc-"]),
body.nptc-page:not(.elementor-editor-active) .elementor-widget-wrap:has([class*="elementor-widget-nptc-"]),
body.nptc-page:not(.elementor-editor-active) .e-con:has([class*="elementor-widget-nptc-"]),
body.nptc-page:not(.elementor-editor-active) .e-con-inner:has([class*="elementor-widget-nptc-"]){
  display: contents !important;
}

/* ---- 2. Editor: keep wrappers (so elements stay draggable) but strip
        every default gutter, so the canvas still matches the design.        */
body.nptc-page.elementor-editor-active .elementor-section > .elementor-container{
  max-width: 100% !important;
  padding: 0 !important;
}
body.nptc-page.elementor-editor-active .elementor-column-gap-default > .elementor-column > .elementor-element-populated{
  padding: 0 !important;
}
body.nptc-page.elementor-editor-active .elementor-widget-wrap{ padding: 0 !important; }
body.nptc-page.elementor-editor-active .elementor-widget:not(:last-child){ margin-bottom: 0 !important; }
body.nptc-page.elementor-editor-active [class*="elementor-widget-nptc-"]{ width: 100%; }

/* ---- 3. Canvas / theme safety net ----
   NOTE: no overflow-x on <body> here — that would turn the body into a scroll
   container and break the sticky header. .hero already clips its own overflow. */
body.nptc-page .elementor-section{ overflow: visible; }
body.nptc-page #page,
body.nptc-page .site-content,
body.nptc-page .content-area,
body.nptc-page .entry-content{ margin: 0 !important; padding: 0 !important; max-width: none !important; }

/* ---- 3b. WordPress admin bar: keep the sticky header clear of it ---- */
body.admin-bar.nptc-page header.site-header{ top: 32px; }
@media screen and (max-width: 782px){
  body.admin-bar.nptc-page header.site-header{ top: 46px; }
}

/* ---- 4. Helper classes replacing the inline styles used in index.html ---- */
body.nptc-page .eyebrow.is-center{ display: flex; justify-content: center; }
body.nptc-page .mission-intro{ max-width: 760px; margin: 0 auto; text-align: center; }
body.nptc-page p.is-tight{ margin: 0; }
body.nptc-page p.is-tight-b{ margin-bottom: 0; }
body.nptc-page .steps.is-flush{ margin-top: 0; }
body.nptc-page .cta-actions{ display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
body.nptc-page .side-point h3{ margin-bottom: 4px; }
body.nptc-page .foot-about p{ max-width: 320px; }
body.nptc-page footer .brand{ margin-bottom: 14px; }

/* ---- 5. Button element must look identical to the <a class="btn"> ---- */
/* Note: no line-height / appearance override here on purpose — the original
   design relies on the browser default button metrics. Elementor's theme
   styles are the only thing that needs neutralising. */
body.nptc-page button.btn{
  font-family: var(--body);
}
body.nptc-page .elementor-widget-nptc-form button.btn{
  text-transform: none;
  letter-spacing: normal;
}

/* ---- 6. Layout hardening -------------------------------------------------
   If for any reason a wrapper is NOT dissolved (an Elementor Container set to
   row direction, a theme that makes the widget wrapper a flex/grid box, an
   older browser without :has(), a page built before this class existed), our
   top-level blocks would become flex/grid items and shrink to fit their
   content. That is what makes the header nav bunch up next to the logo
   instead of sitting at the far right. These rules force them to fill the
   available width in every one of those situations, and are simply ignored
   when the wrappers ARE dissolved.                                          */
body.nptc-page .topbar,
body.nptc-page header.site-header,
body.nptc-page section,
body.nptc-page .cta-band,
body.nptc-page footer{
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  align-self: stretch;
  justify-self: stretch;
  grid-column: 1 / -1;
  box-sizing: border-box;
}

body.nptc-page .wrap{ width: 100%; }

/* NOTE: deliberately no !important re-assertion of display/justify-content
   here — that would also override the <=900px media-query rules in
   nptc-core.css (centred top bar, stacked CTA band) and break mobile. */

/* The sticky header must sit above Elementor's own stacking contexts. */
body.nptc-page header.site-header{ z-index: 50; }

/* ---- 7. About page: the inline styles used in about.html ---- */
body.nptc-page .hero.is-about{ padding-bottom: 70px; }
body.nptc-page .hero.is-about .wrap{ grid-template-columns: 1fr; max-width: 820px; }
body.nptc-page .wrap.is-narrow{ max-width: 820px; }
body.nptc-page .wrap.is-center-narrow{ text-align: center; max-width: 700px; }

/* ---- 8. Request Assistance form: real submissions ---- */
/* Honeypot: off-canvas rather than display:none, which more bots skip.
   Zero-size and clipped, so it can never affect layout or cause overflow. */
.nptc-page .nptc-hp,
div.nptc-chrome .nptc-hp{
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The status line already sits in oxblood; errors reuse it unchanged so the
   success and failure states are pixel-identical to the original design. */
.nptc-page .form-status.is-error{ color: var(--oxblood); }
