:root{--brand:#2aa6b8;--bg:#e9f8fa;--card:#ffffff;--text:#08323b;--muted:#5aa6ad;--radius:12px;--container:1100px;--header-gap:20px;--header-inner-height:72px}
.site-header{max-width:var(--container);margin:20px auto 0;padding:0 16px;box-sizing:border-box}
/* Standard page layout spacing (match index.html). Use --header-gap to control distance from header to main */
.wrap{max-width:var(--container);margin:0 auto 20px;padding:0 16px 16px}

/* When a page opts into header-gap, do not add extra padding at the top.
	The only vertical spacing between header and first content is controlled
	by --space-section applied to main. */
.wrap.header-gap{padding-top:0}
/* Spacing between header and content is defined solely in spacing.css */
.main.layout{margin:0 auto;display:grid;gap:12px;max-width:var(--container);width:100%;box-sizing:border-box}
.main.layout, main.layout{align-items:start}
.site-header header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-left:18px;padding-right:18px;background:linear-gradient(90deg, rgba(42,166,184,0.12), rgba(42,166,184,0.06));border-radius:var(--radius);min-height:var(--header-inner-height)}
/* Sticky header is opt-in. Add class `header-sticky` to `.site-header` to enable sticking on pages that want it. */
/* When sticky, allow the outer .site-header to span the full viewport so the backdrop
   and background effects can extend edge-to-edge. The inner <header> is then
   constrained to the standard container width to keep the visual frame identical
   to the non-sticky header (matching index.html). */
.site-header.header-sticky{position:-webkit-sticky;position:sticky;top:0;left:0;right:0;z-index:40;margin-top:0;margin-bottom:0;display:block;max-width:100%;padding:0}
.site-header.header-sticky header{
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(4px);
	max-width:var(--container);
	margin:0 auto;
	padding-left:16px; /* match .site-header outer padding */
	padding-right:16px;
	min-height:var(--header-inner-height);
}
.site-header.header-sticky{padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right));}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:56px;height:56px;border-radius:8px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px}
/* Match the index.html heading size so the shared header looks identical across pages */
.brand h1{margin:0;font-size:18px}
.header-right{display:flex;gap:12px;align-items:center}
/* ensure nav and lang toggle alignment matches index page */
#main-nav{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
#main-nav a{display:flex;align-items:center;height:38px;padding:8px 12px;border-radius:10px;color:var(--text);font-weight:600}
/* Remove underline from header nav links; keep visible keyboard focus for accessibility */
#main-nav a{
	text-decoration: none;
}
#main-nav a:focus{
	outline: 2px solid Highlight;
	outline-offset: 2px;
}
#main-nav a:hover{
	text-decoration: none; /* explicit to prevent UA defaults */
	opacity: 0.9;
}
/* active page link */
#main-nav a.active{
  background: rgba(42,166,184,0.12);
}
.lang-toggle{display:flex;gap:8px;align-items:center}
.lang-toggle button{padding:6px 12px;border-radius:8px;border:1px solid transparent;background:#fff;cursor:pointer;height:36px;line-height:1}
.lang-toggle button.active{background:var(--brand);color:#fff}

/* date sample feature removed */

/* Tighten spacing when shared header is present so main content sits closer to header */
/* Reduce vertical padding inside the header slightly for a more compact frame */
.site-header.header-sticky header{padding-top:18px;padding-bottom:18px}

/* Do not add extra margin between the header and wrapper; spacing is controlled by main */
.site-header + .wrap, .site-header.header-sticky + .wrap{margin-top:0}

/* Central class to apply header gap; pages can set .wrap.header-gap or override with modifiers */
.header-gap{--header-gap:20px}
.header-gap.compact{--header-gap:8px}
.header-gap.tight{--header-gap:4px}
.header-gap.spacious{--header-gap:28px}

/* Utility spacing helpers used across pages to replace inline styles */
.mt-4{margin-top:4px}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}

/* Room row grid layout (moved from inline styles in booking.html) */
.room-row.grid{display:grid;grid-template-columns:2fr 2fr 1fr;gap:12px;align-items:start}
.room-row .col{padding:12px}

/* Hide native date input format hint (e.g. "dd-----yyyy") when empty in WebKit browsers.
	 When focused or when a value exists, show the date value. This keeps accessibility
	 (keyboard focus) and doesn't interfere with normal input behavior. */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field{
	color: transparent;
}
/* Also hide text fill color by default for WebKit */
input[type="date"]{ -webkit-text-fill-color: transparent; }
/* Reveal actual date when focused or when the input has a value */
/* Reveal actual date only when the input has a valid value */
input[type="date"]:valid::-webkit-datetime-edit,
input[type="date"]:valid::-webkit-datetime-edit-fields-wrapper,
input[type="date"]:valid::-webkit-datetime-edit-text,
input[type="date"]:valid::-webkit-datetime-edit-month-field,
input[type="date"]:valid::-webkit-datetime-edit-day-field,
input[type="date"]:valid::-webkit-datetime-edit-year-field{
	color: var(--text);
}
/* Reveal text fill color only when valid (hide while focused and empty) */
input[type="date"]:valid{ -webkit-text-fill-color: var(--text); }

/* Non-WebKit fallback: reduce opacity of placeholder-like content */
input[type="date"]::placeholder{ opacity: 0.4; }


/* ---------- Responsive adjustments ---------- */
/* Tablet and below: allow header to wrap, shrink brand, make nav horizontally scrollable */
@media (max-width: 900px){
	.site-header header{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
	.brand .logo{width:48px;height:48px}
	.brand h1{font-size:16px}
	#site-sub{display:none}
	.header-right{width:100%;justify-content:space-between}
		.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:36px;border-radius:8px;border:1px solid rgba(3,50,59,.1);background:#fff;color:var(--text);cursor:pointer}
			/* collapsed nav by default on tablet with smooth transition */
			#main-nav{
				display:block;
				max-height:0;
				opacity:0;
				transform:translateY(-6px);
				transition:max-height .25s ease, opacity .2s ease, transform .2s ease;
				overflow:hidden; /* hidden when closed */
				width:100%;
			}
			.header-right[data-menu-open="true"] #main-nav{
				/* open state: horizontal scrollable nav */
				display:flex;
				flex-wrap:nowrap;
				max-height:240px; /* safe cap; row height is small */
				opacity:1;
				transform:translateY(0);
				overflow-x:auto;
				overflow-y:hidden;
				-webkit-overflow-scrolling:touch;
				width:100%;
			}
	#main-nav{gap:6px}
	#main-nav a{white-space:nowrap;padding:6px 10px;height:34px}
	.header-right[data-menu-open="true"] #main-nav a{flex:0 0 auto}
	.lang-toggle button{height:34px;padding:6px 10px}
}

/* Mobile: stack brand and controls vertically for compact layout */
@media (max-width: 600px){
	.brand h1{font-size:15px}
	.header-right{flex-wrap:wrap;gap:8px}
		.menu-toggle{display:inline-flex}
		#main-nav{order:3;width:100%}
	.lang-toggle{order:1;margin-left:auto}
}

	/* desktop/tablet large: show nav, hide hamburger */
	@media (min-width: 901px){
		.menu-toggle{display:none}
		#main-nav{display:flex;max-height:none;opacity:1;transform:none;overflow:visible}
	}

/* Booking page room rows: stack gracefully on smaller screens */
.room-row.grid{display:grid;grid-template-columns:2fr 2fr 1fr;gap:12px;align-items:start}
@media (max-width: 980px){
	.room-row.grid{grid-template-columns:1fr 1fr}
	.room-row.grid > :last-child{grid-column:1 / -1}
}
@media (max-width: 760px){
	.room-row.grid{grid-template-columns:1fr}
}