/*
 * VANAFLY layout contract
 * ------------------------------------------------------------------
 * One source of truth for page geometry: content width, side gutters
 * and the hero/search relationship. Every top-level section aligns to
 * the same content box at every viewport width.
 *
 * Rules of the contract
 *  1. Sections never set their own width, max-width or side padding.
 *     They either contain a `.container` or are a full-width panel,
 *     and this file sizes both.
 *  2. The gutter is fluid (16px phones → 32px desktop); horizontal
 *     geometry has no breakpoint jumps.
 *  3. Components size themselves from their own width (container
 *     queries), not from the viewport, so they work on any device.
 *
 * Specificity
 *  Every selector starts with `body:not(#vf)`. The :not(#id) adds one
 *  ID of specificity, so these rules win over the class-based,
 *  page-scoped legacy rules without an escalating selector war.
 *  Legacy rules also use !important, so the geometry properties below
 *  carry it until those legacy rules are deleted. Nothing else here
 *  uses it.
 *
 * Load order: last theme stylesheet (see functions.php).
 */

:root {
	--vf-max: 1200px;
	/* 16px on phones (≤400px, the original mobile gutter) → 32px at ≥1280px. */
	--vf-gutter: clamp(16px, 0.55rem + 1.82vw, 32px);
	--vf-content: min(calc(100% - (2 * var(--vf-gutter))), var(--vf-max));
	--vf-search-overlap: 96px;
	/*
	 * Height of the blue hero on Home and Flights (desktop). The Hotels page
	 * gives its search widget and photo this same height (hotels.css).
	 */
	--vf-hero-height: 494px;
}

/* ------------------------------------------------------------------
 * 0. Section wrappers are always full-bleed
 * ------------------------------------------------------------------
 * Backgrounds span the viewport; only the container/panel inside a
 * section defines the content width (sections 1 and 2 below win by
 * specificity for the elements they target).
 */

body:not(#vf) .site-main > section:not(.vf-location-deals):not(.vf-adventure-carousel):not(.join-our),
body:not(#vf) .site-main > div:not(.container) {
	width: 100% !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/* ------------------------------------------------------------------
 * 1. Section containers
 * ------------------------------------------------------------------ */

body:not(#vf):not(.vf-explore-page) .site-header > .container,
body:not(#vf) .site-main > section > .container,
body:not(#vf) .site-main > div > .container,
body:not(#vf) .site-main > .container,
body:not(#vf) .site-footer .site-info > .container,
body:not(#vf) .site-footer .copyright > .container {
	width: var(--vf-content) !important;
	max-width: none !important;
	margin-right: auto !important;
	margin-left: auto !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
	box-sizing: border-box;
}

/*
 * Header: the logo and the menu/preferences controls sit exactly on the
 * content edges (the Bootstrap column padding is cancelled by the row).
 * The Explore page keeps its own full-bleed application header
 * (explore.css), so it is excluded via the vf-explore-page body class.
 */
body:not(#vf):not(.vf-explore-page) .site-header > .container {
	position: relative !important;
}

body:not(#vf):not(.vf-explore-page) .site-header > .container > .row {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

body:not(#vf):not(.vf-explore-page) .site-header > .container > .row > :first-child {
	padding-left: 0 !important;
}

body:not(#vf):not(.vf-explore-page) .site-header > .container > .row > :last-child {
	padding-right: 0 !important;
	/* Fill the space after the (max 150px) brand column up to the content edge. */
	flex: 1 1 auto !important;
	max-width: none !important;
}

body:not(#vf):not(.vf-explore-page) .site-header .menu-toggle {
	right: 0 !important;
	/*
	 * Tablets and half-width windows use a 42px button with 28px bars:
	 * keep the bars on the content edge, not centred inside the button.
	 */
	align-items: flex-end !important;
}

/* Phones/tablets: the brand column is absolutely positioned (legacy left:15px). */
body:not(#vf):not(.vf-explore-page) .site-header .vf-header-brand-column {
	left: 0 !important;
}

/* Tablets (768–991px): the logo sits on the content edge (legacy 15px inset). */
body:not(#vf):not(.vf-explore-page) .site-header .site-branding {
	margin-left: 0 !important;
}

/*
 * Desktop: pin Support / language / currency to the content's right edge.
 * Replaces a legacy `left: 126px` nudge that was tuned to the old 1140px
 * Bootstrap container and drifted at every other width.
 */
@media (min-width: 992px) {
	body:not(#vf):not(.vf-explore-page) .site-header .vf-header-actions {
		position: absolute !important;
		top: 50% !important;
		right: 0 !important;
		left: auto !important;
		margin: 0 !important;
		transform: translateY(-50%) !important;
	}
}

/* ------------------------------------------------------------------
 * 2. Full-width panels (the section itself is the visible surface)
 * ------------------------------------------------------------------ */

body:not(#vf) .site-main > .vf-location-deals,
body:not(#vf) .site-main > .vf-adventure-carousel,
body:not(#vf) .site-main > .join-our,
body:not(#vf) .site-main > .vf-home-search-slot > #vf-home-search {
	width: var(--vf-content) !important;
	max-width: none !important;
	margin-right: auto !important;
	margin-left: auto !important;
	box-sizing: border-box !important;
}

/* Flights: the search section's row/column add no inset of their own. */
body:not(#vf) .search-flights > .container > .row {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

body:not(#vf) .search-flights > .container > .row > [class*="col-"] {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/* Search card placed inside a section container (Flights page). */
body:not(#vf) .container #vf-home-search {
	width: 100% !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	transform: none !important;
	box-sizing: border-box !important;
}

/* The subscribe card: the Bootstrap row is the painted surface. */
body:not(#vf) .site-main > .join-our > .container {
	width: 100% !important;
	max-width: none !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

body:not(#vf) .site-main > .join-our > .container > .row {
	width: 100% !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	/* Same card on every page: 32/16px on phones up to the 57/55px desktop design. */
	padding: clamp(32px, 4vw + 16px, 57px) clamp(16px, 5vw, 55px) !important;
	box-sizing: border-box !important;
}

/* Stacked subscribe card: columns contribute no extra side padding. */
@media (max-width: 991.98px) {
	body:not(#vf) .site-main > .join-our > .container > .row > [class*="col-"] {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
}

/* ------------------------------------------------------------------
 * 3. Hero + search card (phones and tablets)
 * ------------------------------------------------------------------
 * Homepage and Flights share one model: the search card overlaps the
 * hero by exactly --vf-search-overlap, and the hero reserves that same
 * space below its copy. The card can only ever cover background, never
 * text, and the section after it follows in normal flow (it is never
 * pulled up underneath the card). Desktop keeps its composition.
 */
@media (max-width: 899.98px) {
	body:not(#vf).home .main-banner,
	body:not(#vf).page-template-template-flights .main-banner {
		height: auto !important;
		min-height: 0 !important;
		padding-bottom: calc(var(--vf-search-overlap) + 32px) !important;
		margin-bottom: 0 !important;
	}

	/* Hero copy boxes size to their text (legacy fixed heights let it overflow). */
	body:not(#vf).home .main-banner :is(.container, .row, [class*="col-"], .banner-content),
	body:not(#vf).page-template-template-flights .main-banner :is(.container, .row, [class*="col-"], .banner-content) {
		height: auto !important;
		min-height: 0 !important;
	}

	body:not(#vf) .site-main > .vf-home-search-slot,
	body:not(#vf).page-template-template-flights .search-flights {
		position: relative !important;
		inset: auto !important;
		width: 100% !important;
		margin-top: calc(-1 * var(--vf-search-overlap)) !important;
		margin-bottom: 0 !important;
		transform: none !important;
	}

	/* Flights: no extra space under the card (legacy 25px on tablets). */
	body:not(#vf).page-template-template-flights .search-flights {
		padding-bottom: 0 !important;
	}

	body:not(#vf) .site-main > .vf-home-search-slot > #vf-home-search,
	body:not(#vf).page-template-template-flights .search-flights #vf-home-search {
		transform: none !important;
		margin-top: 0 !important;
	}

	/*
	 * Flights renders the same widget (with its own slot wrapper) inside a
	 * section container. Neutralise the homepage slot offsets there
	 * (legacy: top:-40px; margin-bottom:-170px), which collapsed the
	 * section to less than the card's height.
	 */
	body:not(#vf).page-template-template-flights .search-flights .vf-home-search-slot {
		inset: auto !important;
		width: 100% !important;
		margin: 0 !important;
	}

	/* The section after the search card starts below it, never under it. */
	body:not(#vf) .site-main > .vf-home-search-slot + .new-inf-section,
	body:not(#vf).page-template-template-flights .search-flights + section.benefits-section {
		margin-top: 0 !important;
		padding-top: 32px !important;
	}
}

/* ------------------------------------------------------------------
 * 4. Section titles (phones and tablets)
 * ------------------------------------------------------------------
 * Below 992px every section title is one size (25px/31px) and sits the
 * same distance above its content. That distance, --vf-title-gap, is the
 * one the Top-Rated Hotels row has: 16px on phones, and 28px from 560px,
 * where that row gains its arrow buttons and becomes 44px tall.
 *
 * It is measured from the title's text box to the content. A title that
 * shares its row with a taller control (the Stories "see all" link, the
 * carousel arrows) has the row's spare height taken off its margin, so
 * the words end up the same distance from the content everywhere.
 */
:root {
	--vf-title-gap: 28px;
}

@media (max-width: 559.98px) {
	:root {
		--vf-title-gap: 16px;
	}
}

@media (max-width: 991.98px) {
	body:not(#vf) .site-main .popular-destinations .h2-title,
	body:not(#vf) .site-main .faq-row .h2-title,
	body:not(#vf) .site-main .vf-top-hotels .vf-top-hotels__title {
		font-size: 25px !important;
		line-height: 31px !important;
	}

	/* The title's own margin is the gap; its wrapper adds nothing. */
	body:not(#vf) .site-main .popular-destinations .title {
		margin-bottom: 0 !important;
	}

	body:not(#vf) .site-main .popular-destinations .title .h2-title,
	body:not(#vf) .site-main .faq-row .h2-title {
		margin-bottom: var(--vf-title-gap) !important;
	}

	/* Stories: the row is 38px tall here, 7px more than the title. */
	body:not(#vf) .site-main .vf-stories__header {
		margin-bottom: calc(var(--vf-title-gap) - 4px) !important;
	}
}

@media (max-width: 767.98px) {
	/* Stories: the "see all" link is a 44px touch target at these widths. */
	body:not(#vf) .site-main .vf-stories__header {
		margin-bottom: calc(var(--vf-title-gap) - 6px) !important;
	}
}