/* BFRC child theme — home / blog archive / single templates
   Minimal, warm, editorial aesthetic (cream/charcoal/terracotta),
   flat surfaces, thin hairline borders instead of heavy shadow/glass. */

/* Sourced from the site's Astra Global Palette (Customizer > Colors),
   not hardcoded — these track whatever palette is active there. */
:root {
	--bfrc-brand: var(--ast-global-color-0); /* Accent / Links */
	--bfrc-brand-dark: var(--ast-global-color-1); /* Links hover */
	--bfrc-heading: var(--ast-global-color-2); /* Heading */
	--bfrc-text: var(--ast-global-color-3); /* Body Text */
	--bfrc-surface: var(--ast-global-color-5); /* secondary surface */
	--bfrc-border: var(--ast-global-color-6); /* Borders */
	--bfrc-ink: var(--ast-global-color-2);
	--bfrc-cream: var(--ast-global-color-5);
	--bfrc-muted: color-mix(in srgb, var(--bfrc-text), transparent 35%);
	--bfrc-radius: 4px;
	--bfrc-font-display: 'Open Sans', Arial, sans-serif;
}

.bfrc-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Astra wraps page content in a max-width .ast-container even on
   "Plain Container" pages. Break each home section out to the full
   viewport width so its background can bleed edge-to-edge; the
   .bfrc-container inside each section keeps the actual content
   readable and centered. */
body {
	overflow-x: hidden;
}

body.home .bfrc-home > section {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.bfrc-section {
	padding: 88px 0;
}

.bfrc-section h2 {
	font-family: var(--bfrc-font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	margin-bottom: 10px;
}

.bfrc-section__lede {
	color: var(--bfrc-muted);
	margin-bottom: 36px;
}

/* ---------- Hero ---------- */
.bfrc-hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--bfrc-heading) center/cover no-repeat;
	color: #fff;
	overflow: hidden;
}

.bfrc-hero__overlay {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--bfrc-heading) 50%, transparent);
}

.bfrc-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 0 24px;
	margin: auto 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Astra applies its global Heading color straight to h1 elements;
   it beats inheriting #fff from .bfrc-hero, so force it explicitly. */
.bfrc-hero__content h1 {
	font-family: var(--bfrc-font-display);
	font-weight: 700;
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	line-height: 1.15;
	margin-bottom: 32px;
	color: #fff !important;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* ---------- Buttons (flat, editorial) ---------- */
.bfrc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 28px;
	border-radius: var(--bfrc-radius);
	border: 1px solid transparent;
	font-family: var(--bfrc-font-display);
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bfrc-btn--primary {
	color: #fff;
	background: var(--bfrc-brand);
	border-color: var(--bfrc-brand);
}

.bfrc-btn--primary:hover {
	background: var(--bfrc-brand-dark);
	border-color: var(--bfrc-brand-dark);
}

.bfrc-btn--primary:active {
	background: var(--bfrc-brand-dark);
	opacity: 0.85;
}

.bfrc-btn--primary:focus-visible {
	outline: 2px solid var(--bfrc-brand);
	outline-offset: 3px;
}

/* Hero sits on a photo, so its CTA gets a glassmorphic treatment instead
   of the flat brand fill — frosted white glass reads better over an image. */
.bfrc-hero .bfrc-btn--primary {
	padding: 17px 36px;
	font-size: 0.95rem;
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.bfrc-hero .bfrc-btn--primary:hover {
	background: rgba(255, 255, 255, 0.28);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.75);
}

/* ---------- Cards ---------- */
.bfrc-card-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}

.bfrc-card-grid--countries .bfrc-card,
.bfrc-card-grid--posts .bfrc-card {
	flex: 1 1 260px;
	max-width: calc(33.333% - 19px);
}

@media (max-width: 780px) {
	.bfrc-card-grid--countries .bfrc-card,
	.bfrc-card-grid--posts .bfrc-card {
		max-width: 100%;
	}
}

.bfrc-card {
	display: block;
	border-radius: var(--bfrc-radius);
	overflow: hidden;
	background: var(--ast-global-color-4);
	border: 1px solid var(--bfrc-border);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease;
}

.bfrc-card:hover {
	border-color: var(--bfrc-brand);
}

.bfrc-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--bfrc-surface) center/cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bfrc-muted);
}

.bfrc-card__play {
	opacity: 0.95;
}

.bfrc-card__body {
	display: block;
	padding: 16px 18px 18px;
}

.bfrc-card__title {
	display: block;
	font-family: var(--bfrc-font-display);
	font-weight: 700;
	margin-bottom: 4px;
}

.bfrc-card__meta,
.bfrc-card__excerpt {
	display: block;
	font-size: 0.9rem;
	color: var(--bfrc-muted);
}

/* ---------- About ---------- */
.bfrc-about__inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.bfrc-about__text {
	font-size: 1.05rem;
	line-height: 1.75;
}

.bfrc-about__tagline {
	font-family: var(--bfrc-font-display);
	font-weight: 700;
	font-size: 1.2rem;
	margin: 20px 0 24px;
}

/* ---------- CTA / Newsletter ---------- */
.bfrc-cta {
	background: var(--bfrc-cream);
	text-align: center;
}

.bfrc-cta__inner h2 {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.bfrc-newsletter {
	background: var(--bfrc-ink);
	color: #fff;
	text-align: center;
}

.bfrc-newsletter__inner p {
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 28px;
}

.bfrc-newsletter-form {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.bfrc-newsletter-form input[type="email"] {
	padding: 13px 18px;
	border-radius: var(--bfrc-radius);
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: transparent;
	color: #fff;
	width: 280px;
	max-width: 100%;
	flex: 0 1 280px;
}

.bfrc-newsletter-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.bfrc-newsletter .bfrc-btn--primary {
	background: #fff;
	color: var(--bfrc-ink);
	border-color: #fff;
}

.bfrc-newsletter .bfrc-btn--primary:hover {
	background: transparent;
	color: #fff;
}

.bfrc-form__notice {
	color: var(--bfrc-brand);
	font-weight: 600;
}

.bfrc-form__notice--error {
	color: #c0392b;
}

/* ---------- Modal ---------- */
.bfrc-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.bfrc-modal.is-open {
	display: flex;
}

.bfrc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--bfrc-heading) 55%, transparent);
}

.bfrc-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 480px;
	max-height: 86vh;
	overflow-y: auto;
	padding: 40px 36px;
	border-radius: var(--bfrc-radius);
	background: var(--ast-global-color-4);
	border: 1px solid var(--bfrc-border);
}

.bfrc-modal__panel h3 {
	font-family: var(--bfrc-font-display);
	font-weight: 500;
}

/* WPForms ships its own default (blue button, loose spacing) — tighten
   it up and bring it in line with the site's colors/type wherever a form
   is embedded (the connect modal, the contact page). */
:is(.bfrc-modal__panel, .bfrc-contact-split__inner) .wpforms-form {
	margin-top: 20px;
}

:is(.bfrc-modal__panel, .bfrc-contact-split__inner) .wpforms-field {
	margin-bottom: 14px !important;
	padding: 0 !important;
}

:is(.bfrc-modal__panel, .bfrc-contact-split__inner) .wpforms-field-label {
	margin-bottom: 4px !important;
	font-family: var(--bfrc-font-display);
	font-size: 0.9rem;
}

:is(.bfrc-modal__panel, .bfrc-contact-split__inner) .wpforms-field input[type="text"],
:is(.bfrc-modal__panel, .bfrc-contact-split__inner) .wpforms-field input[type="email"],
:is(.bfrc-modal__panel, .bfrc-contact-split__inner) .wpforms-field textarea {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	padding: 10px 12px !important;
	border: 1px solid var(--bfrc-border) !important;
	border-radius: var(--bfrc-radius) !important;
}

:is(.bfrc-modal__panel, .bfrc-contact-split__inner) .wpforms-field textarea {
	min-height: 90px;
}

:is(.bfrc-modal__panel, .bfrc-contact-split__inner) .wpforms-submit-container {
	margin-top: 6px !important;
}

:is(.bfrc-modal__panel, .bfrc-contact-split__inner) .wpforms-submit {
	background-color: var(--bfrc-brand) !important;
	border-color: var(--bfrc-brand) !important;
	border-radius: var(--bfrc-radius) !important;
	font-family: var(--bfrc-font-display);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
}

:is(.bfrc-modal__panel, .bfrc-contact-split__inner) .wpforms-submit:hover {
	background-color: var(--bfrc-brand-dark) !important;
	border-color: var(--bfrc-brand-dark) !important;
}

/* ---------- Contact page (split layout) ---------- */
.bfrc-contact-split {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	display: flex;
	flex-wrap: wrap;
	min-height: 80vh;
}

.bfrc-contact-split__image {
	flex: 1 1 480px;
	min-height: 420px;
	background-size: cover;
	background-position: center;
}

.bfrc-contact-split__form {
	flex: 1 1 480px;
	display: flex;
	align-items: center;
	padding: 64px clamp(24px, 6vw, 96px);
}

.bfrc-contact-split__inner {
	width: 100%;
	max-width: 480px;
}

.bfrc-contact-split__inner h1 {
	font-family: var(--bfrc-font-display);
	font-weight: 700;
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	margin-bottom: 16px;
}

.bfrc-contact-split__intro {
	color: var(--bfrc-muted);
	margin-bottom: 8px;
}

@media (max-width: 780px) {
	.bfrc-contact-split__image {
		min-height: 280px;
	}
}

.bfrc-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--bfrc-ink);
	padding: 6px;
}

/* ---------- Archive / Single ---------- */
.bfrc-archive {
	padding: 64px 0 88px;
}

.bfrc-archive__header {
	margin-bottom: 40px;
}

.bfrc-archive__header h1 {
	font-family: var(--bfrc-font-display);
	font-weight: 500;
}

.bfrc-breadcrumb {
	font-size: 0.85rem;
	color: var(--bfrc-muted);
	margin-bottom: 20px;
}

.bfrc-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.bfrc-breadcrumb a:hover {
	text-decoration: underline;
}

.bfrc-breadcrumb__sep {
	margin: 0 6px;
}

.bfrc-pagination {
	margin-top: 40px;
}

.bfrc-single {
	padding: 64px 0 88px;
	max-width: 860px;
}

.bfrc-single__title {
	font-family: var(--bfrc-font-display);
	font-weight: 700;
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	margin-bottom: 24px;
}

.bfrc-video {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--bfrc-radius);
	overflow: hidden;
	border: 1px solid var(--bfrc-border);
	margin-bottom: 24px;
	padding: 0;
	background: var(--bfrc-heading);
	cursor: pointer;
}

.bfrc-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.bfrc-video:hover .bfrc-video__poster {
	transform: scale(1.02);
}

.bfrc-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bfrc-video--channel {
	cursor: default;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.bfrc-video--channel iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.bfrc-videos__link {
	text-align: center;
	margin-top: 16px;
}

/* ---------- Video Lightbox ---------- */
.bfrc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.bfrc-lightbox.is-open {
	display: flex;
}

.bfrc-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--bfrc-heading) 90%, transparent);
}

.bfrc-lightbox__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1100px;
}

.bfrc-lightbox__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--bfrc-radius);
	overflow: hidden;
	background: #000;
}

.bfrc-lightbox__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.bfrc-lightbox__close {
	position: absolute;
	top: -48px;
	right: 0;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 8px;
}

@media (max-width: 600px) {
	.bfrc-lightbox__close {
		top: -40px;
	}
}

.bfrc-single__image img {
	width: 100%;
	height: auto;
	border-radius: var(--bfrc-radius);
	margin-bottom: 24px;
}

.bfrc-venue-box {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 20px;
	border-radius: var(--bfrc-radius);
	background: var(--bfrc-cream);
	margin-bottom: 24px;
}

.bfrc-venue-box__name {
	font-family: var(--bfrc-font-display);
	font-weight: 500;
	font-size: 1.05rem;
}

.bfrc-venue-box__addr {
	color: var(--bfrc-muted);
	font-size: 0.9rem;
}

.bfrc-single__content {
	font-size: 1.05rem;
	line-height: 1.8;
}

.bfrc-single__cta {
	margin-top: 40px;
}