/* ==================================================================
   Tablet & below (≤1024px) navigation:
   - collapse the header to a hamburger, hide the inline CTA buttons
   - full-viewport-width dropdown pinned under the sticky header, with the
     Verify / Book CTAs appended (mobile-nav.js)
   - hide the direction switcher (colour stays on the last-chosen scheme)
   - a sticky bottom Call / Message bar
   Tokens come from colors_and_type.css.
   ================================================================== */

/* Shown only at ≤1024 (rule lives inside the media query below). */
.fv-callbar { display: none; }

@media (max-width: 1024px) {

	/* ---- Header: hamburger only ---- */
	.fv-header .elementor-nav-menu--main { display: none !important; }
	.fv-header .elementor-menu-toggle { display: flex !important; }
	/* No background box on the hamburger. */
	.fv-header .elementor-menu-toggle,
	.fv-header .elementor-menu-toggle:hover,
	.fv-header .elementor-menu-toggle:focus,
	.fv-header div.elementor-menu-toggle.elementor-active {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}
	/* Push the hamburger to the far right (the CTA columns that used to hold the
	   right edge are hidden below). */
	.fv-header > .elementor-container > .elementor-column:nth-child(2) { margin-left: auto !important; }
	/* Hide the inline Verify + phone CTA buttons (columns 3 & 4). */
	.fv-header > .elementor-container > .elementor-column:nth-child(3),
	.fv-header > .elementor-container > .elementor-column:nth-child(4) { display: none !important; }

	/* ---- Full-width menu that pushes content down, overlays when scrolled ----
	   mobile-nav.js relocates the mobile dropdown <nav> to be a direct child of the
	   full-width .fv-header and it stays in normal flow: at the top of the page it
	   grows the header and pushes the page content down; once Elementor makes the
	   header sticky (fixed) on scroll, that same in-flow menu rides along as a fixed
	   overlay. (Submenu <ul>s share the class, target the top-level <nav> only.) */
	/* Neutralise the positioned ancestors between the panel and the full-width
	   .fv-header so the absolute panel resolves to the header, full viewport width,
	   flush under it. Elementor makes .fv-header fixed on scroll, so the panel is
	   sticky-on-scroll (and in place at the top). */
	.fv-header .elementor-container,
	.fv-header .elementor-column,
	.fv-header .elementor-widget-wrap,
	.fv-header .elementor-widget,
	.fv-header .elementor-widget-container { position: static !important; }

	.fv-header nav.elementor-nav-menu--dropdown {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
		border-inline: 0 !important;
		box-shadow: 0 16px 30px rgba(20, 34, 46, 0.14) !important;
	}
	/* The link hugs its text, the row's indent, full-width divider and the caret
	   area live on the <li>, so tapping the padding (or the caret) is not the link. */
	.fv-header nav.elementor-nav-menu--dropdown > ul > li {
		position: relative;
		padding: 0 24px;   /* match the header's 24px content inset (logo / CTAs) */
		border-bottom: 1px solid var(--divider, #E7EDF1);
	}
	.fv-header nav.elementor-nav-menu--dropdown .elementor-item {
		display: inline-block !important;
		padding: 17px 0 !important;
		border: 0 !important;
		font-size: 16px !important;
		/* static so the absolutely-positioned caret anchors to the full-width <li>,
		   not this text-width link (Elementor makes .elementor-item relative). */
		position: static !important;
	}

	/* Remove the dark (primary-navy) fill Elementor puts on a tapped/opened parent
	   item, keep the row light in every interaction state. */
	.fv-header nav.elementor-nav-menu--dropdown .elementor-item:hover,
	.fv-header nav.elementor-nav-menu--dropdown .elementor-item:focus,
	.fv-header nav.elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
	.fv-header nav.elementor-nav-menu--dropdown .elementor-item.highlighted,
	.fv-header nav.elementor-nav-menu--dropdown > ul > li:hover,
	.fv-header nav.elementor-nav-menu--dropdown > ul > li.highlighted {
		background: transparent !important;
		color: var(--navy-700, #1F4E79) !important;
	}

	/* Custom submenu accordion. Elementor injects its caret inside the link (so a
	   tap navigates) and auto-expands the current page's ancestor; instead we hide
	   its caret and use our own right-aligned toggle button (mobile-nav.js) that
	   opens/closes the submenu without navigating. Submenus are closed by default
	   and reset on every page load (they only open when we add .fv-sub-open). */
	.fv-header nav.elementor-nav-menu--dropdown li.menu-item-has-children { position: relative; }
	.fv-header nav.elementor-nav-menu--dropdown .sub-arrow { display: none !important; }

	.fv-header nav.elementor-nav-menu--dropdown li.menu-item-has-children > ul.sub-menu { display: none !important; }
	.fv-header nav.elementor-nav-menu--dropdown li.menu-item-has-children.fv-sub-open > ul.sub-menu { display: block !important; }

	/* Caret drawn as a pseudo-element (always present, can't be wiped by Elementor
	   re-processing the menu). It's click-through: mobile-nav.js catches the click
	   on the empty caret area of the row and toggles .fv-sub-open. */
	.fv-header nav.elementor-nav-menu--dropdown li.menu-item-has-children::after {
		content: '';
		position: absolute; top: 13px; right: 22px;
		width: 30px; height: 30px;
		border: 1px solid var(--ink-200, #DCE3E9);
		border-radius: 4px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2392A2AE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center;
		pointer-events: none;
		transition: transform 0.2s ease;
	}
	.fv-header nav.elementor-nav-menu--dropdown li.menu-item-has-children.fv-sub-open::after { transform: rotate(180deg); }

	/* Submenu panels: flat, no radius, shadow or side borders (design). */
	.fv-header ul.sub-menu.elementor-nav-menu--dropdown {
		border-radius: 0 !important;
		box-shadow: none !important;
		border: 0 !important;
		padding: 0 !important;
	}
	.fv-header ul.sub-menu.elementor-nav-menu--dropdown .elementor-sub-item { padding-left: 40px !important; }

	/* CTAs appended into the dropdown by mobile-nav.js */
	.fv-mnav-cta { display: flex; gap: 12px; padding: 18px 24px 24px; }
	.fv-mnav-cta a {
		flex: 1; display: inline-flex; align-items: center; justify-content: center;
		padding: 14px 18px; border-radius: var(--radius-pill, 999px);
		font-family: var(--font-body); font-size: 15px; font-weight: 600;
		text-decoration: none; border: 1px solid transparent;
	}
	/* Two-class selectors (.fv-mnav-cta a.fv-mnav-*) so the colours/border beat the
	   kit's `.elementor-kit-5 a` link colour. */
	.fv-mnav-cta a.fv-mnav-verify { background: #fff; color: var(--navy-700, #1F4E79); border: 1.5px solid var(--border-strong, #C7D2DB); }
	.fv-mnav-cta a.fv-mnav-book { background: var(--navy-700, #1F4E79); color: #fff; border-color: transparent; }

	/* ---- Hide the direction switcher (colour persists via localStorage) ---- */
	.fv-direction { display: none !important; }

	/* ---- Sticky bottom Call / Message bar ---- */
	.fv-callbar {
		display: grid; grid-template-columns: 1fr 1fr;
		position: fixed; inset-inline: 0; bottom: 0; z-index: 9990;
		background: #fff; border-top: 1px solid var(--divider, #E7EDF1);
		box-shadow: 0 -6px 24px rgba(20, 34, 46, 0.14);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.fv-callbar a {
		display: flex; align-items: center; justify-content: center; gap: 10px;
		padding: 17px 10px; font-family: var(--font-body); font-weight: 700;
		font-size: 15.5px; letter-spacing: -0.01em; text-decoration: none;
	}
	/* Two-class selectors (.fv-callbar a.fv-callbar__*) so the link text colour
	   beats the kit's `.elementor-kit-5 a` colour. */
	.fv-callbar a.fv-callbar__call { color: var(--navy-800, #163A5C); }
	.fv-callbar__call svg { color: var(--sage-700, #4E7462); }
	.fv-callbar a.fv-callbar__call:active { background: var(--sage-50, #F4F9F6); }
	.fv-callbar a.fv-callbar__msg { color: #fff; background: var(--accent, #CE7C57); border-inline-start: 1px solid rgba(255, 255, 255, 0.2); }
	.fv-callbar a.fv-callbar__msg:active { filter: brightness(0.95); }

	/* Clear the fixed bar so page content / footer isn't hidden behind it. */
	body { padding-bottom: 58px; }
}