/* =====================================================================
   Kept Lab - brand accent layer (loaded last).
   Base theme colours are translated in the CSS chunks; this file adds the
   terracotta accents, the floating-pill colour, and the logo states.
   ===================================================================== */
:root{
  --kl-terra:#B36856;   /* main      */
  --kl-card:#DEB1A1;    /* secondary */
  --kl-cream:#F8ECE7;   /* accent 1  */
  --kl-cocoa:#7F4233;   /* accent 2  */
}

/* ---- Logo (inline three-bar mark + wordmark) ---------------------- */
.kl-logo{display:inline-flex;align-items:center;line-height:1}
.kl-logo-img{height:3.63rem;width:auto;max-width:none;flex:none;display:block}
/* nav sits on the dark hero AND the cocoa pill -> always use the light logo */
.kl-logo-dark{display:none}
.kl-logo-light{display:block}

/* ---- Floating pill nav -> brand cocoa ----------------------------- */
[class*="navbar--active"] [class*="navbar_content"]{
  background:rgba(127,66,51,.55)!important;          /* frosted terracotta glass */
  -webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;
  box-shadow:0 18px 50px rgba(127,66,51,.22)!important;
}
[class*="navbar--active"] [class*="navbar_join"]{
  background:var(--kl-cream)!important;color:var(--kl-cocoa)!important;border-color:transparent!important;
}
/* Pill-state hover: bg goes cocoa, so force the label cream (else cocoa-on-cocoa hides it) */
[class*="navbar--active"] [class*="navbar_join"]:hover{
  background:var(--kl-cocoa)!important;color:var(--kl-cream)!important;border-color:var(--kl-cocoa)!important;
}

/* ---- Primary CTAs -> terracotta ----------------------------------- */
[class*="navbar_join"],
[class*="Hero"][class*="__cta"]:not([class*="secondary"]):not([class*="wrapper"]),
[class*="Pricing"] a[class*="button"],[class*="Pricing"] button,
[class*="StartGlowUp"] a,
[class*="cta_primary"]{
  background:var(--kl-terra)!important;color:var(--kl-cream)!important;border-color:var(--kl-terra)!important;
}
[class*="navbar_join"]:hover,
[class*="Hero"][class*="__cta"]:not([class*="secondary"]):not([class*="wrapper"]):hover,
[class*="cta_primary"]:hover{background:var(--kl-cocoa)!important;border-color:var(--kl-cocoa)!important}

/* ---- Accent text -> terracotta ------------------------------------ */
[class*="title_muted"],[class*="__muted"]{color:var(--kl-terra)!important}
/* hero muted headline -> lighter terracotta for a softer look on the dark left */
[class*="Hero"][class*="title_muted"]{color:#DEB1A1!important}
[class*="SectionHeader"] [class*="__type"]{color:var(--kl-terra)!important}



/* ---- Warm the decorative "gradient-blur" glow (was a cool image) --- */
[style*="--gradient-blur-bg"]{
  --gradient-blur-bg: radial-gradient(circle at 50% 45%, rgba(222,177,161,.9) 0%, rgba(248,236,231,.32) 45%, rgba(248,236,231,0) 70%)!important;
  --gradient-blur-bg-fallback: radial-gradient(circle at 50% 45%, rgba(222,177,161,.9) 0%, rgba(248,236,231,0) 70%)!important;
}

/* Three feature sections -> solid terracotta (#B36856): kill the light #DEB1A1
   glow wash so the section's own terracotta base shows through flat.
   (The New Way strip, Personalised-plan section, "See your body transform" band.) */
[class*="TheNewWay"][class*="list_card--primary"],
[class*="YourPersonalized"][class*="__element"],
[class*="KeptMethod"][class*="panel_right"],
[class*="FacialAnalysis"][class*="__element"]{
  background:#B36856!important;
  --gradient-blur-bg:none!important;
  --gradient-blur-bg-fallback:none!important;
}
[class*="TheNewWay"][class*="list_card--primary"]::before,[class*="TheNewWay"][class*="list_card--primary"]::after,
[class*="YourPersonalized"][class*="__element"]::before,[class*="YourPersonalized"][class*="__element"]::after,
[class*="KeptMethod"][class*="panel_right"]::before,[class*="KeptMethod"][class*="panel_right"]::after,
[class*="FacialAnalysis"][class*="__element"]::before,[class*="FacialAnalysis"][class*="__element"]::after{
  background:none!important;background-image:none!important;
}

/* mobile menu open: cream overlay -> use the dark logo + dark hamburger */
.kl-menu-open .kl-logo-light{display:none}
.kl-menu-open .kl-logo-dark{display:block}
.kl-menu-open [class*="navbar_menu_bar"]{background:var(--kl-cocoa)!important}


/* breathing room between the logo and the left edge of the floating pill */
[class*="navbar--active"] [class*="navbar_logo"]{margin-left:1.4rem}

/* Hero video framing (desktop): show the WHOLE video top-to-bottom (no crop),
   anchored to the right edge; the hero gradient fills the rest of the width. */
/* Baked full-background hero video fills the hero (object-fit:cover), like the
   original site. The gradient is rendered INTO the video frame, so no CSS
   gradient / vignette / fade is needed; a solid colour only shows if the video
   fails to load. (Applies to desktop + mobile.) */
[class*="Hero"][class*="__video"]{object-fit:cover!important;object-position:center!important;background:transparent!important}
[class*="Hero"][class*="__hero"]{background:#9a5a44!important}
/* Full-bleed the video across the whole hero (it was a right-hand column) so the
   baked gradient IS the entire hero background - no seam, text overlays on top. */
[class*="Hero"][class*="__media"]{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;background:transparent!important}
[class*="Hero"][class*="__left_gradient"]{display:none!important}

/* Original brand corner vignette: darken the top-left/right corners over the
   video (restores the original look; the baked gradient alone read too light up top). */
@media (min-width:1100px){
  [class*="Hero"][class*="__element"]{position:relative}
  [class*="Hero"][class*="__element"]::after{
    content:"";position:absolute;top:0;left:0;right:0;height:62%;pointer-events:none;z-index:1;
    background:
      radial-gradient(62% 92% at 0% 0%, rgba(74,38,28,.54), transparent 64%),
      radial-gradient(62% 92% at 100% 0%, rgba(74,38,28,.54), transparent 64%);
  }
}

/* Mobile: the baked video provides the full vertical gradient (dark top/bottom,
   light middle), so the only override needed is CTA contrast against the dark
   bottom of the frame where the buttons sit. */
@media (max-width:1099px){
  [class*="Hero"][class*="__cta"]:not([class*="secondary"]):not([class*="wrapper"]){
    background:var(--kl-cream)!important;color:var(--kl-cocoa)!important;border-color:var(--kl-cream)!important;
  }
}

/* Footer logo: show the Kept mark where the old wordmark used to sit */
[class*="Footer"][class*="__big_logo"]{display:flex!important;align-items:center;justify-content:center;padding:1.4rem 0}
.kl-footer-logo{height:3rem!important;width:auto!important;display:block!important;background:transparent!important}

/* Personalised-plan section sits on solid terracotta now, so its badge was
   terracotta-on-terracotta (invisible) and its benefit list was black (low
   contrast). Make both light/cream so they're legible (desktop + mobile). */
[class*="YourPersonalized"] [class*="__type"],
[class*="YourPersonalized"] [class*="__badge"]{
  color:var(--kl-cream)!important;border-color:rgba(248,236,231,.5)!important;
}
[class*="YourPersonalized"][class*="benefit_item"]{color:var(--kl-cream)!important}

/* Mobile hero: the gradient's light middle sits behind the headline, so the
   light #DEB1A1 muted second line washes out. Make the muted line white on
   mobile (legible over both the light gradient and the subject's dark top).
   Desktop keeps the two-tone (muted text sits on the dark-left). */
@media (max-width:1099px){
  [class*="Hero"][class*="title_muted"]{color:#fff!important}
}