/* Written by the landing page build – change it by running the build's set-frame again. */
/*
 * Arden House – the main site's (ardenhouse.org) menu links, buttons,
 * headings and footer over the template's chrome. Colours and fonts are the
 * roles and tokens in branding.css.
 */

/* Type renders as the main site's does: it leaves font smoothing at the
   browser's default, which on a Mac draws every weight a shade heavier than
   the template's antialiased. The panel's copy loses Howe Green's tracking. */
body {
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}

.imagePanel .imagePanel-content p {
	letter-spacing: 0;
}

/* Header – the button at the end of the menu row. The links are the main
   site's: small semibold capitals that draw a verdigris rule on hover. */
@media (min-width: 992px) {
	.landingHeader-side {
		flex-direction: row;
		align-items: center;
		gap: clamp(1rem, 2.5vw, 2.7rem);
	}

	.landingHeader-cta.button {
		order: 2;
	}
}

.landing-menu--main {
	gap: 0 clamp(1rem, 2.5vw, 2.7rem);
}

.landing-menu--main a {
	position: relative;
	padding: 0.65rem 0;
	color: rgba(255, 255, 255, 0.9);
	font: 600 0.72rem/1.5 "Montserrat", sans-serif;
	letter-spacing: 0.08em;
	white-space: nowrap;
	transition: none;
}

.landing-menu--main a::after {
	content: '';
	position: absolute;
	bottom: 0.25rem;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--verdigris);
	transition: width 180ms ease;
}

.landing-menu--main a:hover,
.landing-menu--main a:focus {
	color: var(--white);
	opacity: 1;
}

.landing-menu--main a:hover::after,
.landing-menu--main a:focus-visible::after {
	width: 100%;
}

.landingPanel .landing-menu--panel a {
	font: 600 0.8rem/1.5 "Montserrat", sans-serif;
	letter-spacing: 0.08em;
}

/* Buttons – the main site's: the serif in sentence case on duck blue with
   rounded corners, turning verdigris and lifting under the pointer. The
   header's button, the form's submit and buttons on a panel are the same. */
.button,
.blockButton {
	padding: 14px 24px;
	border-width: 1px;
	border-radius: 4px;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.button:hover,
.button:focus-visible,
.blockButton:hover,
.blockButton:focus-visible {
	transform: translateY(-2px);
}

.landingHeader-cta.button,
.landingPanel-cta.button,
:is(.imagePanel, .imageInset) .button,
.button--onDark {
	--button-bg: var(--landing-button-bg);
	--button-border: var(--landing-button-bg);
	--button-label: var(--landing-button-text);
	--button-bg-hover: var(--landing-button-hover-bg);
	--button-border-hover: var(--landing-button-hover-bg);
	--button-label-hover: var(--landing-button-text);
}

.landingHeader-cta.button,
.landingPanel-cta.button {
	padding: 9px 20px;
	font-size: 16px;
	letter-spacing: 0;
}

.wpforms-container .wpforms-form button[type="submit"].button {
	--wpforms-button-border-size: 1px;
	--wpforms-button-border-radius: 4px;

	padding: 14px 24px;
	border-width: 1px;
	border-radius: 4px;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.wpforms-container .wpforms-form button[type="submit"].button:hover,
.wpforms-container .wpforms-form button[type="submit"].button:focus-visible {
	transform: translateY(-2px);
}

/* the form's labels at the regular weight */
.blockContent.block-image-form .wpforms-container .wpforms-field-label {
	font-weight: 400;
}

/* Headings – the main site's sizes at every width (branding.css sets the
   desktop ones), and under each section's heading its crest divider: the
   tree between two short verdigris rules, centred, or at the left on a
   panel and under a heading set left. */
.landingContent :is(h2, .sectionTitle) {
	position: relative;
	padding-bottom: 49px;
	font-size: clamp(2.3rem, 4vw, 4.8rem);
}

.landingContent :is(h2, .sectionTitle)::before,
.landingContent :is(h2, .sectionTitle)::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.landingContent :is(h2, .sectionTitle)::before {
	bottom: 16px;
	width: 164px;
	height: 1px;
	background: linear-gradient(90deg, var(--verdigris) 55px, transparent 55px calc(100% - 55px), var(--verdigris) calc(100% - 55px));
}

.landingContent :is(h2, .sectionTitle)::after {
	bottom: 0;
	width: 32px;
	height: 33px;
	background: var(--crest-colour, var(--prussian-blue));
	-webkit-mask: url(/wp-content/uploads/2026/10/arden-crest-divider.svg) center / contain no-repeat;
	mask: url(/wp-content/uploads/2026/10/arden-crest-divider.svg) center / contain no-repeat;
}

.landingContent :is(.imagePanel-content, .imageInset) :is(h2, .sectionTitle) {
	--crest-colour: var(--landing-panel-text);
}

.landingContent :is(.imagePanel-content, .imageInset) :is(h2, .sectionTitle)::before,
.landingContent .body-text h2:not([style*="center"])::before {
	left: 0;
	transform: none;
}

.landingContent :is(.imagePanel-content, .imageInset) :is(h2, .sectionTitle)::after,
.landingContent .body-text h2:not([style*="center"])::after {
	left: 66px;
	transform: none;
}

.landingContent h3 {
	font-size: calc(1.3rem + 0.6vw);

	@media (min-width: 1200px) {
		font-size: 1.75rem;
	}
}

/* Footer – the main site's: the logo over a fading verdigris rule, three
   centred columns of small type under verdigris capitals, the copyright
   line beneath. */
.siteFooter {
	padding: 4.5rem 0 1.5rem;
	background: var(--landing-footer-bg);
	color: rgba(255, 255, 255, 0.77);

	a {
		color: inherit;
		text-decoration: none;
		transition: color 180ms ease;

		&:hover,
		&:focus-visible {
			color: var(--verdigris);
		}
	}
}

.siteFooter-brand {
	text-align: center;

	a {
		display: inline-block;
	}

	img {
		display: block;
		width: 180px;
		max-width: 100%;
		height: auto;

		@media (min-width: 768px) {
			width: 230px;
		}
	}
}

.siteFooter-rule {
	max-width: 770px;
	height: 1px;
	margin: 1.5rem auto 3rem;
	background: linear-gradient(90deg, transparent, var(--verdigris), transparent);
}

.siteFooter-grid {
	display: grid;
	gap: 2rem;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;

	@media (min-width: 768px) {
		grid-template-columns: repeat(3, 1fr);
	}

	h2 {
		margin: 0 0 1rem;
		color: var(--verdigris);
		font: 700 0.7rem/1.4 "Montserrat", sans-serif;
		letter-spacing: 0.15em;
		text-transform: uppercase;

		i {
			margin-right: 0.5rem;
			font-size: 1rem;
		}
	}

	p {
		margin: 0;
		font-size: 0.78rem;
		line-height: 1.9;
	}

	p + h2 {
		margin-top: 1.5rem;
	}
}

.siteFooter-bottom {
	margin-top: 4rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.62rem;
	text-align: center;

	p {
		margin: 0;
	}
}