/*
 * Design "Nocturne": Immersive's full-screen scenes at midnight blue, silver-blue light, Playfair Display titles, rounded glass and pill buttons.
 * A variant of Immersive (villa_designs() 'base'): design-immersive.css loads first, this file after it,
 * so only the colours, fonts and a few details change; the scenes, panels and layout are Immersive's.
 */

/* Fonts (self-hosted) */

@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/playfair-display-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/playfair-display-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/playfair-display-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/playfair-display-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/playfair-display-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Tokens */

:root {
	--ink: #0a0e1a;
	--ink-0: #05070e;
	--ink-2: #0e1324;
	--ink-2-rgb: 14 19 36;
	--ink-3: #131a2e;
	--shade: 5 8 18;
	--glass: rgb(10 14 28 / 0.58);
	--glass-strong: rgb(10 14 28 / 0.76);
	--glass-line: rgb(185 200 226 / 0.16);
	--header-bg: rgb(8 11 22 / 0.74);
	--text-rgb: 232 236 245;
	--field: #1a2238;
	--hover: #222c47;
	--past: #4f5a74;

	--color-text: #e8ecf5;
	--color-text-muted: #a5aec4;
	--color-bg-soft: #1a2238;
	--color-bg-sand: #131a2e;
	--color-dark: #e8ecf5;
	--color-footer: #05070e;
	--color-day-available: #1d2c47;
	--color-day-booked: #7a3346;
	--color-day-past: #131a2e;

	--font-heading: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--radius: 2px;
}

/* Rounded glass panels, fields and photos */
.hero .availability-form,
.about:not(.about--no-photo) .about__content,
.prices__card,
.get-in-touch:not(.get-in-touch--no-photo) .get-in-touch__content,
.theme-page__card,
.flatpickr-calendar,
.language-switcher ul {
	border-radius: 18px;
}

.button,
.site-header__book,
.site-header .header-whatsapp {
	border-radius: 999px;
}

.hero .availability-form__submit {
	border-radius: calc(18px - 6px);
}

.hero__title,
.section-title {
	font-weight: 400;
	letter-spacing: -0.02em;
}

/* A faint moonlit glow at the top of every scene without a photo */
.amenities,
.reviews,
.house-rules:not(.house-rules--small),
.about--no-photo {
	background: radial-gradient(90% 60% at 50% 0%, rgb(185 200 226 / 0.08), transparent 70%), var(--ink-2);
}

.review__text {
	font-style: normal;
}