/**
 * Fire & Frost editorial component styles.
 *
 * Shared classes applied via block "className" attributes in /patterns.
 * Colors are read from Kadence's Global Palette custom properties so they
 * stay in sync with inc/functions.php's forced palette; --ff-gold-light has
 * no palette slot of its own (it's a lighter tint used only for italic
 * accent words on dark backgrounds) so it's hardcoded here.
 */
:root {
	--ff-deep-green: var(--global-palette1, #1B4332);
	--ff-dark: var(--global-palette3, #1A1A18);
	--ff-mid: var(--global-palette5, #55574F);
	--ff-subtle-text: var(--global-palette6, #8A897E);
	--ff-cream: var(--global-palette7, #F4EFE6);
	--ff-off-white: var(--global-palette9, #FFFEFB);
	--ff-gold: var(--global-palette10, #C9A227);
	--ff-gold-light: #DDC077;
}

/* Eyebrow label: small uppercase tag preceded by a thin gold rule. */
.ff-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.ff-eyebrow::before {
	content: '';
	display: block;
	width: 32px;
	height: 1px;
	background: var(--ff-gold);
	flex-shrink: 0;
}
.ff-eyebrow--center {
	justify-content: center;
}
.ff-eyebrow--on-dark {
	color: var(--ff-gold-light);
}
.ff-eyebrow--on-light {
	color: var(--ff-deep-green);
}

/* Footer contact column: tighter spacing between the email and phone lines
   than Kadence's default paragraph margin. Each line renders as its own
   separate widget block (block-N wrapper), so this has to be scoped to the
   whole column (.footer-widget3), not one block's wrapper. */
.footer-widget3 p:not(.ff-eyebrow) {
	margin-top: 6px;
	margin-bottom: 6px;
}

/* Footer contact column: centre the Book Us button under the email/phone
   lines, matching their text-align: center. */
.footer-widget3 .wp-block-buttons {
	justify-content: center;
}

/* Italic accent word inside a heading, e.g. <em class="ff-accent-gold">. */
.ff-accent-gold {
	font-style: italic;
	color: var(--ff-gold-light);
}
.ff-accent-green {
	font-style: italic;
	color: var(--ff-deep-green);
}

/* Buttons: layered on top of Kadence's block-level color/background.
   Sized on the <a class="wp-block-button__link"> itself, not the
   .wp-block-button wrapper — Kadence's own button CSS targets the link
   directly with its own specificity, so setting size/padding on the
   wrapper only accidentally works for whichever variant Kadence doesn't
   also style explicitly (previously: solid buttons inherited it, outline
   buttons didn't, so a solid+outline pair rendered at two different
   sizes). All button text also gets a transparent 2px border so a
   borderless solid button occupies the exact same box as a 2px outline
   button placed next to it, instead of matching just font-size/padding
   and still differing by the border width. */
.ff-btn .wp-block-button__link,
.wp-block-button__link.has-theme-palette10-background-color,
.wp-block-button__link.has-theme-palette-10-background-color {
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	padding: 16px 34px !important;
	border-radius: 0 !important;
	border: 2px solid transparent !important;
	box-sizing: border-box !important;
	transition: transform 0.15s ease, opacity 0.2s ease !important;
}
.ff-btn:hover .wp-block-button__link {
	transform: translateY(-1px);
	opacity: 0.92;
}
/* Outline variant: restore a visible border (the base rule above sets a
   transparent one, purely so a borderless solid button matches an outline
   button's box size — outline buttons need their border back). Uses
   currentColor rather than a fixed color since each outline button's
   text/border color is already set per-block via Kadence's color panel
   (e.g. has-theme-palette9-color on a dark section, has-theme-palette3-color
   on a light one) and should keep tracking that, not a single hardcoded
   shade that would go invisible on one of the two background types. */
.ff-btn.is-style-outline .wp-block-button__link {
	border-color: currentColor !important;
}
/* Solid gold buttons (hero "View the Menu", CTA banner/contact/story "Book Us
   for Your Event", "Read Our Story", etc.) recolored to the paler gold-light
   accent used on italic heading words, instead of the more saturated
   palette10 gold. Matches on the color class directly (not just inside
   .ff-btn) since some published button blocks predate the ff-btn class. */
.wp-block-button__link.has-theme-palette10-background-color,
.wp-block-button__link.has-theme-palette-10-background-color {
	background-color: var(--ff-gold-light) !important;
}

/* Header nav: current-page highlight recolored to match the button/heading
   gold-light accent, instead of Kadence's default saturated palette10 gold. */
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a,
.secondary-navigation .secondary-menu-container > ul > li.menu-item.current-menu-item > a,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .header-menu-container > ul > li.current-menu-item > a,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .header-menu-container > ul > li.current_page_item > a,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .header-menu-container > ul > li.current_page_parent > a,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .header-menu-container > ul > li.current_page_ancestor > a {
	color: var(--ff-gold-light) !important;
}

/* Header nav: hover color, same gold-light match as the current-page state above. */
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.secondary-navigation .secondary-menu-container > ul > li.menu-item > a:hover,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .header-menu-container > ul > li > a:hover {
	color: var(--ff-gold-light) !important;
}

/* Footer nav menu: one link per row (stacked list) instead of Kadence's
   default wrapped inline row. Font/colour are untouched here (inherited
   from Kadence's nav settings); see the colour overrides below for the
   current-page and hover states. */
#colophon .footer-navigation .footer-menu-container > ul {
	flex-direction: column;
	align-items: center;
}

/* Footer nav: current-page highlight and hover, same gold-light match as the
   header nav overrides above (instead of Kadence's default saturated
   palette10 gold). */
#colophon .footer-navigation .footer-menu-container > ul > li.current-menu-item > a,
#colophon .footer-navigation .footer-menu-container > ul > li.current_page_item > a,
#colophon .footer-navigation .footer-menu-container > ul > li.current_page_parent > a,
#colophon .footer-navigation .footer-menu-container > ul > li.current_page_ancestor > a,
#colophon .footer-navigation .footer-menu-container > ul > li > a:hover {
	color: var(--ff-gold-light) !important;
}

/* Numbered card, e.g. the Two Trailers / What We Bring style cards. */
.ff-numbered-card {
	position: relative;
	border: 1px solid rgba(27, 67, 50, 0.12);
	padding: 40px 36px !important;
}
.ff-numbered-card .ff-card-num {
	font-family: var(--global-heading-font-family, 'Cormorant Garamond', serif);
	font-size: 14px;
	letter-spacing: 0.1em;
	color: var(--ff-gold);
	margin-bottom: 24px !important;
}
.ff-numbered-card--on-dark {
	border-color: rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
}

/* Badge overlay pinned to the corner of an image (e.g. a stat callout). */
.ff-image-badge-wrap {
	position: relative;
}
.ff-image-badge {
	position: absolute;
	bottom: -24px;
	left: -24px;
	background: var(--ff-deep-green);
	padding: 22px 26px;
	width: 150px;
	z-index: 2;
}
.ff-image-badge .ff-badge-num {
	font-family: var(--global-heading-font-family, 'Cormorant Garamond', serif);
	font-size: 38px;
	font-weight: 300;
	line-height: 1;
	color: var(--ff-gold-light);
	margin-bottom: 6px !important;
}
.ff-image-badge .ff-badge-label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.65);
}
@media (max-width: 782px) {
	.ff-image-badge {
		left: 0;
		bottom: -20px;
	}
}

/* Testimonial card: thin gold top rule, italic serif quote. */
.ff-testimonial-card {
	border-top: 2px solid var(--ff-gold);
	padding-top: 32px !important;
}
.ff-testimonial-card blockquote,
.ff-testimonial-card p.ff-quote {
	font-style: italic;
}
.ff-testimonial-author {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ff-subtle-text);
}

/* Divider row (event schedule / list rows) refinement. */
.ff-row-date {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
}
.ff-row-venue {
	font-family: var(--global-heading-font-family, 'Cormorant Garamond', serif);
	font-size: 20px;
	font-weight: 400;
}

/* Milestone timeline list (Our Story page). Borders are plain CSS classes
   on the row/list elements themselves, not WordPress block border
   attributes — see the story-section.php fix for why that matters. */
.ff-milestone-list {
	border-top: 1px solid rgba(27, 67, 50, 0.12);
	max-width: 760px;
	margin: 0 auto;
}
.ff-milestone-row {
	border-bottom: 1px solid rgba(27, 67, 50, 0.12);
	padding: 28px 0 !important;
}

/* Split hero: text column keeps the group's dark-green background; the
   image column fades into it from the left so the two feel like one panel. */
.ff-hero-cols {
	gap: 0 !important;
}
.ff-hero-text-col {
	padding: 60px 48px !important;
}
.ff-hero-media-col {
	position: relative;
	overflow: hidden;
	align-self: stretch !important;
	min-height: 480px;
}
.ff-hero-media-col img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.ff-hero-media-col::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, var(--ff-deep-green) 0%, transparent 35%);
}
@media (max-width: 782px) {
	.ff-hero-media-col {
		min-height: 260px;
	}
	.ff-hero-media-col::after {
		background: linear-gradient(to bottom, var(--ff-deep-green) 0%, transparent 45%);
	}
}

/* Hero image slider: each slide is a plain wp:image block, stacked and
   cross-faded on a CSS-only loop (no JS). Add/remove slides in the editor
   by duplicating/deleting an image block inside the media column — the
   nth-child delays below support up to 4; add a 5th rule if needed. */
.ff-hero-media-col .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	animation: ff-hero-crossfade 16s infinite;
}
.ff-hero-media-col .wp-block-image:nth-child(1) { animation-delay: 0s; }
.ff-hero-media-col .wp-block-image:nth-child(2) { animation-delay: 4s; }
.ff-hero-media-col .wp-block-image:nth-child(3) { animation-delay: 8s; }
.ff-hero-media-col .wp-block-image:nth-child(4) { animation-delay: 12s; }
@keyframes ff-hero-crossfade {
	0% { opacity: 0; }
	6.25% { opacity: 1; }
	18.75% { opacity: 1; }
	25% { opacity: 0; }
	100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ff-hero-media-col .wp-block-image {
		animation: none;
		opacity: 1;
	}
	.ff-hero-media-col .wp-block-image:not(:first-child) {
		display: none;
	}
}

/* Trust bar: 4-up row of icon + label + sub-label under the hero. */
.ff-trust-bar {
	border-bottom: 1px solid rgba(27, 67, 50, 0.12);
}
.ff-trust-item {
	display: flex;
	align-items: center;
	gap: 14px;
}
.ff-trust-icon {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	color: var(--ff-gold);
}
.ff-trust-label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ff-dark);
	margin: 0 0 2px !important;
}
.ff-trust-sub {
	font-size: 12px;
	color: var(--ff-subtle-text);
	margin: 0 !important;
}

/* Photo gallery grid: tall first cell spans two rows on desktop; the last
   cell is desktop-only, collapsing the grid to 2x3 on smaller screens.
   Kadence's Group block (constrained layout) wraps its children in an
   extra .wp-block-group__inner-container div, so the grid has to target
   that inner wrapper — the 7 images are its direct children, not the
   outer .ff-photo-grid div's. */
.ff-photo-grid > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	grid-auto-rows: 220px;
	gap: 3px;
}
.ff-photo-grid-item {
	overflow: hidden;
	position: relative;
	background: var(--ff-cream);
}
.ff-photo-grid-item.ff-tall {
	grid-row: span 2;
}
.ff-photo-grid-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ff-photo-desktop-only {
	display: block;
}
@media (max-width: 782px) {
	.ff-photo-grid > .wp-block-group__inner-container {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 160px;
	}
	.ff-photo-grid-item.ff-tall {
		grid-row: span 1;
	}
	.ff-photo-desktop-only {
		display: none;
	}
}

/* Star row above a testimonial quote. */
.ff-stars {
	display: flex;
	gap: 4px;
	margin-bottom: 18px;
}
.ff-stars svg {
	width: 14px;
	height: 14px;
	color: var(--ff-gold);
}

/* Scroll hint under a hero CTA: small label with a hanging vertical rule. */
.ff-scroll-hint {
	margin-top: 56px;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.35);
	display: flex;
	align-items: center;
	gap: 10px;
}
.ff-scroll-hint::after {
	content: '';
	display: block;
	width: 1px;
	height: 36px;
	background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Booking form (patterns/book-form.php) — full replica of the Three Hills
   Events enquiry form's structure, restyled to match Fire & Frost's fonts,
   colors and card language instead of its default pink/orange SaaS theme.
   This section sits on a light background (unlike the rest of the dark
   "form-section" pattern this replaced), since the real component is a
   light, card-based interface with many stacked interactive elements —
   translucent white-on-dark panels didn't hold up at this content density.
   ========================================================================== */

.ff-bkq-intro {
	max-width: 640px;
	margin: 0 auto 40px;
	text-align: center;
}
.ff-bkq-checklist {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 24px;
}
.ff-check-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--ff-mid);
}
.ff-check-circle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ff-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ff-check-circle svg {
	width: 9px;
	height: 9px;
	color: var(--ff-off-white);
}

.ff-bkq-wrap {
	max-width: 640px;
	margin: 0 auto;
}
.ff-bkq-loading {
	text-align: center;
	padding: 60px 20px;
	color: var(--ff-subtle-text);
	font-size: 14px;
}

.ff-form-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 32px;
}
.ff-step-pill {
	display: flex;
	align-items: center;
	gap: 8px;
}
.ff-step-num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
}
.ff-step-num.is-active {
	background: var(--ff-gold);
	color: var(--ff-off-white);
}
.ff-step-num.is-done {
	background: var(--ff-deep-green);
	color: var(--ff-off-white);
}
.ff-step-num.is-inactive {
	background: var(--ff-cream);
	color: var(--ff-subtle-text);
}
.ff-step-label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
}
.ff-step-label.is-active {
	color: var(--ff-dark);
}
.ff-step-label.is-inactive {
	color: var(--ff-subtle-text);
}
.ff-step-divider {
	width: 32px;
	height: 1px;
	background: rgba(27, 67, 50, 0.15);
}

/* Reset browser default button chrome for the interactive cards below —
   svc-card, opt-card, level-row and scoop-card are real <button> elements
   (not clickable divs) for keyboard focus/accessibility, but shouldn't look
   like buttons; each class already declares its own background/border. */
.ff-svc-card,
.ff-opt-card,
.ff-level-row,
.ff-scoop-card {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	width: 100%;
}

/* Each step-1 subsection ("What are you interested in?", "When is your
   event?", etc.) is its own white card, matching the reference's stacked
   rounded-card layout. */
.ff-bkq-section {
	background: var(--ff-off-white);
	border: 1px solid rgba(27, 67, 50, 0.08);
	border-radius: 16px;
	padding: 28px;
	margin-bottom: 20px;
	box-shadow: 0 2px 16px rgba(27, 67, 50, 0.05);
}
.ff-bkq-section h3 {
	font-family: var(--global-heading-font-family, 'Cormorant Garamond', serif);
	font-size: 22px;
	font-weight: 400;
	color: var(--ff-dark);
	margin: 0 0 4px;
}
.ff-bkq-section > p.ff-bkq-hint {
	font-size: 13px;
	color: var(--ff-subtle-text);
	margin: 0 0 20px;
}
.ff-bkq-section--nested {
	background: var(--ff-cream);
	border-radius: 12px;
	padding: 20px;
	margin-top: 16px;
	border: 1px solid rgba(27, 67, 50, 0.08);
}
.ff-bkq-nested-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ff-dark);
	margin-bottom: 16px;
}

/* Service selection cards (Gelato / Coffee / Hot Desserts). */
.ff-svc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.ff-svc-card {
	padding: 16px 10px;
	border: 2px solid rgba(27, 67, 50, 0.12);
	border-radius: 14px;
	cursor: pointer;
	transition: all 0.15s;
	text-align: center;
	background: var(--ff-off-white);
	font-family: 'DM Sans', sans-serif;
}
.ff-svc-card:hover {
	border-color: var(--ff-gold);
}
.ff-svc-card.is-selected {
	border-color: var(--ff-gold);
	background: rgba(201, 162, 39, 0.08);
}
.ff-svc-emoji {
	font-size: 28px;
	margin-bottom: 6px;
}
.ff-svc-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--ff-dark);
	margin-bottom: 4px;
}
.ff-svc-card.is-selected .ff-svc-label {
	color: var(--ff-deep-green);
}
.ff-svc-desc {
	font-size: 11px;
	color: var(--ff-subtle-text);
	line-height: 1.4;
}
.ff-svc-check {
	margin: 8px auto 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ff-gold);
	color: var(--ff-off-white);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Small option toggle cards (hot dessert choices, waffle discs yes/no). */
.ff-opt-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.ff-opt-card {
	padding: 12px 14px;
	border: 2px solid rgba(27, 67, 50, 0.12);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.15s;
	text-align: center;
	background: var(--ff-off-white);
	font-size: 13px;
	font-weight: 700;
	color: var(--ff-dark);
	font-family: 'DM Sans', sans-serif;
}
.ff-opt-card:hover {
	border-color: var(--ff-gold);
}
.ff-opt-card.is-selected {
	border-color: var(--ff-gold);
	background: rgba(201, 162, 39, 0.08);
	color: var(--ff-deep-green);
}

/* Service-level rows (radio-style, one per pricing tier). */
.ff-level-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border: 2px solid rgba(27, 67, 50, 0.12);
	border-radius: 12px;
	background: var(--ff-off-white);
	cursor: pointer;
	text-align: left;
	width: 100%;
	font-family: 'DM Sans', sans-serif;
	margin-bottom: 10px;
	transition: all 0.15s;
}
.ff-level-row:last-child {
	margin-bottom: 0;
}
.ff-level-row.is-selected {
	border-color: var(--ff-gold);
	background: rgba(201, 162, 39, 0.08);
}
.ff-level-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--ff-dark);
	margin-bottom: 2px;
}
.ff-level-row.is-selected .ff-level-name {
	color: var(--ff-deep-green);
}
.ff-level-desc {
	font-size: 12px;
	color: var(--ff-subtle-text);
	line-height: 1.4;
}
.ff-level-dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid rgba(27, 67, 50, 0.2);
	background: var(--ff-off-white);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ff-level-row.is-selected .ff-level-dot {
	border-color: var(--ff-gold);
	background: var(--ff-gold);
}
.ff-level-dot::after {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ff-off-white);
	display: none;
}
.ff-level-row.is-selected .ff-level-dot::after {
	display: block;
}

/* Scoop-count cards. */
.ff-scoop-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ff-scoop-card {
	flex: 1 1 calc(33% - 8px);
	min-width: 90px;
	padding: 14px 12px;
	border: 2px solid rgba(27, 67, 50, 0.12);
	border-radius: 12px;
	background: var(--ff-off-white);
	cursor: pointer;
	text-align: center;
	transition: all 0.15s;
	font-family: 'DM Sans', sans-serif;
}
.ff-scoop-card.is-selected {
	border-color: var(--ff-gold);
	background: rgba(201, 162, 39, 0.08);
}
.ff-scoop-emoji {
	font-size: 18px;
	margin-bottom: 4px;
}
.ff-scoop-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--ff-dark);
}
.ff-scoop-card.is-selected .ff-scoop-label {
	color: var(--ff-deep-green);
}
.ff-scoop-desc {
	font-size: 11px;
	color: var(--ff-subtle-text);
	margin-top: 3px;
	line-height: 1.4;
}

.ff-form-group {
	margin-bottom: 22px;
}
.ff-form-group label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ff-subtle-text);
	margin-bottom: 8px;
}
.ff-form-group input,
.ff-form-group select,
.ff-form-group textarea {
	width: 100%;
	padding: 13px 14px;
	border: 2px solid rgba(27, 67, 50, 0.12);
	background: var(--ff-off-white);
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	color: var(--ff-dark);
	outline: none;
	transition: border-color 0.2s;
	-webkit-appearance: none;
	border-radius: 10px;
}
.ff-form-group input::placeholder,
.ff-form-group textarea::placeholder {
	color: rgba(27, 67, 50, 0.3);
}
.ff-form-group input:focus,
.ff-form-group select:focus,
.ff-form-group textarea:focus {
	border-color: var(--ff-gold);
}
.ff-form-group input.ff-err,
.ff-form-group select.ff-err,
.ff-form-group textarea.ff-err {
	border-color: #ef4444;
	background: #fef2f2;
}
.ff-form-group textarea {
	height: 90px;
	resize: none;
}
.ff-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.ff-field-error {
	font-size: 11px;
	color: #ef4444;
	margin-top: 4px;
	display: block;
}

.ff-form-submit {
	width: 100%;
	background: var(--ff-deep-green);
	color: var(--ff-off-white);
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 16px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: opacity 0.2s, transform 0.15s;
	margin-top: 4px;
}
.ff-form-submit:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}
.ff-form-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}
.ff-form-back {
	background: none;
	border: none;
	color: var(--ff-subtle-text);
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	cursor: pointer;
	padding: 12px 0 0;
	display: block;
	width: 100%;
	text-align: center;
	transition: color 0.2s;
}
.ff-form-back:hover {
	color: var(--ff-dark);
}
.ff-form-fine {
	font-size: 12px;
	color: var(--ff-subtle-text);
	text-align: center;
	margin-top: 16px;
}

.ff-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.ff-cal-nav-btn {
	width: 34px;
	height: 34px;
	border: 2px solid rgba(27, 67, 50, 0.12);
	border-radius: 10px;
	background: var(--ff-off-white);
	color: var(--ff-dark);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: background 0.15s;
}
.ff-cal-nav-btn:hover {
	background: var(--ff-cream);
}
.ff-cal-month-label {
	font-family: var(--global-heading-font-family, 'Cormorant Garamond', serif);
	font-size: 18px;
	font-weight: 500;
	color: var(--ff-dark);
}
.ff-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.ff-cal-day-name {
	text-align: center;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--ff-subtle-text);
	padding: 4px 0 8px;
	text-transform: uppercase;
}
.ff-cal-day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	color: var(--ff-mid);
	transition: all 0.15s;
	position: relative;
	border: 2px solid transparent;
	border-radius: 10px;
}
.ff-cal-day:hover:not(.ff-cal-past):not(.ff-cal-empty) {
	border-color: var(--ff-gold);
	color: var(--ff-deep-green);
}
.ff-cal-day.ff-cal-selected {
	background: var(--ff-gold);
	color: var(--ff-off-white);
	font-weight: 700;
}
.ff-cal-day.ff-cal-booked {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}
.ff-cal-day.ff-cal-booked.ff-cal-selected {
	background: #ef4444;
	color: var(--ff-off-white);
}
.ff-cal-day.ff-cal-today {
	font-weight: 700;
	color: var(--ff-deep-green);
}
.ff-cal-day.ff-cal-past {
	color: rgba(27, 67, 50, 0.2);
	cursor: default;
}
.ff-cal-day.ff-cal-empty {
	cursor: default;
}
.ff-cal-legend {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 14px;
}
.ff-cal-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--ff-subtle-text);
}
.ff-cal-legend-dot {
	width: 12px;
	height: 12px;
	border-radius: 4px;
}
.ff-availability-note {
	margin-top: 16px;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 13px;
}
.ff-availability-note.is-ok {
	background: rgba(22, 163, 74, 0.08);
	border: 1px solid rgba(22, 163, 74, 0.25);
	color: #16a34a;
	font-weight: 600;
}
.ff-availability-note.is-booked {
	background: rgba(234, 88, 12, 0.08);
	border: 1px solid rgba(234, 88, 12, 0.25);
}
.ff-availability-note.is-booked p:first-child {
	margin: 0 0 4px;
	color: #c2410c;
	font-weight: 600;
}
.ff-availability-note.is-booked p:last-child {
	margin: 0;
	color: #ea580c;
	line-height: 1.5;
}

.ff-form-summary {
	background: var(--ff-cream);
	border: 1px solid rgba(27, 67, 50, 0.1);
	border-radius: 14px;
	padding: 18px 20px;
	margin-bottom: 24px;
}
.ff-form-summary p {
	font-size: 13px;
	color: var(--ff-mid);
	margin: 0 0 4px;
}
.ff-form-summary strong {
	color: var(--ff-deep-green);
	font-weight: 700;
}
.ff-form-summary button {
	background: none;
	border: none;
	color: var(--ff-gold);
	font-size: 12px;
	font-weight: 600;
	font-family: 'DM Sans', sans-serif;
	cursor: pointer;
	padding: 8px 0 0;
	letter-spacing: 0.03em;
}

.ff-form-success {
	text-align: center;
	padding: 40px 20px;
}
.ff-form-success h3 {
	font-family: var(--global-heading-font-family, 'Cormorant Garamond', serif);
	font-size: 32px;
	font-weight: 400;
	color: var(--ff-dark);
	margin: 20px 0 12px;
}
.ff-form-success p {
	font-size: 15px;
	color: var(--ff-mid);
	line-height: 1.7;
}

@media (max-width: 600px) {
	.ff-form-row,
	.ff-svc-grid,
	.ff-opt-grid {
		grid-template-columns: 1fr;
	}
	.ff-bkq-section {
		padding: 20px;
	}
}

/* Thin gold rule separating the dark-green header/footer (forced in
 * inc/functions.php) from the page content, using the lighter secondary
 * gold tint so it reads clearly against that dark background. */
#main-header,
#mobile-header {
	border-bottom: 1px solid var(--ff-gold-light);
}
/* Kadence's sticky header is a separate inner row (.kadence-sticky-header)
 * that switches to position:fixed on scroll, detached from #main-header —
 * it needs its own border so the line doesn't disappear once stuck. */
.kadence-sticky-header.item-is-stuck {
	border-bottom: 1px solid var(--ff-gold-light);
}
.site-footer-wrap {
	border-top: 1px solid var(--ff-gold-light);
}

/* Bottom footer row: copyright (column 1) + legal links (column 2, added
 * via footer_items/footer_bottom_columns in functions.php) render as
 * separate side-by-side flex columns by default. Stacking them and
 * centering both puts the policy links directly under the copyright line
 * instead of off to the right in their own column. */
.site-bottom-footer-inner-wrap {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px;
}
.site-bottom-footer-inner-wrap .site-footer-bottom-section-1,
.site-bottom-footer-inner-wrap .site-footer-bottom-section-2 {
	width: 100%;
	text-align: center;
}
.site-bottom-footer-inner-wrap .footer-html {
	justify-content: center;
}