/*
Theme Name: Beckenham Fireworks (Kadence)
Template: kadence
Author: Beckenham Charity Fireworks
Description: A fresh, modern redesign of the Beckenham Charity Fireworks site, built on the Kadence theme. Restyles colour, type and layout only; page content and media are untouched.
Version: 1.1.0
Text Domain: beckenham-fireworks-kadence
*/

/* ==========================================================================
   Self-hosted font
   ========================================================================== */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('fonts/manrope-variable.woff2') format('woff2');
}

/* ==========================================================================
   Brand tokens — re-point Kadence's own global palette so buttons, links,
   nav highlights and headings all follow automatically.
   ========================================================================== */
:root {
	--bf-cream: #fbf8f3;
	--bf-cream-soft: #f2ebe0;
	--bf-ink: #221d18;
	--bf-red: #c0392b;
	--bf-red-dark: #9a2e22;
	--bf-gold: #e3a23c;
	--bf-gold-deep: #b9791f;
	--bf-navy: #14151d;
	--bf-navy-soft: #1f212c;
	--bf-line: rgba(34, 29, 24, 0.1);
	--bf-shadow: 0 14px 34px -16px rgba(20, 14, 10, 0.35);
	--bf-shadow-sm: 0 6px 16px -8px rgba(20, 14, 10, 0.28);
	--bf-radius: 16px;
	--bf-font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--global-palette1: var(--bf-red);
	--global-palette2: var(--bf-red-dark);
	--global-palette3: var(--bf-ink);
	--global-palette4: #362f28;
	--global-palette5: #5c5650;
	--global-palette6: #8a8278;
	--global-palette7: var(--bf-cream-soft);
	--global-palette8: var(--bf-cream);
	--global-palette9: #ffffff;
	--global-palette15: var(--bf-gold);

	--global-body-font-family: var(--bf-font);
	--global-heading-font-family: var(--bf-font);

	/* VK Blocks colour slugs (normally supplied by the Lightning theme) */
	--wp--preset--color--vk-color-primary: var(--bf-red);
	--wp--preset--color--vk-color-primary-dark: var(--bf-red-dark);
	--wp--preset--color--vk-color-primary-vivid: var(--bf-red);

	/* Kadence's "large" text preset computes to 28-32px against a 17px body
	   size - far bigger than the Lightning theme's equivalent preset. Used
	   by content blocks marked "large" (e.g. the Accessibility page). */
	--global-font-size-large: 1.2rem;
	--wp--preset--font-size--large: 1.2rem;
}

body, input, select, optgroup, textarea {
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 800;
	letter-spacing: -0.01em;
}

a {
	text-decoration-thickness: 1.5px;
	text-underline-offset: 2px;
}

::selection {
	background: var(--bf-gold);
	color: var(--bf-navy);
}

/* ==========================================================================
   Header
   ========================================================================== */
#masthead,
#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: rgba(251, 248, 243, 0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--bf-line);
}

.site-title-wrap {
	display: flex;
	align-items: center;
}

.site-title {
	font-weight: 800;
}

.site-title::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 10px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--bf-gold), var(--bf-red) 75%);
	vertical-align: middle;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.01em;
	position: relative;
}

@media (min-width: 768px) {
	.main-navigation .primary-menu-container > ul > li.menu-item > a {
		font-size: 1rem;
	}
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:after {
	background: var(--bf-red) !important;
}

/* ==========================================================================
   Custom front-page hero (injected by functions.php, reuses an existing photo)
   ========================================================================== */
.bf-hero {
	position: relative;
	height: 460px;
	overflow: hidden;
	background: var(--bf-navy);
}

.bf-hero-slides {
	position: relative;
	width: 100%;
	height: 100%;
}

.bf-hero-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.2s ease;
}

.bf-hero-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.bf-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(1.05) contrast(1.03);
	transform: scale(1);
	transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
	.bf-hero-img.bf-zooming {
		animation: bf-hero-zoom 7s ease-out forwards;
	}
}

@keyframes bf-hero-zoom {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.06);
	}
}

.bf-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(10, 8, 6, 0.88) 0%, rgba(10, 8, 6, 0.4) 55%, rgba(10, 8, 6, 0.08) 100%);
}

.bf-hero-inner {
	position: relative;
	z-index: 1;
	padding: 3rem 1.5rem 3.5rem;
	max-width: var(--global-content-width, 1290px);
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

.bf-hero-eyebrow {
	color: var(--bf-gold);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.85rem;
	margin: 0 0 0.75rem;
}

.bf-hero-title {
	color: #fff;
	font-size: clamp(2.1rem, 5vw, 3.75rem);
	line-height: 1.05;
	margin: 0 0 0.9rem;
}

.bf-hero-title::after {
	content: '';
	display: block;
	width: 68px;
	height: 5px;
	margin-top: 1.1rem;
	border-radius: 3px;
	background: var(--bf-gold);
}

.bf-hero-caption {
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(1rem, 2vw, 1.35rem);
	margin: 0;
}

/* ==========================================================================
   Inner-page title / hero band (Kadence's native page-title feature)
   ========================================================================== */
.entry-hero.page-hero-section,
.entry-hero.page-hero-section .entry-hero-container-inner {
	background: var(--bf-navy);
	background-image: radial-gradient(ellipse at 15% 0%, rgba(227, 162, 60, 0.16), transparent 55%),
		radial-gradient(ellipse at 100% 100%, rgba(192, 57, 43, 0.22), transparent 55%);
}

.entry-hero.page-hero-section .entry-header {
	min-height: 0 !important;
	padding: 3.25rem 0;
}

/* Mailing List page (ID 465): photographic header, reusing an existing photo */
.page-id-465 .entry-hero.page-hero-section,
.page-id-465 .entry-hero.page-hero-section .entry-hero-container-inner {
	background-image: linear-gradient(0deg, rgba(10, 8, 6, 0.82) 0%, rgba(10, 8, 6, 0.55) 55%, rgba(10, 8, 6, 0.35) 100%),
		url('../../uploads/2024/09/crowd-banner.jpg');
	background-size: cover;
	background-position: center 65%;
}

/* FAQ page (ID 65): photographic header, image moved from top of content */
.page-id-65 .entry-hero.page-hero-section,
.page-id-65 .entry-hero.page-hero-section .entry-hero-container-inner {
	background-image: linear-gradient(0deg, rgba(10, 8, 6, 0.82) 0%, rgba(10, 8, 6, 0.55) 55%, rgba(10, 8, 6, 0.35) 100%),
		url('../../uploads/2024/09/banner-yellow-burst.jpg');
	background-size: cover;
	background-position: center 50%;
}

/* Food and Drink page (ID 107): photographic header, image moved from top of content */
.page-id-107 .entry-hero.page-hero-section,
.page-id-107 .entry-hero.page-hero-section .entry-hero-container-inner {
	background-image: linear-gradient(0deg, rgba(10, 8, 6, 0.82) 0%, rgba(10, 8, 6, 0.55) 55%, rgba(10, 8, 6, 0.35) 100%),
		url('../../uploads/2024/09/food-scroll-2.jpg');
	background-size: cover;
	background-position: center 50%;
}

/* Carers (ID 421) and Residents Ticket Application (ID 1433): same header photo as FAQ */
.page-id-421 .entry-hero.page-hero-section,
.page-id-421 .entry-hero.page-hero-section .entry-hero-container-inner,
.page-id-1433 .entry-hero.page-hero-section,
.page-id-1433 .entry-hero.page-hero-section .entry-hero-container-inner {
	background-image: linear-gradient(0deg, rgba(10, 8, 6, 0.82) 0%, rgba(10, 8, 6, 0.55) 55%, rgba(10, 8, 6, 0.35) 100%),
		url('../../uploads/2024/09/banner-yellow-burst.jpg');
	background-size: cover;
	background-position: center 50%;
}

/* Accessibility page (ID 138): breathing room between bullet points */
.page-id-138 .entry-content li {
	margin-bottom: 1rem;
}

/* The first bullet has a VK Blocks utility class forcing margin-bottom to 0,
   so the gap before the second bullet needs to come from its margin-top instead. */
.page-id-138 .entry-content li:nth-child(2) {
	margin-top: 1rem;
}

/* Accessibility page (ID 138): image moved from top of content */
.page-id-138 .entry-hero.page-hero-section,
.page-id-138 .entry-hero.page-hero-section .entry-hero-container-inner {
	background-image: linear-gradient(0deg, rgba(10, 8, 6, 0.82) 0%, rgba(10, 8, 6, 0.55) 55%, rgba(10, 8, 6, 0.35) 100%),
		url('../../uploads/2024/08/PXL_20231104_181108236-edited-1.jpg');
	background-size: cover;
	background-position: center 50%;
}

.entry-hero.page-hero-section .page-title .entry-title,
.entry-hero.page-hero-section .entry-title {
	color: #fff;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	margin: 0;
}

.entry-hero.page-hero-section .entry-title:after {
	content: '';
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 1rem;
	border-radius: 3px;
	background: var(--bf-gold);
}

.kadence-breadcrumbs,
.kadence-breadcrumbs a {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.82rem;
}

.kadence-breadcrumbs a:hover {
	color: var(--bf-gold);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
button, .button, .wp-block-button__link,
input[type="button"], input[type="reset"], input[type="submit"] {
	border-radius: 999px !important;
	font-family: var(--bf-font);
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: var(--bf-shadow-sm) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button:hover, .button:hover, .wp-block-button__link:hover,
input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: var(--bf-shadow) !important;
	filter: brightness(1.05);
}

input.ninja-forms-field[type="submit"],
button.ninja-forms-field {
	background: var(--bf-red) !important;
	border: none !important;
	color: #fff !important;
}

/* ==========================================================================
   Content spacing (Kadence's defaults are quite generous)
   ========================================================================== */

/* Home page (ID 14): Kadence's default 2rem paragraph gap is too loose for
   the short, list-like copy in the Location & Transport and Supporting our
   Community columns. */
#location-transport ~ p,
#supporting-community ~ p {
	margin-bottom: 1rem;
}
.content-area {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}

.entry-content-wrap {
	padding: 1.5rem 2rem;
}

/* ==========================================================================
   Content cards
   ========================================================================== */
.entry-content-wrap .wp-block-image img,
.entry-content-wrap .wp-block-cover {
	border-radius: var(--bf-radius);
}

.entry-content-wrap .vk_borderBox {
	border-radius: var(--bf-radius);
	background: linear-gradient(180deg, #fff, var(--bf-cream-soft));
	box-shadow: var(--bf-shadow-sm);
	border-width: 2px;
	padding: 1.25rem !important;
}

.entry-content-wrap .vk_borderBox_title {
	font-weight: 800;
	font-size: 1.15rem;
}

.entry-content-wrap .wp-block-table.is-style-regular table {
	border-radius: var(--bf-radius);
	overflow: hidden;
	box-shadow: var(--bf-shadow-sm);
	border-collapse: separate;
	border-spacing: 0;
}

.entry-content-wrap .wp-block-table.is-style-regular td {
	background: #fff;
	border-color: var(--bf-line);
	padding: 0.45rem 0.85rem;
}

.entry-content-wrap .wp-block-table.is-style-regular tr:nth-child(odd) td {
	background: var(--bf-cream-soft);
}

/* ==========================================================================
   Footer
   ========================================================================== */
#colophon {
	background: var(--bf-navy) !important;
	background-image: radial-gradient(ellipse at 85% 0%, rgba(227, 162, 60, 0.14), transparent 55%) !important;
	color: rgba(255, 255, 255, 0.82);
}

#colophon h6, #colophon .wp-block-heading {
	color: #fff;
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

#colophon p, #colophon li {
	color: rgba(255, 255, 255, 0.75);
}

#colophon a {
	color: #fff;
}

#colophon a:hover {
	color: var(--bf-gold);
}

#colophon .widget {
	margin-bottom: 14px;
}

.site-middle-footer-inner-wrap {
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
}

.site-bottom-footer-inner-wrap {
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}

#colophon .widget_media_image figure {
	display: inline-block;
	background: #fff;
	padding: 10px 14px;
	border-radius: 12px;
}

.footer-html-wrap, .footer-html-wrap a {
	color: rgba(255, 255, 255, 0.55) !important;
	font-size: 0.8rem;
}

/* ==========================================================================
   FAQ page - group each question with its own answer, with more space
   before the next question, instead of uniform gaps between every paragraph
   ========================================================================== */
.page-id-65 .entry-content p {
	margin-bottom: 0.5em;
}

.page-id-65 .entry-content p:has(> strong:only-child) {
	margin-top: 2em;
}

.page-id-65 .entry-content p:first-child {
	margin-top: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 767px) {
	.bf-hero {
		height: 340px;
	}

	.entry-hero.page-hero-section .entry-header {
		padding: 2.25rem 0;
	}
}