/**
 * Zen Apartment skin — layered on top of Bootstrap 5.3.8.
 *
 * Loaded AFTER bootstrap.min.css + custom.css. Provides the "Zen Apartment"
 * design language (palette, Marcellus/Work Sans type, sticky glass header,
 * full-bleed content bands, masonry gallery, dark footer) while leaving
 * Bootstrap's grid / components / utilities to do the structural work.
 *
 * Used by: header.php (.zen-header), footer.php (.zen-footer) and the
 * [zen_apartment] shortcode (.zen-apt).
 */

:root {
	--zen-bg:      #f5f3ee;
	--zen-ink:     #23282e;
	--zen-primary: #3d5570;
	--zen-primary-dark: #2f4459;
	--zen-muted:   #8a8578;
	--zen-body:    #3a4048;
	--zen-border:  #e4ded4;
	--zen-card:    #faf8f3;

	/* Nudge Bootstrap's own tokens toward the design. */
	--bs-body-font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bs-body-font-weight: 300;
	--bs-body-color: var(--zen-ink);
	--bs-body-bg: var(--zen-bg);
	--bs-link-color: var(--zen-primary);
	--bs-link-color-rgb: 61, 85, 112;
	--bs-link-hover-color: var(--zen-ink);
	--bs-link-hover-color-rgb: 35, 40, 46;
}

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, .zen-serif { font-family: "Marcellus", Georgia, serif; font-weight: 400; letter-spacing: -.01em; }

/* Anchor scroll offset so the sticky header never covers section tops. */
:target, [id] { scroll-margin-top: 84px; }

/* --------------------------------------------------------------------- *
 * Buttons (Bootstrap .btn + Zen variants)
 * --------------------------------------------------------------------- */
.btn-zen {
	--bs-btn-color: #f5f3ee;
	--bs-btn-bg: var(--zen-primary);
	--bs-btn-border-color: var(--zen-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--zen-primary-dark);
	--bs-btn-hover-border-color: var(--zen-primary-dark);
	--bs-btn-active-bg: var(--zen-primary-dark);
	--bs-btn-active-border-color: var(--zen-primary-dark);
	--bs-btn-focus-shadow-rgb: 61, 85, 112;
}
.btn-zen-light {
	--bs-btn-color: var(--zen-ink);
	--bs-btn-bg: #f5f3ee;
	--bs-btn-border-color: #f5f3ee;
	--bs-btn-hover-color: var(--zen-ink);
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-border-color: #fff;
}
.btn-zen-ghost {
	--bs-btn-color: #fff;
	--bs-btn-bg: transparent;
	--bs-btn-border-color: rgba(255,255,255,.55);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: rgba(255,255,255,.12);
	--bs-btn-hover-border-color: #fff;
}

.zen-eyebrow { font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--zen-muted); margin-bottom: 18px; }
.zen-eyebrow-light { color: #96a3b4; }
.zen-h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.1; margin: 0; }
.zen-lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; color: var(--zen-body); font-weight: 300; }
.zen-section { padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(56px, 9vw, 120px); }

/* --------------------------------------------------------------------- *
 * Header (header.php)
 * --------------------------------------------------------------------- */
/* Stick the whole header: its containing block is #wrapper (full height), so
   position:sticky here actually holds — unlike sticky on the nav, which is
   trapped inside the short .zen-header box. */
.zen-header { position: sticky; top: 0; z-index: 1030; }
body.admin-bar .zen-header { top: var(--wp-admin--admin-bar--height, 32px); }
.zen-navbar {
	background: rgba(245, 243, 238, .82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--zen-border);
	padding-top: .6rem;
	padding-bottom: .6rem;
}
/* Beat the theme's .navbar-brand img{height:70px!important} from style.css. */
.zen-navbar .navbar-brand img { height: 42px !important; width: auto; }
.zen-navbar .navbar-nav .nav-link {
	font-size: 14px;
	letter-spacing: .02em;
	color: #4b525a;
	padding-left: 1rem;
	padding-right: 1rem;
}
.zen-navbar .navbar-nav .nav-link:hover,
.zen-navbar .navbar-nav .nav-link:focus,
.zen-navbar .navbar-nav .nav-link[aria-current="page"] { color: var(--zen-ink); }
.zen-navbar .navbar-toggler { border: 0; color: var(--zen-ink); font-size: 1.4rem; line-height: 1; padding: .25rem .5rem; }
.zen-navbar .navbar-toggler:focus { box-shadow: none; }
.zen-navbar .navbar-toggler .fa-solid { color: var(--zen-ink); }
.zen-navbar .navbar-toggler .zen-toggler-close { display: none; }
.zen-navbar .navbar-toggler[aria-expanded="true"] .zen-toggler-open { display: none; }
.zen-navbar .navbar-toggler[aria-expanded="true"] .zen-toggler-close { display: inline-block; }
.zen-cta { padding: 9px 20px; font-size: 14px; }
/* If the WP admin bar is present, keep the sticky header below it. */
body.admin-bar .zen-navbar { top: var(--wp-admin--admin-bar--height, 32px); }

/* --------------------------------------------------------------------- *
 * Content sections (shortcode wrapper .zen-apt)
 * --------------------------------------------------------------------- */
.zen-apt { overflow-x: hidden; }
.zen-apt img { max-width: 100%; height: auto; }

/* Hero + background slider */
.zen-hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
/* Higher specificity + !important: Fancybox v4 also ships a `.carousel` rule
   (position:relative) and loads AFTER zen.css, so a bare .zen-hero__carousel
   loses the cascade and the hero collapses to 0 width. */
.zen-hero .zen-hero__carousel { position: absolute !important; inset: 0 !important; z-index: 0; }
.zen-hero__carousel .carousel-inner,
.zen-hero__carousel .carousel-item { height: 100%; }
.zen-hero__slide { width: 100%; height: 100%; min-height: 88vh; background-size: cover; background-position: center; }
.zen-hero__scrim {
	position: absolute; inset: 0; pointer-events: none; z-index: 1;
	background: linear-gradient(to top, rgba(20,26,32,.72) 0%, rgba(20,26,32,.28) 42%, rgba(20,26,32,.05) 72%);
}
.zen-hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: 72px; animation: zenFade .9s ease both; }
.zen-hero__dots { z-index: 3; justify-content: flex-end; margin: 0 28px 26px 0; }
.zen-hero__dots [data-bs-target] {
	width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,.75);
	background-color: transparent; opacity: .85; margin: 0 5px; transition: background-color .2s ease;
}
.zen-hero__dots [data-bs-target].active { background-color: #fff; opacity: 1; }
.zen-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #eef1f5; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 22px; }
.zen-hero__eyebrow::before { content: ""; width: 22px; height: 1px; background: #eef1f5; display: inline-block; }
.zen-hero__title { color: #fff; font-size: clamp(44px, 7vw, 92px); line-height: 1.02; margin: 0 0 20px; max-width: 12ch; }
.zen-hero__sub { color: #e9e6df; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.55; margin: 0 0 34px; max-width: 520px; font-weight: 300; }

/* Stats band */
.zen-stats { background: var(--zen-primary); color: #eef1f5; }
.zen-stat__num { font-family: "Marcellus", serif; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.05; }
.zen-stat__label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .72; margin-top: 8px; }

/* About */
.zen-about__head { position: sticky; top: 104px; }
.zen-about__body p { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.75; color: var(--zen-body); font-weight: 300; margin: 0 0 26px; }
.zen-about__body p:last-child { margin-bottom: 0; }

/* Gallery — CSS masonry */
.zen-masonry { column-width: 280px; column-gap: 16px; }
.zen-shot { display: block; break-inside: avoid; margin-bottom: 16px; border-radius: 14px; overflow: hidden; }
.zen-shot img { width: 100%; height: auto; border-radius: 14px; transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .4s ease; }
.zen-shot:hover img { transform: scale(1.04); filter: brightness(1.03); }
.zen-gallery__note { font-size: 14px; color: var(--zen-muted); max-width: 280px; }

/* Amenities */
.zen-amenities { background: #efece4; }
.zen-amenity {
	display: flex; align-items: flex-start; gap: 14px;
	background: var(--zen-card); border: 1px solid var(--zen-border);
	border-radius: 12px; padding: 20px 22px; height: 100%;
}
.zen-amenity__mark { flex: none; width: 8px; height: 8px; margin-top: 8px; background: var(--zen-primary); transform: rotate(45deg); }
.zen-amenity__label { font-size: 16px; line-height: 1.5; color: #2b3037; font-weight: 400; }

.zen-price-card { background: var(--zen-primary); color: #eef1f5; border-radius: 16px; padding: 36px 38px; height: 100%; }
.zen-price-card .num { font-family: "Marcellus", serif; font-size: 40px; line-height: 1.05; margin-bottom: 12px; }
.zen-price-card .num span { font-size: 18px; opacity: .8; }
.zen-note-card { background: var(--zen-card); border: 1px solid var(--zen-border); border-radius: 16px; padding: 36px 38px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.zen-note-card p { font-size: 17px; line-height: 1.6; margin: 0; color: #2b3037; font-weight: 400; }
.zen-kicker { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px; }
.zen-kicker--muted { color: var(--zen-muted); }

/* Location */
.zen-address { border-top: 1px solid var(--zen-border); padding-top: 20px; margin-top: 28px; }
.zen-address__label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--zen-muted); margin-bottom: 6px; }
.zen-address__val { font-size: 17px; color: #2b3037; }
.zen-map { border-radius: 16px; overflow: hidden; border: 1px solid var(--zen-border); height: 440px; }
.zen-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.15); }

/* Booking (dark) */
.zen-book { background: #23282e; color: #eef1f5; }
.zen-book__title { color: #fff; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.1; margin: 0 0 20px; }
.zen-book__sub { font-size: 17px; line-height: 1.65; color: #c4c9cf; font-weight: 300; margin: 0; }
.zen-book__panel { background: #2c3239; border: 1px solid #3a424b; border-radius: 20px; padding: clamp(26px, 4vw, 48px); }
/* Restyle the plugin's Bootstrap booking form for the dark panel. */
.zen-book__panel .form-label { color: #a6adb5; font-size: 13px; letter-spacing: .06em; }
.zen-book__panel .form-control,
.zen-book__panel .form-select {
	background: #23282e; border: 1px solid #3a424b; color: #f5f3ee;
	border-radius: 10px; padding: 13px 16px; color-scheme: dark;
}
.zen-book__panel .form-control::placeholder { color: #7d858e; }
.zen-book__panel .form-control:focus,
.zen-book__panel .form-select:focus {
	background: #23282e; color: #f5f3ee; border-color: #6f8bab;
	box-shadow: 0 0 0 .2rem rgba(111,139,171,.25);
}
.zen-book__panel .form-text { color: #8b939c; }
.zen-book__panel .form-check-input { background-color: #23282e; border-color: #3a424b; }
.zen-book__panel .form-check-input:checked { background-color: #6f8bab; border-color: #6f8bab; }
.zen-book__panel .form-check-label,
.zen-book__panel .wpib-booking-form a { color: #a6adb5; }
.zen-book__panel .wpib-booking-form a { color: #a9c1e0; }
.zen-book__panel .btn-primary {
	--bs-btn-bg: #6f8bab; --bs-btn-border-color: #6f8bab;
	--bs-btn-hover-bg: #7d99ba; --bs-btn-hover-border-color: #7d99ba;
	--bs-btn-color: #fff; --bs-btn-hover-color: #fff;
	width: 100%; padding: 15px; border-radius: 999px; font-size: 16px; letter-spacing: .02em; margin-top: .5rem;
}
/* Country-code Tom Select enhancer — match the dark inputs (height + white text).
   High specificity beats tom-select.bootstrap5's own !important on .ts-control. */
.zen-book__panel .ts-wrapper.form-select { padding: 0; height: auto; }
.zen-book__panel .ts-wrapper.form-select,
.zen-book__panel .ts-wrapper.form-select .ts-control {
	background-color: #23282e !important; border-color: #3a424b !important;
	color: #f5f3ee !important; border-radius: 10px !important; box-shadow: none;
}
.zen-book__panel .ts-wrapper.form-select .ts-control { padding: 13px 16px !important; min-height: 0 !important; }
.zen-book__panel .ts-wrapper.form-select .ts-control > input,
.zen-book__panel .ts-wrapper.form-select .ts-control .item { color: #f5f3ee !important; }
.zen-book__panel .ts-wrapper.form-select .ts-control > input::placeholder { color: #7d858e !important; }
.zen-book__panel .ts-wrapper.form-select.focus { border-color: #6f8bab !important; box-shadow: 0 0 0 .2rem rgba(111,139,171,.25) !important; }
.zen-book__panel .ts-dropdown { background: #2c3239; color: #f5f3ee; border: 1px solid #3a424b; }
.zen-book__panel .ts-dropdown .option { color: #e9e6df; }
.zen-book__panel .ts-dropdown .option.active,
.zen-book__panel .ts-dropdown .active { background: #3a424b; color: #fff; }

/* --------------------------------------------------------------------- *
 * Footer (footer.php)
 * --------------------------------------------------------------------- */
/* #footer.zen-footer beats the theme's #footer{background:#fff} (ID specificity). */
.zen-footer,
#footer.zen-footer { background: #1b1f24; color: #c4c9cf; }
.zen-footer a { color: #c4c9cf; }
.zen-footer a:hover { color: #fff; }
.zen-footer__brand { font-family: "Marcellus", serif; font-size: 26px; color: #fff; margin-bottom: 16px; }
.zen-footer__text { font-size: 15px; line-height: 1.7; color: #9aa0a7; font-weight: 300; }
.zen-footer__text a { color: #a9c1e0; }
.zen-footer__label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #6f767d; margin-bottom: 16px; }
.zen-footer__muted { font-size: 15px; line-height: 1.7; color: #9aa0a7; font-weight: 300; }
.zen-footer__links a { display: block; font-size: 15px; margin-top: 8px; }
.zen-footer__social a { font-size: 14px; color: #a9c1e0; margin-right: 16px; }
.zen-footer__bar { border-top: 1px solid #2c3138; font-size: 13px; color: #6f767d; }

/* --------------------------------------------------------------------- *
 * Scroll reveal
 * --------------------------------------------------------------------- */
@keyframes zenFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.zen-apt [data-reveal] {
	opacity: 0; transform: translateY(26px);
	transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
	transition-delay: var(--zen-delay, 0s); will-change: opacity, transform;
}
.zen-apt [data-reveal="in"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.zen-apt [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.zen-hero__inner { animation: none; }
}

/* --------------------------------------------------------------------- *
 * Responsive tweaks (Bootstrap grid handles the columns)
 * --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.zen-about__head { position: static; }
	.zen-map { height: 340px; }
}
@media (max-width: 767.98px) {
	.zen-hero { min-height: 78vh; }
	.zen-navbar .zen-cta { margin-top: .5rem; display: inline-block; }
}