/*
 * Base: reset, typography, layout primitives, buttons, accessibility.
 *
 * Transcribed from the design source's global.css. Every colour, size, space
 * and duration is a theme.json token — there is not one raw hex or px value
 * below, and adding one is a review failure. The token names changed
 * (`--c-gold` became `--wp--preset--color--gold`); nothing else did.
 *
 * SLUGS WITH DIGITS ARE REWRITTEN BY WORDPRESS, and it does it silently.
 * A theme.json slug of `h1` is emitted as `--wp--preset--font-size--h-1`: a
 * hyphen is inserted wherever a letter meets a digit. `2xs` becomes `2-xs`.
 * Nothing warns you — `var(--wp--preset--font-size--h1)` simply resolves to
 * nothing and the property falls back, so every heading on the site rendered at
 * body size and three spacing steps collapsed to zero while the CSS looked
 * correct. Found by measuring a rendered heading, not by reading the file.
 *
 * So the slugs here are written in the form WordPress emits — `h-1`, `2-xs` —
 * and what is written is what is defined. Do not "tidy" them back.
 *
 * @package Slovenia_Concierge
 */

/* ------------------------------------------------------------------ reset */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchors must not hide behind the sticky header. */
	scroll-padding-top: calc( var( --wp--custom--header--height ) + var( --wp--preset--spacing--m ) );
}

/*
 * Horizontal overflow guard.
 * Deliberately on <html>, not <body>: an overflow value on body propagates to
 * the viewport and breaks painting of position:sticky/fixed descendants — which
 * is exactly what happened to the sticky header and the contact bar.
 *
 * Verified with the fixed header in place: clip on the root does not become a
 * containing block for it, so the header still resolves against the viewport.
 */
html {
	overflow-x: clip;
}

body {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--body );
	line-height: var( --wp--custom--line-height--body );
	color: var( --wp--preset--color--text );
	background: var( --wp--preset--color--cream );
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

ul,
ol {
	list-style: none;
	padding: 0;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

/* ------------------------------------------------------------- typography */
h1,
h2,
h3,
h4 {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 500;
	line-height: var( --wp--custom--line-height--heading );
	letter-spacing: var( --wp--custom--letter-spacing--display );
	text-wrap: balance;
}

h1 {
	font-size: var( --wp--preset--font-size--h-1 );
	line-height: var( --wp--custom--line-height--tight );
}

h2 {
	font-size: var( --wp--preset--font-size--h-2 );
}

h3 {
	font-size: var( --wp--preset--font-size--h-3 );
}

h4 {
	font-size: var( --wp--preset--font-size--h-4 );
}

p {
	text-wrap: pretty;
}

.eyebrow {
	display: block;
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 500;
	letter-spacing: var( --wp--custom--letter-spacing--eyebrow );
	text-transform: uppercase;
	color: var( --wp--preset--color--gold-deep );
}

.eyebrow--on-dark {
	color: var( --wp--preset--color--gold-light );
}

.lead {
	font-size: var( --wp--preset--font-size--lead );
	color: var( --wp--preset--color--text-muted );
}

.lead--on-dark {
	color: var( --wp--preset--color--text-on-dark-muted );
}

/* ------------------------------------------------------------------ layout */
.container {
	width: 100%;
	max-width: var( --wp--style--global--content-size );
	margin-inline: auto;
	padding-inline: var( --wp--custom--gutter );
}

.container--wide {
	max-width: var( --wp--style--global--wide-size );
}

.container--prose {
	max-width: var( --wp--custom--width--prose );
}

.section {
	padding-block: var( --wp--custom--section-y );
}

.section--tight {
	padding-block: var( --wp--custom--section-y-tight );
}

.section--dark {
	background: var( --wp--preset--color--black );
	color: var( --wp--preset--color--text-on-dark );
}

.section--soft {
	background: var( --wp--preset--color--cream-soft );
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
	color: var( --wp--preset--color--white );
}

.stack > * + * {
	margin-block-start: var( --wp--preset--spacing--m );
}

.center {
	text-align: center;
}

.center .container--prose,
.center.container--prose {
	margin-inline: auto;
}

/* A thin gold rule used as a section divider. The only decorative element. */
.rule {
	width: 3.5rem;
	height: var( --wp--custom--hairline );
	border: 0;
	background: var( --wp--preset--color--gold );
	margin-block: var( --wp--preset--spacing--m );
}

.center .rule {
	margin-inline: auto;
}

.rule--on-dark {
	background: var( --wp--preset--color--gold-light );
}

/* ----------------------------------------------------------------- buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --wp--preset--spacing--2-xs );
	min-height: 3rem;
	padding: 0.85rem 1.75rem;
	border: var( --wp--custom--hairline ) solid currentColor;
	border-radius: var( --wp--custom--radius );
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	letter-spacing: var( --wp--custom--letter-spacing--caps );
	text-transform: uppercase;
	text-decoration: none;
	transition:
		background-color var( --wp--custom--transition--base ) var( --wp--custom--transition--ease ),
		color var( --wp--custom--transition--base ) var( --wp--custom--transition--ease ),
		border-color var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
}

/* Primary = WhatsApp. Gold outline that fills on hover. */
.btn--primary {
	color: var( --wp--preset--color--gold-deep );
	border-color: var( --wp--preset--color--gold );
	background: transparent;
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var( --wp--preset--color--gold-deep );
	border-color: var( --wp--preset--color--gold-deep );
	color: var( --wp--preset--color--white );
}

.btn--secondary {
	color: var( --wp--preset--color--text );
	border-color: var( --wp--custom--border--on-light-soft );
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
	border-color: var( --wp--preset--color--text );
	background: var( --wp--preset--color--text );
	color: var( --wp--preset--color--cream );
}

.btn--on-dark {
	color: var( --wp--preset--color--gold-light );
	border-color: var( --wp--preset--color--gold-light );
}

.btn--on-dark:hover,
.btn--on-dark:focus-visible {
	background: var( --wp--preset--color--gold-light );
	border-color: var( --wp--preset--color--gold-light );
	color: var( --wp--preset--color--black );
}

.btn--ghost-on-dark {
	color: var( --wp--preset--color--text-on-dark );
	border-color: var( --wp--custom--border--on-dark-soft );
}

.btn--ghost-on-dark:hover,
.btn--ghost-on-dark:focus-visible {
	border-color: var( --wp--preset--color--white );
	background: var( --wp--preset--color--white );
	color: var( --wp--preset--color--black );
}

.btn__icon {
	width: 1.05em;
	height: 1.05em;
	flex: none;
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--s );
}

.center .cta-row {
	justify-content: center;
}

/* Text link with a gold underline that grows on hover. */
.link-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	letter-spacing: var( --wp--custom--letter-spacing--caps );
	text-transform: uppercase;
	text-decoration: none;
	color: var( --wp--preset--color--gold-deep );
	padding-block-end: 0.35em;
	border-block-end: var( --wp--custom--hairline ) solid var( --wp--custom--gold-hairline );
	transition:
		border-color var( --wp--custom--transition--base ) var( --wp--custom--transition--ease ),
		color var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
}

.link-more:hover,
.link-more:focus-visible {
	color: var( --wp--preset--color--text );
	border-block-end-color: var( --wp--preset--color--text );
}

/* ------------------------------------------------------------ a11y basics */
:focus-visible {
	outline: 2px solid var( --wp--custom--focus );
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: var( --wp--preset--spacing--s );
	top: var( --wp--preset--spacing--s );
	z-index: 100;
	padding: var( --wp--preset--spacing--2-xs ) var( --wp--preset--spacing--s );
	background: var( --wp--preset--color--black );
	color: var( --wp--preset--color--white );
	transform: translateY( -200% );
	transition: transform var( --wp--custom--transition--fast ) var( --wp--custom--transition--ease );
}

.skip-link:focus {
	transform: translateY( 0 );
}

/*
 * `.screen-reader-text` is WordPress's own class, emitted by core markup the
 * theme does not author — comment forms, nav widgets, pagination. It is styled
 * here alongside the design's `.visually-hidden` because a theme that styles
 * only its own class leaks core's hidden labels into the page as stray visible
 * text.
 */
.visually-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------- desktop breakpoint */
/*
 * The header tokens are the only ones that change with viewport. theme.json
 * cannot express a media query, so the desktop values are separate tokens and
 * the switch happens here, once, rather than at every usage site.
 */
@media ( min-width: 64rem ) {
	html {
		scroll-padding-top: calc( var( --wp--custom--header--height-desktop ) + var( --wp--preset--spacing--m ) );
	}
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}