/**
 * Site header and footer ("site chrome") — header.php and footer.php.
 *
 * Loaded on every page that uses the standard header and footer (see
 * inc/site-chrome.php), after the theme's style.css. The class names are new
 * (k4-header, k4-footer, …), so the old header and footer rules still in
 * style.css — used by the ad-page header variants — never apply here, and
 * these rules never touch those variants.
 *
 * Written to work with or without style.css: the new homepage template does
 * not load style.css, every other page does.
 *
 * Colours match the Google Ads landing page: charcoal and the logo's gold,
 * with a deep gold for small text on white. Every text colour pairing meets
 * WCAG AA.
 *
 * FIXED HEIGHT
 * The header is fixed at the top of the screen and is 113 px tall on laptops
 * (40 px top bar + 73 px main bar) and 108 px on phones (40 + 68), as before:
 * several templates push their content down by a fixed 113 px. When the page
 * is scrolled, the whole header slides up by the height of the top bar
 * (transform only), so the top bar leaves the screen without the header's
 * height ever changing — the old homepage template re-measures the header
 * whenever its size changes, and a changing height would make that page jump.
 *
 * @package K4_Kitchens_New
 * @author  Steve Austen
 * @company The PCGP
 * @version 1.3.0
 */

/* ═══════════════════════════════════════════
   Fallback font matched to Poppins
   Shown for the moment before Poppins has downloaded. Arial (Roboto on
   Android), resized and re-spaced to Poppins's measurements, so the text
   takes up almost the same room in both fonts and nothing jumps when
   Poppins arrives (a "layout shift", which Google measures). Figures worked
   out from the theme's Poppins files and Arial (27 September 2026); nothing
   is downloaded for these faces.
   ═══════════════════════════════════════════ */
@font-face {
	font-family: "Poppins Fallback";
	font-style: normal;
	font-weight: 400;
	src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular");
	size-adjust: 111.94%;
	ascent-override: 93.8%;
	descent-override: 31.27%;
	line-gap-override: 8.93%;
}

@font-face {
	font-family: "Poppins Fallback";
	font-style: normal;
	font-weight: 500 900;
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold");
	size-adjust: 107.84%;
	ascent-override: 97.37%;
	descent-override: 32.46%;
	line-gap-override: 9.27%;
}

@font-face {
	font-family: "Poppins Fallback";
	font-style: italic;
	font-weight: 500 900;
	src: local("Arial Bold Italic"), local("Arial-BoldItalicMT"), local("Roboto Bold Italic"), local("Roboto-BoldItalic");
	size-adjust: 107.84%;
	ascent-override: 97.37%;
	descent-override: 32.46%;
	line-gap-override: 9.27%;
}

/* ═══════════════════════════════════════════
   Tokens
   ═══════════════════════════════════════════ */
:root {
	--k4-ink: #1b1819;          /* Near-black charcoal. */
	--k4-gold: #f3af2e;         /* Logo gold. Ink on gold: 9.4:1. */
	--k4-gold-hover: #ffc04a;
	--k4-gold-deep: #8f5f06;    /* Gold for text on white: 5.6:1. */
	--k4-cream: #f6f1e8;
	--k4-sand: #e6ddcf;
	--k4-text: #2d292a;
	--k4-muted: #5b5455;
	--k4-footer-bg: #141112;
	--k4-topbar-h: 40px;
	--k4-mainbar-h: 68px;
	/* Total fixed header height. Pages that start with a full-width section
	   (the new homepage) push it down by this amount. */
	--k4-header-h: calc(var(--k4-topbar-h) + var(--k4-mainbar-h));
	--k4-chrome-font: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@media (min-width: 960px) {
	:root {
		--k4-mainbar-h: 73px;
	}
}

/* ═══════════════════════════════════════════
   Permanently visible scrollbar
   Moved here from style.css unchanged, so the new homepage (which does not
   load style.css) keeps it. Applied via the .k4-visible-scrollbar class that
   functions.php puts on <html> and <body> (on by default; switched off per
   page with the "Page Display Options" field).

   The scrolling itself lives on body only: with html's overflow left
   "visible", the browser uses body's overflow for the window scrollbar.
   The appearance rules are repeated on html because Chrome only restyles the
   real window scrollbar when it is styled there.
   ═══════════════════════════════════════════ */
body.k4-visible-scrollbar {
	/* "scroll" keeps the track always shown; scrollbar-gutter avoids the small
	   layout shift this can otherwise cause. */
	overflow-y: scroll;
	scrollbar-gutter: stable;
}

/* Firefox: "auto" draws a full-size classic scrollbar in brand colours. */
html.k4-visible-scrollbar,
body.k4-visible-scrollbar {
	scrollbar-width: auto;
	scrollbar-color: #f3af2e #f1f1f1;
}

/* Chrome, Edge, Safari: styling ::-webkit-scrollbar switches off the
   auto-hiding overlay style. */
html.k4-visible-scrollbar::-webkit-scrollbar,
body.k4-visible-scrollbar::-webkit-scrollbar {
	width: 14px;
}

html.k4-visible-scrollbar::-webkit-scrollbar-track,
body.k4-visible-scrollbar::-webkit-scrollbar-track {
	background: #f1f1f1;
}

html.k4-visible-scrollbar::-webkit-scrollbar-thumb,
body.k4-visible-scrollbar::-webkit-scrollbar-thumb {
	background: #f3af2e;
	border-radius: 8px;
	border: 3px solid #f1f1f1;
}

html.k4-visible-scrollbar::-webkit-scrollbar-thumb:hover,
body.k4-visible-scrollbar::-webkit-scrollbar-thumb:hover {
	background: #e2a027;
}

/* ═══════════════════════════════════════════
   Hidden text and the skip link
   ═══════════════════════════════════════════ */

/* Text for screen readers only. (The theme used this class but never
   defined it, so the skip link sat, visible, behind the fixed header.) */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The skip link appears at the top left when it receives keyboard focus. */
.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 18px;
	clip: auto;
	white-space: normal;
	border-radius: 999px;
	background: var(--k4-gold);
	color: var(--k4-ink);
	font-family: var(--k4-chrome-font);
	font-weight: 700;
	text-decoration: none;
}

/* ═══════════════════════════════════════════
   Shared pieces
   ═══════════════════════════════════════════ */
.k4-header,
.k4-header *,
.k4-header *::before,
.k4-header *::after,
.k4-footer,
.k4-footer *,
.k4-footer *::before,
.k4-footer *::after {
	box-sizing: border-box;
}

.k4-chrome-wrap {
	width: 100%;
	max-width: 1264px;
	margin: 0 auto;
	padding: 0 20px;
}

@media (min-width: 768px) {
	.k4-chrome-wrap {
		padding: 0 32px;
	}
}

.k4-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

.k4-nowrap {
	white-space: nowrap;
}

/* Buttons used in the header (the homepage has its own). */
.k4-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 22px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-family: var(--k4-chrome-font);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.k4-btn .k4-icon {
	width: 18px;
	height: 18px;
}

.k4-btn--gold,
.k4-btn--gold:visited {
	background: var(--k4-gold);
	color: var(--k4-ink);
	box-shadow: 0 10px 22px -12px rgba(243, 175, 46, 0.95);
}

.k4-btn--gold:hover,
.k4-btn--gold:focus-visible {
	background: var(--k4-gold-hover);
	color: var(--k4-ink);
}

.k4-btn--outline,
.k4-btn--outline:visited {
	background: transparent;
	border-color: var(--k4-ink);
	color: var(--k4-ink);
}

.k4-btn--outline:hover {
	background: var(--k4-ink);
	color: #ffffff;
}

/* Focus rings: gold on the dark bars, charcoal on white. */
.k4-header :focus-visible,
.k4-footer :focus-visible {
	outline: 3px solid var(--k4-ink);
	outline-offset: 3px;
}

.k4-topbar :focus-visible,
.k4-footer :focus-visible {
	outline-color: var(--k4-gold);
}

/* ═══════════════════════════════════════════
   Header
   ═══════════════════════════════════════════ */
.k4-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	font-family: var(--k4-chrome-font);
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

/* Below the WordPress admin bar when logged in (32 px, or 46 px at 782 px
   and under; js/k4-new-scripts.js adjusts it on small phones, where the bar
   scrolls away). */
.admin-bar .k4-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .k4-header {
		top: 46px;
	}
}

/* Scrolled down the page: the top bar slides out of view. Only a transform,
   so the header's height and the page layout never change. */
@media (prefers-reduced-motion: no-preference) {
	.k4-header {
		transition: transform 0.28s ease;
	}
}

.k4-header.is-compact {
	transform: translateY(calc(-1 * var(--k4-topbar-h)));
}

/* Keep the admin bar above the header when logged in. */
.admin-bar #wpadminbar {
	z-index: 99999;
}

/* ── Top bar ──────────────────────────────── */
.k4-topbar {
	height: var(--k4-topbar-h);
	background: var(--k4-ink);
	color: #ffffff;
	font-size: 0.8125rem;
}

.k4-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 100%;
}

.k4-topbar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.k4-topbar__contact {
	gap: 24px;
	min-width: 0;
}

.k4-topbar__extra {
	display: flex;
	align-items: center;
	gap: 18px;
}

.k4-topbar__item,
.k4-topbar__item:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 32px;
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
}

.k4-topbar__item .k4-icon {
	width: 15px;
	height: 15px;
	color: var(--k4-gold);
}

a.k4-topbar__item:hover span {
	text-decoration: underline;
	text-decoration-color: var(--k4-gold);
	text-underline-offset: 3px;
}

.k4-topbar__item strong {
	font-weight: 700;
	color: var(--k4-gold);
}

.k4-topbar__social {
	gap: 2px;
}

.k4-topbar__social-link,
.k4-topbar__social-link:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: #ffffff;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.k4-topbar__social-link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--k4-gold);
}

.k4-topbar__social-link .k4-icon {
	width: 16px;
	height: 16px;
}

/* Phones: the phone number and the rating only. */
.k4-topbar__from-md,
.k4-topbar__from-lg {
	display: none !important;
}

@media (min-width: 768px) {
	.k4-topbar__from-md {
		display: flex !important;
	}
}

@media (min-width: 1100px) {
	.k4-topbar__from-lg {
		display: flex !important;
	}
}

/* ── Main bar ─────────────────────────────── */
.k4-mainbar {
	position: relative; /* The phone menu panel hangs from here. */
	background: #ffffff;
	box-shadow: 0 1px 0 rgba(27, 24, 25, 0.08);
	transition: box-shadow 0.3s ease;
}

.k4-header.is-scrolled .k4-mainbar {
	box-shadow: 0 10px 30px -12px rgba(27, 24, 25, 0.3);
}

.k4-mainbar__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--k4-mainbar-h);
}

.k4-mainbar__logo {
	display: block;
	flex: none;
	margin-right: auto;
}

.k4-mainbar__logo img {
	display: block;
	width: auto;
	height: 50px;
	max-width: none;
}

.k4-mainbar__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

/* ── Menu: laptops (960 px and up) ─────────── */
.k4-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.k4-nav__menu a,
.k4-nav__menu a:visited {
	color: var(--k4-ink);
	font-weight: 600;
	text-decoration: none;
}

@media (min-width: 960px) {
	.k4-mainbar__logo {
		margin-right: 0;
	}

	.k4-mainbar__logo img {
		height: 56px;
	}

	.k4-nav {
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
		min-width: 0;
	}

	.k4-nav__menu {
		display: flex;
		align-items: center;
		gap: 2px;
	}

	.k4-nav__menu a {
		position: relative;
		display: block;
		padding: 10px 12px;
		font-size: 0.9375rem;
		white-space: nowrap;
	}

	/* A short gold line under the link on hover, and under the current page. */
	.k4-nav__menu a::after {
		content: "";
		position: absolute;
		left: 12px;
		right: 12px;
		bottom: 4px;
		height: 2px;
		border-radius: 2px;
		background: var(--k4-gold);
		transform: scaleX(0);
		transform-origin: left;
	}

	@media (prefers-reduced-motion: no-preference) {
		.k4-nav__menu a::after {
			transition: transform 0.2s ease;
		}
	}

	.k4-nav__menu a:hover::after,
	.k4-nav__menu .current-menu-item > a::after {
		transform: scaleX(1);
	}

	.k4-nav__extra,
	.k4-mainbar__call,
	.k4-menu-toggle {
		display: none !important;
	}
}

@media (min-width: 1100px) {
	.k4-nav__menu {
		gap: 8px;
	}
}

/* ── Menu: phones and small tablets (under 960 px) ── */
@media (max-width: 959.98px) {
	.k4-mainbar__contact {
		display: none !important;
	}

	/* A round gold call button. */
	.k4-mainbar__call,
	.k4-mainbar__call:visited {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--k4-gold);
		color: var(--k4-ink);
		box-shadow: 0 8px 18px -10px rgba(243, 175, 46, 0.95);
	}

	.k4-mainbar__call .k4-icon {
		width: 21px;
		height: 21px;
	}

	.k4-menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		height: 44px;
		padding: 0 16px 0 14px;
		border: 1.5px solid var(--k4-sand);
		border-radius: 999px;
		background: #ffffff;
		color: var(--k4-ink);
		font-family: var(--k4-chrome-font);
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 1;
		cursor: pointer;
	}

	.k4-menu-toggle:hover {
		border-color: #c9bdab;
	}

	/* Three bars that become a cross when the menu is open. */
	.k4-menu-toggle__bars,
	.k4-menu-toggle__bars::before,
	.k4-menu-toggle__bars::after {
		display: block;
		width: 18px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
	}

	.k4-menu-toggle__bars {
		position: relative;
	}

	.k4-menu-toggle__bars::before,
	.k4-menu-toggle__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.k4-menu-toggle__bars::before {
		top: -6px;
	}

	.k4-menu-toggle__bars::after {
		top: 6px;
	}

	.k4-menu-toggle[aria-expanded="true"] .k4-menu-toggle__bars {
		background: transparent;
	}

	.k4-menu-toggle[aria-expanded="true"] .k4-menu-toggle__bars::before {
		top: 0;
		transform: rotate(45deg);
	}

	.k4-menu-toggle[aria-expanded="true"] .k4-menu-toggle__bars::after {
		top: 0;
		transform: rotate(-45deg);
	}

	/* The menu panel drops down under the main bar when the menu button is
	   pressed (js/k4-new-scripts.js adds "is-menu-open" to the header).
	   Without JavaScript the panel stays closed; the same pages are listed
	   in the footer's quick links. */
	.k4-nav__panel {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - var(--k4-header-h));
		max-height: calc(100dvh - var(--k4-header-h));
		overflow-y: auto;
		padding: 6px 20px 22px;
		border-top: 1px solid var(--k4-sand);
		background: #ffffff;
		box-shadow: 0 24px 40px -20px rgba(27, 24, 25, 0.35);
	}

	.k4-header.is-menu-open .k4-nav__panel {
		display: block;
	}

	.k4-nav__menu li {
		border-bottom: 1px solid #eee7dc;
	}

	.k4-nav__menu a {
		display: flex;
		align-items: center;
		min-height: 54px;
		padding: 12px 4px;
		font-size: 1.0625rem;
	}

	.k4-nav__menu .current-menu-item > a {
		color: var(--k4-gold-deep);
	}

	.k4-nav__extra {
		display: grid;
		gap: 10px;
		margin-top: 18px;
	}

	.k4-nav__extra .k4-btn {
		min-height: 52px;
		font-size: 1rem;
	}
}

/* Very narrow phones: the word "Menu" goes, the button keeps its label for
   screen readers (the visible text is also its accessible name). */
@media (max-width: 359.98px) {
	.k4-menu-toggle__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.k4-menu-toggle {
		padding: 0 13px;
	}

	.k4-mainbar__logo img {
		height: 44px;
	}
}

/* ═══════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════ */
.k4-footer {
	padding: 56px 0 28px;
	background: var(--k4-footer-bg);
	color: #cfc9c9;
	font-family: var(--k4-chrome-font);
	font-size: 0.9375rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.k4-footer p {
	margin: 0;
}

.k4-footer a,
.k4-footer a:visited {
	color: #ffffff;
}

.k4-footer__grid {
	display: grid;
	gap: 36px;
}

.k4-footer__logo {
	display: block;
	width: 150px;
	height: auto;
}

.k4-footer__about {
	margin-top: 16px !important;
	max-width: 26em;
}

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

.k4-footer__social {
	display: flex;
	gap: 10px;
	margin-top: 18px !important;
}

.k4-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.k4-footer__social a:hover {
	background: var(--k4-gold);
	color: var(--k4-ink);
}

.k4-footer__social .k4-icon {
	width: 18px;
	height: 18px;
}

.k4-footer__heading {
	margin: 0 0 14px;
	font-family: var(--k4-chrome-font);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k4-gold);
}

.k4-footer__menu {
	display: grid;
	gap: 2px;
}

/* Each link at least 32 px tall (WCAG 2.2 asks for 24 px). */
.k4-footer__menu a {
	display: inline-block;
	padding: 5px 0;
	color: #ebe6e6;
	text-decoration: none;
}

.k4-footer__menu a:hover {
	color: #ffffff;
	text-decoration: underline;
	text-decoration-color: var(--k4-gold);
	text-underline-offset: 4px;
}

.k4-footer__contact {
	display: grid;
	gap: 12px;
}

.k4-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.k4-footer__contact .k4-icon {
	width: 18px;
	height: 18px;
	margin-top: 3px;
	color: var(--k4-gold);
}

.k4-footer__contact a {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	text-decoration: none;
}

.k4-footer__contact a:hover span {
	text-decoration: underline;
	text-decoration-color: var(--k4-gold);
	text-underline-offset: 4px;
}

.k4-footer__phone span {
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.35;
}

.k4-footer address {
	font-style: normal;
}

/* Checkatrade score, like the reviews on the homepage. */
.k4-footer__rating {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.k4-footer__score {
	flex: none;
	font-size: 2.75rem;
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--k4-gold);
}

/* The small "/10": its own spacing, clear of the italic "0". */
.k4-footer__score span {
	display: inline-block;
	margin-left: 0.14em;
	padding-right: 0.12em;
	font-size: 1.125rem;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.75);
}

.k4-footer__rating-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	line-height: 1.35;
}

.k4-footer__rating-text strong {
	color: #ffffff;
	font-weight: 600;
}

.k4-footer__rating-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #ebe6e6;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-underline-offset: 3px;
}

.k4-footer__rating:hover .k4-footer__rating-link {
	text-decoration-color: var(--k4-gold);
}

.k4-footer__rating-link .k4-icon {
	width: 15px;
	height: 15px;
	color: var(--k4-gold);
}

/* Divider, then the policy links and the copyright line. */
.k4-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 44px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.8125rem;
}

.k4-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 22px;
}

/* At least a 24 px tall target (WCAG 2.2). */
.k4-footer__links a,
.k4-footer__cookies {
	display: inline-block;
	padding: 6px 0;
	color: #ffffff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-underline-offset: 3px;
}

.k4-footer__links a:hover,
.k4-footer__cookies:hover {
	text-decoration-color: var(--k4-gold);
}

.k4-footer__cookies {
	margin: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

.k4-footer__copy {
	color: #a9a3a4;
}

.k4-footer__company {
	display: block;
}

@media (min-width: 600px) {
	.k4-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.k4-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 768px) {
	/* Copyright on the left, policy links on the right. */
	.k4-footer__bottom {
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}
}

@media (min-width: 1024px) {
	.k4-footer {
		padding-top: 72px;
	}

	.k4-footer__grid {
		grid-template-columns: 1.35fr 1fr 1.25fr 1fr;
		gap: 40px;
	}

	.k4-footer__brand {
		grid-column: auto;
	}
}

/* ═══════════════════════════════════════════
   "Call K4 Kitchens" panel (js/k4-call-modal.js)
   On computers, the phone number in the top bar opens this small panel with
   the number, a copy button and the opening hours; on phones the tel: link
   dials. The script is loaded on every page, but its styles used to live only
   in kitchen-design-canterbury.css, so on the homepage and the other standard
   pages the panel appeared unstyled at the foot of the page. They are here
   now, for every page with the standard header.
   ═══════════════════════════════════════════ */
.k4-call-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(27, 24, 25, 0.78);
	opacity: 0;
	visibility: hidden;
	font-family: var(--k4-chrome-font);
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.k4-call-modal[hidden] {
	display: none;
}

.k4-call-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.k4-call-modal__panel {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	padding: 40px 36px 32px;
	border-top: 4px solid var(--k4-gold);
	border-radius: 20px;
	background: #ffffff;
	text-align: center;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
	transform: translateY(16px);
	transition: transform 0.3s ease;
}

.k4-call-modal.is-open .k4-call-modal__panel {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.k4-call-modal,
	.k4-call-modal__panel {
		transition: none;
	}
}

.k4-call-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--k4-muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.k4-call-modal__close:hover {
	background: var(--k4-cream);
	color: var(--k4-ink);
}

.k4-call-modal__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--k4-gold);
	color: var(--k4-ink);
	box-shadow: 0 8px 18px -8px rgba(243, 175, 46, 0.9);
}

.k4-call-modal__icon svg {
	width: 26px;
	height: 26px;
}

.k4-call-modal__title {
	margin: 0 0 6px;
	font-family: var(--k4-chrome-font);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--k4-ink);
}

.k4-call-modal__subtitle {
	margin: 0 0 22px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--k4-muted);
}

.k4-call-modal__number,
.k4-call-modal__number:visited,
.k4-call-modal__number:hover {
	display: inline-block;
	margin: 0;
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--k4-ink);
	text-decoration: none;
}

.k4-call-modal__actions {
	margin-top: 12px;
}

.k4-call-modal__copy {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 36px;
	padding: 7px 16px;
	border: 1px solid rgba(243, 175, 46, 0.7);
	border-radius: 999px;
	background: rgba(243, 175, 46, 0.14);
	color: var(--k4-ink);
	font-family: var(--k4-chrome-font);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.k4-call-modal__copy:hover {
	background: rgba(243, 175, 46, 0.26);
}

.k4-call-modal__copy.is-copied {
	border-color: var(--k4-gold);
	background: var(--k4-gold);
}

.k4-call-modal__copy svg,
.k4-call-modal__hours svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.k4-call-modal__hours {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 24px 0 0;
	padding-top: 18px;
	border-top: 1px solid #eee7dc;
	font-size: 0.875rem;
	color: var(--k4-muted);
}

.k4-call-modal__hours svg {
	color: var(--k4-gold-deep);
}

.k4-call-modal :focus-visible {
	outline: 3px solid var(--k4-ink);
	outline-offset: 3px;
}

body.k4-call-modal-open {
	overflow: hidden;
}

@media (max-width: 480px) {
	.k4-call-modal__panel {
		padding: 32px 24px 24px;
	}

	.k4-call-modal__number,
	.k4-call-modal__number:visited,
	.k4-call-modal__number:hover {
		font-size: 1.75rem;
	}
}