/**
 * Components.
 *
 * Buttons: core's button styles are unlayered, so layered classes can't beat
 * them directly. Instead, theme.json builds the button from --btn-* custom
 * properties, and these classes only change those properties. Add the class
 * to a Button block (Advanced > Additional CSS class).
 */
@layer components {
	.btn--primary {
		--btn-color: var(--primary);
		--btn-color-hover: var(--primary-hover);
	}

	.btn--secondary {
		--btn-color: var(--secondary);
		--btn-color-hover: var(--secondary-hover);
	}

	.btn--tertiary {
		--btn-color: var(--tertiary);
		--btn-color-hover: var(--tertiary-hover);
	}

	.btn--accent {
		--btn-color: var(--accent);
		--btn-color-hover: var(--accent-hover);
	}

	.btn--base {
		--btn-color: var(--base);
		--btn-color-hover: var(--base-hover);
	}

	.btn--neutral {
		--btn-color: var(--neutral);
		--btn-color-hover: var(--neutral-hover);
	}

	/* Outline: uses the button colour if one is set (.btn--accent), otherwise
	   primary in the light scheme and white in the dark scheme. */
	.btn--outline {
		--btn-outline-color: var(--btn-color, light-dark(var(--primary), var(--white)));
		--btn-bg: transparent;
		--btn-text: var(--btn-outline-color);
		--btn-border-color: var(--btn-outline-color);
		--btn-bg-hover: var(--btn-outline-color);
		--btn-border-color-hover: var(--btn-outline-color);
		--btn-text-hover: light-dark(var(--white), var(--base-d-4));
	}

	.btn--s {
		--btn-padding-block: var(--space-xs);
		--btn-padding-inline: var(--space-m);
		--btn-font-size: var(--text-s);
	}

	.btn--m {
		--btn-padding-block: var(--space-s);
		--btn-padding-inline: var(--space-l);
		--btn-font-size: var(--text-m);
	}

	.btn--l {
		--btn-padding-block: var(--space-m);
		--btn-padding-inline: var(--space-xl);
		--btn-font-size: var(--text-l);
	}

	/* Site header. The sticky position goes on the template part wrapper
	   (<header class="wp-block-template-part">), because sticky only works
	   when the parent is taller than the element. Add .site-header--static
	   to the header group to turn sticky off. */
	.wp-block-template-part:has(> .site-header) {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 100;
	}

	.wp-block-template-part:has(> .site-header--static) {
		position: static;
	}

	/* The admin bar scrolls away on small screens */
	@media (max-width: 600px) {
		.wp-block-template-part:has(> .site-header) {
			top: 0;
		}
	}

	/* Notice bar, above the header. Presstwood Content shows it only while its
	   notice is active; the content comes from Settings > Business details. */
	.notice-bar {
		padding-block: var(--space-xs);
		font-size: var(--text-s);
		text-align: center;
	}

	.notice-bar .wp-block-button {
		--btn-padding-block: 0.25em;
		--btn-padding-inline: var(--space-s);
		--btn-font-size: var(--text-xs);
	}

	/* Logged out, the header gets the room the admin bar gives it when
	   logged in, so both read the same (Austin, 23 October 2026). Logged in,
	   the admin bar supplies that room and the padding drops back. */
	.site-header {
		padding-block: 2rem 0.5rem;
		background-color: var(--bg-body);
	}

	.admin-bar .site-header {
		padding-block-start: 0.5rem;
	}

	@media (max-width: 600px) {
		.site-header {
			padding-block-start: 1rem;
		}
	}

	/* Core's unlayered .wp-block-site-logo img { height: auto } beats any layer,
	   and an SVG logo with height auto collapses to nothing in a flex header. */
	.site-header .wp-block-site-logo img {
		width: auto;
		height: 40px !important; /* core override */
	}

	/* The logo file is ink and blue. Over dark backgrounds it turns white. */
	.site-header--overlay .wp-block-site-logo img,
	.site-footer .wp-block-site-logo img,
	.scheme--dark .wp-block-site-logo img,
	[data-scheme="dark"] .wp-block-site-logo img {
		filter: brightness(0) invert(1);
	}

	@media (prefers-color-scheme: dark) {
		:root:not([data-scheme="light"]) .site-header .wp-block-site-logo img {
			filter: brightness(0) invert(1);
		}
	}

	@media (max-width: 520px) {
		.site-header .wp-block-site-logo img {
			height: 32px !important; /* core override */
		}

		.site-header__cta {
			display: none !important; /* core override: Buttons is flex outside any layer */
		}
	}

	/* Overlay header: sits over the first section (the home hero) in white.
	   Add .site-header--overlay to the Template Part block in a template.
	   The template part stays in the page flow, so a notice bar inside it
	   pushes the page down; only the header row is pinned, just below it.
	   With no notice bar the part has no height and the header sits at the
	   very top, over the hero. */
	.wp-block-template-part.site-header--overlay {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 100;
	}

	.site-header--overlay > .site-header {
		position: absolute !important; /* core override: core sets every constrained Group to relative */
		top: 100%;
		right: 0;
		left: 0;
		z-index: 1;
		transition: padding-block-start 0.25s var(--ease);
	}

	/* Sticky and transparent: clear over the hero at the top of the page,
	   a white bar with a soft blur once the page scrolls (inc/header.php
	   adds .has-scrolled to <html>), with the logo, menu and button back to
	   their dark versions. The bar is a layer behind the header,
	   not the header itself: a backdrop-filter on the header would trap the
	   full-screen mobile menu inside the header's box. */
	.site-header--overlay > .site-header::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: color-mix(in oklch, var(--white) 92%, transparent);
		-webkit-backdrop-filter: blur(14px) saturate(1.2);
		backdrop-filter: blur(14px) saturate(1.2);
		box-shadow: 0 1px 0 var(--border-color), 0 8px 24px rgb(0 0 0 / 0.06);
		opacity: 0;
		transition: opacity 0.25s var(--ease);
		pointer-events: none;
	}

	.has-scrolled .site-header--overlay > .site-header {
		padding-block-start: 0.5rem;
	}

	.has-scrolled .site-header--overlay > .site-header::before {
		opacity: 1;
	}

	.has-scrolled .site-header--overlay .site-header {
		color: var(--heading-color);
		color-scheme: light;
	}

	.has-scrolled .site-header--overlay .wp-block-site-logo img {
		filter: none;
	}

	.has-scrolled .site-header--overlay .site-header__cta .wp-block-button {
		--btn-color: var(--primary);
		--btn-text: var(--white);
		--btn-color-hover: var(--primary-hover);
		--btn-text-hover: var(--white);
	}

	.site-header--overlay .wp-block-site-logo img {
		transition: filter 0.25s var(--ease);
	}

	.site-header--overlay .site-header {
		transition: color 0.25s var(--ease);
	}

	@media (prefers-reduced-motion: reduce) {
		.site-header--overlay > .site-header,
		.site-header--overlay > .site-header::before {
			transition: none;
		}
	}

	/* The overlay header's button is Solid light, on the dark hero. */
	.site-header--overlay .site-header__cta .wp-block-button {
		--btn-color: var(--white);
		--btn-text: var(--base);
		--btn-color-hover: var(--tertiary);
		--btn-text-hover: var(--base);
	}

	.site-header--overlay .site-header {
		background: transparent;
		color: var(--white);
		color-scheme: dark;
	}

	/* ---------- Navigation ---------- */

	/* The menu and the header button share one type style. */
	.site-header {
		--nav-font-size: 1.125rem;
		--nav-tracking: 0.01em;
	}

	.site-header .wp-block-navigation {
		gap: 0.2rem;
		font-family: var(--font-heading);
		font-weight: var(--heading-weight);
		font-size: var(--nav-font-size);
		letter-spacing: var(--nav-tracking);
	}

	.site-header__cta .wp-block-button__link {
		font-family: var(--font-heading) !important; /* core override: theme.json button styles sit outside any layer */
		font-weight: var(--heading-weight) !important; /* core override */
		font-size: var(--nav-font-size) !important; /* core override */
		letter-spacing: var(--nav-tracking);
		padding-block: 0.7rem !important; /* core override */
	}

	.site-header .wp-block-navigation-item__content {
		padding: 0.7rem 0.8rem !important; /* core override: core sets item padding outside any layer */
		border-radius: var(--radius-xs);
		color: inherit;
		text-decoration: none;
	}

	.site-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
		background: color-mix(in oklch, currentColor 8%, transparent);
	}

	/* Items with a dropdown: the chevron sits right after the label, inside
	   the same spacing as any other item. */
	.site-header .wp-block-navigation:not(.is-menu-open) .has-child > .wp-block-navigation-item__content {
		padding-right: 0.15rem !important; /* core override: core sets item padding outside any layer */
	}

	.site-header .wp-block-navigation:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-icon {
		margin: 0 0.8rem 0 0;
	}

	/* Dropdowns: a white panel with a soft shadow. */
	.site-header .wp-block-navigation__submenu-container {
		min-width: 16rem !important; /* core override */
		padding: 0.5rem !important; /* core override */
		border: 0 !important; /* core override */
		border-radius: var(--radius);
		background: var(--white) !important; /* core override */
		box-shadow: var(--shadow-m);
		color: var(--base) !important; /* core override */
		color-scheme: light;
	}

	/* Open each dropdown under its own item, not core's right-aligned position. */
	.site-header .wp-block-navigation:not(.is-menu-open) .wp-block-navigation__submenu-container {
		top: calc(100% + 0.4rem) !important; /* core override */
		right: auto !important; /* core override */
		left: 0 !important; /* core override */
	}

	/* Dropdowns open on hover. This invisible strip fills the gap between
	   the item and its panel, so the pointer doesn't drop the hover on
	   its way down. */
	.site-header .wp-block-navigation:not(.is-menu-open) .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 0.6rem;
	}

	.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block !important; /* core override: core lays the label and description side by side */
		white-space: nowrap;
	}

	.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background: #f2f3f1;
	}

	.site-header .wp-block-navigation-item__description {
		display: block !important; /* core override: core hides descriptions */
		margin-top: 0.15rem;
		color: var(--text-dark-muted);
		font-size: 0.85rem;
	}

	/* Collapse to the menu button below 1060px, not core's 600px. Core
	   hard-codes 600px in CSS outside any layer, so this needs !important. */
	@media (min-width: 600px) and (max-width: 1059px) {
		.nav--collapse-l .wp-block-navigation__responsive-container-open:not(.always-shown) {
			display: flex !important; /* core override */
		}

		.nav--collapse-l .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
			display: none !important; /* core override */
		}
	}

	/* The open mobile menu: a white panel with ink text. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		padding: var(--space-l) var(--gutter) !important; /* core override */
		background: var(--white) !important; /* core override */
		color: var(--base) !important; /* core override */
		color-scheme: light;
	}

	/* Left-align the open menu. Core reads these variables, so no override is needed. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		--navigation-layout-justification-setting: flex-start;
		--navigation-layout-justify: flex-start;
		--navigation-layout-align: flex-start;
	}

	.site-header .is-menu-open :is(.wp-block-navigation__container, .wp-block-navigation__submenu-container, .wp-block-navigation-item) {
		align-items: flex-start !important; /* core override: items-justified-right sets flex-end directly */
		min-width: 0 !important; /* core override */
	}

	.site-header .is-menu-open .wp-block-navigation-item__content {
		padding-inline: 0 !important; /* core override */
		text-align: start;
	}

	.site-header .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		font-family: var(--font-heading);
		font-weight: 500;
	}

	.site-header .is-menu-open .wp-block-navigation__submenu-container {
		padding: 0 0 0.5rem 0.8rem !important; /* core override */
		box-shadow: none;
	}

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

	.site-footer {
		padding-block: clamp(4rem, 8vw, 6rem) 2rem;
		background: var(--base);
		color: var(--tertiary);
		font-size: 1rem;
		color-scheme: dark;
	}

	.site-footer a {
		color: inherit;
		text-decoration: none;
	}

	.site-footer a:hover {
		text-decoration: underline;
	}

	.site-footer .wp-block-site-logo img {
		width: auto;
		height: 36px !important; /* core override */
	}

	.site-footer :is(h2, h3) {
		color: var(--white);
	}

	.site-footer h3 {
		margin-bottom: 1rem !important; /* owns spacing */
		font-family: var(--font-heading);
		font-size: 1rem;
		font-weight: 500;
		letter-spacing: normal;
	}

	.site-footer .wp-block-list {
		display: grid;
		gap: 0.55rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Newsletter sign-up row */
	.club {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 2rem 4rem;
		align-items: end;
		margin-bottom: clamp(3rem, 6vw, 4.5rem) !important; /* owns spacing */
		padding-bottom: clamp(3rem, 6vw, 4.5rem);
		border-bottom: 1px solid var(--border-color);
	}

	.club > * {
		margin: 0 !important; /* owns spacing */
	}

	.club h2 {
		max-width: 12ch;
	}

	.club p {
		max-width: 30rem;
		margin-top: 1.2rem !important; /* owns spacing */
		font-size: 1.15rem;
	}

	@media (max-width: 900px) {
		.club {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.club-form {
		display: grid;
		gap: 0.8rem;
	}

	.club-form label {
		color: var(--white);
		font-size: 0.95rem;
	}

	.club-form__row {
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
	}

	.club-form input {
		flex: 1 1 16rem;
		min-width: 0;
		padding: 1rem 1.1rem;
		border: 1px solid rgb(255 255 255 / 0.28);
		border-radius: var(--radius-xs);
		background: rgb(255 255 255 / 0.06);
		color: var(--white);
		font: inherit;
		font-size: 1.05rem;
	}

	.club-form input::placeholder {
		color: rgb(211 230 235 / 0.6);
	}

	.club-form input:focus-visible {
		border-color: var(--secondary);
	}

	.club-form button {
		padding: 1.05rem 1.55rem;
		border: 1px solid var(--white);
		border-radius: var(--radius-xs);
		background: var(--white);
		color: var(--base);
		font: inherit;
		font-size: 1.05rem;
		font-family: var(--font-heading);
		font-weight: 500;
		cursor: pointer;
	}

	.club-form button:hover {
		background: var(--tertiary);
	}

	.club-form__note {
		color: rgb(211 230 235 / 0.75);
		font-size: 0.9rem;
	}

	.foot-grid {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
		gap: 2.5rem;
	}

	.foot-grid > * {
		margin: 0 !important; /* owns spacing */
	}

	@media (max-width: 900px) {
		.foot-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 520px) {
		.foot-grid {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.foot-base {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 1rem;
		margin-top: 3.5rem !important; /* owns spacing */
		padding-top: 1.2rem;
		border-top: 1px solid var(--border-color);
		color: rgb(211 230 235 / 0.7);
		font-size: var(--text-xs);
	}

	.foot-base > * {
		margin: 0 !important; /* owns spacing */
	}

	.site-footer__contact {
		display: grid;
		gap: 0.55rem;
	}

	.site-footer__contact > *,
	.site-footer__contact .wp-block-buttons {
		margin: 0 !important; /* owns spacing */
	}

	.site-footer__about {
		max-width: 22rem;
		margin-top: 1.2rem !important; /* owns spacing */
	}

	.site-footer .site-footer__subhead {
		margin-top: 1.6rem !important; /* owns spacing */
	}

	.foot-base__links {
		display: flex;
		gap: 1.6rem;
	}
}