/* ==========================================================================
   WHEN TO MOVE? - global rules
   Only what theme.json cannot say. Section styles belong to their blocks.
   Use logical properties (inline/block, not left/right) so the Arabic
   RTL version mirrors without extra CSS.
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

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

:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--control);
}

::selection {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--paper);
}

/* Anchor links (#order, #about) land below the sticky header. */
[id] {
	scroll-margin-top: calc(var(--wp--custom--header-height) + 24px);
}

/* The editorial label: the small line that names what follows. */
.wtm-label {
	font-size: var(--wp--custom--label--size);
	letter-spacing: var(--wp--custom--label--tracking);
	text-transform: uppercase;
	font-weight: 500;
	color: var(--wp--preset--color--gold);
}

/* Buttons pressed */
.wp-element-button {
	transition: transform 160ms var(--wp--custom--ease--out),
	            background-color 200ms ease,
	            color 200ms ease;
}
.wp-element-button:active {
	transform: scale(0.975);
}

/* Cover block with a wide photo: add the class "wtm-cover-fit"
   (Block > Advanced > Additional CSS class). On phones the fixed height
   is dropped and the block takes a landscape shape, so the photo is
   cropped a little instead of losing two thirds of its width.
   It still grows if the text inside needs more room. */
@media (max-width: 781px) {
	.wp-block-cover.wtm-cover-fit {
		min-height: 0 !important; /* the editor writes min-height inline */
		aspect-ratio: 3 / 2 !important;
		padding-block: var(--wp--preset--spacing--40);
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}