/*
 * NanoPrep child theme styles.
 *
 * Two jobs only — design tokens, and the breakpoints Elementor cannot express.
 * Everything else belongs in Elementor, where an editor can reach it.
 *
 * Tokens are carried over from the previous theme's globals.css, which in turn
 * copied them from the Next.js app. They are declared here as well as in
 * Elementor's Global Colors because the two have to agree: Elementor writes
 * inline values into the page, and anything hand-written below has to resolve
 * to the same colour or the site drifts one widget at a time.
 */

:root {
  --navy: #1a3a2a;
  --navy2: #2a5a3e;
  --orange: #b05a3a;
  --orange2: #c96a46;
  --green: #3aaa6a;

  /*
   * Darkened from the source's #2d9458, which fails WCAG AA on white at
   * 3.83:1, to #268049 at 4.92:1. Same hue. This was a deliberate,
   * documented accessibility fix in the previous theme and must not be
   * reverted when the palette is entered into Elementor's Global Colors.
   */
  --green2: #268049;

  --steel: #5a7a6a;
  --light: #f6faf7;
  --rule: #ddeae0;
  --white: #ffffff;
  --text: #1a2a20;
  --muted: #3d5245;

  --container-width: 1200px;

  /*
   * DECISION D-2 — see PROGRESS.md.
   *
   * The Next.js design uses 68px with a 40px logo. The legacy WordPress theme
   * uses 112px with a 90px logo, and legacy parity was requested, so 112px is
   * restored here together with the navigation widget's 90px logo default.
   */
  --header-height: 112px;
}

/* ------------------------------------------------------------------ *
 * Base
 *
 * The previous theme's globals.css opened with a blanket reset — no margins,
 * no list markers, no underlines — and every converted component stylesheet
 * was written on top of it. Hello Elementor resets far less, so those
 * components arrive with bullets on the navigation and underlines on links
 * that were never in the design.
 *
 * Rather than restore the blanket reset, which would fight Elementor's own
 * styling everywhere on the site, the assumed rules are re-applied only inside
 * NanoPrep components. Ordinary Elementor content keeps Elementor's defaults,
 * which is what an editor building a new section expects.
 *
 * Body typography is global, because it is the design's type ramp rather than
 * a component's assumption.
 * ------------------------------------------------------------------ */

body {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text);
}

[class^="np-"] ul,
[class^="np-"] ol,
[class*=" np-"] ul,
[class*=" np-"] ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

[class^="np-"] a,
[class*=" np-"] a {
  text-decoration: none;
}

[class^="np-"] img,
[class*=" np-"] img {
  max-width: 100%;
  display: block;
}

/*
 * Compatibility for Elementor documents created before the layout parity
 * fixes. Elementor's editor orders its canvas rules differently from the
 * public page, so persisted defaults that the live cascade happened to mask
 * became visible again while editing.
 */
.e-con.np-home-hero__hero,
.e-con.np-testimonials__wrap,
.e-con.np-contact-section__container,
.e-con.np-about__intro-badge,
.e-con.np-about__closing-panel,
.e-con.np-footer__social,
.e-con.np-footer__bottom {
  --flex-direction: row;
  flex-direction: row;
}

/*
 * Old builds put these design grid classes on Elementor's Loop Grid widget.
 * That creates an outer grid around Elementor's own loop container grid and
 * squeezes every card into a fraction of a column. Keep the widget a normal
 * block; its editable Columns controls still govern the inner grid.
 */
.elementor-widget-loop-grid:is(
  .np-case-studies-preview__grid,
  .np-news-preview__grid,
  .np-how-to-library__grid,
  .np-news__grid,
  .np-industry-filter__grid
) {
  display: block;
}

/* Early Contact builds duplicated the offices grid on a wrapper container. */
.e-con.np-contact__offices {
  display: block;
}

/* Elementor paints a large grey placeholder for the intentionally blank
   testimonial role. PHP marks that legacy widget hidden; keep the editor's
   overlay rules from turning it back into a visible bar. */
.np-testimonials__author-role[hidden] {
  display: none !important;
}

/*
 * Home bands after the hero are independent layout/paint units. Let the
 * browser skip work for sections several screens below the viewport while
 * retaining an estimated scroll size until each section is approached.
 */
.home .np-about-teaser__section,
.home .np-process-section__section,
.home .np-case-studies-preview__section,
.home .np-video-preview__section,
.home .np-testimonials__section,
.home .np-why-section__section,
.home .np-news-preview__section,
.home .np-contact-section__section,
.home .np-footer__footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* The editor needs every section paintable for selection and drag handles. */
body.np-elementor-preview .np-about-teaser__section,
body.np-elementor-preview .np-process-section__section,
body.np-elementor-preview .np-case-studies-preview__section,
body.np-elementor-preview .np-video-preview__section,
body.np-elementor-preview .np-testimonials__section,
body.np-elementor-preview .np-why-section__section,
body.np-elementor-preview .np-news-preview__section,
body.np-elementor-preview .np-contact-section__section,
body.np-elementor-preview .np-footer__footer {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

/* Keep the poster for visitors who request reduced motion. Mobile viewport
   size alone must not hide the video: mobile playback is enabled in Elementor. */
@media (prefers-reduced-motion: reduce) {
  .np-home-hero__hero .elementor-background-video-container {
    display: none !important;
  }
}

/* ------------------------------------------------------------------ *
 * Breakpoints Elementor cannot express
 *
 * The design uses ten breakpoints below desktop. Elementor offers four, and
 * six of the ten map onto those cleanly:
 *
 *   Mobile        600px   absorbs 560, 600
 *   Mobile Extra  700px   absorbs 640, 700
 *   Tablet        900px   absorbs 800, 820, 880, 900
 *   Tablet Extra  1000px  absorbs 1000
 *
 * The four that do not — 560, 760, 820 and 880 — each serve a single
 * component, and reproducing them in the builder would mean duplicating whole
 * sections per breakpoint. They live here instead, each one named for what it
 * is for. Rules are added as each component is rebuilt, not up front: an empty
 * media query is easier to audit than a speculative one.
 * ------------------------------------------------------------------ */

/* 560px — About page intro, footer column collapse. */
/* 760px — About page media stack. */
/* 820px — apply-nanoprep step layout. */
/* 880px — Contact page column collapse. */

/*
 * The listing card editor, which exists only inside Elementor.
 *
 * The NanoPrep Listing Card widget is an editing surface for a card that
 * belongs to the Products page, so it renders nothing at all on the public
 * product page. Its container still would: an empty boxed container with the
 * section padding Elementor gives it, and a gap at the foot of every product
 * page that nothing appeared to be causing. Hidden outside the editor, where
 * Elementor marks the body for us.
 */
.np-listing-card-editor {
  display: none;
}

body.elementor-editor-active .np-listing-card-editor {
  display: block;
}