/*
 * Page shell: Theme Builder header and footer (Elementor Pro locations).
 * Layout and colors are set in the templates; this file only adds what
 * Elementor controls can't: sticky behavior, dark dropdowns, footer rules.
 */

/* Header ---------------------------------------------------------------- */

.elementor-location-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

.cll-header {
	color: var(--cll-on-dark);
	border-bottom: 1px solid var(--cll-line-dark);
}

.cll-wordmark .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
}

/* Wordmark and actions keep their natural size; the nav absorbs the rest. */
.cll-header .cll-wordmark {
	flex: 0 0 auto;
	white-space: nowrap;
}

.cll-header .cll-header__actions {
	--width: auto;
	flex: 0 0 auto;
}

.cll-header .cll-header__actions .elementor-button {
	white-space: nowrap;
}

.cll-header .elementor-widget-nav-menu {
	min-width: 0;
	align-self: center;
}

/* Mobile/tablet dropdown: anchored to the full-width header, below it.
   Replaces Elementor's JS "stretch", which overflowed the viewport. */
.cll-header .elementor-widget-nav-menu,
.cll-header .elementor-widget-nav-menu > .elementor-widget-container {
	position: static;
}

.cll-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: auto;
	margin-top: 0;
	z-index: 99;
	border-bottom: 1px solid var(--cll-line-dark);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

/* Tap-to-call menu item: dropdown only; desktop has the phone button. */
.cll-header .elementor-nav-menu--main .cll-menu-phone {
	display: none;
}

.cll-header .elementor-nav-menu--dropdown li.cll-menu-phone > a.elementor-item {
	color: var(--cll-blue-soft);
	font-weight: 600;
}

.cll-header .elementor-nav-menu--dropdown {
	background-color: var(--cll-navy);
	border-top: 1px solid var(--cll-line-dark);
}

.cll-header .elementor-nav-menu--dropdown a {
	color: var(--cll-on-dark);
}

.cll-header .elementor-nav-menu--dropdown a:hover,
.cll-header .elementor-nav-menu--dropdown a.elementor-item-active {
	background-color: var(--cll-navy-2);
	color: var(--cll-paper);
}

.cll-header .elementor-menu-toggle:focus-visible {
	outline: 2px solid var(--cll-blue-soft);
	outline-offset: 2px;
}

.cll-header :where(a):focus-visible {
	outline-color: var(--cll-blue-soft);
}

/* Footer ---------------------------------------------------------------- */

.cll-footer {
	color: var(--cll-on-dark-muted);
}

.cll-footer a {
	color: var(--cll-on-dark);
	text-decoration: none;
}

.cll-footer a:hover {
	color: var(--cll-paper);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cll-footer :where(a):focus-visible {
	outline-color: var(--cll-blue-soft);
}

.cll-footer__label .elementor-heading-title {
	font-family: var(--cll-font-body);
	font-size: var(--cll-step--1);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cll-paper);
}

.cll-footer__legal {
	border-top: 1px solid var(--cll-line-dark);
}

.cll-footer .elementor-nav-menu--main .elementor-item {
	padding-inline: 0;
}

/* Primary nav with seven items (Family Travel added 2026-09-26). From 1280px
   the items sit on one line (tighter item padding, 14px); 1025–1279px uses
   the tablet dropdown instead of wrapping onto two lines. */
@media (min-width: 1280px) {
	.cll-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item.elementor-item {
		padding-left: 8px;
		padding-right: 8px;
		font-size: 14px;
	}
}

@media (min-width: 1025px) and (max-width: 1279px) {
	.cll-header .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--main {
		display: none;
	}

	.cll-header .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle {
		display: flex;
	}

	.cll-header .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--dropdown {
		display: block;
	}
}

/* Header: "All airports" (hub link) shows only in the mobile/tablet
   dropdown; on desktop the Airport Transfers label itself links to it. */
.cll-header .elementor-nav-menu--main .cll-menu-hub {
	display: none;
}

/* Header: menu toggle hit area 44 × 44 (launch QA, 2026-09-28). The icon
   stays 22px; the negative margin keeps the 33px layout box, so the header
   and its items don't move. */
.cll-header .elementor-widget-nav-menu .elementor-menu-toggle {
	padding: 11px;
	margin: -5.5px;
}

/* Header logo (owner test, 2026-09-28). From 768px the approved logo replaces
   the Site Title wordmark in the same place: 40px tall (the tallest size that
   keeps the header height), aspect ratio kept. The image's black ground
   blends into the header (lighten), so no box shows around the mark. Phones
   keep the wordmark: the logo's lettering is too small at phone header size.
   Only one of the pair is ever visible, so the row keeps its gaps. */
.elementor .cll-header .elementor-widget.cll-header-logo {
	display: none;
	flex: 0 0 auto;
}

.cll-header-logo__link {
	display: block;
	line-height: 0;
}

.cll-header .cll-header-logo__img {
	display: block;
	width: auto;
	max-width: none;
	height: 40px;
	mix-blend-mode: lighten;
}

.cll-header-logo__link:focus-visible {
	outline: 2px solid var(--cll-blue-soft);
	outline-offset: 4px;
}

@media (min-width: 768px) {
	.elementor .cll-header .elementor-widget.cll-header-logo:has(img) {
		display: block;
	}

	.elementor .cll-header:has(.cll-header-logo img) .elementor-widget.cll-wordmark {
		display: none;
	}
}