/*
Theme Name: Maidstone Pistol Club
Theme URI: https://www.maidstonepistolclub.co.uk/
Author: Firepages
Author URI: https://firepages.co.uk/
Description: A bespoke theme for Maidstone Pistol Club. Photography-led, built around the club's cyan and Invicta mark, with Customizer control over shortcodes, homepage copy and images.
Version: 2.0.2
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mpc
Tags: club, one-column, custom-logo, custom-menu, featured-images, accessibility-ready
*/

/* ==========================================================================
   1. Tokens
   ==========================================================================
   Claret is sampled from the club logo. The stone is a cool grey-green
   picked out of the woodland behind the Yalding range, not a warm cream --
   it keeps the photographs looking like photographs rather than sitting on
   a beige card.
   ========================================================================== */

:root {
	/* Brand cyan, sampled from the club logo. Bright enough to read as the
	   identity colour, but only 2.6:1 against white -- so it fills, rules and
	   accents, and never carries small text on a light background. */
	--brand:        #02ADE1;

	/* Same hue, dark enough to be legible: 5.9:1 on white, 4.9:1 on stone.
	   This is what links, key labels and dark UI use. */
	--brand-ink:    #016D8E;
	--brand-deep:   #01617E;

	/* Deep blue-black for the footer and the call-to-action band, so the dark
	   areas belong to the brand rather than being neutral grey. */
	--brand-black:  #002733;

	--ink:          #1E2226;
	--ink-soft:     #4F565B;
	--paper:        #FFFFFF;
	--stone:        #E9EDEF;
	--sand:         #C6B392;
	--line:         #D2D8DC;
	--line-soft:    #E4E9EC;

	--font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;

	--wrap:      1280px;
	--wrap-wide: 1680px;
	--measure: 66ch;
	--gutter:  clamp(1.25rem, 5vw, 3rem);
	--section: clamp(3.5rem, 8vw, 6.5rem);

	/* The header is fixed over the hero on the front page. Deriving its height
	   from the same clamps that size the logo and its padding lets the hero
	   reserve exactly that much space, so the text can never slide underneath
	   the logo on a short viewport or at high browser zoom. */
	--logo-height:   clamp(78px, 13vw, 175px);
	--header-pad-t:  clamp(1.5rem, 2.6vw, 2.5rem);
	--header-pad-b:  clamp(1rem, 1.8vw, 1.5rem);
	--header-height: calc(var(--logo-height) + var(--header-pad-t) + var(--header-pad-b));

	--z-header: 50;
	--z-nav:    40;

	--ease: cubic-bezier(0.2, 0, 0.15, 1);
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	line-height: 1.7;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--brand-deep); }

:focus-visible {
	outline: 3px solid var(--brand-ink);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection { background: var(--brand-ink); color: var(--paper); }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* ==========================================================================
   3. Typography
   ==========================================================================
   Archivo for anything structural, Source Serif 4 for anything read at
   length. The two are doing genuinely different jobs, which is why they can
   sit next to each other without arguing.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.018em;
	margin: 0 0 0.5em;
	color: var(--ink);
	text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem); }
h2 { font-size: clamp(1.85rem, 1.4rem + 2.1vw, 3rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem); letter-spacing: -0.01em; }
h4 { font-size: 1.2rem; letter-spacing: 0; }

.mpc-lede {
	font-size: clamp(1.2rem, 1.05rem + 0.75vw, 1.55rem);
	line-height: 1.5;
	max-width: 34ch;
	color: var(--ink);
}

/* The one repeated structural device: a short cyan rule that marks where a
   section starts. Used consistently, nowhere decoratively. */
.mpc-heading--rule::after {
	content: '';
	display: block;
	width: 3rem;
	height: 4px;
	margin-top: 1rem;
	background: var(--brand);
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.mpc-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Photographs earn more room than text does. */
.mpc-wrap--wide { max-width: var(--wrap-wide); }

.mpc-section { padding-block: var(--section); }
.mpc-section--stone { background: var(--stone); }

.mpc-main { display: block; }

.mpc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--brand-ink);
	color: var(--paper);
	padding: 0.85rem 1.5rem;
	font-family: var(--font-display);
	font-weight: 600;
	text-decoration: none;
}
.mpc-skip-link:focus {
	left: 1rem;
	top: 1rem;
	color: var(--paper);
}

/* ==========================================================================
   5. Header
   ==========================================================================
   Transparent over the hero on the front page, solid everywhere else and
   once scrolled. The cyan hairline along the bottom is the only chrome.
   ========================================================================== */

.mpc-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--paper);
	border-bottom: 1px solid var(--line-soft);
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.mpc-header::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 3px;
	background: var(--brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--ease);
}

.mpc-header.is-scrolled::after { transform: scaleX(1); }

.mpc-has-transparent-header .mpc-header {
	position: fixed;
	inset-inline: 0;
	background: transparent;
	border-bottom-color: transparent;
}

.mpc-has-transparent-header .mpc-header.is-scrolled,
.mpc-has-transparent-header .mpc-header.is-open {
	background: var(--paper);
	border-bottom-color: var(--line-soft);
}

.mpc-header__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: var(--header-pad-t) var(--gutter) var(--header-pad-b);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.mpc-brand { display: flex; align-items: center; }

.custom-logo-link { display: block; }
.custom-logo {
	width: auto;
	height: var(--logo-height);
	transition: height 0.25s var(--ease);
}
.mpc-header.is-scrolled .custom-logo { height: clamp(72px, 8vw, 104px); }

/* Tighten the header back up once it's solid and scrolled. */
.mpc-header.is-scrolled .mpc-header__inner {
	padding-block: clamp(0.75rem, 1.4vw, 1.1rem);
}

.mpc-brand__text {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-decoration: none;
}

/* --- Navigation --- */

.mpc-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(1.1rem, 2.4vw, 2.6rem);
}

.mpc-nav__list a {
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem);
	font-weight: 600;
	letter-spacing: 0.005em;
	color: var(--ink);
	text-decoration: none;
	padding-block: 0.65rem;
	display: inline-block;
	position: relative;
}

.mpc-nav__list a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.25rem;
	height: 2px;
	background: var(--brand-ink);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s var(--ease);
}

.mpc-nav__list a:hover::after,
.mpc-nav__list a:focus-visible::after,
.mpc-nav__list .current-menu-item > a::after,
.mpc-nav__list .current_page_item > a::after { transform: scaleX(1); }

.mpc-nav__list .current-menu-item > a,
.mpc-nav__list .current_page_item > a { color: var(--brand-ink); }

/* Transparent-header state: reverse the nav out over the photograph. */
.mpc-has-transparent-header .mpc-header:not(.is-scrolled):not(.is-open) .mpc-nav__list a,
.mpc-has-transparent-header .mpc-header:not(.is-scrolled):not(.is-open) .mpc-brand__text,
.mpc-has-transparent-header .mpc-header:not(.is-scrolled):not(.is-open) .mpc-nav-toggle {
	color: var(--paper);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.mpc-has-transparent-header .mpc-header:not(.is-scrolled):not(.is-open) .mpc-nav-toggle__bars span {
	background: var(--paper);
}

/* --- Mobile toggle --- */

.mpc-nav-toggle {
	display: none;
	align-items: center;
	gap: 0.6rem;
	background: none;
	border: 0;
	padding: 0.6rem 0.25rem;
	min-height: 44px;
	cursor: pointer;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mpc-nav-toggle__bars {
	display: grid;
	gap: 5px;
	width: 24px;
}
.mpc-nav-toggle__bars span {
	display: block;
	height: 2px;
	background: var(--ink);
	transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.mpc-nav-toggle[aria-expanded="true"] .mpc-nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mpc-nav-toggle[aria-expanded="true"] .mpc-nav-toggle__bars span:nth-child(2) { opacity: 0; }
.mpc-nav-toggle[aria-expanded="true"] .mpc-nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 56.25em) {
	.mpc-nav-toggle { display: flex; }

	.mpc-nav {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--paper);
		border-bottom: 1px solid var(--line);
		z-index: var(--z-nav);
		display: none;
		box-shadow: 0 18px 40px -24px rgba(35, 33, 31, 0.4);
	}
	.mpc-nav.is-open { display: block; }

	.mpc-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem var(--gutter) 1.25rem;
	}
	.mpc-nav__list li { border-bottom: 1px solid var(--line-soft); }
	.mpc-nav__list li:last-child { border-bottom: 0; }
	.mpc-nav__list a {
		font-size: 1.05rem;
		padding-block: 0.95rem;
		width: 100%;
	}
	.mpc-nav__list a::after { display: none; }
}

/* ==========================================================================
   6. Hero
   ==========================================================================
   The photograph is the point. Text sits bottom-left over a gradient that is
   heaviest exactly where the words are, so the right-hand side of the frame
   stays readable as an image.
   ========================================================================== */

.mpc-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(88vh, 780px);
	/* Reserved so bottom-aligned content cannot rise under the fixed header. */
	padding-top: calc(var(--header-height) + 1rem);
	background: var(--brand-black);
	overflow: hidden;
}

.mpc-hero--plain { min-height: 46vh; }

/* On a phone the wide landscape photograph is cropped to a tall, narrow frame,
   so most of what fills the extra height is empty backstop. Dropping the
   minimum height removes that dead band between the logo and the strapline:
   the hero becomes exactly header + content. */
@media (max-width: 46em) {
	.mpc-hero {
		min-height: 0;
		padding-top: calc(var(--header-height) + 0.5rem);
	}

	.mpc-hero__media img { object-position: 38% center; }

	.mpc-hero__body { padding-bottom: clamp(2rem, 8vw, 3rem); }

	.mpc-hero__title { max-width: 100%; }
}

/* Portrait tablets sit above the phone breakpoint but have the same problem:
   a wide photograph cropped tall leaves a dead band. Shorter hero, same fix. */
@media (min-width: 46.0625em) and (max-width: 62em) and (orientation: portrait) {
	.mpc-hero { min-height: min(58vh, 620px); }
}

/* Short and landscape viewports: shrink the logo so the header stops eating
   the frame, and let the hero size to its content. */
@media (max-height: 600px) and (orientation: landscape) {
	.mpc-hero { min-height: 0; }

	:root {
		--logo-height:  clamp(56px, 9vh, 96px);
		--header-pad-t: 1rem;
		--header-pad-b: 0.75rem;
	}
}

.mpc-hero__media {
	position: absolute;
	inset: 0;
}
.mpc-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

.mpc-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(42, 16, 21, 0.78) 0%, rgba(42, 16, 21, 0.38) 34%, rgba(42, 16, 21, 0.02) 62%, rgba(42, 16, 21, 0.22) 100%),
		linear-gradient(to right, rgba(42, 16, 21, 0.42) 0%, rgba(42, 16, 21, 0) 58%);
}

.mpc-hero__body {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 0 var(--gutter) clamp(3rem, 7vw, 5.5rem);
	color: var(--paper);
}

/* The hero title scales with the frame rather than the text column, so it
   still reads as a headline on a very wide monitor. */
.mpc-hero__title { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5.5rem); }

.mpc-hero__locator {
	font-family: var(--font-display);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--paper);
	margin: 0 0 1.1rem;
	padding-left: 3.25rem;
	position: relative;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.mpc-hero__locator::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 2.25rem;
	height: 3px;
	background: var(--brand);
}

.mpc-hero__title {
	color: var(--paper);
	max-width: 13ch;
	margin-bottom: 0.4em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35);
}

.mpc-hero__text {
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
	line-height: 1.55;
	max-width: 44ch;
	margin-bottom: 2rem;
	color: #FFFFFF;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   7. Buttons
   ========================================================================== */

.mpc-button,
.wp-block-button__link,
.wpforms-submit,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.8rem 2rem;
	/* Brand cyan with dark text reads at 6.5:1 -- white on cyan would be 2.6:1,
	   so the button keeps the brand colour by flipping the text instead. */
	background: var(--brand);
	color: var(--brand-black);
	border: 0;
	border-radius: 2px;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.mpc-button:hover,
.mpc-button:focus-visible,
.wp-block-button__link:hover,
.wpforms-submit:hover,
input[type="submit"]:hover {
	background: var(--brand-ink);
	color: var(--paper);
}

.mpc-button--light {
	background: var(--paper);
	color: var(--brand-black);
}
.mpc-button--light:hover,
.mpc-button--light:focus-visible {
	background: var(--sand);
	color: var(--brand-black);
}

/* ==========================================================================
   8. Introduction
   ========================================================================== */

.mpc-intro__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 56.25em) {
	.mpc-intro__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
		align-items: start;
	}
}

/* Both introduction paragraphs share one size, sitting between the old lede
   (1.55rem) and body (1.19rem). Scoped to this section so .mpc-lede keeps its
   larger size on Contact, Club Photos and the enquiry block. */
.mpc-intro__text .mpc-lede,
.mpc-intro__text > p {
	font-size: clamp(1.125rem, 1.02rem + 0.42vw, 1.3rem);
	line-height: 1.6;
	max-width: 52ch;
}

.mpc-intro__figure { margin: 0; }
.mpc-intro__figure img {
	width: 100%;
	border-radius: 2px;
}

/* ==========================================================================
   9. Schedule (what we shoot)
   ==========================================================================
   A description list, not a row of cards. Three genuinely different things
   in three genuinely different places, so hairline rules between them carry
   real information -- they are not decoration.
   ========================================================================== */

.mpc-schedule {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	border-top: 2px solid var(--ink);
}

.mpc-schedule__row {
	display: grid;
	gap: 0.4rem clamp(1.5rem, 4vw, 4rem);
	padding-block: clamp(1.4rem, 2.5vw, 2rem);
	border-bottom: 1px solid var(--line);
}

@media (min-width: 46em) {
	.mpc-schedule__row {
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		align-items: baseline;
	}
}

.mpc-schedule__place {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 1.15rem + 0.85vw, 1.9rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--brand-ink);
}

.mpc-schedule__what {
	margin: 0;
	max-width: var(--measure);
}

.mpc-schedule__when {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* ==========================================================================
   10. Call to action band
   ==========================================================================
   The one dark moment on the page. Claret-black over the photograph rather
   than a neutral scrim, so it belongs to the club's colour rather than
   floating free of it.
   ========================================================================== */

.mpc-cta {
	position: relative;
	background: var(--brand-black);
	color: var(--paper);
	overflow: hidden;
}

.mpc-cta__media { position: absolute; inset: 0; }
.mpc-cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.52;
}

.mpc-cta--image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(42, 16, 21, 0.86) 0%, rgba(42, 16, 21, 0.6) 55%, rgba(110, 18, 38, 0.44) 100%);
}

.mpc-cta__body {
	position: relative;
	z-index: 2;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
}

.mpc-cta__title {
	color: var(--paper);
	max-width: 18ch;
}

.mpc-cta__text {
	max-width: 48ch;
	margin-bottom: 2rem;
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
}

/* ==========================================================================
   11. Page header
   ========================================================================== */

.mpc-page-header {
	position: relative;
	background: var(--stone);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	border-bottom: 1px solid var(--line);
}

.mpc-page-header--image {
	background: var(--brand-black);
	border-bottom: 0;
	padding-block: clamp(4rem, 10vw, 7rem);
}
.mpc-page-header--image .mpc-page-header__media { position: absolute; inset: 0; }
.mpc-page-header--image .mpc-page-header__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.58;
}
.mpc-page-header--image .mpc-page-header__body { position: relative; z-index: 2; }
.mpc-page-header--image .mpc-page-header__title,
.mpc-page-header--image .mpc-page-header__standfirst { color: var(--paper); }

.mpc-page-header__title { margin-bottom: 0; }

.mpc-page-header__standfirst {
	margin-top: 1rem;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
	color: var(--ink-soft);
	max-width: 52ch;
}

.mpc-breadcrumbs {
	margin-bottom: 1.25rem;
	font-family: var(--font-display);
	font-size: 0.85rem;
	letter-spacing: 0.03em;
}
.mpc-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	color: var(--ink-soft);
}
.mpc-breadcrumbs li + li::before {
	content: '/';
	margin-right: 0.5rem;
	color: var(--line);
}
.mpc-breadcrumbs a { text-decoration: none; }
.mpc-breadcrumbs a:hover { text-decoration: underline; }

/* ==========================================================================
   12. Entry content (block editor output)
   ========================================================================== */

.entry-content { max-width: 100%; }

.entry-content > * { max-width: var(--measure); }
.entry-content > .alignwide { max-width: var(--wrap); }
.entry-content > .alignfull { max-width: none; }

.entry-content h2 { margin-top: 2em; }
.entry-content h3 { margin-top: 1.75em; }
.entry-content h2:first-child,
.entry-content h3:first-child { margin-top: 0; }

.entry-content ul,
.entry-content ol {
	max-width: var(--measure);
	padding-left: 1.35rem;
	margin-block: 0 1.4em;
}
.entry-content li { margin-bottom: 0.45em; }
.entry-content li::marker { color: var(--brand); }

.entry-content blockquote {
	margin: 2em 0;
	padding-left: 1.5rem;
	border-left: 4px solid var(--brand);
	font-size: 1.2rem;
	font-style: italic;
	color: var(--ink);
}

.entry-content figure { margin: 2em 0; }
.entry-content img { border-radius: 2px; }

.entry-content figcaption {
	margin-top: 0.65rem;
	font-family: var(--font-display);
	font-size: 0.85rem;
	color: var(--ink-soft);
}

.entry-content hr {
	border: 0;
	height: 1px;
	background: var(--line);
	margin: 3em 0;
	max-width: var(--measure);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 2em;
}
.entry-content th,
.entry-content td {
	text-align: left;
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--line);
}
.entry-content th {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
}

/* Defuse the wrapper classes from the pre-theme block markup. The template now
   provides the section padding and the content width, so if any of that markup
   is still sitting in a page it must not add a second set. */

.entry-content .mpc-section { padding-block: 0; }
.entry-content .mpc-wrap {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/* --- Block layout ---------------------------------------------------------
   theme.json supplies contentSize/wideSize, so constrained groups get their
   width from core. These rules cover the rest: nested alignment inside our own
   wrappers, and columns on small screens. */

.entry-content .alignfull {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.entry-content .alignwide { max-width: var(--wrap); }

.entry-content .alignleft {
	float: left;
	margin: 0.35rem 2rem 1.5rem 0;
	max-width: 45%;
}
.entry-content .alignright {
	float: right;
	margin: 0.35rem 0 1.5rem 2rem;
	max-width: 45%;
}
.entry-content .aligncenter { margin-inline: auto; }

.entry-content .wp-block-columns { gap: clamp(1.5rem, 4vw, 3rem); }

@media (max-width: 46em) {
	.entry-content .wp-block-columns { flex-wrap: wrap; }
	.entry-content .wp-block-column { flex-basis: 100% !important; }
	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		margin-inline: 0;
		max-width: 100%;
	}
}

/* ==========================================================================
   13. About template
   ==========================================================================
   A fixed reading measure that doesn't drift with the window, and a panel
   alongside carrying the practical facts.
   ========================================================================== */

.mpc-about {
	display: grid;
	gap: clamp(2.5rem, 6vw, 4.5rem);
	align-items: start;
}

@media (min-width: 56.25em) {
	.mpc-about { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
}

.mpc-about__main > * { max-width: var(--measure); }
.mpc-about__main > .alignwide,
.mpc-about__main > .alignfull { max-width: 100%; }

.mpc-panel {
	background: var(--stone);
	border-top: 4px solid var(--brand);
	padding: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 56.25em) {
	.mpc-panel { position: sticky; top: 9rem; }
}

.mpc-panel__title {
	font-size: 1.15rem;
	letter-spacing: 0.01em;
	margin-bottom: 1.25rem;
}

.mpc-panel .mpc-details dd { font-size: 1rem; }

.mpc-panel__cta {
	margin-top: 1.75rem;
	width: 100%;
}

/* ==========================================================================
   14. Homepage enquiry
   ========================================================================== */

.mpc-enquiry__grid {
	display: grid;
	gap: clamp(2.5rem, 6vw, 4.5rem);
	align-items: start;
}

@media (min-width: 56.25em) {
	.mpc-enquiry__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.mpc-enquiry__email {
	margin-top: 1.75rem;
	font-size: 1.05rem;
}
.mpc-enquiry__email p { margin-bottom: 0.35rem; }
.mpc-enquiry__email ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mpc-enquiry__email li { margin-bottom: 0.2rem; }
.mpc-enquiry__email a { word-break: break-word; }

.mpc-enquiry .mpc-form {
	background: var(--paper);
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	border-radius: 2px;
	max-width: none;
}

/* ==========================================================================
   15. Contact template
   ========================================================================== */

.mpc-contact {
	display: grid;
	gap: clamp(2.5rem, 6vw, 4.5rem);
	align-items: start;
}

@media (min-width: 56.25em) {
	.mpc-contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.mpc-contact__main .entry-content { margin-bottom: 2.5rem; }

.mpc-details { margin: 1.75rem 0 0; }
.mpc-details dt {
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-top: 1.25rem;
}
.mpc-details dt:first-child { margin-top: 0; }
.mpc-details dd {
	margin: 0.2rem 0 0;
	font-size: 1.1rem;
	line-height: 1.45;
}
.mpc-details dd + dd { margin-top: 0.4rem; }
.mpc-details a { word-break: break-word; }

.mpc-contact__figure {
	margin: 2.5rem 0 0;
}
.mpc-contact__figure img { border-radius: 2px; }

.mpc-admin-notice {
	background: #FFF6E0;
	border-left: 4px solid var(--sand);
	padding: 1rem 1.25rem;
	font-family: var(--font-display);
	font-size: 0.95rem;
	max-width: none;
}

/* ==========================================================================
   16. Forms (WPForms)
   ========================================================================== */

.mpc-form { max-width: 36rem; }

.mpc-form .wpforms-container,
.mpc-form .wpforms-container-full { margin: 0; }

.mpc-form .wpforms-field { padding: 0 0 1.35rem; }

.mpc-form .wpforms-field-label {
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--ink);
	margin-bottom: 0.4rem;
	display: block;
}

.mpc-form .wpforms-required-label { color: var(--brand-ink); }

.mpc-form .wpforms-field-description {
	font-size: 0.92rem;
	color: var(--ink-soft);
	margin-top: 0.35rem;
}

.mpc-form input[type="text"],
.mpc-form input[type="email"],
.mpc-form input[type="tel"],
.mpc-form input[type="url"],
.mpc-form input[type="number"],
.mpc-form select,
.mpc-form textarea {
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 2px;
	padding: 0.7rem 0.85rem;
	transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.mpc-form textarea { min-height: 8rem; resize: vertical; }

.mpc-form input:focus,
.mpc-form select:focus,
.mpc-form textarea:focus {
	border-color: var(--brand-ink);
	box-shadow: 0 0 0 3px rgba(1, 109, 142, 0.18);
	outline: none;
}

.mpc-form .wpforms-error {
	border-color: var(--brand-ink) !important;
}
.mpc-form label.wpforms-error {
	border: 0 !important;
	color: var(--brand-ink);
	font-family: var(--font-display);
	font-size: 0.9rem;
	margin-top: 0.35rem;
	display: block;
}

.mpc-form .wpforms-confirmation-container-full {
	background: var(--stone);
	border: 0;
	border-left: 4px solid var(--brand);
	border-radius: 2px;
	padding: 1.25rem 1.5rem;
	color: var(--ink);
}

/* ==========================================================================
   17. Gallery (FooGallery)
   ========================================================================== */

.mpc-gallery__intro { margin-bottom: clamp(2rem, 4vw, 3rem); }

.mpc-gallery { margin-top: 0; }
.mpc-gallery .foogallery,
.mpc-gallery .fg-gallery { width: 100%; max-width: none; }
.mpc-gallery .fg-image,
.mpc-gallery .fg-thumb { border-radius: 2px; }
.mpc-gallery .fg-item-inner:focus-within { outline: 3px solid var(--brand-ink); outline-offset: 3px; }

/* ==========================================================================
   18. Post list
   ========================================================================== */

.mpc-postlist { display: grid; gap: 2.5rem; }
.mpc-postlist__item { padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.mpc-postlist__item:last-child { border-bottom: 0; }
.mpc-postlist__title { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); margin-bottom: 0.3em; }
.mpc-postlist__title a { color: var(--ink); text-decoration: none; }
.mpc-postlist__title a:hover { color: var(--brand-ink); }
.mpc-postlist__meta {
	font-family: var(--font-display);
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 0.8em;
}

.mpc-404-menu {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	max-width: 24rem;
}
.mpc-404-menu a {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.1rem;
	display: block;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
}

/* --- Search --- */

.mpc-search { max-width: 30rem; }
.mpc-search__label {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 0.4rem;
}
.mpc-search__row { display: flex; gap: 0.5rem; }
.mpc-search__input {
	flex: 1;
	min-height: 48px;
	font-family: var(--font-body);
	font-size: 1rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 2px;
}

/* --- Pagination --- */

.mpc-pagination { margin-top: 3rem; }
.mpc-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mpc-pagination .page-numbers {
	font-family: var(--font-display);
	font-weight: 600;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.75rem;
	border: 1px solid var(--line);
	border-radius: 2px;
	text-decoration: none;
	color: var(--ink);
}
.mpc-pagination .page-numbers.current,
.mpc-pagination .page-numbers:hover {
	background: var(--brand-ink);
	border-color: var(--brand-ink);
	color: var(--paper);
}

/* ==========================================================================
   19. Footer
   ========================================================================== */

.mpc-footer {
	background: var(--brand-black);
	color: rgba(255, 255, 255, 0.82);
	padding-top: clamp(3rem, 6vw, 4.5rem);
	font-size: 1rem;
}

.mpc-footer__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 46em) {
	.mpc-footer__inner { grid-template-columns: 1.6fr repeat(3, 1fr); }
}

.mpc-footer__logo {
	height: 68px;
	width: auto;
	margin-bottom: 1.25rem;
}

.mpc-footer__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--paper);
	margin-bottom: 0.75rem;
}

.mpc-footer__blurb {
	max-width: 32ch;
	color: rgba(255, 255, 255, 0.72);
}

.mpc-footer__heading {
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sand);
	margin-bottom: 0.9rem;
}

.mpc-footer p { margin-bottom: 0.5rem; max-width: none; }

.mpc-footer a { color: var(--paper); text-decoration-color: rgba(255, 255, 255, 0.35); }
.mpc-footer a:hover { color: var(--sand); text-decoration-color: var(--sand); }

.mpc-footer__venues {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mpc-footer__venues li {
	margin-bottom: 0.55rem;
	line-height: 1.45;
}

.mpc-footer__menu { list-style: none; margin: 0; padding: 0; }
.mpc-footer__menu li { margin-bottom: 0.5rem; }
.mpc-footer__menu a { text-decoration: none; }
.mpc-footer__menu a:hover { text-decoration: underline; }

.mpc-footer__base {
	max-width: var(--wrap);
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
	padding: 1.5rem var(--gutter);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-family: var(--font-display);
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.6);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	align-items: center;
	justify-content: space-between;
}
.mpc-footer__base p { margin: 0; }

.mpc-footer__legal a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	padding-block: 0.35rem;
	display: inline-block;
}
.mpc-footer__legal a:hover,
.mpc-footer__legal a:focus-visible {
	color: var(--sand);
	text-decoration: underline;
}

/* ==========================================================================
   20. Accessibility and motion
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

@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;
	}
}

@media print {
	.mpc-header,
	.mpc-footer,
	.mpc-nav-toggle,
	.mpc-cta { display: none; }
	body { color: #000; font-size: 12pt; }
}