/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Custom child theme for Bennett Benevolent Fund
 Author:       Bennett Life
 Template:     generatepress
 Version:      1.1.0
 License:      GNU General Public License v2 or later
 Text Domain:  generatepress-child
*/

/* Poppins (SIL Open Font License), latin subset */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/poppins-400.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/poppins-600.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/poppins-700.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("fonts/poppins-800.woff2") format("woff2");
}

/* Metric-matched fallback so the swap to Poppins doesn't reflow text */
@font-face {
	font-family: "Poppins Fallback";
	src: local("Arial");
	size-adjust: 112.6%;
	ascent-override: 93.75%;
	descent-override: 35.16%;
	line-gap-override: 8.33%;
}

/* Mrs Saint Delafield (SIL Open Font License), latin subset */
@font-face {
	font-family: "Mrs Saint Delafield";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/mrs-saint-delafield.woff2") format("woff2");
}

/* ==========================================================================
   Design tokens (from the Bennett Benevolent Fund UI mockups)
   ========================================================================== */
:root {
	/* Fonts. Poppins is self-hosted from /fonts (@font-face rules above). */
	--font-body: "Poppins", "Poppins Fallback", "Helvetica Neue", Arial, sans-serif;
	--font-heading: var(--font-body);
	--font-script: "Mrs Saint Delafield", "Brush Script MT", "Segoe Script", cursive;

	/* Palette */
	--brown: #A65D03;
	--amber: #F2B544;
	--amber-deep: #a65d03;
	--teal: #1c7a8c;
	--ink: #1f1b18;
	--muted: #8a8275;
	--script-gold: #d9a24b;
	--line: #e3ddd4;

	/* Per-page accent: teal by default, brown on the About Us page */
	--accent: var(--teal);

	--gutter: 48px;
	/* Side padding that keeps content in a 1400px column while backgrounds run edge to edge */
	--pad: max(var(--gutter), calc((100% - 1304px) / 2));

	/* Announcement strip */
	--strip-bg: var(--accent);
	--strip-text: #ffffff;
}

body.accent-brown {
	--accent: var(--amber-deep);
}

/* ==========================================================================
   Base
   ========================================================================== */
body,
button,
input,
select,
textarea {
	font-family: var(--font-body);
	color: #000;
}

body {
	background: #fff;
	font-size: 20px;
	line-height: 30px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: #000;
}

a { color: var(--accent); }
a:hover, a:focus { color: var(--ink); }

/* Backgrounds run edge to edge; content is kept to a 1400px column */
.site.grid-container,
.grid-container {
	max-width: none;
}

.site-footer .bbf-foot__inner {
	max-width: 1400px;
}

.site-content {
	display: block;
}

/* Pages are designed edge-to-edge: no card, padding or page title */
.separate-containers .site-main {
	margin: 0;
}

.separate-containers .inside-article,
.page .inside-article {
	padding: 0;
	background: transparent;
}

.page .entry-header,
.page .entry-title {
	display: none;
}

.page .entry-content {
	margin: 0;
}

.page .entry-content > * {
	margin-top: 0;
	margin-bottom: 0;
}

.entry-content > .wp-block-columns,
.entry-content .wp-block-group {
	margin-bottom: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	background-color: #fff;
	border-bottom: 1px solid #eee;
}

.site-header .inside-header {
	max-width: none;
	margin: 0;
	padding: 0 var(--gutter);
	min-height: 84px;
	align-items: center;
}

.site-header .site-branding {
	margin: 0;
}

.site-description {
	display: none;
}

.main-title {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.main-title a,
.main-title a:hover,
.main-title a:focus {
	color: var(--ink);
	text-decoration: none;
}

.main-title .brand-accent {
	color: var(--teal);
}

/* Navigation */
body .main-navigation,
body .main-navigation ul ul {
	background-color: transparent;
}

body .main-navigation .main-nav > ul {
	display: flex;
	align-items: center;
	gap: 0;
}

body .main-navigation .main-nav ul li a {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 84px;
	padding: 0 18px;
	color: var(--ink);
	background-color: transparent;
	transition: color 0.2s ease;
}

body .main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--teal);
	background-color: transparent;
	text-decoration: underline;
	text-decoration-color: var(--teal);
	text-decoration-thickness: 4px;
	text-underline-offset: 8px;
}

/* Extra specificity: GeneratePress's li:not([class*="current-menu-"]):hover rule would otherwise win */
html body .main-navigation.main-navigation .main-nav ul li:hover > a,
html body .main-navigation.main-navigation .main-nav ul li:focus > a,
html body .main-navigation.main-navigation .main-nav ul li:focus-within > a {
	color: var(--brown);
	background-color: transparent;
	text-decoration: underline;
	text-decoration-color: var(--brown);
	text-decoration-thickness: 4px;
	text-underline-offset: 8px;
}

/* The Donate button gets a background change instead of an underline */
html body .main-navigation.main-navigation .main-nav ul li.menu-donate > a {
	text-decoration: none;
}

/* "Donate" menu item (add CSS class `menu-donate` to the menu item) */
body .main-navigation .main-nav ul li.menu-donate > a {
	margin-left: 18px;
	padding: 10px 22px;
	line-height: 1;
	background-color: var(--teal);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	transition: box-shadow 0.2s ease;
}

html body .main-navigation.main-navigation .main-nav ul li.menu-donate:hover > a,
html body .main-navigation.main-navigation .main-nav ul li.menu-donate:focus > a,
html body .main-navigation.main-navigation .main-nav ul li.menu-donate:focus-within > a {
	background-color: #fff;
	color: var(--brown);
	/* Inset shadow mimics a border without changing the button's width */
	box-shadow: inset 0 0 0 3px var(--brown);
}

/* Mobile */
@media (max-width: 768px) {
	:root { --gutter: 20px; }

	.site-header .inside-header {
		min-height: 68px;
	}

	.main-title {
		font-size: 16px;
	}

	body .main-navigation .main-nav ul li a {
		line-height: 1.4;
		padding: 14px 20px;
	}

	body .main-navigation .main-nav ul li.menu-donate > a {
		margin: 10px 20px;
		text-align: center;
	}

	body .main-navigation .main-nav > ul {
		display: block;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: var(--ink);
}

.bbf-foot {
	background: var(--ink);
	color: #fff;
	padding: 44px var(--pad) 28px;
}

.bbf-foot__inner {
	margin: 0 auto;
}

.bbf-foot__top {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.bbf-foot__brand {
	max-width: 320px;
}

.bbf-foot__name {
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.bbf-foot__tagline {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 22px;
	color: rgba(255, 255, 255, 0.7);
}

.bbf-foot__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

.bbf-foot a {
	color: #fff;
	text-decoration: none;
	opacity: 0.8;
}

.bbf-foot a:hover,
.bbf-foot a:focus {
	opacity: 1;
	color: #fff;
}

.bbf-foot__copy {
	margin: 18px 0 0;
	font-size: 12px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Announcement strip
   ========================================================================== */
.announcement-strip {
	background-color: var(--strip-bg);
	color: var(--strip-text);
	font-size: 0.875rem;
	line-height: 1.4;
}

.announcement-strip[hidden],
.strip-dismissed .announcement-strip {
	display: none;
}

.announcement-strip__inner {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0.625rem 3rem;
	text-align: center;
}

.announcement-strip__text {
	margin: 0;
}

.announcement-strip__link {
	color: var(--strip-text);
	font-weight: 600;
	text-decoration: underline;
	margin-left: 0.5rem;
	white-space: nowrap;
}

.announcement-strip__link:hover,
.announcement-strip__link:focus {
	color: var(--strip-text);
	text-decoration: none;
}

.announcement-strip__close {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	transform: translateY(-50%);
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--strip-text);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.8;
}

.announcement-strip__close:hover,
.announcement-strip__close:focus {
	background: transparent;
	color: var(--strip-text);
	opacity: 1;
}

/* ==========================================================================
   Page components (used by the block content of Home / About / Board)
   ========================================================================== */

/* GeneratePress caps/pads legacy group inner containers; our groups manage their own width */
.site-main .wp-block-group > .wp-block-group__inner-container {
	max-width: none;
	padding: 0;
}

/* --- Hero (Cover block, class "bbf-hero") --- */
.bbf-hero.wp-block-cover {
	/* !important: the block editor writes min-height inline on the cover */
	min-height: 650px !important;
	padding: 0;
	align-items: flex-start;
}

.bbf-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: none;
	padding: 56px var(--pad);
	text-align: left;
}

.bbf-hero.is-position-center-left {
	align-items: center;
}

.bbf-hero--plain.wp-block-cover {
	background-color: var(--line);
}

/* Title box over the hero photo */
.bbf-hero__box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 575px;
	max-width: 100%;
	min-height: 180px;
	margin-left: -40px;
	padding: 22px 28px;
	background: var(--accent);
	text-align: center;
}

.bbf-hero__box > .wp-block-group__inner-container {
	width: 100%;
}

.bbf-hero__box--brown {
	background: var(--brown);
}

.bbf-hero__box .bbf-hero__title {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 63px;
	text-transform: uppercase;
	color: #fff;
}

.bbf-hero__box .bbf-hero__sub {
	margin: 4px 0 0;
	font-size: 22px;
	font-weight: 400;
	line-height: 40px;
	color: #fff;
}

.bbf-hero--home .wp-block-cover__image-background {
	/* Bias toward the top so the subject's head isn't cropped under the nav */
	object-position: center 35%;
}

.bbf-hero--home .bbf-hero__script {
	position: relative;
	top: -26px;
	right: -115px;
	font-size: 80px;
}

.bbf-hero--home.wp-block-cover.has-custom-content-position,
.bbf-hero--board.wp-block-cover.has-custom-content-position {
	align-items: center;
}

.bbf-hero__lead {
	margin: 0;
	font-size: 28px;
	line-height: 40px;
	color: #000;
}

.bbf-hero__script {
	margin: 4px 0 0;
	font-family: var(--font-script);
	font-size: 44px;
	line-height: 1;
	color: #000;
}

/* --- Full-width message band --- */
.bbf-band {
	padding: 22px var(--pad);
	text-align: center;
}

.bbf-band--amber { background: var(--amber); }
.bbf-band--teal { background: var(--teal); }

.bbf-band p {
	margin: 0;
}

.bbf-band p {
	font-size: 22px;
	font-weight: 400;
	line-height: 30px;
}

.bbf-band--amber p {
	color: #000;
}

.bbf-band--teal p {
	color: #fff;
}

/* --- Intro: logo lockup + paragraph --- */
.bbf-intro.wp-block-columns {
	align-items: flex-start;
	gap: 48px;
	padding: 56px var(--pad) 40px;
	margin: 0;
}

/* Home + About: logo and intro text sit in a centered 1200px container */
.page .bbf-intro.wp-block-columns {
	width: min(1200px, calc(100% - 2 * var(--gutter)));
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

.bbf-intro p {
	margin: 0;
	font-size: 20px;
	line-height: 30px;
}

.bbf-lockup__script {
	display: block;
	font-family: var(--font-script);
	font-size: 34px;
	line-height: 1;
	color: var(--script-gold);
}

.bbf-lockup__sub {
	display: block;
	margin-top: 2px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 2px;
	color: var(--ink);
}

.bbf-lockup__sub span {
	font-weight: 400;
	color: var(--muted);
}

/* Buttons */
.wp-block-button.bbf-btn .wp-block-button__link.wp-element-button {
	margin-top: 18px;
	padding: 11px 24px;
	border-radius: 0;
	background: var(--accent);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.wp-block-button.bbf-btn .wp-block-button__link.wp-element-button:hover,
.wp-block-button.bbf-btn .wp-block-button__link.wp-element-button:focus {
	background: var(--ink);
	color: #fff;
}

/* --- Mission (About) --- */
.bbf-mission {
	padding: 0 var(--pad) 56px;
	text-align: center;
}

.bbf-mission h2 {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 56px;
	text-transform: uppercase;
	color: var(--amber-deep);
}

.bbf-mission p {
	max-width: 720px;
	margin: 12px auto 0;
	font-size: 22px;
	line-height: 32px;
}

/* --- Core values --- */
.bbf-values-head {
	padding: 0 var(--pad) 40px;
	text-align: center;
}

.bbf-values-head h2 {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 56px;
	text-transform: uppercase;
	color: var(--amber-deep);
}

.bbf-values-head p {
	max-width: 720px;
	margin: 12px auto 0;
	font-style: italic;
}

.bbf-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	padding: 0 var(--gutter) 64px;
}

.bbf-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 260px;
	max-width: 384px;
	min-height: 313px;
	padding: 28px 16px;
	text-align: center;
	color: #fff;
}

.bbf-card--amber { background: var(--amber); }
.bbf-card--brown { background: var(--brown); }

.bbf-card h3 {
	margin: 0;
	font-size: clamp(16px, 1.35vw, 25px);
	font-weight: 800;
	line-height: 30px;
	letter-spacing: clamp(2px, 0.35vw, 8px);
	text-transform: uppercase;
	color: #fff;
	overflow-wrap: break-word;
}

.page .entry-content .bbf-cards {
	flex-wrap: wrap;
	align-items: stretch;
}

/* Desktop: all four values on one line */
@media (min-width: 1100px) {
	.page .entry-content .bbf-cards {
		flex-wrap: nowrap;
	}
}

.bbf-card p {
	margin: 14px 0 0;
	font-size: 22px;
	line-height: 30px;
	color: #fff;
}

/* --- Home: sign-up / contact section --- */
.page .entry-content > .bbf-signup {
	margin: 0 var(--pad) 56px;
	padding: 48px 32px;
	background: #f6f3ee;
	text-align: center;
}

.bbf-signup h2 {
	margin: 0 0 8px;
	font-size: 32px;
	line-height: 1.2;
	color: var(--accent);
}

.bbf-signup > p {
	margin: 0 0 24px;
}

.bbf-signup .wpcf7 {
	max-width: 640px;
	margin: 0 auto;
	text-align: left;
}

.bbf-signup .wpcf7 input[type="text"],
.bbf-signup .wpcf7 input[type="email"],
.bbf-signup .wpcf7 input[type="tel"],
.bbf-signup .wpcf7 textarea {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 0;
	background: #fff;
}

.bbf-signup .wpcf7 p {
	margin: 0 0 18px;
}

.bbf-signup .wpcf7 input[type="submit"] {
	padding: 11px 24px;
	border: 0;
	border-radius: 0;
	background: var(--accent);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
}

.bbf-signup .wpcf7 input[type="submit"]:hover {
	background: var(--ink);
}

/* --- Board members --- */
.bbf-board {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0 var(--pad);
}

.bbf-member.wp-block-columns {
	gap: 32px;
	margin: 0;
	padding: 72px 0;
	border-bottom: 1px solid #eee;
}

.bbf-member:last-child {
	border-bottom: 0;
}

/* The photo column's width is set inline by the block editor (flex-basis:220px) */
.bbf-member > .wp-block-column:first-child {
	flex-basis: 400px !important;
}

.bbf-member .wp-block-image,
.bbf-member .wp-block-image img {
	margin: 0;
}

.bbf-member .wp-block-image img {
	width: 400px;
	height: 415px;
	object-fit: cover;
	object-position: center top;
}

.bbf-member__name {
	display: inline-block;
	margin: 0;
	padding: 9px 18px;
	background: var(--teal);
	color: #fff;
	font-size: 25px;
	font-weight: 800;
	line-height: 30px;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.bbf-member__role {
	margin: 10px 0 0;
	font-style: italic;
}

.bbf-member__bio {
	margin: 14px 0 0;
}

@media (max-width: 781px) {
	.bbf-hero__box {
		width: 300px;
		min-height: 120px;
		margin-left: 0;
		padding: 16px 20px;
	}

	.bbf-hero__box .bbf-hero__title {
		font-size: 26px;
		line-height: 36px;
	}

	.bbf-hero__box .bbf-hero__sub {
		font-size: 17px;
		line-height: 24px;
	}

	.bbf-hero__lead {
		font-size: 22px;
		line-height: 32px;
	}

	/* Home hero: keep the tagline in the open sky above the subjects, inside the viewport */
	.bbf-hero--home.wp-block-cover.has-custom-content-position {
		align-items: flex-start;
	}

	.bbf-hero--home .bbf-hero__script {
		top: -10px;
		right: -40px;
		font-size: 60px;
	}

	.bbf-band--amber p {
		font-size: 22px;
		line-height: 28px;
	}

	.bbf-mission h2,
	.bbf-values-head h2 {
		font-size: 30px;
		line-height: 42px;
	}

	.bbf-member__name {
		font-size: 20px;
		letter-spacing: 6px;
	}

	.bbf-member .wp-block-image img {
		width: 100%;
		max-width: 320px;
		height: auto;
		aspect-ratio: 400 / 415;
	}
}