/* ============================================================
   bk-compat.css — fixes for Elementor / Hello Elementor.
   Loaded BEFORE the design CSS (bk-base, bk-components, bk-home),
   so the design wins every tie. Only touches containers and boxes
   that hold Beekeeper widgets; normal Elementor widgets are not
   affected.
   ============================================================ */

/* Cream page ground on pages that use the design. */
body:has(.bk-w) { background-color: var(--bg-page) !important; }

/* ------------------------------------------------------------
   Elementor Container adds gap + padding + boxed width. A
   container that holds Beekeeper widgets gets no spacing of its
   own — each widget brings the design's spacing.
   ------------------------------------------------------------ */
.elementor .e-con.e-con:has(> [class*="elementor-widget-bk-"]),
.elementor .e-con.e-con:has(> .e-con-inner > [class*="elementor-widget-bk-"]) {
  --gap: 0px 0px !important;
  --row-gap: 0px !important;
  --column-gap: 0px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  --content-width: 100% !important;
  --container-max-width: 100% !important;
  --flex-wrap: nowrap !important;
  --flex-wrap-mobile: nowrap !important;
  flex-wrap: nowrap !important;
  --display: block !important;
  display: block !important;
}

.elementor .e-con:has(> [class*="elementor-widget-bk-"]) > .e-con-inner {
  max-width: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
  display: block !important;
}

.elementor [class*="elementor-widget-bk-"] {
  width: 100%;
  max-width: 100%;
}

.elementor [class*="elementor-widget-bk-"]:not(:last-child) {
  margin-bottom: 0;
  margin-block-end: 0;
}

/* ------------------------------------------------------------
   Theme / kit buttons (Hello Elementor paints every <button>
   pink on hover). Stronger than the theme, weaker than every
   design rule, so the design's own button styles still win.
   (Design rules are prefixed .bk-w.bk-scope.bk-scope — one step
   above Elementor's widget rules such as
   .elementor-widget:not(..):not(..) figure { margin: 0 }.)
   ------------------------------------------------------------ */
.bk-w.bk-scope :is(button, [type="button"], [type="submit"]) {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  white-space: normal;
  text-transform: none;
  box-shadow: none;
}

/* ------------------------------------------------------------
   WordPress admin bar: the floating header sits under it.
   ------------------------------------------------------------ */
body.admin-bar .bk-w.bk-scope.bk-scope .site-header { top: calc(var(--space-3) + 32px); }
@media (max-width: 782px) {
  body.admin-bar .bk-w.bk-scope.bk-scope .site-header { top: calc(var(--space-3) + 46px); }
}

/* ------------------------------------------------------------
   Elementor editor only.
   The header is fixed on the website. While the Header TEMPLATE
   itself is being edited it sits in the page flow, so it can be
   clicked and edited like the rest. (On normal pages it floats.)
   ------------------------------------------------------------ */
body.elementor-editor-active.single-elementor_library .bk-w.bk-scope.bk-scope .site-header {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  margin: var(--space-3);
}

/* ------------------------------------------------------------
   "On this page" bar (BK On This Page). The design makes .subnav
   sticky, but inside Elementor its parent is the widget's own box,
   so it could only stick for its own height. The stickiness moves
   to the Elementor container instead, which spans the page.
   ------------------------------------------------------------ */
.elementor .e-con:has(> .elementor-widget-bk-subnav),
.elementor .e-con:has(> .e-con-inner > .elementor-widget-bk-subnav) {
  position: sticky !important;
  top: 0;
  z-index: 40;
}
body.admin-bar .elementor .e-con:has(> .elementor-widget-bk-subnav) { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .elementor .e-con:has(> .elementor-widget-bk-subnav) { top: 46px; }
}

/* ------------------------------------------------------------
   Sections with no background of their own show the cream page
   behind them in the design. In WordPress, whatever sits behind
   (theme body colour, Elementor page/container background) may be
   white — so each section paints the cream itself. Weaker than
   every design rule: navy / deeper-cream / pattern sections keep
   their own backgrounds.
   ------------------------------------------------------------ */
.bk-w.bk-scope > section,
.bk-w.bk-scope > aside,
.bk-w.bk-scope > nav.crumbs {
  background-color: var(--bg-page);
}