/* ============================================================ 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
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. ============================================================ */ /* Every CCI section manages its own width via .wrap, so the widget wrapper must never shrink to its content. Matched by attribute rather than by a list of names: the list was written when there were 21 widgets, and by the time there were 49 the 28 newest ones had silently missed out — which is how the article's featured image ended up hugging the left edge instead of centring inside a flex container. */ [class*="elementor-widget-cci-"] { 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. The RECLAIMED OVERRIDES section below restates some of these same track lists with !important (.elementor .news__grid, .elementor .jobs). Among !important rules specificity still decides, so every selector here carries the .elementor prefix too — that makes them (0,3,0) against those rules' (0,2,0) and keeps the repair winning regardless of which block comes first in the file. ============================================================ */ @media (min-width: 1101px) { .elementor .wrap.cew-cols-1 { grid-template-columns: 1fr !important; } .elementor .wrap.cew-cols-2 { grid-template-columns: repeat(2, 1fr) !important; } .elementor .wrap.cew-cols-3 { grid-template-columns: repeat(3, 1fr) !important; } .elementor .wrap.cew-cols-4 { grid-template-columns: repeat(4, 1fr) !important; } .elementor .wrap.cew-cols-5 { grid-template-columns: repeat(5, 1fr) !important; } .elementor .wrap.cew-cols-6 { grid-template-columns: repeat(6, 1fr); } /* These two have no .wrap — the .elementor prefix carries them. */ .elementor .about__vm.cew-cols-1 { grid-template-columns: 1fr !important; } .elementor .pillars.cew-cols-1 { grid-template-columns: 1fr !important; } /* The footer's brand column is deliberately wider, so it keeps its own track list rather than falling back to equal columns. */ .elementor .foot__grid.cew-foot-3 { grid-template-columns: 1.6fr 1fr 1.2fr !important; } .elementor .foot__grid.cew-foot-2 { grid-template-columns: 1.6fr 1.4fr !important; } .elementor .foot__grid.cew-foot-1 { grid-template-columns: 1fr !important; } /* .jobs is repeat(2,1fr) — a lone card would sit in a half-width track. */ .elementor .jobs.cew-cols-1 { grid-template-columns: 1fr !important; } } [class*="elementor-widget-cci-"] > .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