/*
Theme Name: ANPG
Theme URI: https://anpg.co.za
Author: Mark Norman
Author URI: https://marknorman.co.za
Description: One-page block theme for Andrew Norman Property Group. Hand-written, self-hosted fonts, no page builder, no slider, no form plugin, no SEO plugin; the theme carries its own enquiry form, structured data, meta tags and hardening.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anpg
Tags: block-theme, one-column, custom-colors, editor-style, full-site-editing
*/

/* -------------------------------------------------------------------------
   Tokens that are not theme.json presets, and the dark theme: the same
   palette slugs, redefined. Everything downstream uses the preset
   variables, so sections that set a background colour flip too.
   ---------------------------------------------------------------------- */

:root {
	/* The logo's "A" faces are white, so on a dark header it sits on a light plate. */
	--anpg-plate: transparent;
	--anpg-on-dark: rgba(255, 255, 255, 0.86);
	--anpg-band-line: rgba(255, 255, 255, 0.14);
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--anpg-plate: #c9d3ee;
		--wp--preset--color--paper: #0f1224;
		--wp--preset--color--surface: #171b33;
		--wp--preset--color--tint: #1c2244;
		--wp--preset--color--rule: #2a3054;
		--wp--preset--color--ink: #eef0fa;
		--wp--preset--color--muted: #a2a8c4;
		--wp--preset--color--blue: #5c7fe0;
		--wp--preset--color--blue-deep: #2547a0;
		--wp--preset--color--blue-ink: #8fa9f0;
		--wp--preset--color--dark: #0a0b16;
	}
}

/* -------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 100px;
	-webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

h1, h2, h3, h4 {
	font-stretch: 112%;
	text-wrap: balance;
}

:where(h1, h2, h3) em {
	font-style: normal;
	color: var(--wp--preset--color--gold);
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* Header, main and footer meet edge to edge: no block gap of page background between them. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/*
 * The homepage sections are full-width bands. WordPress's flow layout would put a block gap of page
 * background between them, which shows as a stripe between bands and doubles any border.
 */
main > .alignfull {
	margin-block-start: 0;
}

.anpg-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue-ink);
}

.anpg-eyebrow::before {
	content: "";
	flex: none;
	width: 2rem;
	height: 2px;
	background: var(--wp--preset--color--gold);
}

.anpg-eyebrow + .wp-block-heading {
	margin-block-start: 0.5em;
}

.anpg-lede-sm {
	color: var(--wp--preset--color--muted);
	max-width: 34em;
}

/* Buttons: gold by default (theme.json); outline is the ghost button on dark ground. */

.wp-block-button__link {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -8px rgba(252, 185, 0, 0.7);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--blue-ink);
	border: 0;
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	box-shadow: inset 0 0 0 1.5px currentColor, 0 8px 20px -10px rgba(18, 21, 46, 0.4);
}

/* -------------------------------------------------------------------------
   Grids built from Group blocks. Core's flow layout gives every child after
   the first a block-gap top margin, which pushes cells 2+ of a grid down;
   the doubled class outranks core's :where() rule.
   ---------------------------------------------------------------------- */

.anpg-facts__grid.anpg-facts__grid > *,
.anpg-gallery.anpg-gallery > *,
.anpg-footer__grid.anpg-footer__grid > * {
	margin-block: 0;
}

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */

/* The template part wrapper is the sticky element: the group inside it is
   only as tall as itself, so it would have nothing to stick within. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.anpg-header {
	position: relative;
	border-bottom: 1.5px solid var(--wp--preset--color--rule);
}

/* The blur lives on a pseudo-element: backdrop-filter on the header itself
   would turn it into the containing block for the navigation's fixed-position
   overlay, trapping the mobile menu inside the bar. */
.anpg-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 94%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.wp-block-group.anpg-header__bar {
	min-height: 92px;
	gap: 2rem;
}

.anpg-brand.anpg-brand {
	margin: 0 auto 0 0;
}

.anpg-brand img {
	display: block;
	width: auto;
	height: 74px;
	border-radius: 8px;
	background: var(--anpg-plate);
}

@media (prefers-color-scheme: dark) {
	.anpg-brand img {
		height: 68px;
		padding: 3px 10px;
	}
}

.wp-block-navigation.anpg-nav {
	gap: 1.8rem;
}

.anpg-nav .wp-block-navigation-item__content {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 78%, transparent);
}

.anpg-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--ink);
}

.wp-block-group.anpg-header__actions {
	gap: 1.4rem;
}

.anpg-tel {
	margin: 0;
	white-space: nowrap;
}

.anpg-tel a {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.82rem;
	text-decoration: none;
}

.anpg-tel a::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: #2db36b;
	box-shadow: 0 0 0 3px color-mix(in srgb, #2db36b 25%, transparent);
}

/* Collapse the menu to the overlay button below 900px, not the block's
   default 600px: four links, the number and a button do not fit in between. */
@media (max-width: 900px) {
	.anpg-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.anpg-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.anpg-tel {
		display: none;
	}

	.wp-block-group.anpg-header__bar {
		min-height: 76px;
		gap: 1rem;
	}

	.anpg-brand img {
		height: 58px;
	}
}

@media (max-width: 900px) and (prefers-color-scheme: dark) {
	.anpg-brand img {
		height: 54px;
	}
}

.anpg-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	padding: 2rem clamp(1rem, 4vw, 2.5rem);
}

/* Overlay links read left-aligned even though the bar is right-justified. */
.anpg-nav.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}

.anpg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.7rem;
	font-weight: 800;
	font-stretch: 112%;
	color: var(--wp--preset--color--ink);
}

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

@media (max-width: 420px) {
	.anpg-header__cta .wp-block-button__link {
		padding: 0.7em 0.95em;
		font-size: 0.88rem;
	}
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

.anpg-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(72px, 11vw, 150px) clamp(124px, 14vw, 190px);
	background: #0e1230;
	color: var(--wp--preset--color--white);
}

.anpg-hero .anpg-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none;
	margin: 0;
}

.anpg-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}

.anpg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(95deg, rgba(14, 18, 48, 0.94) 0%, rgba(20, 26, 70, 0.78) 42%, rgba(20, 26, 70, 0.12) 78%, rgba(20, 26, 70, 0) 100%);
}

/* On a phone the text runs the full width, so the photo is darkened evenly rather than from the left. */
@media (max-width: 700px) {
	.anpg-hero::before {
		background: linear-gradient(180deg, rgba(14, 18, 48, 0.9) 0%, rgba(20, 26, 70, 0.74) 100%);
	}
}

.anpg-hero__inner {
	position: relative;
	z-index: 2;
}

.anpg-hero .anpg-eyebrow {
	color: var(--wp--preset--color--gold);
}

.anpg-hero h1 {
	max-width: 12.5em;
	margin-block-start: 0.5em;
}

.anpg-hero .anpg-lede {
	max-width: 30em;
	margin-block-start: 1.4em;
	font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.3rem);
	color: var(--anpg-on-dark);
}

.anpg-hero .anpg-hero__cta {
	margin-block-start: 2.2rem;
}

.anpg-hero .is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

.anpg-hero .is-style-outline > .wp-block-button__link:hover {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--white);
}

@media (prefers-reduced-motion: no-preference) {
	.anpg-hero__bg img {
		animation: anpg-settle 14s ease-out both;
	}

	.anpg-hero__inner > * {
		animation: anpg-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.anpg-hero__inner > :nth-child(2) {
		animation-delay: 0.08s;
	}

	.anpg-hero__inner > :nth-child(3) {
		animation-delay: 0.16s;
	}

	.anpg-hero__inner > :nth-child(4) {
		animation-delay: 0.24s;
	}
}

@keyframes anpg-settle {
	from {
		transform: scale(1.06);
	}

	to {
		transform: scale(1);
	}
}

@keyframes anpg-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Facts card, overlapping the bottom of the hero
   ---------------------------------------------------------------------- */

.anpg-facts.anpg-facts {
	position: relative;
	z-index: 3;
	margin-block-start: -84px;
}

.anpg-facts__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	box-shadow: 0 30px 60px -34px rgba(18, 21, 46, 0.45);
}

.anpg-fact {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.6rem 1.5rem;
	border-right: 1px solid var(--wp--preset--color--rule);
}

.anpg-fact:last-child {
	border-right: 0;
}

.anpg-fact > * {
	margin: 0;
}

.anpg-fact__v {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem);
	font-weight: 800;
	font-stretch: 118%;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--blue-ink);
	font-variant-numeric: tabular-nums;
}

.anpg-fact__v small {
	margin-left: 0.15em;
	font-size: 0.5em;
	font-weight: 700;
	letter-spacing: 0;
}

.anpg-fact__k {
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

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

	.anpg-fact:nth-child(2) {
		border-right: 0;
	}

	.anpg-fact:nth-child(-n + 2) {
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}
}

@media (max-width: 460px) {
	.anpg-facts__grid {
		grid-template-columns: 1fr;
	}

	.anpg-fact {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}

	.anpg-fact:last-child {
		border-bottom: 0;
	}
}

/* -------------------------------------------------------------------------
   Sections and section heads
   ---------------------------------------------------------------------- */

.anpg-section {
	padding-block: clamp(60px, 8vw, 112px);
}

/* The properties section already ends with its own bottom padding. */
.anpg-section.anpg-tenants {
	padding-block-start: 0;
}

.wp-block-columns.anpg-sec-head {
	gap: 2rem;
	margin-block-end: clamp(28px, 4vw, 52px);
}

.anpg-sec-head .anpg-lede-sm {
	margin: 0;
}

/* -------------------------------------------------------------------------
   Properties
   ---------------------------------------------------------------------- */

.anpg-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: 1.6rem;
}

/* An author display rule beats the hidden attribute; restore it. */
.anpg-filter[hidden],
.anpg-prop[hidden] {
	display: none;
}

.anpg-filter button {
	padding: 0.55em 1.05em;
	font: 600 0.88rem var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border: 1.5px solid var(--wp--preset--color--rule);
	border-radius: 99px;
	cursor: pointer;
}

.anpg-filter button:hover {
	border-color: var(--wp--preset--color--blue);
}

.anpg-filter button[aria-pressed="true"] {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--blue);
	border-color: var(--wp--preset--color--blue);
}

.anpg-props__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 26px);
}

.anpg-prop {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.anpg-prop:hover {
	color: inherit;
	transform: translateY(-4px);
	box-shadow: 0 26px 40px -26px rgba(18, 21, 46, 0.5);
}

.anpg-prop__img {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--tint);
}

.anpg-prop__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.anpg-prop:hover .anpg-prop__img img {
	transform: scale(1.04);
}

.anpg-prop__tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	padding: 0.4em 0.75em;
	font: 500 0.68rem var(--wp--preset--font-family--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	background: rgba(14, 18, 48, 0.82);
	border-radius: 99px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.anpg-prop__tag.is-home {
	color: #1a1400;
	background: rgba(252, 185, 0, 0.95);
}

.anpg-prop__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1.15rem 1.25rem 1.3rem;
}

.anpg-prop__name {
	margin: 0;
	font-size: 1.25rem;
	font-stretch: 108%;
}

.anpg-prop__area {
	font-size: 0.92rem;
	color: var(--wp--preset--color--muted);
}

.anpg-prop__summary {
	margin-top: 0.3rem;
	font-size: 0.92rem;
	line-height: 1.5;
}

.anpg-prop__go {
	display: flex;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 0.8rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--wp--preset--color--blue-ink);
}

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

@media (max-width: 560px) {
	.anpg-props__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Who rents here
   ---------------------------------------------------------------------- */

.wp-block-columns.anpg-split {
	gap: clamp(28px, 5vw, 72px);
}

.anpg-split .wp-block-heading {
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
}

.anpg-split__pic.anpg-split__pic {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 14px;
}

.anpg-split__pic img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3.1;
	object-fit: cover;
}

.anpg-split__pic figcaption {
	position: absolute;
	left: 14px;
	bottom: 14px;
	margin: 0;
	padding: 0.55em 0.85em;
	font: 500 0.72rem var(--wp--preset--font-family--mono);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border-radius: 6px;
}

.wp-block-list.anpg-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: 1.5rem 0;
	padding: 0;
	list-style: none;
}

.anpg-tags li {
	margin: 0;
	padding: 0.5em 0.95em;
	font-size: 0.92rem;
	font-weight: 600;
	background: var(--wp--preset--color--tint);
	border-radius: 6px;
}

.anpg-also {
	margin-block-start: 1.1rem;
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------------------
   Navy band
   ---------------------------------------------------------------------- */

.anpg-band {
	padding-block: clamp(60px, 8vw, 112px);
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--band);
	border-top: 1.5px solid var(--anpg-band-line);
	border-bottom: 1.5px solid var(--anpg-band-line);
}

.wp-block-columns.anpg-band__cols {
	gap: clamp(24px, 5vw, 72px);
}

.anpg-band h2 {
	max-width: 15em;
	font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
}

.anpg-band p {
	max-width: 28em;
	color: rgba(255, 255, 255, 0.85);
}

.anpg-band .wp-block-buttons {
	margin-block-start: 1.4rem;
}

/* -------------------------------------------------------------------------
   Gallery
   ---------------------------------------------------------------------- */

.anpg-gallery {
	display: grid;
	grid-template-columns: 7fr 5fr;
	grid-auto-rows: clamp(120px, 15vw, 200px);
	gap: clamp(8px, 1.2vw, 14px);
}

.anpg-gallery__item.anpg-gallery__item {
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
}

.anpg-gallery__item.is-large {
	grid-row: span 2;
}

.anpg-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.anpg-gallery__item:hover img {
	transform: scale(1.04);
}

@media (max-width: 700px) {
	.anpg-gallery {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: clamp(110px, 30vw, 180px);
	}

	.anpg-gallery__item.is-large {
		grid-column: span 2;
		grid-row: span 1;
	}
}

/* -------------------------------------------------------------------------
   Contact
   ---------------------------------------------------------------------- */

.anpg-contact {
	background: var(--wp--preset--color--tint);
	border-top: 1.5px solid var(--wp--preset--color--rule);
	border-bottom: 1.5px solid var(--wp--preset--color--rule);
}

.wp-block-columns.anpg-contact__cols {
	gap: clamp(28px, 5vw, 72px);
}

.anpg-contact h2 {
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem);
}

.anpg-details {
	display: grid;
	gap: 1.2rem;
	margin: 2rem 0 0;
}

.anpg-details > div {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	gap: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.anpg-details dt {
	padding-top: 0.25em;
	font: 500 0.72rem var(--wp--preset--font-family--mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.anpg-details dd {
	margin: 0;
}

.anpg-details a {
	font-weight: 600;
}

@media (max-width: 420px) {
	.anpg-details > div {
		grid-template-columns: 1fr;
		gap: 0.3rem;
	}
}

/* Form */

.anpg-form-wrap {
	padding: clamp(20px, 3vw, 34px);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 14px;
}

.anpg-form {
	display: grid;
	gap: 0.95rem;
}

.anpg-form label {
	display: grid;
	gap: 0.35rem;
	font-size: 0.88rem;
	font-weight: 600;
}

.anpg-form__optional {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.anpg-form input,
.anpg-form select,
.anpg-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	padding: 0.8em 0.9em;
	font: inherit;
	font-size: 0.97rem;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1.5px solid var(--wp--preset--color--rule);
	border-radius: 8px;
}

.anpg-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.4em;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
}

.anpg-form input:focus,
.anpg-form select:focus,
.anpg-form textarea:focus {
	outline: 3px solid color-mix(in srgb, var(--wp--preset--color--blue) 35%, transparent);
	outline-offset: 0;
	border-color: var(--wp--preset--color--blue);
}

.anpg-form textarea {
	min-height: 130px;
	resize: vertical;
}

.anpg-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.95rem;
}

.anpg-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.anpg-form__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.anpg-form__submit button {
	cursor: pointer;
}

.anpg-form__submit button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.anpg-form__aside {
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
}

.anpg-form__privacy {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.anpg-form__status {
	margin: 0 0 1rem;
	padding: 0.9rem 1.1rem;
	font-size: 0.95rem;
	background: var(--wp--preset--color--paper);
	border: 1.5px solid var(--wp--preset--color--rule);
	border-radius: 8px;
}

.anpg-form__status.is-sent {
	border-color: #2db36b;
	background: color-mix(in srgb, #2db36b 12%, var(--wp--preset--color--surface));
}

.anpg-form__status.is-error {
	border-color: #c8412b;
}

@media (max-width: 760px) {
	.anpg-form__row {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Footer (always dark)
   ---------------------------------------------------------------------- */

.anpg-footer {
	padding-block: clamp(40px, 5vw, 64px) 1.6rem;
	color: #b9bdd3;
	background: var(--wp--preset--color--dark);
}

.anpg-footer__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 2rem;
}

.anpg-footer__grid p {
	margin: 0;
	font-size: 0.93rem;
	color: #d3d6e6;
}

.anpg-footer__grid p + p {
	margin-top: 0.6rem;
}

.anpg-footer__brand p {
	max-width: 22em;
	margin-top: 1rem;
}

.anpg-footer__logo.anpg-footer__logo {
	margin: 0;
}

.anpg-footer__logo img {
	display: block;
	width: auto;
	height: 64px;
	padding: 3px 10px;
	background: #c9d3ee;
	border-radius: 8px;
}

.anpg-footer__grid .anpg-footer__label {
	margin-bottom: 0.8rem;
	font: 500 0.72rem var(--wp--preset--font-family--mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8a90ae;
}

.anpg-footer__label + p {
	margin-top: 0;
}

.anpg-footer a {
	color: #d3d6e6;
	text-decoration: none;
}

.anpg-footer a:hover {
	color: var(--wp--preset--color--gold);
}

.wp-block-group.anpg-footer__legal {
	gap: 1rem;
	margin-block-start: 2.2rem;
	padding-top: 1.1rem;
	border-top: 1px solid #2b2d3a;
}

.anpg-footer__legal p {
	margin: 0;
	font-size: 0.8rem;
	color: #8a90ae;
}

.anpg-footer__legal a {
	color: #b9bdd3;
}

@media (max-width: 760px) {
	.anpg-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Columns: core stacks them below 782px; keep the stacked gaps sane.
   ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	.wp-block-columns.anpg-sec-head {
		gap: 0.75rem;
	}
}

/* -------------------------------------------------------------------------
   Editor
   ---------------------------------------------------------------------- */

.editor-styles-wrapper .anpg-form__trap {
	display: none;
}