/* ==========================================================================
   LWS Kadence Child — header & logo (Deploy B).

   Enqueued with a dependency on lws-child, so it loads after style.css AND
   after Kadence's inline CSS (which sits at ~offset 28k while the child
   stylesheets sit at ~40k). That ordering is what lets these rules win ties
   at equal specificity without !important.

   Colors here are the logo's own navy+green pairing (Concept 4), scoped to
   the header. They are deliberately NOT the site's forest-green palette and
   must not leak outside this file.
   ========================================================================== */

/* Inter, subset to the 14 glyphs the logo uses: 3.1KB instead of 48KB for
   full latin. Variable, so one file serves both the 800 and 400 weights. */
@font-face {
  font-family: 'Inter LWS';
  src: url('fonts/inter-logo.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --lws-logo-navy: #16283F;   /* badge plate + "LOCAL WEB"  — 13.82:1 on cream */
  --lws-logo-green: #2E7D4F;  /* badge ring + "SOLUTIONS"   —  4.68:1 on cream */
  --lws-logo-sans: 'Inter LWS', 'Segoe UI', Arial, sans-serif;
}

/* ---------- Header shell ------------------------------------------------
   Kadence paints the row from header_main_background on this exact selector;
   matching it here (rather than .site-header) is what actually lands the
   cream. Height lives here too — Kadence's default min-height:80px is emitted
   earlier in the cascade, so this wins. */
.site-main-header-wrap .site-header-row-container-inner {
  background: var(--lws-cream);
}

.site-header {
  border-bottom: 1px solid var(--lws-border);
}

.site-main-header-inner-wrap {
  min-height: 76px;
}

/* ---------- Logo -------------------------------------------------------- */
.lws-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.lws-badge {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: block;
}

/* SVG carries matching presentation attributes as a fallback, so the mark
   still renders correctly if this stylesheet ever fails to load. */
.lws-badge-plate { fill: var(--lws-logo-navy); }
.lws-badge-ring,
.lws-badge-corner { stroke: var(--lws-logo-green); }
.lws-badge-text {
  fill: var(--lws-white);
  font-family: var(--lws-logo-sans);
}

.lws-wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--lws-logo-sans);
  text-transform: uppercase;
  line-height: 1.08;
}

.lws-wm-top {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1.6px;
  color: var(--lws-logo-navy);
}

.lws-wm-bot {
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 3.4px;
  color: var(--lws-logo-green);
}

/* The brand link must not inherit the body link underline/hover. */
.lws-brand:hover .lws-wm-top,
.lws-brand:focus .lws-wm-top { color: var(--lws-logo-navy); }
.lws-brand:hover .lws-wm-bot,
.lws-brand:focus .lws-wm-bot { color: var(--lws-logo-green); }

/* ---------- Scrolled / sticky state -------------------------------------
   Inert until header_sticky is enabled (Deploy B step 4): Kadence's JS is
   what adds .item-is-fixed and drops .item-at-start. The shrink HEIGHT is a
   theme mod (header_sticky_main_shrink), not a rule here, because that JS
   writes an inline height onto .site-main-header-inner-wrap and would
   override any CSS height anyway. */
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-header-row-container-inner {
  background: var(--lws-white);
  box-shadow: 0 4px 16px rgba(31, 61, 46, 0.14);
  border-bottom: 0;
}

#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .lws-badge {
  width: 30px;
  height: 30px;
}

#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .lws-wm-top {
  font-size: 13.5px;
}

#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .lws-wm-bot {
  font-size: 10.5px;
}

/* ---------- Mobile (Kadence swaps to #mobile-header at <=1024px) --------
   Badge-only: at 390px the wordmark would crowd the hamburger.

   The section rules below also neutralise the dead 2026-07-03 two-row rule
   still living in style.css, whose background/border-top painted a stray
   cream box around the hamburger while its flex:1 1 100% never actually
   wrapped. style.css step 5 deletes the source; this keeps the header correct
   in the meantime. */
@media (max-width: 1024px) {
  .site-main-header-inner-wrap {
    min-height: 60px;
  }

  #mobile-header .site-main-header-inner-wrap {
    min-height: 60px;
    flex-wrap: nowrap;
  }

  #mobile-header .site-header-main-section-left,
  #mobile-header .site-header-main-section-right {
    flex: 0 0 auto;
    background: none;
    border-top: 0;
    padding: 0;
  }

  .lws-wordmark {
    display: none;
  }

  .lws-badge {
    width: 32px;
    height: 32px;
  }

  #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .lws-badge {
    width: 28px;
    height: 28px;
  }
}