/* docs.paywallproject.com "light header" layer (2026-11-08): matches paywallproject.com's current scheme, where the header is a white
   bar with navy links and only the footer and closing CTA are navy. Loaded last by pp-signal-docs.php (1.6.0) when the body has pp-lh:
   option pp_docs_light_header=1. Needs the terracotta layer (pp-tc). Off: `wp option update pp_docs_light_header 0` + cache purge.
   Values are the paywallproject.com tokens already defined by the terracotta layer (--pp-navy #1F2847, --pp-bg #F4F5F8,
   --pp-border #E3E6ED, --pp-row-tint #E6ECF8, --pp-muted #5C6582, --pp-cta #CC4B25). Hero scene: paywallproject.com's light blog scene. */

html body.pp-signal.pp-tc.pp-lh{
  --pp-light-band:radial-gradient(640px 340px at 30% 0%,rgba(141,176,229,.5),transparent 70%),radial-gradient(520px 320px at 88% 30%,rgba(230,236,248,.95),transparent 70%),#F4F5F8;
  --ppd-home:url(/wp-content/mu-plugins/pp-signal-docs/scenes/ppd-sc-light-1.svg);
  --ppd-home-m:url(/wp-content/mu-plugins/pp-signal-docs/scenes/ppd-sc-light-1-m.svg);
  --ppd-404:var(--ppd-home);
  --ppd-404-m:var(--ppd-home-m)}

/* ---------- Header: white bar, navy links, tinted hover/current (paywallproject.com) ---------- */
html body.pp-signal.pp-tc.pp-lh .ppd-head{background:#fff;border-bottom:1px solid var(--pp-border)}
html body.pp-signal.pp-tc.pp-lh .ppd-head__brand img{filter:none}
html body.pp-signal.pp-tc.pp-lh .ppd-head__label{color:var(--pp-navy);border-color:var(--pp-border)}
html body.pp-signal.pp-tc.pp-lh .ppd-head__nav ul a{color:var(--pp-navy)!important;font:500 16px/1 var(--pp-font)}
html body.pp-signal.pp-tc.pp-lh .ppd-head__nav ul a:hover{background:var(--pp-row-tint)}
html body.pp-signal.pp-tc.pp-lh .ppd-head__nav ul a[aria-current]{background:var(--pp-row-tint);font-weight:600;text-decoration:none!important}
html body.pp-signal.pp-tc.pp-lh .ppd-head__toggle{color:var(--pp-navy);border:1px solid var(--pp-border)}
html body.pp-signal.pp-tc.pp-lh .ppd-head__toggle:hover{background:var(--pp-row-tint)!important}
html body.pp-signal.pp-tc.pp-lh .ppd-burger i{background:var(--pp-navy)}
html body.pp-signal.pp-tc.pp-tc.pp-lh .ppd-head :focus-visible{outline-color:var(--pp-navy)!important}
html body.pp-signal.pp-tc.pp-tc.pp-lh .ppd-head .ppd-head__cta:is(:hover,:focus-visible){border-color:var(--pp-cta-hover)!important}
html body.pp-signal.pp-tc.pp-tc.pp-lh .ppd-head .ppd-head__cta:focus-visible{outline-color:var(--pp-navy)!important}
@media (max-width:1024px){
  html body.pp-signal.pp-tc.pp-lh .ppd-head__nav{background:#fff;border-bottom:1px solid var(--pp-border)}
  html body.pp-signal.pp-tc.pp-lh .ppd-head__nav li{border-bottom:1px solid var(--pp-border)}
}

/* ---------- Docs home hero: light band, navy title (paywallproject.com page heroes) ---------- */
html body.pp-signal.pp-tc.pp-lh .site-header{background:#F4F5F8!important}
html body.pp-signal.pp-tc.pp-lh .site-header__search{background:var(--pp-light-band)!important;border-bottom:1px solid var(--pp-border)!important}
html body.pp-signal.pp-tc.pp-lh .site-header__search .ht-container::before{color:var(--pp-muted)!important}
html body.pp-signal.pp-tc.pp-lh .site-header__search .site-header__title{color:var(--pp-navy)!important}
html body.pp-signal.pp-tc.pp-lh.pp-sc .site-header__search::after{background:var(--ppd-home) no-repeat 50% 100% / 2560px 276px!important}

/* Search fields on the light bands: muted edge, navy focus ring (as everywhere else on light). */
html body.pp-signal.pp-tc.pp-lh :is(.site-header__search,.ht-pageheader) .hkb-site-search__field{border-color:var(--pp-muted)!important}
html body.pp-signal.pp-tc.pp-lh .site-header__search .hkb-site-search__field{box-shadow:0 18px 40px -26px rgba(21,28,51,.35),0 1px 2px rgba(21,28,51,.06)!important}
html body.pp-signal.pp-tc.pp-lh :is(.site-header__search,.ht-pageheader) .hkb-site-search__field:focus{border-color:var(--pp-navy)!important;box-shadow:0 0 0 3px rgba(31,40,71,.22)!important}

/* ---------- Inner pages: light breadcrumb strip ---------- */
html body.pp-signal.pp-tc.pp-lh .ht-pageheader{background:#F4F5F8!important;border-bottom:1px solid var(--pp-border)!important}
html body.pp-signal.pp-tc.pp-lh .hkb-breadcrumbs,html body.pp-signal.pp-tc.pp-lh .hkb-breadcrumbs li{color:var(--pp-muted)!important}
html body.pp-signal.pp-tc.pp-lh .hkb-breadcrumbs a,html body.pp-signal.pp-tc.pp-lh .hkb-breadcrumbs a:hover{color:var(--pp-navy)!important;text-decoration-color:rgba(31,40,71,.4)!important}
html body.pp-signal.pp-tc.pp-lh .hkb-breadcrumbs svg,html body.pp-signal.pp-tc.pp-lh .hkb-breadcrumbs svg path{fill:var(--pp-muted)!important}
html body.pp-signal.pp-tc.pp-lh :is(.site-header,.ht-pageheader,.ht-404msg) :focus-visible{outline-color:var(--pp-navy)!important}

/* ---------- 404: light band; terracotta is never text on light, so the big number goes navy ---------- */
html body.pp-signal.pp-tc.pp-lh .ht-404msg{background:var(--pp-light-band)!important;border-bottom:1px solid var(--pp-border)!important}
html body.pp-signal.pp-tc.pp-lh :is(.ht-404msg__title,.ht-404msg__tagline){color:var(--pp-navy)!important}
html body.pp-signal.pp-tc.pp-lh.pp-sc .ht-404msg::after{background:var(--ppd-404) no-repeat 50% 100% / 2560px 276px}

@media (max-width:1099px){
  html body.pp-signal.pp-tc.pp-lh.pp-sc .site-header__search::after{background:var(--ppd-home-m) no-repeat 50% 100% / 1000px 100px!important}
  html body.pp-signal.pp-tc.pp-lh.pp-sc .ht-404msg::after{background:var(--ppd-404-m) no-repeat 50% 100% / 1000px 100px}
}
@media (max-width:700px){
  html body.pp-signal.pp-tc.pp-lh.pp-sc .site-header__search::after{background-size:680px 68px!important}
  html body.pp-signal.pp-tc.pp-lh.pp-sc .ht-404msg::after{background-size:680px 68px}
}