/*
Theme Name: Tour Agency
Description: Dark, high-contrast block theme for a private tour agency serving high-end clientele. Onyx and champagne, Didone display type, generous negative space.
Author: Matthew Karlson
Version: 2.0.0
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: tour-agency
*/

/* ==========================================================================
   Base
   Design tokens live in theme.json. This file covers what theme.json cannot
   express: pseudo-elements, transitions, overlay menus, and plugin markup.
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

@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;
	}
}

/* Visible focus ring — the champagne accent, never removed. */
:where(a, button, input, textarea, select, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Selection styling reinforces the palette. */
::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* ==========================================================================
   Block style variations (registered in functions.php)
   ========================================================================== */

/* Eyebrow — the small tracked label above a heading. */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	line-height: 1.4;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Pairs an eyebrow with a hairline tick, a small luxury-print convention. */
.is-style-eyebrow::before {
	content: "";
	display: inline-block;
	width: 2.25rem;
	height: 1px;
	margin-right: 0.9rem;
	vertical-align: middle;
	background-color: var(--wp--preset--color--accent);
	opacity: 0.7;
}

/* Lead paragraph — the standfirst under a page title. */
.is-style-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	letter-spacing: 0;
	max-width: 46ch;
}

/* Centred text needs the measure box centred too, not just the lines inside it. */
.is-style-lead.has-text-align-center {
	margin-inline: auto;
}

/* Display heading — oversized Didone, tightened. */
.is-style-display {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1;
	letter-spacing: -0.03em;
}

/* Ghost button — hairline outline, fills on hover. */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--hairline);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast);
}

/* Arrow link — a text link that behaves like a button block. */
.wp-block-button.is-style-link-arrow .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--accent);
	padding: 0;
	border-bottom: 1px solid transparent;
	transition: border-color 0.35s ease, gap 0.35s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.wp-block-button.is-style-link-arrow .wp-block-button__link::after {
	content: "\2192";
	transition: transform 0.35s ease;
}

.wp-block-button.is-style-link-arrow .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-link-arrow .wp-block-button__link:hover::after {
	transform: translateX(0.35rem);
}

/* Hairline separator — a full-width 1px rule, no default styling. */
.wp-block-separator.is-style-hairline {
	border: none;
	border-top: 1px solid var(--wp--preset--color--hairline);
	opacity: 1;
	width: 100%;
	max-width: none;
	margin-block: var(--wp--preset--spacing--40);
}

/* Card — the tour/offer tile. */
.wp-block-group.is-style-card {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	padding: var(--wp--preset--spacing--30);
	transition: border-color 0.4s ease, background-color 0.4s ease, transform 0.4s ease;
}

.wp-block-group.is-style-card:hover {
	border-color: var(--wp--preset--color--accent-deep);
	background-color: var(--wp--preset--color--elevated);
	transform: translateY(-4px);
}

.wp-block-group.is-style-bordered {
	border: 1px solid var(--wp--preset--color--hairline);
	padding: var(--wp--preset--spacing--40);
}

/* Framed image — inset hairline over the photo. */
.wp-block-image.is-style-frame img {
	box-shadow: inset 0 0 0 1px rgba(245, 243, 239, 0.16);
}

/* Columns separated by vertical hairlines (assurances row). */
@media (min-width: 782px) {
	.wp-block-columns.is-style-rule-between > .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--wp--preset--color--hairline);
		padding-left: var(--wp--preset--spacing--40);
	}
}

/* ==========================================================================
   Header + navigation
   ========================================================================== */

.wp-block-template-part > header,
header.wp-block-group {
	position: relative;
	z-index: 20;
}

/* Hairline under the header, inset from the page edge. */
.tour-header {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.wp-block-site-title a {
	transition: color 0.35s ease;
}

/* Uppercase, letter-spaced labels must never break across lines — without this
   a squeezed button renders as "ENQ / UIR / E". */
.wp-block-button__link {
	white-space: nowrap;
}

/* The header row is a nowrap flex line: site title | nav | CTA. When space runs
   short the CTA holds its size and the site title gives way, rather than the
   button collapsing to a sliver. */
.tour-header .is-header-cta {
	flex-shrink: 0;
}

.tour-header .wp-block-site-title {
	min-width: 0;
}

@media (max-width: 781px) {
	.tour-header .wp-block-site-title {
		font-size: 1rem;
		letter-spacing: 0.08em;
	}

	.tour-header .is-header-cta .wp-block-button__link {
		padding: 0.85rem 1.15rem;
		letter-spacing: 0.12em;
	}
}

/* Nav links: underline sweeps in from the left on hover. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
	transition: color 0.35s ease;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Don't underline the nav item that is styled as a button. */
.wp-block-navigation .wp-block-navigation-item.is-cta .wp-block-navigation-item__content::after {
	display: none;
}

/* Submenus. */
.wp-block-navigation .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-container,
.wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
	padding: 0.5rem 0;
}

/* Mobile overlay menu — full-bleed onyx, centred, generous. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
	font-family: var(--wp--preset--font-family--display);
	text-transform: none;
	letter-spacing: 0;
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--contrast);
}

/* ==========================================================================
   Hero / cover
   ========================================================================== */

/* Vignette over hero covers so display type stays legible on any photo. */
.tour-hero .wp-block-cover__background,
.tour-hero .wp-block-cover__gradient-background {
	background-image: radial-gradient(
			ellipse at 30% 40%,
			rgba(11, 11, 12, 0.25) 0%,
			rgba(11, 11, 12, 0.85) 75%
		),
		linear-gradient(180deg, rgba(11, 11, 12, 0.55) 0%, rgba(11, 11, 12, 0.35) 45%, rgba(11, 11, 12, 0.95) 100%);
}

.tour-hero .wp-block-cover__image-background {
	transform: scale(1.03);
}

/* ==========================================================================
   Post listing / query loop
   ========================================================================== */

.wp-block-post-featured-image {
	overflow: hidden;
}

.wp-block-post-featured-image img {
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	width: 100%;
}

.wp-block-post-template li:hover .wp-block-post-featured-image img,
.is-style-card:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

.wp-block-post-title a {
	transition: color 0.35s ease;
}

.wp-block-query-pagination {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.wp-block-query-pagination .page-numbers.current {
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Long-form post content
   ========================================================================== */

.wp-block-post-content > p > a,
.wp-block-post-content li > a {
	border-bottom: 1px solid var(--wp--preset--color--accent-deep);
	transition: border-color 0.35s ease, color 0.35s ease;
}

.wp-block-post-content > p > a:hover,
.wp-block-post-content li > a:hover {
	border-bottom-color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Testimonial marquee
   ========================================================================== */

/*
 * Two states by design:
 *
 *  - Base (no JS, or reduced motion): a plain horizontally scrollable row.
 *  - `.is-animating`, added by testimonial-marquee.js once it has cloned the
 *    card set: a continuous scroll, paused on hover or keyboard focus.
 *
 * The animation lives on the track and translates exactly -50%, which lands on
 * the start of the clone — so the loop point is invisible.
 */
.tour-marquee {
	--marquee-duration: 60s;

	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.tour-marquee::-webkit-scrollbar {
	display: none;
}

.tour-marquee.is-animating {
	overflow: hidden;

	/* Fade the strip out at both edges so cards enter and leave, rather than
	   being sliced off at a hard boundary. */
	mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.tour-marquee__track {
	width: max-content;
}

.tour-marquee.is-animating .tour-marquee__track {
	animation: tour-marquee-scroll var(--marquee-duration) linear infinite;
	will-change: transform;
}

/* Pausing on focus-within keeps a keyboard user from chasing a moving link. */
.tour-marquee.is-animating:hover .tour-marquee__track,
.tour-marquee.is-animating:focus-within .tour-marquee__track {
	animation-play-state: paused;
}

@keyframes tour-marquee-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tour-marquee .tour-marquee__track {
		animation: none;
	}
}

.tour-testimonial-card {
	flex: 0 0 auto;
	width: min(84vw, 30rem);
	background-color: var(--wp--preset--color--elevated);
	border: 1px solid var(--wp--preset--color--hairline);
	padding: var(--wp--preset--spacing--30);
	scroll-snap-align: start;
}

.tour-testimonial-card p {
	margin-block: 0;
}

/* Body face, not the display face. The Didone stack is high-contrast — its thin
   strokes bloom against the dark card and get hard to read over a full paragraph.
   It stays for headlines, where the lines are short and set large. Leading is
   opened up and the negative tracking dropped for the same reason. */
.tour-testimonial-card .tour-testimonial-card__quote {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}

.tour-testimonial-card .tour-testimonial-card__source {
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wp-block-quote {
	border-left: 1px solid var(--wp--preset--color--accent);
	padding-left: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--40);
}

.wp-block-quote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wp-block-table td,
.wp-block-table th {
	border-color: var(--wp--preset--color--hairline);
	padding: 0.85rem 1rem;
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.tour-footer {
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.tour-footer .wp-block-navigation .wp-block-navigation-item__content::after {
	display: none;
}

/* ==========================================================================
   Contact Form 7
   CF7 outputs plain unstyled inputs, which read as broken against a dark
   theme. These rules are scoped to .wpcf7 so they only apply to its markup.
   ========================================================================== */

.wpcf7 form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--hairline);
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #B4553E;
	color: #E0917C;
}

.wpcf7 label {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.55rem;
}

.wpcf7 p {
	margin-bottom: var(--wp--preset--spacing--30);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
	padding: 0.85rem 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	transition: border-color 0.35s ease;
}

.wpcf7 select {
	/* Dark-theme dropdowns: the native popup is painted by the OS, so set both. */
	color-scheme: dark;
}

.wpcf7 textarea {
	min-height: 9rem;
	resize: vertical;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 0.75;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--accent);
}

.wpcf7 input[type="submit"] {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 0;
	padding: 1.05rem 2.25rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.35s ease, color 0.35s ease;
}

.wpcf7 input[type="submit"]:hover {
	background-color: var(--wp--preset--color--contrast);
}

.wpcf7-not-valid-tip {
	color: #E0917C;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: none;
	margin-top: 0.4rem;
}