/* =========================================================================
   WSM Cars — Elementor bridge stylesheet
   =========================================================================
   inc/elementor-migrate.php tags every widget/container with the theme's
   EXISTING design-system classes from wsm-cars.css (wsm-h2, wsm-eyebrow,
   wsm-btn, wsm-cols-2, wsm-card-grid, etc.) rather than reinventing
   styling here — that file is the single source of truth for colour,
   spacing and layout, so a class means the same thing everywhere on the
   site regardless of which builder rendered it.

   This file only exists for two narrow reasons:

   1. Elementor puts a WIDGET's own css_classes on its outer wrapper div,
      not on the actual heading/button element one or two levels inside
      it. Most of wsm-cars.css's properties are inheritable so they flow
      down through that wrapper fine — but font-size, font-weight,
      padding, border-radius and display are NOT inherited, and browsers
      set their own defaults for tags like h1/h2/h3 that would otherwise
      win. The rules below re-target those specific properties at the
      actual inner element Elementor renders.

   2. Image Box (used for the S2 car cards) has no existing equivalent
      class in wsm-cars.css, since Gutenberg never needed one — this is
      the one component with genuinely new rules below, matching the
      look of .wsm-card as closely as the widget's own markup allows.

   A handful of rules use !important specifically where Elementor's own
   generated per-element CSS (id-scoped, so higher specificity than a
   plain class) would otherwise win a tie it shouldn't — this is a
   narrow, deliberate use against a third-party plugin's own styles, not
   a general pattern used elsewhere in the theme.
   ========================================================================= */

/* ---- Headings: font-size / font-weight only (colour, font-family and
   margin already come from wsm-cars.css's h1,h2,h3,h4 tag rule, which
   matches the real element directly and needs no help here). ---- */
.wsm-h1 .elementor-heading-title {
	font-size: clamp(56px, 9vw, 96px) !important;
	font-weight: 400 !important;
	letter-spacing: -0.02em;
	line-height: 1.05;
}
.wsm-h2 .elementor-heading-title {
	font-size: clamp(32px, 5vw, 56px) !important;
	font-weight: 400 !important;
	line-height: 1.15;
}
/* Featured card title renders at 36px in the Gutenberg version
   (inline style in wsm_render_highlight_cards), not the full h2 scale. */
.wsm-card--featured .wsm-h2 .elementor-heading-title { font-size: 36px !important; }
/* ...and its description/button carry wsm-mt-24 spacing there. */
.e-con.wsm-card--featured .elementor-widget-text-editor,
.e-con.wsm-card--featured .elementor-widget-button { margin-top: 24px; }

.wsm-h3 .elementor-heading-title {
	font-size: clamp(20px, 3vw, 28px) !important;
	font-weight: 400 !important;
	line-height: 1.3;
}
.wsm-eyebrow .elementor-heading-title {
	font-family: var(--font-body);
	font-size: 12px !important;
	font-weight: 400 !important;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	/* !important: Elementor's per-post CSS loads after this file and its
	   widget-scoped rules would win the specificity tie otherwise. */
	color: var(--green) !important;
	margin: 0 0 16px;
}

/* Hero pill eyebrow (page heroes) — mirrors .wsm-eyebrow-pill in
   wsm-cars.css, retargeted at the heading element Elementor nests
   inside the classed wrapper. */
.wsm-eyebrow-pill .elementor-heading-title {
	display: inline-block;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 4px 16px;
	font-family: var(--font-body);
	font-size: 12px !important;
	font-weight: 400 !important;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	color: var(--text) !important;
	margin: 0 0 24px;
}

/* ---- Links styled as the small green underlined CTA ("Read the Full
   Story" etc.) — built from a Heading widget with header_size 'p' and
   css_classes 'wsm-link', wrapping its own <a>. ---- */
.wsm-link .elementor-heading-title {
	font-size: 13px !important;
	font-weight: 500 !important;
	margin: 0;
}
.wsm-link .elementor-heading-title a {
	display: inline-block;
	border-bottom: 1px solid var(--green);
	color: var(--green);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	padding: 0 0 4px;
	transition: color 0.25s ease, border-color 0.25s ease;
}
.wsm-link .elementor-heading-title a:hover { color: var(--white); border-color: var(--white); }

/* ---- Buttons: typography, padding, corners — colour comes from the
   Style-tab settings already set per button in elementor-migrate.php,
   which target the same element with higher specificity so they're
   unaffected by anything here. ---- */
.wsm-btn .elementor-button {
	display: inline-block !important;
	font-family: var(--font-body);
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	padding: 16px 32px !important;
	border-radius: 0 !important;
}

/* ---- Structural grids/flex rows: force the theme's own column count
   and gap in case an Elementor Container default (id-scoped, so
   normally higher specificity than a plain class) would otherwise win. ---- */
.elementor-element.wsm-cols-2 {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 64px !important;
	align-items: center;
}
.elementor-element.wsm-cols-2--reverse { direction: rtl; }
.elementor-element.wsm-cols-2--reverse > * { direction: ltr; }
@media (max-width: 900px) {
	.elementor-element.wsm-cols-2 { grid-template-columns: 1fr !important; gap: 40px !important; }
}
.elementor-element.wsm-cols-sidebar {
	display: grid !important;
	grid-template-columns: 1fr 320px !important;
	gap: 64px !important;
	align-items: start;
}
@media (max-width: 900px) {
	.elementor-element.wsm-cols-sidebar { grid-template-columns: 1fr !important; gap: 40px !important; }
}
.elementor-element.wsm-photo-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 8px !important;
}
@media (max-width: 768px) {
	.elementor-element.wsm-photo-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
.elementor-element.wsm-card-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 32px !important;
}
@media (max-width: 900px) { .elementor-element.wsm-card-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .elementor-element.wsm-card-grid { grid-template-columns: 1fr !important; } }
.elementor-element.wsm-variant-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 24px !important;
	margin: 32px 0;
}
@media (max-width: 600px) { .elementor-element.wsm-variant-grid { grid-template-columns: 1fr !important; } }
.elementor-element.wsm-spec-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 64px !important;
	margin-top: 40px;
}
@media (max-width: 800px) { .elementor-element.wsm-spec-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
.elementor-element.wsm-chapter {
	display: grid !important;
	grid-template-columns: 220px 1fr !important;
	gap: 56px !important;
	padding: 64px 0 !important;
	border-top: 1px solid var(--border);
}
.elementor-element.wsm-chapter:first-child { border-top: none; padding-top: 0 !important; }
@media (max-width: 800px) {
	.elementor-element.wsm-chapter { grid-template-columns: 1fr !important; gap: 24px !important; }
}
.elementor-element.wsm-flex-ctas,
.elementor-element.wsm-hero__ctas {
	display: flex !important;
	/* Containers default to a COLUMN flex direction via --flex-direction,
	   which stacked the CTA buttons full-width (seen live). The converted
	   pages also set Layout → Direction: Row natively; this covers CTAs
	   rebuilt by hand without that setting. */
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 16px !important;
	justify-content: center;
}
/* Elementor's own `.e-con { text-align: var(--text-align) }` loads after
   the theme stylesheet and beats the theme's centring classes on order,
   so set the variable itself for the centred-section/contact classes. */
.e-con.wsm-section--center,
.e-con.wsm-contact,
.e-con.wsm-text-center,
.e-con.wsm-card--featured {
	--text-align: center;
}
/* Featured card / centred CTA rows: flex children (buttons) must also be
   centred as flex items, not just their text. */
.e-con.wsm-card--featured { align-items: center; }

/* Images placed in the two-column feature layouts and figures: the theme
   upsizes them to fill the column (.wsm-figure img { width: 100% });
   Elementor's Image widget otherwise renders them at natural size. */
.wsm-cols-2 .elementor-widget-image img,
.wsm-cols-sidebar .elementor-widget-image img,
.wsm-figure img,
.elementor-widget-image.wsm-figure img {
	width: 100%;
	height: auto;
}

/* Cropped-cell images (manifest cards, photo grids, circuit cards):
   wsm-cars.css already declares the 4:3 crop (aspect-ratio + object-fit
   + height:100%), but Elementor's own `.elementor-widget-image img
   { height: auto }` ties on specificity and loads later, so the height
   declaration loses and squarish photos rendered uncropped (seen live
   on the WSM 403 manifest card). Re-assert with !important here. */
.elementor-widget-image.wsm-card__image,
.elementor-widget-image.wsm-photo-grid__cell {
	overflow: hidden;
}
.elementor-widget-image.wsm-card__image { aspect-ratio: 4 / 3; }
.elementor-widget-image.wsm-card__image img,
.elementor-widget-image.wsm-photo-grid__cell img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

/* Image captions (Elementor renders figcaption.widget-image-caption):
   match .wsm-figure figcaption from wsm-cars.css. */
.elementor-widget-image .widget-image-caption {
	margin-top: 12px;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
	text-align: left;
}

/* Hero container: full viewport-height, centred content, dark gradient
   already comes from the Style-tab background/background_overlay
   settings in elementor-migrate.php — this just sets the sizing/centring
   that a plain Container doesn't default to. */
.elementor-element.wsm-hero {
	min-height: 90vh !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
	padding: 0 24px !important;
}
.wsm-hero .wsm-eyebrow .elementor-heading-title,
.wsm-hero .wsm-h1 .elementor-heading-title { color: var(--white); }
/* Mirror .wsm-hero__content's 900px cap so long titles (e.g. "Douglas
   Wilson-Spratt") wrap at the same point as the Gutenberg hero. */
.wsm-hero .elementor-widget-heading { max-width: 900px; }

/* ---- Image Box (S2 car cards, spec cards): no existing equivalent
   class, styled here to match .wsm-card's border/background/padding. ---- */
.elementor-widget-image-box.wsm-image-box .elementor-image-box-wrapper {
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.02);
	padding: 24px;
	transition: border-color 0.25s ease;
}
.elementor-widget-image-box.wsm-image-box:hover .elementor-image-box-wrapper {
	border-color: rgba(32, 96, 60, 0.4);
}
.elementor-widget-image-box.wsm-image-box .elementor-image-box-img {
	margin-bottom: 16px;
}
.elementor-widget-image-box.wsm-image-box .elementor-image-box-title {
	font-family: var(--font-display);
	font-size: 20px !important;
	font-weight: 400 !important;
	color: var(--white);
	margin-bottom: 10px;
}
.elementor-widget-image-box.wsm-image-box .elementor-image-box-description {
	color: var(--muted);
	font-size: 14px;
}

/* Raw <img> tags inside the custom widgets (WSM Circuit Grid) and any
   theme-classed figure: Elementor's global `.elementor img{height:auto}`
   ties with and out-orders the theme's crop rules, exactly like the
   Image-widget case above. */
.elementor .wsm-circuit-card img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

/* Listing cards keep their 24px separation (margin comes from
   .wsm-listing in wsm-cars.css but is worth asserting at container
   level since Elementor containers reset margins). */
.e-con.wsm-listing { margin-bottom: 24px; }

/* Manifest cards: the body Container's 24px padding comes from
   .wsm-card__body in wsm-cars.css but loses the cascade tie to
   Elementor's own .e-con padding; restate at higher specificity. */
.e-con.wsm-card__body { padding: 24px; }

/* Badges/status labels are built as <p class="..."> inside a Text
   Editor widget (Gutenberg used <span>), so the theme's generic
   ".wsm-card__body p"/".wsm-listing p" colour rules outrank the badge
   colour. Restore the intended colours at higher specificity. */
.wsm-card__body p.wsm-card__badge { color: var(--green); }
.wsm-listing p.wsm-listing__status--for-sale { color: var(--green); }
.wsm-listing p.wsm-listing__status--sold { color: var(--muted); }

/* Key Dates sidebar (WSM Row List widget, key-dates style): Gutenberg
   nests the heading INSIDE aside.wsm-key-dates, so the theme's
   `.wsm-key-dates h2 { font-size: 20px }` applies; the widget renders
   the heading as a sibling above it, so restate the sizing here. */
.wsm-row-list-block:has(> .wsm-key-dates) > h2 {
	font-size: 20px !important;
	margin-bottom: 12px;
}

/* ---- History chapter labels ("Chapter I — Origins (1962)"): the
   green italic serif styling from .wsm-chapter__label needs re-stating
   at widget level because the kit's global text colour rule targets
   the Text Editor widget directly and wins over inheritance. ---- */
.elementor-widget-text-editor.wsm-chapter__label,
.elementor-widget-text-editor.wsm-chapter__label p {
	font-family: var(--font-display);
	font-style: italic;
	color: var(--green) !important;
	font-size: 15px;
	letter-spacing: 0.5px;
}

/* ---- Contact page ---- */
.elementor-element.wsm-contact { max-width: 640px; margin: 0 auto; text-align: center; }
.elementor-element.wsm-contact__block { margin-bottom: 40px; }

/* =====================================================================
   v3 — Native rebuilds (imported JSON templates, no custom widgets)
   =====================================================================
   The imported page templates rebuild the old WSM Row List, WSM Circuit
   Grid, WSM News Archive and WSM People Directory widgets from native
   Elementor Containers + Text Editor / Heading / Image / Posts widgets,
   reusing the same .wsm-* classes. The rules below (a) restate layout
   that Elementor's own .e-con flex rules would otherwise win, mirroring
   the approach used throughout this file, and (b) map Elementor Pro's
   Posts widget markup onto the news-article / person-card styles. */

/* Text cells inside rebuilt rows/cards: the class sits on the widget
   wrapper, so let the inner <p> inherit everything and drop its margin. */
.elementor-widget.wsm-cellp p { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }

/* Row-list wrappers: rows stack tight, no container padding/gap. */
.e-con.wsm-row-list-block,
.e-con.wsm-row-list-native { flex-direction: column; gap: 0; padding: 0; }

/* Timeline rows (History) */
.e-con.wsm-timeline__row { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 16px 0; }
/* Key dates rows (Douglas sidebar) */
.e-con.wsm-key-dates__row { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 14px 0; }
/* Race results rows (Racing) */
.e-con.wsm-results-row { display: grid; grid-template-columns: 60px 1fr; gap: 16px; padding: 16px 0; }
.e-con.wsm-results-detail { flex-direction: column; gap: 0; padding: 0; }

/* Spec rows (S2 Cars): the old markup used <dt>/<dd>; the rebuilt rows
   carry .wsm-spec-dt / .wsm-spec-dd on the two cells instead. */
.e-con.wsm-spec-row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 16px 0; }
.wsm-spec-list .wsm-spec-dt { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.wsm-spec-list .wsm-spec-dd { color: var(--text); font-size: 15px; }

/* Circuit cards: native Image widget + absolutely-positioned overlay
   container replace the old single custom widget. .wsm-circuit-card img
   sizing/grayscale/hover rules from wsm-cars.css still apply. */
.e-con.wsm-circuit-card { position: relative; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; }
.wsm-circuit-card .elementor-widget-image { position: absolute; inset: 0; }
.wsm-circuit-card .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; }
.e-con.wsm-circuit-card__overlay {
	position: absolute; inset: 0; z-index: 1;
	flex-direction: column; justify-content: flex-end; gap: 0; padding: 20px;
	background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 55%);
}

/* ---------------------------------------------------------------------
   Elementor Pro Posts widget → WSM news / people styling.
   NOTE: written against Pro's documented Classic-skin markup
   (.elementor-posts-container / .elementor-post__title etc.) but not yet
   verified on a live Pro install — if Pro's markup differs, adjust the
   selectors here, not the template JSON. */
.wsm-posts-news .elementor-posts-container { display: flex; flex-direction: column; gap: 24px; }
.wsm-posts-news article.elementor-post {
	border: 1px solid var(--border); border-radius: 2px;
	background: rgba(255, 255, 255, 0.02); padding: 24px;
	transition: border-color 0.2s ease;
}
.wsm-posts-news article.elementor-post:hover { border-color: rgba(32, 96, 60, 0.3); }
.wsm-posts-news .elementor-post__meta-data {
	color: var(--green); font-size: 12px; letter-spacing: 1.6px;
	text-transform: uppercase; margin-bottom: 12px;
}
.wsm-posts-news .elementor-post__title { margin-bottom: 12px; }
.wsm-posts-news .elementor-post__title a { color: var(--white); text-decoration: none; }
.wsm-posts-news .elementor-post__title a:hover { color: var(--green); }
.wsm-posts-news .elementor-post__excerpt p { color: var(--muted); font-size: 14px; margin: 0; }
.wsm-posts-news .elementor-post__read-more { color: var(--green); font-size: 13px; }
.wsm-posts-news .elementor-pagination { margin-top: 40px; }
.wsm-posts-news .elementor-pagination .page-numbers { color: var(--muted); }
.wsm-posts-news .elementor-pagination .page-numbers.current,
.wsm-posts-news .elementor-pagination a.page-numbers:hover { color: var(--green); }

.wsm-posts-people article.elementor-post {
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.02); padding: 24px;
}
.wsm-posts-people .elementor-post__title { margin-bottom: 10px; }
.wsm-posts-people .elementor-post__title a { color: var(--white); text-decoration: none; }
.wsm-posts-people .elementor-post__excerpt p { color: var(--muted); font-size: 14px; margin: 0; }

/* Elementor's text-editor widget rule (color + font-family from the kit)
   loads after the theme, so the theme's cell classes lose those two
   properties when the class sits on the widget wrapper itself. Restate
   each rebuilt cell at widget specificity (verified by computed-style
   probe on the testbed: size survived, family/color did not). */
.elementor-widget.wsm-timeline__year,
.elementor-widget.wsm-key-dates__year,
.elementor-widget.wsm-results-year { font-family: var(--font-display); color: var(--green); }
.elementor-widget.wsm-timeline__year { font-size: 18px; }
.elementor-widget.wsm-key-dates__year,
.elementor-widget.wsm-results-year { font-size: 16px; }
.elementor-widget.wsm-timeline__event { color: var(--text); font-size: 15px; }
.elementor-widget.wsm-key-dates__event { color: var(--text); font-size: 14px; }
.elementor-widget.wsm-results-venue { color: var(--white); font-size: 14px; margin-bottom: 4px !important; } /* !important: widget-spacing rule zeroes bottom margins */
.elementor-widget.wsm-results-outcome { color: var(--muted); font-size: 14px; }
.elementor-widget.wsm-spec-dt { color: var(--muted); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; }
.elementor-widget.wsm-spec-dd { color: var(--text); font-size: 15px; }
.elementor-widget.wsm-circuit-card__name { font-family: var(--font-display); color: var(--white); font-size: 20px; }
.elementor-widget.wsm-circuit-card__country { color: var(--muted); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; margin-top: 4px; }
.elementor-widget.wsm-eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 400; letter-spacing: 1.2px; text-transform: uppercase; color: var(--green); margin: 0 0 16px; }

/* List top margin: .e-con's own margin var wins over the theme's
   .wsm-timeline margin-top; restate. (.wsm-results-list gets no
   restated margin: in the old markup its 8px collapsed into the
   heading's 24px bottom margin, so the visible gap is 24px, which the
   heading rule above already provides. Flex containers don't collapse
   margins, so restating 8px here would overshoot by 8px.) */
.e-con.wsm-timeline { margin-top: 24px; }

/* Elementor's kit widget-spacing rule (.elementor-widget:not(:last-child)
   { margin-block-end: var(--widgets-spacing…) }) zeroes any theme
   margin-BOTTOM class on a widget wrapper (margin-top classes are
   unaffected — confirmed by computed-style probe). The old custom
   widgets rendered these elements as raw markup, so the classes worked.
   Restore the bottom margins only where the rebuilt structures need
   them; !important because the kit CSS loads after this sheet and ties
   on specificity. */
.e-con.wsm-row-list-block > .elementor-widget-heading { margin-bottom: 24px !important; }
.e-con.wsm-media-grid-block .elementor-widget.wsm-eyebrow,
.e-con.wsm-people-header .elementor-widget.wsm-eyebrow { margin-bottom: 16px !important; }
.e-con.wsm-media-grid-block > .e-con.wsm-mb-24 { margin-bottom: 24px !important; }

/* Pixel parity: in the old markup the results outcome was an inline span
   whose line box took the surrounding div's 25.6px line-height; the
   rebuilt block cell computes 22.4px and shaves 3px per row. Restate. */
.elementor-widget.wsm-results-outcome { line-height: 25.6px; }

/* =====================================================================
   v3.1 — Elementor Theme Builder header/footer templates
   =====================================================================
   The header and footer templates reuse the theme's .wsm-nav / 
   .wsm-footer classes on Elementor containers, so most styling comes
   from wsm-cars.css. The rules below restate only what Elementor's own
   .e-con container rules would otherwise win, plus mapping Elementor
   Pro's Nav Menu widget markup onto the old .wsm-nav__links look. */

.e-con.wsm-nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
	height: 80px; padding: 0; max-width: none;
}
/* Push page content below the fixed Elementor header the same way the
   PHP header did (body padding comes from wsm-cars.css already). */
.e-con.wsm-nav__inner {
	flex-direction: row; align-items: center; justify-content: space-between;
	max-width: 1400px; margin: 0 auto; height: 80px; padding: 0 24px; gap: 0;
	width: 100%;
}
.elementor-widget.wsm-nav__logo-cell p { margin: 0; }
.elementor-widget.wsm-nav__logo-cell .wsm-nav__badge { display: inline-flex; }

/* Pro Nav Menu widget → old .wsm-nav__links styling. */
.wsm-nav .elementor-nav-menu { display: flex; align-items: center; gap: 28px; }
.wsm-nav .elementor-nav-menu li { margin: 0; }
.wsm-nav .elementor-nav-menu a.elementor-item {
	font-family: var(--font-body);
	font-size: 13px; font-weight: 500; letter-spacing: 1.4px;
	text-transform: uppercase; color: rgba(235, 232, 224, 0.75);
	transition: color 0.2s ease; white-space: nowrap; padding: 8px 0;
}
/* Kill Pro's pointer underline — the old nav marked the active page with
   colour only. */
.wsm-nav .elementor-item:before,
.wsm-nav .elementor-item:after { display: none !important; }
.wsm-nav .elementor-nav-menu a.elementor-item:hover { color: var(--white); }
.wsm-nav .elementor-nav-menu a.elementor-item-active { color: var(--green); }
/* Mobile toggle + dropdown panel in the theme's colours. */
.wsm-nav .elementor-menu-toggle { color: var(--white); }
.wsm-nav .elementor-menu-toggle:hover { color: var(--green); }
.wsm-nav nav.elementor-nav-menu--dropdown {
	background: rgba(10, 10, 10, 0.97);
	margin-top: 12px;
}
.wsm-nav .elementor-nav-menu--dropdown a {
	font-family: var(--font-body);
	font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase;
	color: rgba(235, 232, 224, 0.85);
}
.wsm-nav .elementor-nav-menu--dropdown a.elementor-item-active { color: var(--green); }

/* Footer template: block container + grid inner, matching .wsm-footer. */
.e-con.wsm-footer { padding: 64px 24px 32px; max-width: none; }
.e-con.wsm-footer__inner {
	display: grid !important;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0; width: 100%;
}
@media (max-width: 700px) {
	.e-con.wsm-footer__inner { grid-template-columns: 1fr !important; gap: 32px; }
	.elementor-widget.wsm-footer__meta { text-align: left; }
}
.elementor-widget.wsm-footer__meta { text-align: right; }
.elementor-widget.wsm-footer__brand p,
.elementor-widget.wsm-footer__contact p,
.elementor-widget.wsm-footer__meta p { margin-top: 0; }