/*
Theme Name: Stay4Night
Theme URI: https://stay4night.fi
Description: Child theme of Twenty Twenty-Five for stay4night.fi. Custom styles, template overrides and patterns belong here, not in the parent.
Author: WebAula
Author URI: https://webaula.fi
Template: twentytwentyfive
Version: 1.23.1
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stay4night
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, translation-ready, wide-blocks, block-styles, accessibility-ready
*/

/*
 * Parent styles load first (twentytwentyfive-style), this file loads after them.
 * Prefer theme.json for colours, fonts and spacing; use this file only for what
 * theme.json cannot express.
 */

/*
 * Language switcher chips.
 *
 * Polylang renders nav > ul.wp-block-polylang-language-switcher > li.lang-item > a.
 * The slug (fi, sv) comes from the pll_the_languages_args filter in inc/polylang.php;
 * uppercasing happens here so the markup keeps the real slug.
 *
 * The inactive chip tint is mixed from the two brand colours rather than adding a
 * third hardcoded grey to the palette.
 */
.wp-block-polylang-language-switcher {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-polylang-language-switcher .lang-item a {
	display: block;
	padding: 0.45rem 0.7rem;
	border-radius: 0.35rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, var(--wp--preset--color--surface));
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.wp-block-polylang-language-switcher .lang-item.current-lang a {
	background-color: var(--wp--preset--color--base);
}

/*
 * Hero video play/pause badge.
 *
 * Injected by assets/js/hero-video.js, and only when a Cover block actually has a
 * video background. It sits in normal flow above the heading rather than being
 * absolutely positioned, so nothing overlaps and the layout stays block-native.
 */
.s4n-video-toggle {
	position: relative;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.s4n-video-toggle__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: s4n-badge-spin 22s linear infinite;
}

.s4n-video-toggle__ring text {
	fill: currentColor;
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
}

.s4n-video-toggle__glyph {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
}

.s4n-video-toggle__glyph .s4n-glyph {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.s4n-video-toggle .s4n-glyph-pause {
	display: none;
}

.s4n-video-toggle.is-playing .s4n-glyph-play {
	display: none;
}

.s4n-video-toggle.is-playing .s4n-glyph-pause {
	display: block;
}

.s4n-video-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 4px;
}

@keyframes s4n-badge-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.s4n-video-toggle__ring {
		animation: none;
	}
}

/*
 * A YouTube hero badge is inserted immediately but cannot act until the IFrame
 * Player API has loaded and the player reports ready, so it is visibly muted until
 * then. Self-hosted video badges are never pending.
 */
.s4n-video-toggle--pending {
	opacity: 0.55;
	cursor: progress;
}

/*
 * Front page intro section: eyebrow pill, text links, image grid.
 *
 * Selectors are doubled up (.wp-block-group.s4n-*) so they outweigh the layout
 * rules core generates for the same element.
 */
.wp-block-group.s4n-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	width: auto;
	padding: 0.55rem 1.25rem 0.55rem 1rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
}

.wp-block-group.s4n-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 1.5rem;
	height: 2px;
	background-color: var(--wp--preset--color--primary);
}

.s4n-eyebrow p {
	margin: 0;
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 0.95rem;
	font-weight: 700;
}

.s4n-textlinks a {
	padding-bottom: 0.3rem;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	text-decoration: none;
}

.wp-block-group.s4n-gallery-wrap {
	position: relative;
	margin-top: var(--wp--preset--spacing--70);
}

.wp-block-group.s4n-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.wp-block-group.s4n-gallery > * {
	margin: 0;
}

/* First image is the tall one on the left; the next four fill a 2x2 to its right. */
.s4n-gallery > figure:nth-child(1) {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}

/* Everything past the fifth exists only to feed the lightbox. */
.s4n-gallery > figure:nth-child(n+6) {
	display: none;
}

.s4n-gallery > figure img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	object-fit: cover;
}

.s4n-gallery > figure:not(:first-child) img {
	aspect-ratio: 4 / 3;
}

.s4n-gallery__item {
	cursor: zoom-in;
}

.s4n-gallery__more {
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.1rem;
	border: 0;
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
}

.s4n-gallery__more svg {
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
}

@media (max-width: 781px) {
	.wp-block-group.s4n-gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	.s4n-gallery > figure:nth-child(1) {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.s4n-gallery > figure:nth-child(1) img {
		aspect-ratio: 4 / 3;
	}
}

/*
 * Gallery lightbox, built by assets/js/gallery.js.
 *
 * The overlay uses display:grid, which would beat the browser default for [hidden],
 * so the hidden state is restated explicitly.
 */
.s4n-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-rows: minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: center;
	justify-items: center;
	padding: 1.5rem;
	background-color: rgba(17, 17, 17, 0.93);
}

.s4n-lightbox[hidden] {
	display: none;
}

html.s4n-lightbox-open {
	overflow: hidden;
}

.s4n-lightbox__figure {
	display: grid;
	grid-column: 2;
	grid-row: 1;
	place-items: center;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

.s4n-lightbox__image {
	max-width: 100%;
	max-height: 80vh;
	border-radius: 12px;
}

.s4n-lightbox__nav,
.s4n-lightbox__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.s4n-lightbox__nav svg,
.s4n-lightbox__close svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.s4n-lightbox__nav--prev {
	grid-column: 1;
	grid-row: 1;
}

.s4n-lightbox__nav--next {
	grid-column: 3;
	grid-row: 1;
}

.s4n-lightbox__close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
}

.s4n-lightbox__counter {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 0.9rem;
}

.s4n-lightbox__nav:focus-visible,
.s4n-lightbox__close:focus-visible,
.s4n-gallery__more:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.s4n-lightbox {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(0, 1fr) auto auto;
	}

	.s4n-lightbox__figure {
		grid-column: 1;
	}

	.s4n-lightbox__nav--prev,
	.s4n-lightbox__nav--next {
		grid-column: 1;
		grid-row: 3;
	}

	.s4n-lightbox__nav--prev {
		justify-self: start;
	}

	.s4n-lightbox__nav--next {
		justify-self: end;
	}
}

/*
 * Lightbox loading feedback.
 *
 * A navigation keeps the current picture on screen while the next one loads, so the
 * only cue needed is a brief dim, and only when the wait is long enough to notice.
 */
.s4n-lightbox__image {
	transition: opacity 120ms linear;
}

.s4n-lightbox__figure.is-loading .s4n-lightbox__image {
	opacity: 0.45;
}

/*
 * Room cards, rendered by [s4n_huoneet].
 *
 * The image strip is a CSS scroll-snap track, so swipe and keyboard scrolling work
 * without JavaScript; assets/js/room-cards.js only adds the arrow and the position
 * indicator.
 */
.s4n-rooms {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}

.s4n-room-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 1rem;
	border-radius: 20px;
	background-color: var(--wp--preset--color--base);
}

.s4n-media {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
}

.s4n-media__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.s4n-media__track::-webkit-scrollbar {
	display: none;
}

.s4n-media__image {
	flex: 0 0 100%;
	width: 100%;
	height: auto;
	object-fit: cover;
	scroll-snap-align: start;
}

/* Room cards crop to the design ratio; space cards fill their column instead. */
.s4n-room-card .s4n-media__image {
	aspect-ratio: 900 / 580;
}

.s4n-room-card__count {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	margin: 0;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 0.85rem;
	font-weight: 600;
}

.s4n-media__nav {
	position: absolute;
	top: 50%;
	right: 0.85rem;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	transform: translateY(-50%);
	cursor: pointer;
}

.s4n-media__nav svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.s4n-media__dots {
	position: absolute;
	bottom: 0.85rem;
	left: 50%;
	display: flex;
	gap: 0.4rem;
	transform: translateX(-50%);
}

.s4n-media__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
	cursor: pointer;
}

.s4n-media__dot.is-active {
	background-color: var(--wp--preset--color--base);
}

.s4n-media__position {
	position: absolute;
	bottom: 0.85rem;
	left: 50%;
	margin: 0;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 0.75rem;
	transform: translateX(-50%);
}

.s4n-room-card__body {
	padding: 1.25rem 0.5rem 0.5rem;
}

.s4n-room-card__title {
	margin: 0 0 0.9rem;
	font-family: var(--wp--preset--font-family--termina);
	font-size: 1.6rem;
	font-weight: 700;
}

.s4n-room-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	margin: 0 0 1.4rem;
	padding: 0;
	list-style: none;
}

.s4n-room-card__fact {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 0.95rem;
}

/*
 * Icons are inlined from assets/icons only when the file exists.
 * Sized by height with width auto, so the non-square glyphs keep their proportions
 * instead of being letterboxed into a square.
 */
.s4n-icon {
	display: inline-flex;
	align-items: center;
}

.s4n-icon svg {
	display: block;
	width: auto;
	height: 1.05em;
	fill: currentColor;
}

.s4n-room-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}

.s4n-room-card__book {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-weight: 600;
	text-decoration: none;
}

.s4n-room-card__more {
	padding-bottom: 0.3rem;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--proxima-nova);
	text-decoration: none;
}

@media (max-width: 781px) {
	.s4n-rooms {
		grid-template-columns: 1fr;
	}
}

/*
 * Common space cards, rendered by [s4n_yleiset_tilat].
 *
 * Image on the left, text on the right, four to a page in a two by two grid. With more
 * than four spaces the pages become a horizontal scroll-snap strip so the section
 * advances four at a time.
 */
.s4n-pager__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.s4n-pager__track::-webkit-scrollbar {
	display: none;
}

/*
 * A page is always a two by two grid of four slots. A final page holding fewer than
 * four keeps the same geometry and leaves the spare slots empty, so card sizes never
 * change between pages and the pages stay the same height.
 */
.s4n-pager__page {
	display: grid;
	flex: 0 0 100%;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, auto);
	align-content: start;
	gap: 2rem;
	scroll-snap-align: start;
}

.s4n-pager__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

.s4n-pager__nav {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.s4n-pager__nav svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.s4n-pager__dots {
	display: flex;
	gap: 0.4rem;
}

.s4n-pager__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	cursor: pointer;
}

.s4n-pager__dot.is-active {
	background-color: var(--wp--preset--color--contrast);
}

.s4n-pager__position {
	margin: 0;
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 0.9rem;
}

.s4n-space-card {
	display: flex;
	min-height: 300px;
	overflow: hidden;
	border-radius: 20px;
	background-color: var(--wp--preset--color--base);
}

/* The media column is a fixed share and its image fills the full card height. */
.s4n-space-card {
	padding: 0.75rem;
}

.s4n-space-card .s4n-media {
	flex: 0 0 52%;
	border-radius: 14px;
}

.s4n-space-card .s4n-media,
.s4n-space-card .s4n-media__track {
	height: 100%;
}

.s4n-space-card .s4n-media__image {
	height: 100%;
}

.s4n-space-card__body {
	flex: 1 1 auto;
	padding: 2rem 2rem 2rem 2.25rem;
}

.s4n-space-card__title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--termina);
	font-size: 1.5rem;
	font-weight: 700;
}

.s4n-space-card__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 0.9rem;
	line-height: 1.55;
}

@media (max-width: 781px) {
	.s4n-pager__page {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.s4n-space-card {
		flex-direction: column;
		min-height: 0;
	}

	/*
	 * The desktop rules stretch the media to the full card height, which is right
	 * beside the text but fatal above it: the image would fill the card and push the
	 * title and paragraph out of an overflow:hidden box. Reset all three.
	 */
	.s4n-space-card .s4n-media,
	.s4n-space-card .s4n-media__track {
		height: auto;
	}

	.s4n-space-card .s4n-media {
		flex: 0 0 auto;
	}

	.s4n-space-card .s4n-media__image {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.s4n-space-card__body {
		padding: 1.25rem 1rem 0.75rem;
	}
}

/*
 * Location block, rendered by [s4n_sijainti].
 *
 * Map on the left, nearby places on the right. The iframe is lazy, so Google is only
 * contacted once the section is scrolled into view.
 */
.s4n-location {
	display: grid;
	grid-template-columns: 1.75fr 1fr;
	gap: 5rem;
	align-items: start;
}

.s4n-location__map {
	position: relative;
	overflow: hidden;
	aspect-ratio: 76 / 49;
	border-radius: 20px;
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, var(--wp--preset--color--surface));
}

.s4n-location__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.s4n-location__hint {
	margin: 0;
	padding: 1.5rem;
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 0.9rem;
}

.s4n-location__title {
	margin: 0 0 1.75rem;
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 1rem;
	font-weight: 700;
}

.s4n-location__list {
	display: grid;
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.s4n-location__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 0.95rem;
}

.s4n-location__name {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
}

.s4n-location__distance {
	white-space: nowrap;
}

@media (max-width: 781px) {
	.s4n-location {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/*
 * Footer.
 *
 * Colours live here rather than on the block, because Twenty Twenty-Five ships no
 * example of a block carrying both a custom class and colour attributes, and the class
 * ordering in saved markup would be guesswork. One palette token, one place.
 *
 * display: flow-root is load bearing. The booking card is pulled up with a negative
 * top margin so it straddles the footer edge, and without a new block formatting
 * context that margin would collapse through and drag the dark background up with it.
 *
 * The strip above the dark area is what gives the floating card room to sit in. It used
 * to be the footer's own top margin, but a margin is transparent, so it showed the page
 * background: fine where the page ends on surface, wrong where it ends on a tinted band
 * like the room gallery, which left a pale stripe between the band and the footer.
 *
 * So the footer paints that strip itself with ::before, in the colour of whatever
 * section ends the page. The default is surface; a template whose last section is
 * tinted sets --s4n-prefooter-bg (see the body class rules below). The strip has to be
 * taller than the card's negative margin, or the card lands on the section above
 * instead of in a gap of its own.
 */
.s4n-footer {
	display: flow-root;
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 3rem;
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
}

/*
 * WordPress puts a root layout gap between the top level blocks, via
 * :where(.wp-site-blocks) > * { margin-block-start: 1.2rem }. The footer arrives
 * wrapped in its own <footer class="wp-block-template-part">, so that margin lands on
 * the wrapper and zeroing it on .s4n-footer inside does nothing at all. The gap is
 * transparent, so it showed the page background as a pale line between a coloured last
 * section and the footer. The footer supplies its own leading space with the strip
 * below, so the wrapper needs none.
 */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

.s4n-footer::before {
	content: "";
	display: block;
	height: 9rem;
	/*
	 * The footer carries has-global-padding, so without cancelling it the strip stops
	 * 50px short of each edge and the dark colour shows through at the sides. Same
	 * negative margins core uses for .has-global-padding > .alignfull.
	 */
	margin-right: calc(var(--wp--style--root--padding-right) * -1);
	margin-left: calc(var(--wp--style--root--padding-left) * -1);
	background-color: var(--s4n-prefooter-bg, var(--wp--preset--color--surface));
}

/*
 * Per template, because CSS cannot read the previous sibling's colour. The variable is
 * set on body so it inherits into the footer; the footer must not declare its own
 * default or that would beat the inherited value, which is why the fallback lives in
 * the var() call instead.
 */
body.single-s4n_huone {
	--s4n-prefooter-bg: var(--wp--preset--color--surface-alt);
}

.s4n-footer a {
	color: inherit;
	text-decoration: none;
}

.s4n-footer a:hover,
.s4n-footer a:focus-visible {
	text-decoration: underline;
}

.wp-block-group.s4n-booking {
	max-width: 1050px;
	margin: -5.5rem auto 4rem;
	padding: 2.25rem 2.5rem;
	border-radius: 16px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.s4n-booking .wp-block-group {
	align-items: center;
}

.s4n-booking__text {
	display: grid;
	gap: 0.75rem;
}

.s4n-booking h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--termina);
}

.s4n-booking__note {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 1rem;
}

/* The calendar glyph is not in the icon set yet, so this may match nothing. */
.s4n-booking__note .s4n-icon svg {
	height: 1.35em;
}

.s4n-footer__info {
	display: grid;
	gap: 0.5rem;
	padding-bottom: 2.5rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--proxima-nova);
}

.s4n-footer__label {
	margin: 0;
	font-size: 1rem;
}

.s4n-footer__address {
	margin: 0;
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--wp--preset--color--base) 70%, var(--wp--preset--color--dark));
}

.s4n-footer__credits {
	margin: 1.5rem 0 0;
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--wp--preset--color--base) 70%, var(--wp--preset--color--dark));
}

/*
 * Oversized wordmark watermark.
 *
 * No max-width override here on purpose: it stays inside the parent's 1340px content
 * column so it lines up with every other section of the site. It is a direct child of
 * the footer group, so the constrained layout boxes and centres it on its own.
 *
 * It is also not cropped. An earlier version pulled the descenders off the bottom edge
 * with a negative margin, which only reads as intentional while the wordmark is flush
 * to the bottom of the page. Now that there is space beneath it, a cut-off "y" and "g"
 * would just look like a mistake, so the glyphs are whole.
 */
.s4n-wordmark {
	line-height: 0;
	color: color-mix(in srgb, var(--wp--preset--color--base) 20%, var(--wp--preset--color--dark));
}

.s4n-wordmark svg {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 781px) {
	/* Card is pulled up less on mobile, so it needs less room above it. */
	.s4n-footer::before {
		height: 7rem;
	}

	.wp-block-group.s4n-booking {
		margin-top: -4rem;
		padding: 1.75rem;
	}

	.s4n-booking .wp-block-group {
		align-items: flex-start;
	}

	.s4n-booking__note {
		align-items: flex-start;
	}
}

/*
 * Yleisien tilojen mukavuudet
 *
 * A static accordion grid built from native core/details blocks, so the client
 * edits every heading, bullet and placeholder in the block editor with no PHP.
 *
 * Icons are not inlined here the way inc/icons.php does it. These blocks are
 * authored in Gutenberg and cannot call PHP, so each card carries a modifier
 * class that sets --s4n-amn-icon, and the icon is painted as a CSS mask off the
 * same assets/icons/<slug>.svg files. A mask rather than background-image keeps
 * the icon on currentColor, matching the inlined icons elsewhere on the site.
 */

.s4n-amn-label {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	font-weight: 700;
}

.s4n-amn-chips {
	gap: 12px;
	margin-bottom: var( --wp--preset--spacing--50 );
}

.s4n-amn-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 13px 22px;
	border-radius: 999px;
	background: var( --wp--preset--color--base );
	font-size: 0.9375rem;
	line-height: 1;
}

/* The columns hold a stack of cards rather than one flowing block. */
.s4n-amn-grid {
	gap: 24px;
	align-items: flex-start;
}

.s4n-amn-grid > .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.s4n-amn {
	padding: 18px 22px;
	border-radius: 14px;
	background: var( --wp--preset--color--base );
}

.s4n-amn > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	list-style: none;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Hide the native disclosure triangle in both engines. */
.s4n-amn > summary::-webkit-details-marker {
	display: none;
}

.s4n-amn > summary::marker {
	content: "";
}

.s4n-amn > summary::before,
.s4n-amn-chip::before {
	content: "";
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	background: currentColor;
	-webkit-mask: var( --s4n-amn-icon ) center / contain no-repeat;
	mask: var( --s4n-amn-icon ) center / contain no-repeat;
}

/* Chevron, rotated when the card is open. */
.s4n-amn > summary::after {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	margin-left: auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.18s ease;
}

.s4n-amn[open] > summary::after {
	transform: rotate( 180deg );
}

.s4n-amn ul {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 9px;
}

.s4n-amn li {
	position: relative;
	padding-left: 26px;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.s4n-amn li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("assets/icons/check.svg") center / contain no-repeat;
	mask: url("assets/icons/check.svg") center / contain no-repeat;
}

.s4n-amn-placeholder {
	margin: 16px 0 0;
	font-size: 0.9375rem;
	font-style: italic;
	opacity: 0.55;
}

/* One line per card: which icon it wears. */
.s4n-amn--person { --s4n-amn-icon: url("assets/icons/person.svg"); }
.s4n-amn--car { --s4n-amn-icon: url("assets/icons/car.svg"); }
.s4n-amn--wifi { --s4n-amn-icon: url("assets/icons/wifi.svg"); }
.s4n-amn--kitchen { --s4n-amn-icon: url("assets/icons/kitchen.svg"); }
.s4n-amn--room { --s4n-amn-icon: url("assets/icons/room.svg"); }
.s4n-amn--shower { --s4n-amn-icon: url("assets/icons/shower.svg"); }
.s4n-amn--lounge { --s4n-amn-icon: url("assets/icons/lounge.svg"); }
.s4n-amn--media { --s4n-amn-icon: url("assets/icons/media.svg"); }
.s4n-amn--amenities { --s4n-amn-icon: url("assets/icons/amenities.svg"); }
.s4n-amn--accessibility { --s4n-amn-icon: url("assets/icons/accessibility.svg"); }
.s4n-amn--building { --s4n-amn-icon: url("assets/icons/building.svg"); }
.s4n-amn--reception { --s4n-amn-icon: url("assets/icons/reception.svg"); }
.s4n-amn--security { --s4n-amn-icon: url("assets/icons/security.svg"); }
.s4n-amn--languages { --s4n-amn-icon: url("assets/icons/languages.svg"); }
.s4n-amn--check { --s4n-amn-icon: url("assets/icons/check.svg"); }

/* No food.svg in the icon set yet, so Ruoka & juoma borrows the kitchen glyph.
   Drop assets/icons/food.svg in and change this one line. */
.s4n-amn--food { --s4n-amn-icon: url("assets/icons/kitchen.svg"); }

/*
 * Single room page.
 *
 * The hero is the same .s4n-media component the room and space cards use, so
 * assets/js/cards.js already gives it the next arrow and the dot indicator. Only the
 * size and the control placement differ, and both are CSS, so there is no second
 * carousel implementation to keep in step.
 */
.s4n-room-single {
	padding-top: 0.75rem;
	padding-bottom: 0;
}

.s4n-room-hero {
	border-radius: 24px;
}

/*
 * The design letterboxes the photo. The source images are 3:2, so this crops a third
 * of the height away; that is why the crop lives here rather than in a hard cropped
 * image size, which would also cost the srcset.
 */
.s4n-room-hero .s4n-media__image {
	aspect-ratio: 20 / 9;
}

/* Both controls sit on the bottom edge here, not centred down the side as on a card. */
.s4n-room-hero .s4n-media__nav {
	top: auto;
	right: 1.5rem;
	bottom: 1.25rem;
	width: 44px;
	height: 44px;
	transform: none;
}

/*
 * cards.js shows dots up to six slides and a "1 / 14" counter beyond that. Both can
 * appear here depending on how many photos a room has, so both are placed, and the
 * counter is enlarged because on a hero this size the card sizing reads as a stray
 * caption rather than a control.
 */
.s4n-room-hero .s4n-media__dots,
.s4n-room-hero .s4n-media__position {
	bottom: 1.6rem;
}

.s4n-room-hero .s4n-media__position {
	padding: 0.35rem 0.85rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
	font-size: 0.8125rem;
	font-weight: 600;
}

.s4n-room-single__intro {
	margin-top: 3.5rem;
}

.s4n-room-single .wp-block-post-title {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--termina);
	font-size: clamp(2.25rem, 3.4vw, 3rem);
	font-weight: 700;
	line-height: 1.05;
}

.s4n-room-single__text p {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.s4n-room-single__text p:last-child {
	margin-bottom: 0;
}

.s4n-room-single__intro h2 {
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--termina);
	font-size: 1.75rem;
	font-weight: 700;
}

/*
 * Varustelu chips. A flowing list rather than a grid, so a long amenity name such as
 * "Katupysäköinti lähistöllä" keeps its own width instead of stretching a column.
 */
.s4n-varustelu {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.s4n-varustelu__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 11px 20px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 0.9375rem;
	line-height: 1;
}

.s4n-varustelu__item .s4n-icon svg {
	height: 1.25em;
}

@media (max-width: 781px) {
	/* A 20:9 letterbox is unreadable at phone width, so the crop opens up. */
	.s4n-room-hero .s4n-media__image {
		aspect-ratio: 4 / 3;
	}

	.s4n-room-hero {
		border-radius: 16px;
	}

	.s4n-room-single__intro {
		margin-top: 2.5rem;
	}

	.s4n-varustelu__item {
		padding: 10px 16px;
		font-size: 0.875rem;
	}
}

/*
 * The glyphs are not optically equal at a shared size. check.svg is a solid mark that
 * fills its viewBox, while the line icons carry their own padding, so the checkmark
 * read noticeably larger than everything beside it. The chip carries its icon slug as
 * a modifier class so one glyph can be tuned without touching the rest.
 */
.s4n-varustelu__item--check .s4n-icon svg {
	height: 0.95em;
}

/*
 * Kuvagalleria: the whole gallery, paged eight at a time.
 *
 * The paging is the same .s4n-pager component the Yleiset tilat section uses, and the
 * lightbox is the same one the front page gallery uses. Only the grid shape is new: the
 * pager's default page is a 2x2 of cards, this one is 4x2 of photos.
 */
/*
 * Breathing room before the tint starts, so the last row of Varustelu chips is not
 * sitting almost on the edge of the band.
 */
.s4n-roomgallery-section {
	margin-top: var(--wp--preset--spacing--60);
}

.s4n-roomgallery-section h2 {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--termina);
	font-size: 2rem;
	font-weight: 700;
}

.s4n-roomgallery .s4n-pager__page {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.s4n-roomgallery__item {
	margin: 0;
}

/*
 * 3:2 matches the source photos, so this frames them rather than cropping a third away
 * the way the hero letterbox deliberately does.
 */
.s4n-roomgallery__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	border-radius: 12px;
	object-fit: cover;
}

@media (max-width: 781px) {
	.s4n-roomgallery .s4n-pager__page {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	.s4n-roomgallery-section h2 {
		font-size: 1.5rem;
	}
}

/*
 * Mobile navigation.
 *
 * The breakpoint is 1280px and it is measured, not chosen for tidiness: the logo,
 * language chips, five Finnish menu labels and the booking button need 1162px side by
 * side, which with the page padding only fits from about 1262px of viewport. Below that
 * the header used to wrap onto two rows while core's own hamburger waited until 600px.
 *
 * The Navigation block is set to overlayMenu "never", so everything here replaces
 * core's responsive machinery rather than sitting on top of it.
 *
 * Keep 1280 in step with s4n_nav_breakpoint() in inc/mobile-nav.php, which hands the
 * same number to the script.
 */
.s4n-burger {
	display: none;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.s4n-burger:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent);
}

.s4n-burger:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.s4n-burger__box {
	display: grid;
	gap: 5px;
	place-content: center;
	width: 100%;
	height: 100%;
}

.s4n-burger__line {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background-color: currentColor;
	transition: transform 0.25s ease, opacity 0.2s ease, width 0.25s ease;
}

/* The middle bar is shorter, which is the whole visual difference from core's icon. */
.s4n-burger__line:nth-child(2) {
	width: 15px;
	justify-self: start;
}

.s4n-burger:hover .s4n-burger__line:nth-child(2) {
	width: 22px;
}

/*
 * Open state folds the bars into a cross. The outer two travel by the gap plus their
 * own height, which is what puts all three on one centre line before they rotate.
 */
.s4n-burger[aria-expanded="true"] .s4n-burger__line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.s4n-burger[aria-expanded="true"] .s4n-burger__line:nth-child(2) {
	opacity: 0;
}

.s4n-burger[aria-expanded="true"] .s4n-burger__line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.s4n-menu {
	position: fixed;
	inset: 0;
	/*
	 * Stop below the admin bar instead of under it. The bar is position: fixed with
	 * z-index 99999, far above this overlay, so at top: 0 it covered the panel's logo.
	 * WordPress declares --wp-admin--admin-bar--height itself (32px, and 46px below
	 * 782px) and only ships that stylesheet when the bar is actually being shown, so
	 * the 0 fallback is exactly right for logged out visitors.
	 */
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 9999;
	display: block;
	background-color: color-mix(in srgb, var(--wp--preset--color--dark) 45%, transparent);
	opacity: 0;
	transition: opacity 0.28s ease;
}

/*
 * Restated because the rule above sets display, which would otherwise beat the browser
 * default for [hidden] and leave the panel on screen.
 */
.s4n-menu[hidden] {
	display: none;
}

.s4n-menu.is-open {
	opacity: 1;
}

html.s4n-menu-open {
	overflow: hidden;
}

.s4n-menu__panel {
	/*
	 * Load bearing. WordPress ships no universal border-box rule: every box-sizing in
	 * the block library is scoped to a block class, so a hand rolled element like this
	 * one defaults to content-box and its padding is ADDED to the width. At 390px the
	 * panel came out 450 wide and pushed the close button off the screen.
	 */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	height: 100%;
	margin-left: auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--surface);
	transform: translateX(100%);
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.s4n-menu.is-open .s4n-menu__panel {
	transform: translateX(0);
}

.s4n-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: var(--wp--preset--spacing--60);
}

.s4n-menu__logo img {
	display: block;
	width: 170px;
	height: auto;
}

.s4n-menu__close {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.s4n-menu__close span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background-color: currentColor;
}

.s4n-menu__close span:first-child {
	transform: translate(-50%, -50%) rotate(45deg);
}

.s4n-menu__close span:last-child {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.s4n-menu__close:focus-visible,
.s4n-menu__lang:focus-visible,
.s4n-menu__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.s4n-menu__nav {
	flex: 1 1 auto;
	/*
	 * overflow-x must be stated. Setting only overflow-y promotes the other axis from
	 * visible to auto, and the items enter from translateX(18px), which counts as
	 * scrollable overflow: that put a horizontal scrollbar across the panel for the
	 * first 600ms of every open, eating 15px of height as it came and went.
	 */
	overflow-x: hidden;
	overflow-y: auto;
}

.s4n-menu__list,
.s4n-menu__sublist,
.s4n-menu__langs-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Staggered entrance. --s4n-menu-order is set per item in the markup, so the delay
 * comes from the item's own position instead of a stack of nth-child rules.
 */
.s4n-menu__item {
	opacity: 0;
	transform: translateX(18px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	transition-delay: calc(120ms + var(--s4n-menu-order, 0) * 45ms);
}

.s4n-menu.is-open .s4n-menu__item {
	opacity: 1;
	transform: none;
}

.s4n-menu__link {
	position: relative;
	display: inline-block;
	padding: 0.55rem 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--termina);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

/*
 * Hover: an underline that wipes in from the left, matching the primary coloured
 * underline the front page text links already use, plus a small nudge to the right.
 * The current page keeps the underline permanently.
 */
.s4n-menu__label {
	position: relative;
	display: inline-block;
	transition: transform 0.22s ease;
}

.s4n-menu__label::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -4px;
	left: 0;
	height: 3px;
	border-radius: 3px;
	background-color: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.s4n-menu__link:hover .s4n-menu__label,
.s4n-menu__link:focus-visible .s4n-menu__label {
	transform: translateX(6px);
}

.s4n-menu__link:hover .s4n-menu__label::after,
.s4n-menu__link:focus-visible .s4n-menu__label::after,
.s4n-menu__link[aria-current="page"] .s4n-menu__label::after {
	transform: scaleX(1);
}

.s4n-menu__sublist {
	padding: 0 0 0.5rem 1rem;
}

.s4n-menu__sublink {
	display: inline-block;
	padding: 0.3rem 0;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 75%, var(--wp--preset--color--surface));
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 1rem;
	text-decoration: none;
}

.s4n-menu__sublink:hover {
	color: var(--wp--preset--color--contrast);
}

/* Language row, pinned to the bottom of the panel. */
.s4n-menu__langs {
	flex: 0 0 auto;
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}

.s4n-menu__langs-label {
	margin: 0 0 0.6rem;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, var(--wp--preset--color--surface));
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.s4n-menu__langs-list {
	display: flex;
	gap: 0.5rem;
}

.s4n-menu__lang {
	/*
	 * min-width so FI and SV come out identical instead of each sizing to its own two
	 * letters, which left the pair looking slightly mismatched.
	 */
	display: block;
	box-sizing: border-box;
	min-width: 3.5rem;
	padding: 0.6rem 1.1rem;
	text-align: center;
	border-radius: 0.4rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, var(--wp--preset--color--surface));
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.s4n-menu__lang.is-current {
	background-color: var(--wp--preset--color--primary);
}

@media (prefers-reduced-motion: reduce) {
	.s4n-menu,
	.s4n-menu__panel,
	.s4n-menu__item,
	.s4n-menu__label,
	.s4n-menu__label::after,
	.s4n-burger__line {
		transition: none;
	}
}

/*
 * The switch. Below the breakpoint the inline list and the header's language chips go
 * away and the hamburger appears; above it, the hamburger and the overlay do. So the
 * language switcher exists in exactly one place at any width.
 */
@media (max-width: 1279px) {
	.wp-block-navigation.s4n-nav,
	.wp-block-template-part .wp-block-polylang-language-switcher {
		display: none;
	}

	.s4n-burger {
		display: block;
	}
}

@media (min-width: 1280px) {
	.s4n-burger,
	.s4n-menu {
		display: none;
	}
}

@media (max-width: 480px) {
	/*
	 * 20px sides rather than 30. At 360px the widest label had only 5px of clearance
	 * inside the panel, which is no room for a longer page name later.
	 */
	.s4n-menu__panel {
		width: 100%;
		padding: var(--wp--preset--spacing--30);
	}

	/*
	 * "Kahden hengen huoneet" is the widest label. At 1.3rem it came within 10px of the
	 * panel's inner edge on a 390px phone, which is no margin at all once a longer page
	 * name is added.
	 */
	.s4n-menu__link {
		font-size: 1.2rem;
	}
}

/*
 * Anchor targets for the two header menu items whose content lives on the front page
 * rather than on a page of its own.
 *
 * The id sits on the section's content, not on its heading, and measures 105px below
 * it, so a bare jump lands past the heading and the section arrives looking unlabelled.
 * This puts the heading back on screen with a little room above it.
 */
#yleiset-tilat,
#sijainti {
	scroll-margin-top: 140px;
}

/*
 * Header on phones: logo, booking button and hamburger on one row.
 *
 * Below 1280px the row is logo (190px) + booking button + hamburger. At 375px that needs
 * about 430px against 315px available, so the right-hand group wrapped under the logo.
 * The empty language switcher nav (hidden below the breakpoint) also kept a 19px gap
 * beside the logo. The button padding has to beat the inline style the block saves.
 * The hamburger is pulled 12px right so its bars, not its 48px tap target, line up
 * with the page edge. Measured at 375, 360 and 320 with no horizontal scroll.
 */
@media (max-width: 600px) {
	header.wp-block-template-part .is-content-justification-space-between {
		flex-wrap: nowrap;
		gap: 12px;
	}

	header.wp-block-template-part .is-content-justification-space-between > .wp-block-group {
		flex-wrap: nowrap;
		gap: 8px;
		min-width: 0;
	}

	header.wp-block-template-part .wp-block-site-logo img {
		width: 128px;
		height: auto;
	}

	header.wp-block-template-part .wp-block-button__link {
		padding: 10px 16px !important;
		font-size: 0.875rem;
		white-space: nowrap;
	}

	header.wp-block-template-part .s4n-burger {
		margin-right: -12px;
	}
}

@media (max-width: 359px) {
	header.wp-block-template-part .wp-block-site-logo img {
		width: 100px;
	}

	header.wp-block-template-part .wp-block-button__link {
		padding: 9px 12px !important;
	}
}