/*
 * Base styles: reset, typography, layout shell, header and footer.
 * Component styles (cards, filter sheet, single yacht) get their own files
 * in later phases.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--color-surface);
	color: var(--color-ink);
	font-family: var(--font-ui);
	font-size: var(--text-md);
	font-weight: var(--weight-regular);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--color-navy);
	text-decoration-thickness: var(--border-hair);
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--color-navy-deep);
}

:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 3px;
}

/* Anchor targets clear the fixed header. Without this a jump link lands
   under the header once it slides back into view. */
:target {
	scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: var(--weight-light);
	line-height: var(--leading-tight);
	letter-spacing: var(--track-heading);
	color: var(--color-navy);
	margin: 0 0 var(--space-md);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p {
	margin: 0 0 var(--space-md);
	max-width: var(--width-text);
}

/* --- Shared pieces ------------------------------------------------------ */

.wrap {
	width: 100%;
	max-width: var(--width-page);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* The small tracked label above a heading or beside a stat. */
.label {
	font-size: var(--text-xs);
	font-weight: var(--weight-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--color-navy-soft);
}

/* The signature rule: half navy, half red. It appears under section
   headings and under the result count in the filter sheet. It is the one
   place red is allowed on a light surface. */
.rule {
	display: flex;
	width: 3.25rem;
	height: 2px;
	margin-block: var(--space-sm);
}

.rule::before,
.rule::after {
	content: '';
	flex: 1;
}

.rule::before { background: var(--color-navy); }
.rule::after  { background: var(--color-red); }

.rule--center {
	margin-inline: auto;
}

/* --- Shared section heading ---------------------------------------------- */

.section-title {
	margin: 0;
	font-size: var(--text-xl);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.section-title + .rule {
	margin: var(--space-sm) auto var(--space-lg);
}

/* --- Page heading --------------------------------------------------------
 * The centred title with the two-tone rule under it. This is the shape that
 * repeats across the site, so it lives in base.css and loads everywhere.
 */

.page-head {
	padding-block: var(--space-xl) var(--space-lg);
	text-align: center;
}

.page-head__title {
	margin-bottom: 0;
	font-size: var(--text-3xl);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.page-head__intro {
	max-width: var(--width-text);
	margin: var(--space-md) auto 0;
	color: var(--color-ink-soft);
}

@media (max-width: 40rem) {
	.page-head__title {
		font-size: var(--text-2xl);
	}
}

/* --- Buttons ------------------------------------------------------------
 * Two only. Solid navy for the one action that moves you forward, outline
 * for everything secondary. Red is not a button colour.
 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: 0.95rem 1.75rem;
	border: var(--border-hair) solid var(--color-navy);
	border-radius: var(--radius);
	background: transparent;
	color: var(--color-navy);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: var(--weight-light);
	letter-spacing: var(--track-button);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--speed-fast) var(--ease),
	            color var(--speed-fast) var(--ease);
}

.btn:hover {
	background: var(--color-navy);
	color: var(--color-surface);
}

.btn--solid {
	background: var(--color-navy);
	color: var(--color-surface);
}

.btn--solid:hover {
	background: var(--color-navy-deep);
	border-color: var(--color-navy-deep);
	color: var(--color-surface);
}

/* --- Skip link ---------------------------------------------------------- */

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: calc(var(--z-header) + 1);
}

.skip-link:focus {
	left: var(--gutter);
	top: var(--space-2xs);
	padding: var(--space-2xs) var(--space-sm);
	background: var(--color-navy);
	color: var(--color-surface);
}

/* --- Header -------------------------------------------------------------
 * Fixed, opaque navy, with the red rule under it. On scroll down it slides
 * out of the way; on scroll up it comes straight back. The behaviour is in
 * header.js — this only describes the two positions.
 */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: var(--z-header);
	background: var(--color-navy);
	transform: translateY(0);
	transition: transform var(--speed) var(--ease);
	will-change: transform;
}

.site-header[data-hidden='true'] {
	transform: translateY(-100%);
}

/* While a sheet or modal owns the screen the header stays put, so closing
   the sheet never reveals it mid-slide. */
.site-header[data-locked='true'] {
	transform: translateY(0);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	height: var(--header-height);
}

.site-header__brand {
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: var(--weight-light);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--color-surface);
	text-decoration: none;
}

.site-nav ul {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	color: var(--color-surface);
	font-size: var(--text-sm);
	font-weight: var(--weight-light);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	text-decoration: none;
	opacity: 0.86;
	transition: opacity var(--speed-fast) var(--ease);
}

.site-nav a:hover,
.site-nav .current-menu-item > a {
	color: var(--color-surface);
	opacity: 1;
}

.site-header__toggle {
	display: none;
	padding: var(--space-2xs);
	border: 0;
	background: none;
	color: var(--color-surface);
	cursor: pointer;
}

@media (max-width: 60rem) {
	.site-nav {
		display: none;
	}

	.site-header__toggle {
		display: inline-flex;
	}
}

/* Content clears the fixed header. */
/* --header-height is measured from the header itself, and that measurement
   already includes the signature rule at its foot. Adding the rule again
   here left a few pixels of white between the rule and the hero, which made
   the rule read as something stuck under the header rather than as the top
   edge of the picture. */
.site-main {
	padding-top: var(--header-height);
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
	margin-top: var(--space-section);
	padding-block: var(--space-xl);
	background: var(--color-navy);
	color: var(--color-surface);
}

.site-footer a {
	color: var(--color-surface);
	opacity: 0.82;
	text-decoration: none;
	font-size: var(--text-sm);
	letter-spacing: var(--track-body);
}

.site-footer a:hover {
	color: var(--color-surface);
	opacity: 1;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--space-lg);
}

.site-footer__heading {
	font-size: var(--text-xs);
	font-weight: var(--weight-light);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-surface) 64%, var(--color-navy));
	margin-bottom: var(--space-sm);
}

.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-2xs);
}

.site-footer__base {
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
	border-top: var(--border-hair) solid color-mix(in srgb, var(--color-surface) 18%, var(--color-navy));
	font-size: var(--text-xs);
	letter-spacing: var(--track-body);
	color: color-mix(in srgb, var(--color-surface) 62%, var(--color-navy));
}

/* --- Header --------------------------------------------------------------
 * Desktop is two rows: controls and logo, then the navigation. Mobile is a
 * single row with the navigation in a drawer. Same markup, different shape.
 *
 * --header-height is what the page content clears, so it changes with the
 * layout rather than being guessed.
 */

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: var(--header-bar-height);
}

.site-header__side {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	min-width: 0;
}

.site-header__side--end {
	justify-content: flex-end;
}

.site-header__brand {
	display: flex;
	justify-content: center;
}

.custom-logo-link {
	display: inline-flex;
	line-height: 0;
}

.custom-logo-link img {
	max-height: var(--logo-height);
	width: auto;
}

.site-header__wordmark {
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: var(--weight-light);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--color-surface);
	text-decoration: none;
	white-space: nowrap;
}

/* Search sits in an outlined box on desktop so it reads as the primary way
   into the fleet, and collapses to the icon alone on mobile. */
.search-trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	height: 2.75rem;
	padding: 0 1.25rem;
	border: var(--border-hair) solid color-mix(in srgb, var(--color-surface) 40%, transparent);
	border-radius: var(--radius);
	background: none;
	color: var(--color-surface);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: var(--weight-light);
	letter-spacing: var(--track-button);
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color var(--speed-fast) var(--ease),
	            background var(--speed-fast) var(--ease);
}

.search-trigger:hover {
	border-color: var(--color-surface);
	background: color-mix(in srgb, var(--color-surface) 8%, transparent);
}

/* Outline button on a navy ground. */
.btn--light {
	border-color: var(--color-surface);
	color: var(--color-surface);
	padding: 0.8rem 1.6rem;
}

.btn--light:hover {
	background: var(--color-surface);
	color: var(--color-navy);
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-surface);
	cursor: pointer;
	opacity: 0.9;
	transition: opacity var(--speed-fast) var(--ease);
}

.icon-btn:hover {
	opacity: 1;
	color: var(--color-surface);
}

.icon-burger {
	display: block;
	width: 20px;
}

.icon-burger span {
	display: block;
	height: 1px;
	background: currentColor;
	margin: 5px 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Second row: the navigation, centred under the logo. */
.site-nav ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-lg);
	margin: 0;
	padding: 0 0 var(--space-sm);
	list-style: none;
}

.site-nav a {
	color: var(--color-surface);
	font-size: var(--text-sm);
	font-weight: var(--weight-light);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	text-decoration: none;
	opacity: 0.88;
	padding-bottom: 2px;
	border-bottom: var(--border-hair) solid transparent;
	transition: opacity var(--speed-fast) var(--ease),
	            border-color var(--speed-fast) var(--ease);
}

.site-nav a:hover,
.site-nav .current-menu-item > a {
	color: var(--color-surface);
	opacity: 1;
	border-bottom-color: var(--color-surface);
}

/* Mobile: one row, no inline navigation, no enquiry button. */
@media (max-width: 62rem) {
	.site-nav,
	.site-header__inquire {
		display: none;
	}

	.search-trigger {
		height: 2.75rem;
		width: 2.75rem;
		padding: 0;
		border: 0;
		justify-content: center;
	}

	.search-trigger__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

/* Desktop: no hamburger, no envelope — the menu is visible and the enquiry
   button carries the contact action. */
@media (min-width: 62.0625rem) {
	.site-header__burger,
	.site-header__mail {
		display: none;
	}
}

/* --- Menu drawer --------------------------------------------------------- */

.drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
}

.drawer__scrim {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--color-navy) 55%, transparent);
	opacity: 0;
	transition: opacity var(--speed) var(--ease);
}

.drawer[data-open='true'] .drawer__scrim {
	opacity: 1;
}

.drawer__panel {
	position: absolute;
	inset: 0 auto 0 0;
	width: min(24rem, 86vw);
	padding: var(--space-xl) var(--space-lg);
	background: var(--color-navy);
	transform: translateX(-100%);
	transition: transform var(--speed) var(--ease);
	overflow-y: auto;
}

.drawer[data-open='true'] .drawer__panel {
	transform: translateX(0);
}

.drawer__close {
	position: absolute;
	top: var(--space-sm);
	right: var(--space-sm);
}

.drawer__panel ul {
	margin: var(--space-lg) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-md);
}

.drawer__panel a {
	color: var(--color-surface);
	font-size: var(--text-lg);
	font-weight: var(--weight-light);
	letter-spacing: var(--track-heading);
	text-decoration: none;
}

/* --- Hero search bar -----------------------------------------------------
 * Sits directly under the hero and overlaps it slightly, so it reads as the
 * first thing you do rather than a strip of page furniture.
 */

/* Sits under the hero on the front page, where it overlaps the image
   slightly. Anywhere else it is simply a bar with room around it. */
.search-bar-wrap {
	position: relative;
	margin-bottom: var(--space-xl);
}

.has-hero .search-bar-wrap {
	margin-top: calc(var(--space-lg) * -1);
	margin-bottom: var(--space-section);
}

.search-bar {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	width: 100%;
	padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
	border: var(--border-hair) solid var(--color-line);
	border-radius: var(--radius);
	background: var(--color-surface-alt);
	box-shadow: 0 12px 32px color-mix(in srgb, var(--color-navy) 10%, transparent);
	cursor: pointer;
	text-align: left;
	font-family: var(--font-ui);
	transition: border-color var(--speed-fast) var(--ease);
}

.search-bar:hover {
	border-color: var(--color-line-strong);
}

.search-bar__icon {
	display: inline-flex;
	color: var(--color-navy-soft);
}

.search-bar__summary {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--text-md);
	font-weight: var(--weight-light);
	color: var(--color-ink-soft);
}

.search-bar__action {
	flex: none;
	padding: 0.75rem 1.5rem;
	background: var(--color-navy);
	color: var(--color-surface);
	border-radius: var(--radius);
	font-size: var(--text-xs);
	font-weight: var(--weight-light);
	letter-spacing: var(--track-button);
	text-transform: uppercase;
}

@media (max-width: 40rem) {
	.search-bar {
		padding-left: var(--space-sm);
	}

	.search-bar__action {
		padding: 0.65rem 1rem;
	}
}

/* Stops the page behind a sheet or drawer from scrolling. */
body.is-locked {
	overflow: hidden;
}

/* --- The header rule -----------------------------------------------------
 * A hairline of white separates the red from the navy. That gap is what
 * stops it reading as a border and lets it read as a mark of its own.
 */

.site-header::after {
	content: '';
	display: block;
	height: calc(var(--header-rule-gap) + var(--header-rule));
	background: linear-gradient(
		to bottom,
		var(--color-surface-alt) 0 var(--header-rule-gap),
		var(--color-red) var(--header-rule-gap) 100%
	);
}

/* --- Announcement --------------------------------------------------------
 * Only rendered when there is something to announce, so an empty setting
 * means no bar rather than an empty strip.
 */

.announcement-wrap {
	position: relative;
}

.announcement {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: var(--space-2xs) calc(var(--gutter) + 2rem);
	background: var(--color-red);
	color: #fff;
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	text-align: center;
}

.announcement a {
	color: #fff;
	text-decoration: none;
	border-bottom: var(--border-hair) solid color-mix(in srgb, #fff 55%, transparent);
}

.announcement a:hover {
	color: #fff;
	border-bottom-color: #fff;
}

.announcement__close {
	position: absolute;
	top: 50%;
	right: var(--gutter);
	transform: translateY(-50%);
	width: 1.75rem;
	height: 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
	opacity: 0.85;
}

.announcement__close:hover {
	opacity: 1;
}

/* Set in the head when this visitor has closed this message, so the bar is
   never drawn at all. header.js removes the element afterwards. */
.announcement-dismissed .announcement-wrap {
	display: none;
}

/* --- Arrow button ----------------------------------------------------------
 * The one arrow on the site: the yacht slider and the gallery both use it.
 * A thin line arrow in a hairline circle, filling on hover.
 */

.arrow-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: var(--border-hair) solid var(--color-line-strong);
	border-radius: 50%;
	background: transparent;
	color: var(--color-navy);
	cursor: pointer;
	transition:
		background-color var(--speed) var(--ease),
		border-color var(--speed) var(--ease),
		color var(--speed) var(--ease),
		opacity var(--speed) var(--ease);
}

.arrow-btn svg {
	width: 1.25rem;
	height: 1.25rem;
}

.arrow-btn:hover:not(:disabled) {
	background: var(--color-navy);
	border-color: var(--color-navy);
	color: var(--color-surface);
}

.arrow-btn:disabled {
	opacity: 0.3;
	cursor: default;
}

/* On a dark ground: the gallery viewer. */
.arrow-btn--light {
	border-color: color-mix(in srgb, #fff 45%, transparent);
	background: color-mix(in srgb, var(--color-navy) 40%, transparent);
	color: #fff;
}

.arrow-btn--light:hover:not(:disabled) {
	background: #fff;
	border-color: #fff;
	color: var(--color-navy);
}

/* --- The admin bar --------------------------------------------------------
 * WordPress pushes the document down by the height of its toolbar, but a
 * fixed header is positioned against the viewport and stays at the very top
 * — under the toolbar. The content then begins that much lower than the
 * header ends, leaving a white band under the signature rule.
 *
 * Only signed-in users ever see it, which is why it survived this long.
 */

.admin-bar .site-header {
	top: 32px;
}

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

/* Below 600px the toolbar scrolls away with the page instead of staying
   fixed, so the header belongs back at the top. */
@media screen and (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

/* A second, lesser choice beside a primary one: the Turkish brochure next to
   the English. Same shape, lighter weight, so the page has one clear action. */
.btn--quiet {
	border-color: var(--color-line-strong);
	color: var(--color-navy-soft);
}

.btn--quiet:hover {
	border-color: var(--color-navy);
	background: transparent;
	color: var(--color-navy);
}

/* --- Page transitions --------------------------------------------------------
 * Moving between pages of the site cross-fades instead of cutting. This is
 * the browser's own view transition: the pages still load normally, so
 * forms, search and the back button are untouched, and a browser without
 * support simply loads the page as before.
 *
 * The header carries its own name, so it is held apart from the fade and
 * stays still while only the content changes beneath it.
 */

@view-transition {
	navigation: auto;
}

.site-header {
	view-transition-name: site-header;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: var(--speed);
	animation-timing-function: var(--ease);
}

/* A card photo growing into the yacht page's cover. The two are different
   shapes, so both pictures are cropped to the moving frame rather than
   stretched to it, and the move is given a little more time than the fade. */
.yacht-card__image,
.yacht-hero__image {
	view-transition-class: yacht-photo;
}

::view-transition-group(*.yacht-photo) {
	animation-duration: var(--speed-slow);
	animation-timing-function: var(--ease);
}

::view-transition-old(*.yacht-photo),
::view-transition-new(*.yacht-photo) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}