/*
Theme Name: Hall Place Estate Child
Theme URI: https://hallplace.uk
Description: Kadence child theme for the Hall Place Estate website. Implements the Option A "Devey Green" design system: hunter green / antique gold / ivory palette, Cormorant Garamond + EB Garamond self-hosted type, rectangular gold-bordered buttons, stone cards, gold hairline rules, full-bleed hero and the custom estate timeline block.
Author: Hall Place Estate (build by Fleur)
Author URI: https://hallplace.uk
Template: kadence
Version: 1.9.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hallplace
Tags: full-width-template, custom-colors, custom-logo, editor-style, wide-blocks
*/

/* ==========================================================================
   Hall Place Estate -- Option A "Devey Green" design system
   Mobile-first. Kadence parent provides layout/framework; everything with an
   `hp-` prefix belongs to this child theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens (SPEC S4, approved Option A "Devey Green")
   -------------------------------------------------------------------------- */
:root {
	/* Palette */
	--hp-green: #1f3d2b;          /* hunter green -- primary */
	--hp-green-deep: #17352a;     /* deep green -- footer / hero overlay */
	--hp-gold: #b08d3e;           /* antique gold -- accents, borders, monogram */
	--hp-ivory: #f7f4ec;          /* ivory -- page background, text on green */
	--hp-stone: #e8e2d4;          /* stone -- cards, alternate backgrounds */
	--hp-charcoal: #2b2b28;       /* charcoal -- body text */

	/* Gold at 40% -- hairlines. --hp-hairline is the 1px gold hairline rule. */
	--hp-gold-40: rgba(176, 141, 62, 0.4);
	--hp-hairline: 1px solid var(--hp-gold-40);

	/* Ink tints */
	--hp-ink-60: rgba(43, 43, 40, 0.72);
	--hp-ink-40: rgba(43, 43, 40, 0.55);
	--hp-ivory-70: rgba(247, 244, 236, 0.78);

	/* Type */
	--hp-font-heading: "Cormorant Garamond", "Cormorant", "Times New Roman", Times, Georgia, serif;
	--hp-font-body: "EB Garamond", "Garamond", "Times New Roman", Times, Georgia, serif;
	--hp-track-label: 0.12em;     /* nav / labels / CTA letter-spacing */

	/* Layout */
	--hp-max: 1100px;             /* ~1100px content column */
	--hp-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--hp-space-1: 0.5rem;
	--hp-space-2: 1rem;
	--hp-space-3: 1.5rem;
	--hp-space-4: 2.5rem;
	--hp-space-5: 4rem;
	--hp-space-6: 6rem;

	/* Shape & motion */
	--hp-radius: 0;               /* rectangular language throughout */
	--hp-shadow-card: 0 1px 2px rgba(43, 43, 40, 0.08); /* <=2px warm grey, barely there */
	--hp-ease: cubic-bezier(0.33, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

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

body {
	background-color: var(--hp-ivory) !important; /* Kadence global CSS loads after the child sheet -- pin the ivory (see fleur-droplet-admin skill) */
	color: var(--hp-charcoal) !important;
	font-family: var(--hp-font-body) !important; /* Kadence global CSS pins its own body font -- override (fleur-droplet-admin habit) */
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hp-font-heading);
	font-weight: 600;
	color: var(--hp-green);
	line-height: 1.15;
	letter-spacing: 0.01em;
}

a {
	color: var(--hp-green);
	text-decoration: underline;
	text-decoration-color: var(--hp-gold-40);
	text-underline-offset: 0.2em;
}

a:hover,
a:focus-visible {
	color: var(--hp-green-deep);
	text-decoration-color: var(--hp-gold);
}

::selection {
	background: var(--hp-green);
	color: var(--hp-ivory);
}

:focus-visible {
	outline: 2px solid var(--hp-gold);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
}

/* Skip link (belt & braces alongside the theme's own) */
.hp-skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	z-index: 1000;
	background: var(--hp-green-deep);
	color: var(--hp-ivory);
	padding: 0.75rem 1.25rem;
	font-family: var(--hp-font-body);
	font-variant-caps: small-caps;
	letter-spacing: var(--hp-track-label);
}

.hp-skip-link:focus {
	inset-inline-start: 1rem;
	inset-block-start: 1rem;
	color: var(--hp-ivory);
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.hp-container {
	max-width: var(--hp-max);
	margin-inline: auto;
	padding-inline: var(--hp-gutter);
	width: 100%;
}

.hp-section {
	padding-block: var(--hp-space-5);
}

@media (min-width: 900px) {
	.hp-section {
		padding-block: var(--hp-space-6);
	}
}

/* Full-bleed helper: escapes a constrained Kadence content column. */
.hp-bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   4. Labels, rules & small-caps voice
   -------------------------------------------------------------------------- */
.hp-section-label {
	font-family: var(--hp-font-body);
	font-weight: 500;
	font-variant-caps: small-caps;
	letter-spacing: var(--hp-track-label);
	text-transform: none; /* QA fix 13 Sep: lowercase transform killed the small-caps effect */
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--hp-gold);
	margin: 0 0 var(--hp-space-2);
}

/* hr.hp-rule / div rule -- thin gold rule, 1px at 40% */
.hp-rule {
	border: 0;
	border-top: var(--hp-hairline);
	margin: var(--hp-space-4) auto;
	max-width: var(--hp-max);
}

.hp-rule--narrow {
	max-width: 4rem;
	border-top-color: var(--hp-gold);
}

/* Headings may opt into the small-caps label voice */
.hp-page-head {
	text-align: center;
	padding-block: var(--hp-space-5) var(--hp-space-4);
}

.hp-page-title {
	font-size: clamp(2.25rem, 5.5vw, 3.5rem);
	margin: 0 0 var(--hp-space-2);
}

.hp-intro {
	font-size: 1.125rem;
	color: var(--hp-ink-60);
	max-width: 44rem;
	margin-inline: auto;
}

@media (min-width: 600px) {
	.hp-intro {
		font-size: 1.25rem;
	}
}

/* --------------------------------------------------------------------------
   5. Buttons -- rectangular, 1px gold border, EB Garamond small-caps label
   -------------------------------------------------------------------------- */
.hp-btn {
	display: inline-block;
	appearance: none;
	background: transparent;
	border: 1px solid var(--hp-gold);
	border-radius: var(--hp-radius);
	color: var(--hp-charcoal);
	cursor: pointer;
	font-family: var(--hp-font-body);
	font-weight: 500;
	font-variant-caps: small-caps;
	text-transform: lowercase;
	letter-spacing: var(--hp-track-label);
	font-size: 1rem;
	line-height: 1.2;
	padding: 0.875rem 1.75rem;
	text-decoration: none;
	transition: background-color 0.25s var(--hp-ease), color 0.25s var(--hp-ease), border-color 0.25s var(--hp-ease);
}

.hp-btn:hover,
.hp-btn:focus-visible {
	background: var(--hp-green);
	border-color: var(--hp-green);
	color: var(--hp-ivory);
	text-decoration: none;
}

.hp-btn:active {
	background: var(--hp-green-deep);
	border-color: var(--hp-green-deep);
	color: var(--hp-ivory);
}

/* Solid variant for hero / banner contexts */
.hp-btn--solid {
	background: var(--hp-green);
	border-color: var(--hp-green);
	color: var(--hp-ivory);
}

.hp-btn--solid:hover,
.hp-btn--solid:focus-visible {
	background: var(--hp-green-deep);
	border-color: var(--hp-green-deep);
	color: var(--hp-ivory);
}

/* Reverse variant on dark backgrounds (hero, deep-green panels) */
.hp-btn--reverse {
	color: var(--hp-ivory);
	border-color: var(--hp-ivory);
	background: transparent;
}

.hp-btn--reverse:hover,
.hp-btn--reverse:focus-visible {
	background: var(--hp-gold);
	border-color: var(--hp-gold);
	color: var(--hp-green-deep);
}

/* Quiet text-link styled in the label voice */
.hp-link {
	font-family: var(--hp-font-body);
	font-variant-caps: small-caps;
	text-transform: lowercase;
	letter-spacing: var(--hp-track-label);
	color: var(--hp-green);
	text-decoration: underline;
	text-decoration-color: var(--hp-gold-40);
}

.hp-link:hover,
.hp-link:focus-visible {
	color: var(--hp-green-deep);
	text-decoration-color: var(--hp-gold);
}

/* Align Contact Form 7 submit buttons with the house style */
.wpcf7-submit.hp-btn,
.wpcf7 input[type="submit"] {
	background: transparent;
	border: 1px solid var(--hp-gold);
	border-radius: var(--hp-radius);
	font-family: var(--hp-font-body);
	font-variant-caps: small-caps;
	text-transform: lowercase;
	letter-spacing: var(--hp-track-label);
	font-size: 1rem;
	padding: 0.875rem 1.75rem;
	color: var(--hp-charcoal);
	transition: background-color 0.25s var(--hp-ease), color 0.25s var(--hp-ease);
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus-visible {
	background: var(--hp-green);
	border-color: var(--hp-green);
	color: var(--hp-ivory);
}

/* --------------------------------------------------------------------------
   6. Cards -- stone background, generous padding, minimal shadow
   -------------------------------------------------------------------------- */
.hp-card {
	background: var(--hp-stone);
	border: 1px solid var(--hp-gold-40);
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-shadow-card);
	padding: var(--hp-space-3);
}

@media (min-width: 600px) {
	.hp-card {
		padding: var(--hp-space-4);
	}
}

.hp-card__title {
	font-size: 1.5rem;
	margin: 0 0 var(--hp-space-1);
}

.hp-card__body {
	color: var(--hp-ink-60);
	margin: 0 0 var(--hp-space-2);
}

/* Home teaser trio */
.hp-teaser-grid {
	display: grid;
	gap: var(--hp-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.hp-teaser-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--hp-space-4);
	}
}

.hp-teaser .hp-btn {
	margin-top: auto;
}

.hp-teaser {
	display: flex;
	flex-direction: column;
}

/* --------------------------------------------------------------------------
   7. Hero -- full-bleed photographic (SPEC S3.1)
   -------------------------------------------------------------------------- */
.hp-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	background-color: var(--hp-green-deep);
	min-height: min(72vh, 44rem);
	padding-block: var(--hp-space-5);
	isolation: isolate;
	overflow: hidden;
}

.hp-hero__media,
.hp-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* Deep-green overlay for legibility + brand tone */
.hp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(23, 53, 42, 0.55) 0%, rgba(23, 53, 42, 0.35) 45%, rgba(23, 53, 42, 0.75) 100%);
}

.hp-hero__inner {
	max-width: var(--hp-max);
	margin-inline: auto;
	padding-inline: var(--hp-gutter);
	width: 100%;
	color: var(--hp-ivory);
	text-align: center;
}

.hp-hero__monogram {
	display: inline-block;
	width: clamp(6rem, 14vw, 9rem);
	height: auto;
	margin-block-end: var(--hp-space-2);
}

.hp-hero__title {
	font-family: var(--hp-font-heading);
	font-weight: 500;
	font-size: clamp(2.75rem, 8vw, 5rem);
	line-height: 1.05;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hp-ivory);
	margin: 0 0 var(--hp-space-2);
	text-wrap: balance;
}

.hp-hero__line {
	font-family: var(--hp-font-body);
	font-size: 1.125rem;
	color: var(--hp-ivory-70);
	letter-spacing: 0.06em;
	font-variant-caps: small-caps;
	text-transform: lowercase;
	margin: 0;
}

@media (min-width: 600px) {
	.hp-hero__line {
		font-size: 1.3125rem;
	}
}

/* --------------------------------------------------------------------------
   8. Private-estate banner (SPEC S1: present on every page)
   -------------------------------------------------------------------------- */
.hp-banner {
	background: var(--hp-green-deep);
	border-bottom: 1px solid var(--hp-gold-40);
	color: var(--hp-ivory);
}

.hp-banner__text {
	max-width: var(--hp-max);
	margin-inline: auto;
	padding-block: 0.5rem;
	padding-inline: var(--hp-gutter);
	text-align: center;
	font-family: var(--hp-font-body);
	font-weight: 500;
	font-variant-caps: small-caps;
	text-transform: lowercase;
	letter-spacing: var(--hp-track-label);
	font-size: 0.875rem;
	line-height: 1.5;
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   9. Gallery grid (SPEC S3.7)
   -------------------------------------------------------------------------- */
.hp-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--hp-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.hp-gallery {
		gap: var(--hp-space-4);
	}
}

.hp-gallery__item {
	margin: 0;
}

.hp-gallery__item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--hp-gold-40);
	background: var(--hp-stone);
}

.hp-gallery__caption {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--hp-ink-60);
}

.hp-gallery__caption .hp-credit {
	font-variant-caps: small-caps;
	text-transform: lowercase;
	letter-spacing: 0.06em;
	color: var(--hp-ink-40);
}

/* --------------------------------------------------------------------------
   10. Property cards (SPEC S3.5)
   -------------------------------------------------------------------------- */
.hp-properties__grid {
	display: grid;
	gap: var(--hp-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.hp-properties__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--hp-space-4);
	}
}

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

.hp-property {
	display: flex;
	flex-direction: column;
	background: var(--hp-stone);
	border: 1px solid var(--hp-gold-40);
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-shadow-card);
	overflow: hidden;
}

.hp-property__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--hp-stone);
	border-bottom: var(--hp-hairline);
	overflow: hidden;
}

.hp-property__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Placeholder state until Shaun's photography lands (SPEC S6) */
.hp-property__media--placeholder {
	display: grid;
	place-items: center;
	background:
		linear-gradient(var(--hp-gold-40), var(--hp-gold-40)) top left / 100% 1px no-repeat,
		linear-gradient(var(--hp-gold-40), var(--hp-gold-40)) bottom left / 100% 1px no-repeat;
	background-color: var(--hp-ivory);
}

.hp-property__media--placeholder .hp-property__monogram {
	width: clamp(4.5rem, 10vw, 6rem);
	height: auto;
	opacity: 0.85;
}

.hp-property__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--hp-space-3);
}

@media (min-width: 600px) {
	.hp-property__body {
		padding: var(--hp-space-4);
	}
}

.hp-property__name {
	font-size: 1.625rem;
	margin: 0 0 var(--hp-space-1);
}

.hp-property__tagline {
	color: var(--hp-ink-60);
	margin: 0 0 var(--hp-space-3);
}

.hp-property__enquire {
	margin-top: auto;
	align-self: flex-start;
}

/* --------------------------------------------------------------------------
   11. Forms (Contact Form 7 target, SPEC S7)
   -------------------------------------------------------------------------- */
.hp-form,
.wpcf7-form {
	max-width: 44rem;
}

.hp-form label,
.wpcf7-form label {
	display: block;
	font-family: var(--hp-font-body);
	font-variant-caps: small-caps;
	text-transform: lowercase;
	letter-spacing: var(--hp-track-label);
	font-weight: 500;
	font-size: 0.9375rem;
	margin: 0 0 var(--hp-space-1);
}

.hp-form p,
.wpcf7-form p {
	margin-block: var(--hp-space-3);
}

.hp-form input[type="text"],
.hp-form input[type="email"],
.hp-form input[type="tel"],
.hp-form input[type="url"],
.hp-form select,
.hp-form textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	background: var(--hp-ivory);
	border: 1px solid var(--hp-gold-40);
	border-radius: var(--hp-radius);
	color: var(--hp-charcoal);
	font-family: var(--hp-font-body);
	font-size: 1rem;
	line-height: 1.5;
	padding: 0.75rem 1rem;
	transition: border-color 0.2s var(--hp-ease), background-color 0.2s var(--hp-ease);
}

.hp-form textarea,
.wpcf7-form textarea {
	min-height: 9rem;
}

.hp-form input:focus,
.hp-form select:focus,
.hp-form textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--hp-gold);
	background: #fffdf8;
}

.hp-form ::placeholder,
.wpcf7-form ::placeholder {
	color: var(--hp-ink-40);
}

/* CF7 response notices */
.wpcf7-not-valid-tip {
	color: #8a3b2e;
	font-size: 0.875rem;
}

.wpcf7 form .wpcf7-response-output {
	border: var(--hp-hairline);
	background: var(--hp-stone);
	color: var(--hp-charcoal);
	padding: var(--hp-space-2) var(--hp-space-3);
	margin: var(--hp-space-3) 0 0;
}

/* --------------------------------------------------------------------------
   12. Timeline block hook-through (full styles in assets/css/timeline.css)
   -------------------------------------------------------------------------- */
.wp-block-hallplace-timeline {
	/* Wrapper emitted by the block renderer -- the .hp-timeline section owns
	   its own spacing, so keep this neutral to avoid doubled margins. */
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   13. Footer accents (deep green footer, gold hairline)
   -------------------------------------------------------------------------- */
.hp-footer-rule {
	border: 0;
	border-top: var(--hp-hairline);
	max-width: var(--hp-max);
	margin: 0 auto var(--hp-space-3);
}

/* --------------------------------------------------------------------------
   14. Motion & reduced-motion (SPEC S4: subtle only, reduced-motion honoured)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Finesse pass -- 14 Sep review with Shaun (mobile card overflow, grey title
   band, white header bar, general polish). Organised rewrite of the 13 Sep
   QA-fix tail; every working fix from that tail is preserved or superseded.
   ========================================================================== */

/* --------------------------------------------------------------------------
   15. Private-estate banner -- hunter green, distinct from the deep header.
   -------------------------------------------------------------------------- */
.hp-banner {
	background: var(--hp-green);
}

/* --------------------------------------------------------------------------
   16. Site header -- deep-green masthead on every viewport (replaces the
       Kadence white bar + dark site title).
   -------------------------------------------------------------------------- */
#masthead,
#masthead .site-header-row-container-inner,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap),
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
	background: var(--hp-green-deep) !important;
	border-bottom: 1px solid var(--hp-gold-40);
}

/* Branding: monogram roundel + small-caps wordmark. */
.site-branding .brand {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
}
.site-branding .brand::before {
	content: "";
	display: inline-block;
	width: 2.375rem;
	height: 2.375rem;
	flex: none;
	background: url("assets/img/monogram-roundel.svg") center / contain no-repeat;
}
.site-branding .site-title {
	margin: 0;
	color: var(--hp-ivory) !important;
	font-family: var(--hp-font-body) !important;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.2;
	font-variant-caps: small-caps;
	text-transform: lowercase;
	letter-spacing: 0.16em;
}

/* Desktop nav: ivory small-caps; gold underline marks the current page. */
.main-navigation .primary-menu-container > ul > li.menu-item > a {
	color: var(--hp-ivory-70) !important;
	font-family: var(--hp-font-body);
	font-variant-caps: small-caps;
	text-transform: lowercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: color 0.25s var(--hp-ease);
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item > a:focus-visible {
	color: var(--hp-ivory) !important;
}
.main-navigation .primary-menu-container > ul > li.current-menu-item > a {
	color: var(--hp-ivory) !important;
	text-decoration: underline;
	text-decoration-color: var(--hp-gold);
	text-underline-offset: 0.45em;
}

/* Contact as the gold-outline item (kept inside the bar's 80px rhythm). */
.site-header .primary-menu-container > ul > .menu-item:last-child > a {
	color: var(--hp-gold) !important;
	border: 1px solid var(--hp-gold);
	padding: 0.35rem 0.95rem;
	margin-left: 0.5rem;
}
.site-header .primary-menu-container > ul > .menu-item:last-child > a:hover,
.site-header .primary-menu-container > ul > .menu-item:last-child > a:focus-visible {
	background: var(--hp-gold);
	color: var(--hp-green-deep) !important;
	text-decoration: none;
}

/* Mobile trigger + drawer. */
.site-header .mobile-toggle-open-container .menu-toggle-open {
	color: var(--hp-ivory) !important;
}
#mobile-drawer .drawer-inner {
	background: var(--hp-green-deep) !important;
}
#mobile-drawer .drawer-content {
	padding-top: 1.5rem;
}
#mobile-drawer .mobile-navigation ul li > a,
#mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
	color: var(--hp-ivory) !important;
	font-family: var(--hp-font-body);
	font-variant-caps: small-caps;
	text-transform: lowercase;
	letter-spacing: 0.12em;
	font-size: 1.0625rem;
}
#mobile-drawer .mobile-navigation ul li.current-menu-item > a,
#mobile-drawer .mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap {
	color: var(--hp-gold) !important;
}
#mobile-drawer .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
#mobile-drawer .mobile-navigation ul li:not(.menu-item-has-children) a {
	border-bottom: 1px solid var(--hp-gold-40) !important;
}
#mobile-drawer .menu-toggle-close .toggle-close-bar {
	background: var(--hp-ivory) !important;
}

/* --------------------------------------------------------------------------
   17. Bespoke page hero -- replaces Kadence's grey title band on every sub
       page (rendered by hallplace_page_hero() in functions.php).
   -------------------------------------------------------------------------- */
.hp-page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--hp-green-deep);
	border-bottom: 1px solid var(--hp-gold-40);
	color: var(--hp-ivory);
}

/* Photo layer: the page's featured image under a deep-green scrim. */
.hp-page-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--hp-hero-img, none);
	background-size: cover;
	background-position: center;
}
.hp-page-hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(23, 53, 42, 0.66) 0%, rgba(23, 53, 42, 0.3) 50%, rgba(23, 53, 42, 0.72) 100%);
}

/* No-photo variant: monogram watermark + a soft gold glow. */
.hp-page-hero--plain::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("assets/img/monogram-reverse.svg") right -3rem bottom -3.5rem / 18rem no-repeat;
	opacity: 0.14;
}
.hp-page-hero--plain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(120% 100% at 88% 112%, rgba(176, 141, 62, 0.18) 0%, rgba(176, 141, 62, 0) 55%);
}

.hp-page-hero__inner {
	max-width: var(--hp-max);
	margin-inline: auto;
	padding-block: clamp(3.25rem, 8vh, 5.5rem);
	padding-inline: var(--hp-gutter);
}
@media (min-width: 900px) {
	.hp-page-hero__inner {
		padding-block: clamp(4rem, 10vh, 6.25rem);
	}
}
.hp-page-hero__kicker {
	margin: 0 0 0.6rem;
	font-family: var(--hp-font-body);
	font-weight: 500;
	font-variant-caps: small-caps;
	text-transform: lowercase;
	letter-spacing: 0.16em;
	font-size: 0.9375rem;
	color: var(--hp-gold);
}
.hp-page-hero__title {
	margin: 0;
	font-family: var(--hp-font-heading);
	font-weight: 600;
	font-size: clamp(2.5rem, 6vw, 3.875rem);
	line-height: 1.08;
	color: var(--hp-ivory);
	text-wrap: balance;
}
.hp-page-hero__title::after {
	content: "";
	display: block;
	width: 4rem;
	border-top: 1px solid var(--hp-gold);
	margin: 1.1rem 0 0;
	opacity: 0.85;
}
.hp-page-hero__intro {
	max-width: 44rem;
	margin: 1rem 0 0;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--hp-ivory-70);
}

/* --------------------------------------------------------------------------
   18. Front-page hero -- consolidated scrim + title treatment (one rule where
       the QA tail previously stacked five overrides).
   -------------------------------------------------------------------------- */
.hp-hero .wp-block-cover__background.has-background-dim-50 {
	opacity: 1 !important;
	background: linear-gradient(180deg, rgba(22, 40, 31, 0.22) 0%, rgba(22, 40, 31, 0.45) 48%, rgba(22, 40, 31, 0.84) 100%) !important;
}
.hp-hero__title {
	letter-spacing: 0.06em;
	color: var(--hp-ivory) !important;
	text-shadow: 0 2px 6px rgba(18, 32, 25, 0.55);
}
/* Small gold ornament under the hero title. */
.hp-hero__title::after {
	content: "";
	display: block;
	width: 4rem;
	border-top: 1px solid var(--hp-gold);
	margin: 1.1rem auto 0.5rem;
	opacity: 0.85;
}
.hp-hero__line,
.hp-hero__sub {
	color: var(--hp-ivory-70) !important;
	text-shadow: 0 1px 2px rgba(23, 53, 42, 0.4);
}
.hp-hero .hp-button--light {
	margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   19. Build-state markers (pre-publish blockers -- gold, discreet by design).
   -------------------------------------------------------------------------- */
.hp-todo {
	color: var(--hp-gold) !important;
	font-size: 0.78em;
	letter-spacing: 0.02em;
	opacity: 0.85;
}
.hp-credits-note {
	margin-top: 2.5rem;
	padding-top: 1rem;
	border-top: var(--hp-hairline);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--hp-ink-40);
}

/* --------------------------------------------------------------------------
   20. Buttons -- unified small-caps voice (SPEC S4; QA fix 4 base rule kept,
       uppercase traded for the house small-caps treatment).
   -------------------------------------------------------------------------- */
a.hp-button,
.hp-button {
	display: inline-block;
	padding: 0.7rem 1.6rem;
	border: 1px solid var(--hp-gold);
	color: var(--hp-charcoal);
	background: transparent;
	font-family: var(--hp-font-body);
	font-size: 0.9rem;
	font-variant-caps: small-caps;
	text-transform: lowercase;
	letter-spacing: 0.12em;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 0.25s var(--hp-ease), color 0.25s var(--hp-ease), border-color 0.25s var(--hp-ease);
}
a.hp-button:hover,
.hp-button:hover {
	background: var(--hp-green);
	color: var(--hp-ivory);
	border-color: var(--hp-green);
	text-decoration: none;
}
/* Light variant on hero/panel contexts + the cascade re-assert (QA fix 10). */
.hp-button--light {
	background: rgba(23, 53, 42, 0.35);
}
a.hp-button--light,
.hp-button--light {
	color: var(--hp-ivory) !important;
	border-color: var(--hp-ivory) !important;
}
a.hp-button--light:hover,
.hp-button--light:hover {
	background: var(--hp-ivory) !important;
	color: var(--hp-green-deep) !important;
}

/* --------------------------------------------------------------------------
   21. Cards -- fluid padding, images always flush with the card box (QA fix:
       the fixed -40px figure margins overhung mobile cards by 16px a side),
       gold top accent on text-only cards, gentle hover.
   -------------------------------------------------------------------------- */
.hp-teasers__lead {
	font-variant-caps: small-caps;
	letter-spacing: 0.16em;
	color: var(--hp-gold);
	margin: 0 0 1.25rem;
}
/* The group is an alignwide block -- Kadence gives it negative mobile
   margins, so clamp it back inside the page gutters (QA fix 10, kept). */
.hp-teasers {
	margin-inline: auto !important;
	max-width: min(1100px, calc(100% - 3rem));
	padding-inline: 0;
}
.hp-teasers__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1.25rem;
}
@media (min-width: 900px) {
	.hp-teasers__grid {
		gap: 1.5rem;
	}
}
.hp-card {
	--hp-card-pad: clamp(1.25rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	padding: var(--hp-card-pad);
	transition: transform 0.25s var(--hp-ease), border-color 0.25s var(--hp-ease), box-shadow 0.25s var(--hp-ease);
}
@media (hover: hover) and (pointer: fine) { .hp-teasers__grid .hp-card:hover {
	transform: translateY(-2px);
	border-color: var(--hp-gold);
	box-shadow: 0 6px 16px rgba(23, 53, 42, 0.1);
} }
.hp-card__img {
	margin: calc(-1 * var(--hp-card-pad)) calc(-1 * var(--hp-card-pad)) 1.25rem;
}
.hp-card__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-bottom: 1px solid var(--hp-gold-40);
}
.hp-card > p {
	margin-top: 0;
}
.hp-card > .hp-section-label {
	margin: 0 0 0.5rem;
}
.hp-card > p:nth-of-type(2) {
	flex-grow: 1;
}
.hp-card .hp-button {
	margin-top: auto;
	align-self: flex-start;
	white-space: nowrap;
	font-size: 0.8rem;
	padding: 0.55rem 1.1rem;
}
.hp-teasers__grid .hp-card:not(:has(> .hp-card__img)) {
	border-top: 2px solid var(--hp-gold);
}

/* --------------------------------------------------------------------------
   22. Content frame -- unboxed editorial column on every page (the white
       article box on ivory read as unfinished).
   -------------------------------------------------------------------------- */
article.entry.content-bg {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
.content-area {
	margin-top: 0 !important;
}
.entry-content-wrap {
	padding: 0 !important;
}
/* Reading column for standard pages; front page and the Fleur brand page
   manage their own widths (full-bleed cover + branded grids). */
.page:not(.home) .entry-content.single-content {
	max-width: 52rem;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   23. Footer -- deep-green estate lockup replacing the Kadence credit line
       (footer content rendered by hallplace_footer_html() in functions.php).
   -------------------------------------------------------------------------- */
#colophon.site-footer {
	background: var(--hp-green-deep) !important;
	border-top: 1px solid var(--hp-gold-40);
	color: var(--hp-ivory-70);
}
#colophon .site-footer-row-container-inner {
	background: transparent !important;
}
#colophon .site-footer-row {
	padding-block: 2.75rem 2.25rem;
}
#colophon .hp-footer-lockup {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	margin: 0 0 0.9rem;
}
#colophon .hp-footer-lockup img {
	width: 2.125rem;
	height: auto;
	display: block;
}
#colophon .hp-footer__wordmark {
	font-family: var(--hp-font-body);
	font-weight: 600;
	font-variant-caps: small-caps;
	text-transform: lowercase;
	letter-spacing: 0.16em;
	color: var(--hp-ivory);
}
#colophon .hp-footer__line {
	max-width: 42rem;
	margin: 0 auto 1rem;
	text-align: center;
	font-size: 0.9375rem;
	color: var(--hp-ivory-70);
}
#colophon .hp-footer__nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	font-variant-caps: small-caps;
	text-transform: lowercase;
	letter-spacing: 0.12em;
	font-size: 0.9375rem;
}
#colophon .hp-footer__nav a {
	color: var(--hp-ivory-70);
	text-decoration: none;
	transition: color 0.25s var(--hp-ease);
}
#colophon .hp-footer__nav a:hover,
#colophon .hp-footer__nav a:focus-visible {
	color: var(--hp-gold);
}
#colophon .hp-footer__sep {
	color: var(--hp-gold-40);
}
#colophon .hp-footer__copy {
	margin: 1.5rem 0 0;
	text-align: center;
	font-size: 0.8125rem;
	color: rgba(247, 244, 236, 0.55);
}
/* The replaced Kadence credit paragraph is gone; belt-and-braces hides stay. */
.site-footer a[href*="kadence"],
.site-footer .theme-credit {
	display: none !important;
}

/* --------------------------------------------------------------------------
   24. Fleur de Lis page branding (QA fix 6 -- preserved verbatim).
   -------------------------------------------------------------------------- */
.hp-fleur {
	--fl-ink: #1e2831; /* = Fleur maintenance page palette-1 (Shaun: use the exact same blue) */
	--fl-slate: #2e3a45;
	--fl-gold: #e8c889;
	--fl-bronze: #8a7448;
	--fl-parchment: #e4d9cb;
	--fl-paper: #f9f7f2;
	background: var(--fl-paper);
	padding: 0 0 1px;
}
.hp-fleur__hero {
	background: var(--fl-ink);
	text-align: center;
	padding: 4rem 1.5rem;
}
.hp-fleur__logo { width: min(360px, 78%); height: auto; display: inline-block; }
.hp-fleur__tag {
	color: var(--fl-gold);
	font-variant-caps: small-caps;
	letter-spacing: 0.14em;
	margin: 1.25rem 0 0.5rem;
}
.hp-fleur__line { color: #f9f7f2; max-width: 640px; margin: 0 auto 1.5rem; opacity: 0.92; }
.hp-fleur__btn {
	display: inline-block;
	background: var(--fl-gold);
	color: #1e2831;
	border: 1px solid var(--fl-gold);
	padding: 0.65rem 1.4rem;
	text-decoration: none;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: all 0.25s ease;
}
.hp-fleur__btn:hover { background: #8a7448; border-color: #8a7448; color: #f9f7f2; }
.hp-fleur__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
	padding: 2.5rem 1.5rem;
	max-width: 1100px;
	margin: 0 auto;
}
.hp-fleur__card {
	background: var(--fl-parchment);
	padding: 1.75rem;
	box-shadow: 0 1px 2px rgba(20, 27, 34, 0.08);
}
.hp-fleur__label {
	color: var(--fl-bronze);
	font-variant-caps: small-caps;
	letter-spacing: 0.14em;
	font-size: 0.85rem;
	margin: 0 0 0.5rem;
}
.hp-fleur__card h3 {
	font-family: var(--hp-font-heading);
	color: var(--fl-ink);
	font-size: 1.45rem;
	margin: 0 0 0.6rem;
}
.hp-fleur__card p { color: var(--fl-slate); }
.hp-fleur__card--img { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.hp-fleur__card--img img { width: 100%; flex: 1 1 auto; min-height: 240px; height: auto; object-fit: cover; display: block; }
.hp-fleur__cap {
	padding: 0.75rem 1rem;
	font-size: 0.82rem;
	color: var(--fl-slate);
	background: var(--fl-parchment);
	margin: 0;
}
.hp-fleur__todo { font-size: 0.85em; }

/* --------------------------------------------------------------------------
   25. Era navigation + history index (QA tail -- preserved).
   -------------------------------------------------------------------------- */
.hp-era-nav__strip {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	border-top: 1px solid var(--hp-gold-40);
	border-bottom: 1px solid var(--hp-gold-40);
	padding: 0.6rem 0;
	margin: 0 0 1.75rem;
	font-variant-caps: small-caps;
	letter-spacing: 0.1em;
	font-size: 0.85rem;
}
.hp-era-nav__strip a { color: var(--hp-charcoal); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .hp-era-nav__strip a:hover { color: var(--hp-gold); } }
.hp-era-index {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
	margin: 2.5rem 0 1rem;
}
.hp-era-index__card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	background: var(--hp-stone);
	padding: 1.1rem 1.2rem;
	text-decoration: none;
	border-top: 2px solid var(--hp-gold);
}
.hp-era-index__era { color: var(--hp-gold); font-variant-caps: small-caps; letter-spacing: 0.12em; font-size: 0.8rem; }
.hp-era-index__title { color: var(--hp-charcoal); font-family: var(--hp-font-heading); font-size: 1.15rem; line-height: 1.25; }
@media (hover: hover) and (pointer: fine) { .hp-era-index__card:hover .hp-era-index__title { color: var(--hp-green); } }

/* --------------------------------------------------------------------------
   26. Small-screen banner size (QA fix 5 -- preserved).
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.hp-banner__text { font-size: 0.72rem; letter-spacing: 0.08em; }
}
/* --------------------------------------------------------------------------
   27. Leigh Village era cards + hub lists.
   -------------------------------------------------------------------------- */
.hp-hub-intro { font-size: 1.06rem; color: var(--hp-charcoal); max-width: 46rem; margin: 0 0 1.25rem; }
.hp-era-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.25rem;
	margin: 0 0 2.5rem;
}
.hp-era-card {
	display: flex;
	flex-direction: column;
	background: var(--hp-stone);
	border-top: 2px solid var(--hp-gold);
	text-decoration: none;
	overflow: hidden;
}
.hp-era-card-img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background-size: cover;
	background-position: center;
}
.hp-era-card-mono {
	background:
		radial-gradient(circle at 30% 20%, rgba(176, 141, 62, 0.14), transparent 55%),
		var(--hp-green);
}
.hp-era-card-body { padding: 0.9rem 1rem 1.05rem; display: flex; flex-direction: column; gap: 0.3rem; }
.hp-era-card-title { font-family: var(--hp-font-heading); font-size: 1.22rem; line-height: 1.2; color: var(--hp-charcoal); }
.hp-era-card-sub { font-size: 0.85rem; line-height: 1.45; color: #5a5a52; }
.hp-era-card-count { font-size: 0.78rem; font-variant-caps: small-caps; letter-spacing: 0.1em; color: var(--hp-gold); margin-top: 0.35rem; }
@media (hover: hover) and (pointer: fine) { .hp-era-card:hover .hp-era-card-title { color: var(--hp-green); } }
.hp-hub-list { columns: 2; column-gap: 2.75rem; list-style: none; margin: 0; padding: 0; }
.hp-hub-list li { break-inside: avoid; padding: 0.35rem 0; border-bottom: 1px solid var(--hp-gold-40); }
.hp-hub-list a { color: var(--hp-charcoal); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .hp-hub-list a:hover { color: var(--hp-gold); } }
@media (max-width: 640px) { .hp-hub-list { columns: 1; } }

/* --------------------------------------------------------------------------
   28. Inline article figures.
   -------------------------------------------------------------------------- */
.hp-inline-fig {
	margin: 1.75rem auto 2rem;
	max-width: 460px;
	text-align: center;
}
.hp-inline-fig a { display: block; }
.hp-inline-fig img {
	display: block;
	width: 100%;
	height: auto;
	border-top: 2px solid var(--hp-gold);
	background: var(--hp-stone);
	padding: 0.5rem;
	box-sizing: border-box;
}
.hp-inline-fig figcaption {
	font-size: 0.8rem;
	font-variant-caps: small-caps;
	letter-spacing: 0.08em;
	color: #5a5a52;
	margin-top: 0.5rem;
	line-height: 1.4;
}

/* 29. Park & Garden landing section spacing + Fleur hero full-bleed
   (Shaun, 17 Sep: hero image removed from landing; sections were bleeding
   into each other; Fleur hero must run full width).
   -------------------------------------------------------------------------- */
.page-id-22 .entry-content > * + * { margin-top: 2.5rem; }
/* Fleur hero breaks out of the boxed content column, edge to edge */
.page-id-27 .hp-fleur__hero {
	width: 100vw;
	max-width: none !important;
	margin-inline: calc(50% - 50vw);
}
.page-id-22 .hp-era-grid { margin-block: 0.75rem 2.5rem; }

/* 30. Fleur de Lis history page (.hp-fhist) -- child of the Fleur page (17 Sep).
   -------------------------------------------------------------------------- */
.hp-fhist { max-width: 46rem; margin-inline: auto; }
.hp-fhist__label {
	font-family: 'EB Garamond', Georgia, serif;
	font-variant-caps: small-caps;
	letter-spacing: .1em;
	color: #b08d3e;
	font-size: .95rem;
	margin: 1rem 0 .5rem;
}
.hp-fhist__lead { font-size: 1.12rem; line-height: 1.65; }
.hp-fhist__h3 {
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	font-size: 1.65rem;
	font-weight: 600;
	color: #1e2831;
	margin: 2.4rem 0 .6rem;
	line-height: 1.2;
}
.hp-fhist p { line-height: 1.65; }
.hp-fhist__fig { margin: 1.75rem 0; background: #fff; border: 1px solid #e4d9cb; padding: .6rem .6rem .4rem; }
.hp-fhist__fig img { width: 100%; height: auto; display: block; }
.hp-fhist__fig figcaption {
	font-family: 'EB Garamond', Georgia, serif;
	font-variant-caps: small-caps;
	letter-spacing: .06em;
	color: #5a5a52;
	font-size: .85rem;
	padding: .5rem .2rem .2rem;
	text-align: center;
}
.hp-fhist__row { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.hp-fhist__row .hp-fhist__fig { flex: 1 1 240px; margin: 1.75rem 0; }
.hp-fhist__list { list-style: none; padding: 0; margin: 1rem 0 1.5rem; columns: 2; column-gap: 2.5rem; }
.hp-fhist__list li { break-inside: avoid; margin: 0 0 .7rem; line-height: 1.5; }
.hp-fhist__year { font-variant-caps: small-caps; letter-spacing: .05em; color: #b08d3e; font-weight: 600; margin-right: .35rem; }
.hp-fhist__credit {
	border-top: 1px solid #e4d9cb;
	margin-top: 2.5rem;
	padding-top: .9rem;
	font-family: 'EB Garamond', Georgia, serif;
	font-variant-caps: small-caps;
	letter-spacing: .06em;
	color: #5a5a52;
	font-size: .85rem;
}
@media (max-width: 640px) {
	.hp-fhist__list { columns: 1; }
}

/* ==========================================================================
   HP-NAV-RESPONSIVE v1.6.0 (27 Sep 2026) -- desktop nav single-row + tablet drawer
   Problem: Kadence ships a static 17px nav font; 8 top-level items need ~943px
   but the nav column is 935px at >=1440 and far less below that, so CONTACT
   wrapped to a second row on every desktop width. Fix: step the nav font down
   through the mid widths (with the shortened "Filming" label) so all 8 items
   share one row at every width >=1025px; <=1024px keeps Kadence's hamburger
   with the drawer capped to a 420px right-side panel instead of ~90% width.
   Restore: delete this block.
   ========================================================================== */
@media screen and (min-width: 1025px) and (max-width: 1279px) {
	.site-branding .site-title-wrap { display: none !important; }
	.header-navigation li.menu-item > a { font-size: 16px !important; letter-spacing: 0.05em; }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
	#mobile-drawer.popup-drawer .drawer-inner { max-width: 420px !important; margin-left: auto !important; }
}
/* ===== END HP-NAV-RESPONSIVE ===== */

/* ==========================================================================
   HP-TEASERS-FLUID v1.7.1 (27 Sep 2026) - teaser column bands. Width now comes
   from the unified container (HP-CONTAINER-UNIFY), so v1.7.0's 100vw
   full-bleed escape is gone and only the lead cap + column bands remain:
   1 (<600) / 2 (600-899) / 3 (900-1279) / 4 (>=1280). The lead is left-
   aligned to the shared container edge instead of centered. Restore: delete
   this block.
   ========================================================================== */
.hp-teasers__lead { max-width: 60rem; margin-inline: 0; }
@media screen and (min-width: 600px) and (max-width: 899px) {
	.hp-teasers__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media screen and (min-width: 900px) and (max-width: 1279px) {
	.hp-teasers__grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media screen and (min-width: 1280px) {
	.hp-teasers__grid { grid-template-columns: repeat(4, 1fr) !important; }
}
/* ===== END HP-TEASERS-FLUID ===== */

/* ==========================================================================
   HP-ERA-GRIDS-FLUID v1.8.1 (27 Sep 2026) - landing card-grid column bands.
   Width now comes from the unified container (HP-CONTAINER-UNIFY), so
   v1.8.0's 100vw full-bleed escape is gone and only the column bands remain.
   History era index: 3 cols >=900 (two clean rows of 6). Park grid: 3 cols
   >=900 (6 cards). Village grid: 3 (900-1279) / 4 (>=1280) for its 10 cards.
   Restore: delete this block.
   ========================================================================== */
@media screen and (min-width: 900px) {
	.hp-era-index, .page-id-22 .hp-era-grid { grid-template-columns: repeat(3, 1fr) !important; }
	.hp-era-index__title { font-size: 1.3rem; }
}
@media screen and (min-width: 900px) and (max-width: 1279px) {
	.hp-era-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media screen and (min-width: 1280px) {
	.hp-era-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.hp-era-index, .hp-era-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media screen and (max-width: 599px) {
	.hp-era-index, .hp-era-grid { grid-template-columns: 1fr; }
}
/* ===== END HP-ERA-GRIDS-FLUID ===== */

/* ==========================================================================
   HP-CONTAINER-UNIFY v1.9.0 (27 Sep 2026) - one container width, one left
   edge, everywhere (Shaun: unify the whole container width - top menu, site
   name, hero bar text, subtext and section copy must all align; film page a
   mess; properties missing the hero bar; village text not lining up).
   Measured before: FIVE left edges at 1440 - header content 92, page-hero
   text 210 (1100px hero inner), narrow article column 305 (832px), full-bleed
   card grids 17 (100vw escape), properties grid 203 (1100px hp-container).
   Now: --hp-max raised 1100 -> 1560 (the shared CONTENT width) and
   --hp-gutter fixed at 1.5rem to match Kadence's 24px site-container
   padding; every boxed container (header, footer, content wrap, page-hero
   inner, hp-container) gets max-width calc(var(--hp-max) + 2 *
   var(--hp-gutter)) so their content edges coincide at every viewport.
   Landing pages (ids 20, 21, 22, 23, 25, 26) widen .entry-content to fill
   it; article and contact pages keep the 832px reading column. The page
   hero is already full-bleed (child of .wrap), so no 100vw tricks remain
   anywhere. Properties also gained the standard page hero:
   page-properties.php now calls hallplace_page_hero() and its old centered
   .hp-page-head header is gone (page 24 excerpt supplies the hero intro).
   Restore: delete this block and re-add the v1.7/v1.8 full-bleed escapes.
   ========================================================================== */
:root {
	--hp-max: 1560px;
	--hp-gutter: 1.5rem;
}
#masthead .site-container, #colophon .site-container, .content-container.site-container, .hp-page-hero__inner, .hp-container {
	max-width: calc(var(--hp-max) + 2 * var(--hp-gutter));
}
body.page-id-20 .entry-content.single-content, body.page-id-21 .entry-content.single-content, body.page-id-22 .entry-content.single-content, body.page-id-23 .entry-content.single-content, body.page-id-25 .entry-content.single-content, body.page-id-26 .entry-content.single-content {
	max-width: 100% !important;
}
body.page-id-21 .hp-intro, body.page-id-22 .hp-intro, body.page-id-25 .hp-intro {
	margin-inline: 0;
}
/* The history timeline's alternating rail design (cards each side of an
   88px centre rail) stretches its cards to ~630px at the 1560px container -
   far past comfortable reading measure. Cap the card tracks at 560px; the
   freed space lands symmetrically between card and rail. */
@media screen and (min-width: 1025px) {
	.hp-timeline__list li { grid-template-columns: minmax(0, 560px) 1fr minmax(0, 560px) !important; }
}
/* ===== END HP-CONTAINER-UNIFY ===== */


/* ==========================================================================
   HP-VISUAL-FIX v1.10.0 (9 Oct 2026, Shaun review)
   1) Body copy up 17->18px across content areas (labels/cards excluded)
   2) Margin between the page hero and the content below it
   3) Contact nav button: centred label (flex), never underlined
   --------------------------------------------------------------------------
   Note: Kadence's generated global.css loads after the child sheet, so the
   content-size rules below carry !important (same precedent as the body pin).
   ========================================================================== */

/* 1) Reading text size. Only UNCLASSIFIED paragraphs/lists grow -- every
   labelled or card paragraph (.hp-section-label, .hp-credits-note, card
   copy, teasers) keeps its designed size. */
.entry-content p:not([class]),
.entry-content li:not([class]),
.entry-content dd:not([class]),
.entry-content dt:not([class]) {
	font-size: 1.125rem !important;
	line-height: 1.7 !important;
}
/* Long-form era articles sit inside wp:html blocks: same treatment. */
.entry-content .hp-era p:not([class]) {
	font-size: 1.125rem !important;
	line-height: 1.75 !important;
}
/* Lead paragraphs that carry no class on landing-style pages get the
   slightly larger measure the home page already uses. */
.entry-content > p:not([class]):first-of-type {
	font-size: 1.1875rem !important;
}

/* 2) Space between the hero band and the first content below it.
   The hero renders outside .entry-content, so a hero margin is the one
   place every page picks it up. */
.hp-page-hero {
	margin-bottom: clamp(2.25rem, 5vh, 3rem);
}

/* 3) Contact nav button.
   a) Flex centre: the label now sits exactly in the middle of the outline
      box on both axes (small-caps baseline drift gone).
   b) The generic current-page gold underline (li.current-menu-item > a)
      bled onto the boxed Contact button when Contact was the active page
      -- read as an "underscore under the button". The boxed button signals
      its own state with fill, so it never takes the underline. */
.site-header .primary-menu-container > ul > .menu-item:last-child > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-decoration: none !important;
}
.site-header .primary-menu-container > ul > .menu-item:last-child.current-menu-item > a,
.site-header .primary-menu-container > ul > .menu-item:last-child > a:active,
.site-header .primary-menu-container > ul > .menu-item:last-child > a:focus {
	text-decoration: none !important;
}


/* v1.10.0 addendum: WP block paragraphs carry wp-block-paragraph, so the
   :not([class]) filter missed the main reading text on block-built pages
   (Filming & Photography, Park & Garden intro, home teasers). Allow the
   structural block classes; still exclude designed small-copy classes. */
.entry-content p.wp-block-paragraph:not(.hp-section-label):not(.hp-credits-note):not(.hp-hero__line):not(.hp-hero__sub):not(.hp-teasers__lead):not([class*="hp-card"]):not([class*="hp-era-card"]):not([class*="hp-teaser"]) {
	font-size: 1.125rem !important;
	line-height: 1.7 !important;
}
.hp-hub-intro { font-size: 1.125rem !important; }