/* ============================================================
   CEW — Elementor layout guards
   ------------------------------------------------------------
   Deliberately tiny. This file does NOT restyle anything in styles.css.
   It only stops Elementor's own wrappers from constraining the full-bleed
   <section> elements our widgets output.

   The CCI sections manage their own width via .wrap (max-width:1320px),
   so they must be dropped into a FULL WIDTH container with ZERO padding.
   ============================================================ */

.elementor-widget-cci-header,
.elementor-widget-cci-hero,
.elementor-widget-cci-brands,
.elementor-widget-cci-burst,
.elementor-widget-cci-about,
.elementor-widget-cci-news,
.elementor-widget-cci-footer,
.elementor-widget-cci-breadcrumb,
.elementor-widget-cci-career-hero,
.elementor-widget-cci-people,
.elementor-widget-cci-positions,
.elementor-widget-cci-news-hero,
.elementor-widget-cci-news-archive,
.elementor-widget-cci-contact-hero,
.elementor-widget-cci-enquiry,
.elementor-widget-cci-locations,
.elementor-widget-cci-cta,
.elementor-widget-cci-recipe-hub,
.elementor-widget-cci-recipe-hero,
.elementor-widget-cci-recipe-picker,
.elementor-widget-cci-recipe-guide {
  width: 100%;
}

/* The burst carousel parks off-screen slides to the right; without this the
   editor canvas gets a horizontal scrollbar while they're parked. */
.elementor-widget-cci-burst > .elementor-widget-container {
  overflow-x: clip;
}

/* ============================================================
   Grid repair for hidden blocks
   ------------------------------------------------------------
   styles.css sizes several grids for a fixed number of children
   (.stats is repeat(3,1fr), .foot__grid is 1.6fr 1fr 1fr 1.2fr …).
   Switch a block off in a widget and the remaining children would
   sit in the wrong tracks, leaving a gap.

   A widget adds one of these modifier classes ONLY when a Show
   switcher has actually removed something, or when a repeater has
   a different number of rows than the design assumed. With
   everything visible, no class is added and the markup is
   byte-identical to the static site.

   Why classes rather than Elementor's generated per-element CSS:
   styles.css re-columns at 1100px and 720px, but Elementor's
   responsive controls break at 1024/767 — they don't line up, and
   a generated `.elementor-element-x .stats {…}` rule (0,2,0) would
   outrank the media queries at every width. Scoping to
   min-width:1101px here keeps both breakpoints intact.

   .wrap sits on every affected grid, so `.wrap.cew-cols-N` is
   (0,2,0) and cleanly outranks the single-class rules it replaces.
   ============================================================ */
@media (min-width: 1101px) {
  .wrap.cew-cols-1 { grid-template-columns: 1fr; }
  .wrap.cew-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .wrap.cew-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .wrap.cew-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .wrap.cew-cols-5 { grid-template-columns: repeat(5, 1fr); }
  .wrap.cew-cols-6 { grid-template-columns: repeat(6, 1fr); }

  /* These two have no .wrap — one class each is enough to reach (0,2,0). */
  .about__vm.cew-cols-1 { grid-template-columns: 1fr; }
  .pillars.cew-cols-1   { grid-template-columns: 1fr; }

  /* The footer's brand column is deliberately wider, so it keeps its own
     track list rather than falling back to equal columns. */
  .foot__grid.cew-foot-3 { grid-template-columns: 1.6fr 1fr 1.2fr; }
  .foot__grid.cew-foot-2 { grid-template-columns: 1.6fr 1.4fr; }
  .foot__grid.cew-foot-1 { grid-template-columns: 1fr; }

  /* .jobs is repeat(2,1fr) — a lone card would sit in a half-width track. */
  .jobs.cew-cols-1 { grid-template-columns: 1fr; }
}

.elementor-widget-cci-header > .elementor-widget-container,
.elementor-widget-cci-hero > .elementor-widget-container,
.elementor-widget-cci-brands > .elementor-widget-container,
.elementor-widget-cci-burst > .elementor-widget-container,
.elementor-widget-cci-about > .elementor-widget-container,
.elementor-widget-cci-news > .elementor-widget-container,
.elementor-widget-cci-footer > .elementor-widget-container,
.elementor-widget-cci-breadcrumb > .elementor-widget-container,
.elementor-widget-cci-career-hero > .elementor-widget-container,
.elementor-widget-cci-people > .elementor-widget-container,
.elementor-widget-cci-positions > .elementor-widget-container,
.elementor-widget-cci-news-hero > .elementor-widget-container,
.elementor-widget-cci-news-archive > .elementor-widget-container,
.elementor-widget-cci-contact-hero > .elementor-widget-container,
.elementor-widget-cci-enquiry > .elementor-widget-container,
.elementor-widget-cci-locations > .elementor-widget-container,
.elementor-widget-cci-cta > .elementor-widget-container,
.elementor-widget-cci-recipe-hub > .elementor-widget-container,
.elementor-widget-cci-recipe-hero > .elementor-widget-container,
.elementor-widget-cci-recipe-picker > .elementor-widget-container,
.elementor-widget-cci-recipe-guide > .elementor-widget-container {
  width: 100%;
}

/* .nav is position:sticky and .drawer is position:fixed. Both are killed by an
   ancestor that creates a containing block — which is exactly what Elementor
   does when a container has overflow:hidden, a transform, or a motion effect.
   Neutralise it on the wrappers we own; the theme-builder container itself
   must be left at Overflow: Default with no motion effects. */
.elementor-widget-cci-header,
.elementor-widget-cci-header > .elementor-widget-container {
  overflow: visible;
  transform: none;
  filter: none;
  perspective: none;
}

/* The hero is min-height:calc(100vh - var(--nav-h)). Inside the editor canvas
   the toolbar eats vertical space, which makes it look shorter than it is on
   the live site — nothing to fix, but the outline helps while dragging. */
.elementor-editor-active .elementor-widget-cci-hero .hero {
  outline: none;
}

/* ============================================================
   Hello Elementor's bare-button hover
   ------------------------------------------------------------
   The theme styles every unclassed control:

     button:hover, button:focus,
     [type=button]:hover, [type=submit]:hover, … {
       background-color:#c36; color:#fff;
     }

   `[type=button]:hover` is (0,2,0) — exactly the same specificity as
   `.rpick:hover` — so which one wins is decided purely by stylesheet
   order, which is not something to leave to chance.

   Every CCI control is a <button>, so all of them are exposed. The
   design gives most of them NO hover background at all (.rpick only
   sets a transform; .filter__btn and .lang__btn only change border and
   text colour), so the theme rule is pure pollution there.

   Prefixing with .elementor lifts these to (0,3,0), which already wins.
   !important is belt-and-braces: this file exists precisely to neutralise
   third-party resets, and a control's hover state is not something the
   Style tab exposes, so nothing legitimate is being blocked.
   ============================================================ */

/* --- controls with no hover background in the design ------------------- */
.elementor .rpick:hover,
.elementor .rpick:focus,
.elementor .filter__btn:hover,
.elementor .filter__btn:focus,
.elementor .lang__btn:hover,
.elementor .lang__btn:focus,
.elementor .nav__burger:hover,
.elementor .nav__burger:focus,
.elementor .rg-select__btn:hover,
.elementor .rg-select__btn:focus,
.elementor .rg-select__opt:hover,
.elementor .rg-select__opt:focus {
  background-color: transparent !important;
  color: inherit !important;
}

/* --- controls whose active/hover background IS part of the design ------ */
.elementor .lang__btn.is-active,
.elementor .lang__btn.is-active:hover,
.elementor .lang__btn.is-active:focus {
  background-color: var(--cci-blue) !important;
  border-color: var(--cci-blue) !important;
  color: #fff !important;
}

.elementor .filter__btn.is-active,
.elementor .filter__btn.is-active:hover,
.elementor .filter__btn.is-active:focus {
  background-color: var(--cci-blue) !important;
  border-color: var(--cci-blue) !important;
  color: #fff !important;
}

.elementor .rhero__arrow:hover,
.elementor .rhero__arrow:focus {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

.elementor .rdot.is-active {
  background-color: var(--brand) !important;
}

.elementor .burst__arrow:hover,
.elementor .burst__arrow:focus {
  background-color: rgba(53, 49, 40, 0.6) !important;
  color: #f7f1e6 !important;
}

.elementor .hero__dots button:hover,
.elementor .hero__dots button:focus {
  background-color: rgba(247, 241, 230, 0.7) !important;
}
.elementor .hero__dots button.is-active,
.elementor .burst__dots button.is-active {
  background-color: #f7f1e6 !important;
}