/*
 * Sitewide dark/gold reskin, matching the Google Ads landing page theme.
 * Scoped entirely under body.q-dark-preview so it can be toggled on/off
 * for review before going live sitewide. To launch permanently, the
 * q-dark-preview class is simply always added (see functions.php).
 */

body.q-dark-preview {
	/* ---- Brand base tokens (reuse the landing page's exact dark palette) ---- */
	--qd-ink: #1A1114;
	--qd-ink-2: #211519;
	--qd-ink-3: #2a1b20;
	--qd-text: #f3ece7;
	--qd-text-dim: #cbb9b0;
	--qd-gold: #C8A96B;
	--qd-gold-1: #dcc48c;
	--qd-maroon: #4A0F1D;
	--qd-line: rgba(200,169,107,.25);
	--qd-line-2: rgba(200,169,107,.4);
	--qd-dropdown-bg: #3E0C18;

	/* ---- Theme design-token overrides (sekure theme reads these everywhere) ---- */
	--color-body: var(--qd-text);
	--color-heading: var(--qd-text);
	--body-bg: var(--qd-ink);
	--heading-font-color: var(--qd-text);
	--heading-font-color-hover: var(--qd-gold);
	--meta-font-color: var(--qd-text-dim);
	--meta-font-color-hover: var(--qd-gold);
	--border-color: var(--qd-line);
	--border-color2: var(--qd-line-2);

	/* Header / menu */
	--menu-bg: var(--qd-ink);
	--sticky-bg: var(--qd-ink-2);
	--sticky-hover: var(--qd-gold);
	--sticky-active: var(--qd-gold);
	--ontop-bg: transparent;

	/* Dropdown (mega menu) */
	--dropdown-bg: var(--qd-dropdown-bg);
	--dropdown-regular: #efe4dc;
	--dropdown-hover: var(--qd-gold);
	--dropdown-active: var(--qd-gold);

	/* Page title / inner-page header bar */
	--ptitle-background-color: var(--qd-ink);
	--ptitle-overlay-rgba: rgba(26,17,20,.6);
	--ptitle-breadcrumb-regular: var(--qd-text-dim);
	--ptitle-breadcrumb-hover: var(--qd-gold);
	--ptitle-breadcrumb-active: var(--qd-text-dim);

	/* Links */
	--link-regular-color: var(--qd-gold);
	--link-hover-color: var(--qd-gold-1);
	--link-active-color: var(--qd-gold-1);

	background: var(--qd-ink);
}

/* Elementor's own global color tokens (used directly by most page-builder widgets) */
body.q-dark-preview.elementor-kit-4834,
body.q-dark-preview .elementor-kit-4834 {
	--e-global-color-text: #f3ece7;
}

/* ===== Header ===== */
body.q-dark-preview #cms-header:not(.header-ontop):not(.header-sticky) {
	background: var(--qd-ink);
}
body.q-dark-preview .logo-default img,
body.q-dark-preview .logo-sticky img {
	filter: brightness(0) invert(1);
}

/* ===== Footer ===== */
body.q-dark-preview #cms-footer {
	background: var(--qd-maroon);
	color: var(--qd-text-dim);
}

/* Footer brand mark: the footer's logo/title widget (same "quick contact"
   widget as the header) has no image at all in the markup — only the
   company-name heading. Add the same brand mark used in the header as a
   CSS-only decoration (no content/markup change) via ::before, centered
   above the heading. Scoped to #cms-footer specifically so it doesn't also
   land on the same widget layout used for other page CTAs (e.g. the
   "Call 24HR/7Days" box on industry pages). */
body.q-dark-preview #cms-footer .cms-quick-contact-layout-2 .cms-mainheading {
	position: relative;
}
/* The theme's own footer widget already carries a separate decorative logo
   watermark (.cms-qc-wrap::before, using a JPG with its own solid dark
   square baked into the pixels, since JPGs can't be transparent). It was
   invisible before against the old near-black footer background, and now
   shows up as a mismatched dark box duplicating the clean logo added
   below. Suppress it entirely — the transparent-PNG logo on
   .cms-mainheading::before below is the one that should show. */
body.q-dark-preview #cms-footer .cms-qc-wrap::before {
	content: none !important;
}

body.q-dark-preview #cms-footer .cms-quick-contact-layout-2 .cms-mainheading::before {
	content: "";
	display: block;
	width: 120px;
	height: 115px;
	margin: 0 auto 18px;
	background-image: url('https://qimahsecurityguards.com/wp-content/uploads/2026/05/cropped-a7a380d5-667e-4e06-ab2d-6459553a7be8-Edited.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
body.q-dark-preview #cms-footer a {
	color: var(--qd-text-dim);
}
body.q-dark-preview #cms-footer a:hover {
	color: var(--qd-gold);
}
body.q-dark-preview #cms-footer h3,
body.q-dark-preview #cms-footer h4,
body.q-dark-preview #cms-footer .cms-widget-title {
	color: var(--qd-text);
}

/* ===== Generic "white card" components found across templates ===== */
body.q-dark-preview .cms-howitwork-layout-x .cms-howitwork-item-inner .box-icon {
	background: var(--qd-ink-2);
	border-color: var(--qd-line);
}
@media (max-width:1024px) {
	body.q-dark-preview .cms-howitwork-layout-x .cms-howitwork-item-inner {
		background: var(--qd-ink-2);
	}
}
body.q-dark-preview .cms-link .cms-link-icon:before,
body.q-dark-preview .cms-gal-popup-icon:before,
body.q-dark-preview .cms-team-social span,
body.q-dark-preview .cms-language-switcher .trp-language-switcher:hover .trp-ls-shortcode-language {
	background-color: var(--qd-ink-2);
}
body.q-dark-preview .cms-tabs .cms-tabs-title .cms-tab-title.active .cms-tab-title-count,
body.q-dark-preview .cms-tabs .cms-tabs-title .cms-tab-title:hover .cms-tab-title-count {
	background-color: var(--qd-gold);
	color: var(--qd-ink);
}

/* ===== Accordion / FAQ ===== */
body.q-dark-preview .cms-accordion-item {
	background: var(--qd-ink-2);
	border-color: var(--qd-line);
}
body.q-dark-preview .cms-accordion-title {
	color: var(--qd-text);
}
body.q-dark-preview .cms-accordion-content {
	color: var(--qd-text-dim);
}

/* ===== Boxed/cms-box components ===== */
body.q-dark-preview .cms-box {
	background: var(--qd-ink-2);
	border-color: var(--qd-line);
}

/* ===== Forms (contact / quote forms sitewide, not just the ads landing page) ===== */
body.q-dark-preview input:not([type="checkbox"]):not([type="radio"]),
body.q-dark-preview select,
body.q-dark-preview textarea {
	background: var(--qd-ink-2) !important;
	color: var(--qd-text) !important;
	border-color: var(--qd-line) !important;
}
body.q-dark-preview input:not([type="checkbox"]):not([type="radio"]):focus,
body.q-dark-preview select:focus,
body.q-dark-preview textarea:focus {
	background: var(--qd-ink-2) !important;
	color: var(--qd-text) !important;
	box-shadow: none !important;
	border-color: var(--qd-gold) !important;
}

/* ===== Buttons ===== */
body.q-dark-preview .cms-btn-fill,
body.q-dark-preview .elementor-button {
	background: var(--qd-gold) !important;
	color: var(--qd-ink) !important;
}
body.q-dark-preview .cms-btn-outline {
	border-color: var(--qd-gold) !important;
	color: var(--qd-gold) !important;
	background: transparent !important;
}

/* ===== Mobile responsiveness fixes (preview-scoped, presentation-only) ===== */
/* Prevent page-wide horizontal scroll on mobile. A pre-existing Swiper
   carousel ("How It Works" slider) renders with overflow:visible sitewide
   (present on the live site too, not introduced by this reskin), which lets
   its off-screen slides push the whole page wider than the viewport. */
body.q-dark-preview {
	overflow-x: hidden;
}
body.q-dark-preview .cms-swiper-container {
	overflow: hidden !important;
}


/* "Back To Top" button: currently sits inline in the footer's normal content
   flow (centered, full-width row below the footer columns) instead of
   floating as a corner button. Make it a fixed floating button in the
   bottom-right corner instead, lifted above the sticky Call/WhatsApp bar
   (.qdmb, 85px tall) so it doesn't overlap. */
body.q-dark-preview .elementor-widget-cms_anchor .cms-anchor {
	position: fixed !important;
	bottom: 100px;
	right: 24px;
	left: auto !important;
	z-index: 999;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

/* ===== WhatsApp / floating widgets stay as-is (already brand-colored) ===== */


/* ===== Eyebrow/overline headings and icon-box titles use the maroon 'primary'
   color as TEXT, which is unreadable on a dark background (it worked fine as
   an accent on the old white background). Redirect just the text usages to
   gold, without touching the icon-circle backgrounds that still use maroon
   and look fine there. ===== */
body.q-dark-preview .cms-mainheading {
	color: var(--qd-gold) !important;
}
body.q-dark-preview .elementor-widget-icon-box .elementor-icon-box-title,
body.q-dark-preview .elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
body.q-dark-preview .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title {
	color: var(--qd-text) !important;
}
body.q-dark-preview .elementor-counter-number-wrapper {
	color: var(--qd-gold) !important;
}


/* ===== Homepage (post 32): explicit white Elementor section backgrounds.
   These are per-page design choices in Elementor (not theme variables), so
   each page that gets this reskin needs its own white sections identified
   and listed here the same way. ===== */
body.q-dark-preview .elementor-element-b1f18bf,
body.q-dark-preview .elementor-element-238ec1a,
body.q-dark-preview .elementor-element-5fc82fb,
body.q-dark-preview .elementor-element-bb75783,
body.q-dark-preview .elementor-element-a6cc89a {
	background-color: var(--qd-ink-2) !important;
}


/* ===== Width: match the Google Ads landing page's content width (1160px)
   instead of the theme's wider default boxed width, sitewide. ===== */
body.q-dark-preview .elementor-section-boxed > .elementor-container,
body.q-dark-preview .e-con-inner {
	max-width: 1160px !important;
}

/* ===== More dark-on-dark text found on the homepage: the theme's own
   "accent" color token (separate from Elementor's gold accent) is a dark
   maroon, used as TEXT by some subheadings — fine on the old white
   background, invisible on the new dark one. Redirect only the text usage
   to gold; backgrounds/buttons using this same maroon stay untouched since
   they already read fine (white text on maroon). ===== */
body.q-dark-preview .text-accent {
	color: var(--qd-gold) !important;
}
body.q-dark-preview .text-secondary {
	/* The theme's "secondary" color token is itself a near-black (#1A1114),
	   same as our ink background — text using it as a color literally
	   disappears now that the page background is also dark. */
	color: var(--qd-text) !important;
}

/* ===== Footer logo: the real sitewide footer's first column never had an
   image logo (unlike the Google Ads landing page's custom footer). Add the
   same existing logo image purely via CSS (no content/markup change) above
   the column's heading, matching the landing page's footer look. ===== */
body.q-dark-preview #cms-footer #ft1 .cms-qc-wrap::before {
	content: "";
	display: block;
	width: 84px;
	height: 84px;
	margin: 0 auto 18px;
	background-image: url("https://qimahsecurityguards.com/wp-content/uploads/2026/09/qimah-gold-emblem-logo-footer.jpg");
	background-size: cover;
	background-position: center;
	border-radius: 10px;
}
body.q-dark-preview #cms-footer #ft1 .cms-qc-inner {
	text-align: center;
}
body.q-dark-preview #cms-footer #ft1 .cms-qc-lists {
	text-align: start;
}

/* ===== Another nested hardcoded-white container (gallery/swiper widget
   wrapper), found inside an otherwise already-dark section. Same per-widget
   white-background pattern as the homepage sections above. ===== */
body.q-dark-preview .e-swiper-container {
	background: transparent !important;
}

/* ===== Raw pasted WYSIWYG content (Elementor "Text Editor" widgets) often
   carries inline colors from the original paste (e.g. style="color:#000000"
   on spans), which beats our theme-variable overrides since inline styles
   outrank non-!important stylesheet rules. Force all such widget text to
   the light theme color; links keep their own gold treatment so they stay
   visually distinct. ===== */
body.q-dark-preview .elementor-widget-text-editor,
body.q-dark-preview .elementor-widget-text-editor *:not(a) {
	color: var(--qd-text) !important;
}
body.q-dark-preview .elementor-widget-text-editor a {
	color: var(--qd-gold) !important;
}

/* ===== More per-widget hardcoded/global-maroon-as-text and Elementor-default-
   black text, found deeper in the homepage content (checklists, icon-box
   descriptions). Same pattern as the other text-color fixes above. ===== */
body.q-dark-preview .cms-list-title {
	color: var(--qd-text) !important;
}
body.q-dark-preview .elementor-icon-box-description {
	color: var(--qd-text) !important;
}

/* ===== Another explicit "white background" utility class (distinct from the
   per-ID white sections found earlier), used on a pricing/solutions panel.
   Same fix: make it dark in preview. ===== */
body.q-dark-preview .bg-white {
	background-color: var(--qd-ink-2) !important;
}

/* ===== Form placeholder text: our input color override above sets the
   TYPED text color, but placeholder text is a separate pseudo-element that
   needs its own rule, otherwise it stays dark-on-dark until the visitor
   starts typing. ===== */
body.q-dark-preview input::placeholder,
body.q-dark-preview textarea::placeholder {
	color: var(--qd-text-dim) !important;
	opacity: 1 !important;
}

/* ===== More hardcoded per-widget text colors (same pattern as the white-
   section-background issue above): these were chosen as dark colors for the
   old white background and are unreadable on the new dark background.
   CSS-only color fixes — no content, text or links touched. ===== */
body.q-dark-preview .elementor-counter-title,
body.q-dark-preview .elementor-counter-number {
	color: var(--qd-text) !important;
}
body.q-dark-preview .text-custom {
	color: var(--qd-text) !important;
}
body.q-dark-preview .elementor-image-box-title {
	color: var(--qd-text) !important;
}
body.q-dark-preview .cms-ac-title-text {
	color: var(--qd-gold) !important;
}
body.q-dark-preview .cms-ac-content {
	color: var(--qd-text-dim) !important;
}

/* ===== Header CTA button: uses a literal "white background" utility class
   chosen for the old light header, which disappears on the new dark header.
   Recolor to the same gold treatment as the landing page's buttons. ===== */
body.q-dark-preview .btn.btn-white,
body.q-dark-preview .h-btn.btn-white {
	background: var(--qd-gold) !important;
	color: var(--qd-ink) !important;
}

/* ===== Sitewide footer (#cms-footer): restyle to the same maroon/gold
   two-tone look as the Google Ads landing page's own footer, reusing the
   footer's existing real content, links and structure as-is — presentation
   only, nothing added or removed. ===== */
body.q-dark-preview #cms-footer .bg-161616 {
	background: var(--qd-dropdown-bg) !important;
}
body.q-dark-preview #cms-footer .bg-secondary {
	background: var(--qd-gold) !important;
}
body.q-dark-preview #cms-footer .bg-secondary,
body.q-dark-preview #cms-footer .bg-secondary * {
	color: var(--qd-ink) !important;
}
body.q-dark-preview #cms-footer .elementor-section:last-of-type {
	background: var(--qd-ink-2) !important;
}
body.q-dark-preview #cms-footer .cms-icon.text-primary,
body.q-dark-preview #cms-footer svg.text-primary {
	color: var(--qd-gold) !important;
	fill: var(--qd-gold) !important;
}
body.q-dark-preview #cms-footer .cms-copyright-text {
	color: var(--qd-text-dim) !important;
}

/* ===================================================================
   SITEWIDE TEMPLATE PASS (location / industry / service pages, blog,
   and the one-off inner pages) — found via a systematic QA sweep of
   one representative page per template, same method used for the
   homepage above. These templates reuse different Elementor widgets
   than the homepage, so they need their own fixes; all are class-based
   (not per-page IDs) so a single rule here covers every page sharing
   that template, instead of listing pages one at a time.
   =================================================================== */

/* Inner-page sections/containers carry an explicit white background set
   per-page in Elementor (unlike the homepage's handful of per-ID
   sections, these repeat across dozens of location/industry/service
   pages). Default any plain section/container to the dark page
   background. The theme's own "cms-boxed-bg-true" marker identifies an
   intentionally colored/boxed section (e.g. the gold CTA bands) — those
   are explicitly excluded so their own color shows through untouched. */
body.q-dark-preview .elementor-section.cms-boxed-bg-false,
body.q-dark-preview .e-con.e-con-boxed.e-parent {
	background-color: var(--qd-ink) !important;
}
body.q-dark-preview .elementor-widget-wrap.elementor-element-populated {
	background-color: var(--qd-ink) !important;
}
/* ...but keep it transparent inside an intentionally-colored section, so
   that section's own background (e.g. gold) shows through instead of a
   dark box sitting on top of it. */
body.q-dark-preview .cms-boxed-bg-true .elementor-widget-wrap.elementor-element-populated {
	background-color: transparent !important;
}

/* Same dark-utility class found in the footer earlier, also used outside
   it on inner pages (previously only handled inside #cms-footer). */
body.q-dark-preview .bg-161616 {
	background-color: var(--qd-ink-2) !important;
}

/* Elementor's own heading widget, with the theme's maroon "secondary"
   token set directly as its text color on inner pages (e.g. the city-name
   H1 on location pages) — same invisible-on-dark problem as .text-secondary
   above, just on a different widget. Inside a gold/boxed section the dark
   ink color is correct (good contrast on gold), so it's preserved there. */
body.q-dark-preview .elementor-heading-title {
	color: var(--qd-text) !important;
}
/* "cms-boxed-bg-true" only means "this section has an intentional custom
   background" — that background is sometimes gold, sometimes another dark
   color, so it can't be used alone to decide the text should flip to ink.
   Scope the ink exception to the specific gold-marked contexts instead. */
body.q-dark-preview .bg-secondary .elementor-heading-title {
	color: var(--qd-ink) !important;
}

/* A second, parallel button system ("btn btn-outline"/"btn btn-fill") used
   on location/industry/service page sliders and CTAs, distinct from the
   "cms-btn-*" classes already handled above. The outline variant uses
   maroon text with a transparent fill — fine on the old white background,
   invisible on the new dark one. Match the same gold-outline treatment. */
body.q-dark-preview .btn.btn-outline {
	border-color: var(--qd-gold) !important;
	color: var(--qd-gold) !important;
	background: transparent !important;
}

/* "Commitment" table widget (seen on location pages): each cell's text has
   its own light-gray chip background, fine on the old white page, nearly
   invisible now that the text itself was already recolored light by the
   rules above. Match the page's dark panel color instead of light gray. */
body.q-dark-preview .cmm-text {
	background-color: var(--qd-ink-2) !important;
}

/* Industry/service pages: a "quick contact" card widget keeps its own gold
   background (.cms-qc-wrap, same gold as .bg-secondary/.cms-boxed-bg-true
   sections). Our earlier .cms-mainheading{color:gold} fix (for the maroon
   eyebrow text elsewhere) backfires here — gold text on a gold card is
   invisible. Inside any of these gold contexts, use dark ink text instead,
   which is the same high-contrast treatment already used on gold buttons. */
body.q-dark-preview .bg-secondary .cms-mainheading {
	color: var(--qd-ink) !important;
}
/* ".cms-quick-contact-layout-3" LOOKS like a solid gold card from its own
   background-color, but it always carries two full-card overlay layers on
   top of that — a 90%-opacity maroon ::before, then a green ::after
   gradient — so what's actually visible is a dark maroon-to-green card,
   not gold. Light text (the card's original design) is correct here; ink
   text (tried above, assuming solid gold) is unreadable against the
   maroon portion. Buttons inside the card (e.g. "Get Started Now") keep
   their own solid gold fill on top of the overlay, so they're excluded and
   keep their separate ink-text button rule. */
body.q-dark-preview .cms-quick-contact-layout-3,
body.q-dark-preview .cms-quick-contact-layout-3 *:not(.btn):not(.btn *) {
	color: var(--qd-text) !important;
}
/* The same "quick contact" widget also appears in a plain transparent layout
   (cms-quick-contact-layout-2) — used for the footer's logo/title block, and
   elsewhere — which sits directly on the dark page background, not gold. The
   rule above only targets the gold card (layout-3); this one keeps the
   layout-2 heading (e.g. the "Qimah Security Guards" footer title) light and
   readable against the dark background instead. */
body.q-dark-preview .cms-quick-contact-layout-2 .cms-mainheading {
	color: var(--qd-text) !important;
}

/* Chart/graph widget item labels (industry pages) inherit the theme's plain
   default text color, which was never overridden for the dark background. */
body.q-dark-preview .cms-chart-item-title {
	color: var(--qd-text) !important;
}

/* Contact-form banner heading ("Request A Quote" on industry/service pages)
   uses a ".text-heading" utility class set directly to the theme's dark ink
   color, rather than inheriting the --heading-font-color variable we already
   redirected to light text above. */
body.q-dark-preview .text-heading {
	color: var(--qd-text) !important;
}

/* Blog posts: the native WordPress post body (output by the_content(), not
   an Elementor widget) was never covered by the Elementor-specific text-
   color fixes above — it inherits the theme's plain dark default text. */
body.q-dark-preview .cms-post-content,
body.q-dark-preview .cms-post-content *:not(a) {
	color: var(--qd-text) !important;
}
body.q-dark-preview .cms-post-content a {
	color: var(--qd-gold) !important;
}

/* Blog sidebar widgets (Recent Posts, Categories, Search, etc.) keep their
   own white card background from the old light design. */
body.q-dark-preview .cms-widget {
	background-color: var(--qd-ink-2) !important;
}

/* Recent/related-post card excerpts (seen on about-us and other pages that
   embed a post carousel) — same plain-default-text pattern as the blog post
   body above, on a different widget. */
body.q-dark-preview .cms-post-excerpt {
	color: var(--qd-text) !important;
}

/* A link-specific "accent" utility (distinct from the already-fixed
   .text-accent, which is for non-link text) — post-author links, etc. —
   uses the same unreadable maroon-as-text pattern. */
body.q-dark-preview .link-accent,
body.q-dark-preview a.link-accent,
body.q-dark-preview .link-accent a {
	color: var(--qd-gold) !important;
}

/* Tabs widget body copy (FAQs page "Tabs" layout content panels) — plain
   default dark text, same pattern as the other raw-content fixes above. */
body.q-dark-preview .content-text,
body.q-dark-preview .content-text *:not(a) {
	color: var(--qd-text) !important;
}
body.q-dark-preview .content-text a {
	color: var(--qd-gold) !important;
}

/* Plain WordPress pages rendered without Elementor (e.g. Case Studies) —
   same native-content pattern as blog posts (.cms-post-content) above, just
   under the page wrapper class instead of the post one. */
body.q-dark-preview .cms-single-page,
body.q-dark-preview .cms-single-page *:not(a) {
	color: var(--qd-text) !important;
}
body.q-dark-preview .cms-single-page a {
	color: var(--qd-gold) !important;
}

/* Blog listing pagination ("page-numbers"): the current page and the link
   numbers already use maroon/gold from the live theme vars and are fine,
   but the "…" ellipsis span between page numbers keeps the plain default
   dark text color, invisible against the dark page background. */
body.q-dark-preview .page-numbers.dots {
	color: var(--qd-text-dim) !important;
}

/* A third, separate button system ("btn btn-fill", with a "btn-accent" color
   modifier) used by the footer's "Get A Free Quote" button — distinct from
   both "cms-btn-fill" and the plain "btn btn-outline" already handled above.
   It currently renders dark maroon-on-dark-pink (low contrast); match it to
   the same solid gold-fill / dark-ink-text treatment used by the other two
   button systems, which is also what the reference design shows. */
body.q-dark-preview .btn.btn-fill {
	background: var(--qd-gold) !important;
	border-color: var(--qd-gold) !important;
	color: var(--qd-ink) !important;
}

/* Footer: the inner Elementor section/container/widget-wrap elements were
   each picking up whichever generic section-background rule happened to
   win the cascade for their particular combination of classes, landing on
   a slightly different dark shade than the footer's own background. That
   produced a visibly darker rectangular patch inside part of the footer
   instead of one even tone. #cms-footer already sets its own intentional
   background, so force everything nested inside it back to transparent
   (ID-scoped selector, so it reliably wins over the plain-class rules
   above regardless of source order) and let that single background show
   through uniformly across the whole footer. */
body.q-dark-preview #cms-footer .elementor-section,
body.q-dark-preview #cms-footer .e-con,
body.q-dark-preview #cms-footer .elementor-widget-wrap.elementor-element-populated,
body.q-dark-preview #cms-footer .bg-161616 {
	background-color: transparent !important;
}


/* Areas Served mega dropdown: one column per region (desktop) */
@media (min-width:992px){
#cms-primary-menu > li.menu-item-5178 { position:relative; }
#cms-primary-menu > li.menu-item-5178 > .sub-menu{
  display:grid; grid-template-columns:repeat(5,minmax(150px,1fr)); column-gap:34px; row-gap:6px;
  width:min(1020px,94vw); padding:30px 38px 24px; box-sizing:border-box;\n  position:fixed; left:50%; right:auto; transform:translateX(-50%); top:var(--header-height,110px);
}
[dir="rtl"] #cms-primary-menu > li.menu-item-5178 > .sub-menu{ right:auto; left:50%; }
#cms-primary-menu > li.menu-item-5178:hover > .sub-menu{ top:var(--header-height,110px); }
#cms-primary-menu > li.menu-item-5178 > .sub-menu > li{ padding:0; min-width:0; }
#cms-primary-menu > li.menu-item-5178 .sub-menu .sub-menu{
  position:static; width:auto; display:block; visibility:visible; opacity:1; padding:0; margin:8px 0 0;
  box-shadow:none; background:transparent; border:0; transform:none; z-index:auto;
}
#cms-primary-menu > li.menu-item-5178 .sub-menu .sub-menu li{ padding:0; }
#cms-primary-menu > li.menu-item-5178 .sub-menu li:hover > .sub-menu{ top:auto; }
#cms-primary-menu > li.menu-item-5178 li.q-region > .cms-parent-menu-icon{ display:none; }
#cms-primary-menu > li.menu-item-5178 li.q-region > a{
  pointer-events:none; cursor:default; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px;
  color:var(--dropdown-hover,#c9a24a); border-bottom:1px solid var(--border-color,rgba(255,255,255,.15)); padding:0 0 10px; margin-bottom:4px;
}
#cms-primary-menu > li.menu-item-5178 li.q-region > a:before, #cms-primary-menu > li.menu-item-5178 li.q-region > a:after{ display:none; }
#cms-primary-menu > li.menu-item-5178 li.q-region .sub-menu a:before{ display:none; }
#cms-primary-menu > li.menu-item-5178 li.q-region .sub-menu a{ padding:6px 0; border-bottom:0; }
#cms-primary-menu > li.menu-item-5178 li.q-region:last-child{ grid-column:1 / -1; margin-top:10px; padding-top:14px; border-top:1px solid var(--border-color,rgba(255,255,255,.15)); }
#cms-primary-menu > li.menu-item-5178 li.q-region:last-child > .sub-menu{ display:flex; gap:34px; flex-wrap:wrap; margin-top:4px; }
#cms-primary-menu > li.menu-item-5178 li.q-region:last-child > .sub-menu > li{ flex:0 0 auto; width:auto; max-width:none; }
}
/* Mobile: region headings toggle natively (accordion) */
@media (max-width:991px){
.cms-primary-menu li.q-region > a{ font-weight:700; }
}