/**
 * A'ila resort sub header.
 *
 * Layout follows sandals.com resort pages (2026-10-27): a flat bar under the
 * hero, resort name left, page links right, a More dropdown; on scroll it
 * sticks under the site header. On child pages (no hero) it is the first thing
 * on the page and sits under the header from the start.
 *
 * Colours and type are the site's own, shared with aila-mega-menu: navy
 * #1A233D, sand #F4F0EA, EB Garamond for the name, Montserrat for links, the
 * 2px currentColor underline of the main nav. No radius, no shadow.
 */

:root {
	--aila-subnav-navy: #1a233d;
	--aila-subnav-sand: #f4f0ea;
	--aila-subnav-white: #ffffff;
	--aila-subnav-line: rgba(26, 35, 61, 0.14);
	--aila-subnav-serif: "EB Garamond", Georgia, serif;
	--aila-subnav-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--aila-subnav-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--aila-subnav-h: 64px;
	/* Bottom edge of the fixed site header (sticky offset) and its height
	   (child page top margin); subnav.js measures both. These are the staging
	   values (2026-10-27) so first paint is already right. */
	--aila-subnav-top: 145px;
	--aila-subnav-header: 145px;
}

@media (max-width: 1024px) {
	:root {
		--aila-subnav-h: 52px;
		--aila-subnav-top: 60px;
		--aila-subnav-header: 60px;
	}
}

/* -------------------------------------------------------------------------
   Sticky
   position: sticky only holds inside the element's parent box, and Elementor
   wraps the shortcode in four boxes the height of the bar. display: contents
   removes those boxes, so the bar's parent becomes the page wrapper and it
   sticks for the whole page. The editor keeps the boxes so the widget stays
   selectable.
   ---------------------------------------------------------------------- */

body:not(.elementor-editor-active) [data-elementor-type="wp-page"] .e-con:has(.aila-subnav),
body:not(.elementor-editor-active) [data-elementor-type="wp-page"] .e-con-inner:has(.aila-subnav),
body:not(.elementor-editor-active) [data-elementor-type="wp-page"] .elementor-widget:has(.aila-subnav),
body:not(.elementor-editor-active) [data-elementor-type="wp-page"] .elementor-widget-container:has(.aila-subnav),
body:not(.elementor-editor-active) [data-elementor-type="wp-page"] .elementor-shortcode:has(.aila-subnav) {
	display: contents;
}

.aila-subnav {
	position: sticky;
	top: var(--aila-subnav-top);
	z-index: 98; /* under the header (99) and its mega menu panels */
	width: 100%;
	background-color: var(--aila-subnav-sand);
	border-bottom: 1px solid var(--aila-subnav-line);
	color: var(--aila-subnav-navy);
	font-family: var(--aila-subnav-sans);
}

/* The booking bar above sits in a container at z-index 2, so its open dropdowns
   (resort, guests) cannot rise above this bar at 98. While one is open, drop the
   bar under it; it goes back to 98 as soon as the dropdown closes. */
body:has(.rsv-custom-select__trigger[aria-expanded="true"]) .aila-subnav {
	z-index: 1;
}

/* Child page: the bar is the first block, so it starts under the fixed header.
   The header's height, not its bottom edge: the admin bar already moves <html>. */
[data-elementor-type="wp-page"] > .e-con:first-child .aila-subnav,
.aila-subnav.aila-subnav--top {
	margin-top: var(--aila-subnav-header);
}

/* With no hero under it the transparent header would float over the sand bar;
   give it its scrolled (navy) state from the start, as sandals.com's child
   pages do. The header template's own CSS forces `.elementor-sticky` to
   transparent !important and only its `.header-solid-aktif` scroll class
   paints it navy, so this has to be !important too. The mega menu's white
   open state still wins. */
body:has([data-elementor-type="wp-page"] > .e-con:first-child .aila-subnav):not(.aila-mega-light) .elementor-location-header .elementor-sticky:not(.elementor-sticky__spacer),
body.aila-subnav-top:not(.aila-mega-light) .elementor-location-header .elementor-sticky:not(.elementor-sticky__spacer) {
	background-color: var(--aila-subnav-navy) !important;
	/* The template's 0.4s background transition would fade it in from
	   transparent on every page load. */
	transition: none !important;
}

/* Same-page anchors (More -> Location, FAQs) land below header + bar. */
[data-elementor-type="wp-page"] [id] {
	scroll-margin-top: calc(var(--aila-subnav-top) + var(--aila-subnav-h));
}

/* -------------------------------------------------------------------------
   Bar
   ---------------------------------------------------------------------- */

.aila-subnav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	width: min(1340px, 100% - 40px);
	height: var(--aila-subnav-h);
	margin: 0 auto;
}

.aila-subnav__title {
	min-width: 0;
	overflow: hidden;
	font-family: var(--aila-subnav-serif);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.aila-subnav__list {
	display: flex;
	align-items: stretch;
	gap: 40px;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aila-subnav__item {
	position: relative;
	display: flex;
	margin: 0;
	padding: 0;
}

.aila-subnav a.aila-subnav__link,
.aila-subnav button.aila-subnav__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-family: var(--aila-subnav-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.aila-subnav a.aila-subnav__link::after,
.aila-subnav button.aila-subnav__toggle::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: currentColor;
	opacity: 0;
	transform: scaleX(0);
	transition: transform 0.25s var(--aila-subnav-ease), opacity 0.25s var(--aila-subnav-ease);
}

.aila-subnav a.aila-subnav__link:hover::after,
.aila-subnav a.aila-subnav__link[aria-current="page"]::after,
.aila-subnav button.aila-subnav__toggle:hover::after,
.aila-subnav button.aila-subnav__toggle[aria-expanded="true"]::after {
	opacity: 1;
	transform: scaleX(1);
}

.aila-subnav a.aila-subnav__link:focus-visible,
.aila-subnav button.aila-subnav__toggle:focus-visible,
.aila-subnav a.aila-subnav__menu-link:focus-visible {
	outline: 2px solid var(--aila-subnav-navy);
	outline-offset: 4px;
}

.aila-subnav__chevron {
	transition: transform 0.25s var(--aila-subnav-ease);
}

.aila-subnav__toggle[aria-expanded="true"] .aila-subnav__chevron {
	transform: rotate(180deg);
}

/* -------------------------------------------------------------------------
   Dropdown
   ---------------------------------------------------------------------- */

.aila-subnav__menu {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 240px;
	margin: 0;
	padding: 8px 0;
	border: 1px solid var(--aila-subnav-line);
	border-top: 0;
	background-color: var(--aila-subnav-white);
	list-style: none;
}

.aila-subnav__menu[hidden] {
	display: none;
}

.aila-subnav__menu-item {
	margin: 0;
	padding: 0;
}

.aila-subnav:not(.aila-subnav--has-more) .aila-subnav__more {
	display: none;
}

.aila-subnav a.aila-subnav__menu-link {
	display: block;
	padding: 12px 24px;
	color: var(--aila-subnav-navy);
	font-family: var(--aila-subnav-sans);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.aila-subnav a.aila-subnav__menu-link:hover,
.aila-subnav a.aila-subnav__menu-link:focus-visible {
	background-color: var(--aila-subnav-sand);
}

.aila-subnav a.aila-subnav__menu-link[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Desktop: the More sub-items live in the dropdown, not on the bar. */
.aila-subnav__item--extra,
.aila-subnav__next {
	display: none;
}

/* -------------------------------------------------------------------------
   Below 1025px (burger header): no name, no More. Every link in one row that
   scrolls sideways. The row fades out under a sand arrow on the right while
   there is more to see, and fades on the left once scrolled (subnav.js sets
   is-scrollable / at-start / at-end).
   ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.aila-subnav {
		--aila-subnav-fade-l: 0px;
		--aila-subnav-fade-r: 0px;
	}

	.aila-subnav.is-scrollable:not(.at-start) {
		--aila-subnav-fade-l: 32px;
	}

	.aila-subnav.is-scrollable:not(.at-end) {
		--aila-subnav-fade-r: 56px;
	}

	.aila-subnav__inner {
		position: relative;
		width: 100%;
		gap: 0;
	}

	.aila-subnav__title,
	.aila-subnav .aila-subnav__more {
		display: none;
	}

	.aila-subnav__list {
		flex: 1 1 auto;
		min-width: 0;
		gap: 28px;
		padding: 0 20px;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-padding-inline: 20px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--aila-subnav-fade-l), #000 calc(100% - var(--aila-subnav-fade-r)), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 var(--aila-subnav-fade-l), #000 calc(100% - var(--aila-subnav-fade-r)), transparent 100%);
	}

	.aila-subnav__list::-webkit-scrollbar {
		display: none;
	}

	.aila-subnav__item,
	.aila-subnav__item--extra {
		display: flex;
		flex: 0 0 auto;
	}

	.aila-subnav a.aila-subnav__link {
		font-size: 13px;
	}

	/* Hello Elementor's reset gives every button:hover / :focus a #c36 fill and
	   white text; the arrow keeps its sand fade and navy chevron in every state. */
	.aila-subnav button.aila-subnav__next,
	.aila-subnav button.aila-subnav__next:hover,
	.aila-subnav button.aila-subnav__next:focus,
	.aila-subnav button.aila-subnav__next:active {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 48px;
		height: 100%;
		margin: 0;
		padding: 0 16px 0 0;
		border: 0;
		border-radius: 0;
		background: linear-gradient(to right, rgba(244, 240, 234, 0), var(--aila-subnav-sand) 55%);
		box-shadow: none;
		outline: 0;
		color: var(--aila-subnav-navy);
		cursor: pointer;
		transition: opacity 0.2s ease;
	}

	.aila-subnav:not(.is-scrollable) button.aila-subnav__next,
	.aila-subnav.at-end button.aila-subnav__next {
		opacity: 0;
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aila-subnav__next,
	.aila-subnav a.aila-subnav__link::after,
	.aila-subnav button.aila-subnav__toggle::after,
	.aila-subnav__chevron {
		transition: none;
	}
}