/**
 * Utility bar, masthead, primary navigation.
 *
 * The mobile navigation is built here rather than inherited from ShiftNav,
 * which the outgoing site used. On an accessibility commitment the ARIA
 * contract for the main navigation should not be a plugin's to define.
 *
 * @package LCA
 */

/* ---- Utility bar ---- */

.lca-utility {
	background: var(--lca-navy);
	color: var(--lca-on-navy);
	font-size: var(--lca-fs-eyebrow);
}

.lca-utility__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lca-space-1) var(--lca-space-3);
	align-items: center;
	justify-content: space-between;
	max-width: var(--lca-container);
	margin-inline: auto;
	padding: var(--lca-space-1) var(--lca-gutter);
}

.lca-utility__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lca-space-2);
	align-items: center;
}

.lca-utility__nav a {
	color: var(--lca-on-navy-mid);
}

.lca-utility__nav a:hover {
	color: var(--lca-on-navy);
}

.lca-utility__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lca-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lca-utility__list .is-current {
	color: var(--lca-on-navy);
	font-weight: 600;
	border-bottom: 1px solid rgb(255 255 255 / 0.4);
}

@media (max-width: 599px) {
	/* One line, and only what a phone visitor uses here. The address is in
	   the footer; repeating it at the very top of every page cost wrapped
	   lines before the logo was even reached. */
	.lca-utility__inner {
		flex-wrap: nowrap;
		gap: var(--lca-space-2);
		justify-content: flex-end;
		padding-block: 6px;
	}

	/* With the phone number gone from this bar, the meta group holds only the
	   address — so the whole group goes rather than leaving an empty box the
	   flex row still reserves space for. */
	.lca-utility__meta {
		display: none;
	}

	.lca-utility__list {
		gap: var(--lca-space-2);
		font-size: 12px;
	}

	.lca-utility__list a {
		display: block;
		padding-block: 4px;
	}

	/* The current-page underline is meaningful in the primary navigation. In
	   a three-item utility row it just draws three rules under three links. */
	.lca-utility__list .is-current {
		border-bottom: 0;
	}
}

/* ---- Masthead ---- */

.lca-header {
	background: var(--lca-sand);
}

.lca-header__inner {
	display: flex;
	gap: var(--lca-space-3);
	align-items: center;
	justify-content: space-between;
	max-width: var(--lca-container);
	margin-inline: auto;
	padding: var(--lca-space-2) var(--lca-gutter);
}

.lca-header__brand {
	display: flex;
	flex-shrink: 0;
	gap: 12px;
	align-items: center;
}

/* The mark stacks "LCA" over a "LOS CABOS" wordmark over a rule, so it needs
   more height than a single-line logo before the wordmark becomes legible. */
.lca-header__logo {
	width: auto;
	height: 48px;
}

@media (min-width: 900px) {
	.lca-header__logo {
		height: 64px;
	}
}

.lca-header__wordmark {
	font-family: var(--lca-font-serif);
	font-size: var(--lca-fs-h4);
	font-weight: 600;
}

/* ---- Primary navigation ---- */

.lca-nav__list {
	display: flex;
	gap: var(--lca-space-4);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--lca-fs-base);
	font-weight: 600;
}

.lca-nav__link {
	display: block;
	padding-block: 4px;
}

.lca-nav__link.is-current {
	color: var(--lca-terracotta);
}

/* The active item is marked by more than colour: an underline carries the
   same information for anyone who cannot distinguish the hue (WCAG 1.4.1). */
.lca-nav__link.is-current::after {
	display: block;
	height: 2px;
	margin-top: 3px;
	background: currentcolor;
	content: "";
}

/* ---- Dropdowns ----

   Two different controls, because the two widths need different things.

   Desktop has hover, so the panel opens from the item itself and the chevron
   button is dropped entirely — six of them across the bar read as clutter and
   earn nothing a hover and a focus ring do not already do. :focus-within
   covers the keyboard: tabbing onto the parent link opens the panel, and the
   links inside then enter the tab order.

   Below 900px there is no hover and the panel is an accordion, so the button
   stays. It is the only way to open a section without navigating away to the
   parent's own page. */

.lca-nav__item--parent {
	position: relative;
}

.lca-nav__disclose {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.lca-nav__chev {
	display: block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .16s ease;
}

.lca-nav__sub {
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 500;
}

.lca-nav__sublink {
	display: block;
	white-space: nowrap;
}

@media (min-width: 900px) {
	.lca-nav__item--parent > .lca-nav__link {
		display: inline-block;
	}

	/* Removed, not just hidden: an invisible control still in the tab order
	   is worse than no control, and hover plus :focus-within already open
	   the panel by mouse and by keyboard. */
	.lca-nav__disclose {
		display: none;
	}

	.lca-nav__sub {
		position: absolute;
		z-index: 40;
		top: 100%;
		left: -14px;
		max-width: calc(100vw - 32px);
		min-width: 232px;
		padding: 6px;
		background: var(--lca-white, #fff);
		border: 1px solid var(--lca-line);
		border-radius: 8px;
		box-shadow: 0 2px 4px rgb(15 23 29 / .06), 0 12px 28px rgb(15 23 29 / .12);
		font-size: var(--lca-fs-small);

		/* Hidden with opacity+visibility rather than display:none so the
		   panel can transition, and so its links stay out of the tab order
		   while closed (visibility:hidden removes them). */
		visibility: hidden;
		opacity: 0;
		transform: translateY(-4px);
		transition: opacity .14s ease, transform .14s ease, visibility .14s;
	}

	/* A small bridge across the gap between the bar and the panel, so the
	   pointer does not cross dead space and close it on the way down. */
	.lca-nav__item--parent::after {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 10px;
		content: "";
	}

	.lca-nav__item--parent:hover > .lca-nav__sub,
	.lca-nav__item--parent:focus-within > .lca-nav__sub {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}

	/* Escape leaves focus on the link that opened the panel, so :focus-within
	   would reopen it on the same frame. nav.js sets this flag to hold it
	   shut until the pointer or focus actually leaves. Carries the list class
	   so it outranks the two rules above rather than relying on source order. */
	.lca-nav__list .lca-nav__item--parent.is-dismissed > .lca-nav__sub {
		visibility: hidden;
		opacity: 0;
		transform: translateY(-4px);
	}

	/* The last item sits closest to the right edge, so its panel hangs from
	   the right rather than pushing the page sideways. */
	.lca-nav__list > .lca-nav__item--parent:last-of-type > .lca-nav__sub {
		right: -14px;
		left: auto;
	}

	.lca-nav__sublink {
		padding: 8px 12px;
		border-radius: 5px;
	}

	.lca-nav__sublink:hover,
	.lca-nav__sublink:focus-visible {
		background: var(--lca-sand, #f4f2ee);
	}

	.lca-nav__sublink.is-current::after {
		display: none;
	}

	.lca-nav__sublink.is-current {
		background: var(--lca-sand, #f4f2ee);
	}
}

/* Six top-level items and a CTA fill the bar. Between the tablet breakpoint
   and roughly 1200px the row has to tighten or it wraps onto two lines and
   the masthead grows by 40px. */
/* Dropping the chevrons gave back about 25px per item, so the base size now
   fits from roughly 1150px up rather than 1200px. Below that the row plus the
   CTA still overruns the container — the labels are nowrap, so the list
   cannot absorb it and the CTA is what spills. */
@media (min-width: 900px) and (max-width: 1149px) {
	.lca-nav__list {
		gap: var(--lca-space-2);
		font-size: var(--lca-fs-small);
	}
}

/* A two-word label like "Transfers & Parking" breaks onto a second line long
   before the row itself runs out of width, which makes the masthead grow and
   the items sit on mismatched baselines. The label stays on one line and the
   gap absorbs the pressure instead. */
@media (min-width: 900px) {
	.lca-nav__list > .lca-nav__item > .lca-nav__link {
		white-space: nowrap;
	}
}

/* Six labels, a logo and the CTA do not fit a 900px row even at the smaller
   step: the content box is 852px and the parts want 907px. The desktop layout
   starts at 900px, so the shortfall is closed here rather than by moving the
   breakpoint — which would send a 960px laptop to the mobile toggle. */
@media (min-width: 900px) and (max-width: 1023px) {
	.lca-nav__list {
		gap: 10px;
	}

	.lca-header .lca-header__cta {
		padding-inline: 14px;
	}
}

/* Mobile: the dropdown becomes an accordion inside the panel. Closed by
   default and driven by the same button, so there is one interaction model
   and one aria-expanded to keep honest. */
@media (max-width: 899px) {
	/* The row is a flex line rather than a float: the link takes the space it
	   needs, the button sits beside it at a full touch target, and the panel
	   wraps onto its own line underneath. A float with a negative top margin
	   put the chevron on the row boundary instead of next to its label. */
	.lca-nav__item--parent {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.lca-nav__item--parent > .lca-nav__link {
		flex: 1 1 auto;
	}

	.lca-nav__disclose {
		flex: none;
		width: 48px;
		min-height: 48px;
		margin: 0;
	}

	.lca-nav__sub {
		flex: 0 0 100%;
		display: none;
		padding: 0 0 8px var(--lca-space-3);
	}

	.lca-nav__disclose[aria-expanded="true"] + .lca-nav__sub {
		display: block;
	}

	.lca-nav__disclose[aria-expanded="true"] .lca-nav__chev {
		transform: rotate(-135deg) translate(-3px, -3px);
	}

	.lca-nav__item--child + .lca-nav__item--child {
		border-top: 1px solid var(--lca-line-soft);
	}

	.lca-nav__sublink {
		padding-block: 11px;
		font-size: var(--lca-fs-base);
	}

	.lca-nav__sublink.is-current::after {
		display: none;
	}
}

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

.lca-header__cta {
	flex-shrink: 0;
	white-space: nowrap;
}

/* The in-drawer copy of the CTA is only for the mobile panel.
   Scoped to .lca-nav so it outranks .lca-btn's own display, which is defined
   in components.css and therefore loads later. */
.lca-nav .lca-nav__cta-inline {
	display: none;
}

/* ---- Mobile navigation ----
   Below 900px the primary nav becomes a disclosure panel driven by a real
   <button> with aria-expanded. nav.js handles the state, Escape, and focus
   return; if JavaScript fails the panel is simply always open, which is a
   worse layout but never a dead end. */

.lca-navtoggle {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	padding: 10px 14px;
	background: transparent;
	color: var(--lca-navy);
	font-size: var(--lca-fs-small);
	font-weight: 700;
	letter-spacing: var(--lca-ls-label);
	text-transform: uppercase;
	border: 1px solid var(--lca-line);
	border-radius: var(--lca-radius-btn);
	cursor: pointer;
}

.lca-navtoggle__bars {
	display: grid;
	gap: 4px;
	width: 18px;
}

.lca-navtoggle__bars span {
	display: block;
	height: 2px;
	background: currentcolor;
	border-radius: 1px;
}

@media (max-width: 899px) {
	/* .lca-btn sets display: inline-flex in components.css, which loads after
	   this file at equal specificity, so a bare class here never won. */
	.lca-header .lca-header__cta {
		display: none;
	}

	.lca-nav {
		display: none;
		order: 3;
		width: 100%;
		padding-block: var(--lca-space-2) var(--lca-space-3);
		border-top: 1px solid var(--lca-line);
	}

	.lca-nav.is-open {
		display: block;
	}

	/* No JavaScript: show the panel rather than hiding the navigation. */
	.no-js .lca-nav {
		display: block;
	}

	.no-js .lca-navtoggle {
		display: none;
	}

	.lca-nav__list {
		flex-direction: column;
		gap: 0;
		align-items: stretch;
		font-size: var(--lca-fs-lead);
	}

	.lca-nav__item + .lca-nav__item {
		border-top: 1px solid var(--lca-line-soft);
	}

	.lca-nav__link {
		padding-block: 14px;
	}

	.lca-nav__link.is-current::after {
		display: none;
	}

	.lca-nav .lca-nav__cta-inline {
		display: inline-flex;
		margin-top: var(--lca-space-3);
	}
}

@media (min-width: 900px) {
	.lca-navtoggle {
		display: none;
	}

	.lca-nav {
		display: block;
	}
}

/* ===================================================================== */
/* Mobile masthead                                                        */
/* ===================================================================== */

@media (max-width: 899px) {
	.lca-header__inner {
		flex-wrap: wrap;
		gap: var(--lca-space-2);
		padding-block: 10px;
	}

	.lca-header__logo {
		height: 40px;
	}

	/* A square icon button, aligned to the row rather than floating in it.
	   44px is the minimum comfortable touch target (WCAG 2.5.5). */
	.lca-navtoggle {
		gap: 8px;
		min-width: 44px;
		min-height: 44px;
		padding: 0 12px;
		background: var(--lca-navy);
		color: var(--lca-white);
		font-size: 12px;
		border-color: var(--lca-navy);
	}

	.lca-navtoggle:hover,
	.lca-navtoggle:focus-visible {
		background: var(--lca-navy-dark);
		border-color: var(--lca-navy-dark);
	}

	/* The bars become a cross while the panel is open, so the control says
	   what pressing it will do rather than only what it opened. */
	.lca-navtoggle__bars {
		width: 16px;
	}

	.lca-navtoggle[aria-expanded="true"] .lca-navtoggle__bars span:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}

	.lca-navtoggle[aria-expanded="true"] .lca-navtoggle__bars span:nth-child(2) {
		opacity: 0;
	}

	.lca-navtoggle[aria-expanded="true"] .lca-navtoggle__bars span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	.lca-navtoggle__bars span {
		transition: transform 160ms ease, opacity 120ms ease;
	}

	/* The panel's call to action is the one place the CTA belongs on a phone,
	   so it goes full width at the foot of the list rather than inline. */
	.lca-nav .lca-nav__cta-inline {
		justify-content: center;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lca-navtoggle__bars span {
		transition: none;
	}
}