/*
Theme Name: Villa Clean WP
Theme URI: https://example.com/villa-clean-wp
Author: Villa Clean WP
Author URI: https://example.com
Description: Hand-written, dependency-free WordPress theme for a boutique Bali villa site. Converted from the "Aura Serenity" design system (Playfair Display + Plus Jakarta Sans, warm gold on ivory). Ships a Villa custom post type, per-page content controls, Customizer-driven contact/social settings, a WhatsApp deep-link helper, and native wp_mail contact + booking inquiry forms. No build step, no CDN, no framework.
Version: 1.1.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: villa-clean-wp
*/

/* ==========================================================================
   1. Design Tokens
   ========================================================================== */
:root {
	--color-surface: #f9f9f9;
	--color-surface-dim: #dadada;
	--color-surface-bright: #f9f9f9;
	--color-surface-lowest: #ffffff;
	--color-surface-low: #f3f3f4;
	--color-surface-container: #eeeeee;
	--color-surface-high: #e8e8e8;
	--color-surface-highest: #e2e2e2;

	--color-on-surface: #1a1c1c;
	--color-on-surface-variant: #4f453a;
	--color-outline: #817569;
	--color-outline-variant: #d3c4b5;

	--color-primary: #795524;
	--color-primary-container: #946d3a;
	--color-on-primary: #ffffff;

	--color-secondary: #865300;
	--color-secondary-container: #ffb962;
	--color-on-secondary: #ffffff;

	--color-error: #ba1a1a;
	--color-mist-gray: #f9f9f9;
	--color-slate-charcoal: #233b4a;

	--shadow-ambient: 0px 12px 40px rgba(172, 130, 77, 0.08);
	--shadow-ambient-soft: 0px 12px 40px rgba(172, 130, 77, 0.05);
	--shadow-ambient-faint: 0px 4px 20px rgba(172, 130, 77, 0.05);

	--radius-sm: 0.125rem;
	--radius: 0.25rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-xl: 0.75rem;
	--radius-full: 9999px;

	--font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', serif;
	--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--space-unit: 8px;
	--space-gutter: 32px;
	--margin-desktop: 80px;
	--margin-mobile: 20px;
	--section-padding: 120px;
	--max-width: 1280px;

	--header-height: 80px;

	/* Offset applied to fixed-position chrome so it clears the WP admin bar.
	   Zero for logged-out visitors; overridden below on body.admin-bar. */
	--admin-bar-height: 0px;
}

/* WordPress admin bar offsets. WP core adds the `admin-bar` body class and
   reserves space with an inline `html { margin-top: 32px !important }`
   (46px at max-width 782px, with no exception at narrower widths). A theme's
   own fixed-position chrome sits in the viewport, ignores that html margin,
   and therefore has to mirror the offset itself. The admin bar height only
   ever changes once, at the 782px breakpoint: 32px above, 46px below. */
body.admin-bar {
	--admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--admin-bar-height: 46px;
	}
}

/* Below 601px core switches #wpadminbar to position:absolute (a legacy
   small-screen rule in wp-includes/css/admin-bar.css). The reserved 46px of
   html margin stays, so the bar still covers the top 46px of the viewport at
   scroll top while our fixed header would sit under it, and it would drift out
   of sync with the header as soon as the page scrolls. Keep it fixed so the
   46px offset above stays correct at every scroll position. */
@media screen and (max-width: 600px) {
	#wpadminbar {
		position: fixed !important;
	}
}

/* ==========================================================================
   2. Reset & Base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background-color: var(--color-surface);
	color: var(--color-on-surface);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 24px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--color-on-surface);
}

p {
	margin: 0;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 16px;
	color: inherit;
}

button {
	cursor: pointer;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.honeypot-field {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	height: 0;
	width: 0;
	overflow: hidden;
}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */
.container {
	max-width: var(--max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--margin-mobile);
	padding-right: var(--margin-mobile);
}

@media (min-width: 768px) {
	.container {
		padding-left: var(--margin-desktop);
		padding-right: var(--margin-desktop);
	}
}

.section {
	padding-top: var(--section-padding);
	padding-bottom: var(--section-padding);
}

.section--tight {
	padding-top: calc(var(--section-padding) / 2);
	padding-bottom: calc(var(--section-padding) / 2);
}

.bg-mist {
	background-color: var(--color-surface-low);
}

.text-center {
	text-align: center;
}

.divider {
	width: 64px;
	height: 1px;
	background-color: var(--color-primary);
	margin: 0 auto;
}

.divider--left {
	margin-left: 0;
}

.label-caps {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.eyebrow {
	color: var(--color-primary);
	margin-bottom: 1rem;
	display: block;
}

.section-head {
	text-align: center;
	margin-bottom: 4rem;
}

.section-head h2 {
	font-size: 32px;
	line-height: 40px;
	color: var(--color-primary);
	margin-bottom: 1rem;
}

.section-head p {
	color: var(--color-on-surface-variant);
	max-width: 640px;
	margin: 0 auto;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.9rem 2rem;
	border-radius: var(--radius);
	border: 1px solid transparent;
	transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.btn-primary {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

.btn-primary:hover {
	background-color: var(--color-primary-container);
}

.btn-ghost {
	background-color: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-ghost:hover {
	background-color: rgba(121, 85, 36, 0.06);
}

.btn-block {
	width: 100%;
}

/* ==========================================================================
   5. Site Header
   ========================================================================== */
.site-header {
	position: fixed;
	top: var(--admin-bar-height);
	left: 0;
	right: 0;
	z-index: 500;
	height: var(--header-height);
	background-color: #0a0a0a;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: var(--shadow-ambient);
}

.site-header__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--margin-mobile);
}

@media (min-width: 768px) {
	.site-header__inner {
		padding: 0 var(--margin-desktop);
	}
}

.site-logo {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-display);
	font-size: 22px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-secondary-container);
}

.site-logo img {
	max-height: 60px;
	width: auto;
	display: block;
}

.site-nav {
	display: none;
	align-items: center;
	gap: 2rem;
}

@media (min-width: 768px) {
	.site-nav {
		display: flex;
	}
}

/* wp_nav_menu() wraps the items in <ul class="menu">, so the list itself
   must be the flex row - not just the <nav> container. Scoped to the direct
   child list only, so nested .sub-menu lists don't inherit the row layout. */
.site-nav > ul {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav li {
	position: relative;
	flex: 0 0 auto;
}

.site-nav a {
	display: block;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.2s ease;
}

.site-nav a:hover,
.site-nav a.current,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-ancestor > a {
	color: var(--color-secondary-container);
}

/* Dropdown submenu (desktop, hover-based) */
.site-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	display: flex;
	flex-direction: column;
	min-width: 200px;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: #0a0a0a;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: var(--shadow-ambient);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 600;
}

.site-nav .sub-menu li {
	flex: 0 0 auto;
}

.site-nav .sub-menu a {
	padding: 0.6rem 1.25rem;
	white-space: nowrap;
}

.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 6px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: 0.6;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.header-cta {
	display: none;
}

@media (min-width: 768px) {
	.header-cta {
		display: inline-flex;
	}
}

.site-header .header-cta.btn-primary {
	background-color: var(--color-secondary-container);
	color: var(--color-on-surface);
}

.site-header .header-cta.btn-primary:hover {
	background-color: #ffc978;
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	color: #ffffff;
}

@media (min-width: 768px) {
	.menu-toggle {
		display: none;
	}
}

.menu-toggle .icon-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	position: relative;
}

.menu-toggle .icon-bar::before,
.menu-toggle .icon-bar::after {
	content: '';
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: currentColor;
}

.menu-toggle .icon-bar::before {
	top: -7px;
}

.menu-toggle .icon-bar::after {
	top: 7px;
}

/* Mobile drawer */
.mobile-drawer-overlay {
	position: fixed;
	top: var(--admin-bar-height);
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 600;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.mobile-drawer-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.mobile-drawer {
	position: fixed;
	top: var(--admin-bar-height);
	left: 0;
	bottom: 0;
	z-index: 601;
	width: 82%;
	max-width: 360px;
	background: var(--color-surface-lowest);
	box-shadow: var(--shadow-ambient);
	transform: translateX(-100%);
	transition: transform 0.4s ease;
	padding: var(--space-gutter) var(--margin-mobile);
	overflow-y: auto;
}

.mobile-drawer.is-open {
	transform: translateX(0);
}

.mobile-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.mobile-drawer__head h2 {
	font-size: 22px;
	color: var(--color-primary);
}

.mobile-drawer__close {
	background: none;
	border: none;
	font-size: 22px;
	color: var(--color-on-surface-variant);
	line-height: 1;
	padding: 0.5rem;
}

.mobile-drawer nav {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.mobile-drawer nav a {
	padding: 1rem 0;
	border-bottom: 1px solid rgba(211, 196, 181, 0.2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.mobile-drawer nav a:hover {
	color: var(--color-primary);
}

.mobile-drawer nav .sub-menu {
	list-style: none;
	margin: 0;
	padding-left: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.mobile-drawer nav .sub-menu a {
	padding: 0.75rem 0;
	font-size: 11px;
	border-bottom: 1px solid rgba(211, 196, 181, 0.12);
}

.mobile-drawer .btn {
	margin-top: 2rem;
}

body.drawer-open {
	overflow: hidden;
}

/* ==========================================================================
   6. Hero
   ========================================================================== */
.hero {
	position: relative;
	width: 100%;
	min-height: 80vh;
	overflow: hidden;
	background-color: var(--color-surface-dim);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero__media {
	position: absolute;
	inset: 0;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.38);
}

.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s ease;
}

.hero__slide.is-active {
	opacity: 1;
}

.hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.hero__slide {
		transition: none;
	}
}

.hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.85);
	color: var(--color-on-surface);
	opacity: 0.8;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.hero__arrow .icon {
	width: 20px;
	height: 20px;
}

.hero__arrow--prev {
	left: 16px;
}

.hero__arrow--next {
	right: 16px;
}

.hero__arrow--prev .icon {
	transform: scaleX(-1);
}

.hero__arrow:hover,
.hero__arrow:focus-visible {
	background-color: var(--color-primary);
	color: #fff;
	opacity: 1;
}

.hero__arrow:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.hero__arrow {
		width: 38px;
		height: 38px;
	}

	.hero__arrow--prev {
		left: 8px;
	}

	.hero__arrow--next {
		right: 8px;
	}
}

.hero__content {
	position: relative;
	z-index: 2;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--margin-mobile);
	text-align: center;
	color: #fff;
}

.hero__content h1 {
	font-size: 40px;
	line-height: 48px;
	color: #fff;
	margin-bottom: 1.5rem;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
	.hero__content h1 {
		font-size: 64px;
		line-height: 72px;
		letter-spacing: -0.02em;
	}
}

.hero__content p {
	font-size: 18px;
	line-height: 28px;
	color: rgba(255, 255, 255, 0.92);
	margin-bottom: 2.5rem;
}

.hero--page {
	min-height: 60vh;
	background: var(--color-surface-low);
}

.hero--page .hero__content {
	color: var(--color-on-surface);
}

.hero--page .hero__content h1 {
	color: var(--color-on-surface);
	text-shadow: none;
}

.hero--page .hero__content p {
	color: var(--color-on-surface-variant);
}

/* Compact hero modifier — gallery page only, additive, keeps .hero--page base intact */
.hero--page.hero--compact {
	/* min-height dropped: section grows from padding, not a vh box, so no more
	   fixed-header-eats-into-flex-centering asymmetry. .hero already sets
	   display:flex / align-items:center / justify-content:center — reused here. */
	min-height: 0;
	/* padding lives inside the box, so the .hero--page background (surface-low)
	   still starts at document y0 and paints flush behind the fixed .site-header
	   — margin-top would leave that strip unpainted (body bg shows through). */
	padding-top: calc(var(--header-height) + var(--admin-bar-height) + 48px);
	padding-bottom: 48px;
}

/* ==========================================================================
   7. Welcome / two-column media section
   ========================================================================== */
.split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-gutter);
	align-items: center;
}

@media (min-width: 768px) {
	.split {
		grid-template-columns: 5fr 5fr;
	}
	.split--reverse .split__media {
		order: -1;
	}
}

.split__media {
	position: relative;
}

.split__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow-ambient);
}

.split__text h2 {
	font-size: 32px;
	line-height: 40px;
	color: var(--color-primary);
	margin-bottom: 1.5rem;
}

.split__text .body {
	color: var(--color-on-surface-variant);
}

.split__text .body p + p {
	margin-top: 1.25rem;
}

.split__text .divider {
	margin: 1.5rem 0;
}

@media (min-width: 768px) {
	.split__text .divider {
		margin-left: 0;
	}
}

/* ==========================================================================
   8. Gallery bento
   ========================================================================== */
.bento {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 250px;
	gap: 1rem;
}

@media (min-width: 768px) {
	.bento {
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: 300px;
		gap: var(--space-gutter);
	}
	.bento__large {
		grid-column: span 8;
		grid-row: span 2;
	}
	.bento__small {
		grid-column: span 4;
	}
}

.bento__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
}

.bento__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.bento__item:hover img {
	transform: scale(1.05);
}

.bento__caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 1.5rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
	color: #fff;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.bento__item:hover .bento__caption {
	opacity: 1;
}

.bento__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--color-surface);
	border: 1px solid rgba(211, 196, 181, 0.3);
	padding: 2rem;
}

.bento__panel h3 {
	color: var(--color-primary);
	font-size: 24px;
	margin: 1rem 0 0.5rem;
}

.bento__panel p {
	color: var(--color-on-surface-variant);
	font-size: 14px;
	margin-bottom: 1.5rem;
}

/* ==========================================================================
   9. Villa cards grid
   ========================================================================== */
.villa-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {
	.villa-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.villa-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface-lowest);
	border: 1px solid rgba(211, 196, 181, 0.2);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.25s ease;
}

.villa-card:hover {
	box-shadow: var(--shadow-ambient);
}

.villa-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.villa-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.villa-card:hover .villa-card__media img {
	transform: scale(1.05);
}

.villa-card__body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.villa-card__body h3 {
	font-size: 24px;
	color: var(--color-primary);
	margin-bottom: 1rem;
}

.villa-card__meta {
	color: var(--color-on-surface-variant);
	margin-bottom: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 14px;
}

.villa-card__meta li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.villa-card .btn {
	margin-top: auto;
}

/* ==========================================================================
   10. Amenities grid
   ========================================================================== */
.amenities-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3rem 2rem;
}

@media (min-width: 768px) {
	.amenities-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.amenity {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.75rem;
}

.amenity .icon {
	color: var(--color-primary);
	font-size: 32px;
	line-height: 1;
}

.amenity span.label-caps {
	color: var(--color-on-surface-variant);
}

/* ==========================================================================
   11. Bento info cards (About page "Experience")
   ========================================================================== */
.info-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-gutter);
}

@media (min-width: 768px) {
	.info-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.info-card {
	background: var(--color-surface-lowest);
	border: 1px solid rgba(211, 196, 181, 0.2);
	border-radius: var(--radius-lg);
	padding: 2rem;
	box-shadow: var(--shadow-ambient-faint);
	transition: transform 0.3s ease;
}

.info-card:hover {
	transform: translateY(-4px);
}

.info-card .icon {
	color: var(--color-primary);
	font-size: 32px;
	display: block;
	margin-bottom: 1.5rem;
}

.info-card h3 {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

.info-card p {
	color: var(--color-on-surface-variant);
}

/* Values list */
.values-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.value-item {
	display: flex;
	gap: 1rem;
}

.value-item .icon {
	color: var(--color-primary);
	font-size: 24px;
	margin-top: 0.25rem;
}

.value-item h4 {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.value-item p {
	color: var(--color-on-surface-variant);
}

.value-divider {
	height: 1px;
	background: rgba(211, 196, 181, 0.2);
}

/* ==========================================================================
   12. Forms
   ========================================================================== */
.form-panel {
	background: var(--color-surface-lowest);
	border: 1px solid rgba(211, 196, 181, 0.1);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-ambient-soft);
	padding: 2rem;
}

@media (min-width: 768px) {
	.form-panel {
		padding: 3rem;
	}
}

.form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 640px) {
	.form-row--2 {
		grid-template-columns: 1fr 1fr;
	}
}

.field {
	margin-bottom: 2rem;
}

.field:last-child {
	margin-bottom: 0;
}

.field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
	margin-bottom: 0.5rem;
}

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field input[type='date'],
.field input[type='number'],
.field select,
.field textarea {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(211, 196, 181, 0.5);
	padding: 0.5rem 0;
	color: var(--color-on-surface);
	border-radius: 0;
	outline: none;
	transition: border-color 0.2s ease;
}

.field textarea {
	resize: vertical;
	min-height: 120px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--color-primary);
}

.field-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.form-actions {
	text-align: right;
	padding-top: 1rem;
}

.form-notice {
	padding: 1rem 1.25rem;
	border-radius: var(--radius);
	margin-bottom: 2rem;
	font-size: 14px;
}

.form-notice--success {
	background: rgba(121, 85, 36, 0.08);
	color: var(--color-primary);
	border: 1px solid rgba(121, 85, 36, 0.2);
}

.form-notice--error {
	background: rgba(186, 26, 26, 0.08);
	color: var(--color-error);
	border: 1px solid rgba(186, 26, 26, 0.2);
}

/* Contact info list */
.contact-info-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.contact-info-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.contact-info-item .icon {
	color: rgba(121, 85, 36, 0.7);
	font-size: 22px;
	margin-top: 0.15rem;
}

.contact-info-item h4 {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.25rem;
}

.contact-info-item a,
.contact-info-item p {
	color: var(--color-on-surface-variant);
}

.contact-info-item a:hover {
	color: var(--color-primary);
}

.social-row {
	display: flex;
	gap: 1rem;
}

.social-circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(211, 196, 181, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-on-surface-variant);
	transition: border-color 0.25s ease, color 0.25s ease;
}

.social-circle:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-gutter);
	align-items: start;
}

@media (min-width: 992px) {
	.contact-grid {
		grid-template-columns: 5fr 7fr;
	}
}

.map-embed {
	width: 100%;
	height: 420px;
	border-radius: var(--radius-xl);
	overflow: hidden;
	border: 1px solid rgba(211, 196, 181, 0.1);
	background: var(--color-surface-highest);
}

.map-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.map-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-on-surface-variant);
	padding: 2rem;
}

/* ==========================================================================
   13. Single villa (room detail)
   ========================================================================== */
.villa-gallery-section {
	/* .site-header is `position: fixed` (80px tall, offset by the admin bar)
	   and nothing in normal flow reserves space for it, so page content
	   starts at document y0 behind it. The old inline `margin-top: 2rem`
	   (32px) didn't come close to clearing an up-to-126px-tall header,
	   leaving the top of the hero photo rendered underneath it. */
	margin-top: calc(var(--header-height) + var(--admin-bar-height) + 2rem);
}

.villa-gallery {
	display: grid;
	grid-template-columns: 1fr;
	/* Explicit row height (not "auto") so children's `height: 100%` has a
	   definite track to resolve against - percentages against an auto-sized
	   grid row are indeterminate and fall back to the image's intrinsic
	   height, which silently overflows this container (no overflow:hidden
	   here previously) and bleeds into the .villa-layout section below it. */
	grid-template-rows: 50vh;
	gap: var(--space-unit);
	overflow: hidden;
}

@media (min-width: 768px) {
	.villa-gallery {
		grid-template-columns: 8fr 4fr;
		grid-template-rows: 70vh;
	}
}

.villa-gallery__main {
	border-radius: var(--radius-lg);
	overflow: hidden;
	height: 100%;
	min-height: 0;
}

.villa-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.villa-gallery__side {
	display: none;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	gap: 1rem;
	height: 100%;
	min-height: 0;
}

@media (min-width: 768px) {
	.villa-gallery__side {
		display: grid;
	}
}

.villa-gallery__side .villa-gallery__thumb {
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-height: 0;
}

.villa-gallery__side img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Gallery tiles are buttons (keyboard-reachable, no inline handlers) that
   open the lightbox - reset them to look like plain image containers. */
.villa-gallery__trigger {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	appearance: none;
}

.villa-gallery__trigger:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
}

.villa-gallery__thumb--viewall {
	position: relative;
}

.villa-gallery__viewall-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	background: rgba(38, 30, 20, 0.6);
	color: #fff;
}

.villa-gallery__viewall-overlay .icon {
	width: 24px;
	height: 24px;
}

.villa-gallery__viewall-count {
	font-family: var(--font-display);
	font-size: 20px;
}

.villa-gallery__viewall-overlay .label-caps {
	font-size: 11px;
}

.villa-layout {
	max-width: var(--max-width);
	/* Bottom margin so the page content doesn't run flush into the
	   .site-footer background - previously 0, leaving no gap at all. */
	margin: 3rem auto var(--section-padding);
	padding: 0 var(--margin-mobile);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-gutter);
}

@media (min-width: 768px) {
	.villa-layout {
		padding: 0 var(--margin-desktop);
	}
}

@media (min-width: 992px) {
	.villa-layout {
		grid-template-columns: 8fr 4fr;
	}
}

.villa-main {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.villa-block {
	border-top: 1px solid rgba(211, 196, 181, 0.3);
	padding-top: 3rem;
}

.villa-block:first-child {
	border-top: none;
	padding-top: 0;
}

.villa-block h3 {
	font-size: 32px;
	margin-bottom: 1.5rem;
}

.villa-block .body {
	color: var(--color-on-surface-variant);
	max-width: 720px;
}

.villa-block .body p + p {
	margin-top: 1.5rem;
}

.villa-amenity-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

@media (min-width: 640px) {
	.villa-amenity-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.villa-amenity {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
	padding: 1rem;
	border-radius: var(--radius-lg);
	background: var(--color-surface-lowest);
	box-shadow: var(--shadow-ambient-faint);
	border: 1px solid var(--color-mist-gray);
}

.villa-amenity .icon {
	color: var(--color-primary);
	font-size: 30px;
}

.booking-sidebar {
	position: relative;
}

.booking-card {
	position: sticky;
	/* 120px = fixed header (80px) + 40px breathing room, shifted by the admin bar. */
	top: calc(120px + var(--admin-bar-height));
	background: var(--color-surface-lowest);
	padding: 2rem;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-ambient);
	border: 1px solid var(--color-mist-gray);
}

.booking-card__price {
	margin-bottom: 2rem;
}

.booking-card__price .amount {
	font-family: var(--font-display);
	font-size: 32px;
	color: var(--color-on-surface);
}

.booking-card__price .unit {
	color: var(--color-on-surface-variant);
}

.booking-card__scope-note {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
	background: var(--color-surface-container);
	color: var(--color-on-surface-variant);
	font-size: 13px;
	line-height: 1.4;
}

.booking-card__scope-note .icon {
	flex: none;
	margin-top: 0.15em;
	color: var(--color-primary);
}

.booking-actions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-top: 1rem;
}

/* ==========================================================================
   14. Footer
   ========================================================================== */
.site-footer {
	width: 100%;
	padding: var(--section-padding) 0;
	background: #0a0a0a;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--margin-mobile);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
}

.site-footer__logo {
	font-family: var(--font-display);
	font-size: 22px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-secondary-container);
}

.site-footer nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
}

.site-footer nav a {
	color: rgba(255, 255, 255, 0.75);
	font-size: 15px;
}

.site-footer nav a:hover {
	color: var(--color-secondary-container);
}

.site-footer__contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
}

.site-footer__contact span,
.site-footer__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: rgba(255, 255, 255, 0.75);
	font-size: 15px;
}

.site-footer__contact .fa-brands {
	font-size: 15px;
	line-height: 1;
	color: currentColor;
}

.site-footer__contact a:hover {
	color: var(--color-secondary-container);
}

.site-footer__social {
	display: flex;
	gap: 1rem;
}

.site-footer .social-circle {
	border-color: rgba(255, 255, 255, 0.3);
	color: rgba(255, 255, 255, 0.75);
}

.site-footer .social-circle:hover {
	border-color: var(--color-secondary-container);
	color: var(--color-secondary-container);
}

.site-footer p.copyright {
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	margin-top: 0.5rem;
}

/* ==========================================================================
   15. Utility icons (inline-svg based, see inc/icons.php)
   ========================================================================== */
.icon {
	display: inline-flex;
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
}

.icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Font Awesome brand icons (self-hosted, see functions.php) — social links
   only (Instagram/Facebook/Airbnb), rendered as <i> inside .social-circle.
   Matches the 1em (16px, body font-size) the old .icon svg rendered at;
   color comes from .social-circle's existing color rules via currentColor. */
.social-circle i {
	font-size: 16px;
	line-height: 1;
	color: currentColor;
}

/* ==========================================================================
   16. WordPress core alignment helpers
   ========================================================================== */
.alignleft {
	float: left;
	margin-right: 1.5rem;
}

.alignright {
	float: right;
	margin-left: 1.5rem;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	max-width: 100%;
}

/* ==========================================================================
   17. Generic page (non-templated) content
   ========================================================================== */
.default-page {
	max-width: 820px;
	margin: 0 auto;
	padding: var(--section-padding) var(--margin-mobile);
}

@media (min-width: 768px) {
	.default-page {
		padding: var(--section-padding) var(--margin-desktop);
	}
}

.default-page h1 {
	font-size: 40px;
	color: var(--color-primary);
	margin-bottom: 2rem;
}

.default-page .entry-content > * + * {
	margin-top: 1.25rem;
}

/* ==========================================================================
   18. Gallery page grid
   ========================================================================== */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-gutter);
}

.gallery-grid__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 4 / 3;
}

.gallery-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.gallery-grid__item:hover img {
	transform: scale(1.05);
}

/* ==========================================================================
   19. Room hero gallery lightbox
   ========================================================================== */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 9000;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.9);
}

/* Scoped to :not([hidden]) - an unconditional `display: flex` on `.lightbox`
   would be an author-level rule that outranks the user-agent stylesheet's
   `[hidden] { display: none }`, making the overlay visible even while the
   `hidden` attribute is set. */
.lightbox:not([hidden]) {
	display: flex;
}

.lightbox__backdrop {
	position: absolute;
	inset: 0;
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

.lightbox__stage {
	position: relative;
	z-index: 1;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	pointer-events: none;
}

.lightbox__image {
	max-width: 90vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--radius);
	box-shadow: var(--shadow-ambient);
	pointer-events: auto;
}

.lightbox__close,
.lightbox__arrow {
	position: fixed;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.85);
	color: var(--color-on-surface);
	opacity: 0.85;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.lightbox__close .icon,
.lightbox__arrow .icon {
	width: 20px;
	height: 20px;
}

.lightbox__close:hover,
.lightbox__close:focus-visible,
.lightbox__arrow:hover,
.lightbox__arrow:focus-visible {
	background-color: var(--color-primary);
	color: #fff;
	opacity: 1;
}

.lightbox__close:focus-visible,
.lightbox__arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.lightbox__close {
	top: 20px;
	right: 20px;
}

.lightbox__arrow {
	top: 50%;
	transform: translateY(-50%);
}

.lightbox__arrow--prev {
	left: 20px;
}

.lightbox__arrow--next {
	right: 20px;
}

.lightbox__arrow--prev .icon {
	transform: scaleX(-1);
}

.lightbox__counter {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	margin: 0;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.04em;
}

@media (max-width: 767px) {
	.lightbox__close,
	.lightbox__arrow {
		width: 38px;
		height: 38px;
	}

	.lightbox__close {
		top: 12px;
		right: 12px;
	}

	.lightbox__arrow--prev {
		left: 12px;
	}

	.lightbox__arrow--next {
		right: 12px;
	}
}