/*
 * Block style variations and small block-level overrides.
 */

/* ---- Layout spacing ----
 * WordPress derives four rules from theme.json's blockGap: a vertical margin on
 * every flow and constrained child, and the gap on flex and grid containers. The
 * margins are zeroed here — sections already set their own padding, and the
 * automatic stacking margin only ever fought with it — while the flex/grid gap is
 * left alone, so columns keep their gutters and button groups their spacing.
 *
 * Core writes those rules inside :where(), which carries no specificity, so a plain
 * class selector wins without !important.
 *
 * Consequence: vertical space between stacked blocks is now explicit. Set it on the
 * block itself or on the section that holds it; nothing is inherited any more. */
.is-layout-flow > *,
.is-layout-constrained > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Gold call-to-action button ("Accent"). Navy text on gold in every section. */
.wp-block-button.is-style-accent > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: #1D3653;
}
.wp-block-button.is-style-accent > .wp-block-button__link:hover,
.wp-block-button.is-style-accent > .wp-block-button__link:focus {
	background-color: #D3AF88;
	color: #1D3653;
}

/* ---- Sticky header ----
   The header stays put once the page scrolls under it. It is opaque (white
   background + bottom border), so content passes cleanly beneath.

   z-index 100 clears page content, which sets none of its own, while staying
   under the admin bar (99999). Nothing else in the theme uses z-index. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* The bar's own look. These used to be block attributes on the header group,
	 * but as attributes they were unbeatable — core writes preset colour classes
	 * with !important and border styles inline — so the front page could never turn
	 * the header transparent. Declared here, the .home rules below simply win. */
	background: var(--wp--preset--color--white, #fff);
	border-bottom: 1px solid var(--wp--preset--color--border, #D8DCE5);
}

/* Remove the root blockGap between the header and whatever follows it (the main /
 * hero), so the hero sits flush under the header. Only this one gap is collapsed;
 * the global blockGap that spaces sections apart is untouched. */
.site-header + * {
	margin-top: 0;
}

/* And the hero is main's first child — make sure the constrained layout doesn't
 * leave a leading margin above it either. */
.site-header + main > :first-child {
	margin-top: 0;
}

/* Shrink to a slim bar once the page scrolls. The height is the inner group's
 * vertical padding, so the scrolled state just tightens that (and the logo) with a
 * transition so it eases in. ~60px total: 12px top + 12px bottom + the logo. */
.site-header > .wp-block-group {
	transition: padding 0.25s ease;
}

.site-header .wp-block-site-logo,
.site-header .wp-block-site-logo img {
	transition: width 0.25s ease;
}

.site-header.is-scrolled > .wp-block-group {
	padding-top: 12px;
	padding-bottom: 12px;
}

.site-header.is-scrolled .wp-block-site-logo {
	width: 96px;
}

.site-header.is-scrolled .wp-block-site-logo img {
	width: 96px;
}

/* Logged-in users have the admin bar fixed above the viewport — sit below it.
   Core's admin bar is 32px wide-screen, 46px at <=782px, and switches to
   position:absolute at <=600px, where it scrolls away and needs no offset. */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media screen and (max-width: 480px) {
	.admin-bar .site-header {
		top: 0;
	}
}

/* Navigation tracking, as in the mockups (关于STAR TRIP etc. are letter-spaced). */
.site-header .wp-block-navigation a {
	letter-spacing: 0.08em;
}

/* ---- Homepage: transparent header over the hero ----
 *
 * On the front page the mockup runs the hero image up behind the header: white
 * navigation over the starry sky, no background, no border. The header therefore
 * sits absolute (out of flow, so the hero starts at the top of the viewport) and
 * only becomes the familiar white bar when header-scroll.js stamps .is-scrolled —
 * at which point it switches to fixed so it slides in over the content.
 *
 * The logo is an uploaded image and cannot be recoloured, so over the hero it is
 * filtered to white; the filter drops with .is-scrolled.
 *
 * The colour overrides carry !important only because core's .has-primary-color
 * preset class is itself !important. */
.home .site-header {
	position: absolute;
	background: transparent;
	border-bottom: 0;
	width: 100%;
}

.home .site-header.is-scrolled {
	position: fixed;
	left: 0;
	right: 0;
	background: var(--wp--preset--color--white, #fff);
	border-bottom: 1px solid var(--wp--preset--color--border, #D8DCE5);
}

/* Over the homepage hero the header is transparent, so the menu is set white.
 *
 * This does not need to except the open mobile overlay: core gives that container
 * its own preset colour classes from the block's overlay attributes, and preset
 * colour classes carry !important, so the overlay's own colour wins on the
 * overlay's own element and the items inherit from there.
 *
 * What was missing was the overlay's *background*. With no overlayBackgroundColor
 * set, core leaves it inheriting — transparent, over a transparent header — so the
 * white menu text sat on the page behind it and the menu looked empty when it
 * opened. parts/header.html now sets navy with white text. */
.home .site-header:not(.is-scrolled) .wp-block-navigation.has-primary-color,
.home .site-header:not(.is-scrolled) p.has-primary-color {
	color: #fff !important;
}

.home .site-header:not(.is-scrolled) .header-account {
	color: #fff;
}

.home .site-header:not(.is-scrolled) .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

/* Header account link */
.header-account {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.header-account svg { width: 20px; height: 20px; }
.header-account:hover { color: var(--wp--preset--color--primary-dark); }

/* ---- Header on phones ----
 *
 * One row: logo, then the burger, the account icon and the language switch. The
 * utility group used to wrap onto a second line, which cost a whole row of header
 * height to hold two small controls.
 *
 * 600px, not the site's own 768, because that is where core swaps the menu for the
 * burger (overlayMenu: mobile). Above it the full menu is showing and there is no
 * burger to sit beside.
 *
 * Order rather than markup: the source order is logo, nav, utils, and the design
 * wants the burger after the two utilities. Reordering in CSS keeps one DOM — and
 * keeps the reading order for a screen reader the same as it is on desktop. */
@media (max-width: 599px) {
	.header-row {
		flex-wrap: nowrap;
		gap: 0.9rem;
	}

	/* 语言切换, 账户图标, 汉堡 — the burger last, on the edge, where a thumb reaches
	   it. The utility group's own source order is already 语言 then 账户, so only
	   the two groups need placing. */
	.header-row > .header-utils {
		order: 1;
		gap: 0.9rem;
	}

	.header-row > .wp-block-navigation {
		order: 2;
	}

	/* Icon only. Hidden the accessible way, not with display:none — the icon is
	   aria-hidden, so removing the label outright would leave the link with no
	   name at all. */
	.header-account span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* The four items come to about 327px at 360 wide — comfortable, but only just, and
   a 320px screen is 7px short. The logo gives up the difference rather than the row
   wrapping or the language switch being cut off. */
@media (max-width: 359px) {
	.site-header .wp-block-site-logo img {
		max-width: 104px;
	}
}

/* The close button in the open menu sat hard against the corner. Core positions it
   absolutely at the container's edge, and the container's own padding is not what
   holds it off. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--50, 1.5rem);
	right: var(--wp--preset--spacing--50, 1.5rem);
}

/* Footer link lists: plain vertical lists, no bullet markers. */
.site-footer .wp-block-list { list-style: none; margin: 0; padding-left: 0; }
.site-footer .wp-block-list li { margin-bottom: 0.45rem; }

/* Footer middle (brand) column: vertical rules on both sides, everything centred —
 * logo, blurb, social icons — as in the mockup. */
.footer-brand {
	border-inline: 1px solid var(--wp--preset--color--border, #D8DCE5);
	padding-inline: var(--wp--preset--spacing--60, 2.5rem);
	text-align: center;
}

.footer-brand .wp-block-site-logo img {
	margin-inline: auto;
}

.footer-brand .footer-social {
	justify-content: center;
}

.site-footer h4.wp-block-heading {
	margin-bottom: 26px;
}

/* The side rules only make sense while the columns sit side by side. */
@media (max-width: 768px) {
	.footer-brand {
		border-inline: 0;
		padding-inline: 0;
		text-align: left;
	}

	.footer-brand .wp-block-site-logo img {
		margin-inline: 0;
	}

	.footer-brand .footer-social {
		justify-content: flex-start;
	}
}

/* Footer social icons (self-coloured SVGs). */
.footer-social { display: flex; gap: 0.65rem; margin-top: 1rem; }
.footer-social a { display: inline-flex; line-height: 0; }
.footer-social svg { width: 38px; height: 38px; display: block; }

/* ---- Homepage: "Discover more" tabs + panels ----
 *
 * Styled in sections.css, which owns this component end to end — the scrolling
 * row, the overflow arrows, the grid placement and the panels.
 *
 * A second copy lived here and was the older of the two. sections.css loads after
 * this file, so it won everything the two both declared and the duplicate was
 * invisible — except for the one property only this copy set: a 1px border under
 * the tab row, which nothing overrode and which therefore showed. That is the
 * shape of the problem with two files styling one thing: what leaks through is
 * whatever the newer file happens not to mention.
 */

/* Journey cards */
.home-cards a { color: #fff; text-decoration: none; }
.home-cards a:hover { color: var(--wp--preset--color--accent); }
.home-cards .wp-block-cover { transition: transform 0.2s ease; }
.home-cards .wp-block-cover:hover { transform: translateY(-4px); }

/* ---- Explore pages: feature strip (1 x 6 icons) ---- */
.feature-strip { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--40); }
.feature-strip__item {
	flex: 1 1 0;
	min-width: 120px;
	text-align: center;
	color: var(--wp--preset--color--primary);
}
.feature-strip__item svg { height: 40px; width: auto; display: block; margin: 0 auto 0.6rem; }
.feature-strip__item span {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	line-height: 1.4;
}

/* ---- Explore pages: category header (title left, link right) ---- */
.category-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.category-head__more {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}
.category-head__more:hover { color: var(--wp--preset--color--accent); }

/* ---- Explore pages: tour cards ---- */
.tour-card__media { border-radius: 6px; overflow: hidden; transition: transform 0.2s ease; }
.tour-card:hover .tour-card__media { transform: translateY(-4px); }
.tour-card .wp-block-heading { margin: 0.75rem 0 0.35rem; }
.tour-card p { margin: 0 0 0.35rem; }
.tour-card__price { font-weight: 600; }

@media (max-width: 768px) {
	.feature-strip__item { flex: 1 1 30%; }
}

/* ---- Tour detail: intro ----
 * 产品描述 is the long field — several paragraphs, sometimes headings and lists — so
 * unlike the hero's one-line short description it needs spacing between paragraphs.
 * It runs the full content column: the section's own width is the measure. */
.tour-intro .wp-block-post-content {
	margin-top: var(--wp--preset--spacing--40, 1rem);
}

.tour-intro .wp-block-post-content > * + * {
	margin-top: var(--wp--preset--spacing--40, 1rem);
}

.tour-intro .wp-block-post-content > :first-child {
	margin-top: 0;
}

/* ---- Tour detail: hero price line ---- */
/* --tc-hero-ink is the per-tour override from the 顶部大图配色 metabox; white is
   what the design uses over a night sky. */
.tour-hero__price { display: flex; align-items: baseline; gap: 0.5rem; color: var(--tc-hero-ink, #fff); }
/* The figure is the accent, and it follows the button's colour: the two are the
   page's one highlight, and a gold number beside a red button would read as an
   oversight. "NZD" and "/人起" are words, so they follow the text colour with
   everything else — that is the split the client asked for, and it is also what
   keeps the number legible when the accent is light. */
.tour-hero__price b {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 600;
	color: var(--tc-hero-btn-bg, var(--wp--preset--color--accent));
}

/* ---- Tour detail: highlight cards ---- */
.highlight-card .wp-block-cover { border-radius: 6px; }

/* ---- Tour detail: audience chips ---- */
.audience-strip { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--40); }
.audience-chip {
	flex: 1 1 0;
	min-width: 130px;
	text-align: center;
	padding: 1rem 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: #fff;
}
.audience-chip svg { height: 26px; width: auto; display: block; margin: 0 auto 0.5rem; color: var(--wp--preset--color--primary); }
.audience-chip b { display: block; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast); }
.audience-chip span { display: block; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--subtle); margin-top: 0.2rem; }

/* ---- Tour detail: itinerary timeline ---- */
.itinerary { position: relative; padding-left: 1.75rem; }
.itinerary::before {
	content: "";
	position: absolute;
	left: 5px; top: 0.75rem; bottom: 0.75rem;
	border-left: 1px solid var(--wp--preset--color--border);
}
.itin-row { position: relative; }
.itin-row::before {
	content: "";
	position: absolute;
	left: -1.75rem; top: 0.75rem;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}
.itin-row .tour-card__media,
.itin-row .wp-block-cover { border-radius: 6px; }
.itin-day { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--subtle); margin: 0 0 0.25rem; }
.itin-place { font-weight: 600; color: var(--wp--preset--color--contrast); line-height: 1.6; margin: 0; }
.itin-meta { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.9rem; }
.itin-meta svg { height: 18px; width: auto; flex: 0 0 auto; color: var(--wp--preset--color--primary); margin-top: 2px; }
.itin-meta ul { list-style: none; margin: 0; padding: 0; }
.itin-meta li { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--contrast); line-height: 1.9; }
.tour-download { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--wp--preset--color--primary); text-decoration: none; font-size: var(--wp--preset--font-size--small); }
.tour-download:hover { color: var(--wp--preset--color--accent); }

/* 费用说明 and the price box are travel-core blocks; their styling lives with the
   blocks, in the plugin's tour-fields.css. Two files styling one element only
   works while the load order happens to be favourable. */

@media (max-width: 768px) {
	.audience-chip { flex: 1 1 40%; }
}

/* ---- List pages: hero (photo + centred title, nothing else) ---- */
.list-hero .wp-block-post-title,
.list-hero .wp-block-query-title {
	color: #fff;
	text-align: center;
	font-weight: 400;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	margin: 0;
}

/* ---- List pages: grid cards ---- */
.grid-card .wp-block-cover { border-radius: 6px; }
.grid-card__title { margin: 0 0 0.4rem; }
.grid-card__meta { margin: 0; }
.card-arrow {
	/* The cover's inner container is position:relative in core, and already sits
	   inside the cover's padding — so 0/0 lands one padding-step in from the card
	   edge, level with the meta text, which is where the design puts it. */
	position: absolute;
	right: 0;
	bottom: 0;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	font-size: 0.9rem;
	line-height: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.card-arrow:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
}

/* ---- List pages: pagination ---- */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pagination li { margin: 0; }
.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 0.4rem;
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.pagination a:hover { background: var(--wp--preset--color--surface); }
.pagination .is-current {
	background: var(--wp--preset--color--primary);
	color: #fff;
}
.pagination .is-dots { color: var(--wp--preset--color--subtle); }

/* ---- List pages: horizontal rows ---- */
.list-row .wp-block-cover { border-radius: 6px; }
.list-row__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}
.list-row__more:hover { color: var(--wp--preset--color--accent); }/* ---- Prose ----
 *
 * The reset at the top of this file strips the vertical margins off every layout
 * child, which is right for the stacked sections a landing page is built from and
 * wrong for a page of writing: headings, paragraphs, lists and rules all ran
 * together with nothing between them.
 *
 * `.prose-body` is put on the post-content of the two templates where somebody types
 * prose into the editor: `page.html`, the catch-all, and `text-page.html` — 使用条款,
 * 隐私政策 and the six FAQ pages. One class rather than two selectors, so the two
 * templates cannot drift apart.
 *
 * Not on the homepage, About or the explore pages: those render through the same
 * block but are built from stacked sections, and paragraph spacing would push their
 * layouts apart.
 *
 * Spacing is asymmetric on purpose. A heading belongs to what follows it, so the gap
 * above one is large and the gap below it small — that is what makes a document read
 * as sections rather than as evenly spaced lines. Same reasoning for a rule.
 */
.prose-body > * {
	margin-block: 0 var(--wp--preset--spacing--40, 1rem);
}

.prose-body > h1,
.prose-body > h2,
.prose-body > h3,
.prose-body > h4,
.prose-body > h5,
.prose-body > h6 {
	margin-block: var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--30, 0.75rem);
}

/* The container's own padding is the gap above the first thing and below the last. */
.prose-body > :first-child {
	margin-block-start: 0;
}

.prose-body > :last-child {
	margin-block-end: 0;
}

.prose-body > ul,
.prose-body > ol {
	padding-left: 1.6rem;
}

.prose-body li + li {
	margin-top: 0.4rem;
}

/* A rule is a section break, so it carries a section's worth of space. */
.prose-body > hr {
	margin-block: var(--wp--preset--spacing--70, 2.5rem) var(--wp--preset--spacing--60, 2rem);
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border, #D8DCE5);
}

.prose-body > blockquote {
	margin-block: var(--wp--preset--spacing--50, 1.5rem);
	padding-left: var(--wp--preset--spacing--50, 1.5rem);
	border-left: 3px solid var(--wp--preset--color--muted-blue, #AAB6C6);
	color: var(--wp--preset--color--secondary, #415F7E);
}

/* ---- Explore pages: prose typed into the page ----
 *
 * These three pages hold both things in one `post-content`: the section blocks that
 * build the page — the feature strip, the category rows — and whatever text the
 * client writes between them. The reset at the top of this file leaves all of it
 * with no vertical margins, which is right for the sections and wrong for the text.
 *
 * So the rules name text elements only. A group, a separator or a dynamic block
 * keeps its zero margin and its own spacing; a heading or a paragraph typed straight
 * into the editor gets the same rhythm as `.prose-body`.
 *
 * `> ` matters: a paragraph inside the feature strip is that block's business, not
 * this rule's.
 */
.section-prose h1,
.section-prose h2,
.section-prose h3,
.section-prose h4,
.section-prose h5,
.section-prose h6 {
	margin-block: var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--30, 0.75rem);
}

.section-prose p,
.section-prose ul,
.section-prose ol {
	margin-block: 0 var(--wp--preset--spacing--40, 1rem);
}

.section-prose ul,
.section-prose ol {
	padding-left: 1.6rem;
}

.section-prose li + li {
	margin-top: 0.4rem;
}

/* Nothing needs a gap above the first thing in its container — the container's own
   padding is that gap. */
.section-prose > :first-child,
.section-prose .wp-block-group > :first-child {
	margin-block-start: 0;
}

/* The blocks that lay themselves out are excluded by name. Their text is arranged by
   their own stylesheets — an advantage card's title sitting 2rem below its icon
   would be this rule leaking into a component that never asked for it.
   
   Listed rather than scoped with `>` because the client's text turned out to be
   wrapped in a group, which a child selector cannot reach. Naming what to leave
   alone is the smaller list and the one that stays true as pages are edited. */
.section-prose .tc-adv :is(h1, h2, h3, h4, h5, h6, p, ul, ol),
.section-prose .tc-cards :is(h1, h2, h3, h4, h5, h6, p, ul, ol),
.section-prose .tc-listrow :is(h1, h2, h3, h4, h5, h6, p, ul, ol),
.section-prose .category-head :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {
	margin-block: 0;
	padding-left: 0;
}

/* ---- Explore pages: feature strip descriptions + dividers ---- */
.feature-strip__item + .feature-strip__item { border-left: 1px solid var(--wp--preset--color--border); }
.feature-strip__item p {
	font-size: var(--wp--preset--font-size--x-small);
	/* Primary, not neutral grey — the design tints this copy with the section
	   colour. It only reads as grey because the type is small. */
	color: var(--wp--preset--color--primary);
	line-height: 1.8;
	margin: 0.5rem 0 0;
	text-align: left;
}

/* ---- Explore pages: hero eyebrow (small sans line above the title) ---- */
.hero-eyebrow {
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.18em;
	margin: 0 0 0.75rem;
}

/* ---- Explore pages: card badge chip ---- */
/* 38 × 24 in the mockup, holding two characters: 8px of padding each side, and
   enough above and below that the pill reads as a chip rather than a highlight
   behind the words. */
.card-badge {
	display: inline-block;
	padding: 0.3rem 0.5rem;
	margin-bottom: 0.5rem;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.28);
	color: #fff;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.2;
}

/* ---- Explore pages: category heading suffix, e.g. （4大方向） ---- */
.cat-suffix {
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

/* ---- About: hero wordmark ---- */
.about-hero__title {
	letter-spacing: 0.12em;
	margin: 0 0 0.5rem;
}
.about-hero__sub {
	color: #fff;
	letter-spacing: 0.1em;
	margin: 0;
}

/* ---- About: section heading with a rule above it ---- */
.rule-heading { position: relative; padding-top: 1rem; }
.rule-heading::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ---- About: "why" three-up with dividers ---- */
.why-strip { display: flex; flex-wrap: wrap; gap: 0; }
.why-strip__item {
	flex: 1 1 0;
	min-width: 200px;
	padding: 0 var(--wp--preset--spacing--60);
	text-align: center;
}
.why-strip__item + .why-strip__item { border-left: 1px solid var(--wp--preset--color--border); }
.why-strip__item svg {
	height: 62px;
	width: auto;
	display: block;
	margin: 0 auto var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--primary);
}
.why-strip__item b {
	display: block;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	line-height: 1.5;
}
.why-strip__item p {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--subtle);
	line-height: 1.9;
	margin: var(--wp--preset--spacing--50) 0 0;
	text-align: left;
}

/* ---- About: brand logo tiles ----
   Bundled with the theme rather than the media library, so the paths are
   relative to this file. Swap a logo by replacing the file in assets/images/. */
.logo-tiles { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--50); }
.logo-tile {
	flex: 0 1 256px;
	aspect-ratio: 1;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 2px;
}
.logo-tile--mitsubishi { background-image: url("../images/logo-mitsubishi.png"); }
.logo-tile--subaru     { background-image: url("../images/logo-subaru.png"); }
.logo-tile--hyundai    { background-image: url("../images/logo-hyundai.png"); }
.logo-tile--nissan     { background-image: url("../images/logo-nissan.png"); }

@media (max-width: 768px) {
	.why-strip__item { flex: 1 1 100%; }
	.why-strip__item + .why-strip__item {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--border);
		margin-top: var(--wp--preset--spacing--60);
		padding-top: var(--wp--preset--spacing--60);
	}
	.logo-tile { flex: 0 1 45%; }
}


/* ---- Header: current page marker ----
   The design mutes the active nav item to a 50% tint of the section colour
   (#8895A4 on navy, #BB7F7F on red, #82ABBA on teal — all primary at 50%). */
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation .current_page_item > a {
	color: color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent);
}

/* ---- Step 3: 支付订单 ---- */
.pay-countdown {
	margin: 0 0 var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--small);
}

.pay-countdown__clock {
	margin-left: 0.5rem;
	color: var(--wp--preset--color--primary);
	font-variant-numeric: tabular-nums;
}

.pay-countdown.is-expired .pay-countdown__clock {
	color: var(--wp--preset--color--china-red);
}

.pay-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--surface);
	border-radius: 8px;
}

.pay-grid h2 {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--large);
}

/* ---------------------------------------------------------------------------
 * Step 3 placeholder — no payment aggregator connected yet.
 *
 * Sits where the gateway list will go. Deliberately plain and clearly labelled
 * so nobody mistakes the test button for a real payment; remove alongside the
 * placeholder markup in woocommerce/checkout/form-pay.php.
 * ------------------------------------------------------------------------ */
.pay-pending {
	padding: var(--wp--preset--spacing--50);
	border: 1px dashed var(--wp--preset--color--border, #D8DCE5);
	border-radius: 6px;
	background: #fff;
}

.pay-pending__note {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--subtle, #6B7280);
	line-height: 1.9;
}

.pay-pending__form {
	margin: 0;
}

.pay-pending__btn {
	width: 100%;
}

/* ---- Busy submit buttons ----
 * Any submit button with data-busy gets this while its form is posting, so the
 * page isn't silently doing nothing between the click and the redirect. The mark
 * is a ::before so the label underneath can be swapped freely. */
[data-busy].is-loading::before {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-right: 0.5em;
	vertical-align: -0.1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: st-spin 0.7s linear infinite;
}

[data-busy]:disabled {
	cursor: default;
	opacity: 0.85;
}

@keyframes st-spin {
	to {
		transform: rotate(360deg);
	}
}

/* A still spinner would say nothing, so slow it right down rather than stopping
   it; the swapped label carries the meaning either way. */
@media (prefers-reduced-motion: reduce) {
	[data-busy].is-loading::before {
		animation-duration: 2.4s;
	}
}

/* .wp-element-button carries theme.json's button colours, written as
   `:root :where(.wp-element-button)` — one pseudo-class, so the same specificity as
   this class, and global styles print after the stylesheet. Doubling the class wins
   on specificity alone and keeps the declaration honest; !important here would also
   beat the per-tour custom property in a way that is harder to reason about later. */
.tc-btn--accent.tc-btn--accent,
.tc-btn--accent.tc-btn--accent:hover,
.tc-btn--accent.tc-btn--accent:focus,
.tc-btn--accent.tc-btn--accent:active {
	background: var(--tc-hero-btn-bg, var(--wp--preset--color--accent));
	color: var(--tc-hero-btn-ink, var(--wp--preset--color--primary));
	border: 0;
	padding: 0.9rem 2.5rem;
	border-radius: 4px;
	cursor: pointer;
}

/* theme.json also gives buttons a navy :hover / :focus / :active. Left alone the
   button would jump back to the theme colour the moment a cursor touched it, which
   is why those states are listed above. The feedback comes from opacity instead, so
   it works whatever colour the tour is set to. */
.tc-btn--accent.tc-btn--accent:hover,
.tc-btn--accent.tc-btn--accent:focus {
	opacity: 0.88;
}

/* ---- 预定成功 / 发送成功 ----
   One component, two pages: the WooCommerce thankyou override and travel-core's
   consult form both render star_trip_success_screen().

   Measurements come off the mockups at 1440px: an 807px band, a 792px card sitting
   144px down from the top (not centred — it holds that position on the enquiry
   screen too, which has no contact row under it), 62px of padding inside the card.
   The vw terms reproduce those numbers at 1440 and shrink from there. */
.booking-done {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: clamp(520px, 56vw, 807px);
	padding: clamp(3rem, 10vw, 9rem) var(--wp--preset--spacing--40) clamp(2.5rem, 5.7vw, 5.125rem);
	background: var(--wp--preset--color--primary-dark)
		var(--st-success-bg, url(../images/booking-done-bg.webp)) center/cover no-repeat;
}

/* No scrim over the photo. The mockup's backdrop is the photo untouched — the
   contrast comes from the card's own translucency, which is why the card is
   translucent rather than solid. Swapping in a brighter background is what would
   need a scrim, and that is the filter's problem, not this rule's. */

.booking-done__card {
	width: 100%;
	max-width: 792px;
	padding: clamp(2rem, 4.3vw, 3.875rem) clamp(1.5rem, 4vw, 3rem) clamp(1.75rem, 3.75vw, 3.375rem);
	border-radius: 14px;
	background: rgba(21, 42, 64, 0.85);
	color: var(--wp--preset--color--base);
	text-align: center;
}

/* The tick is a filled disc with the check knocked out of it, so the check shows
   whatever is behind — here the card, whose colour depends on the photo under it.
   A painted-on check would only match at one opacity. */
.booking-done__tick {
	display: block;
	margin: 0 auto clamp(1.5rem, 3.4vw, 3.05rem);
	color: var(--wp--preset--color--base);
	line-height: 0;
}

.booking-done__tick svg {
	width: clamp(76px, 7.2vw, 103px);
	height: auto;
}

.booking-done__title {
	margin: 0 0 clamp(0.5rem, 1vw, 0.9375rem);
	color: var(--wp--preset--color--base);
	font-size: clamp(1.75rem, 3.1vw, 2.75rem);
	line-height: 1.25;
}

.booking-done__lead {
	margin: 0 0 clamp(0.5rem, 0.85vw, 0.77rem);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--large);
}

.booking-done__note {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-size: 1.125rem;
}

.booking-done__actions {
	margin: var(--wp--preset--spacing--60) 0 0;
}

/* ---- 专属客服联系方式 ---- */
.booking-done__contact {
	margin-top: clamp(2.5rem, 4.9vw, 4.4rem);
	text-align: center;
	color: var(--wp--preset--color--base);
}

.booking-done__contact-title {
	margin: 0 0 clamp(1.5rem, 2.8vw, 2.5rem);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--large);
}

.booking-done__contact-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--50) clamp(1.5rem, 5vw, 4.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.booking-done__contact-list li,
.booking-done__contact-list a {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
}

.booking-done__contact-list svg {
	flex: none;
	width: 26px;
	height: 26px;
}

.booking-done__contact-list a:hover {
	text-decoration: underline;
}

/* Nothing went through, so nothing may look like it did. */
.booking-done--failed .booking-done__card {
	background: rgba(129, 11, 11, 0.85);
}

/* WooCommerce prints the order-received template inside its own .woocommerce
   wrapper, which sits between the constrained post content and this section — so
   the section's .alignfull has nothing to act on and the photo stops at the 1240px
   content column. Open the wrapper instead; it holds nothing else on this page. */
.woocommerce-order-received .wp-block-post-content > .woocommerce {
	max-width: none;
	margin-inline: calc(var(--wp--style--root--padding-left, 0px) * -1)
		calc(var(--wp--style--root--padding-right, 0px) * -1);
}

.tc-back a {
	color: var(--wp--preset--color--subtle);
	text-decoration: none;
}

.tc-back a:hover {
	color: var(--wp--preset--color--primary);
}

@media (max-width: 768px) {
	.pay-grid {
		grid-template-columns: 1fr;
		padding: var(--wp--preset--spacing--40);
	}
}