/* =========================================================================
   Pearl Island Fonts & Design Tokens
   Brand fonts self-hosted: Miller Banner (serif display), Quentin (script),
   Nunito (sans). Palette sampled from the live pearlislandbahamas.com site.
   Every --pi-* token can be overridden per-widget from the Elementor
   Style tab (the controls write the custom properties on the wrapper).
   ========================================================================= */

@font-face {
	font-family: 'Miller Banner';
	src: url('../fonts/millerbanner-semibold.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Quentin';
	src: url('../fonts/quentin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('../fonts/nunito-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Nunito';
	src: url('../fonts/nunito-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Nunito';
	src: url('../fonts/nunito-semibold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Nunito';
	src: url('../fonts/nunito-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Nunito';
	src: url('../fonts/nunito-extrabold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Nunito';
	src: url('../fonts/nunito-black.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Brand fonts */
	--hx-serif:  'Miller Banner', 'Playfair Display', Georgia, serif;
	--hx-script: 'Quentin', 'WindSong', cursive;
	--hx-sans:   'Nunito', 'Helvetica Neue', Arial, sans-serif;
	--serif: var(--hx-serif);
	--hand: var(--hx-script);
	--sans: var(--hx-sans);

	/* Live-site brand colors */
	--hx-pink:       #F1BAD7; /* CTA / announcement pink       */
	--hx-pink-dark:  #E79FC7; /* hover pink                    */
	--hx-teal-dark:  #062C2F; /* hero / nav dark teal          */
	--hx-teal-deep:  #002726; /* deepest teal (overlays)       */
	--hx-slate:      #626A82; /* serif heading slate blue      */
	--hx-sky:        #D7EEF4; /* light blue band               */
	--hx-cream:      #F7EFE0; /* cream boxes                   */
	--hx-paper:      #FAF9F5; /* off-white                     */
	--hx-sand:       #FFEFAF; /* star accents on dark photos   */
	--hx-body:       #56606E; /* body copy grey                */

	/* Pearl Island aliases used by the widget styles */
	--pi-slate: var(--hx-slate);
	--pi-pink: var(--hx-pink);
	--pi-pink-hover: var(--hx-pink-dark);
	--pi-teal-deep: var(--hx-teal-dark);
	--pi-blue-pale: var(--hx-sky);
	--pi-ink: #1e2430;
	--pi-gray: var(--hx-body);
	--pi-paper: var(--hx-paper);

	/* Extended island palette (badges, gradients, accents) */
	--tuerkis: #77C3DB;
	--petrol: #609AAD;
	--ocean: #616B85;
	--smaragd: #3B5F5F;
	--sand: #FFF7B2;
	--creme: #EBD454;
	--salmon: #F5A8A1;
	--lobster: #EE7266;
	--pink: #F1BAD7;
	--violet: #B68FC1;
	--lavendel: #DEDBEA;
	--stone: #EDEDED;
	--ink: #1e2430;
	--paper: #FAF9F5;
}

.pi-widget,
.hog,
.htl {
	font-family: var(--hx-sans);
}

.pi-widget {
	color: var(--pi-text, var(--pi-ink));
	line-height: 1.65;
	font-size: 16px;
}

.pi-widget *,
.pi-widget *::before,
.pi-widget *::after {
	box-sizing: border-box;
}

.pi-widget h1,
.pi-widget h2,
.pi-widget h3 {
	font-family: var(--hx-serif);
	font-weight: 600;
	line-height: 1.12;
	margin: 0;
	color: var(--pi-heading, var(--pi-slate));
}

.pi-widget p,
.pi-widget ul {
	margin: 0;
}

.pi-widget a {
	color: inherit;
}

.pi-widget .wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.pi-widget .script {
	font-family: var(--hx-script);
	font-weight: 400;
	color: var(--pi-script, var(--hx-pink-dark));
}

/* Buttons — live-site style: small uppercase pink pills, dark teal text */
.pi-widget .btn {
	display: inline-block;
	font-weight: 800;
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 30px;
	border-radius: 999px;
	transition: .25s;
	cursor: pointer;
	border: none;
	font-family: var(--hx-sans);
	text-align: center;
}

.pi-widget .btn-primary {
	background: var(--pi-btn-bg, var(--hx-pink));
	color: var(--pi-btn-text, var(--hx-teal-dark));
	box-shadow: 0 8px 24px rgba(241, 186, 215, .45);
}

.pi-widget .btn-primary:hover {
	background: var(--pi-btn-hover-bg, var(--hx-pink-dark));
	color: var(--pi-btn-hover-text, var(--hx-teal-dark));
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(241, 186, 215, .6);
}

/* Ghost button: plain white text — no border, no box */
.pi-widget .btn-ghost {
	background: transparent;
	color: #fff;
	border: none;
	padding-left: 10px;
	padding-right: 10px;
	text-underline-offset: 6px;
}

.pi-widget .btn-ghost:hover {
	background: transparent;
	color: #fff;
	text-decoration: underline;
	transform: translateY(-2px);
}

.pi-widget .btn-dark {
	background: var(--pi-btn-dark-bg, var(--hx-teal-dark));
	color: var(--pi-btn-dark-text, #fff);
}

.pi-widget .btn-dark:hover {
	background: var(--pi-btn-hover-bg, var(--hx-pink-dark));
	color: var(--hx-teal-dark);
	transform: translateY(-2px);
}

/* Photo placeholder note (only shows when data-foto is set) */
.pi-widget .ph {
	position: relative;
	overflow: hidden;
}

.pi-widget .ph::after {
	content: attr(data-foto);
	position: absolute;
	left: 12px;
	bottom: 12px;
	background: rgba(30, 36, 48, .72);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 6px 12px;
	border-radius: 6px;
	z-index: 3;
	text-transform: uppercase;
}

.pi-widget .ph[data-foto=""]::after,
.pi-widget .ph:not([data-foto])::after {
	display: none;
}

/* Reveal animation — the reveal script tags <html> with .pi-js and then
   adds .in via IntersectionObserver. Without JS everything stays visible. */
html.pi-js .pi-widget .rv {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s ease, transform .8s ease;
}

html.pi-js .pi-widget .rv.in {
	opacity: 1;
	transform: none;
}

/* Section head */
.pi-widget section {
	padding: 90px 0;
	margin: 0;
}

.pi-widget .sec-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 56px;
}

.pi-widget .sec-head .script {
	font-size: 2.2rem;
	display: block;
	margin-bottom: 6px;
}

.pi-widget .sec-head h2 {
	font-size: clamp(2rem, 4vw, 2.9rem);
}

.pi-widget .sec-head p {
	margin-top: 16px;
	color: var(--pi-text, var(--hx-body));
}

@media (max-width: 700px) {
	.pi-widget section {
		padding: 64px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pi-widget .rv {
		opacity: 1;
		transform: none;
	}
}

/* Floating white tag box shown on section photos
   (e.g. "🍽 Lunch included" / "1993 · Born as Spruce Cay") */
.pi-widget .pi-img-tag {
	position: absolute;
	left: -14px;
	top: 34px;
	z-index: 3;
	background: #fff;
	border-radius: 16px;
	padding: 13px 20px;
	box-shadow: 0 14px 40px rgba(6, 44, 47, .16);
	font-weight: 800;
	font-size: .8rem;
	color: var(--hx-teal-dark, #062C2F);
	max-width: 78%;
	line-height: 1.35;
}

@media (max-width: 700px) {
	.pi-widget .pi-img-tag {
		left: 12px;
		top: 14px;
		padding: 10px 14px;
		font-size: .72rem;
	}
}

/* Consistent brand headings across shared Pearl Island widgets. */
.pi-widget h1,.pi-widget h2,.pi-widget h3,.hog h1,.hog h2,.hog h3{font-family:var(--hx-serif)!important;font-weight:600;letter-spacing:normal!important;text-transform:none!important}
.pi-widget .pi-title,.pi-widget .sec-head h2,.pi-widget .pij-head h2{font-size:clamp(2rem,4vw,3rem)!important;line-height:1.12!important}