/*
 * Tokens, base typography and page frame. Mobile first: base styles are the
 * smallest screen, min-width queries add the larger ones. Header numbers come
 * from .scratch/header-polish/spec.md.
 */

@font-face {
	font-family: "SM Kanit Light";
	src: url(../fonts/kanit-300-thai.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* Fonts are self-hosted (SIL OFL, licence texts beside the files); nothing is requested from a font CDN. */
@font-face {
	font-family: Montserrat;
	src: url(../fonts/montserrat-latin-300-500.woff2) format("woff2");
	font-weight: 300 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Royal options: text #7d7367, headings and menu #b7816d. */
	--sm-text: #7d7367;
	--sm-ink: #b7816d;
	--sm-pink: #fb6d87;
	--sm-surface: #fff;
	/* Page background sampled from the royal-child baseline. */
	--sm-bg: #fcfefd;
	--sm-shadow: 0 8px 24px rgb(58 46 42 / 0.08);
	/* Header icons: fill, rim and hover. */
	--sm-icon-fill: #eddad3;
	--sm-icon-line: #edebea;
	--sm-icon-hover: #d5bdb4;
	/* Footer strip and its two text colours. */
	--sm-footer-strip: #d2b1a8;
	--sm-footer-copy: #d3b5aa;
	--sm-footer-address: #898076;
	--sm-font: Montserrat, "SM Kanit Light", Kanit, sans-serif;
	--sm-transition: 150ms;
	/* Height of the header (band + bar): content that sits below it reserves this much. */
	--sm-header-h: 68px;
}

@media (min-width: 1280px) {
	:root {
		--sm-header-h: 92px;
	}
}

/*
 * Width of the page content: the old site's Bootstrap container (750, 970 and 1170 px wide with 15px gutters), so the content
 * is 720, 940 and 1140 px from 768, 992 and 1200px, and the screen less 30px below that. Blocks read it with their own
 * fallback. The header has its own widths (.scratch/header-polish/spec.md).
 */
:root {
	--sm-container: calc(100% - 30px);
}

@media (min-width: 768px) {
	:root {
		--sm-container: 720px;
	}
}

@media (min-width: 992px) {
	:root {
		--sm-container: 940px;
	}
}

@media (min-width: 1200px) {
	:root {
		--sm-container: 1140px;
	}
}

@media (min-width: 1440px) {
	:root {
		--sm-header-h: 100px;
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--sm-bg);
	color: var(--sm-text);
	font-family: var(--sm-font);
	font-size: 14px;
	line-height: 1.7;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--sm-ink);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--sm-ink);
	font-weight: 400;
}

.screen-reader-text,
.skip-link:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	padding: 12px 16px;
	background: var(--sm-surface);
	color: var(--sm-ink);
	outline: 2px solid var(--sm-pink);
}

/* The header overlays the top of the page; content that is not a full-bleed banner starts below it. */
.site-main {
	padding-top: var(--sm-header-h);
}

body.sm-header-overlay .site-main {
	padding-top: 0;
}

.content-shell {
	width: var(--sm-container);
	margin: 0 auto;
	padding: 24px 0 48px;
}

/* A page that ends with a full-width band (a section, the picture strip) runs into the footer, as the old pages did. */
.content-shell:has(.entry__content > .sm-fullbleed:last-child) {
	padding-bottom: 0;
}

.entry__title {
	margin: 0 0 16px;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.2;
}

.entry__content > :first-child {
	margin-top: 0;
}

.entry__content > :last-child {
	margin-bottom: 0;
}

/* Search modal ----------------------------------------------------------- */

.sm-search-modal {
	width: min(640px, calc(100% - 32px));
	margin: 20vh auto 0;
	padding: 24px;
	border: 0;
	background: var(--sm-surface);
	box-shadow: var(--sm-shadow);
	color: var(--sm-text);
}

.sm-search-modal::backdrop {
	background: rgb(58 46 42 / 0.5);
}

.sm-search-modal__form {
	display: flex;
	gap: 8px;
	padding-right: 44px;
}

.sm-search-modal__field {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--sm-icon-fill);
	background: var(--sm-surface);
	color: var(--sm-text);
	font: inherit;
}

.sm-search-modal__submit {
	height: 44px;
	padding: 0 20px;
	border: 0;
	background: var(--sm-ink);
	color: #fff;
	font: inherit;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--sm-transition);
}

.sm-search-modal__submit:hover {
	background: var(--sm-icon-hover);
}

.sm-search-modal__field:focus-visible,
.sm-search-modal__submit:focus-visible,
.sm-search-modal__close:focus-visible,
.back-top:focus-visible {
	outline: 2px solid var(--sm-pink);
	outline-offset: 2px;
}

.sm-search-modal__close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.sm-search-modal__close::before,
.sm-search-modal__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	margin: -1px 0 0 -10px;
	background: var(--sm-pink);
	transform: rotate(45deg);
}

.sm-search-modal__close::after {
	transform: rotate(-45deg);
}

/* Back to top ------------------------------------------------------------ */

.back-top {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 900;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sm-icon-fill);
	box-shadow: 0 0 0 1px var(--sm-icon-fill), inset 0 0 0 3px var(--sm-icon-line);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--sm-transition), background-color var(--sm-transition), visibility 0s var(--sm-transition);
}

.back-top::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 14px;
	height: 14px;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 5.5 4 2.5 7 5.5' fill='none' stroke='%23000' stroke-width='1.2'/%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 8 8'%3E%3Cpath d='M1 5.5 4 2.5 7 5.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.back-top.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--sm-transition), background-color var(--sm-transition);
}

.back-top:hover {
	background-color: var(--sm-icon-hover);
}

@media (min-width: 1280px) {
	.back-top {
		right: 24px;
		bottom: 24px;
	}
}