/* ========================================================================== Beaver Dam Auto Sales — Elementor compensations (SPEC §6) Loaded after the theme sheets, only when Elementor is active. THE LADDER — every rule that touches an Elementor widget is prefixed `body .elementor` (0,3,1): · Elementor kit defaults .elementor-kit-N .elementor-widget-heading .elementor-heading-title (0,3,0) · these theme rules body .elementor .elementor-widget-heading .elementor-heading-title (0,3,1) · client per-widget picks .elementor-N .elementor-element.elementor-element-abc … (0,4,0) So the theme beats the kit (even in the editor iframe, where the kit loads AFTER the theme) without beating anything the client sets in a widget's own panel. No !important, except the documented editor fail-open override at the bottom. How the seeds use it: · Sections/containers carry `bda-section bda-section--dark|--soft|--white|--brown` (css_classes AND _css_classes). The section provides spacing + tone; the widgets inside inherit colour. Never set padding/margin controls on seeded sections. · The home hero section carries `bda-hero` (+ background_image = lot photo): the scrim is ::before, the mascot is ::after — no extra widgets. · Eyebrow headings carry `bda-eyebrow` on the heading widget; hero title `bda-hero__title`; ledes `bda-lede` on the text-editor widget; button variants `bda-btn--light|--dark| --outline|--ghost|--lg` on the button widget (default = gold primary). · Beaver Dam widgets / [bda_*] shortcodes render the bare component (section=0) so the Elementor section is the only thing adding padding — see the shortcode rules below. · Section width modifiers: `bda-section--wide` / `bda-section--narrow`. Never put `bda-container*` on a section or column, and never `width:auto` a column. ========================================================================== */ /* ---------- Sections & containers: tone + spacing ---------- Legacy sections: base.css `.bda-section` / `.bda-section--dark` etc. (0,1,0) already give the Elementor section its padding, tone, on-dark colour and the dam stripe — and, being (0,1,0), they stay BELOW the client's own section controls, which Elementor writes at `.elementor-N .elementor-element.elementor-element-abc` (0,3,0). Do not restate them at the ladder level or the client can never change a seeded section's spacing or background. Position stays `relative` (Elementor's own rule) — the editor's per-section .elementor-background-overlay depends on it. Never `width:auto` a column. */ /* Flex containers pad through custom properties (--padding-top …) that the client's controls set on the element. Point those at the theme rhythm and re-assert the var-based properties (base.css's plain `padding-block` would otherwise win by load order on the live site and silently ignore the client's values). (0,2,0): above Elementor's default, below the client. */ .e-con.bda-section{--padding-top:var(--bda-section-y);--padding-bottom:var(--bda-section-y);--padding-left:var(--bda-gutter);--padding-right:var(--bda-gutter);padding-block-start:var(--padding-top);padding-block-end:var(--padding-bottom);padding-inline-start:var(--padding-left);padding-inline-end:var(--padding-right)} .e-con.bda-section--tight{--padding-top:calc(var(--bda-section-y) * .6);--padding-bottom:calc(var(--bda-section-y) * .6)} .e-con.bda-section{--content-width:var(--bda-container)} .e-con.bda-section--wide{--content-width:var(--bda-container-wide)} .e-con.bda-section--narrow{--content-width:var(--bda-container-narrow)} /* boxed width of seeded sections = the theme container (outer gutter minus Elementor's 10px column padding), so Elementor content lines up with the theme header/footer. Width modifiers for sections are `bda-section--wide` / `bda-section--narrow` — never put `bda-container--*` on a section or column (base.css would cap the element itself). */ body .elementor .elementor-section.bda-section.elementor-section-boxed>.elementor-container,body .elementor .elementor-section.bda-hero.elementor-section-boxed>.elementor-container,body .elementor .elementor-section.bda-pagehero.elementor-section-boxed>.elementor-container{max-width:var(--bda-container);padding-inline:max(0px,calc(var(--bda-gutter) - 10px))} body .elementor .elementor-section.bda-section--wide.elementor-section-boxed>.elementor-container{max-width:var(--bda-container-wide)} body .elementor .elementor-section.bda-section--narrow.elementor-section-boxed>.elementor-container{max-width:var(--bda-container-narrow)} /* ---------- Headings ---------- */ body .elementor .elementor-widget-heading .elementor-heading-title{font-family:var(--bda-font-display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:var(--bda-lh-tight);color:inherit;margin:0;padding:0;text-wrap:balance} body .elementor .elementor-widget-heading h1.elementor-heading-title{font-size:var(--bda-fs-h1)} body .elementor .elementor-widget-heading h2.elementor-heading-title{font-size:var(--bda-fs-h2)} body .elementor .elementor-widget-heading h3.elementor-heading-title{font-size:var(--bda-fs-h3);font-weight:700;line-height:1.1} body .elementor .elementor-widget-heading h4.elementor-heading-title{font-size:var(--bda-fs-h4);font-weight:700;line-height:var(--bda-lh-snug);letter-spacing:.04em} body .elementor .elementor-widget-heading h5.elementor-heading-title,body .elementor .elementor-widget-heading h6.elementor-heading-title{font-size:1rem;font-weight:700;line-height:var(--bda-lh-snug);letter-spacing:.06em} body .elementor .elementor-widget-heading .elementor-heading-title a{color:inherit;text-decoration:none} body .elementor .elementor-widget-heading .elementor-heading-title em{font-style:normal;color:var(--bda-gold-500)} body .elementor .bda-section--white .elementor-widget-heading .elementor-heading-title em,body .elementor .bda-section--soft .elementor-widget-heading .elementor-heading-title em{color:var(--bda-blue-700)} /* size helpers on the heading widget (_css_classes) */ body .elementor .elementor-widget-heading.bda-h1 .elementor-heading-title{font-size:var(--bda-fs-h1)} body .elementor .elementor-widget-heading.bda-h2 .elementor-heading-title{font-size:var(--bda-fs-h2)} body .elementor .elementor-widget-heading.bda-h3 .elementor-heading-title{font-size:var(--bda-fs-h3);font-weight:700;line-height:1.1} body .elementor .elementor-widget-heading.bda-h4 .elementor-heading-title{font-size:var(--bda-fs-h4);font-weight:700;letter-spacing:.04em} /* eyebrow: the class lands on the widget wrapper, so neutralise the base .bda-eyebrow box there and rebuild the look on the title (gold rule + tracking) */ body .elementor .elementor-widget.bda-eyebrow{display:block;margin:0 0 .85rem;font:inherit;letter-spacing:normal;text-transform:none;color:inherit} body .elementor .elementor-widget.bda-eyebrow::before{content:none} body .elementor .elementor-widget-heading.bda-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--bda-font-body);font-weight:700;font-size:var(--bda-fs-eyebrow);letter-spacing:.12em;text-transform:uppercase;line-height:1.3;color:var(--bda-blue-700)} body .elementor .elementor-widget-heading.bda-eyebrow .elementor-heading-title::before{content:"";flex:none;width:28px;height:3px;border-radius:2px;background:var(--bda-gold-500)} body .elementor .elementor-widget-heading.bda-eyebrow.bda-eyebrow--center .elementor-heading-title{justify-content:center} body .elementor .bda-section--dark .elementor-widget-heading.bda-eyebrow .elementor-heading-title, body .elementor .bda-section--brown .elementor-widget-heading.bda-eyebrow .elementor-heading-title, body .elementor .bda-hero .elementor-widget-heading.bda-eyebrow .elementor-heading-title{color:var(--bda-gold-500)} /* section head rhythm: heading followed by its lede */ body .elementor .elementor-widget-heading:not(.bda-eyebrow)+.elementor-widget-text-editor.bda-lede{margin-top:-.4rem} /* ---------- Text editor ---------- */ body .elementor .elementor-widget-text-editor{font-family:var(--bda-font-body);font-size:var(--bda-fs-body);line-height:var(--bda-lh-body);color:inherit} body .elementor .elementor-widget-text-editor p{margin:0 0 1em} body .elementor .elementor-widget-text-editor p:last-child{margin-bottom:0} body .elementor .elementor-widget-text-editor ul,body .elementor .elementor-widget-text-editor ol{padding-left:1.25em;margin:0 0 1em} body .elementor .elementor-widget-text-editor h2,body .elementor .elementor-widget-text-editor h3,body .elementor .elementor-widget-text-editor h4{font-family:var(--bda-font-display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:var(--bda-lh-tight);color:inherit;margin:1.4em 0 .5em} body .elementor .elementor-widget-text-editor h2{font-size:var(--bda-fs-h2)} body .elementor .elementor-widget-text-editor h3{font-size:var(--bda-fs-h3);font-weight:700} body .elementor .elementor-widget-text-editor h4{font-size:var(--bda-fs-h4);font-weight:700} body .elementor .elementor-widget-text-editor a{color:var(--bda-link);text-decoration:underline;text-underline-offset:.16em} body .elementor .bda-section--dark .elementor-widget-text-editor a,body .elementor .bda-section--brown .elementor-widget-text-editor a,body .elementor .bda-hero .elementor-widget-text-editor a{color:var(--bda-gold-400)} body .elementor .elementor-widget-text-editor table{width:100%;border-collapse:collapse} body .elementor .elementor-widget-text-editor th,body .elementor .elementor-widget-text-editor td{padding:.6rem .85rem;text-align:left;border-bottom:1px solid var(--bda-line);vertical-align:top} body .elementor .bda-section--dark .elementor-widget-text-editor th,body .elementor .bda-section--dark .elementor-widget-text-editor td{border-color:var(--bda-on-dark-line)} /* lede on a text-editor widget: constrain the CONTAINER, never the widget (flex-row float trap) */ body .elementor .elementor-widget-text-editor.bda-lede{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;color:var(--bda-text-2);max-width:none} body .elementor .elementor-widget-text-editor.bda-lede>.elementor-widget-container{max-width:62ch;text-wrap:pretty} body .elementor .elementor-widget-text-editor.bda-lede.bda-lede--center>.elementor-widget-container{margin-inline:auto;text-align:center} body .elementor .bda-section--dark .elementor-widget-text-editor.bda-lede,body .elementor .bda-section--brown .elementor-widget-text-editor.bda-lede,body .elementor .bda-hero .elementor-widget-text-editor.bda-lede{color:var(--bda-on-dark-muted)} body .elementor .elementor-widget-text-editor.bda-text-muted{color:var(--bda-text-muted)} body .elementor .bda-section--dark .elementor-widget-text-editor.bda-text-muted{color:var(--bda-on-dark-muted)} body .elementor .elementor-widget-text-editor.bda-prose>.elementor-widget-container{max-width:var(--bda-container-narrow)} /* ---------- Buttons (default = .bda-btn--primary) ---------- */ body .elementor .elementor-widget-button .elementor-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.5rem;font-family:var(--bda-font-body);font-weight:700;font-size:.95rem;line-height:1;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--bda-primary-ink);background-color:var(--bda-primary);border:2px solid var(--bda-primary);border-radius:var(--bda-radius-sm);box-shadow:none;fill:currentColor;transition:background-color var(--bda-dur) var(--bda-ease),color var(--bda-dur) var(--bda-ease),border-color var(--bda-dur) var(--bda-ease),transform var(--bda-dur) var(--bda-ease),box-shadow var(--bda-dur) var(--bda-ease)} body .elementor .elementor-widget-button .elementor-button:hover,body .elementor .elementor-widget-button .elementor-button:focus-visible{color:var(--bda-primary-ink);background-color:var(--bda-primary-hover);border-color:var(--bda-primary-hover);transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(239,198,80,.65),var(--bda-shadow)} body .elementor .elementor-widget-button .elementor-button:active{transform:translateY(0)} body .elementor .elementor-widget-button .elementor-button:focus-visible{outline:3px solid var(--bda-focus);outline-offset:3px} body .elementor .elementor-widget-button .elementor-button-content-wrapper{display:inline-flex;align-items:center;justify-content:center;gap:.5rem} body .elementor .elementor-widget-button .elementor-button-icon{display:inline-flex;align-items:center;font-size:1.1em;line-height:1} body .elementor .elementor-widget-button .elementor-button-icon svg{width:1.1em;height:1.1em;fill:currentColor} body .elementor .elementor-widget-button .elementor-button-text{line-height:1} /* the variant class lands on the widget wrapper: neutralise the base .bda-btn--* box there… */ body .elementor .elementor-widget-button[class*="bda-btn"]{display:block;padding:0;background:transparent;color:inherit;border:0;border-radius:0;box-shadow:none;transform:none;font:inherit;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:normal} body .elementor .elementor-widget-button[class*="bda-btn"]:hover,body .elementor .elementor-widget-button[class*="bda-btn"]:focus-visible{background:transparent;color:inherit;border:0;box-shadow:none;transform:none;text-decoration:none} /* …and restyle the real */ body .elementor .elementor-widget-button.bda-btn--dark .elementor-button{background-color:var(--bda-blue-900);border-color:var(--bda-blue-900);color:#fff} body .elementor .elementor-widget-button.bda-btn--dark .elementor-button:hover,body .elementor .elementor-widget-button.bda-btn--dark .elementor-button:focus-visible{background-color:var(--bda-blue-700);border-color:var(--bda-blue-700);color:#fff;box-shadow:var(--bda-shadow)} body .elementor .elementor-widget-button.bda-btn--light .elementor-button{background-color:#fff;border-color:#fff;color:var(--bda-blue-900)} body .elementor .elementor-widget-button.bda-btn--light .elementor-button:hover,body .elementor .elementor-widget-button.bda-btn--light .elementor-button:focus-visible{background-color:var(--bda-paper-100);border-color:var(--bda-paper-100);color:var(--bda-blue-900);box-shadow:var(--bda-shadow)} body .elementor .elementor-widget-button.bda-btn--outline .elementor-button{background-color:transparent;border-color:currentColor;color:inherit} body .elementor .elementor-widget-button.bda-btn--outline .elementor-button:hover,body .elementor .elementor-widget-button.bda-btn--outline .elementor-button:focus-visible{background-color:rgba(16,24,40,.06);border-color:currentColor;color:inherit;box-shadow:none} body .elementor .bda-section--dark .elementor-widget-button.bda-btn--outline .elementor-button:hover,body .elementor .bda-section--brown .elementor-widget-button.bda-btn--outline .elementor-button:hover,body .elementor .bda-hero .elementor-widget-button.bda-btn--outline .elementor-button:hover{background-color:rgba(255,255,255,.1)} body .elementor .elementor-widget-button.bda-btn--ghost .elementor-button{background-color:transparent;border-color:transparent;color:var(--bda-link);padding-inline:.5rem} body .elementor .elementor-widget-button.bda-btn--ghost .elementor-button:hover,body .elementor .elementor-widget-button.bda-btn--ghost .elementor-button:focus-visible{background-color:transparent;border-color:transparent;color:var(--bda-blue-600);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:2px;transform:none;box-shadow:none} body .elementor .bda-section--dark .elementor-widget-button.bda-btn--ghost .elementor-button,body .elementor .bda-section--brown .elementor-widget-button.bda-btn--ghost .elementor-button,body .elementor .bda-hero .elementor-widget-button.bda-btn--ghost .elementor-button{color:var(--bda-gold-400)} body .elementor .elementor-widget-button.bda-btn--lg .elementor-button{font-size:1.05rem;padding:1.15rem 2rem} body .elementor .elementor-widget-button.bda-btn--sm .elementor-button{font-size:.8rem;padding:.65rem 1rem;letter-spacing:.05em} body .elementor .elementor-widget-button.bda-btn--block .elementor-button{display:flex;width:100%} /* Elementor's own size classes should not fight the theme scale */ body .elementor .elementor-widget-button .elementor-button.elementor-size-xs,body .elementor .elementor-widget-button .elementor-button.elementor-size-sm,body .elementor .elementor-widget-button .elementor-button.elementor-size-md{font-size:.95rem;padding:.95rem 1.5rem;border-radius:var(--bda-radius-sm)} body .elementor .elementor-widget-button .elementor-button.elementor-size-lg,body .elementor .elementor-widget-button .elementor-button.elementor-size-xl{font-size:1.05rem;padding:1.15rem 2rem;border-radius:var(--bda-radius-sm)} /* side-by-side buttons (Elementor "inline" width) */ body .elementor .elementor-widget-button.elementor-widget__width-auto{margin-right:.9rem} body .elementor .elementor-widget-button.elementor-widget__width-auto:not(:last-child){margin-bottom:.9rem} /* ---------- Icon list ---------- */ body .elementor .elementor-widget-icon-list .elementor-icon-list-items{margin:0;padding:0;list-style:none} body .elementor .elementor-widget-icon-list .elementor-icon-list-item{display:flex;align-items:flex-start;gap:.65rem;font-family:var(--bda-font-body);font-size:var(--bda-fs-body);line-height:1.5;color:inherit} body .elementor .elementor-widget-icon-list .elementor-icon-list-icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.4em;height:1.5em;color:var(--bda-blue-700);margin:0;padding:0} body .elementor .elementor-widget-icon-list .elementor-icon-list-icon i{color:var(--bda-blue-700);font-size:1.05em;line-height:1} body .elementor .elementor-widget-icon-list .elementor-icon-list-icon svg{width:1.15em;height:1.15em;fill:var(--bda-blue-700)} body .elementor .elementor-widget-icon-list .elementor-icon-list-text{color:inherit;font-weight:500;padding:0} body .elementor .elementor-widget-icon-list .elementor-icon-list-item a{color:inherit;text-decoration:none} body .elementor .elementor-widget-icon-list .elementor-icon-list-item a:hover{color:var(--bda-blue-700);text-decoration:underline} body .elementor .bda-section--dark .elementor-widget-icon-list .elementor-icon-list-icon,body .elementor .bda-section--brown .elementor-widget-icon-list .elementor-icon-list-icon,body .elementor .bda-hero .elementor-widget-icon-list .elementor-icon-list-icon, body .elementor .bda-section--dark .elementor-widget-icon-list .elementor-icon-list-icon i,body .elementor .bda-section--brown .elementor-widget-icon-list .elementor-icon-list-icon i,body .elementor .bda-hero .elementor-widget-icon-list .elementor-icon-list-icon i{color:var(--bda-gold-500)} body .elementor .bda-section--dark .elementor-widget-icon-list .elementor-icon-list-icon svg,body .elementor .bda-section--brown .elementor-widget-icon-list .elementor-icon-list-icon svg,body .elementor .bda-hero .elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var(--bda-gold-500)} body .elementor .bda-section--dark .elementor-widget-icon-list .elementor-icon-list-item a:hover,body .elementor .bda-section--brown .elementor-widget-icon-list .elementor-icon-list-item a:hover,body .elementor .bda-hero .elementor-widget-icon-list .elementor-icon-list-item a:hover{color:var(--bda-gold-400)} /* checklist look (feature grids / "why us") */ body .elementor .elementor-widget-icon-list.bda-checklist .elementor-icon-list-icon{width:28px;height:28px;border-radius:50%;background:var(--bda-gold-500);color:var(--bda-blue-950);margin-top:.05em} body .elementor .elementor-widget-icon-list.bda-checklist .elementor-icon-list-icon i{color:var(--bda-blue-950);font-size:.8em} body .elementor .elementor-widget-icon-list.bda-checklist .elementor-icon-list-icon svg{fill:var(--bda-blue-950);width:.9em;height:.9em} body .elementor .elementor-widget-icon-list.bda-checklist .elementor-icon-list-item{align-items:center} /* inline (trust bullets under the hero buttons) */ body .elementor .elementor-widget-icon-list.bda-hero__trust .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem} body .elementor .elementor-widget-icon-list.bda-hero__trust .elementor-icon-list-item{font-size:.9rem;font-weight:600;color:var(--bda-on-dark-muted);align-items:center;gap:.45rem} /* ---------- Toggle → accordion (.bda-acc look) ---------- */ body .elementor .elementor-widget-toggle .elementor-toggle{display:grid;gap:.75rem} body .elementor .elementor-widget-toggle .elementor-toggle-item{background:var(--bda-surface);border:1px solid var(--bda-line);border-radius:var(--bda-radius);overflow:hidden;margin:0;transition:border-color var(--bda-dur) var(--bda-ease),box-shadow var(--bda-dur) var(--bda-ease)} body .elementor .elementor-widget-toggle .elementor-toggle-item:has(.elementor-tab-title.elementor-active){border-color:var(--bda-gold-600);box-shadow:var(--bda-shadow-sm)} body .elementor .elementor-widget-toggle .elementor-tab-title{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0;padding:1.1rem 1.35rem;border:0;font-family:var(--bda-font-display);font-weight:700;font-size:1.2rem;line-height:1.2;letter-spacing:.01em;text-transform:none;color:var(--bda-text);background:transparent;cursor:pointer;user-select:none} body .elementor .elementor-widget-toggle .elementor-tab-title:hover{color:var(--bda-blue-700)} body .elementor .elementor-widget-toggle .elementor-tab-title.elementor-active{color:var(--bda-blue-900);border:0} body .elementor .elementor-widget-toggle .elementor-tab-title:focus-visible{outline:3px solid var(--bda-focus);outline-offset:-3px;border-radius:var(--bda-radius)} body .elementor .elementor-widget-toggle .elementor-toggle-title{color:inherit;font:inherit;text-decoration:none;flex:1 1 auto} body .elementor .elementor-widget-toggle .elementor-toggle-icon{order:2;flex:none;float:none;display:grid;place-items:center;width:32px;height:32px;margin:0;border-radius:50%;background:var(--bda-surface-2);color:var(--bda-blue-900);font-size:.85rem;line-height:1;transition:background-color var(--bda-dur) var(--bda-ease),color var(--bda-dur) var(--bda-ease),transform var(--bda-dur) var(--bda-ease)} body .elementor .elementor-widget-toggle .elementor-toggle-icon i{color:inherit} body .elementor .elementor-widget-toggle .elementor-toggle-icon svg{width:14px;height:14px;fill:currentColor} body .elementor .elementor-widget-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon{background:var(--bda-gold-500);color:var(--bda-blue-950)} body .elementor .elementor-widget-toggle .elementor-tab-content{margin:0;padding:0 1.35rem 1.25rem;border:0;font-family:var(--bda-font-body);font-size:var(--bda-fs-body);line-height:1.6;color:var(--bda-text-2)} body .elementor .elementor-widget-toggle .elementor-tab-content p{margin:0 0 .75rem} body .elementor .elementor-widget-toggle .elementor-tab-content p:last-child{margin-bottom:0} /* accordion widget gets the same skin */ body .elementor .elementor-widget-accordion .elementor-accordion{display:grid;gap:.75rem} body .elementor .elementor-widget-accordion .elementor-accordion-item{background:var(--bda-surface);border:1px solid var(--bda-line);border-radius:var(--bda-radius);overflow:hidden} body .elementor .elementor-widget-accordion .elementor-tab-title{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.35rem;border:0;font-family:var(--bda-font-display);font-weight:700;font-size:1.2rem;line-height:1.2;color:var(--bda-text);cursor:pointer} body .elementor .elementor-widget-accordion .elementor-tab-title.elementor-active{color:var(--bda-blue-900)} body .elementor .elementor-widget-accordion .elementor-accordion-icon{order:2;flex:none;float:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bda-surface-2);color:var(--bda-blue-900);font-size:.85rem} body .elementor .elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon{background:var(--bda-gold-500);color:var(--bda-blue-950)} body .elementor .elementor-widget-accordion .elementor-tab-content{padding:0 1.35rem 1.25rem;border:0;color:var(--bda-text-2);line-height:1.6} /* ---------- Images ---------- */ body .elementor .elementor-widget-image img{border-radius:var(--bda-radius-lg)} body .elementor .elementor-widget-image.bda-img--square img{border-radius:0} body .elementor .elementor-widget-image.bda-img--shadow img{box-shadow:var(--bda-shadow-lg)} body .elementor .elementor-widget-image.bda-img--frame img{border:8px solid #fff;box-shadow:var(--bda-shadow-lg);transform:rotate(-2deg);background:var(--bda-paper-200)} body .elementor .elementor-widget-image.bda-mascot img{border-radius:0;width:min(280px,60%);height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.4))} body .elementor .elementor-widget-image figure.wp-caption{margin:0} body .elementor .elementor-widget-image .widget-image-caption{font-size:var(--bda-fs-small);color:var(--bda-text-muted);margin-top:.6rem} /* ---------- Divider / spacer helpers ---------- */ body .elementor .elementor-widget-divider .elementor-divider-separator{border-color:var(--bda-brown-100)} body .elementor .bda-section--dark .elementor-widget-divider .elementor-divider-separator{border-color:var(--bda-on-dark-line)} /* ---------- Home hero: section.bda-hero (background_image = lot photo) ---------- base.css `.bda-hero` (0,1,0) supplies min-height, padding, flex centring, on-dark colour and overflow:visible; the client's section controls (0,3,0) still win over those. Here: only what Elementor's DOM needs on top — the scrim, the mascot, stacking, and widget typography. */ body .elementor .elementor-section.bda-hero,body .elementor .e-con.bda-hero{z-index:2;background-color:var(--bda-blue-950);background-size:cover;background-position:50% 40%} body .elementor .elementor-section.bda-hero>.elementor-container{position:relative;z-index:2;width:100%} body .elementor .e-con.bda-hero>*{position:relative;z-index:2} /* scrim: heavy on the left for the copy, a second wash over the right third (old window sign) */ body .elementor .elementor-section.bda-hero::before,body .elementor .e-con.bda-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(22% 26% at 81% 46%,rgba(6,16,64,.7),rgba(6,16,64,0) 100%),linear-gradient(90deg,rgba(6,16,64,.9) 0%,rgba(6,16,64,.72) 30%,rgba(6,16,64,.35) 55%,rgba(6,16,64,.08) 75%),var(--bda-scrim-hero)} /* mascot peeking bottom-right (pure CSS, no widget → nothing for the editor to hit-test); hidden <900px */ body .elementor .elementor-section.bda-hero::after,body .elementor .e-con.bda-hero::after{content:"";display:none;position:absolute;right:clamp(1rem,4vw,4rem);bottom:0;z-index:1;width:min(300px,24vw);height:420px;pointer-events:none;background:url("../img/mascot.svg") no-repeat right bottom / contain;filter:drop-shadow(0 18px 30px rgba(6,16,64,.55))} /* hero typography (headings/buttons/lists inherit the on-dark colour from the section) */ body .elementor .bda-hero .elementor-widget-heading .elementor-heading-title{color:#fff;text-shadow:0 2px 24px rgba(6,16,64,.45)} body .elementor .bda-hero .elementor-widget-heading h1.elementor-heading-title,body .elementor .elementor-widget-heading.bda-hero__title .elementor-heading-title{font-size:var(--bda-fs-hero);color:#fff;text-shadow:0 2px 24px rgba(6,16,64,.45)} body .elementor .bda-hero .elementor-widget-heading h1.elementor-heading-title em,body .elementor .elementor-widget-heading.bda-hero__title .elementor-heading-title em{display:block;font-style:normal;color:var(--bda-gold-500)} body .elementor .bda-hero .elementor-widget-heading>.elementor-widget-container{max-width:640px} body .elementor .bda-hero .elementor-widget-text-editor{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;opacity:.92} body .elementor .bda-hero .elementor-widget-text-editor>.elementor-widget-container{max-width:52ch;text-wrap:pretty} body .elementor .bda-hero .elementor-widget-text-editor .elementor-widget-container p,body .elementor .bda-hero .elementor-widget-text-editor p{max-width:52ch} body .elementor .bda-hero .elementor-widget-button.elementor-widget__width-auto{margin-bottom:.9rem} /* search panel overlapping the hero's bottom edge: put the search widget in the NEXT section with class `bda-hero__search` (that section then paints above the hero), or as the hero's last widget — both patterns end 40px into the following section */ body .elementor .elementor-widget.bda-hero__search{position:relative;z-index:4;margin-top:-40px} body .elementor .bda-hero .elementor-widget.bda-hero__search{margin:2.5rem 0 calc(-40px - clamp(4.5rem,8vw,6.5rem))} body .elementor .elementor-section.bda-stats--after-hero,body .elementor .e-con.bda-stats--after-hero{padding-top:calc(40px + clamp(2.5rem,5vw,3.5rem))} @media (min-width:900px){ body .elementor .elementor-section.bda-hero::after,body .elementor .e-con.bda-hero::after{display:block} } @media (min-width:1300px){ body .elementor .elementor-section.bda-hero::after,body .elementor .e-con.bda-hero::after{width:280px;height:430px;right:calc((100vw - var(--bda-container)) / 2 + 1rem)} } /* ---------- Page hero (inner pages): section.bda-pagehero ---------- components.css `.bda-pagehero` (0,1,0) gives the dark band, stripe, min-height and padding (below the client's controls). Add the photo scrim + stacking + white title. */ body .elementor .elementor-section.bda-pagehero,body .elementor .e-con.bda-pagehero{background-size:cover;background-position:center 40%} body .elementor .elementor-section.bda-pagehero>.elementor-container{position:relative;z-index:2;width:100%} body .elementor .e-con.bda-pagehero>*{position:relative;z-index:2} body .elementor .elementor-section.bda-pagehero.bda-pagehero--photo::after,body .elementor .e-con.bda-pagehero.bda-pagehero--photo::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(78deg,rgba(6,16,64,.96),rgba(6,16,64,.55))} body .elementor .bda-pagehero .elementor-widget-heading .elementor-heading-title{color:#fff} body .elementor .bda-pagehero .elementor-widget-text-editor{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.5;color:var(--bda-on-dark-muted)} body .elementor .bda-pagehero .elementor-widget-text-editor>.elementor-widget-container{max-width:60ch} /* ---------- Beaver Dam widgets & [bda_*] shortcodes inside Elementor ---------- */ /* the widget renders the bare component; the Elementor section is the only spacing layer */ body .elementor .elementor-widget-shortcode>.elementor-widget-container,body .elementor [class*="elementor-widget-bda-"]>.elementor-widget-container{padding:0} body .elementor .bda-widget{display:block} /* a shortcode rendered with section="1" inside a section that already carries .bda-section: drop the inner padding/background/stripe so spacing is not doubled and the tone comes from the Elementor section */ body .elementor .bda-section .elementor-widget-shortcode .bda-section{padding-block:0;background:transparent;color:inherit} body .elementor .bda-section .elementor-widget-shortcode .bda-section::before{content:none} /* the partial's own .bda-container sits inside Elementor's boxed container: no double gutter */ body .elementor .elementor-section-boxed .elementor-widget-shortcode .bda-container,body .elementor .elementor-section-boxed [class*="elementor-widget-bda-"] .bda-container, body .elementor .e-con-boxed .elementor-widget-shortcode .bda-container,body .elementor .e-con-boxed [class*="elementor-widget-bda-"] .bda-container{max-width:none;padding-inline:0} /* the CTA band's mascot pokes above the band; the band inside a full-width section keeps that */ body .elementor .elementor-widget-bda-cta-band,body .elementor .elementor-widget-bda-cta-band>.elementor-widget-container{overflow:visible} /* stats strip is its own dark band; when the Elementor section is already dark, flatten it */ body .elementor .bda-section--dark .bda-stats{background:transparent;padding-block:0} /* Elementor's img reset ties the theme's card/agent image rules: restate at the ladder level */ body .elementor .bda-card__media img,body .elementor .bda-card__img{width:100%;height:100%;object-fit:cover;border-radius:0} body .elementor img.bda-agent__photo{width:100%;aspect-ratio:1;object-fit:cover;border:4px solid var(--bda-brown-300);border-radius:var(--bda-radius-lg)} body .elementor .bda-quote__avatar img{border-radius:50%} body .elementor .bda-frame__img img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover} body .elementor .bda-frame__badge img{border-radius:50%;box-shadow:0 0 0 4px var(--bda-gold-500),0 0 0 6px #fff} body .elementor .bda-type svg,body .elementor .bda-type__icon svg{display:block} body .elementor .bda-cta__figure img,body .elementor .bda-empty__mascot,body .elementor .bda-mascot{border-radius:0;height:auto} /* placeholder for a widget whose template has not shipped yet */ .bda-placeholder{display:block;padding:1.25rem 1.5rem;border:1px dashed var(--bda-paper-300);border-radius:var(--bda-radius);background:var(--bda-paper-100);color:var(--bda-text-muted);font-family:var(--bda-font-body);font-size:.9rem;text-align:center} body .elementor .bda-section--dark .bda-placeholder,body .elementor .bda-section--brown .bda-placeholder{background:rgba(255,255,255,.06);border-color:var(--bda-on-dark-line);color:var(--bda-on-dark-muted)} /* ---------- Editor-only DOM ---------- */ /* keep the canvas readable: no min-height collapse on empty widgets we style with pseudos */ body.elementor-editor-active .elementor-section.bda-hero::after{pointer-events:none} /* Elementor's per-element overlay + toolbar