/* ============================================================
   The Getaway Your Way · theme.css
   Mint accent, soft radii, Fraunces display + DM Sans UI.
   ============================================================ */

:root{
	--font-stack:'DM Sans',system-ui,sans-serif;
	--font-serif:'Fraunces',Georgia,serif;

	--text-color:#252731;
	--text-color-header:#222222;
	--text-color-secondary:#3B3E4E;

	--background-color:#ffffff;
	--background-color-light:#F2F8F6;
	--background-color-dark:#F7F5EE;
	--background-color-fade:rgba(37,39,49,0.06);
	--background-color-glow:rgba(255,255,255,0.14);

	--line-color:rgba(37,39,49,0.10);

	/* Barefoot mint family */
	--ocean:#00af87;
	--ocean-soft:#9CC9BB;
	--ocean-deep:#61BA9E;
	--primary-color:var(--ocean);
	--link-color:var(--ocean);
	--link-hover-color:var(--ocean-deep);
	--black:#252731;

	--button-bg:var(--ocean);
	--button-text:#ffffff;
	--button-text-hover:#ffffff;

	--shadow:0 1px 2px rgba(37,39,49,0.04), 0 12px 32px rgba(37,39,49,0.08);

	--header-height:64px;
	--border-radius:16px;
}

/* Type · DM Sans UI + Fraunces display */
body{
	font-family:var(--font-stack);
	color:var(--text-color);
	-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{
	font-family:var(--font-serif);
	font-weight:600;
	font-optical-sizing:auto;
	letter-spacing:-0.02em;
	color:var(--text-color-header);
}
h1,.h1{letter-spacing:-0.03em;font-weight:700;}
.serif{font-family:var(--font-serif);font-weight:500;font-style:italic;}
.button, button, .ws-kicker, .ws-tag, nav{
	font-family:var(--font-stack);
}

/* Buttons · pill like Barefoot CTAs */
.button, button{border-radius:999px;}
.button:hover:not(.text):not(.outline):not(:disabled){background:var(--ocean-deep);}
.button.outline{border-color:var(--ocean);color:var(--text-color-header);}
.button.outline:hover{border-color:var(--ocean-deep);background:rgba(0,175,135,0.08);}

/* Soft rounded media · Barefoot ~16–20px */
.round, .round-m, .rounded > *, .rounded-m > *{border-radius:16px;}
.round-l, .rounded-l > *{border-radius:20px;}
.round-s, .rounded-s > *{border-radius:12px;}
.aspect.round,
.aspect.round-l,
.aspect.round-s{overflow:hidden;}

/* Wireframe / placeholder teal → brand mint */
.blue{background:var(--ocean-soft);}
.blue.white-text,
section.blue{
	background:var(--ocean);
	color:#fff;
}
.blue.white-text :where(h1,h2,h3,h4,h5,h6),
section.blue :where(h1,h2,h3,h4,h5,h6){color:#fff;}

/* Soft surfaces */
.fill-fade, .filled-fade > *{background-color:var(--background-color-light);}
.fill-dark, .filled-dark > *{background-color:var(--background-color-dark);}

/* Tags · soft pill chips */
.ws-tag{
	border-color:rgba(0,175,135,0.28);
	background:rgba(156,201,187,0.18);
	border-radius:999px;
	padding:0.45em 0.95em;
}

/* Checkmarks · mint */
ul.checkmarks li::before{color:var(--ocean);}

/* Links */
a:hover:not(.button){color:var(--ocean-deep);}

html{scroll-behavior:smooth;}

/* Hero · full-bleed video + readable scrim */
#hero{
	overflow:hidden;
	background:#1c3b34;
	color:#fff;
}
#hero > .overlay{
	display:flex;
	align-items:center;
	width:100%;
	min-height:inherit;
	box-sizing:border-box;
}
#hero .background-video video{
	aspect-ratio:auto;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
#hero :where(h1,p){color:#fff;}
#hero .overlay.tint-dark::before{
	background:rgba(18,36,32,0.48);
	mix-blend-mode:normal;
}
@media (prefers-reduced-motion: reduce){
	#hero .background-video video{display:none;}
	#hero{
		background-color:#1c3b34;
		background-image:url("media/punta-cana-beach-palms-golden-hour.jpg");
		background-image:image-set(
			url("media/punta-cana-beach-palms-golden-hour.webp") type("image/webp"),
			url("media/punta-cana-beach-palms-golden-hour.jpg") type("image/jpeg")
		);
		background-position:center;
		background-size:cover;
		background-repeat:no-repeat;
	}
}

/* <picture> inside .aspect still needs to fill the crop box */
.aspect picture{
	display:block;
	width:100%;
	height:100%;
}
.aspect picture img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

/* Inline nav under the hero */
body > div:has(> .max-width > nav[aria-label="Main"]){border-bottom:1px solid var(--line-color);}
nav[aria-label="Main"]{display:flex;align-items:center;justify-content:space-between;gap:var(--size-m);min-width:0;flex:1 1 auto;}
nav[aria-label="Main"] .wckd-menu a{padding:var(--size-s) var(--size-m);font-weight:500;}
nav[aria-label="Main"] .wckd-menu li:hover > a,
nav[aria-label="Main"] .wckd-menu li.active > a{background:transparent;color:var(--ocean);}
/* Contact lives as the right-side outline button on desktop; keep it in the drawer on narrow. */
nav[aria-label="Main"] .wckd-menu li.nav-contact{display:none;}
@media (max-width:768px){
	.max-width > a.button.outline[href="#contact"]{display:none;}
	nav[aria-label="Main"] .wckd-menu li.nav-contact{display:list-item;}
}

/* Kickers · mint + inline icons */
.ws-kicker{
	color:var(--ocean);
	display:inline-flex;
	align-items:center;
	gap:0.4em;
}
.ws-kicker .wckd-icon{
	display:inline-flex;
	line-height:0;
}
.ws-kicker .wckd-icon svg{
	width:1em;
	height:1em;
	stroke:currentColor;
	fill:none;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

/* Footer */
footer{
	border-top:1px solid var(--line-color);
	margin-top:var(--size-xxl);
}

/* Contact card · WhatsApp row */
#contact .contact-whatsapp{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:var(--size-m);
	padding-top:var(--size-m);
	border-top:1px solid var(--line-color);
}
#contact .contact-whatsapp-action{
	display:flex;
	align-items:center;
	gap:var(--size-s);
	min-width:0;
}
#contact .contact-whatsapp-qr{
	display:flex;
	flex-shrink:0;
	line-height:0;
}
#contact .contact-whatsapp-qr img{
	display:block;
	width:58px;
	height:58px;
}
#contact .contact-whatsapp-action .button{
	white-space:normal;
	text-align:center;
}

/* Section rules */
hr{
	border:0;
	border-top:1px solid var(--line-color);
	margin:0 auto;
	width:100%;
}

/* Photos modal · fixed carousel height + padded frame */
#photos-modal{
	max-width:min(92vw, 960px);
	width:100%;
}
#photos-modal .pad{
	padding:var(--size-xl);
	box-sizing:border-box;
}
#photos-modal .wckd-carousel{
	height:min(62vh, 560px);
	align-items:stretch;
}
#photos-modal .wckd-carousel > .column{
	height:100%;
}
#photos-modal .wckd-carousel .aspect{
	height:100%;
	aspect-ratio:auto;
}
#photos-modal .wckd-carousel .aspect img{
	width:100%;
	height:100%;
	object-fit:cover;
}