/**
 * Berger Voyages — Design System 2026 (couche additive)
 * Complements mu-plugins/bv-site-tweaks (master layer, !important, IO reveals).
 * This file only covers what the master layer does not:
 *   a11y (focus-visible, reduced motion), micro-typography, and components
 *   the master layer skips (hero-slider, hero-tranquille titles, popup,
 *   header actions, menu-square, newsletter form, FAQ, trip-detail, footer CTA,
 *   action-button, square-button, blue-bar).
 * Shape language matches the master layer: pill CTAs, 22px surfaces.
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */
:root {
	--ds-primary: #0d1b3d;
	--ds-primary-strong: #071228;
	--ds-primary-soft: #1a3468;
	--ds-primary-light: #2f55a4;
	--ds-ink: #23282d;
	--ds-ivory: #fbf8f1;
	--ds-sand: #c9b68a;

	--ds-radius-input: 12px;
	--ds-radius-card: 22px;
	--ds-radius-pill: 999px;

	--ds-shadow-md: 0 14px 30px -14px rgba(13, 27, 61, 0.55);
	--ds-shadow-lg: 0 24px 60px -34px rgba(13, 27, 61, 0.45);

	--ds-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ds-speed: 0.3s;
	--ds-ring: #2f55a4;
}

/* ------------------------------------------------------------------ *
 * 2. Base refinements & accessibility
 * ------------------------------------------------------------------ */
body {
	accent-color: var(--ds-primary);
}

::selection {
	background: var(--ds-primary);
	color: var(--ds-ivory);
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

:target {
	scroll-margin-top: 96px;
}

:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
	outline: 2px solid var(--ds-ring);
	outline-offset: 2px;
}

::placeholder {
	color: color-mix(in srgb, #6e6b66 75%, transparent);
	opacity: 1;
}

@supports (scrollbar-width: thin) {
	* {
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, var(--ds-primary) 45%, transparent) transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	/* Master layer reveals: show immediately */
	.bv-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * 3. CTAs not covered by the master layer — pill language
 * ------------------------------------------------------------------ */
.hero-slider__cta,
a.bv-footer-contact__cta,
.bv-nlf__submit,
.bv-faq__btn,
.bv-popup__cta,
.bv-trip-search__reset {
	border-radius: var(--ds-radius-pill);
	font-weight: 600;
	transition:
		background-color var(--ds-speed) var(--ds-ease),
		color var(--ds-speed) var(--ds-ease),
		box-shadow var(--ds-speed) var(--ds-ease),
		transform var(--ds-speed) var(--ds-ease),
		opacity var(--ds-speed) var(--ds-ease);
}
.hero-slider__cta:hover,
a.bv-footer-contact__cta:hover,
.bv-nlf__submit:hover,
.bv-faq__btn:hover,
.bv-popup__cta:hover {
	transform: translateY(-3px);
	box-shadow: var(--ds-shadow-md);
	opacity: 1;
}
.hero-slider__cta:active,
a.bv-footer-contact__cta:active,
.bv-nlf__submit:active,
.bv-faq__btn:active,
.bv-popup__cta:active {
	transform: translateY(0);
}

/* hero-slider CTA was off-palette pink -> primary */
.hero-slider__cta {
	background: var(--ds-primary);
	color: var(--ds-ivory);
}
.hero-slider__cta:hover,
.hero-slider__cta:focus-visible {
	background: var(--ds-primary-strong);
}

/* newsletter submit was orange -> primary */
.bv-nlf__submit {
	background: var(--ds-primary);
	color: var(--ds-ivory);
}
.bv-nlf__submit:hover {
	background: var(--ds-primary-strong);
	filter: none;
}

/* Trip-detail booking pill: black -> primary */
.bv-trip-detail__booking {
	background: var(--ds-primary);
	color: var(--ds-ivory);
	transition: background-color var(--ds-speed) var(--ds-ease),
		transform var(--ds-speed) var(--ds-ease),
		box-shadow var(--ds-speed) var(--ds-ease);
}
.bv-trip-detail__booking:hover {
	background: var(--ds-primary-strong);
	transform: translateY(-2px);
	box-shadow: var(--ds-shadow-md);
}

/* action-button prints inline colors/radius -> needs !important */
a.action-button {
	border-radius: var(--ds-radius-pill) !important;
	font-weight: 600;
	transition:
		filter var(--ds-speed) var(--ds-ease),
		box-shadow var(--ds-speed) var(--ds-ease),
		transform var(--ds-speed) var(--ds-ease);
}
a.action-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--ds-shadow-md);
	filter: brightness(0.94);
}

/* square-button: align radius + visible focus */
.square-button {
	border-radius: var(--ds-radius-input);
}
.square-button__link:focus-visible .square-button {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 25%, transparent);
}

/* Header actions (inline-styled) : unify shape */
.bv-header-actions .bv-ha__item {
	border-radius: var(--ds-radius-pill) !important;
	transition: background-color 0.2s var(--ds-ease),
		color 0.2s var(--ds-ease),
		box-shadow 0.2s var(--ds-ease);
}
.bv-header-actions .bv-ha__accent-group {
	border-radius: var(--ds-radius-pill);
}
.bv-header-actions .bv-ha__menu {
	border-radius: 14px;
	box-shadow: var(--ds-shadow-lg);
	border: 1px solid color-mix(in srgb, var(--ds-ink) 10%, transparent);
	overflow: hidden;
}

/* Menu-square trigger: keep the brand square, soften the corner */
.bv-ms__btn {
	border-radius: 14px !important;
	transition: background-color 0.2s var(--ds-ease),
		transform 0.2s var(--ds-ease);
}
.bv-ms__btn:hover {
	transform: scale(1.02);
}

/* ------------------------------------------------------------------ *
 * 4. Surfaces the master layer skips
 * ------------------------------------------------------------------ */
.bv-hero__cards {
	border-radius: var(--ds-radius-card);
	overflow: hidden;
	box-shadow: var(--ds-shadow-lg);
}

.bv-faq__card,
.bv-trip-detail__summary,
.bv-trip-detail__story {
	border-radius: var(--ds-radius-card);
	overflow: hidden;
}
.bv-faq__card {
	box-shadow: var(--ds-shadow-lg);
}

details.bv-trip-detail__accordion {
	border-radius: 14px;
	overflow: hidden;
	transition: background-color var(--ds-speed) var(--ds-ease);
}

.bv-trip-search__dropdown {
	border-radius: 14px;
	box-shadow: var(--ds-shadow-lg);
	overflow: hidden;
}

/* Newsletter form fields (underline style -> soft filled) */
.bv-nlf__field input {
	border: 1px solid color-mix(in srgb, var(--ds-ink) 12%, transparent);
	border-radius: var(--ds-radius-input);
	background-color: #fff;
	padding: 0.7em 0.9em;
	transition: border-color 0.2s var(--ds-ease), box-shadow 0.2s var(--ds-ease);
}
.bv-nlf__field input:hover {
	border-color: color-mix(in srgb, var(--ds-primary) 35%, transparent);
}
.bv-nlf__field input:focus {
	outline: none;
	border-color: var(--ds-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 16%, transparent);
}

/* ------------------------------------------------------------------ *
 * 5. Hero-tranquille display typography (master layer only adds scrim)
 * ------------------------------------------------------------------ */
.bv-hero__script {
	font-family: inherit;
	font-size: clamp(0.8125rem, 1.4vw, 0.9375rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
h1.bv-hero__main {
	font-family: inherit;
	font-weight: 750;
	letter-spacing: -0.02em;
	line-height: 1.06;
	font-size: clamp(2.5rem, 6.5vw, 4.75rem);
}
h2.hero-slider__title {
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.06;
}

/* ------------------------------------------------------------------ *
 * 6. Decorative details
 * ------------------------------------------------------------------ */
.bv-blue-bar__line {
	background: linear-gradient(90deg, var(--ds-primary-strong), var(--ds-primary-light));
	border-radius: var(--ds-radius-pill);
}

.hero-slider__arrow {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	background: rgba(255, 255, 255, 0.18);
	transition: background 0.2s var(--ds-ease), transform 0.2s var(--ds-ease);
}
.hero-slider__arrow:hover {
	background: rgba(255, 255, 255, 0.32);
	transform: scale(1.06);
}

.bv-popup__box {
	border-radius: var(--ds-radius-card);
	box-shadow: var(--ds-shadow-lg);
}
.bv-popup__overlay {
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.bv-footer-contact__links a {
	transition: opacity 0.2s var(--ds-ease);
	text-underline-offset: 4px;
}
.bv-footer-contact__links a:hover {
	text-decoration: underline;
	opacity: 0.85;
}