/* ============================================================
   KB WYLDE — Elementor / Hello Elementor integration layer
   Loaded AFTER brand.css. Makes the brand design hold up inside
   Elementor's section/column/widget wrappers and neutralises a
   few Hello Elementor defaults.
   ============================================================ */

/* Hello Elementor resets some typography on body — re-assert brand base. */
body.elementor-kit-active,
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
}

/* ------------------------------------------------------------
   FULL-WIDTH ENFORCEMENT
   Hello Elementor (and Elementor's own boxed defaults) constrain
   the content area to ~1140px. Our blocks bring their own .wrap
   max-width, so every wrapper in the chain must be edge-to-edge.
   We override each known constraint, scoped to our content area
   so native boxed containers you add later still read normally.
   ------------------------------------------------------------ */

/* 1) Theme content area + Elementor root → full width, no padding. */
body .site-main,
body main.site-main,
body .page-content,
body .site-main > .elementor,
body .elementor.elementor-page {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) Hello Elementor sets a container width via CSS variables — neutralise
      them inside our content area so nothing inherits the 1140px cap. */
body .site-main {
  --container-max-width: 100%;
  --container-default-padding-block-start: 0px;
  --container-default-padding-block-end: 0px;
  --container-default-padding-inline-start: 0px;
  --container-default-padding-inline-end: 0px;
}

/* 3) Our page-body SECTIONS (kbw-block) → full viewport width regardless of
      Elementor's boxed/full setting, legacy sections OR flexbox containers. */
.site-main .kbw-block,
.site-main .kbw-block > .elementor-container,
.site-main .kbw-block.e-con,
.site-main .kbw-block.e-con > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 4) Belt-and-braces: ALL legacy Elementor sections inside our content area
      go full-bleed (every block we ship is a legacy section; the inner .wrap
      restores the centered reading width). Newer flexbox containers (.e-con)
      a user adds later are intentionally left boxed, so their content reads
      at a normal width. This catches the case where the kbw-block custom
      class didn't survive import. */
.site-main .elementor-section,
.site-main .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
}

/* 5) NEW Elementor (container/flexbox engine). On our imported builder pages
      the width cap lives on .e-con (the boxed container) and on the kit's
      --container-width / --width variables. Force every container full-bleed,
      but SCOPED to our pages (body.kbw-elementor-page) so boxed containers you
      add to other pages keep their normal reading width. The inner .wrap in
      each block still provides the centered ~1200px text column. */
body.kbw-elementor-page .site-main {
  --container-width: 100%;
  --container-max-width: 100%;
  --width: 100%;
}
body.kbw-elementor-page .site-main .e-con,
body.kbw-elementor-page .site-main .e-con > .e-con-inner,
body.kbw-elementor-page .site-main .e-con.e-con-boxed,
body.kbw-elementor-page .site-main .e-con.e-con-boxed > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
  --container-widget-width: 100%;
}
/* Kill side padding on our top-level blocks only — inner .wrap re-adds gutters. */
body.kbw-elementor-page .site-main > .elementor > .e-con,
body.kbw-elementor-page .site-main > .elementor > .elementor-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Elementor widget wrappers should never clip our shadows / badges. */
.elementor-widget-html,
.elementor-widget-html .elementor-widget-container {
  overflow: visible;
}

/* Our composite HTML-widget blocks are "inner only" (no .section/.wrap);
   the Elementor SECTION supplies the outer padding + boxed width. Make sure
   block-level composites fill the column. */
.elementor-widget-html .elementor-widget-container > .hero,
.elementor-widget-html .elementor-widget-container > .release,
.elementor-widget-html .elementor-widget-container > .feature,
.elementor-widget-html .elementor-widget-container > .coming,
.elementor-widget-html .elementor-widget-container > .about-teaser,
.elementor-widget-html .elementor-widget-container > .expect,
.elementor-widget-html .elementor-widget-container > .facts,
.elementor-widget-html .elementor-widget-container > .faves,
.elementor-widget-html .elementor-widget-container > .perks,
.elementor-widget-html .elementor-widget-container > .magnet,
.elementor-widget-html .elementor-widget-container > .form-card,
.elementor-widget-html .elementor-widget-container > .featured,
.elementor-widget-html .elementor-widget-container > .posts,
.elementor-widget-html .elementor-widget-container > .cats,
.elementor-widget-html .elementor-widget-container > .nl-hero,
.elementor-widget-html .elementor-widget-container > .about-hero {
  width: 100%;
}

/* ------------------------------------------------------------
   kbw-block: every page-body section is full-bleed with zero
   padding, because the HTML widget inside brings the exact mock
   markup (its own .section / .wrap / .hero). This removes any
   dependence on Elementor's boxed-width & padding behaviour, so
   each block renders pixel-identical to the approved design while
   still being a real, reorderable Elementor section.
   ------------------------------------------------------------ */
.kbw-block,
.kbw-block > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.kbw-block > .elementor-container > .elementor-column,
.kbw-block .elementor-column-wrap,
.kbw-block .elementor-widget-wrap,
.kbw-block .elementor-widget-html,
.kbw-block .elementor-widget-html .elementor-widget-container,
.kbw-block .elementor-widget:not(:last-child) {
  padding: 0 !important;
  margin: 0 !important;
}
.kbw-block .hero,
.kbw-block .elementor-widget-html .elementor-widget-container > * { width: 100%; }

/* Newsletter form section (Shortcode widget) — reproduces .section + .wrap */
.kbwe-formsec { padding: clamp(40px, 6vw, 80px) 32px !important; }
.kbwe-formsec .elementor-widget-shortcode,
.kbwe-formwrap { max-width: 680px; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------
   Native Elementor widgets (Heading / Text / Button), in case
   the editor adds them: style them in the brand voice by
   targeting Elementor's stable inner classes.
   ------------------------------------------------------------ */
.kbw-eyebrow .elementor-heading-title {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .34em;
  font-weight: 500; font-size: .72rem; color: var(--pink-soft);
}
.kbw-display .elementor-heading-title {
  font-family: var(--serif); font-weight: 600; line-height: .96;
  font-size: clamp(3rem, 8vw, 7rem);
}
.kbw-display .elementor-heading-title em { font-style: italic; color: var(--pink-soft); font-weight: 500; }
.kbw-title .elementor-heading-title {
  font-family: var(--serif); font-weight: 600; line-height: 1.02;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
}
.kbw-lede .elementor-widget-container,
.kbw-lede p {
  font-size: 1.18rem; color: var(--muted); font-weight: 300; line-height: 1.75;
}

.elementor-button.kbw-btn-pink,
.elementor-button.kbw-btn-ghost,
.elementor-button.kbw-btn-chrome {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em;
  font-weight: 500; font-size: .92rem; border-radius: 2px; padding: 16px 30px;
  border: 1px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.elementor-button.kbw-btn-pink {
  background: linear-gradient(180deg, var(--pink-soft), var(--pink-deep)); color: #fff;
  box-shadow: 0 6px 22px -6px var(--pink-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.elementor-button.kbw-btn-ghost { background: transparent; color: var(--paper); border-color: var(--line); }
.elementor-button.kbw-btn-chrome {
  background: linear-gradient(180deg, #eef2f8, #b4bdca 55%, #828d9d); color: #1a1d26;
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px -8px rgba(0,0,0,.7);
}
.elementor-button.kbw-btn-pink:hover,
.elementor-button.kbw-btn-ghost:hover,
.elementor-button.kbw-btn-chrome:hover { transform: translateY(-2px); }
.elementor-button.kbw-btn-ghost:hover { border-color: var(--pink); color: #fff; }

/* Editor canvas: give the dark brand backdrop while building. */
.elementor-editor-active .elementor-section,
.elementor-editor-preview .elementor-section { color: var(--paper); }