/* ==========================================================================
   SiamInTravel — component layer
   Brand Guidelines Edition 01, 2026.

   Tokens live in theme.json and arrive here as --wp--preset--* and
   --wp--custom--*. This file only assembles them into the documented
   devices. If you need a new value, add a token — do not hardcode here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Accent binding

   One accent per piece; Marigold and Deep Red never share a layout (p.16).
   functions.php decides once per request and sets a body class. Everything
   downstream reads --sit-accent and therefore cannot pick the wrong one.
   -------------------------------------------------------------------------- */

.sit-accent-b2c {
	--sit-accent: var(--wp--preset--color--accent-b2c);
	--sit-accent-on: var(--wp--preset--color--text-primary); /* 14.6:1 on Marigold */
}

.sit-accent-b2b {
	--sit-accent: var(--wp--preset--color--accent-b2b);
	--sit-accent-on: var(--wp--preset--color--surface-page);
}

/* --------------------------------------------------------------------------
   2. Measure and rhythm

   Body copy caps at 66ch. Sections breathe at clamp(56px, 7vw, 120px).
   "If a layout feels crowded, remove an element — never shrink the gaps." (p.21)
   -------------------------------------------------------------------------- */

.sit-measure {
	max-width: var(--wp--custom--measure);
}

.sit-band {
	padding-block: var(--wp--preset--spacing--band);
}

/* --------------------------------------------------------------------------
   3. Eyebrow

   12 / 500 / .18em, uppercase. Takes the accent on dark fields, brand purple
   on light ones — never Marigold on white, which fails at every size (p.17).
   -------------------------------------------------------------------------- */

.sit-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-primary);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.sit-field-dark .sit-eyebrow,
.sit-field-purple .sit-eyebrow,
.sit-on-photo .sit-eyebrow {
	color: var(--sit-accent);
}

/* --------------------------------------------------------------------------
   4. Fields

   A "field" is a full-bleed colour band. Purple is the brand's own ground;
   the dark field is where B2B and the lattice live.
   -------------------------------------------------------------------------- */

.is-style-sit-field-purple {
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface-page);
}

.is-style-sit-field-dark {
	background-color: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--surface-page);
}

.is-style-sit-field-purple :is(h1, h2, h3, h4, h5),
.is-style-sit-field-dark :is(h1, h2, h3, h4, h5) {
	color: inherit;
}

.is-style-sit-card-tint {
	background-color: var(--wp--preset--color--surface-tint);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--60);
}

/* --------------------------------------------------------------------------
   5. Buttons

   Pill is the most recognisable UI signature (p.21). 44px minimum touch
   target, always. Marigold is legal as a filled pill because the label sits
   in near-black on top of it — it is never legal as text on white.
   -------------------------------------------------------------------------- */

.wp-block-button__link,
.sit-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--control--touch-min);
	padding-inline: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--cta);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition:
		background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard),
		border-color var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.is-style-sit-button-accent > .wp-block-button__link {
	background-color: var(--sit-accent);
	color: var(--sit-accent-on);
}

.is-style-sit-button-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--brand-primary);
	border: var(--wp--custom--border--strong) solid currentColor;
}

.is-style-sit-button-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface-page);
}

/* On a purple or dark field an outline button inverts. */
.is-style-sit-field-purple .is-style-sit-button-outline > .wp-block-button__link,
.is-style-sit-field-dark .is-style-sit-button-outline > .wp-block-button__link {
	color: var(--wp--preset--color--surface-page);
}

.is-style-sit-field-purple .is-style-sit-button-outline > .wp-block-button__link:hover,
.is-style-sit-field-dark .is-style-sit-button-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--surface-page);
	color: var(--wp--preset--color--brand-primary);
}

/* --------------------------------------------------------------------------
   6. Focus

   A single, loud, consistent focus ring. Digital-only purple (p.15) exists
   for exactly this job.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--border--strong) solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* --------------------------------------------------------------------------
   7. Inputs

   6px radius, 44px minimum, 1px hairline. Nothing else rounds.
   -------------------------------------------------------------------------- */

.sit-input,
input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="date"], [type="search"], [type="password"]),
select,
textarea {
	min-height: var(--wp--custom--control--touch-min);
	padding: 10px var(--wp--preset--spacing--30);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface-page);
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--brand);
	font-size: var(--wp--preset--font-size--body);
	width: 100%;
}

textarea {
	min-height: calc(var(--wp--custom--control--touch-min) * 2.5);
}

/* --------------------------------------------------------------------------
   8. The Aperture

   A frame for photography. Three crops, all on the 14px card radius, so
   imagery and interface share one corner (p.22).
   -------------------------------------------------------------------------- */

.is-style-sit-aperture-full img {
	border-radius: var(--wp--custom--radius--card);
}

.is-style-sit-aperture-point img {
	border-radius: var(--wp--custom--radius--card);
	border-top-right-radius: 0;
}

.is-style-sit-aperture-seat img {
	border-radius: var(--wp--custom--radius--card);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Type over photography always sits on a scrim (p.17). */
.sit-scrim {
	position: relative;
	isolation: isolate;
}

.sit-scrim > img,
.sit-scrim > picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sit-scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgb(26 10 28 / 0.78) 0%,
		rgb(26 10 28 / 0.45) 38%,
		rgb(26 10 28 / 0.05) 72%,
		rgb(26 10 28 / 0) 100%
	);
	pointer-events: none;
}

.sit-scrim > .sit-scrim__content {
	position: relative;
	z-index: 2;
	color: var(--wp--preset--color--surface-page);
}

/* --------------------------------------------------------------------------
   9. The Thread

   One unbroken line, entering, pausing at each waypoint, leaving. It means
   one team, start to finish, nothing dropped. 1.5px at 50% opacity, always —
   behind and beside content, never across the subject at full strength (p.23).
   -------------------------------------------------------------------------- */

.sit-thread {
	--sit-thread-color: var(--wp--preset--color--brand-secondary);
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	opacity: var(--wp--custom--thread--opacity);
	pointer-events: none;
}

.sit-thread path {
	fill: none;
	stroke: var(--sit-thread-color);
	stroke-width: var(--wp--custom--thread--width);
	stroke-linecap: round;
}

/* Every thread ends in a node, at both ends. The node is the emblem's sun. */
.sit-thread circle {
	fill: var(--wp--preset--color--accent-b2b);
	stroke: none;
}

.is-style-sit-field-purple .sit-thread,
.is-style-sit-field-dark .sit-thread {
	--sit-thread-color: var(--wp--preset--color--surface-page);
}

/* The foot rule on documents and stationery: node to node, nothing between. */
.sit-thread-rule {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	opacity: var(--wp--custom--thread--opacity);
}

.sit-thread-rule::before,
.sit-thread-rule::after {
	content: "";
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-b2b);
	flex: 0 0 auto;
}

.sit-thread-rule > span {
	flex: 1 1 auto;
	block-size: var(--wp--custom--thread--width);
	background-color: var(--wp--preset--color--brand-secondary);
}

/* --------------------------------------------------------------------------
   10. The Lattice

   Quiet structure. Three fixed sizes, 1px hairlines, 22%. Pick the token;
   never rescale it. Never behind body copy, never on photography, never as
   the only content of a surface (p.24).
   -------------------------------------------------------------------------- */

.sit-lattice {
	position: relative;
	isolation: isolate;
}

.sit-lattice::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: var(--wp--custom--lattice--opacity);
	background-image:
		repeating-linear-gradient(
			45deg,
			transparent 0,
			transparent calc(var(--sit-lattice-size) - var(--wp--custom--lattice--hairline)),
			currentColor calc(var(--sit-lattice-size) - var(--wp--custom--lattice--hairline)),
			currentColor var(--sit-lattice-size)
		),
		repeating-linear-gradient(
			-45deg,
			transparent 0,
			transparent calc(var(--sit-lattice-size) - var(--wp--custom--lattice--hairline)),
			currentColor calc(var(--sit-lattice-size) - var(--wp--custom--lattice--hairline)),
			currentColor var(--sit-lattice-size)
		);
	pointer-events: none;
}

.sit-lattice--sm   { --sit-lattice-size: var(--wp--custom--lattice--sm); }
.sit-lattice--dark { --sit-lattice-size: var(--wp--custom--lattice--dark); }
.sit-lattice--lg   { --sit-lattice-size: var(--wp--custom--lattice--lg); }

/* --------------------------------------------------------------------------
   11. Cards

   14px radius, 1px hairline, shadow only where elevation means something.
   -------------------------------------------------------------------------- */

.sit-card {
	background-color: var(--wp--preset--color--surface-page);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	transition:
		box-shadow var(--wp--custom--dur--base) var(--wp--custom--ease--standard),
		transform var(--wp--custom--dur--base) var(--wp--custom--ease--standard);
}

.sit-card:hover {
	box-shadow: var(--wp--preset--shadow--sm);
}

.sit-card__body {
	padding: var(--wp--preset--spacing--50);
}

/* --------------------------------------------------------------------------
   12. Data and prices

   Tabular figures everywhere a number has to be compared or trusted (p.32).
   -------------------------------------------------------------------------- */

.sit-figure,
.sit-price,
.woocommerce-Price-amount,
td.woocommerce-table__product-total,
.sit-quote-table td {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.sit-price {
	font-size: var(--wp--preset--font-size--h2);
	font-weight: 600;
	line-height: 1.06;
	color: var(--wp--preset--color--brand-primary);
}

.sit-data-label {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

/* --------------------------------------------------------------------------
   13. Motion

   Everything is a reveal or a move. Never a bounce. Content rises 16px and
   fades in over 420–720ms, staggered 60ms (p.40).
   -------------------------------------------------------------------------- */

.sit-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--wp--custom--dur--reveal) var(--wp--custom--ease--entrance),
		transform var(--wp--custom--dur--reveal) var(--wp--custom--ease--entrance);
	transition-delay: calc(var(--sit-reveal-index, 0) * var(--wp--custom--dur--stagger));
}

.sit-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* No motion is always a valid rendering of this brand. */
@media (prefers-reduced-motion: reduce) {
	.sit-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   14. Logo clear space

   x equals the height of the emblem's inner sun. Nothing enters that zone:
   no type, no rule, no image edge, no partner logo, no page trim. The margin
   from a page or viewport edge is 2x (p.13).
   -------------------------------------------------------------------------- */

.sit-logo {
	display: inline-block;
	padding: var(--sit-logo-x, 12px);
}

.sit-logo--horizontal { min-width: 140px; }
.sit-logo--square     { min-width: 90px; }
.sit-logo--emblem     { min-width: 24px; }

.sit-logo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0; /* the mark never picks up the card radius */
}

/* --------------------------------------------------------------------------
   15. Protest Riot

   Short destination expressions, campaign words, editorial accents. Never
   paragraphs, quotations, invoices, contracts, dense UI, accessibility-critical
   information, long headlines, corporate presentations. Never below 44px,
   never more than five words, never more than once per piece (p.20).
   -------------------------------------------------------------------------- */

.sit-display {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(44px, 8vw, 96px);
	font-weight: 400;
	line-height: 0.95;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* Documents switch it off entirely. */
.sit-document .sit-display {
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 600;
	text-transform: none;
}

/* --------------------------------------------------------------------------
   16. The booking block

   Photo, price, proof — in that order (p.36). The tax note and the pax
   minimum sit beside the figure, never in caption copy, because a traveller
   should never meet either for the first time at checkout.
   -------------------------------------------------------------------------- */

.sit-booking {
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--50);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: 420px;
}

.sit-booking__price .sit-price {
	margin: var(--wp--preset--spacing--10) 0 0;
}

.sit-booking__tax,
.sit-booking__pax-note {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--text-secondary);
}

/* Inclusions — 4 to 6, one word each, line icons only. */
.sit-inclusions {
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--40) 0;
	border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
}

.sit-inclusion {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--text-secondary);
	min-width: 56px;
}

.sit-inclusion__icon {
	color: var(--wp--preset--color--brand-primary);
}

/* On a dark or purple field the icons invert with their surroundings. */
.is-style-sit-field-dark .sit-inclusion__icon,
.is-style-sit-field-purple .sit-inclusion__icon,
.sit-on-photo .sit-inclusion__icon {
	color: var(--wp--preset--color--surface-page);
}

.sit-booking__fields {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.sit-field {
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.sit-field label {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

.sit-booking__estimate {
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.sit-booking__estimate output {
	font-size: 27px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--brand-primary);
}

.sit-booking__estimate-note,
.sit-booking__code {
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--text-secondary);
}

/* The code is secondary metadata and never competes with the product name. */
.sit-booking__code {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.sit-booking .single_add_to_cart_button {
	width: 100%;
}

/* --------------------------------------------------------------------------
   17. Print — quotations, itineraries, vouchers

   A document that earns trust, not an advertisement. Blades off; the Thread
   alone carries the brand (p.23, p.30, p.32).
   -------------------------------------------------------------------------- */

@media print {
	.sit-lattice::before,
	.sit-scrim::after,
	.sit-display {
		display: none;
	}

	.sit-card {
		border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--hairline);
		box-shadow: none;
	}

	body {
		background: #fff;
		color: #000;
	}
}