/* ==========================================================================
   Kalm Cabin — Shared Styles (Preview)
   ========================================================================== */

:root {
	--color-bg:         #F7F3EE;
	--color-text:       #2C2825;
	--color-text-muted: #7A6F66;
	--color-accent:     #8B7355;
	--color-border:     #E0D8CF;
	--color-white:      #FFFFFF;
	--color-dark:       #1a1816;
	--font-serif: 'Cormorant Garamond', Georgia, serif;
	--font-sans:  'Jost', system-ui, sans-serif;
	--page-pad: 2.5rem;
}

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

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
}

body {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text);
	background-color: var(--color-bg);
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
ul { list-style: none; }

/* --- Shared Utility --- */
.label {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.65rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--color-text-muted);
	margin-bottom: 1rem;
}
.label--light { color: rgba(255,255,255,0.6); }

.section-heading {
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-text);
}
.section-heading--light { color: var(--color-white); }

.discover-link {
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: opacity 0.3s ease;
}
.discover-link:hover { opacity: 0.5; }

/* ==========================================================================
   HEADER — Shared base
   ========================================================================== */
.site-header {
	position: fixed;
	top: 0; left: 0; width: 100%;
	z-index: 100;
	transition: background-color 0.5s ease;
}
.site-header--transparent { background: transparent; }
.site-header--solid {
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.site-header__logo {
	font-family: var(--font-serif);
	font-size: 1.6rem;
	font-weight: 400;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	transition: color 0.4s ease;
}
.site-header--transparent .site-header__logo { color: var(--color-white); }
.site-header--solid .site-header__logo { color: var(--color-text); }

.site-header__left,
.site-header__right {
	display: flex;
	align-items: center;
}
.site-header__right {
	gap: 1.5rem;
	justify-content: flex-end;
}

.site-header__lang {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: color 0.4s ease;
	display: none;
}
.site-header--transparent .site-header__lang { color: var(--color-white); }
.site-header--solid .site-header__lang { color: var(--color-text); }

.site-header__reserve {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 0.6rem 1.4rem;
	cursor: pointer;
	transition: opacity 0.3s ease;
	border: none;
}
.site-header--transparent .site-header__reserve {
	background: var(--color-white);
	color: var(--color-text);
}
.site-header--solid .site-header__reserve {
	background: var(--color-text);
	color: var(--color-white);
}
.site-header__reserve:hover { opacity: 0.85; }

/* --- Header Style 1: Homepage — Menu | Logo center | Reserve --- */
.site-header__inner--home {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 1.25rem var(--page-pad);
}
.site-header__menu-btn {
	background: none; border: none; cursor: pointer;
	font-family: var(--font-sans);
	font-size: 0.8rem; font-weight: 400;
	text-transform: uppercase; letter-spacing: 0.14em;
	transition: color 0.4s ease, opacity 0.3s ease;
}
.site-header__menu-btn:hover { opacity: 0.6; }
.site-header--transparent .site-header__menu-btn { color: var(--color-white); }
.site-header--solid .site-header__menu-btn { color: var(--color-text); }
.site-header__center { text-align: center; }

/* --- Header Style 2: Property — Logo left | Nav | Reserve --- */
.site-header__inner--property {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem var(--page-pad);
}

.site-header__nav { display: none; }

.nav-menu {
	display: flex;
	gap: 2rem;
	list-style: none;
}
.nav-menu li a {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: opacity 0.3s ease, color 0.4s ease;
}
.nav-menu li a:hover { opacity: 0.6; }
.site-header--transparent .nav-menu li a { color: var(--color-white); }
.site-header--solid .nav-menu li a { color: var(--color-text); }

/* ==========================================================================
   HEADER STYLE 3 — Resort: Two-row with sub-nav
   ========================================================================== */
.site-header__inner--resort-main {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 1rem var(--page-pad);
}

.site-header__menu-btn {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--font-sans);
	transition: opacity 0.3s ease;
}
.site-header__menu-btn:hover { opacity: 0.6; }

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
	display: block;
	width: 20px;
	height: 1.5px;
	background-color: var(--color-text);
	position: relative;
	transition: all 0.3s ease;
}
.hamburger-icon::before,
.hamburger-icon::after {
	content: '';
	position: absolute;
	left: 0;
	width: 20px;
}
.hamburger-icon::before { top: -6px; }
.hamburger-icon::after { top: 6px; }

.site-header__menu-label {
	font-size: 0.8rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text);
}

.site-header__search-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-text);
	padding: 0;
	margin-left: 1rem;
	display: flex;
	align-items: center;
	transition: opacity 0.3s ease;
}
.site-header__search-btn:hover { opacity: 0.6; }

.site-header--resort .site-header__center { text-align: center; }
.site-header--resort .site-header__logo {
	font-size: 1.75rem;
	letter-spacing: 0.3em;
	color: var(--color-text);
}

/* Sub-navigation row */
.site-header__subnav {
	border-top: 1px solid var(--color-border);
}
.site-header__subnav-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	padding: 0.85rem var(--page-pad);
	overflow-x: auto;
	scrollbar-width: none;
}
.site-header__subnav-inner::-webkit-scrollbar { display: none; }

.site-header__property-name {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-text);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-shrink: 0;
}
.site-header__property-arrow {
	font-size: 0.8rem;
	line-height: 1;
	color: var(--color-text-muted);
}

.subnav-menu {
	display: flex;
	gap: 1.75rem;
	list-style: none;
	white-space: nowrap;
}
.subnav-menu li a {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--color-text);
	transition: opacity 0.3s ease;
}
.subnav-menu li a:hover { opacity: 0.5; }

/* Resort sub-nav: hide links on mobile */
.site-header__subnav-links { display: none; }

/* Hamburger */
.site-header__toggle {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	background: none; border: none; cursor: pointer;
	position: relative; z-index: 110;
}
.hamburger,
.hamburger::before,
.hamburger::after {
	display: block; width: 22px; height: 1.5px;
	transition: all 0.3s ease;
}
.hamburger::before,
.hamburger::after { content: ''; position: absolute; }
.hamburger::before { transform: translateY(-7px); }
.hamburger::after { transform: translateY(7px); }
.site-header--transparent .hamburger,
.site-header--transparent .hamburger::before,
.site-header--transparent .hamburger::after { background-color: var(--color-white); }
.site-header--solid .hamburger,
.site-header--solid .hamburger::before,
.site-header--solid .hamburger::after { background-color: var(--color-text); }
.site-header__toggle[aria-expanded="true"] .hamburger { background-color: transparent; }
.site-header__toggle[aria-expanded="true"] .hamburger::before { transform: rotate(45deg); background-color: var(--color-white); }
.site-header__toggle[aria-expanded="true"] .hamburger::after { transform: rotate(-45deg); background-color: var(--color-white); }

/* Nav overlay — light, 1/3 left panel */
.nav-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 38%; max-width: 420px; height: 100%;
	z-index: 105;
	background: var(--color-bg);
	border-right: 1px solid var(--color-border);
	display: flex; align-items: flex-start; justify-content: flex-start;
	transform: translateX(-100%);
	opacity: 0; visibility: hidden;
	transition: transform 0.4s ease, opacity 0.3s ease, visibility 0.4s ease;
}
.nav-overlay.is-active { transform: translateX(0); opacity: 1; visibility: visible; }
.nav-overlay__close {
	position: absolute; top: 1.25rem; right: 1.5rem;
	background: none; border: none; cursor: pointer;
	font-size: 1.5rem; font-weight: 300;
	line-height: 1;
	color: var(--color-text);
}
.nav-overlay__close:hover { opacity: 0.6; }
.nav-overlay__menu { list-style: none; text-align: left; padding: 5rem 2.5rem 2rem; }
.nav-overlay__menu li { margin-bottom: 1.75rem; }
.nav-overlay__menu li a {
	font-family: var(--font-serif);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 400; color: var(--color-text);
	transition: opacity 0.3s ease;
}
.nav-overlay__menu li a:hover { opacity: 0.5; }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.newsletter {
	padding: 3.5rem var(--page-pad);
	border-top: 1px solid var(--color-border);
}
.newsletter__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
}
.newsletter__title {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: 400;
	font-style: italic;
	margin-bottom: 0.5rem;
}
.newsletter__desc {
	font-size: 0.8rem;
	font-weight: 300;
	color: var(--color-text-muted);
	line-height: 1.6;
	max-width: 500px;
}
.newsletter__form { display: flex; gap: 0; }
.newsletter__input {
	flex: 1;
	font-family: var(--font-sans);
	font-size: 0.85rem; font-weight: 300;
	padding: 0.85rem 1rem;
	border: 1px solid var(--color-border);
	border-right: none;
	background: transparent;
	color: var(--color-text);
}
.newsletter__input::placeholder { color: var(--color-text-muted); }
.newsletter__input:focus { outline: none; border-color: var(--color-accent); }
.newsletter__btn {
	font-family: var(--font-sans);
	font-size: 0.65rem; font-weight: 400;
	text-transform: uppercase; letter-spacing: 0.12em;
	padding: 0.85rem 1.75rem;
	background: var(--color-text);
	color: var(--color-white);
	border: 1px solid var(--color-text);
	cursor: pointer;
	transition: opacity 0.3s ease;
	white-space: nowrap;
}
.newsletter__btn:hover { opacity: 0.85; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
	padding: 4rem var(--page-pad) 2rem;
	border-top: 1px solid var(--color-border);
}
.footer-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	margin-bottom: 3rem;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.footer-col__title {
	font-family: var(--font-sans);
	font-size: 0.7rem; font-weight: 500;
	text-transform: uppercase; letter-spacing: 0.1em;
	color: var(--color-text); margin-bottom: 1rem;
}
.footer-col ul li { margin-bottom: 0.35rem; }
.footer-col ul li a {
	font-size: 0.8rem; font-weight: 300;
	color: var(--color-text-muted);
	transition: color 0.3s ease;
}
.footer-col ul li a:hover { color: var(--color-text); }

.footer-bottom {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: center;
	padding-top: 2rem;
	border-top: 1px solid var(--color-border);
	max-width: 1200px;
	margin: 0 auto;
}
.footer-bottom__logo {
	font-family: var(--font-serif);
	font-size: 1.25rem; font-weight: 400;
	letter-spacing: 0.25em; text-transform: uppercase;
}
.footer-bottom__social {
	display: flex; gap: 1.25rem; align-items: center;
}
.footer-bottom__social a {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	transition: color 0.3s ease;
}
.footer-bottom__social a:hover { color: var(--color-text); }
.footer-bottom__copy {
	font-size: 0.65rem;
	color: var(--color-text-muted);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 768px) {
	.site-header__lang { display: block; }
	.site-header--property .site-header__nav { display: block; }
	.site-header--property .site-header__toggle { display: none; }
	.site-header__subnav-links { display: block; }
	.newsletter__inner { grid-template-columns: 1fr 1fr; align-items: center; }
	.footer-columns { grid-template-columns: repeat(2, 1fr); }
	.footer-bottom { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 1024px) {
	:root { --page-pad: 3.5rem; }
	.footer-columns { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1280px) {
	:root { --page-pad: 5rem; }
}