@charset "UTF-8";

/* ==========================================================================
   Dengie Hundred Probus Club — front-end components
   --------------------------------------------------------------------------
   Everything here is scoped to component classes (pb-*) so it does not
   disturb the rest of the site's block styling. The goal of this file is
   responsive behaviour: the previous design baked headlines, button labels
   and captions into PNGs, so those sections could not reflow, could not be
   zoomed, and shrank to ~5px text on a phone.

   Loaded from functions.php after the block styles.
   ========================================================================== */

:root {
	/* Brand tokens, falling back to the literal brand values so this file
	   still works if the preset palette is ever renamed. */
	--pb-navy: var(--wp--preset--color--header-back, #03243e);
	--pb-navy-soft: #062e4f;
	--pb-gold: var(--wp--preset--color--probus-gold, #c9a24d);
	--pb-gold-deep: #b08a3e;
	--pb-ivory: #faf8f3;
	--pb-ink: var(--wp--preset--color--body-text, #000000);
	--pb-muted: #55606b;
	--pb-hairline: rgba(201, 162, 77, 0.5);

	/* Gutter for the full-width bands that frame the page. The hero already
	   uses this value, so the masthead rows and the footer now put their first
	   word on the same left edge as the hero at every viewport width. */
	--pb-gutter: clamp(20px, 2.6vw, 38px);

	/* Single source of truth for the minimum comfortable touch target. */
	--pb-tap: 44px;
}

/* Visible keyboard focus everywhere. The design removes default outlines in
   places, which leaves keyboard users stranded. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--pb-gold);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ==========================================================================
   1. Masthead
   The old header reserved 582px of a 390x844 phone screen for the logo and
   an h2 set at a fixed 75px. Everything below the fold was pushed off-screen.
   ========================================================================== */

.pb-masthead {
	/* Wrapper only. The navy brand band and the white navigation row are
	   painted separately, which is how the approved design reads. */
}

/* Kill the theme's inter-block gap between the brand band and the nav row,
   without touching the inherited --wp--style--block-gap custom property. */
.pb-masthead > * + * {
	margin-block-start: 0;
}

.pb-masthead__band {
	background-color: var(--pb-navy);
	color: var(--pb-gold);
	padding-block: clamp(10px, 1.5vw, 22px);
	padding-inline: var(--pb-gutter);
}

.pb-masthead__bar {
	background-color: #ffffff;
	border-bottom: 1px solid var(--pb-hairline);
	padding-block: clamp(4px, 0.6vw, 8px);
}

/* Both rows span the same column as the page content and the footer: the full
   width of a phone, boxed to the wide column on a desktop. Painted
   edge-to-edge instead, the navy band read as a wider element than the page
   and footer it frames. The max-width is spelled out here rather than left to
   core's alignwide rules so the two rows cannot drift apart. */
.pb-masthead__band,
.pb-masthead__bar {
	max-width: var(--wp--style--global--wide-size, 1100px);
	margin-inline: auto;
}

/* The brand lockup links back to the home page. */
.pb-masthead .pb-brand {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.5vw, 22px);
	text-decoration: none;
	color: inherit;
	flex-wrap: wrap;
}

.pb-brand:focus-visible {
	outline-offset: 6px;
}

.pb-brand img {
	display: block;
	width: clamp(52px, 9vw, 124px);
	height: auto;
	flex: 0 0 auto;
}

.pb-brand__text {
	min-width: 0;
	flex: 1 1 auto;
}

.pb-brand__name,
.pb-brand .wp-block-site-title {
	font-family: var(--wp--preset--font-family--bitter, Bitter, serif);
	font-weight: 700;
	/* 75px fixed on a 390px screen was the single biggest cause of the phone
	   layout collapsing. This scales from 26px on a small phone to 56px on a
	   wide desktop. */
	font-size: clamp(1.65rem, 5vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: 0.01em;
	color: var(--pb-gold);
	margin: 0;
	padding: 0;
}

/* The wordmark links home, so give it a real tap target rather than the line
   box of the text alone (32px high at mobile sizes). */
.pb-brand__name a,
.pb-brand .wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	min-height: var(--pb-tap);
	color: inherit;
	text-decoration: none;
}

.pb-brand__name a:hover,
.pb-brand__name a:focus-visible {
	color: #ffffff;
}

.pb-brand__strap {
	font-size: clamp(0.72rem, 1.5vw, 0.95rem);
	line-height: 1.35;
	color: #ffffff;
	opacity: 0.88;
	margin: 0.35em 0 0;
	padding: 0;
	letter-spacing: 0.02em;
}

/* --- Masthead navigation ------------------------------------------------- */

.pb-nav {
	padding-block: clamp(2px, 0.4vw, 6px);
}

.pb-nav .wp-block-navigation-item__content {
	color: var(--pb-navy);
	font-weight: 700;
}

.pb-nav .wp-block-navigation-item__content:hover,
.pb-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--pb-gold-deep);
}

/* The overlay toggle is the only way to navigate on a phone, so it has to be
   a real, large, obvious control rather than the bare word "Menu".

   These rules are deliberately scoped to the widths where core actually uses
   the overlay. Above that width core renders the menu inline and hides the
   button; styling it unconditionally would force it back on screen next to the
   menu bar. Core's overlay breakpoint is 600px. */
@media (max-width: 599px) {
.pb-nav .wp-block-navigation__responsive-container-open,
.pb-nav .wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--pb-tap);
	min-width: var(--pb-tap);
	padding: 10px 14px;
	margin: 0;
	color: var(--pb-navy);
	background: var(--pb-ivory);
	border: 1px solid var(--pb-gold);
	border-radius: 3px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.78rem;
	cursor: pointer;
}

.pb-nav .wp-block-navigation__responsive-container-open svg {
	width: 20px;
	height: 20px;
}
}

/* Core paints the open overlay white with
   `.wp-block-navigation:not(.has-background) ... .is-menu-open` (four classes).
   Matching that weight is not enough on its own, because the item colour rule
   below only carries three, so the links were rendering white on white and the
   menu looked empty on a phone. This selector is deliberately one class shy of
   nothing: it outranks core's rule whatever the stylesheet order. */
.pb-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.pb-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--pb-navy);
	color: #ffffff;
	padding: clamp(20px, 6vw, 40px);
}

.pb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #ffffff;
	min-height: var(--pb-tap);
}

/* Rows in the overlay menu are the only way to move around on a phone, so
   each one gets a full-height tap target rather than the 22px line box. */
.pb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	display: flex;
	align-items: center;
	min-height: var(--pb-tap);
}

.pb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
}

.pb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--pb-gold);
	background: transparent;
	border-color: var(--pb-gold);
}

/* ==========================================================================
   2. Hero
   Rebuilt from the flattened hero PNG: the photograph is a real image and the
   headline, body copy, kicker and both buttons are real text.
   ========================================================================== */

.pb-hero {
	display: grid;
	/* Matches the proportions of the original hero artwork, so the photograph
	   keeps its 1.5:1 framing without being cropped by object-fit. */
	grid-template-columns: minmax(0, 45%) minmax(0, 55%);
	align-items: stretch;
	background-color: var(--pb-navy);
	overflow: hidden;
}

.pb-hero__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(8px, 1vw, 14px);
	background-image: linear-gradient(120deg, #03243e 0%, #0a3355 100%);
	padding: clamp(22px, 2.8vw, 40px) clamp(20px, 2.6vw, 38px);
	margin: 0;
}

.pb-hero__title {
	font-family: var(--wp--preset--font-family--merriweather, Merriweather, serif);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.4vw, 2.15rem);
	line-height: 1.16;
	color: #ffffff;
	margin: 0;
	padding: 0;
}

.pb-hero__body {
	font-size: clamp(0.95rem, 1.05vw, 1.05rem);
	line-height: 1.5;
	color: #ffffff;
	margin: 0;
	padding: 0;
	max-width: 34em;
}

.pb-hero__kicker {
	font-size: clamp(0.85rem, 1.05vw, 1rem);
	font-weight: 700;
	color: var(--pb-gold);
	margin: 0;
	padding: 0;
}

.pb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: clamp(4px, 0.8vw, 12px);
}

/* Both hero actions are real buttons with a 44px minimum height, replacing
   the 55x14px and 36x14px hotspots that were positioned over the PNG.
   Note: style the link, never the .wp-block-button wrapper, or the wrapper
   draws a second border around the button. */
.pb-hero__actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--pb-tap);
	padding: 12px 22px;
	border-radius: 3px;
	font-size: clamp(0.8rem, 1vw, 0.9rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--pb-gold);
}

.pb-hero__btn--solid .wp-block-button__link {
	background-color: var(--pb-gold);
	border-color: var(--pb-gold);
	color: var(--pb-navy);
}

.pb-hero__btn--solid .wp-block-button__link:hover,
.pb-hero__btn--solid .wp-block-button__link:focus-visible {
	background-color: #ffffff;
	border-color: #ffffff;
	color: var(--pb-navy);
}

.pb-hero__btn--ghost .wp-block-button__link {
	background-color: transparent;
	border-color: var(--pb-gold);
	color: var(--pb-gold);
}

.pb-hero__btn--ghost .wp-block-button__link:hover,
.pb-hero__btn--ghost .wp-block-button__link:focus-visible {
	background-color: var(--pb-gold);
	color: var(--pb-navy);
}

.pb-hero__media {
	display: flex;
	min-width: 0;
	margin: 0;
}

.pb-hero__media .wp-block-image {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.pb-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Keep the faces in frame when the column gets narrow. */
	object-position: 55% 45%;
}

/* ==========================================================================
   3. Benefits strip
   Was a single 1124x95 PNG containing three gold icons, three headings and
   three sub-headings. Now three columns of real text with inline SVG icons.
   ========================================================================== */

.pb-benefits {
	background-color: var(--pb-ivory);
	padding-block: clamp(18px, 2.4vw, 30px);
}

.pb-benefits .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0;
}

/* The icon is painted from a theme SVG through a CSS mask rather than being
   an image in the post content, so the copy stays plain text and the icon can
   be recoloured or swapped by editing the theme. */
.pb-benefit {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: clamp(10px, 1.3vw, 20px);
	row-gap: 3px;
	align-content: start;
	align-items: start;
	padding-inline: clamp(6px, 1.8vw, 28px);
}

.pb-benefit > * {
	margin-block: 0;
}

.pb-benefit::before {
	content: "";
	grid-row: 1 / span 2;
	width: clamp(28px, 3vw, 40px);
	height: clamp(28px, 3vw, 40px);
	background-color: var(--pb-gold);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.pb-benefits .pb-benefit:nth-child(1)::before {
	-webkit-mask-image: url("../icons/lunch.svg");
	mask-image: url("../icons/lunch.svg");
}

.pb-benefits .pb-benefit:nth-child(2)::before {
	-webkit-mask-image: url("../icons/fellowship.svg");
	mask-image: url("../icons/fellowship.svg");
}

.pb-benefits .pb-benefit:nth-child(3)::before {
	-webkit-mask-image: url("../icons/speakers.svg");
	mask-image: url("../icons/speakers.svg");
}

.pb-benefit + .pb-benefit {
	border-left: 1px solid var(--pb-hairline);
}

.pb-benefit__title {
	font-size: clamp(0.76rem, 0.95vw, 0.9rem);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pb-gold-deep);
	margin: 0 0 3px;
	padding: 0;
	line-height: 1.2;
}

.pb-benefit__text {
	font-size: clamp(0.8rem, 0.95vw, 0.95rem);
	line-height: 1.35;
	color: var(--pb-muted);
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   4. Photo cards
   "Our monthly luncheons" and "Visits & special occasions" were single PNGs
   with the caption bar baked into the bottom edge. Split back into a real
   image plus a real <figcaption>.
   ========================================================================== */

.pb-card {
	margin: 0;
}

.pb-card img {
	display: block;
	width: 100%;
	height: auto;
}

.wp-block-image.pb-card figcaption,
.pb-card .wp-element-caption {
	background-color: var(--pb-navy-soft);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--merriweather, Merriweather, serif);
	font-weight: 300;
	font-size: clamp(1rem, 1.6vw, 1.3rem);
	line-height: 1.25;
	text-align: left;
	margin: 0;
	padding: clamp(12px, 1.6vw, 18px) clamp(14px, 1.8vw, 22px);
}

/* ==========================================================================
   5. Footer
   ========================================================================== */

/* The footer spans the same column as the masthead rows and the page content:
   the full width of a phone, boxed to the wide column on a desktop. The site
   editor's custom CSS used to pin .probus-footer to a hard
   `width: var(--wp--style--global--wide-size)`, and then patch it back to
   `calc(100% - 16px)` below 600px. Between those two widths the footer stayed
   1100px wide on a 768px screen, so the whole page scrolled sideways and the
   footer was also the one block inset by 8px on a phone. Stated here as well
   as in the editor CSS so a future deploy cannot reintroduce it. */
.pb-footer {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1100px);
	margin-inline: auto;
	padding-inline: var(--pb-gutter, 24px);
}

.pb-footer__heading {
	font-size: clamp(0.85rem, 1vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pb-gold);
	margin: 0 0 0.6em;
	padding: 0;
}

/* Footer link lists: the original used <br>-separated anchors spaced only 21px
   apart, well under a comfortable thumb target. */
.pb-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pb-footer-links li {
	margin: 0;
}

.pb-footer-links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--pb-tap);
}

/* The Facebook call to action was gold text on a mid-grey pill (#788793),
   which reads as a disabled control and fails WCAG AA at 1.9:1. */
.pb-footer .wp-block-button__link {
	background-color: var(--pb-navy);
	color: var(--pb-gold);
	border: 1px solid var(--pb-gold);
	min-height: var(--pb-tap);
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	font-weight: 700;
}

.pb-footer .wp-block-button__link:hover,
.pb-footer .wp-block-button__link:focus-visible {
	background-color: var(--pb-gold);
	color: var(--pb-navy);
}

.pb-footer__patron {
	font-size: 0.9rem;
	color: #ffffff;
	opacity: 0.85;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   5b. Home page sections
   ========================================================================== */

.pb-about {
	padding-block: clamp(20px, 3vw, 40px);
}

.pb-about__title {
	font-family: var(--wp--preset--font-family--merriweather, Merriweather, serif);
	font-weight: 300;
	font-size: clamp(1.35rem, 2.4vw, 2rem);
	line-height: 1.2;
	margin: 0 0 0.5em;
	padding: 0;
}

/* Gold labels on the navy statistics band. The original markup referenced a
   preset (uta-background) that does not exist in the active palette. */
.pb-stats__item {
	font-size: clamp(0.75rem, 0.9vw, 0.85rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Membership at a glance. The figures used to be laid out with runs of
   spaces, which HTML collapses, so the amounts never lined up. */
.pb-facts-col {
	padding: clamp(18px, 2.4vw, 32px);
}

.pb-facts__title {
	font-size: clamp(0.85rem, 1vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pb-gold-deep);
	margin: 0 0 0.9em;
	padding: 0;
}

.pb-facts {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
}

.pb-facts > * {
	margin: 0;
	padding: 7px 0;
	border-top: 1px solid var(--pb-hairline);
}

.pb-facts__value {
	text-align: right;
	font-weight: 700;
}

.pb-facts__note {
	font-size: 0.9rem;
	margin: 1em 0 0;
	padding: 0;
}

/* ==========================================================================
   5c. Third-party block and plugin output
   The Simple Club Events shortcodes render their own "Find out more" /
   "View all" anchors, which are only 16-36px tall on a phone. Sizing them here
   keeps that fix in the theme rather than patching the plugin.
   ========================================================================== */

.sce-home-more,
.sce-meeting-more,
.sce-home-all a {
	display: inline-flex;
	align-items: center;
	min-height: var(--pb-tap);
}

/* Card images inside the events shortcodes should never break out of their
   column. */
.sce-home-mini-image img,
.sce-meeting-card img,
.sce-list-item img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   5d. Past visits archive
   The club's earlier outings moved across from the previous website: an index
   of visits at /past-events/ and, for each one, its account and photographs.
   These pages are ordinary page content, so the only thing the theme has to
   provide is the look of the date label, the index table and the galleries.
   ========================================================================== */

/* The date on a visit page. The old pages printed "Event type: Visit / Date:
   ..." in the old plugin's panel; this replaces it with the same gold label
   treatment the rest of the site uses for section labels. */
.pb-visit-meta {
	font-size: clamp(0.78rem, 0.95vw, 0.88rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pb-gold-deep);
	margin: 0 0 1em;
	padding: 0 0 0.55em;
	border-bottom: 1px solid var(--pb-hairline);
}

/* "Photographs from the visit - 14 photographs..." */
.pb-visit-intro {
	font-size: clamp(0.85rem, 0.95vw, 0.95rem);
	color: var(--pb-muted);
	margin-bottom: 0.75em;
}

/* The archive photographs are shown whole, at their own proportions, rather
   than cropped to a tidy grid: cropping a landscape photograph into a portrait
   frame (which is what happens when it shares a row with one) leaves a narrow
   vertical slice of it. Core gives every gallery item `flex-grow: 1`, which
   would stretch a lone photograph on the last row across the whole column, so
   hold the item width and let the row end early instead. */
/* The :not(#individual-image) is not decoration: core's own rule for these
   items carries the same class count, so it has to be outranked rather than
   merely restated lower down the stylesheet. */
.pb-visit-gallery figure.wp-block-image:not(#individual-image) {
	flex-grow: 0;
}

.pb-visit-gallery img {
	height: auto;
}

/* The index: date and visit, one row each, newest first. */
.pb-visit-archive table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--pb-ivory);
}

.pb-visit-archive th,
.pb-visit-archive td {
	text-align: left;
	vertical-align: top;
	padding: 10px 14px;
	border-bottom: 1px solid var(--pb-hairline);
}

.pb-visit-archive th {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pb-gold-deep);
}

.pb-visit-archive tr:last-child td {
	border-bottom: 0;
}

/* Keep the date on one line so the column stays narrow and the visit names
   line up with each other down the page. */
.pb-visit-archive th:first-child,
.pb-visit-archive td:first-child {
	white-space: nowrap;
}

.pb-visit-archive td a {
	display: inline-flex;
	align-items: center;
	min-height: var(--pb-tap);
	font-weight: 700;
}

.pb-visit-back a {
	display: inline-flex;
	align-items: center;
	min-height: var(--pb-tap);
}

/* ==========================================================================
   6. Small screens
   ========================================================================== */

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

	/* Photograph first, then the text, so the hero reads naturally stacked. */
	.pb-hero__media {
		order: 1;
		max-height: 46vh;
		overflow: hidden;
	}

	.pb-hero__panel {
		order: 2;
	}

	.pb-hero__title {
		font-size: clamp(1.5rem, 7vw, 2.1rem);
	}

	.pb-hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.pb-hero__actions .wp-block-button,
	.pb-hero__actions .wp-block-button__link {
		width: 100%;
	}

	.pb-benefits .wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.pb-benefit {
		padding-block: 14px;
		padding-inline: 4px;
	}

	.pb-benefit + .pb-benefit {
		border-left: 0;
		border-top: 1px solid var(--pb-hairline);
	}

	.pb-benefit::before {
		width: 32px;
		height: 32px;
	}

	/* The studio CSS forces this margin on the Members button, which pushes it
	   off the right edge of the mobile overlay. */
	.probus-members-nav {
		margin-left: 0 !important;
	}

	/* The wordmark and strapline need room to breathe once the lockup wraps. */
	.pb-brand {
		gap: 12px;
	}
}

@media (max-width: 599px) {
	/* Core keeps a three-column gallery three columns wide at every viewport,
	   which leaves each photograph about 105px across on a phone. Two columns
	   on a narrow screen show the same photographs at a usable size. Scoped to
	   this archive's galleries so no other gallery on the site changes. */
	.pb-visit-gallery.columns-3 > figure.wp-block-image:not(#individual-image) {
		width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}