/**
 * New Home — theme reset.
 *
 * Hand-authored, and deliberately a separate file from npf-home.css: that one
 * is generated from the reference stylesheet by a transform, so anything added
 * to it by hand would be lost the next time it is regenerated.
 *
 * Everything here is scoped to `body.npf-home .npf-main`, the wrapper
 * NPF_Home_Page puts around the page's own content. That boundary is the whole
 * point: the ported design styles its own header and footer with generic names
 * (`.nav`, `.footer__col`, `.btn`, `.container`) on top of a global
 * `* { margin: 0; padding: 0 }` reset, and when that was scoped to the body it
 * stripped the spacing out of the site's real header and footer. Inside
 * `.npf-main` it can only reach the design.
 *
 * The page now runs on the same template as the site's front page, so there is
 * no `.blog_post.white-cnt` / `.padding-cnt` chrome and no page-title band to
 * override — the rules that used to fight those are gone rather than disabled.
 *
 * Loaded BEFORE npf-home.css. The order matters: these rules and the design's
 * sit at the same specificity, so loading first is what lets the design
 * override them while they still outrank the theme's bare element selectors.
 */

/* The design's reset applies `box-sizing` through `*`, which now starts inside
   the wrapper — so the wrapper itself has to be told separately. */
body.npf-home .npf-main {
  box-sizing: border-box;
}

/* Let the content column run the full width of the page.
 *
 * The theme gives every page a 1170px content column. The design's sections are
 * full-bleed, and WPBakery stretches their rows past that column — but the
 * design also carries `overflow-x: hidden`, which lands on `.npf-main` once the
 * stylesheet is scoped to the wrapper. A 1140px box that hides its horizontal
 * overflow clips those stretched rows straight back to 1140, which showed as
 * grey `.pusher` bands down both sides of every section.
 *
 * Widening the column makes the wrapper's clip boundary the viewport, which is
 * what the reference gets from `body`. It also means the sections no longer
 * depend on WPBakery's stretch script to reach full width.
 *
 * Only the content column is touched. The header and footer are siblings of
 * `.wpj-page-content`, not children, so they keep the theme's own geometry —
 * that is what makes this safe, and it is worth re-checking before changing
 * these selectors. Percentages rather than `100vw`: `vw` includes the
 * scrollbar and would introduce a horizontal scrollbar wherever one is
 * permanently visible.
 *
 * The padding needs !important, and only the padding. Below 767px the theme
 * declares `.main { padding-left: 15px !important }`, and an !important
 * declaration outranks any specificity — without matching it, the content
 * column kept a 15px inset on mobile and the same grey strips reappeared down
 * both edges. Width and max-width win on specificity alone. */
body.npf-home .wpj-page-content,
body.npf-home .entry-content-page,
body.npf-home .npf-main {
  width: 100%;
  max-width: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ------------------------------------------------------------------
   Re-asserting the design's own reset, inside the wrapper.

   The design resets spacing with `* { margin: 0; padding: 0 }` — specificity
   (0,0,0), which loses to the theme's bare element selectors (`p`,
   `h1, h2, h3, h4, h5`) from Semantic UI and front.min.css. Inheritance loses
   too: a rule setting `line-height` on `p` directly beats a value inherited
   from an ancestor, whatever the specificity. So the reset is restated on the
   elements the theme actually touches.

   `inherit` rather than a literal value, so these follow the design's own
   `line-height: 1.6` and stay correct if it changes. The design's
   `h1, h2, h3, h4, h5 { line-height: 1.12 }` lands at exactly this specificity
   once scoped, which is why this file loads first — otherwise the reset would
   flatten every heading back to the body line-height.
   ------------------------------------------------------------------ */
body.npf-home .npf-main p,
body.npf-home .npf-main h1,
body.npf-home .npf-main h2,
body.npf-home .npf-main h3,
body.npf-home .npf-main h4,
body.npf-home .npf-main h5,
body.npf-home .npf-main h6,
body.npf-home .npf-main ul,
body.npf-home .npf-main ol,
body.npf-home .npf-main li,
body.npf-home .npf-main figure,
body.npf-home .npf-main blockquote {
  margin: 0;
  padding: 0;
  line-height: inherit;
}

/* Form controls: Semantic's normalize block sets `line-height: 1.15` on these
   directly. The reference has no such rule, so its controls fall back to the
   UA's `normal` — restoring that literal value rather than `inherit`, which
   would pick up the body's 1.6 and size the search input 6px taller than the
   design. Design rules that set an explicit line-height (`.btn`) still win. */
body.npf-home .npf-main input,
body.npf-home .npf-main button,
body.npf-home .npf-main select,
body.npf-home .npf-main textarea {
  margin: 0;
  line-height: normal;
}

/* `.blog_post .btn` pins buttons to a 30px box. The design sizes them from
   padding + line-height and never declares a height, so there is nothing on
   our side to win the comparison — the height has to be released here. */
body.npf-home .npf-main .btn,
body.npf-home .npf-main a.btn,
body.npf-home .npf-main button.btn {
  height: auto;
  min-height: 0;
}

/* WPBakery rows: the seeded content stretches each one, but the builder still
   applies its default negative gutters and column padding. */
body.npf-home .npf-main .vc_row.vc_row-fluid {
  margin-left: 0;
  margin-right: 0;
}

body.npf-home .npf-main .vc_column_container > .vc_column-inner {
  padding-left: 0;
  padding-right: 0;
}

/* ------------------------------------------------------------------
   Live data.

   The reference page is filled with hand-picked sample copy. These sections
   render whatever is actually in the database, which is longer and less tidy,
   so a couple of places need to tolerate strings the design never had to.
   ------------------------------------------------------------------ */

/* Expert category chips carry real category names — "Marketing and
   Communications" is 28 characters against a ~141px card body on mobile. A
   chip wider than its card cannot shrink on its own: as a flex item its
   min-width resolves to its content width, so it pushed past the viewport.

   Truncating rather than wrapping is deliberate. At <=560px the design pins
   this row to `flex-wrap: nowrap` with `white-space: nowrap` and sizes it
   "measured off the mobile design's card body (375px frame)" — it wants one
   tidy row of pills. Letting a long category wrap would give that row a
   three-line chip and break the card rhythm; an ellipsis keeps the geometry
   and signals there is more. The full name stays in the DOM, and the render
   adds it as a title attribute so it is still reachable. */
body.npf-home .npf-main .expert-card__tags .tag {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------------
   Hero search field.

   The design leaves this input at its natural 20px text height inside an 82px
   pill, relying on the pill to read as the field. That works until it takes
   focus: the browser draws the focus ring around the input's own 20px box, so
   a thin rectangle appears floating in the middle of the pill, nowhere near
   the 54px Search button beside it.

   Two changes. The field is given the button's exact height so the whole pill
   is one control — clicking anywhere in it lands in the text — and the ring on
   the input is suppressed so focus is shown by the bar instead, which is what
   the design already asks for with `.search-bar:focus-within`.

   `!important` on the ring only. The black rectangle comes from a UA/theme
   focus style rather than the design's own (that one is a soft blue), and
   `:focus-visible` fires on a plain click for text inputs, so the ring has to
   be shut off in a way that does not depend on out-specifying an unknown rule.
   Height and padding win on specificity alone.
   ------------------------------------------------------------------ */
body.npf-home .npf-main .hero__search .search-bar input {
  /* Matches .search-bar .btn — 12px padding + 30px line-height. */
  height: 54px;
  padding-block: 0;
  align-self: center;
}

body.npf-home .npf-main .hero__search .search-bar input:focus,
body.npf-home .npf-main .hero__search .search-bar input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ------------------------------------------------------------------
   CTA band — matched to the logged-in homepage.

   "Expert Nonprofit Guidance, Just A Question Away" already exists on the
   logged-in homepage, the dashboard and the single-job page, where it is built
   from `.npf-cta` markup styled by npf-dashboard.css. This page keeps the
   reference design's own `.cta` markup, so the two drifted apart — most
   visibly on the Ask Now button, which sat at 18px/58px tall with a 16px
   radius against the site's 16px/48px with an 8px radius.

   Every declaration below is copied from npf-dashboard.css so the section
   renders identically to the logged-in homepage. It is expressed against this
   page's own class names rather than by importing that stylesheet: its
   `.npf-cta h2` (0,1,1) and `.npf-cta p` (0,1,1) rules lose to this page's
   element reset at (0,2,2), so the heading line-height and the paragraph's
   top margin would have been flattened.

   `rem` is kept where the source uses it. Semantic UI sets the root to 14px on
   both pages, so `1rem` and the clamp resolve to exactly the same pixels here
   as they do there — hard-coding the computed values would freeze them.

   The `section.` in the selectors lifts these above the generated file's
   `.cta`-scoped rules without !important, the same trick used below.
   ------------------------------------------------------------------ */
body.npf-home .npf-main section.cta h2 {
  font-weight: 600;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
  max-width: 780px;
  margin: 0 auto;
}

body.npf-home .npf-main section.cta p {
  font-size: 1rem;
  line-height: 26px;
  margin: 18px auto 0;
  max-width: 600px;
}

body.npf-home .npf-main section.cta .ask-bar {
  margin: 24px auto 0;
}

body.npf-home .npf-main section.cta .ask-bar input {
  height: auto;
  font-size: 1rem;
  padding: 12px 18px;
  box-shadow: none;
  /* Invisible on a transparent, borderless field — carried over only so the
     two pages match declaration for declaration. */
  border-radius: 8px;
}

/* The button the mismatch was most obvious on. */
body.npf-home .npf-main section.cta .ask-bar .btn {
  height: auto;
  padding: 14px 22px;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  border-radius: 8px;
  background: #fff;
  color: #3e6ea6;
  white-space: nowrap;
}

body.npf-home .npf-main section.cta .cta__features {
  gap: 48px;
  margin-top: 44px;
}

body.npf-home .npf-main section.cta .cta__feature {
  gap: 14px;
  font-weight: 600;
}

@media (max-width: 860px) {
  body.npf-home .npf-main section.cta .ask-bar input {
    padding: 12px 14px;
  }

  body.npf-home .npf-main section.cta .ask-bar .btn {
    padding-inline: 20px;
  }

  body.npf-home .npf-main section.cta .cta__features {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    max-width: 560px;
    margin-inline: auto;
  }
}

/* ------------------------------------------------------------------
   Site consistency — CTA decorative circles.

   The "Expert Nonprofit Guidance" band already exists on the single-job and
   dashboard pages, and this is the treatment those use. The reference
   stylesheet fills the two decorative circles with `var(--primary-light)`
   (#6ac9fc) at full opacity, which against the #4f84c3 band reads as two loud
   cyan blobs rather than as depth — on the built page it looks like a
   rendering fault. The rest of the site draws them as barely-there white at
   6%, and the rings a hair finer.

   This is a deliberate departure from the reference, made so the same section
   looks the same everywhere on the site. It lives here rather than in
   npf-home.css because that file is generated from the reference and would
   lose the change on the next regeneration.

   Only the paint is changed — never the geometry. npf-home.css sizes these
   circles again inside its 860px media query, and this file loads first, so
   overriding width/height here would out-specify that block and freeze the
   circles at desktop size on mobile. The `section` / `span` in the selectors
   is what wins the comparison: it lifts these to (0,3,3) and (0,3,2) against
   the generated file's (0,3,2) and (0,3,1), so they apply regardless of load
   order without reaching for !important.
   ------------------------------------------------------------------ */
body.npf-home .npf-main section.cta::before,
body.npf-home .npf-main section.cta::after {
  background: rgba(255, 255, 255, 0.06);
  border: none;
}

body.npf-home .npf-main span.cta__ring {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.18);
}

/* The reference renders the hero's suggested-search chips as <button>, which
   the UA gives `line-height: normal`. Here they are <a>, so clicking a tag
   actually runs the search — a real link rather than a dead control. That is a
   deliberate difference; restating the line-height keeps the rendered box
   identical to the design (35px rather than 40px). */
body.npf-home .npf-main .search-tags .chip {
  line-height: normal;
}

/* ------------------------------------------------------------------
   Hero badge — pulsing dot.

   Ported from the reference homepage's `.hero-badge .pulse`: a 7px brand dot
   with a ring that scales out and fades, forever. The badge previously had a
   static SVG dot on each side; the render now emits one span before the text,
   which is what the reference does.
   ------------------------------------------------------------------ */
body.npf-home .npf-main .hero__pulse {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary, #4f84c3);
}

body.npf-home .npf-main .hero__pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--primary, #4f84c3);
  animation: npf-hero-pulse 1.8s ease-out infinite;
}

@keyframes npf-hero-pulse {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* A reader who has asked for less motion gets the dot without the ring. */
@media (prefers-reduced-motion: reduce) {
  body.npf-home .npf-main .hero__pulse::after {
    animation: none;
    opacity: 0;
  }
}

/* ------------------------------------------------------------------
   Testimonial avatar fallback.

   Matches `.testi-card__author img` — same 46px circle — so a review with a
   photo and one without sit on the same baseline.
   ------------------------------------------------------------------ */
body.npf-home .npf-main .testi-card__initials {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary-soft, #e1eeff);
  color: var(--primary-dark, #3e6ea6);
  font-family: var(--font-head, inherit);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------
   Compare table on mobile.

   The table is laid out at a fixed 960px, and `max-width: 100%` was crushing
   all four columns into the phone width — the rows collapsed into each other.
   The design keeps the table at its full width and lets the card scroll
   sideways instead, so the columns stay readable.
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  body.npf-home .npf-main .compare__wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Room for the scrollbar so it never sits on top of the last row. */
    padding-bottom: 34px;
  }

  body.npf-home .npf-main .compare-table {
    max-width: none;
    min-width: 720px;
  }

  /* A slim scrollbar rather than the OS default across a white card. */
  body.npf-home .npf-main .compare__wrap::-webkit-scrollbar {
    height: 8px;
  }

  body.npf-home .npf-main .compare__wrap::-webkit-scrollbar-thumb {
    background: #d7dde6;
    border-radius: 999px;
  }

  body.npf-home .npf-main .compare__wrap::-webkit-scrollbar-thumb:hover {
    background: var(--primary, #4f84c3);
  }
}

/* --------------------------------------------------------------------
   .container must not clip.

   The theme declares `.container { width:100%; overflow:hidden }` — a
   backface-visibility hack it pairs with 3D transforms. The design uses
   `.container` purely as a centred max-width wrapper, and several of its
   sections deliberately overhang it: the hero's avatar constellation and
   its heart backdrop are drawn larger than the text column so they bleed
   past the edges. Under the theme's rule the bottom avatar was sliced in
   half and the heart backdrop disappeared entirely.

   Restored to `visible` inside the design only — the header, the footer
   and every other `.container` on the site sit outside `.npf-main` and
   keep the theme's behaviour untouched.
   ------------------------------------------------------------------ */
body.npf-home .npf-main .container {
  overflow: visible;
}

/* --------------------------------------------------------------------
   Hero: close the dead space above the next heading on mobile.

   The hero reserves 196px of bottom padding because on desktop the heart
   backdrop is drawn 604px tall inside a 533px box and hangs well past the
   avatar diagram. On a 375px screen the same diagram is only 183px tall,
   so the heart clears its box by about 20px — and the remaining ~110px of
   reserved padding renders as an empty band between the graphic and "The
   Wrong Hire Costs More Than You Think."

   Measured 199px from the graphic's bottom edge to that heading at 375px,
   of which 179px is blank. The padding is stepped down to leave the heart
   clear while the section's own 68px top padding carries the rhythm.

   `section.hero` rather than `.hero`: this file is loaded before the port,
   so a rule of equal weight would lose the cascade to the port's 196px.
   The extra type selector carries it without reaching for !important.
   ------------------------------------------------------------------ */

@media (max-width: 560px) {
  body.npf-home .npf-main section.hero {
    padding-bottom: 76px;
  }
}

/* --------------------------------------------------------------------
   Button radius: 6px.

   The port took 16px from the Figma Button component. The client wants the
   square-ish 6px instead, on the hero's "Find an Expert" / "Become an Expert"
   pair and on "View All Experts" — all three are plain `.btn`.

   A type selector on top of the same three classes, so it outranks the port's
   `--radius-btn` without !important, and stays BELOW the two-class exceptions:
   `.btn--sm` and `.search-bar .btn` are still meant to be pills, and their
   (0,4,0) beats this (0,3,1).
   ------------------------------------------------------------------ */
body.npf-home .npf-main a.btn,
body.npf-home .npf-main button.btn {
  border-radius: 6px;
}

@media (max-width: 767px) {
  body.npf-home .npf-main section.hero {
    padding-bottom: 96px;
    padding-top: 32px;
  }

  body.npf-home .npf-main .hero h1 {
    font-size: 35px !important;
  }
  body.npf-home .npf-main .hero__sub{
    font-size: 18px !important;
    line-height: 1.5 !important;
  }
  body.npf-home .npf-main .btn--lg{
    padding: 12px !important;
  }
  body.npf-home .npf-main .btn{
    font-size: 15px !important;
    font-weight: 500 !important;
  }

  .hero__search .btn{
    padding: 12px 20px !important;
  }
}

/* ------------------------------------------------------------------
   WPBakery Frontend Editor (vc_inline) UI compatibility
   ------------------------------------------------------------------ */
body.vc_inlined_main .vc_controls,
body.vc_inlined_main .vc_element-icon,
body.vc_inlined_main .vc_navbar,
.vc_controls,
.vc_control-btn {
  box-sizing: content-box;
}

body.vc_inlined_main .npf-main {
  min-height: 400px;
}