/**
 * The brand, in one place.
 *
 * The navy, the gold, the muted ink and the hairline were declared three times
 * over — once in landing.css, once in hub.css, once in activity.css — with the
 * same six hex values written out each time under three different variable
 * names. Changing the accent meant three edits, and two of them would
 * eventually be forgotten.
 *
 * Declared on the module roots rather than on :root, because :root is the
 * document and this stylesheet loads onto a page the theme is also rendering.
 * A plugin that sets a custom property on :root has reached outside its own
 * subtree and can be read by anything in the theme that happens to use the
 * same name.
 *
 * One accent override exists, applied inline when the site has chosen an
 * accent colour in settings. It sets --wptm-gold on the same selectors, so
 * every module follows a single setting.
 */

.wptm-lp,
.wptm-hub,
.wptm-act {
	--wptm-navy: #001e53;
	--wptm-gold: #f5a500;
	--wptm-ink: #5b6478;
	--wptm-muted: #6b7590;
	--wptm-faint: #697389;
	--wptm-line: rgba(0, 30, 83, 0.1);
	--wptm-cream: #f5f1e8;
	--wptm-radius: 16px;

	/*
	 * The accent as a text colour.
	 *
	 * The gold is a brand colour, and on white it reads at 2:1 — a kicker or
	 * an eyebrow set in it fails the 4.5:1 that small text is held to. The
	 * faint grey above used to fail the same test at 3:1, which is why it is
	 * now a shade darker. Text that wants the accent takes this token: the
	 * same hue, darkened until it passes, and derived from --wptm-gold where
	 * the browser can mix colours so a site's own accent darkens with it.
	 * Icons, borders and buttons keep the bright accent; they are not text.
	 */
	--wptm-gold-text: #875f0a;

	/*
	 * The foundation every module shares.
	 *
	 * The tour page declares the same names on .wptm-tour (tour.css is not
	 * loaded with this file, and this file is not loaded with it), and the
	 * homepage on .wptm-home. Same values in each place, so a card on a
	 * landing page, a card on the homepage and a card on the archive are the
	 * same object with the same corners, the same lift and the same timing.
	 *
	 *   radius   xs 6 / sm 8 / md 10 / media 14 / lg 16 / pill
	 *   shadow   1 for a card under a cursor, 2 for a panel over the page
	 *   control  the height of a field or a button, and the tall one
	 *   type     an eyebrow, a meta line, and the tracking an eyebrow wears
	 *   motion   one duration and one curve for every hover
	 */
	--wptm-radius-xs: 6px;
	--wptm-radius-sm: 8px;
	--wptm-radius-md: 10px;
	--wptm-radius-media: 14px;
	--wptm-radius-lg: 16px;
	--wptm-radius-pill: 999px;
	--wptm-shadow-1: 0 1px 2px rgba(15, 20, 28, .06), 0 10px 24px -20px rgba(15, 20, 28, .35);
	--wptm-shadow-2: 0 18px 40px -24px rgba(15, 20, 28, .5);
	--wptm-control-h: 48px;
	--wptm-control-h-lg: 52px;
	--wptm-container: 1200px;
	--wptm-measure: 68ch;
	--wptm-fs-eyebrow: 12px;
	--wptm-fs-meta: 13px;
	--wptm-tracking-eyebrow: .12em;
	--wptm-lh-tight: 1.15;
	--wptm-lh-body: 1.65;
	--wptm-transition: .18s ease;
	--wptm-transition-slow: .35s ease;

	/* Shared tour cards use these aliases. Keeping them separate lets each
	   page keep its own palette while the card remains portable. */
	--wptm-card-navy: var(--wptm-navy);
	--wptm-card-accent: var(--wptm-gold);
	--wptm-card-ink: var(--wptm-ink);
	--wptm-card-muted: var(--wptm-muted);
	--wptm-card-faint: var(--wptm-faint);
	--wptm-card-line: var(--wptm-line);
	--wptm-card-radius: var(--wptm-radius);
}

/*
 * A [wptm_tours] grid may be placed on an ordinary theme page, outside the
 * landing, hub and activity wrappers above. Give that portable component a
 * complete, local set of tokens so borders, text and accents never disappear.
 * Page templates can customise it through the --wptm-card-* aliases without
 * leaking variables into the theme.
 */
.wptm-cards {
	--wptm-navy: var(--wptm-card-navy, #001e53);
	--wptm-gold: var(--wptm-card-accent, #b8853a);
	--wptm-ink: var(--wptm-card-ink, #4f5b70);
	--wptm-muted: var(--wptm-card-muted, #5b6472);
	--wptm-faint: var(--wptm-card-faint, #7b8496);
	--wptm-line: var(--wptm-card-line, rgba(0, 30, 83, .12));
	--wptm-cream: var(--wptm-card-cream, #f7f4ed);
	--wptm-gold-text: #875f0a;
	--wptm-radius: var(--wptm-card-radius, 16px);
	--wptm-radius-pill: 999px;
	--wptm-shadow-1: 0 1px 2px rgba(15, 20, 28, .06), 0 10px 24px -20px rgba(15, 20, 28, .35);
	--wptm-shadow-2: 0 18px 40px -24px rgba(15, 20, 28, .5);
	--wptm-fs-eyebrow: 12px;
	--wptm-tracking-eyebrow: .12em;
	--wptm-transition: .18s ease;
	--wptm-transition-slow: .35s ease;
}

/*
 * Where colours can be mixed, the text accent follows the site's accent.
 * Older browsers keep the fixed shade above, which passes on its own.
 */
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
	.wptm-lp,
	.wptm-hub,
	.wptm-act,
	.wptm-cards {
		--wptm-gold-text: color-mix(in srgb, var(--wptm-gold) 58%, #000);
	}
}

/*
 * One focus ring for every module.
 *
 * Each stylesheet draws its own, and they are the same ring: two pixels of
 * the accent, offset from the edge, on :focus-visible so a click leaves no
 * outline behind and a keyboard always finds one. Declared once here so a
 * control a module forgot is still visible to a keyboard, and overridden
 * wherever a module has a better answer for its own shape.
 */
.wptm-lp :focus-visible,
.wptm-hub :focus-visible,
.wptm-act :focus-visible,
.wptm-cards :focus-visible {
	outline: 2px solid var(--wptm-gold);
	outline-offset: 3px;
}

/*
 * A reader who asked for less motion gets none from these modules; the
 * hover lifts and fades in every stylesheet lean on the two transition
 * tokens, so zeroing the tokens is enough.
 */
@media (prefers-reduced-motion: reduce) {
	.wptm-lp,
	.wptm-hub,
	.wptm-act,
	.wptm-cards {
		--wptm-transition: 0s;
		--wptm-transition-slow: 0s;
	}
}

/* Group-rate clarification shared by cards and the existing booking layouts. */
.wptm-group-note {
	display: block;
	grid-column: 1 / -1;
	max-inline-size: 100%;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	margin-block-start: 0.25rem;
}
.wptm-group-note--detail {
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.55;
}
.wptm-group-summary {
	grid-column: 1 / -1;
	min-width: 0;
	margin-block: 1rem;
	padding-block: 1rem;
	border-block: 1px solid var(--wptm-line, #e3e6ea);
	font-size: 0.9375rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.wptm-group-summary p {
	margin: 0.25rem 0 0;
}
.wptm-group-summary [data-group-total] {
	font-weight: 600;
}
.wptm-group-summary [data-group-retry] {
	margin-block-start: 0.5rem;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 0.25rem;
	padding: 0.4rem 0.75rem;
	cursor: pointer;
}
.wptm-group-summary [hidden] {
	display: none;
}
.wptm-group-summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.wptm-card__price > .wptm-group-note,
.wptm-card2__price > .wptm-group-note,
.wptm-home__spotprice > .wptm-group-note {
	flex-basis: 100%;
}
.wptm-home__spotfact--price .wptm-group-note {
	flex-basis: auto;
}