/* ==========================================================================
   5 StarPizza — main stylesheet
   ========================================================================== */

/* -- Fonts (self-hosted, latin + latin-ext for ä/ö/å) -------------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/fraunces-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/fraunces-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/fraunces-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/fraunces-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Fraunces';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/fraunces-600i-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/fraunces-600i-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -- Tokens ---------------------------------------------------------------- */
/*
 * Brand palette — single source of truth, mirrored in theme.json's
 * settings.color.palette. Black/red/yellow must read as the dominant
 * brand palette at a glance: black/dark are the primary dark surfaces
 * (nav, hero, footer, considered dark accents), red drives primary
 * actions and strong accents, yellow is reserved for secondary actions,
 * active states and small highlights — never as text on a light
 * background (FFC400 on white is ~1.6:1, far under AA). Warm light
 * (cream / yellow-light) is the content-section background; white is
 * only ever used as text on dark surfaces or as an alternating section
 * background.
 *
 * --fsp-muted-dark (#D6D6D6) is a light grey for secondary text ON DARK
 * backgrounds only. --fsp-muted (#5F5F5F) is its light-background
 * counterpart. Every hex/rgba value used more than once lives only here
 * and in theme.json — nowhere else in the theme should a colour be
 * hardcoded.
 */
:root {
	--fsp-black: #0B0B0B;
	--fsp-dark: #151A20;
	--fsp-red: #D71920;
	--fsp-red-dark: #A81016;
	--fsp-yellow: #FFC400;
	--fsp-yellow-light: #FFF0A3;
	--fsp-cream: #FFF7E0;
	--fsp-white: #FFFFFF;
	--fsp-text: #171717;
	--fsp-muted: #5F5F5F;
	--fsp-border: #DDD4BC;

	/* Supplementary tokens: not part of the named brand palette, but
	   needed for dark-surface hover/hairline states the palette above
	   doesn't cover on its own. */
	--fsp-yellow-dark: #D1A000;
	--fsp-muted-dark: #D6D6D6;
	--fsp-border-dark: rgba(255, 255, 255, 0.16);
	--fsp-border-dark-strong: rgba(255, 255, 255, 0.4);

	--fsp-font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
	--fsp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--fsp-header-h: 4.5rem;
	--fsp-mobile-bar-h: 4rem;
	--fsp-radius: 1.25rem;
	--fsp-radius-sm: 0.65rem;
	--fsp-container: 1200px;
	--fsp-content: 1160px;
}

/* -- Reset / base ------------------------------------------------------ */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-padding-top: calc(var(--fsp-header-h) + 0.75rem);
}

/* Explicit scroll-margin-top on every anchor-linked section too, as a
   robust fallback next to scroll-padding-top above — without it, a
   section's own top padding can put its heading right at (or under) the
   fixed nav's bottom edge when the browser scrolls the hash target into
   view. WordPress only adds body.admin-bar and the fixed #wpadminbar for
   logged-in users, so the extra offset below only ever applies then. */
#home,
#about,
#hours,
#menu,
#reviews,
#contact {
	scroll-margin-top: calc(var(--fsp-header-h) + 0.75rem);
}

body.admin-bar #home,
body.admin-bar #about,
body.admin-bar #hours,
body.admin-bar #menu,
body.admin-bar #reviews,
body.admin-bar #contact {
	scroll-margin-top: calc(var(--fsp-header-h) + 32px + 0.75rem);
}

@media (max-width: 782px) {
	body.admin-bar #home,
	body.admin-bar #about,
	body.admin-bar #hours,
	body.admin-bar #menu,
	body.admin-bar #reviews,
	body.admin-bar #contact {
		scroll-margin-top: calc(var(--fsp-header-h) + 46px + 0.75rem);
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	background: var(--fsp-cream);
	color: var(--fsp-text);
	font-family: var(--fsp-font-body);
	font-size: 1.125rem;
	line-height: 1.6;
	overflow-x: hidden;
	margin: 0;
}

img {
	max-width: 100%;
	display: block;
}

/* WordPress core gives every child of .wp-site-blocks a 24px
   margin-block-start except the very first one — and <main> is the
   SECOND child (after the <header> template part), so it silently
   inherits that 24px. Since the header is position: fixed (it
   contributes no height to the flow), that 24px rendered as a bare gap
   of the body's own cream background between the nav and the hero. */
.fsp-main {
	margin-block-start: 0;
}

a {
	color: inherit;
}

.fsp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 3px solid var(--fsp-red);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Everything living on a dark (black) surface gets a yellow ring instead
   — red-on-near-black only just clears 3:1, yellow clears it by a wide
   margin (12.3:1), so focus stays unmistakably visible there too. */
.fsp-header :focus-visible,
.fsp-footer :focus-visible,
.fsp-hero :focus-visible,
.fsp-italian__panel :focus-visible,
.fsp-mobile-bar :focus-visible {
	outline-color: var(--fsp-yellow);
}

h1, h2, h3, h4 {
	font-family: var(--fsp-font-display);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: var(--fsp-text);
}

p {
	margin: 0 0 1em;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fsp-main section {
	padding: 3.5rem 1.25rem;
}

@media (min-width: 782px) {
	.fsp-main section {
		padding: 5.5rem 1.5rem;
	}
}

.fsp-eyebrow {
	font-family: var(--fsp-font-body);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fsp-red);
	margin-bottom: 0.75rem;
}

.fsp-section-title {
	font-size: clamp(2rem, 3.4vw, 2.6rem);
	max-width: 30ch;
}

.fsp-section-lede {
	max-width: 60ch;
	color: var(--fsp-muted);
	font-size: 1.125rem;
}

/* -- Buttons ------------------------------------------------------------- */
.fsp-btn,
.wp-block-button.fsp-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.85rem 1.6rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	border: 2px solid transparent;
	transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.fsp-btn,
	.wp-block-button.fsp-btn .wp-block-button__link {
		transition: none;
	}
}

.fsp-btn:active,
.wp-block-button.fsp-btn .wp-block-button__link:active {
	transform: scale(0.97);
}

.fsp-btn--primary,
.wp-block-button.fsp-btn--primary .wp-block-button__link {
	background: var(--fsp-red);
	color: var(--fsp-white);
	border-color: var(--fsp-red);
}

.fsp-btn--primary:hover,
.wp-block-button.fsp-btn--primary .wp-block-button__link:hover {
	background: var(--fsp-red-dark);
	border-color: var(--fsp-red-dark);
}

/* The page-wide focus ring is red — invisible against this button's own
   red background, so it needs a light outline here specifically. */
.fsp-btn--primary:focus-visible,
.wp-block-button.fsp-btn--primary .wp-block-button__link:focus-visible {
	outline-color: var(--fsp-white);
}

/* Secondary action (e.g. "Soita ja tilaa" next to the primary "Katso
   menu"): yellow background, black text — black clears AA on yellow by
   a wide margin (12.3:1), same rule as everywhere else yellow carries
   text. */
.fsp-btn--secondary,
.wp-block-button.fsp-btn--secondary .wp-block-button__link {
	background: var(--fsp-yellow);
	color: var(--fsp-black);
	border-color: var(--fsp-yellow);
}

.fsp-btn--secondary:hover,
.wp-block-button.fsp-btn--secondary .wp-block-button__link:hover {
	background: var(--fsp-yellow-dark);
	border-color: var(--fsp-yellow-dark);
}

/* The default focus ring is red, which only just clears 3:1 against this
   button's yellow background — black clears it with a wide margin. */
.fsp-btn--secondary:focus-visible,
.wp-block-button.fsp-btn--secondary .wp-block-button__link:focus-visible {
	outline-color: var(--fsp-black);
}

.fsp-btn--outline,
.wp-block-button.fsp-btn--outline .wp-block-button__link {
	background: transparent;
	color: var(--fsp-black);
	border-color: var(--fsp-black);
}

.fsp-btn--outline:hover,
.wp-block-button.fsp-btn--outline .wp-block-button__link:hover {
	background: var(--fsp-black);
	color: var(--fsp-white);
}

.fsp-icon {
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
}

/* -- Header / navigation -------------------------------------------------- */
.fsp-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	background: var(--fsp-black);
	border-bottom: 1px solid var(--fsp-border-dark);
}

.fsp-header__inner {
	width: 100%;
	max-width: var(--fsp-container);
	box-sizing: border-box;
	margin: 0 auto;
	height: var(--fsp-header-h);
	padding: 0 1.25rem;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.fsp-header__logo {
	display: inline-flex;
	align-items: center;
	font-family: var(--fsp-font-display);
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--fsp-white);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.fsp-header__logo-image {
	display: block;
	height: 2.5rem;
	width: auto;
}

@media (min-width: 1024px) {
	.fsp-header__logo {
		font-size: 1.75rem;
	}

	.fsp-header__logo-image {
		height: 2.75rem;
	}
}

.fsp-nav {
	display: none;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.fsp-nav__list {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	min-width: 0;
	gap: 1.5rem;
}

.fsp-nav__list a {
	text-decoration: none;
	font-weight: 500;
	font-size: 0.94rem;
	color: var(--fsp-white);
	padding: 0.4rem 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.fsp-nav__list a:hover,
.fsp-nav__list a:focus-visible {
	color: var(--fsp-yellow);
	border-color: var(--fsp-yellow);
}

.fsp-header__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.75rem;
}

.fsp-header__social {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--fsp-white);
	transition: color 0.15s ease;
}

.fsp-header__social:hover,
.fsp-header__social:focus-visible {
	color: var(--fsp-yellow);
}

.fsp-header__social .fsp-icon {
	width: 1.2em;
	height: 1.2em;
}

.fsp-header__cta {
	display: none;
}

.fsp-header__cta span {
	white-space: nowrap;
}

.fsp-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--fsp-radius-sm);
	border: 1px solid var(--fsp-border-dark-strong);
	background: transparent;
	color: var(--fsp-white);
	cursor: pointer;
}

.fsp-nav-toggle__icon {
	position: relative;
	width: 22px;
	height: 22px;
	display: inline-block;
}

.fsp-nav-toggle__icon svg {
	position: absolute;
	inset: 0;
	width: 22px;
	height: 22px;
}

.fsp-nav-toggle__close {
	opacity: 0;
	transform: rotate(-90deg) scale(0.7);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.fsp-nav-toggle__open {
	opacity: 1;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.fsp-nav-toggle[aria-expanded="true"] .fsp-nav-toggle__open {
	opacity: 0;
}

.fsp-nav-toggle[aria-expanded="true"] .fsp-nav-toggle__close {
	opacity: 1;
	transform: rotate(0) scale(1);
}

.fsp-mobile-nav {
	max-width: var(--fsp-container);
	margin: 0 auto;
	padding: 0.5rem 1.25rem 1.5rem;
	border-top: 1px solid var(--fsp-border-dark);
}

.fsp-mobile-nav[hidden] {
	display: none;
}

.fsp-mobile-nav__list {
	display: flex;
	flex-direction: column;
}

.fsp-mobile-nav__list a {
	display: block;
	padding: 0.9rem 0.25rem;
	font-size: 1.05rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--fsp-white);
	border-bottom: 1px solid var(--fsp-border-dark);
	min-height: 44px;
}

.fsp-mobile-nav__list a:hover,
.fsp-mobile-nav__list a:focus-visible {
	color: var(--fsp-yellow);
}

.fsp-mobile-nav__cta {
	margin-top: 1rem;
	width: 100%;
}

@media (min-width: 1024px) {
	.fsp-header__inner {
		padding: 0 1.25rem;
		gap: clamp(1rem, 2vw, 2rem);
	}

	.fsp-nav {
		display: block;
	}

	.fsp-header__social {
		display: inline-flex;
	}

	.fsp-nav__list {
		gap: clamp(0.85rem, 1.3vw, 1.5rem);
	}

	.fsp-nav__list a {
		font-size: clamp(0.85rem, 0.4vw + 0.78rem, 0.94rem);
	}

	.fsp-header__cta {
		display: inline-flex;
		min-height: 42px;
		padding: 0.6rem 1.2rem;
		font-size: 0.9rem;
	}

	.fsp-header__cta .fsp-icon {
		width: 1em;
		height: 1em;
	}

	.fsp-nav-toggle {
		display: none;
	}

	.fsp-mobile-nav {
		display: none !important;
	}
}

/* -- Hero -------------------------------------------------------------------
 * Full-bleed dark hero, built as a single visual unit rather than two
 * separate boxes: the photo sits absolutely inside the section (behind
 * a soft dark scrim) and the content column overlays it, both sharing
 * the section's own black background so there's no hard seam anywhere.
 * Mobile stacks the two (content, then the photo) instead of overlaying
 * them, so legibility never depends on the scrim alone there.
 * ------------------------------------------------------------------- */
.fsp-hero {
	position: relative;
	background: var(--fsp-black);
	color: var(--fsp-white);
	padding-top: var(--fsp-header-h) !important;
	overflow: hidden;
}

.fsp-hero__image {
	position: relative;
	margin: 0;
	height: 15rem;
	background: var(--fsp-black);
}

.fsp-hero__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.fsp-hero__scrim {
	position: absolute;
	inset: 0;
	/* Fades from the section's own black at the top into the photo, so
	   the image reads as emerging from the hero rather than sitting in
	   a separate rounded card. */
	background: linear-gradient(to bottom, var(--fsp-black) 0%, rgba(11, 11, 11, 0.35) 22%, rgba(11, 11, 11, 0) 55%, rgba(11, 11, 11, 0.85) 100%);
}

/* Decorative logo badge, top-right corner of the hero photo only — the
   photo's top area there is plain background (not the pizza itself),
   so nothing important is ever covered. logo.png is a transparent PNG
   (no background plate baked in), so it sits directly on the photo with
   no extra backer needed — it never reads as a rectangular sticker.
   Mobile: .fsp-hero__image is a normal-flow block that already sits
   below the nav, so a plain corner offset is enough. */
.fsp-hero__brand {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 1;
	width: clamp(72px, 20vw, 90px);
}

.fsp-hero__brand-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

@media (min-width: 768px) {
	.fsp-hero__brand {
		top: 18px;
		right: 18px;
		width: clamp(96px, 14vw, 130px);
	}
}

.fsp-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--fsp-content);
	margin: 0 auto;
	padding: 3.25rem 1.25rem 3rem;
}

/* WordPress core's own "is-layout-flow" block-gap CSS
   (:where(.is-layout-flow) > * { margin-block-start: 24px }) adds an
   unaccounted 24px above every direct child of .fsp-hero__content on
   top of this file's own margins, stacking into ~120px of unintended
   empty space through the hero. Zero it out here so each element's own
   margin-bottom (below) is the only thing controlling the rhythm. */
.fsp-hero__content > * {
	margin-block-start: 0;
}

.fsp-hero__eyebrow {
	color: var(--fsp-yellow);
}

.fsp-hero__title {
	color: var(--fsp-white);
	font-size: clamp(2.5rem, 9vw, 3.25rem);
	margin-bottom: 0.25em;
}

.fsp-hero__tagline {
	max-width: 34ch;
	font-size: 1.125rem;
	color: var(--fsp-white);
	margin-bottom: 1.25rem;
}

.fsp-hero__actions {
	margin-top: 1.5rem !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

.fsp-hero__actions .wp-block-button {
	margin: 0;
}

/* Compact mobile CTAs. The shared .fsp-btn rule above (further up this
   file) applies its padding/min-height to BOTH the outer
   .wp-block-button wrapper AND the inner .wp-block-button__link — by
   design, for the plain-<a>.fsp-btn case elsewhere on the site — but for
   a Gutenberg button block like these two, that nests two full-size
   pills (wrapper padding around an already-full-size inner pill),
   roughly doubling the visible height. Here the wrapper is stripped
   back to a plain flex item with no box of its own, and only the inner
   link gets the actual pill styling, at the requested compact size.
   flex: 1 1 0% with the browser's default min-width: auto keeps both
   buttons the same width without ever truncating their text — a button
   only gives up its equal share once the other one needs more just to
   fit its own label, so they stay side by side down to ~375px and wrap
   to their own (still compact, not full-width) line around 320px. */
@media (max-width: 559px) {
	.fsp-hero__actions {
		gap: 0.65rem;
	}

	.fsp-hero__actions .fsp-btn {
		flex: 1 1 0%;
		display: flex;
		width: auto;
		min-height: 0;
		padding: 0;
		margin: 0;
		background: none;
		border: 0;
	}

	.fsp-hero__actions .fsp-btn .wp-block-button__link {
		flex: 1 1 auto;
		width: auto;
		min-height: 48px;
		padding: 12px 20px;
		font-size: 1rem;
		font-weight: 700;
		white-space: nowrap;
	}
}

.fsp-hero__meta {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--fsp-border-dark);
}

.fsp-hero__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1rem;
	font-weight: 500;
	color: var(--fsp-white);
	text-decoration: none;
}

.fsp-hero__meta-item .fsp-icon {
	color: var(--fsp-yellow);
	flex-shrink: 0;
}

.fsp-hero__meta-phone {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.fsp-hero__meta-phone:hover,
.fsp-hero__meta-phone:focus-visible {
	color: var(--fsp-yellow);
}

@media (min-width: 560px) {
	.fsp-hero__actions {
		flex-wrap: nowrap;
	}

	.fsp-hero__actions .fsp-btn {
		width: auto;
	}

	.fsp-hero__meta {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 2rem;
	}
}

@media (min-width: 900px) {
	.fsp-hero {
		min-height: clamp(560px, 40vw, 680px);
		display: flex;
		align-items: stretch;
	}

	.fsp-hero__image {
		position: absolute;
		inset: 0 0 0 auto;
		left: 38%;
		width: 62%;
		height: 100%;
	}

	.fsp-hero__scrim {
		background: linear-gradient(to right, var(--fsp-black) 0%, rgba(11, 11, 11, 0.92) 12%, rgba(11, 11, 11, 0.55) 32%, rgba(11, 11, 11, 0.1) 58%, rgba(11, 11, 11, 0) 75%);
	}

	/* .fsp-hero__image is absolutely positioned (inset: 0) from here on,
	   so its own top:0 sits at the literal top of the section — behind
	   the fixed nav, not below it. The badge's offset must therefore be
	   measured from the header height, not from the image's own edge,
	   or it would render hidden under the nav. */
	.fsp-hero__brand {
		top: calc(var(--fsp-header-h) + 20px);
	}

	.fsp-hero__inner {
		width: 100%;
		display: flex;
		align-items: center;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.fsp-hero__content {
		max-width: 34rem;
	}

	.fsp-hero__title {
		font-size: clamp(3.5rem, 5.2vw, 5rem);
	}

	.fsp-hero__tagline {
		font-size: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.fsp-hero__brand {
		top: calc(var(--fsp-header-h) + 28px);
		right: 28px;
		width: clamp(120px, 10vw, 160px);
	}
}

/* -- Status badge -------------------------------------------------------------
 * Yellow background with black text at every state (never grey text on
 * yellow). Open/closed is never conveyed by the dot colour alone — the
 * text label ("Avoinna nyt …" / "Suljettu …") always states it too.
 * ------------------------------------------------------------------- */
.fsp-status {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	background: var(--fsp-yellow);
	color: var(--fsp-black);
	font-weight: 700;
	font-size: 1rem;
	margin: 0.25rem 0 0;
}

.fsp-status__dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--fsp-black);
	flex-shrink: 0;
}

.fsp-status.is-closed .fsp-status__dot {
	background: var(--fsp-red);
}

/* -- Opening hours -------------------------------------------------------------
 * Compact two-column layout: status + summary on the left, the full
 * per-day list on the right — instead of one tall stacked list that
 * used to run most of the screen height.
 * ------------------------------------------------------------------- */
.fsp-hours-section {
	background: var(--fsp-white);
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}

@media (min-width: 782px) {
	.fsp-hours-section {
		padding-top: 4rem !important;
		padding-bottom: 4rem !important;
	}
}

.fsp-hours {
	margin-top: 1.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

.fsp-hours__intro {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.fsp-hours__summary {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--fsp-text);
}

.fsp-hours__list {
	border-top: 1px solid var(--fsp-border);
}

.fsp-hours__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 0.85rem;
	border-bottom: 1px solid var(--fsp-border);
	border-left: 4px solid transparent;
	font-size: 1.02rem;
}

.fsp-hours__row.is-today {
	font-weight: 700;
	color: var(--fsp-red-dark);
	background: var(--fsp-yellow-light);
	border-left-color: var(--fsp-red);
}

.fsp-hours__today-tag {
	display: inline-block;
	margin-left: 0.6rem;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: var(--fsp-red);
	color: var(--fsp-white);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	vertical-align: middle;
}

@media (min-width: 900px) {
	.fsp-hours {
		grid-template-columns: 0.85fr 1.15fr;
		gap: 3rem;
		align-items: start;
	}

	.fsp-hours__intro {
		position: sticky;
		top: calc(var(--fsp-header-h) + 1.5rem);
	}
}

/* -- About -------------------------------------------------------------- */
.fsp-about {
	background: var(--fsp-cream);
}

.fsp-about__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
}

.fsp-about__content {
	position: relative;
}

/* Small brand accent bar above the eyebrow, as required visual weight
   for this section without repeating the dark-panel treatment used by
   the Italian-pizza spotlight section right after it. */
.fsp-about__content::before {
	content: '';
	display: block;
	width: 3rem;
	height: 4px;
	border-radius: 999px;
	background: var(--fsp-red);
	margin-bottom: 1.25rem;
}

.fsp-about__image {
	margin: 0;
	position: relative;
	overflow: hidden;
	background: var(--fsp-white);
	aspect-ratio: 1000 / 562;
	border-radius: var(--fsp-radius);
}

.fsp-about__image img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fsp-about__title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	margin-bottom: 0.6em;
}

.fsp-about__text {
	color: var(--fsp-text);
	font-size: 1.125rem;
	line-height: 1.65;
	max-width: 58ch;
}

.fsp-about__text:not(:last-child) {
	margin-bottom: 0.85em;
}

@media (min-width: 900px) {
	.fsp-about__grid {
		grid-template-columns: 0.9fr 1.1fr;
		gap: 4rem;
	}
}

/* -- Italian pizza spotlight ------------------------------------------------
 * The outer section sits on white (rather than the surrounding cream)
 * so the dark panel inside it reads as a deliberate accent rather than
 * a third cream section in a row — keeps the black/dark/red/yellow
 * identity present without ever making the whole page black.
 * ------------------------------------------------------------------- */
.fsp-italian {
	background: var(--fsp-white);
}

.fsp-italian__panel {
	background: var(--fsp-dark);
	border-radius: var(--fsp-radius);
	padding: 2.75rem 1.5rem;
}

.fsp-italian__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.25rem;
	align-items: center;
}

.fsp-italian__eyebrow {
	color: var(--fsp-yellow);
}

.fsp-italian__title {
	color: var(--fsp-white);
	font-size: clamp(1.9rem, 3.6vw, 2.6rem);
	margin-bottom: 1rem;
}

.fsp-italian__text {
	color: var(--fsp-muted-dark);
	font-size: 1.08rem;
	max-width: 46ch;
	margin-bottom: 2rem;
}

.fsp-italian__image {
	margin: 0;
	position: relative;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	aspect-ratio: 1000 / 750;
	border-radius: calc(var(--fsp-radius) - 0.35rem);
}

.fsp-italian__image img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 900px) {
	.fsp-italian__panel {
		padding: 4rem;
	}

	.fsp-italian__grid {
		grid-template-columns: 0.95fr 1.05fr;
		gap: 3.5rem;
	}
}

/* -- Image fallback -------------------------------------------------------- */
.fsp-hero__image::before,
.fsp-about__image::before,
.fsp-italian__image::before,
.fsp-menu__banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C1392B' stroke-width='1.4'%3E%3Cpath d='M12 3 22 21H2Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 48px 48px;
}

.fsp-menu__banner {
	position: relative;
	overflow: hidden;
	background: var(--fsp-white);
	aspect-ratio: 16 / 10;
	border-radius: 18px;
}

.fsp-menu__banner img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fsp-img-broken img {
	display: none !important;
}

/* -- Menu -------------------------------------------------------------------
 * Top block: eyebrow + heading + lede on the left, the food photo on the
 * right, ~45/55, both columns vertically centred — a single deliberate
 * two-column unit (like the hero) rather than a stray heading followed
 * by a small unrelated banner strip. Stacks (text, then image) below
 * the 900px breakpoint, matching the about/italian-pizza sections'
 * existing breakpoint.
 * ------------------------------------------------------------------- */
.fsp-menu-section {
	background: var(--fsp-cream);
}

.fsp-menu__top {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	margin-bottom: 2rem;
}

@media (min-width: 900px) {
	.fsp-menu__top {
		flex-direction: row;
		align-items: center;
		gap: 3rem;
	}

	.fsp-menu__intro {
		flex: 0 0 45%;
		max-width: 45%;
	}

	.fsp-menu__banner {
		flex: 1 1 55%;
	}
}

.fsp-menu__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--fsp-border);
}

.fsp-menu__tab {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0.6rem 1.2rem;
	border-radius: 999px;
	border: 2px solid var(--fsp-border);
	background: var(--fsp-white);
	color: var(--fsp-black);
	font-family: var(--fsp-font-body);
	font-weight: 600;
	font-size: 0.98rem;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fsp-menu__tab:hover,
.fsp-menu__tab:focus-visible {
	background: var(--fsp-yellow);
	color: var(--fsp-black);
	border-color: var(--fsp-yellow);
}

.fsp-menu__tab:not([aria-selected="true"]):focus-visible {
	/* The page-wide focus ring is red, which only just clears 3:1 against
	   this hover/focus state's yellow background — black clears it with
	   a wide margin, same rule as the secondary button. */
	outline-color: var(--fsp-black);
}

.fsp-menu__tab[aria-selected="true"] {
	/* Not colour alone: also bolder text and a solid border, so the
	   active category is identifiable by shape/weight too. */
	background: var(--fsp-red);
	color: var(--fsp-white);
	border-color: var(--fsp-red);
	font-weight: 700;
}

.fsp-menu__tab[aria-selected="true"]:hover,
.fsp-menu__tab[aria-selected="true"]:focus-visible {
	background: var(--fsp-red-dark);
	border-color: var(--fsp-red-dark);
	color: var(--fsp-white);
}

.fsp-menu__tab[aria-selected="true"]:focus-visible {
	outline-color: var(--fsp-white);
}

.fsp-menu__panel[hidden] {
	display: none;
}

.fsp-menu__sizes-note {
	color: var(--fsp-muted);
	font-size: 0.95rem;
	margin-bottom: 1.25rem;
}

/* Two balanced columns on desktop via CSS multi-column (each item marked
   break-inside: avoid so a card is never split across the column gap) —
   no markup change needed, so the item order/content is untouched. */
.fsp-menu__items {
	display: block;
}

@media (min-width: 700px) {
	.fsp-menu__items {
		column-count: 2;
		column-gap: 2.5rem;
		column-rule: 1px solid var(--fsp-border);
	}
}

.fsp-menu__item {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--fsp-border);
	break-inside: avoid;
}

.fsp-menu__item-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 1.5rem;
}

.fsp-menu__item-name {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0;
	text-transform: capitalize;
}

.fsp-menu__prices {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--fsp-red-dark);
}

/*
 * Each price stays on one line (never breaks mid-number), but the prices
 * block itself is flex-wrap: wrap and its parent .fsp-menu__item-head is
 * also flex-wrap: wrap — so on a narrow screen the whole price group
 * drops to its own line under the product name instead of the price text
 * wrapping awkwardly or overlapping the name.
 */
.fsp-menu__price {
	white-space: nowrap;
}

.fsp-menu__size-label {
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fsp-muted);
}

.fsp-menu__item-desc {
	margin: 0.3rem 0 0;
	color: var(--fsp-muted);
	font-size: 1rem;
}

.fsp-menu__note {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--fsp-border);
	font-size: 0.95rem;
	color: var(--fsp-muted);
	break-inside: avoid;
}

.fsp-menu__sauce-group {
	margin-bottom: 1.5rem;
	break-inside: avoid;
}

.fsp-menu__sauce-title {
	font-family: var(--fsp-font-body);
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fsp-red);
	margin-bottom: 0.5rem;
}

.fsp-menu__sauce-note {
	color: var(--fsp-muted);
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	margin-left: 0.4rem;
}

.fsp-menu__sauce-list {
	color: var(--fsp-muted);
	font-size: 1.05rem;
}

.fsp-menu__cta {
	margin-top: 1.75rem;
	padding: 1.1rem 1.5rem;
	background: var(--fsp-yellow-light);
	border-radius: var(--fsp-radius-sm);
	text-align: center;
}

/* -- Reviews -------------------------------------------------------------------
 * A hand-verified snapshot of the Google Business rating plus three
 * verified review cards (see fsp_reviews_shortcode()) — never a live
 * feed, so nothing here polls or animates on its own. Dark surface,
 * matching the "tumma tai lämmin vaalea" requirement and giving the
 * page another deliberate dark touch besides hero/footer; red/yellow
 * used sparingly (the CTA button, the rating figure, filled stars) so
 * the black–red–yellow palette stays restrained rather than loud.
 * ------------------------------------------------------------------- */
.fsp-reviews-section {
	background: var(--fsp-dark);
	color: var(--fsp-white);
}

.fsp-reviews-section .fsp-eyebrow {
	color: var(--fsp-yellow);
}

.fsp-reviews-section .fsp-section-title {
	color: var(--fsp-white);
	margin-left: auto;
	margin-right: auto;
}

.fsp-reviews-section .fsp-eyebrow,
.fsp-reviews-section .fsp-section-title {
	text-align: center;
}

.fsp-reviews-section :focus-visible {
	outline-color: var(--fsp-yellow);
}

.fsp-reviews {
	max-width: 68rem;
	margin: 1.5rem auto 0;
}

.fsp-reviews__accent {
	display: block;
	width: 3rem;
	height: 4px;
	border-radius: 999px;
	background: var(--fsp-yellow);
	margin: 0 auto 1.5rem;
}

.fsp-reviews__summary {
	text-align: center;
	margin-bottom: 2rem;
}

.fsp-reviews__rating {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.4rem;
}

/* The rating figure is a fixed, hand-verified snapshot (see
   fsp_business_data()['google']['rating_verified_on']) — never styled
   or scripted as a live/auto-updating value, unlike .fsp-status. */
.fsp-reviews__rating-value {
	font-family: var(--fsp-font-display);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 700;
	color: var(--fsp-yellow);
}

.fsp-reviews__rating-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--fsp-muted-dark);
}

.fsp-reviews__rating-count {
	margin: 0 0 0.4rem;
	color: var(--fsp-muted-dark);
	font-size: 1rem;
}

.fsp-reviews__verified {
	margin: 0;
	font-size: 0.85rem;
	color: var(--fsp-muted-dark);
}

.fsp-reviews__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-bottom: 2rem;
	text-align: left;
}

@media (min-width: 700px) {
	.fsp-reviews__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.fsp-reviews__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.fsp-reviews__card {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--fsp-border-dark);
	border-radius: var(--fsp-radius-sm);
	padding: 1.25rem 1.4rem;
}

.fsp-reviews__stars {
	display: flex;
	gap: 0.2rem;
}

/* Rating is conveyed by the number of filled star SHAPES (plus the
   sr-only "X/5 tähteä" text next to them), not by the yellow colour
   alone — an unfilled star stays a visibly different, muted colour. */
.fsp-reviews__star {
	width: 1.05rem;
	height: 1.05rem;
	color: var(--fsp-border-dark-strong);
}

.fsp-reviews__star.is-filled {
	color: var(--fsp-yellow);
}

.fsp-reviews__card-text {
	margin: 0;
	color: var(--fsp-white);
	font-size: 1rem;
	line-height: 1.55;
}

.fsp-reviews__card-footer {
	margin-top: auto;
	padding-top: 0.65rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 0.75rem;
	border-top: 1px solid var(--fsp-border-dark);
}

.fsp-reviews__card-name {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--fsp-white);
}

.fsp-reviews__card-source {
	font-size: 0.78rem;
	color: var(--fsp-muted-dark);
	white-space: nowrap;
}

.fsp-reviews__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

/* If/when GOOGLE_WRITE_REVIEW_URL is filled in and the second, outline
   button reappears (see fsp_reviews_shortcode()), it needs light
   colours here too — the default outline button is styled for a light
   background and would be invisible on this dark one. */
.fsp-reviews-section .fsp-btn--outline {
	color: var(--fsp-white);
	border-color: var(--fsp-white);
}

.fsp-reviews-section .fsp-btn--outline:hover {
	background: var(--fsp-white);
	color: var(--fsp-black);
}

/* -- Contact --------------------------------------------------------------- */
.fsp-contact-section {
	background: var(--fsp-yellow-light);
}

.fsp-contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-top: 1.5rem;
	align-items: start;
}

.fsp-contact__address {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-style: normal;
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 1.1rem;
}

.fsp-contact__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1.3rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--fsp-red-dark);
	margin-bottom: 1.5rem;
}

.fsp-contact__icon {
	color: var(--fsp-red);
	flex-shrink: 0;
	margin-top: 0.15em;
}

.fsp-contact__hours {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--fsp-border);
}

.fsp-contact__hours-status {
	font-weight: 700;
	margin: 0 0 0.3rem;
}

.fsp-contact__hours-summary {
	margin: 0;
	color: var(--fsp-muted);
	font-size: 1rem;
}

.fsp-contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* A cross-origin iframe's load success/failure can't be reliably
   inspected with JavaScript, so this never tries to detect a broken
   embed and swap in a hidden fallback — instead .fsp-contact__map-link
   is a plain, ALWAYS-visible address + "Avaa kartta Google Mapsissa"
   row under the map. That gives visitors a working way to see the map
   whether the iframe above it renders normally or (e.g. blocked by a
   sandboxed preview host) sits there blank, without ever showing an
   empty box or an alarming "failed to load" message. */
.fsp-contact__map {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--fsp-radius);
	background: var(--fsp-white);
}

.fsp-contact__map-frame-wrap {
	position: relative;
	aspect-ratio: 4 / 3;
}

.fsp-contact__map-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.fsp-contact__map-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.85rem 1.1rem;
	background: var(--fsp-white);
	border-top: 1px solid var(--fsp-border);
}

.fsp-contact__map-address {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--fsp-text);
}

.fsp-contact__map-open {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--fsp-red-dark);
	text-decoration: none;
	white-space: nowrap;
}

.fsp-contact__map-open:hover,
.fsp-contact__map-open:focus-visible {
	color: var(--fsp-red);
	text-decoration: underline;
}

.fsp-contact__map-open .fsp-icon {
	width: 0.95em;
	height: 0.95em;
}

@media (min-width: 900px) {
	.fsp-contact {
		grid-template-columns: 1fr 1.15fr;
		align-items: stretch;
	}

	.fsp-contact__details {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.fsp-contact__map {
		height: 100%;
		min-height: 380px;
	}

	.fsp-contact__map-frame-wrap {
		aspect-ratio: auto;
		flex: 1 1 auto;
	}
}

/* -- Footer ------------------------------------------------------------------ */
.fsp-footer {
	background: var(--fsp-black);
	color: var(--fsp-white);
	padding: 3rem 1.25rem 1.75rem !important;
	margin-top: 0;
}

.fsp-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.25rem;
	margin-bottom: 2.25rem;
}

.fsp-footer__logo {
	display: inline-flex;
	align-items: center;
	font-family: var(--fsp-font-display);
	font-size: 1.75rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--fsp-white);
}

/* Sits on the same solid black footer as the nav logo, so it needs no
   extra backing — the PNG's own black corners already blend in. Height
   only, width auto, so the file's real proportions are never stretched. */
.fsp-footer__logo-image {
	display: block;
	height: 2.75rem;
	width: auto;
}

.fsp-footer__tagline {
	margin-top: 0.5rem;
	color: var(--fsp-muted-dark);
}

.fsp-footer__social {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--fsp-muted-dark);
	transition: color 0.15s ease;
}

.fsp-footer__social:hover,
.fsp-footer__social:focus-visible {
	color: var(--fsp-yellow);
}

.fsp-footer__social .fsp-icon {
	width: 1.1em;
	height: 1.1em;
}

.fsp-footer h2 {
	font-family: var(--fsp-font-body);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--fsp-muted-dark);
	margin-bottom: 1rem;
}

.fsp-footer__nav ul {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.fsp-footer__nav a {
	text-decoration: none;
	color: var(--fsp-muted-dark);
}

.fsp-footer__nav a:hover {
	color: var(--fsp-yellow);
}

.fsp-footer__contact address {
	font-style: normal;
	color: var(--fsp-muted-dark);
	margin-bottom: 0.6rem;
	line-height: 1.5;
}

.fsp-footer__contact a {
	/* Sits directly under the (non-link) address text in the same muted
	   tone, so it needs a permanent underline as a non-colour cue that
	   it's a link (WCAG 1.4.1). */
	text-decoration: underline;
	text-underline-offset: 0.15em;
	color: var(--fsp-muted-dark);
}

.fsp-footer__contact a:hover {
	color: var(--fsp-yellow);
}

.fsp-footer__hours ul {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	color: var(--fsp-muted-dark);
	line-height: 1.5;
}

.fsp-footer__copy {
	border-top: 1px solid var(--fsp-border-dark);
	padding-top: 1.5rem;
	margin: 0;
	font-size: 0.85rem;
	color: var(--fsp-muted-dark);
	text-align: center;
}

@media (min-width: 700px) {
	.fsp-footer__grid {
		grid-template-columns: 1.3fr 0.8fr 1fr 1fr;
	}
}

@media (min-width: 480px) and (max-width: 699px) {
	.fsp-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* -- Mobile sticky action bar ------------------------------------------------ */
.fsp-mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	display: flex;
	background: var(--fsp-black);
	border-top: 1px solid var(--fsp-border-dark);
	padding-bottom: env(safe-area-inset-bottom);
}

.fsp-mobile-bar__item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	min-height: var(--fsp-mobile-bar-h);
	text-decoration: none;
	color: var(--fsp-white);
	font-size: 0.72rem;
	font-weight: 600;
}

/* General items: icon highlighted in yellow. The primary "Soita" action
   is the one place red belongs in this bar — it's the single most
   important thing a visitor does from here. */
.fsp-mobile-bar__item .fsp-icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--fsp-yellow);
}

.fsp-mobile-bar__item--primary {
	color: var(--fsp-red);
}

.fsp-mobile-bar__item--primary .fsp-icon {
	color: var(--fsp-red);
}

body {
	padding-bottom: calc(var(--fsp-mobile-bar-h) + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
	.fsp-mobile-bar {
		display: none;
	}

	body {
		padding-bottom: 0;
	}
}