/* =========================================================================
   NLS Group — base.css
   Shared chrome loaded on EVERY page: reset, typography defaults, and the
   WordPress admin bar offset. Each page additionally loads its own stylesheet
   (home.css, ewaste.css, …) which carries that page's bespoke design and its
   own :root colour scheme. Because only one page stylesheet loads at a time,
   the per-page colour systems never collide.
   ========================================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Archivo', sans-serif;
  background: #FFFFFF;
  color: #1A1A1A;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

/* Keep the fixed pill nav clear of the WP admin bar when logged in */
.admin-bar .nav { top: 46px; }
@media screen and (min-width: 783px) {
  .admin-bar .nav { top: 32px; }
}

/* Screen-reader helper used by skip-link / menu fallbacks */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0; position: absolute;
  word-wrap: normal !important;
}

/* =========================================================================
   Shared MOBILE NAVIGATION — uniform across every page (incl. Power Plant).
   The nav markup is shared (header.php); this overrides each page's own nav
   CSS so the hamburger + dropdown panel behave identically everywhere. The
   hamburger is the SAME on every page: a yellow icon in a dark pill, so it
   reads consistently and stays visible on both the dark and the white navs.
   ========================================================================= */
.nav-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  /* !important so per-page rules (some set a yellow background) can't override
     it — keeps the hamburger identical on every page. */
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  background: #002912 !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer;
}

@media (max-width: 980px) {
  .nav .nav-links { display: none !important; }
  .nav .nav-mobile-toggle { display: inline-flex !important; align-items: center; justify-content: center; }

  /* Identical hamburger on every page: brand-yellow icon on the dark pill. */
  .nav-mobile-toggle svg { stroke: #FFD100 !important; }

  .nav.nav-open .nav-links {
    display: flex !important;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: #04150d;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  }
  .nav.nav-open .nav-links > a,
  .nav.nav-open .nav-dropdown-toggle {
    color: #ffffff !important;
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px !important;
    border-radius: 10px;
    font-size: 15px;
  }
  .nav.nav-open .nav-cta {
    background: #FFD100 !important;
    color: #002912 !important;
    margin-top: 6px;
  }
  .nav.nav-open .nav-dropdown { position: static; width: 100%; }
  .nav.nav-open .nav-dropdown-toggle svg { margin-left: auto; }
  .nav.nav-open .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
    padding: 2px 0 6px 14px !important;
  }
  .nav.nav-open .nav-dropdown-menu a { color: rgba(255, 255, 255, 0.78) !important; padding: 9px 12px !important; }
}

/* =========================================================================
   Footer wordmark — centred, scales to fit any viewport, never clipped.
   Overrides every page's own .wordmark rule for consistency.
   ========================================================================= */
.wordmark {
  text-align: center !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap;
  font-size: clamp(34px, 15vw, 230px) !important;
}