/* =====================================================================
   LitBooked — global consistency layer
   Loaded last in <head> (inc/head.php). Uses #main scoped selectors and
   !important so it wins over the page level <style> blocks that follow.

   1. Tokens (page width + gutter taken from index.php)
   2. Typography: Inter only, one heading scale, one paragraph size
   3. Layout: one content width and gutter for every page and section
   4. White header and white page heroes / banners
   5. Responsive safety: no horizontal overflow
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --lb-page-width:1240px;
  --lb-page-gutter:clamp(24px,5vw,64px);
  --wrap:1240px;
  --gut:var(--lb-page-gutter);
  --display:'Inter',sans-serif;
  --body:'Inter',sans-serif;
  --font-display:'Inter',sans-serif;
  --font-body:'Inter',sans-serif;
  --nav-font:'Inter',sans-serif;

  --lb-h1-size:clamp(2.25rem,1.55rem + 2.8vw,4rem);        /* 36 → 64px */
  --lb-h1-lh:1.1;
  --lb-h2-size:clamp(1.875rem,1.4rem + 1.9vw,3rem);        /* 30 → 48px */
  --lb-h2-lh:1.18;
  --lb-h3-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);      /* 20 → 26px */
  --lb-h3-lh:1.3;
  --lb-h4-size:clamp(1.125rem,1.07rem + .25vw,1.25rem);    /* 18 → 20px */
  --lb-h4-lh:1.4;
  --lb-h5-size:1rem;                                        /* 16px */
  --lb-h5-lh:1.5;
  --lb-p-size:1rem;                                         /* 16px */
  --lb-p-lh:1.7;
}
@media (max-width:760px){
  :root{ --lb-page-gutter:clamp(18px,5vw,28px); }
}

/* ---------- 2. Typography ---------- */
html body,
html body *{
  font-family:'Inter',sans-serif !important;
}
html body{ font-size:16px; line-height:var(--lb-p-lh); }

/* Headings: identical size, line height and weight on every page.
   Scoped to #main so the header menu, cart drawer and footer keep
   their small UI labels. Excluded: big stat numbers and tiny UI labels
   that only use a heading tag for structure (outcome stats, sidebar
   labels, form step labels). */
html body #main h1:not(:is(.lb-outcomes__number,.lb-outcomes__title,.aside-h,.article-h,.outcomes > *,.res-panel *,.pb-form > *)){
  font-size:var(--lb-h1-size) !important;
  line-height:var(--lb-h1-lh) !important;
  font-weight:500 !important;
  letter-spacing:-.025em !important;
}
html body #main h2:not(:is(.lb-outcomes__number,.lb-outcomes__title,.aside-h,.article-h,.outcomes > *,.res-panel *,.pb-form > *)){
  font-size:var(--lb-h2-size) !important;
  line-height:var(--lb-h2-lh) !important;
  font-weight:400 !important;
  letter-spacing:-.02em !important;
}
html body #main h3:not(:is(.lb-outcomes__number,.lb-outcomes__title,.aside-h,.article-h,.outcomes > *,.res-panel *,.pb-form > *)){
  font-size:var(--lb-h3-size) !important;
  line-height:var(--lb-h3-lh) !important;
  font-weight:400 !important;
  letter-spacing:-.01em !important;
}
html body #main h4:not(:is(.lb-outcomes__number,.lb-outcomes__title,.aside-h,.article-h,.outcomes > *,.res-panel *,.pb-form > *)){
  font-size:var(--lb-h4-size) !important;
  line-height:var(--lb-h4-lh) !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
html body #main h5:not(:is(.lb-outcomes__number,.lb-outcomes__title,.aside-h,.article-h,.outcomes > *,.res-panel *,.pb-form > *)){
  font-size:var(--lb-h5-size) !important;
  line-height:var(--lb-h5-lh) !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
/* Paragraphs: one size and line height everywhere. Excluded: small
   uppercase eyebrow / kicker / tag labels, stat values and the miniature
   UI mockups (book cover, browser preview) that use <p> for decoration. */
html body p:not(#lb-x):not(:is([class*="eyebrow"],[class*="kicker"],[class*="label"],[class*="__tag"],[class*="__k"],.k,.v,.n,.lbc-k,.lb-outcomes__copy,.lb-outcomes__description,.lbtk-flow__step,.csf-project__kind,.csf-caption__brand,.article-band-title,.jump,.lb2-hero__card-text,.fx-meta,.lbtk-info__meta,.article-tags,.lb3-pb__lead,.lb3-pb__book *,.lb-site *,.lb3-pb__features *,.lb3-pb__assurances *,.lb3-pb__scribble *,[aria-hidden="true"] *)){
  font-size:var(--lb-p-size) !important;
  line-height:var(--lb-p-lh) !important;
}

/* ---------- 3. Layout: one content width everywhere ---------- */
html body :is(.wrap,.csf-wrap,.lb2-c,.lbtk-c,.article-c):not(#lb-x){
  width:100% !important;
  max-width:var(--lb-page-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--lb-page-gutter) !important;
  padding-right:var(--lb-page-gutter) !important;
  box-sizing:border-box !important;
}
/* A container nested in another container must not add a second gutter. */
html body :is(.wrap,.csf-wrap,.lb2-c,.lbtk-c,.article-c) :is(.wrap,.csf-wrap,.lb2-c,.lbtk-c,.article-c):not(#lb-x){
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ---------- 4. White header ---------- */
html body header.nav,
html body header.nav.is-scrolled,
html body header.nav .nav-in,
html body header.nav.is-scrolled .nav-in{
  background:#fff !important;
}
html body header.nav{
  padding:0 !important;
  border-bottom:1px solid rgba(18,21,26,.09) !important;
}
html body header.nav .nav-in{
  max-width:var(--lb-page-width) !important;
  padding-left:var(--lb-page-gutter) !important;
  padding-right:var(--lb-page-gutter) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ---------- 5. Responsive safety ---------- */
html,body{ max-width:100%; overflow-x:hidden; }
@supports (overflow:clip){ html,body{ overflow-x:clip; } }
html body #main img,
html body #main video,
html body #main iframe{ max-width:100%; }
html body #main :is(h1,h2,h3,h4,h5,p,li,a){ overflow-wrap:break-word; }
html body #main table{ max-width:100%; }

/* ---------- 6. Sections that were narrower than the page width ---------- */
html body #main :is(.lb3-svc__list,.svcp-svc__rows,.cmp-engine-rows,.lb3-ba,.cmp-outcomes-card,.wwh-select,.lbtk-stage,.lbtk-rail,.lb2-offices){
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
html body #main figure.quote{ margin-left:0 !important; margin-right:0 !important; }
html body #main .phero-in:not(#lb-x),
html body #main .phero--solo .phero-in:not(#lb-x){ max-width:var(--lb-page-width) !important; }

/* ---------- 7. White page surfaces, heroes and banners ---------- */
:root{ --paper:#fff; }
html body{ background:#fff !important; }

/* Short inner page hero (.phero): was dark charcoal with an amber glow. */
html body #main .phero{
  background:#fff !important;
  color:var(--on-paper,#101418) !important;
  border-bottom:1px solid var(--line,#E7E3DB);
}
html body #main .phero::before,
html body #main .phero.band--glow::before,
html body #main .phero::after{ background:none !important; opacity:0 !important; }
html body #main .phero :is(h1,h2,h3,h4):not(.outcomes *):not(.audit *){ color:var(--on-paper,#101418) !important; }
html body #main .phero .lede,
html body #main .phero > .wrap > div > p:not(.eyebrow){ color:var(--on-paper-mute,#5B6470) !important; }
html body #main .phero .eyebrow{ color:var(--amber-deep,#A4630F) !important; }
html body #main .phero .crumbs,
html body #main .phero .crumbs a{ color:var(--on-paper-faint,#6B7079) !important; }
html body #main .phero .btn--line{ border-color:rgba(16,20,24,.22) !important; color:var(--on-paper,#101418) !important; background:transparent !important; }
html body #main .phero .btn--line:hover{ background:var(--on-paper,#101418) !important; color:#fff !important; }
html body #main .phero .tlink{ color:var(--amber-deep,#A4630F) !important; }
html body #main .phero .h-1 em,
html body #main .phero .h-1 .glow{ color:var(--amber-deep,#A4630F) !important; }

/* Warm cream / amber tinted heroes and banners. */
html body #main :is(.res-hero,.svcp-intro,.band--paper,.article-band,.wwh-adjacent-panel){
  background:#fff !important;
  background-image:none !important;
}
html body #main .article-band{ border-bottom:1px solid var(--line,#E7E3DB); }
html body #main .wwh-adjacent-panel{ border:1px solid var(--line,#E7E3DB); }
html body #main .lb3-final__panel{
  background:linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,.9) 48%,rgba(255,255,255,0) 72%),url(/assets/img/home-final-cta-stage.webp) right center/cover no-repeat !important;
}
@media (max-width:700px){
  html body #main .lb3-final__panel{
    background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 100%),url(/assets/img/home-final-cta-stage.webp) center/cover no-repeat !important;
  }
}

/* Outcome stat panel on the home page: keeps the title inside its dark card. */
html body #main h2.lb-outcomes__title{ font-size:clamp(20px,1.8vw,26px) !important; line-height:1.15 !important; }

/* Resources search field could not shrink below its default width on phones. */
html body #main .res-search{ flex:1 1 260px; min-width:0; }
html body #main .res-search input{ flex:1 1 auto; min-width:0; width:100%; }
html body #main .res-search button{ flex:0 0 auto; }

/* Justified running text opens wide gaps on narrow screens: left align it there. */
@media (max-width:760px){
  html body #main :is(.lb2-body p,.lb2-hero__sub,.lb2-svc__main p,.lb2-case__body p,.lb2-step p,.lb2-cta p,.lb2-manifesto__row p,.lb2-statement,.lb2-note,.lbtk-hero__sub){
    text-align:left !important;
    text-align-last:auto !important;
  }
}

/* Service page numbered prose: stack the number above the text on phones
   (the original mobile rule was written before the base rule and never applied). */
@media (max-width:640px){
  html body #main .cmp-prose-item{ grid-template-columns:minmax(0,1fr) !important; gap:14px !important; padding:36px 0 !important; }
  html body #main .cmp-prose-item:first-child{ padding-top:0 !important; }
}

/* Free audit light demo: let the shared h2 size wrap in fewer lines. */
html body #main .fx-banner .fa2-light-copy h2{ max-width:14ch !important; }

/* Legal pages: reading column starts on the page edge instead of floating in the middle. */
html body #main :is(.privacy-content-in,.terms-content-in){ justify-content:start !important; }

/* Case study hero subtitle: keep its fixed line breaks inside the phone screen. */
@media (max-width:640px){
  html body #main .csx .csx-title .glow:not(#lb-x){ font-size:clamp(1.3rem,6.4vw,2rem) !important; }
}

/* Case study appended sections: give the heading room above the cards. */
html body #main :is(.csx-toolkits-head,.csx-services-head){ margin-bottom:clamp(24px,3vw,40px) !important; }
