/**
 * Visual design layer.
 *
 * Loaded last, on top of the upstream stylesheet. Everything here is surface,
 * rhythm and motion — no layout decisions, which live in css/veatal-theme.css,
 * and no colour decisions, which come from the palette.
 *
 * The brief was a wellness and spa feel: room to breathe, soft edges, quiet
 * motion. That translates into three concrete rules — spacing comes from the
 * scale rather than being invented per component, corners come from the radius
 * tokens so a single Customizer change reshapes the whole site, and every
 * transition uses the shared duration and easing so nothing moves at its own
 * tempo.
 */

/* ==========================================================================
   Header menu
   ========================================================================== */

/*
 * The theme animated `all` over half a second, which meant a hover also
 * animated colour, padding and anything else a browser decided was animatable.
 * The menu now moves two properties, quickly.
 */
.veatal-header__bottom .sitenav ul li {
	margin: 0 var(--veatal-space-3xs);
}

.veatal-header__bottom .sitenav ul li a {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.01em;
	border-radius: var(--radius-selector);
	transition:
		background-color var(--veatal-duration) var(--veatal-ease),
		color var(--veatal-duration) var(--veatal-ease);
}

@media screen and (min-width: 1000px) {
	.veatal-header__bottom .sitenav ul li a {
		padding: var(--veatal-space-2xs) var(--veatal-space-sm);
	}

	/*
	 * A soft tint rather than a solid fill. The pill has to read as a resting
	 * place, not as a button competing with the call to action in the header.
	 */
	.veatal-header__bottom .sitenav ul li a:hover,
	.veatal-header__bottom .sitenav ul li a:focus-visible,
	.veatal-header__bottom .sitenav ul li.current_page_item > a,
	.veatal-header__bottom .sitenav ul li.current-menu-item > a,
	.veatal-header__bottom .sitenav [aria-current="page"] {
		background-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
	}

	.veatal-header__bar {
		padding: var(--veatal-space-2xs) 0;
	}
}

/* The underline from the previous pass is replaced by the pill. */
.sitenav ul li a::after {
	content: none;
}

/* ---- Sub menu ---- */

@media screen and (min-width: 1000px) {
	.sitenav ul li ul {
		padding: var(--veatal-space-2xs);
		border-radius: var(--radius-box);
		box-shadow: var(--veatal-shadow-md);
	}

	.sitenav ul li ul li {
		display: block;
		margin: 0;
	}

	.sitenav ul li ul li a {
		border-radius: var(--radius-field);
		text-align: left;
	}
}

/* ---- Mobile panel ---- */

@media screen and (max-width: 999px) {
	/*
	 * Full-width rows rather than pills: a pill inset from both edges of a
	 * narrow panel wastes the width the panel just gained.
	 */
	.veatal-header__bottom .sitenav ul li {
		margin: 0;
	}

	.veatal-header__bottom .sitenav ul li a {
		padding: var(--veatal-space-xs) var(--veatal-space-md);
		border-radius: 0;
	}

	.veatal-header__bar > .toggle a {
		padding: var(--veatal-space-xs) var(--veatal-space-md);
		letter-spacing: 0.02em;
	}

	/*
	 * With the bar stuck to the top, a long menu would otherwise run past the
	 * bottom of the screen with no way back. The cap goes on the list, not on
	 * .sitenav, which jQuery animates with an inline height.
	 */
	.veatal-header-sticky .veatal-header__bottom .sitenav ul {
		max-height: calc(100dvh - 8rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* ==========================================================================
   Sticky header
   ========================================================================== */

/*
 * The sticky element is #header itself, not the menu bar inside it. A sticky
 * element is constrained by its containing block, and #header is exactly as
 * tall as its children — a sticky bar inside it would come unstuck the moment
 * the header scrolled past. #header is a child of body, so it sticks for the
 * whole page.
 *
 * Shrinking is a grid row going from 1fr to 0fr. max-height cannot animate from
 * a content-based height, and display: none cannot animate at all.
 */
.veatal-header-sticky #header {
	position: sticky;
	top: 0;
	z-index: 100;
	display: grid;
	grid-template-rows: 1fr auto;
	background-color: var(--veatal-header-bg);
	transition:
		grid-template-rows var(--veatal-duration) var(--veatal-ease),
		box-shadow var(--veatal-duration) var(--veatal-ease);
}

.veatal-header-sticky .veatal-header__stage {
	min-height: 0;
	overflow: hidden;
}

/*
 * Collapsed, only the menu bar is left on screen. The header image should not
 * follow the visitor down the page — that is the whole point of shrinking.
 */
.veatal-header-stuck #header {
	grid-template-rows: 0fr auto;
	box-shadow: var(--veatal-shadow-md);
}

@media screen and (min-width: 1000px) {
	.veatal-header-stuck .veatal-header__bar {
		padding: 0;
	}

	.veatal-header-stuck .veatal-header__bottom .sitenav ul li a {
		padding-top: var(--veatal-space-3xs);
		padding-bottom: var(--veatal-space-3xs);
	}
}

/*
 * The sentinel occupies the first stretch of the document without taking any
 * layout space, so the header does not collapse on the first pixel of scroll.
 * js/veatal-header-sticky.js inserts it before #header.
 */
.veatal-header__sticky-sentinel {
	height: var(--veatal-header-stick-offset, 80px);
	margin-bottom: calc(-1 * var(--veatal-header-stick-offset, 80px));
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.veatal-header-sticky #header {
		transition: none;
	}
}

/* ==========================================================================
   Header rhythm
   ========================================================================== */

.veatal-header__middle .container {
	padding-top: var(--veatal-space-lg);
	padding-bottom: var(--veatal-space-md);
}

.site-title {
	letter-spacing: -0.01em;
}

.site-description {
	margin-top: var(--veatal-space-3xs);
	font-size: var(--veatal-text-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/*
 * One shape for every button the theme renders, whichever markup it came from.
 * They were four different sizes with four different radii before.
 */
.read-more a,
.sliderbtn,
.wpcf7 form input[type="submit"],
#contact input[type="submit"],
input[type="submit"],
button[type="submit"],
.veatal-header__item--button > a {
	padding: var(--veatal-space-xs) var(--veatal-space-md);
	font-family: var(--font-heading);
	font-size: var(--veatal-text-sm);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.2;
	border: 0;
	border-radius: var(--radius-selector);
	cursor: pointer;
	transition:
		background-color var(--veatal-duration) var(--veatal-ease),
		box-shadow var(--veatal-duration) var(--veatal-ease),
		transform var(--veatal-duration) var(--veatal-ease);
}

.read-more a:hover,
.sliderbtn:hover,
.wpcf7 form input[type="submit"]:hover,
#contact input[type="submit"]:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	/*
	 * A 1px lift and a soft shadow instead of the colour inversion the theme
	 * used. Inverting to the near-black text colour on hover read as a warning
	 * rather than as an invitation.
	 */
	background-color: var(--color-primary-strong, var(--color-primary));
	box-shadow: var(--veatal-shadow-md);
	transform: translateY(-1px);
	border-radius: var(--radius-selector);
}

/* ==========================================================================
   Form fields
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
	padding: var(--veatal-space-xs) var(--veatal-space-sm);
	font-family: var(--font-body);
	font-size: var(--veatal-text-base);
	color: var(--color-base-content);
	background-color: var(--color-base-100);
	border: 1px solid var(--color-base-300);
	border-radius: var(--radius-field);
	transition:
		border-color var(--veatal-duration) var(--veatal-ease),
		box-shadow var(--veatal-duration) var(--veatal-ease);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--color-primary);
	outline: none;
}

/*
 * The ring is a box-shadow rather than an outline so it follows the rounded
 * corner. The focus outline in css/veatal-theme.css still applies to everything
 * that is not a field.
 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

::placeholder {
	color: color-mix(in srgb, var(--color-base-content) 45%, transparent);
	opacity: 1;
}

form.search-form {
	gap: var(--veatal-space-2xs);
}

/* ==========================================================================
   Cards and surfaces
   ========================================================================== */

.imagebox,
.veatal-blogroll--grid .veatal-post,
.veatal-author-box,
article.tag-sticky-2 {
	border-radius: var(--radius-box);
	box-shadow: var(--veatal-shadow-sm);
	transition:
		box-shadow var(--veatal-duration) var(--veatal-ease),
		transform var(--veatal-duration) var(--veatal-ease);
}

.veatal-blogroll--grid .veatal-post:hover,
.imagebox:hover {
	box-shadow: var(--veatal-shadow-lg);
	transform: translateY(-2px);
}

.veatal-post__thumb img,
.veatal-single__thumb img,
.veatal-related__thumb img,
.post-thumb img,
.wp-post-image {
	border-radius: var(--radius-box);
}

.veatal-blogroll--grid .veatal-post {
	padding: var(--veatal-space-md);
}

/*
 * The card padding would otherwise leave the image floating in the middle of
 * the card with a margin on every side.
 */
.veatal-blogroll--grid .veatal-post__thumb {
	margin: calc(-1 * var(--veatal-space-md)) calc(-1 * var(--veatal-space-md)) var(--veatal-space-sm);
}

.veatal-blogroll--grid .veatal-post__thumb img {
	border-radius: var(--radius-box) var(--radius-box) 0 0;
}

/* ==========================================================================
   Sidebar widgets
   ========================================================================== */

/*
 * The widget title was a solid brand-coloured bar across the top of every
 * widget. Five widgets stacked meant five heavy bars down the side of the page,
 * which is the opposite of room to breathe. It becomes a plain heading with a
 * short accent rule underneath.
 */
#sidebar .widget {
	margin-bottom: var(--veatal-space-xl);
	padding: var(--veatal-space-md);
	background-color: var(--color-base-200);
	border-radius: var(--radius-box);
}

#sidebar h3.widget-title {
	position: relative;
	margin: 0 0 var(--veatal-space-md);
	padding: 0 0 var(--veatal-space-2xs);
	font-size: var(--veatal-text-lg);
	background-color: transparent;
	border-bottom: 0;
	color: var(--color-base-content);
}

#sidebar h3.widget-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 2.5rem;
	height: 2px;
	border-radius: var(--radius-selector);
	background-color: var(--color-primary);
}

#sidebar ul li {
	margin: 0;
	padding: var(--veatal-space-3xs) 0 var(--veatal-space-3xs) var(--veatal-space-md);
}

#sidebar ul li a {
	transition: color var(--veatal-duration) var(--veatal-ease);
}

#sidebar ul li a:hover,
#sidebar ul li a:focus-visible {
	color: var(--color-primary);
}

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

.veatal-footer__widgets-band {
	padding-top: var(--veatal-space-3xl);
	padding-bottom: var(--veatal-space-2xl);
}

.veatal-footer__area-title,
.veatal-footer__widget-title {
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: var(--veatal-text-sm);
	opacity: 0.7;
}

.veatal-footer__area a {
	transition: opacity var(--veatal-duration) var(--veatal-ease);
}

.veatal-footer__area a:hover,
.veatal-footer__area a:focus-visible {
	opacity: 0.7;
	text-decoration: none;
}

.copyright-wrapper {
	padding: var(--veatal-space-md) 0;
	font-size: var(--veatal-text-sm);
}

.veatal-footer__menu {
	gap: var(--veatal-space-2xs) var(--veatal-space-md);
}

.veatal-footer__menu a {
	font-size: var(--veatal-text-sm);
	transition: opacity var(--veatal-duration) var(--veatal-ease);
}

.veatal-footer__menu a:hover,
.veatal-footer__menu a:focus-visible {
	opacity: 0.7;
}

/* ==========================================================================
   Section rhythm
   ========================================================================== */

.introduction,
.middle-align > section,
.main-container > section {
	padding-top: var(--veatal-section-gap);
	padding-bottom: var(--veatal-section-gap);
}

.veatal-content--narrow .entry-content,
.veatal-content--full .entry-content {
	line-height: var(--veatal-leading-normal);
}

blockquote {
	margin: var(--veatal-space-lg) 0;
	padding: var(--veatal-space-md) var(--veatal-space-lg);
	background-color: var(--color-base-200);
	border-left: 3px solid var(--color-primary);
	border-radius: var(--radius-box);
	font-style: normal;
}

hr,
.hrule {
	margin: var(--veatal-space-xl) 0;
	border: 0;
	border-top: 1px solid var(--color-base-300);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0 var(--veatal-space-2xs);
	border-radius: var(--radius-selector);
	transition:
		background-color var(--veatal-duration) var(--veatal-ease),
		color var(--veatal-duration) var(--veatal-ease);
}

/* ==========================================================================
   Motion
   ========================================================================== */

/*
 * css/veatal-theme.css already neutralises animation and transition durations
 * for reduced-motion visitors. The transforms have to go too: a lift of a
 * couple of pixels with no duration is a jump, which is worse than no movement.
 */
@media (prefers-reduced-motion: reduce) {
	.veatal-blogroll--grid .veatal-post:hover,
	.imagebox:hover,
	.read-more a:hover,
	.sliderbtn:hover,
	input[type="submit"]:hover,
	button[type="submit"]:hover {
		transform: none;
	}
}