/* =============================================================
   WTD Custom Elements — Frontend CSS Overrides
   =============================================================
   Critical fixes for Elementor v4 atomic widgets + WTD Global
   Classes. Lives in the plugin (not the theme) so it survives
   theme updates / re-installs on sites without a child theme.
   ============================================================= */


/* -------------------------------------------------------------
   1. e-button-base background reset
   -------------------------------------------------------------
   Elementor v4's e-button-base ships a default
       background-image: linear-gradient(#375EFB, #375EFB)
   (the blue Elementor accent color). This overrides Global Class
   backgrounds set via the wtd-btn-* variants because v4 generates
   .wtd-btn AFTER the entity variants in global-frontend-desktop.css
   regardless of the kit's class order array.

   Resetting BOTH background and background-image with !important
   lets the Global Class variants (.wtd-btn-anchorage, etc.) win
   via their own background-image rule.
   -------------------------------------------------------------- */
.elementor .e-button-base {
	background: transparent !important;
	background-image: none !important;
}


/* -------------------------------------------------------------
   2. wtd-stat-cell-unit baseline alignment
   -------------------------------------------------------------
   Stat values are large slab-serif numbers (e.g. 28-32 px),
   units are small sans-serif text (e.g. 14-15 px). Default
   inline baseline-alignment makes the unit float visually
   "high" relative to the big number. Centering middle reads
   as a unified score (e.g. "4.0/5").

   vertical-align isn't in the v4 Style Schema so it can't be
   added via the Global Class — has to live in CSS.
   -------------------------------------------------------------- */
.elementor .wtd-stat-cell-unit {
	vertical-align: middle;
}


/* -------------------------------------------------------------
   3. Hero image — fill + focal point control
   -------------------------------------------------------------
   The hero container (.wtd-hero) is sized via Elementor (height
   set per-element on the e-div-block). The image inside should
   fill that container completely, preserve aspect ratio, and
   anchor its focal point to bottom-center — so when the
   container is shorter than the image, the waterline / boat /
   shoreline survives the crop instead of the sky getting most
   of the visible area.

   Targets any <img> descendant so it works for both legacy v3
   image widgets AND v4 e-image widgets without per-widget config.
   -------------------------------------------------------------- */
.elementor .wtd-hero {
	position: relative;
	overflow: hidden;
}

.elementor .wtd-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	display: block;
}


/* -------------------------------------------------------------
   4. Bullet / numbered lists from Voxel dynamic content
   -------------------------------------------------------------
   Voxel content fields (e.g. anchorage-approach-hazards) render
   raw HTML stored on the post — typically WYSIWYG output with
   bare <ul>/<ol>/<li> tags (no class attributes).

   IMPORTANT: when these <ul> tags appear inside an <p> wrapper
   (which Elementor v4's e-paragraph widget produces), the BROWSER
   auto-closes the <p> at the <ul> because <ul> is block-level and
   invalid inside <p>. The <ul> ends up as a SIBLING of the closed
   <p>, not a descendant — so descendant selectors don't match.

   We target by class-less ul/ol instead: Elementor's own nav-menu,
   icon-list, etc. all use classed <ul> elements, so "ul:not([class])"
   isolates the WYSIWYG content lists without touching UI lists.
   -------------------------------------------------------------- */
.elementor ul:not([class]),
.elementor ol:not([class]) {
	margin: 0.75em 0 1.25em;
	padding-left: 1.5em;
}

.elementor ul:not([class]) {
	list-style: disc;
}

.elementor ol:not([class]) {
	list-style: decimal;
}

.elementor ul:not([class]) li,
.elementor ol:not([class]) li {
	margin-bottom: 0.5em;
	line-height: 1.5;
}

.elementor ul:not([class]) li:last-child,
.elementor ol:not([class]) li:last-child {
	margin-bottom: 0;
}