/*
 * Piikula design system foundation.
 *
 * Loaded automatically by functions.php once this file exists. Kadence remains
 * the parent theme and keeps doing the layout work; this file only adds the
 * Piikula brand layer on top of it.
 *
 * Brand colours come from the official Piikula logo colour specification.
 * That specification supersedes the values previously sampled from the
 * compressed JPEG logo (#832331, #AA4E63 and the oval greys): sampling a lossy
 * raster is an approximation, the specification is authoritative.
 *
 *   Dark Piikula red     C36 M100 Y81 K16   #952236  -> primary brand
 *   Lighter Piikula red  C21 M92  Y51 K9    #B63659  -> supporting accent
 *   Dark logo grey       C0  M0   Y0  K49   #94979B  -> decorative only
 *   Light logo grey      C0  M0   Y0  K31   #B8BBBE  -> decorative only
 *
 * The two logo greys are brand colours but not text colours: they measure
 * 2.77:1 and 1.82:1 against the page background, so they are reserved for
 * logo-related accents, decorative details and non-text surfaces. The web
 * neutrals further down are chosen for contrast instead.
 *
 * Contrast: every text token pairs with its intended background at WCAG AA or
 * better. The measured ratios are noted next to each token.
 */

:root {
	color-scheme: light;

	/* --------------------------------------------------------------------
	 * Official Piikula brand palette — canonical
	 *
	 * These four values are the logo colour specification itself. Treat them
	 * as fixed; change them only if a future authoritative source supersedes
	 * the specification. The role tokens below reference them.
	 * ----------------------------------------------------------------- */
	--pk-primary: #952236;         /* dark Piikula red */
	--pk-accent: #b63659;          /* lighter Piikula red */
	--pk-logo-gray: #94979b;       /* dark logo grey — decorative use only */
	--pk-logo-gray-light: #b8bbbe; /* light logo grey — decorative use only */

	/* --------------------------------------------------------------------
	 * Derived web interaction colours
	 *
	 * Hover and active are the primary scaled toward black by 0.82 and 0.65.
	 * Scaling keeps the hue exactly and gives an evenly spaced ramp, which
	 * the previous hand-picked values no longer would against this primary.
	 * ----------------------------------------------------------------- */
	--pk-color-primary: var(--pk-primary); /* 7.76:1 on --pk-color-bg (AAA) */
	--pk-color-primary-hover: #7a1c2c;     /* 9.78:1 on --pk-color-bg */
	--pk-color-primary-active: #611623;    /* 12.06:1 on --pk-color-bg */

	/* A restrained lavender interaction wash keeps secondary states quiet while
	 * reserving the Piikula red for actions and important links. */
	--pk-color-primary-soft: #f1edf2;
	--pk-color-primary-soft-border: #d9d0da;

	/* 5.42:1 on --pk-color-bg (AA). Use sparingly, for accents and decoration
	 * rather than long-form text. */
	--pk-color-accent: var(--pk-accent);
	--pk-color-accent-soft: #eee9f0;

	/* --------------------------------------------------------------------
	 * Soft supporting tones
	 *
	 * Muted lavender-neutral surfaces reduce the former pink wash without
	 * competing with the official burgundy. The plum role appears only in
	 * supporting details; it never replaces the primary action colour. Kept
	 * pale enough that the dark text tokens stay well above AA on all of them.
	 *
	 * White cards need a tinted band behind them: on the warm off-white page
	 * background a white surface only reaches 1.06:1 and all but disappears.
	 * Card sections therefore sit on --pk-color-rose-surface or deeper.
	 * ----------------------------------------------------------------- */
	--pk-color-plum: #70566f;         /* restrained supporting accent */
	--pk-color-plum-deep: #634b64;    /* muted text and emphasis */
	--pk-color-blush: #f7f5f8;        /* light lavender page wash, hero */
	--pk-color-rose-surface: #f1edf2; /* cards and soft surfaces */
	--pk-color-rose-section: #eee9f0; /* deeper section band */
	--pk-color-rose-border: #d9d0da;  /* decorative hairlines on pale surfaces */

	/* --------------------------------------------------------------------
	 * Neutrals
	 *
	 * The official logo greys are too light to carry text, so the page
	 * neutrals are chosen for contrast rather than taken from the brand
	 * palette. They carry a small amount of warmth so the site reads calm and
	 * welcoming rather than clinical, while staying far away from
	 * beige-on-beige.
	 * ----------------------------------------------------------------- */
	--pk-color-bg: #fbf8f6;            /* warm off-white page background */
	--pk-color-surface: #ffffff;       /* cards, header, logo backdrop */
	--pk-color-surface-alt: #f4f1f4;   /* alternating section band */

	--pk-color-text: #241d1f;          /* 15.6:1 on --pk-color-bg (AAA) */
	--pk-color-text-secondary: #4e4245; /* 9.1:1 on --pk-color-bg (AAA) */
	--pk-color-text-muted: var(--pk-color-plum-deep); /* 7.0:1 on --pk-color-bg (AAA) */
	--pk-color-text-inverse: #ffffff;  /* 8.2:1 on --pk-color-primary (AAA) */

	--pk-color-border: #e2dad7;        /* hairlines and dividers */
	/* Interactive outlines must meet the 3:1 non-text requirement (WCAG
	 * 1.4.11), which neither official logo grey reaches on this background
	 * (2.77:1 and 1.82:1). This role therefore keeps its own accessible
	 * value; the brand greys stay available for decoration. */
	--pk-color-border-strong: var(--pk-color-plum); /* 5.0:1 on --pk-color-bg */

	--pk-color-focus: var(--pk-primary);

	/* --------------------------------------------------------------------
	 * Typography
	 *
	 * System stacks only - no remote font dependency. Georgia-first serif
	 * headings echo the logo's script wordmark and keep the tone warm and
	 * trustworthy; a neutral system sans keeps body copy highly legible on
	 * small screens.
	 * ----------------------------------------------------------------- */
	--pk-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--pk-font-heading: Georgia, "Iowan Old Style", "Palatino Linotype",
		"Noto Serif", "Liberation Serif", "Times New Roman", serif;

	--pk-font-size-base: 1.0625rem;    /* 17px - comfortable on mobile */
	--pk-font-size-sm: 0.9375rem;
	--pk-font-size-xs: 0.8125rem;
	--pk-font-size-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);

	--pk-font-size-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	--pk-font-size-h2: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem);
	--pk-font-size-h3: clamp(1.3rem, 1.12rem + 0.8vw, 1.75rem);
	--pk-font-size-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.35rem);

	--pk-line-height-base: 1.65;
	--pk-line-height-snug: 1.35;
	--pk-line-height-tight: 1.2;

	--pk-font-weight-body: 400;
	--pk-font-weight-medium: 600;
	--pk-font-weight-heading: 700;

	--pk-letter-spacing-heading: -0.01em;

	/* --------------------------------------------------------------------
	 * Layout
	 * ----------------------------------------------------------------- */
	/* Three widths on purpose. Prose stays at a readable measure while grids
	 * and visual compositions use the desktop width properly - widening every
	 * paragraph to the content width would hurt readability, not help it. */
	--pk-width-narrow: 42rem;          /* 672px  - long-form text measure */
	--pk-width-content: 72rem;         /* 1152px - default content column */
	--pk-width-wide: 80rem;            /* 1280px - grids and wide compositions */
	--pk-gutter: clamp(1.25rem, 4vw, 3rem);

	--pk-space-2xs: 0.25rem;
	--pk-space-xs: 0.5rem;
	--pk-space-sm: 0.75rem;
	--pk-space-md: 1rem;
	--pk-space-lg: 1.5rem;
	--pk-space-xl: 2rem;
	--pk-space-2xl: 3rem;
	--pk-space-3xl: 4.5rem;

	/* Section rhythm scales with the viewport instead of stepping at a
	 * breakpoint, which keeps vertical spacing generous on desktop without
	 * wasting screen height on a phone. */
	--pk-space-section: clamp(3rem, 7vw, 6rem);

	/* --------------------------------------------------------------------
	 * UI fundamentals
	 * ----------------------------------------------------------------- */
	--pk-radius-sm: 0.25rem;
	--pk-radius-md: 0.5rem;
	--pk-radius-lg: 0.875rem;
	--pk-radius-pill: 999px;

	--pk-shadow-sm: 0 1px 2px rgba(36, 29, 31, 0.06);
	--pk-shadow-md: 0 2px 8px rgba(36, 29, 31, 0.08);

	--pk-transition-fast: 120ms ease;
	--pk-transition: 180ms ease;

	--pk-focus-width: 3px;
	--pk-focus-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Base elements
 *
 * Plain element selectors, so Kadence's own base rules are matched rather
 * than out-specified. Anything the Customizer sets still wins, which is
 * intentional: the Customizer stays the site owner's control surface.
 * ---------------------------------------------------------------------- */

body {
	background-color: var(--pk-color-bg);
	color: var(--pk-color-text);
	font-family: var(--pk-font-body);
	font-size: var(--pk-font-size-base);
	line-height: var(--pk-line-height-base);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--pk-color-text);
	font-family: var(--pk-font-heading);
	font-weight: var(--pk-font-weight-heading);
	line-height: var(--pk-line-height-tight);
	letter-spacing: var(--pk-letter-spacing-heading);
	text-wrap: balance;
}

h1 { font-size: var(--pk-font-size-h1); }
h2 { font-size: var(--pk-font-size-h2); }
h3 { font-size: var(--pk-font-size-h3); line-height: var(--pk-line-height-snug); }
h4 { font-size: var(--pk-font-size-h4); line-height: var(--pk-line-height-snug); }

a {
	color: var(--pk-color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--pk-transition-fast);
}

a:hover,
a:focus {
	color: var(--pk-color-primary-hover);
}

hr {
	border: 0;
	border-top: 1px solid var(--pk-color-border);
	margin-block: var(--pk-space-xl);
}

small {
	font-size: var(--pk-font-size-sm);
	color: var(--pk-color-text-muted);
}

::selection {
	background-color: var(--pk-color-primary);
	color: var(--pk-color-text-inverse);
}

/* -------------------------------------------------------------------------
 * Focus visibility
 *
 * :where() keeps this at zero specificity so individual components can opt
 * out, but the ring itself is deliberately unmissable.
 * ---------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--pk-focus-width) solid var(--pk-color-focus);
	outline-offset: var(--pk-focus-offset);
}

/* -------------------------------------------------------------------------
 * Layout helpers
 * ---------------------------------------------------------------------- */

.pk-container {
	width: 100%;
	max-width: var(--pk-width-content);
	margin-inline: auto;
	padding-inline: var(--pk-gutter);
}

.pk-container--narrow { max-width: var(--pk-width-narrow); }
.pk-container--wide { max-width: var(--pk-width-wide); }

/* Opt-in reading measure. Deliberately not applied to every paragraph: doing
 * that globally would constrain text inside Kadence's own containers, and
 * centred text would end up hugging the left edge of its column. */
.pk-measure {
	max-width: var(--pk-width-narrow);
}

.pk-section {
	padding-block: var(--pk-space-section);
}

.pk-section--alt {
	background-color: var(--pk-color-surface-alt);
}

/* Section background bands. Reusable beyond the front page, which is why they
 * live here rather than in the front page stylesheet. */
.pk-section--surface { background-color: var(--pk-color-surface); }
.pk-section--blush { background-color: var(--pk-color-blush); }
.pk-section--rose { background-color: var(--pk-color-rose-surface); }
.pk-section--rose-deep { background-color: var(--pk-color-rose-section); }

.pk-section--primary {
	background-color: var(--pk-color-primary);
	color: var(--pk-color-text-inverse);
}

.pk-section--primary h1,
.pk-section--primary h2,
.pk-section--primary h3 {
	color: var(--pk-color-text-inverse);
}

/* Privacy policy ---------------------------------------------------------- */

.pk-privacy__header {
	margin-bottom: var(--pk-space-2xl);
}

.pk-privacy__header h1 {
	margin-bottom: var(--pk-space-xs);
}

.pk-privacy__updated {
	margin: 0;
	color: var(--pk-color-text-muted);
	font-size: var(--pk-font-size-sm);
}

.pk-privacy__section {
	padding-top: var(--pk-space-xl);
	border-top: 1px solid var(--pk-color-border);
}

.pk-privacy__section + .pk-privacy__section {
	margin-top: var(--pk-space-xl);
}

.pk-privacy__section h2 {
	margin: 0 0 var(--pk-space-md);
	font-size: var(--pk-font-size-h3);
}

.pk-privacy__section address {
	font-style: normal;
}

.pk-privacy__section ul {
	padding-left: 1.25em;
}

/* -------------------------------------------------------------------------
 * Buttons
 *
 * Namespaced so they never collide with Kadence's own button classes. Kadence
 * buttons keep working untouched; .pk-button is available where a Piikula
 * call to action is wanted.
 * ---------------------------------------------------------------------- */

.pk-button {
	display: inline-block;
	padding: 0.75em 1.6em;
	border: 1px solid transparent;
	border-radius: var(--pk-radius-sm);
	font-family: var(--pk-font-body);
	font-size: var(--pk-font-size-base);
	font-weight: var(--pk-font-weight-medium);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--pk-transition),
		border-color var(--pk-transition), color var(--pk-transition);
}

.pk-button--primary {
	background-color: var(--pk-color-primary);
	color: var(--pk-color-text-inverse);
}

.pk-button--primary:hover {
	background-color: var(--pk-color-primary-hover);
	color: var(--pk-color-text-inverse);
}

.pk-button--primary:active {
	background-color: var(--pk-color-primary-active);
}

.pk-button--secondary {
	background-color: transparent;
	border-color: var(--pk-color-primary);
	color: var(--pk-color-primary);
}

.pk-button--secondary:hover {
	background-color: var(--pk-color-primary-soft);
	color: var(--pk-color-primary-hover);
}

/* The wine focus ring would disappear against a wine button, so filled
 * buttons switch to a light ring with a dark halo behind it. */
.pk-button--primary:focus-visible {
	outline-color: var(--pk-color-surface);
	box-shadow: 0 0 0 calc(var(--pk-focus-width) + var(--pk-focus-offset) + 2px)
		var(--pk-color-primary-active);
}

.pk-button[disabled],
.pk-button[aria-disabled="true"] {
	background-color: var(--pk-color-border);
	border-color: transparent;
	color: var(--pk-color-text-muted);
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * Site header and footer
 *
 * Kadence builds and configures both of these from the Customizer, so this is
 * a thin branding layer over its markup, not a replacement for it. Selectors
 * stay on the standard WordPress class names Kadence uses, and every rule is
 * written so that if a class name differs the styling simply does not apply
 * rather than breaking the page.
 *
 * Anything Kadence renders from Customizer settings emits its own inline CSS
 * after this stylesheet and will win. That is deliberate: the Customizer stays
 * the site owner's control surface. Colours set there should match the tokens
 * above; see README.md for the exact settings.
 * ---------------------------------------------------------------------- */

.site-header,
#masthead {
	background-color: var(--pk-color-surface);
	border-bottom: 1px solid var(--pk-color-rose-border);
	box-shadow: var(--pk-shadow-sm);
}

/*
 * Site title fallback.
 *
 * The header should show the logo, which is a Customizer assignment (see
 * README.md). Until that is done Kadence prints the site title as text, so it
 * is given the brand typography here rather than left looking like a default.
 * This is a safety net, not a substitute for assigning the logo - hiding the
 * title from CSS would leave an empty header if the logo were ever missing.
 */
.site-title,
.site-title a {
	font-family: var(--pk-font-heading);
	color: var(--pk-color-primary);
	text-decoration: none;
}

/* The logo is a transparent PNG, so it needs no plate behind it and can sit
 * straight on the warm background. Kadence's Logo Width setting remains the
 * source of truth; this range protects the intended 180–220px result if a
 * header row is made narrower or wider in the Customizer. */
.site-branding .custom-logo-link,
.site-header .custom-logo-link {
	display: block;
	width: clamp(11.25rem, 16vw, 13.75rem);
}

.site-branding img,
img.custom-logo {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Kadence emits .header-navigation in current versions and .main-navigation
 * in older/header-builder configurations. Style both native paths instead of
 * replacing the menu markup. */
.site-header .main-navigation a,
.site-header .header-navigation a,
.site-header .mobile-navigation a {
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
	padding-inline: 0.7rem;
	font-size: var(--pk-font-size-sm);
	font-weight: var(--pk-font-weight-medium);
	letter-spacing: 0.01em;
	text-decoration: none;
}

.site-header .main-navigation a:hover,
.site-header .header-navigation a:hover,
.site-header .mobile-navigation a:hover {
	color: var(--pk-color-primary-hover);
}

/*
 * "Varaa aika" in the main navigation.
 *
 * Two selectors on purpose: the first works when the menu item is given the
 * pk-nav-cta class in the menu editor, the second picks up any menu link that
 * points at the booking anchor, so the CTA styles itself with no extra admin
 * step. Kadence's own header Button element is the alternative and needs no
 * CSS from us at all.
 */
.main-navigation ul li.pk-nav-cta > a,
.main-navigation ul li a[href*="#ajanvaraus"],
.header-navigation ul li.pk-nav-cta > a,
.header-navigation ul li a[href*="#ajanvaraus"],
.mobile-navigation ul li.pk-nav-cta > a,
.mobile-navigation ul li a[href*="#ajanvaraus"] {
	background-color: var(--pk-color-primary);
	/* Kadence can emit later, highly specific menu-link colours. This CTA
	 * must keep a white label on its burgundy surface in every state. */
	color: var(--pk-color-text-inverse) !important;
	border-radius: var(--pk-radius-sm);
	padding-inline: 1.2em;
	/* Keeps the CTA a comfortable touch target even if Kadence's nav line
	 * height is tighter than 44px. */
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--pk-transition);
}

.main-navigation ul li.pk-nav-cta > a:hover,
.main-navigation ul li a[href*="#ajanvaraus"]:hover,
.header-navigation ul li.pk-nav-cta > a:hover,
.header-navigation ul li a[href*="#ajanvaraus"]:hover,
.mobile-navigation ul li.pk-nav-cta > a:hover,
.mobile-navigation ul li a[href*="#ajanvaraus"]:hover {
	background-color: var(--pk-color-primary-hover);
	color: var(--pk-color-text-inverse) !important;
}

.main-navigation ul li.pk-nav-cta > a:active,
.main-navigation ul li a[href*="#ajanvaraus"]:active,
.header-navigation ul li.pk-nav-cta > a:active,
.header-navigation ul li a[href*="#ajanvaraus"]:active,
.mobile-navigation ul li.pk-nav-cta > a:active,
.mobile-navigation ul li a[href*="#ajanvaraus"]:active {
	background-color: var(--pk-color-primary-active);
	color: var(--pk-color-text-inverse) !important;
}

.main-navigation ul li.pk-nav-cta > a:focus,
.main-navigation ul li a[href*="#ajanvaraus"]:focus,
.header-navigation ul li.pk-nav-cta > a:focus,
.header-navigation ul li a[href*="#ajanvaraus"]:focus,
.mobile-navigation ul li.pk-nav-cta > a:focus,
.mobile-navigation ul li a[href*="#ajanvaraus"]:focus {
	color: var(--pk-color-text-inverse) !important;
}

/* The burgundy CTA would swallow the normal burgundy focus ring, so it uses
 * the same high-contrast light ring and dark halo as other filled buttons. */
.main-navigation ul li a[href*="#ajanvaraus"]:focus-visible,
.header-navigation ul li a[href*="#ajanvaraus"]:focus-visible,
.mobile-navigation ul li a[href*="#ajanvaraus"]:focus-visible {
	color: var(--pk-color-text-inverse) !important;
	outline-color: var(--pk-color-surface);
	box-shadow: 0 0 0 calc(var(--pk-focus-width) + var(--pk-focus-offset) + 2px)
		var(--pk-color-primary-active);
}

/* Every navigation link should clear the 44px touch target on mobile, where
 * Kadence stacks the menu. */
@media (max-width: 61.99em) {
	.main-navigation ul li a,
	.header-navigation ul li a,
	.mobile-navigation ul li a {
		min-height: 2.75rem;
		display: flex;
		align-items: center;
	}

	/* Kadence's drawer is a fixed dark surface. Declare the inverse colour here
	 * rather than relying on inherited browser/system colours. :visited is
	 * explicit so browser history cannot become a menu variant. WordPress emits
	 * aria-current only for the page currently shown; current-menu-item,
	 * current_page_item and current-menu-ancestor are not precise enough for a
	 * visible page state in a mixed anchor/page menu. */
	#mobile-drawer .mobile-navigation li.menu-item > a:not([href*="#ajanvaraus"]),
	#mobile-drawer .mobile-navigation li.menu-item > a:not([href*="#ajanvaraus"]):visited {
		color: var(--pk-color-text-inverse);
	}

	#mobile-drawer .mobile-navigation li.menu-item > a:not([href*="#ajanvaraus"]):hover,
	#mobile-drawer .mobile-navigation li.menu-item > a:not([href*="#ajanvaraus"]):focus {
		color: var(--pk-color-primary-soft);
	}

	#mobile-drawer .mobile-navigation li.menu-item > a:not([href*="#ajanvaraus"]):focus-visible {
		outline-color: var(--pk-color-surface);
	}

	#mobile-drawer .mobile-navigation li.menu-item > a:not([href*="#ajanvaraus"]):active {
		color: var(--pk-color-rose-border);
	}

	#mobile-drawer .mobile-navigation li.menu-item > a[aria-current="page"]:not([href*="#ajanvaraus"]) {
		color: var(--pk-color-text-inverse);
		text-decoration: underline;
		text-decoration-color: var(--pk-color-primary-soft);
		text-decoration-thickness: 2px;
		text-underline-offset: 0.25em;
	}
}

.site-footer,
#colophon {
	background-color: var(--pk-color-blush);
	color: var(--pk-color-text-secondary);
	border-top: 1px solid var(--pk-color-rose-border);
}

.site-footer a,
#colophon a {
	color: var(--pk-color-primary);
}

.site-footer a:hover,
#colophon a:hover {
	color: var(--pk-color-primary-hover);
}

/* Footer content is administered through Kadence's Footer Builder. These
 * component styles turn its HTML element into a calm, Piikula-specific footer
 * without duplicating the builder's markup in the child theme. */
.pk-footer {
	max-width: var(--pk-width-content);
	margin-inline: auto;
	padding: var(--pk-space-2xl) var(--pk-gutter);
}

.pk-footer__main {
	display: grid;
	gap: var(--pk-space-xl);
	padding-bottom: var(--pk-space-xl);
	border-bottom: 1px solid var(--pk-color-rose-border);
}

.pk-footer__business {
	margin: 0 0 var(--pk-space-xs);
	color: var(--pk-color-text);
	font-family: var(--pk-font-heading);
	font-size: var(--pk-font-size-h3);
	font-weight: var(--pk-font-weight-heading);
	line-height: var(--pk-line-height-snug);
}

.pk-footer__address,
.pk-footer__contact {
	margin: 0;
	font-style: normal;
}

.pk-footer__contact a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: var(--pk-font-weight-medium);
}

.pk-footer__bottom {
	margin: var(--pk-space-lg) 0 0;
	font-size: var(--pk-font-size-sm);
	color: var(--pk-color-text-muted);
}

.pk-footer__bottom a {
	color: var(--pk-color-primary);
	font-weight: var(--pk-font-weight-medium);
}

@media (max-width: 61.99em) {
	/* Footer attribution is still an interactive link on touch devices. */
	.pk-footer__bottom a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}
}

@media (min-width: 48em) {
	.pk-footer__main {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: end;
	}
}

/* -------------------------------------------------------------------------
 * Logo
 *
 * The production logo is a PNG with a real alpha channel, so it sits directly
 * on any background and no longer needs the white backdrop the earlier JPEG
 * version required.
 *
 * The asset carries the official palette: its colours were mapped back onto
 * the specification after the background-removal tool had shifted them. It is
 * verified pixel by pixel — all four white dots and the white ring inside the
 * oval are opaque white, there are no holes in the artwork, and the edge is a
 * normal antialiased fringe with no white halo.
 *
 * The file carries its own transparent margin, and that margin is uneven
 * (15px left against 37px right at its native 600x360), so the artwork does
 * not sit optically centred in its box. Position it deliberately rather than
 * assuming it centres itself.
 * ---------------------------------------------------------------------- */

.pk-logo {
	display: inline-block;
}

.pk-logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
 * Motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}