/* =========================================================================
   Tavel global styles
   Complements theme.json (which owns tokens, layout, colours, type scale).
   Only rules theme.json can't express live here.
   ========================================================================= */

:root {
	--tavel-header-h: 76px;
	--tavel-ease: cubic-bezier(0.22, 1, 0.36, 1);
	/* Darker CTA gradient used behind white button labels so text clears WCAG
	   AA 4.5:1 — the brighter preset gradient stays for gradient *text*. */
	--tavel-cta-button: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);
}

html {
	scroll-behavior: smooth;
	/* Keep anchored sections clear of the sticky header. */
	scroll-padding-top: calc(var(--tavel-header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	-webkit-font-smoothing: antialiased;
	/* NB: no overflow-x:hidden here — it would disable position:sticky on the
	   header. Horizontal overflow is contained on decorative elements instead. */
}

/* --- Selection ---------------------------------------------------------- */
::selection {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
	color: #fff;
}

/* --- Typography niceties ------------------------------------------------ */
/* Balance headline ragging; soften long body paragraphs. */
h1, h2, h3, h4,
.wp-block-heading {
	text-wrap: balance;
}
p {
	text-wrap: pretty;
}

/* --- Skip link (fallback PHP templates; block templates use core's) ----- */
.skip-link.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	clip: auto;
	clip-path: none;
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--heading);
	box-shadow: var(--wp--preset--shadow--card);
}

/* =========================================================================
   Sticky site header
   ========================================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background-color 0.3s var(--tavel-ease),
		backdrop-filter 0.3s var(--tavel-ease),
		border-color 0.3s var(--tavel-ease),
		padding 0.3s var(--tavel-ease);
	border-bottom: 1px solid transparent;
}

/* WP core applies the root block-gap as `margin-block-start` to every direct
   child of .wp-site-blocks. The header renders inside a <header class="wp-block-
   template-part"> wrapper, and the <main> that follows it inherits that gap —
   which shows as dark space directly below the sticky header (reads as the
   header not being centred). Zero it so the hero sits flush under the header;
   each section manages its own vertical rhythm. */
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > .wp-block-template-part + * {
	margin-block-start: 0;
}

.site-header.is-scrolled {
	background: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom-color: var(--wp--preset--color--border);
}

/* Guarantee vertical centering of the header row and kill the inline-image
   baseline gap under the logo (which otherwise looks bottom-heavy). */
.site-header .alignwide {
	align-items: center;
}
.site-header .wp-block-site-logo {
	display: flex;
	align-items: center;
}
.site-header .wp-block-site-logo a,
.site-header .custom-logo {
	display: block;
}

/* Navigation links */
.site-header .wp-block-navigation {
	--wp--preset--color--contrast: var(--wp--preset--color--text);
	font-weight: 500;
}
.site-header .wp-block-navigation a {
	position: relative;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: color 0.2s var(--tavel-ease);
}
.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation a.is-active,
.site-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--white);
}

/* Animated underline for hovered / scroll-spied (active) nav links. */
.site-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--gradient--cta);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s var(--tavel-ease);
}
.site-header .wp-block-navigation a:hover::after,
.site-header .wp-block-navigation a.is-active::after {
	transform: scaleX(1);
}
/* No underline decoration inside the mobile overlay menu. */
.site-header .wp-block-navigation__responsive-container.is-menu-open a::after {
	display: none;
}

/* =========================================================================
   Mobile navigation overlay (full-screen menu)
   ========================================================================= */
/* The desktop nav is right-justified (items-justified-right), which sets
   --navigation-layout-justification-setting:flex-end and
   --navigation-layout-wrap:wrap as custom properties directly on the <ul>/<li>
   (core duplicates the nav's classes onto them), so a reset further up the
   tree loses to their own same-element rule. Force the values that matter —
   alignment and wrap — with enough specificity so links stack in a single
   left-aligned column instead of wrapping into a second column that
   overflows past the viewport edge. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	--navigation-layout-wrap: nowrap;
	padding: calc(56px + 1.5rem) var(--tavel-menu-gutter, 1.5rem) 2rem;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
	width: 100%;
}

/* Bigger, easier to hit close button (core ships a bare 24×24 target). */
.site-header .wp-block-navigation__responsive-container-close {
	top: 0.6rem !important;
	right: 0.6rem !important;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color 0.2s var(--tavel-ease);
}
.site-header .wp-block-navigation__responsive-container-close:hover {
	background: color-mix( in srgb, var(--wp--preset--color--heading) 12%, transparent );
}

/* Full-width rows with a hairline divider between links, generous tap area. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-top: 1px solid var(--wp--preset--color--border);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	width: 100%;
	padding: 1.15rem 0;
	font-size: clamp(1.15rem, 1rem + 1vw, 1.4rem);
	font-weight: 600;
	transition: color 0.2s var(--tavel-ease), padding-left 0.2s var(--tavel-ease);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__responsive-container.is-menu-open a.is-active {
	color: var(--wp--preset--color--primary);
	padding-left: 0.4rem;
}

/* Staggered entrance for the menu links. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	opacity: 0;
	transform: translateY(10px);
	animation: tavel-menu-item-in 0.4s var(--tavel-ease) forwards;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.05s; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.1s; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.15s; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.2s; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.25s; }
@keyframes tavel-menu-item-in {
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* The nav-embedded "Download" CTA only exists to surface a prominent, full-
   width action inside the open mobile menu — the persistent header button
   (.tavel-header-cta) already covers desktop and the collapsed mobile bar. */
.site-header .tavel-nav-cta {
	display: none;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .tavel-nav-cta {
	display: block;
	width: 100%;
	margin-top: 1.75rem;
	opacity: 0;
	transform: translateY(10px);
	animation: tavel-menu-item-in 0.4s var(--tavel-ease) forwards;
	animation-delay: 0.3s;
}
.site-header .tavel-nav-cta .wp-block-button__link {
	width: 100%;
	text-align: center;
}
@media (prefers-reduced-motion: reduce) {
	.site-header .wp-block-navigation__responsive-container.is-menu-open .tavel-nav-cta {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* =========================================================================
   Button variants (registered as block styles in functions.php)
   ========================================================================= */
.wp-block-button.is-style-cta .wp-element-button {
	background: var(--tavel-cta-button);
	border: none;
	box-shadow: var(--wp--preset--shadow--glow);
	transition: transform 0.25s var(--tavel-ease), box-shadow 0.25s var(--tavel-ease);
}
.wp-block-button.is-style-cta .wp-element-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 24px 70px -10px rgba(99, 102, 241, 0.6);
}

.wp-block-button.is-style-ghost .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--heading);
	/* >=3:1 boundary so the ghost control is perceivable (WCAG 1.4.11). */
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--heading) 45%, transparent);
	transition: border-color 0.25s var(--tavel-ease), background-color 0.25s var(--tavel-ease);
}
.wp-block-button.is-style-ghost .wp-element-button:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}

/* =========================================================================
   Focus visibility (keyboard a11y) — never removed for mouse users because
   :focus-visible only paints when the UA decides focus should be shown.
   ========================================================================= */
a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible,
.wp-block-navigation a:focus-visible,
.tavel-phone-showcase__dot:focus-visible,
.lightbox-trigger:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--heading);
	outline-offset: 3px;
	border-radius: 4px;
}

/* =========================================================================
   Section furniture
   ========================================================================= */
/* Eyebrow / kicker above section headings */
.tavel-eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #e1d0bd;
	margin-bottom: 0.75rem;
}

/* Gradient text accent for select headings */
.tavel-gradient-text {
	background: var(--wp--preset--gradient--cta);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Subtle radial backdrop for feature / cta sections */
.tavel-glow-bg {
	position: relative;
	isolation: isolate;
}
.tavel-glow-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(60% 60% at 15% 0%, rgba(59, 130, 246, 0.12), transparent 60%),
		radial-gradient(50% 50% at 100% 20%, rgba(99, 102, 241, 0.12), transparent 60%);
	pointer-events: none;
}

/* Hero cover tweaks */
.tavel-hero .wp-block-cover__background {
	background: var(--wp--preset--gradient--hero-veil);
}
.tavel-hero {
	min-height: min(92vh, 820px);
}
/* Let the hero columns shrink/grow freely so the phone fan never clips the headline. */
.tavel-hero .wp-block-column {
	min-width: 0;
}

/* Mobile: a little more breathing room above the hero CTA buttons.
   (padding, not margin — the buttons carry an inline margin-top.) */
@media (max-width: 781px) {
	.tavel-hero .wp-block-buttons {
		padding-top: 20px;
	}
}

/* Generic card surface (team, life-easier items) */
.tavel-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 20px;
	overflow: hidden;
}

.tavel-team-card img {
	border-radius: 999px;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Store buttons: brand glyph before the label via CSS mask (self-contained) */
.tavel-store .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}
.tavel-store .wp-element-button::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--glyph) center / contain no-repeat;
	mask: var(--glyph) center / contain no-repeat;
}
.tavel-store .is-apple .wp-element-button {
	--glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M16.365 1.43c0 1.14-.42 2.2-1.13 2.98-.86.95-2.26 1.68-3.42 1.6-.14-1.13.44-2.32 1.1-3.05.75-.84 2.13-1.48 3.28-1.53.05.33.17.66.17 0zM20.5 17.4c-.6 1.38-.88 2-1.65 3.22-.9 1.42-2.17 3.2-3.75 3.2-1.4.01-1.76-.9-3.66-.9-1.9 0-2.3.88-3.63.92-1.5.05-2.64-1.53-3.55-2.95-2.5-3.9-2.77-8.47-1.22-10.9 1.1-1.74 2.83-2.76 4.46-2.76 1.66 0 2.7.9 4.07.9 1.33 0 2.14-.9 4.06-.9 1.45 0 2.99.79 4.08 2.16-3.59 1.96-3 7.08.06 8.01z"/></svg>');
}
.tavel-store .is-google .wp-element-button {
	--glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M3.6 1.5c-.3.32-.48.8-.48 1.42v18.16c0 .62.18 1.1.5 1.42l.07.06 10.17-10.17v-.24L3.67 1.44l-.07.06zM17.4 15.3l-3.4-3.4v-.24l3.4-3.4.08.05 4.02 2.29c1.15.65 1.15 1.72 0 2.38l-4.02 2.28-.08.04zM13.94 11.9L3.6 22.24c.38.4 1 .45 1.72.05l12.16-6.9-3.54-3.5zM13.94 11.9l3.54-3.5L5.34 1.5c-.72-.4-1.34-.35-1.72.05l10.32 10.35z"/></svg>');
}

/* App-store badge images */
.tavel-store-badges .wp-block-image,
.tavel-store-badges img {
	margin: 0;
}
.tavel-store-badges .wp-block-image img {
	height: 52px;
	width: auto;
	transition: transform 0.25s var(--tavel-ease);
}
.tavel-store-badges .wp-block-image:hover img {
	transform: translateY(-2px);
}

/* =========================================================================
   Scroll reveal (driven by interactions.js via IntersectionObserver)
   ========================================================================= */
/* Progressive enhancement: only hide when JS is active (html.tavel-js).
   Without JS — and for crawlers — content is fully visible. */
.tavel-js .tavel-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s var(--tavel-ease), transform 0.7s var(--tavel-ease);
	will-change: opacity, transform;
}
.tavel-js .tavel-reveal.is-visible {
	opacity: 1;
	transform: none;
	/* Release the compositor layer once the one-shot reveal has run. */
	will-change: auto;
}

/* Staggered grids: the wrapper stays put; its children reveal in sequence
   (index set as --tavel-i by interactions.js). Placed after the base reveal
   rule so it wins for the wrapper via source order. */
.tavel-js .tavel-reveal--stagger {
	opacity: 1;
	transform: none;
}
.tavel-js .tavel-reveal--stagger > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s var(--tavel-ease), transform 0.6s var(--tavel-ease);
	transition-delay: calc(var(--tavel-i, 0) * 70ms);
	will-change: opacity, transform;
}
.tavel-js .tavel-reveal--stagger.is-visible > * {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.tavel-js .tavel-reveal,
	.tavel-js .tavel-reveal--stagger > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =========================================================================
   App deep-link handoff (coupon activation / job view)
   ========================================================================= */
.tavel-handoff-page {
	max-width: 640px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	text-align: center;
}
.tavel-handoff-page__inner > * + * { margin-top: 1.25rem; }
.tavel-handoff-page__lead { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--medium); }
.tavel-handoff-page__hint { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.tavel-handoff-page__meta {
	display: inline-flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 1.5rem;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
}
.tavel-handoff-page__job-name { font-weight: 700; color: var(--wp--preset--color--heading); margin: 0; }
.tavel-handoff-page__job-id { color: var(--wp--preset--color--muted); font-size: 0.9rem; margin: 0; }

/* Coupon / job CTA buttons (rendered by shortcodes) */
.tavel-coupon-activation-cta,
.tavel-job-view-cta { text-align: center; }
.tavel-coupon-activation-cta--left,
.tavel-job-view-cta--left { text-align: left; }
.tavel-coupon-activation-cta--right,
.tavel-job-view-cta--right { text-align: right; }
.tavel-coupon-activation-code,
.tavel-job-view-meta { color: var(--wp--preset--color--muted); }
.tavel-coupon-activation-button,
.tavel-job-view-button {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.95rem 2rem;
	border-radius: 999px;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	background: var(--tavel-cta-button);
	box-shadow: var(--wp--preset--shadow--glow);
	text-decoration: none;
	transition: transform 0.25s var(--tavel-ease);
}
.tavel-coupon-activation-button:hover,
.tavel-job-view-button:hover { transform: translateY(-2px); color: var(--wp--preset--color--white); }
.tavel-coupon-activation-fallback,
.tavel-job-view-fallback { margin-top: 0.75rem; color: var(--wp--preset--color--accent); }
.tavel-coupon-activation-message,
.tavel-job-view-message { color: var(--wp--preset--color--muted); }

/* Consent-settings control rendered by the [klaro_consent_settings] shortcode. */
.tavel-consent-settings {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}
.site-footer a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.site-footer a:hover { color: var(--wp--preset--color--white); }