/* ==========================================================================
   BCW Desktop Menu
   Handles mega-menu panel layout, positioning, and open/close animations.
   All colors, typography, and spacing are controlled via Elementor controls.
   ========================================================================== */

/* Hide on mobile — mobile menu widget takes over below 768px */
@media (max-width: 767px) {
	.bcw-desktop-menu {
		display: none !important;
	}
}

/*
 * Elementor wraps widgets in containers that can have overflow:hidden set by
 * the builder. We need to override that on any ancestor between the widget
 * root (.elementor-widget-bcw-desktop-menu) and the viewport so the panel
 * can visually break out below the nav bar.
 */
.elementor-widget-bcw-desktop-menu,
.elementor-widget-bcw-desktop-menu .elementor-widget-container {
	overflow: visible !important;
}

/* --------------------------------------------------------------------------
   Nav bar
   -------------------------------------------------------------------------- */

.bcw-dm__nav {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

/* --------------------------------------------------------------------------
   Nav items
   -------------------------------------------------------------------------- */

.bcw-dm__item {
	position: relative; /* simple-list panels anchor here */
}

/* Mega panel items (taxonomy-columns / image-cards) break out of item
   and anchor to the .bcw-desktop-menu wrapper instead */
.bcw-dm__item--mega {
	position: static;
}

.bcw-dm__nav-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	/* transition-property / duration / easing set by Elementor controls */
	transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* --------------------------------------------------------------------------
   Panel — shared base
   -------------------------------------------------------------------------- */

.bcw-desktop-menu {
	position: relative; /* kept for other descendants that may need it */
}

.bcw-dm__panel {
	/* position:fixed parks panels relative to the viewport, so they never
	 * contribute to the document's scroll width regardless of content size.
	 * JS sets top/left/width when opening; on close those inline styles are
	 * cleared and the panel returns to this off-screen default. */
	position: fixed;
	top: -9999px;
	left: -9999px;
	right: auto;
	z-index: 10001;
	background-color: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

	/* Hidden state */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.bcw-dm__panel-inner {
	display: block;
}

/* --------------------------------------------------------------------------
   Animation variants (set via panel_animation control → class on <nav>)
   -------------------------------------------------------------------------- */

/* Slide down + fade (default) */
.bcw-dm--anim-slide .bcw-dm__panel {
	transform: translateY(-6px);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.bcw-dm--anim-slide .bcw-dm__item--has-panel.is-open > .bcw-dm__panel,
.bcw-dm--anim-slide .bcw-dm__item--has-panel.is-entering > .bcw-dm__panel {
	transform: translateY(0);
}

/* Fade only */
.bcw-dm--anim-fade .bcw-dm__panel {
	transform: none;
	transition: opacity 0.22s ease, visibility 0.22s;
}

/* None */
.bcw-dm--anim-none .bcw-dm__panel {
	transform: none;
	transition: none;
}

/* Open state — JS adds is-open to <li> after positionPanel() has already
   set position:fixed + coordinates.  is-entering is added on mouseenter
   (before the 80ms intent delay) so the panel is visible immediately after
   JS positions it — CSS :hover is not used, which prevents the flash where
   a parked cursor at page load would show an unpositioned panel. */
.bcw-dm__item--has-panel.is-open > .bcw-dm__panel,
.bcw-dm__item--has-panel.is-entering > .bcw-dm__panel,
.bcw-dm__panel--open {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

.bcw-dm--anim-slide .bcw-dm__panel--open {
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Simple list panel  — anchors to individual <li>
   -------------------------------------------------------------------------- */

.bcw-dm__panel--simple-list {
	min-width: 200px;
}

.bcw-dm__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bcw-dm__list-item {
	margin: 0;
	padding: 0;
}

.bcw-dm__list a {
	display: block;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* --------------------------------------------------------------------------
   Mega panels  (taxonomy-columns / image-cards) — full widget width
   -------------------------------------------------------------------------- */

/* Mega panels: JS sets left/width on open; no static rules needed here. */

.bcw-dm__panel--taxonomy-columns,
.bcw-dm__panel--image-cards {
	/* intentionally empty — positioning handled entirely by JS */
}

/* --------------------------------------------------------------------------
   Taxonomy columns panel
   -------------------------------------------------------------------------- */

.bcw-dm__columns {
	display: flex;
	flex-wrap: nowrap;
	gap: 32px;
}

.bcw-dm__column {
	flex: 1 1 0;
	min-width: 0;
}

.bcw-dm__col-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.bcw-dm__col-icon-wrap svg {
	display: block;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	transition: color 0.2s ease;
}

.bcw-dm__col-heading {
	display: block;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.bcw-dm__col-links {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bcw-dm__col-links li {
	margin: 0;
	padding: 0;
}

.bcw-dm__col-links a {
	display: block;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bcw-dm__col-links a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Image cards panel
   -------------------------------------------------------------------------- */

.bcw-dm__cards {
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
}

.bcw-dm__card {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bcw-dm__card-img-wrap {
	position: relative;
	width: 100%;
	padding-bottom: 65%; /* default aspect ratio — overridden by Elementor control */
	overflow: hidden;
	margin-bottom: 0;
	background: #f0f0f0;
}

.bcw-dm__card-img-wrap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.bcw-dm__card:hover .bcw-dm__card-img-wrap img {
	transform: scale(1.03);
}

.bcw-dm__card-img-overlay {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.bcw-dm__card:hover .bcw-dm__card-img-overlay {
	opacity: 1; /* overridden by Elementor card_overlay_opacity control */
}

.bcw-dm__card-label {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
}

/* card-arrow removed – replaced by bcw-dm__svg-arrow-wrap */

/* --------------------------------------------------------------------------
   See All link
   -------------------------------------------------------------------------- */

.bcw-dm__see-all {
	margin-top: 16px;
	/* border-top is added by Elementor when the "Show Border Top" toggle is ON */
	padding: 12px 0 0;
}

.bcw-dm__see-all--no-border {
	border-top: none;
}

.bcw-dm__see-all a {
	display: inline-flex;
	align-items: center;
	gap: 8px; /* default — overridden by Elementor icon gap control */
	text-decoration: none;
	transition: color 0.2s ease;
}

/* --------------------------------------------------------------------------
   See All — icons
   -------------------------------------------------------------------------- */

/* Wrapper keeps normal + hover icons stacked so hover icon can overlay */
.bcw-dm__see-all-icons {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.bcw-dm__see-all-icon {
	display: block;
	width: 20px;  /* default — overridden by Elementor icon size control */
	height: 20px;
	object-fit: contain;
}

/* Hover icon sits on top of normal icon; starts invisible */
.bcw-dm__see-all-icon--normal {
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.bcw-dm__see-all-icon--hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.22s ease;
}

/* ── Animation: Fade Swap ──────────────────────────────────────────────── */
/* Normal fades out, hover icon fades in */
.bcw-dm__see-all--anim-fade-swap a:hover .bcw-dm__see-all-icon--normal,
.bcw-dm__see-all--anim-fade-swap a:focus .bcw-dm__see-all-icon--normal {
	opacity: 0;
}
.bcw-dm__see-all--anim-fade-swap a:hover .bcw-dm__see-all-icon--hover,
.bcw-dm__see-all--anim-fade-swap a:focus .bcw-dm__see-all-icon--hover {
	opacity: 1;
}

/* ── Animation: Slide Right ────────────────────────────────────────────── */
/* Normal icon slides right; hover icon fades in at original position */
.bcw-dm__see-all--anim-slide-right a:hover .bcw-dm__see-all-icon--normal,
.bcw-dm__see-all--anim-slide-right a:focus .bcw-dm__see-all-icon--normal {
	transform: translateX(5px);
}
.bcw-dm__see-all--anim-slide-right a:hover .bcw-dm__see-all-icon--hover,
.bcw-dm__see-all--anim-slide-right a:focus .bcw-dm__see-all-icon--hover {
	opacity: 1;
}

/* ── Animation: Bounce Right ───────────────────────────────────────────── */
@keyframes bcw-dm-bounce-right {
	0%   { transform: translateX(0); }
	35%  { transform: translateX(7px); }
	65%  { transform: translateX(2px); }
	85%  { transform: translateX(5px); }
	100% { transform: translateX(0); }
}
.bcw-dm__see-all--anim-bounce-right a:hover .bcw-dm__see-all-icon--normal,
.bcw-dm__see-all--anim-bounce-right a:focus .bcw-dm__see-all-icon--normal {
	animation: bcw-dm-bounce-right 0.5s ease;
}
.bcw-dm__see-all--anim-bounce-right a:hover .bcw-dm__see-all-icon--hover,
.bcw-dm__see-all--anim-bounce-right a:focus .bcw-dm__see-all-icon--hover {
	opacity: 1;
	transition-delay: 0.08s;
}

/* ==========================================================================
   v1.21.5 additions
   ========================================================================== */

/* --------------------------------------------------------------------------
   Gap bridge — ::before pseudo-element covers the panel_top_offset gap so
   the mouse can travel from the nav bar to the panel without triggering
   mouseleave on <li>. JS sets --bcw-panel-gap on the panel element.
   -------------------------------------------------------------------------- */

.bcw-dm__panel::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: var(--bcw-panel-gap, 0px);
}

/* --------------------------------------------------------------------------
   Per-panel alignment classes (JS sets exact position:fixed coords;
   these classes serve as CSS fallbacks before JS runs)
   -------------------------------------------------------------------------- */

.bcw-dm__panel--align-trigger-right,
.bcw-dm__panel--align-page-right {
	left: auto;
	right: 0;
}

.bcw-dm__panel--align-trigger-center,
.bcw-dm__panel--align-page-center {
	left: 50%;
}

/* --------------------------------------------------------------------------
   Simple list panel alignment
   -------------------------------------------------------------------------- */

.bcw-dm__panel--align-center {
	/* JS calculates the exact left value (centered under trigger link).
	   This 50% is a no-JS fallback only. */
	left: 50%;
}

.bcw-dm__panel--align-right {
	left: auto;
	right: 0;
}

/* --------------------------------------------------------------------------
   Taxonomy panel auto-width (padding controls size)
   -------------------------------------------------------------------------- */

.bcw-dm__panel--auto-width.bcw-dm__panel--taxonomy-columns,
.bcw-dm__panel--auto-width.bcw-dm__panel--image-cards {
	width: auto;
	max-width: none;
	right: auto;
}

.bcw-dm__panel--auto-width .bcw-dm__panel-inner,
.bcw-dm__panel--auto-width .bcw-dm__columns,
.bcw-dm__panel--auto-width .bcw-dm__cards {
	width: max-content;
	max-width: none;
}

.bcw-dm__panel--auto-width .bcw-dm__column,
.bcw-dm__panel--auto-width .bcw-dm__card {
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Taxonomy column icon – inline SVG
   -------------------------------------------------------------------------- */

.bcw-dm__col-icon-wrap {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	transition: color 0.2s ease;
}

/* --------------------------------------------------------------------------
   Global SVG arrow (used on see-all + image cards)
   -------------------------------------------------------------------------- */

/*
 * Grid stacking: both SVGs share the same grid cell so the container is sized
 * by the LARGER of the two (the hover SVG, which has two arrows).
 * Both are left-aligned (justify-self: start) so the extra width of the hover
 * arrow extends to the RIGHT of the normal arrow position.
 */
.bcw-dm__svg-arrow-wrap {
	display: inline-grid;
	align-items: center;
	flex-shrink: 0;
}

.bcw-dm__svg-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bcw-dm__svg-arrow--normal,
.bcw-dm__svg-arrow--hover {
	grid-area: 1 / 1;     /* stack both in the same cell */
	justify-self: start;  /* left-align; hover's extra width goes to the right */
}

.bcw-dm__svg-arrow--normal {
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.bcw-dm__svg-arrow--hover {
	opacity: 0;
	transition: opacity 0.2s ease;
}

/*
 * Only swap opacity when a hover SVG is actually present in the DOM.
 * Uses :has() so a lone normal SVG never fades on hover.
 */
a:hover:has(.bcw-dm__svg-arrow--hover) .bcw-dm__svg-arrow--hover,
a:focus:has(.bcw-dm__svg-arrow--hover) .bcw-dm__svg-arrow--hover,
.bcw-dm__card:hover:has(.bcw-dm__svg-arrow--hover) .bcw-dm__svg-arrow--hover,
.bcw-dm__card:focus:has(.bcw-dm__svg-arrow--hover) .bcw-dm__svg-arrow--hover {
	opacity: 1;
}

a:hover:has(.bcw-dm__svg-arrow--hover) .bcw-dm__svg-arrow--normal,
a:focus:has(.bcw-dm__svg-arrow--hover) .bcw-dm__svg-arrow--normal,
.bcw-dm__card:hover:has(.bcw-dm__svg-arrow--hover) .bcw-dm__svg-arrow--normal,
.bcw-dm__card:focus:has(.bcw-dm__svg-arrow--hover) .bcw-dm__svg-arrow--normal {
	opacity: 0;
}

/* --------------------------------------------------------------------------
   Z-index: lift containing Elementor section when a panel is open or hovered.
   Ensures panels escape sibling stacking contexts (e.g. a hero section with
   an explicit z-index, like z-index:10 on the homepage/inspiration hero).
   Both :hover and .is-open selectors are needed:
     - :hover fires immediately when the nav link is entered (same frame as
       the CSS panel-visibility :hover rule), before the 80ms JS delay.
     - .is-open covers touch/keyboard opens where :hover may not fire.
   Uses :has() – supported in all modern browsers.
   -------------------------------------------------------------------------- */

.elementor-section:has(.bcw-dm__item--has-panel:hover),
.elementor-section:has(.bcw-dm__item--has-panel.is-open),
.elementor-top-section:has(.bcw-dm__item--has-panel:hover),
.elementor-top-section:has(.bcw-dm__item--has-panel.is-open),
.e-con:has(.bcw-dm__item--has-panel:hover),
.e-con:has(.bcw-dm__item--has-panel.is-open) {
	z-index: 10001 !important;
	position: relative;
}

.elementor-widget-wrap:has(.bcw-dm__item--has-panel.is-open),
.elementor-column:has(.bcw-dm__item--has-panel.is-open) {
	overflow: visible !important;
}