/*
Theme Name: BHELA
Theme URI: https://bhelahouseboat.com
Author: 3s-Soft
Author URI: https://3s-soft.com
Description: "Midnight Monsoon" — a total redesign for BHELA – The Haor Exclusive. Dark ink-teal luxury editorial design with cream sections, serif display typography, glass navigation and a conversion-first booking experience. Built for Tanguar Haor's premium houseboat.
Version: 2.6.8
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bhela
Tags: houseboat, travel, tourism, bangla, dark, luxury, responsive
*/

/* ==========================================================
   1. DESIGN TOKENS — Midnight Monsoon
   ========================================================== */
:root {
	/* Colors */
	--ink: #0A2A2F;
	--ink-2: #0E3B41;
	--primary: #137A74;
	--primary-soft: #1B968F;
	--aqua: #6FC7BF;
	--cta: #FF7A3D;
	--cta-dark: #E5601F;
	--gold: #F5C97B;
	--sand: #F4EDE1;
	--cream: #FBF8F2;
	--white: #FFFFFF;
	--text: #22403E;
	--text-soft: #5E7472;
	--text-inverse: #DCEBE9;
	--line: rgba(10, 42, 47, 0.10);
	--line-inverse: rgba(220, 235, 233, 0.16);

	/* Type */
	--font-display: 'Fraunces', 'Noto Serif Bengali', 'Hind Siliguri', serif;
	--font-body: 'Noto Sans Bengali', 'Hind Siliguri', 'Poppins', sans-serif;
	--fs-hero: clamp(2.4rem, 6vw, 4.6rem);
	--fs-h2: clamp(1.8rem, 4vw, 2.8rem);
	--fs-h3: clamp(1.25rem, 2.5vw, 1.6rem);
	--fs-body: 1.05rem;

	/* Layout */
	--container: 1200px;
	--radius: 20px;
	--radius-sm: 12px;
	--shadow: 0 18px 50px rgba(10, 42, 47, 0.14);
	--shadow-sm: 0 8px 24px rgba(10, 42, 47, 0.10);
	--space: clamp(4.5rem, 9vw, 8rem);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================
   2. RESET & BASE
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.85;
	color: var(--text);
	background: var(--cream);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--cta); }
ul, ol { padding-left: 1.4em; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.4; color: var(--ink); }
:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.section { padding-block: var(--space); }
.section--dark { background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark p { color: var(--text-inverse); }
.section--sand { background: var(--sand); }

/* Eyebrow + headings */
.eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	font-size: .84rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--primary); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--cta); }
.section--dark .eyebrow { color: var(--aqua); }
.section-title { font-size: var(--fs-h2); margin-bottom: 1.1rem; }
.section-lead { max-width: 640px; color: var(--text-soft); margin-bottom: 2.6rem; }
.section--dark .section-lead { color: var(--text-inverse); }
.center { text-align: center; }
.center .section-lead { margin-inline: auto; }
.center .eyebrow::before { display: none; }

/* Buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .95rem 2.1rem; border-radius: 999px; border: 0;
	font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; cursor: pointer;
	transition: transform .2s var(--ease), box-shadow .2s, background .2s;
	min-height: 48px;
}
.btn--cta { background: var(--cta); color: #fff; box-shadow: 0 10px 30px rgba(255, 122, 61, .38); }
.btn--cta:hover { background: var(--cta-dark); color: #fff; transform: translateY(-3px); }
.btn--ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.55); }
.btn--ghost:hover { border-color: var(--aqua); color: var(--aqua); }
.btn--ghost-dark { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--ghost-dark:hover { background: var(--ink); color: var(--white); }
.btn--wa { background: #25D366; color: #fff; }
.btn--wa:hover { background: #1eb457; color: #fff; transform: translateY(-3px); }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================
   3. NAVIGATION
   ========================================================== */
.site-nav {
	position: fixed; inset: 0 0 auto 0; z-index: 1000;
	padding: .9rem 0;
	transition: background .3s, box-shadow .3s, padding .3s;
}
/* Scrolled background sits on a ::before layer, NOT on .site-nav itself.
   Putting backdrop-filter on .site-nav would make it the containing block
   for its position:fixed descendants — collapsing the full-screen mobile
   menu into the nav bar after any scroll. The pseudo-element avoids that. */
.site-nav.is-scrolled { padding: .55rem 0; }
.site-nav.is-scrolled::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(10, 42, 47, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 4px 30px rgba(0,0,0,.25);
}
.site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-nav__brand { display: flex; align-items: center; gap: .7rem; }
.site-nav__brand img { height: 46px; width: 46px; border-radius: 12px; object-fit: cover; }
.site-nav__brand-text { line-height: 1.15; }
.site-nav__brand-text strong { display: block; font-family: var(--font-display); font-size: 1.22rem; color: var(--white); letter-spacing: .04em; }
.site-nav__brand-text span { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--aqua); }
.site-nav__menu { display: flex; align-items: center; gap: 1.5rem; list-style: none; padding: 0; }
.site-nav__menu a { color: var(--text-inverse); font-weight: 600; font-size: .96rem; position: relative; }
.site-nav__menu a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--cta); transition: width .25s var(--ease); }
.site-nav__menu a:hover { color: #fff; }
.site-nav__menu a:hover::after { width: 100%; }
.site-nav__book { margin-left: .5rem; padding: .6rem 1.5rem; min-height: 42px; font-size: .95rem; }
.site-nav__book.btn--cta { background: var(--cta); color: #fff !important; box-shadow: 0 6px 20px rgba(255,122,61,.4); }
.site-nav__book.btn--cta:hover { background: var(--cta-dark); color: #fff !important; transform: translateY(-2px); }
.site-nav__book.btn--cta::after { display: none !important; }
.site-nav__toggle {
	display: none; background: none; border: 0; cursor: pointer;
	width: 46px; height: 46px; border-radius: 10px; flex-direction: column; gap: 6px;
	align-items: center; justify-content: center;
}
.site-nav__toggle span { width: 24px; height: 2.5px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

@media (max-width: 900px) {
	.site-nav__toggle { display: flex; }
	.site-nav__menu {
		position: fixed; inset: 0; z-index: 1001; background: rgba(10, 42, 47, 0.98);
		flex-direction: column; justify-content: center; gap: 2rem;
		transform: translateX(100%); transition: transform .35s var(--ease);
		overflow-y: auto; -webkit-overflow-scrolling: touch;
	}
	.site-nav__menu.is-open { transform: none; }
	.site-nav__menu a { font-size: 1.35rem; }
	.site-nav__toggle { position: relative; z-index: 1002; }
	.site-nav__book.btn--cta { font-size: 1.2rem; padding: .8rem 2rem; margin-left: 0; }
}

/* ==========================================================
   4. HERO
   ========================================================== */
.hero {
	position: relative; min-height: 100svh;
	display: flex; align-items: center;
	background: var(--ink);
	color: #fff;
	overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero__bg::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(105deg, rgba(10,42,47,.94) 8%, rgba(10,42,47,.55) 48%, rgba(10,42,47,.35) 100%);
}
.hero__inner { position: relative; z-index: 2; padding-block: 8rem 6rem; display: grid; grid-template-columns: 1.2fr .9fr; gap: 3rem; align-items: center; }
.hero__kicker { display: inline-flex; align-items: center; gap: .6rem; background: rgba(111,199,191,.14); border: 1px solid rgba(111,199,191,.35); color: var(--aqua); padding: .45rem 1.1rem; border-radius: 999px; font-size: .85rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 1.6rem; }
.hero__title { font-size: var(--fs-hero); color: #fff; margin-bottom: 1.2rem; letter-spacing: 0; line-height: 1.28; padding-top: .1em; }
.hero__title em { font-style: normal; color: var(--gold); }
.hero__sub { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--text-inverse); max-width: 34rem; margin-bottom: 2.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.8rem; }
.hero__stats { display: flex; gap: 2.6rem; flex-wrap: wrap; }
.hero__stat strong { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--gold); line-height: 1.2; }
.hero__stat span { font-size: .86rem; color: var(--text-inverse); letter-spacing: .04em; }

/* Hero booking card */
.hero-card {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-radius: var(--radius);
	padding: 1.8rem;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}
.hero-card h3 { color: #fff; font-size: 1.25rem; margin-bottom: 1.2rem; display: flex; align-items: center; gap: .5rem; }
.hero-card label { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .05em; color: var(--aqua); margin-bottom: .35rem; }
.hero-card select, .hero-card input {
	width: 100%; padding: .8rem .95rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.25);
	background: rgba(10,42,47,.55); color: #fff; font-family: inherit; font-size: .98rem; margin-bottom: .95rem;
	color-scheme: dark;
}
.hero-card__result { display: flex; justify-content: space-between; align-items: baseline; padding: .8rem 0 1rem; border-top: 1px dashed rgba(255,255,255,.25); margin-top: .2rem; }
.hero-card__result span { color: var(--text-inverse); font-size: .9rem; }
.hero-card__result strong { font-family: var(--font-display); font-size: 1.7rem; color: var(--gold); }
.hero-card .btn { width: 100%; }
.hero__scroll { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); color: var(--text-inverse); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; z-index: 2; opacity: .8; }

@media (max-width: 900px) {
	.hero__inner { grid-template-columns: 1fr; padding-block: 7rem 5rem; }
	.hero-card { max-width: 480px; margin-inline: auto; width: 100%; }
}

/* ==========================================================
   5. TRUST STRIP
   ========================================================== */
.trust { background: var(--ink-2); padding: 1.3rem 0; border-top: 1px solid var(--line-inverse); }
.trust__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; }
.trust__item { display: flex; align-items: center; gap: .55rem; color: var(--text-inverse); font-weight: 600; font-size: .95rem; }
.trust__item svg, .trust__item span.ic { color: var(--gold); }

/* ==========================================================
   6. CABIN CARDS
   ========================================================== */
.cabins-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.8rem; }
.cabin-card {
	background: var(--white); border-radius: var(--radius); overflow: hidden;
	box-shadow: var(--shadow-sm); border: 1px solid var(--line);
	display: flex; flex-direction: column;
	transition: transform .3s var(--ease), box-shadow .3s;
}
.cabin-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.cabin-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.cabin-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cabin-card:hover .cabin-card__media img { transform: scale(1.06); }
.cabin-card__badge { position: absolute; top: 1rem; left: 1rem; background: var(--cta); color: #fff; font-size: .78rem; font-weight: 700; padding: .3rem .9rem; border-radius: 999px; letter-spacing: .04em; }
.cabin-card__body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.cabin-card__title { font-size: 1.28rem; margin-bottom: .4rem; }
.cabin-card__meta { display: flex; gap: 1.1rem; color: var(--text-soft); font-size: .88rem; margin-bottom: 1rem; }
.cabin-card__price { margin-top: auto; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.cabin-card__price .now { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--primary); }
.cabin-card__price .was { color: var(--text-soft); text-decoration: line-through; font-size: .95rem; }
.cabin-card__price .per { font-size: .82rem; color: var(--text-soft); }
.cabin-card__cta { margin-top: 1.1rem; }
.cabin-card__cta .btn { width: 100%; padding: .75rem; font-size: .95rem; }

/* ==========================================================
   7. SPOTS (Experience)
   ========================================================== */
.spots-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; }
.spot { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 240px; grid-column: span 4; }
.spot:nth-child(1), .spot:nth-child(2) { grid-column: span 6; min-height: 320px; }
.spot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.spot:hover img { transform: scale(1.07); }
.spot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,42,47,.88) 100%); }
.spot__label { position: absolute; bottom: 1.1rem; left: 1.3rem; right: 1.3rem; z-index: 2; color: #fff; }
.spot__label strong { display: block; font-family: var(--font-display); font-size: 1.25rem; }
.spot__label span { font-size: .85rem; color: var(--aqua); }
@media (max-width: 860px) { .spot, .spot:nth-child(1), .spot:nth-child(2) { grid-column: span 12; min-height: 240px; } }
@media (min-width: 861px) and (max-width: 1080px) { .spot { grid-column: span 6; } }

/* ==========================================================
   8. FOOD / SPLIT SECTIONS
   ========================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split__media { position: relative; }
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; aspect-ratio: 4/3.4; object-fit: cover; }
.split__media::before {
	content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem;
	border: 2px solid var(--cta); border-radius: var(--radius); z-index: -1; opacity: .5;
}
.checklist { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.4rem; margin: 1.4rem 0 2rem; }
.checklist li { position: relative; padding-left: 1.7rem; font-weight: 500; }
.checklist li::before { content: "✔"; position: absolute; left: 0; color: var(--cta); font-weight: 700; }
.section--dark .checklist li { color: var(--text-inverse); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .checklist { grid-template-columns: 1fr; } }

/* ==========================================================
   9. SCHEDULE
   ========================================================== */
.sched-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.sched-table th { background: var(--ink); color: #fff; text-align: left; padding: 1rem 1.2rem; font-family: var(--font-body); font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; }
.sched-table td { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.sched-table tr:last-child td { border-bottom: 0; }
/* Scoped to a/span: WP puts class="tag" on <body> for tag archives — an
   unscoped .tag selector would shrink-wrap the whole page. */
a.tag, span.tag { display: inline-block; padding: .22rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.tag--weekend { background: rgba(19,122,116,.12); color: var(--primary); }
.tag--weekday { background: rgba(26,127,55,.12); color: #1a7f37; }
.tag--holiday { background: rgba(255,122,61,.15); color: var(--cta-dark); }

/* ==========================================================
   10. REVIEWS
   ========================================================== */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem; }
.review {
	background: rgba(255,255,255,.06); border: 1px solid var(--line-inverse);
	border-radius: var(--radius); padding: 1.8rem;
}
.review__stars { color: var(--gold); letter-spacing: .2em; margin-bottom: .8rem; }
.review p { font-size: .98rem; }
.review__who { margin-top: 1.2rem; display: flex; align-items: center; gap: .8rem; }
.review__who .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }
.review__who strong { color: #fff; display: block; line-height: 1.3; }
.review__who span { font-size: .82rem; color: var(--aqua); }

/* ==========================================================
   11. FAQ
   ========================================================== */
.faq-list { max-width: 820px; margin-inline: auto; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .9rem; overflow: hidden; }
.faq-item summary {
	list-style: none; cursor: pointer; padding: 1.15rem 3.2rem 1.15rem 1.4rem;
	font-weight: 700; color: var(--ink); position: relative; font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
	width: 30px; height: 30px; border-radius: 50%; background: var(--sand); color: var(--primary);
	display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: transform .3s, background .3s;
}
.faq-item[open] summary::after { content: "−"; background: var(--cta); color: #fff; }
.faq-item__body { padding: 0 1.4rem 1.3rem; color: var(--text-soft); }

/* ==========================================================
   12. CTA BANNER
   ========================================================== */
.cta-banner {
	position: relative; border-radius: var(--radius); overflow: hidden;
	background: linear-gradient(120deg, var(--primary) 0%, var(--ink-2) 90%);
	padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center; color: #fff;
}
.cta-banner h2 { color: #fff; font-size: var(--fs-h2); margin-bottom: .8rem; }
.cta-banner p { color: var(--text-inverse); max-width: 560px; margin: 0 auto 1.8rem; }
.cta-banner .btn-row { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ==========================================================
   13. FOOTER
   ========================================================== */
.site-footer { background: var(--ink); color: var(--text-inverse); padding: var(--space) 0 0; }
.site-footer a { color: var(--text-inverse); }
.site-footer a:hover { color: var(--gold); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.4rem; padding-bottom: 3rem; }
.footer-brand img { height: 62px; border-radius: 14px; margin-bottom: 1rem; }
.footer-brand p { font-size: .95rem; }
.footer-col h4 { color: #fff; font-size: 1.05rem; margin-bottom: 1.1rem; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: .55rem; font-size: .95rem; }
.footer-tagline { font-family: var(--font-display); color: var(--gold); font-size: 1.1rem; margin-top: 1rem; }
.footer-bottom { border-top: 1px solid var(--line-inverse); padding: 1.4rem 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
.footer-credit a { color: var(--gold); font-weight: 700; }
.footer-credit a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   14. FLOATING WHATSAPP + MOBILE ACTION BAR
   ========================================================== */
.wa-float {
	position: fixed; right: 1.2rem; bottom: 5.4rem; z-index: 900;
	width: 58px; height: 58px; border-radius: 50%; background: #25D366;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 30px rgba(37, 211, 102, .5);
	transition: transform .2s;
}
.wa-float:hover { transform: scale(1.1); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
@media (min-width: 901px) { .wa-float { bottom: 1.6rem; } }
/* On mobile the fixed bottom action bar already carries WhatsApp — the
   floating button would duplicate it and overlap the bar. Hide it there. */
@media (max-width: 900px) { .wa-float { display: none; } }

/* Primary-first pattern: one big booking CTA, quiet call/WhatsApp icon
   buttons — a single clear action instead of three competing blocks. */
.mobile-bar {
	position: fixed; inset: auto 0 0 0; z-index: 950;
	display: none; align-items: center; gap: .6rem;
	background: rgba(10, 42, 47, .97); backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--line-inverse);
	padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
}
.mobile-bar__icon {
	flex: none; width: 48px; height: 48px; border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s;
}
.mobile-bar__icon svg { width: 22px; height: 22px; }
.mobile-bar__icon--call { color: var(--text-inverse); border: 1px solid rgba(220,235,233,.28); }
.mobile-bar__icon--call:active { background: rgba(220,235,233,.12); }
.mobile-bar__icon--wa { color: #25D366; border: 1px solid rgba(37,211,102,.5); }
.mobile-bar__icon--wa:active { background: rgba(37,211,102,.14); }
.mobile-bar__book {
	flex: 1; height: 48px; border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	background: var(--cta); color: #fff !important;
	font-weight: 700; font-size: 1.02rem; letter-spacing: .01em;
	box-shadow: 0 4px 16px rgba(255,122,61,.35);
	transition: transform .12s, background .2s;
}
.mobile-bar__book:active { transform: scale(.97); background: var(--cta-dark); }
@media (max-width: 900px) {
	.mobile-bar { display: flex; }
	body { padding-bottom: 72px; }
	/* Booking page owns its own sticky price/action bar — drop the generic one. */
	body.bhela-book-page .mobile-bar { display: none; }
	body.bhela-book-page { padding-bottom: 0; }
}

/* ==========================================================
   15. INNER PAGES
   ========================================================== */
.page-hero {
	background: linear-gradient(120deg, var(--ink) 20%, var(--primary) 130%);
	color: #fff; padding: 9.5rem 0 4rem; position: relative; overflow: hidden;
}
.page-hero::after { content: "🛶"; position: absolute; right: -1rem; bottom: -2.4rem; font-size: 11rem; opacity: .08; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); }
.page-hero p { color: var(--text-inverse); max-width: 640px; margin-top: .8rem; }
.entry-content { max-width: 820px; margin-inline: auto; }
.entry-content h2 { margin: 2.2rem 0 .8rem; font-size: 1.6rem; }
.entry-content h3 { margin: 1.8rem 0 .6rem; font-size: 1.25rem; }
.entry-content p, .entry-content ul, .entry-content ol { margin-bottom: 1rem; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; }
.entry-content td, .entry-content th { border: 1px solid var(--line); padding: .7rem .9rem; }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.gallery-grid a { border-radius: var(--radius-sm); overflow: hidden; display: block; aspect-ratio: 1; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery-grid a:hover img { transform: scale(1.08); }
.lightbox {
	position: fixed; inset: 0; z-index: 2000; background: rgba(5, 20, 23, .95);
	display: none; align-items: center; justify-content: center; padding: 2rem;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 12px; }
.lightbox__close { position: absolute; top: 1.2rem; right: 1.6rem; background: none; border: 0; color: #fff; font-size: 2.4rem; cursor: pointer; }

/* Food menu */
.menu-day { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--line); padding: 2rem; margin-bottom: 1.8rem; }
.menu-day h3 { display: flex; align-items: center; gap: .6rem; padding-bottom: .9rem; border-bottom: 2px solid var(--sand); margin-bottom: 1.2rem; }
/* Dark "special attraction" box: light text so items aren't invisible on ink bg. */
.menu-day--dark { color: var(--text-inverse); border-color: var(--line-inverse); }
.menu-day--dark .checklist li { color: var(--text-inverse); }

/* ==========================================================
   18. BLOG — হাওর জার্নাল
   ========================================================== */
.post-card__meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
	font-size: .82rem; color: var(--text-soft); margin-bottom: .6rem;
}
.post-card__meta .tag { font-size: .74rem; padding: .16rem .7rem; }
.post-card__more { font-weight: 700; }

/* Single post hero meta (on dark hero) */
.post-hero-meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
	margin-bottom: .9rem; color: var(--text-inverse); font-size: .9rem;
}
.post-hero-meta .tag { background: rgba(255,255,255,.14); color: #fff; }
.post-hero-meta .tag:hover { background: rgba(255,255,255,.24); }

/* Tags row after content */
.post-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }

/* Prev / next post navigation */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; max-width: 820px; margin-inline: auto; }
.post-nav a {
	display: block; background: var(--white); border: 1px solid var(--line);
	border-radius: 14px; padding: 1.1rem 1.3rem; box-shadow: var(--shadow-sm);
	transition: transform .2s var(--ease), box-shadow .2s;
}
.post-nav a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post-nav a small { display: block; color: var(--text-soft); font-size: .8rem; margin-bottom: .2rem; }
.post-nav a strong { color: var(--ink); line-height: 1.5; font-size: .98rem; }
.post-nav a.next { text-align: right; }
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } }

/* Related posts */
.related-posts { margin-top: 3.5rem; }
.related-posts h2 { font-size: 1.5rem; margin-bottom: 1.4rem; }

/* Category / tag archive hero */
.page-hero .eyebrow { color: var(--aqua); }
.page-hero .eyebrow::before { background: var(--gold); }
.archive-back { margin-top: 1.2rem; }
.archive-back a { color: var(--aqua); font-weight: 700; font-size: .92rem; }
.archive-back a:hover { color: var(--gold); }

/* Pagination pills */
.bhela-pagination { margin-top: 2.6rem; }
.bhela-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.bhela-pagination .page-numbers {
	min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
	padding: 0 .8rem; border-radius: 999px; background: var(--white);
	border: 1px solid var(--line); color: var(--ink); font-weight: 700;
}
.bhela-pagination .page-numbers.current { background: var(--cta); border-color: var(--cta); color: #fff; }
.bhela-pagination a.page-numbers:hover { border-color: var(--primary); color: var(--primary); }
.menu-meals { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.4rem; }
.menu-meal h4 { font-family: var(--font-body); font-size: .95rem; color: var(--cta-dark); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .06em; }
.menu-meal ul { list-style: none; padding: 0; }
.menu-meal li { padding: .2rem 0 .2rem 1.2rem; position: relative; font-size: .95rem; }
.menu-meal li::before { content: "•"; position: absolute; left: 0; color: var(--primary); }

/* Blog / generic */
.post-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.post-card__body { padding: 1.5rem; }
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.8rem; }

/* Print */
@media print { .site-nav, .wa-float, .mobile-bar, .site-footer, .hero-card { display: none !important; } }

/* ==========================================================
   16. UX POLISH LAYER — expert pass
   ========================================================== */

/* --- Accessibility: skip link --- */
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 2000;
	background: var(--cta); color: #fff; padding: .8rem 1.4rem; border-radius: 0 0 12px 0; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- Selection & scrollbar branding --- */
::selection { background: var(--cta); color: #fff; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--sand); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 6px; border: 3px solid var(--sand); }

/* --- Typography rhythm: Bangla needs taller line-height, tighter headings --- */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.section-lead { font-size: 1.08rem; }

/* --- Buttons: press state, focus ring, icon nudge --- */
.btn:active { transform: translateY(0) scale(.98); }
.btn--cta:focus-visible, .btn--wa:focus-visible { outline-color: var(--ink); }
.btn--cta::after { content: ""; }
.btn[href*="wa.me"]:hover { letter-spacing: .01em; }

/* --- Card elevation system: consistent 3-level depth --- */
.cabin-card, .menu-day, .post-card { will-change: transform; }
.cabin-card:focus-within { transform: translateY(-8px); box-shadow: var(--shadow); }

/* Cabin price anchoring: savings chip */
.cabin-card__price .now { letter-spacing: -.01em; }
.save-chip {
	display: inline-block; background: rgba(26,127,55,.12); color: #1a7f37;
	font-size: .74rem; font-weight: 700; padding: .18rem .6rem; border-radius: 999px;
}

/* --- Hero: depth + motion polish --- */
.hero__bg img { transform: scale(1.04); animation: heroDrift 24s ease-in-out infinite alternate; }
@keyframes heroDrift { from { transform: scale(1.04) translateX(0); } to { transform: scale(1.1) translateX(-1.6%); } }
.hero__title { text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.hero__scroll { animation: scrollHint 2.2s ease-in-out infinite; }
@keyframes scrollHint { 0%,100% { transform: translate(-50%, 0); opacity:.8; } 50% { transform: translate(-50%, 6px); opacity:.45; } }
.hero__stat { position: relative; padding-left: 1.1rem; }
.hero__stat::before { content: ""; position: absolute; left: 0; top: .35rem; bottom: .35rem; width: 3px; border-radius: 2px; background: linear-gradient(var(--cta), var(--gold)); }

/* Hero card: input hover + focus consistency */
.hero-card select:hover, .hero-card input:hover { border-color: rgba(255,255,255,.45); }
.hero-card select:focus, .hero-card input:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(111,199,191,.25); }
.hero-card__result strong { transition: transform .2s var(--ease); }
.hero-card__result.bump strong { transform: scale(1.08); }

/* --- Nav: current page indicator + better tap targets --- */
.site-nav__menu a { padding: .4rem 0; display: inline-block; }
.site-nav__menu .current-menu-item > a { color: #fff; }
.site-nav__menu .current-menu-item > a::after { width: 100%; background: var(--gold); }

/* --- FAQ: smooth open + hover affordance --- */
.faq-item { transition: border-color .2s, box-shadow .2s; }
.faq-item:hover { border-color: var(--primary); }
.faq-item[open] { box-shadow: var(--shadow-sm); border-color: var(--primary); }
.faq-item__body { animation: faqIn .3s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq-item summary:hover::after { transform: translateY(-50%) scale(1.1); }

/* --- Tables: row hover, mobile scroll affordance --- */
.sched-table tbody tr { transition: background .15s; }
.sched-table tbody tr:hover { background: var(--sand); }

/* --- Reviews: lift on hover --- */
.review { transition: transform .3s var(--ease), border-color .3s; }
.review:hover { transform: translateY(-6px); border-color: rgba(111,199,191,.5); }

/* --- Spots: label slide-up on hover --- */
.spot__label { transition: transform .35s var(--ease); }
.spot:hover .spot__label { transform: translateY(-4px); }
.spot:focus-visible { outline-offset: -4px; }

/* --- CTA banner: subtle radial glow --- */
.cta-banner::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(600px 300px at 80% -20%, rgba(245,201,123,.22), transparent 70%);
	pointer-events: none;
}

/* --- Mobile bar: haptic-feeling press --- */
.mobile-bar a { transition: transform .12s, filter .12s; }
.mobile-bar a:active { transform: scale(.95); filter: brightness(1.1); }

/* --- Page hero: breadcrumb-ish home link --- */
.page-hero .crumb { font-size: .85rem; color: var(--aqua); display: inline-block; margin-bottom: .6rem; letter-spacing: .08em; }
.page-hero .crumb:hover { color: var(--gold); }

/* --- Forms (global): consistent focus + valid/invalid hints --- */
input, select, textarea { font-family: inherit; }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(19,122,116,.4); }
.entry-content a:hover { text-decoration-color: var(--cta); }

/* --- Motion safety --- */
@media (prefers-reduced-motion: reduce) {
	.hero__bg img, .hero__scroll { animation: none; }
}

/* --- Small screens: tighter hero, larger touch targets --- */
@media (max-width: 640px) {
	.hero__actions .btn { flex: 1 1 100%; }
	.hero__stats { gap: 1.2rem 1.8rem; }
	.section { padding-block: clamp(3.4rem, 10vw, 5rem); }
	.cta-banner .btn-row .btn { width: 100%; }
}

/* ==========================================================
   17. UI v2 LAYER — premium finish pass
   ========================================================== */

/* --- CTA buttons: warm gradient + glow ring --- */
.btn--cta {
	background: linear-gradient(135deg, #FF8B4A 0%, var(--cta) 45%, #F0561B 100%);
	background-size: 150% 150%;
	box-shadow: 0 10px 30px rgba(255, 122, 61, .38), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--cta:hover {
	background-position: 100% 100%;
	box-shadow: 0 14px 38px rgba(255, 122, 61, .5), inset 0 1px 0 rgba(255,255,255,.35);
}

/* --- Hero: gradient em + flourish + kicker shine --- */
.hero__title em {
	background: linear-gradient(100deg, var(--gold) 20%, #FFE3AE 50%, var(--gold) 80%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.hero__kicker { position: relative; overflow: hidden; }
.hero__kicker::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
	transform: translateX(-100%); animation: kickShine 5s ease-in-out infinite;
}
@keyframes kickShine { 0%, 60% { transform: translateX(-100%); } 90%, 100% { transform: translateX(100%); } }

/* --- Wave dividers between dark & light sections --- */
.has-wave-top { position: relative; }
.has-wave-top::before {
	content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 44px; z-index: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C240,55 480,55 720,28 C960,0 1200,0 1440,32 L1440,0 L0,0 Z' fill='%23FBF8F2'/%3E%3C/svg%3E");
	background-size: 100% 100%; pointer-events: none;
}
.has-wave-top--sand::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C240,55 480,55 720,28 C960,0 1200,0 1440,32 L1440,0 L0,0 Z' fill='%23F4EDE1'/%3E%3C/svg%3E");
}

/* --- Section textures: mesh glow on dark, dot grid on sand --- */
.section--dark {
	background:
		radial-gradient(900px 420px at 85% 0%, rgba(19, 122, 116, .35), transparent 60%),
		radial-gradient(700px 380px at 0% 100%, rgba(245, 201, 123, .08), transparent 55%),
		linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
}
.section--sand {
	background-image:
		radial-gradient(rgba(19, 122, 116, .07) 1px, transparent 1.5px);
	background-size: 26px 26px;
	background-color: var(--sand);
}

/* --- Cabin cards: media inner shadow + "Popular" spotlight --- */
.cabin-card__media::after {
	content: ""; position: absolute; inset: 0;
	box-shadow: inset 0 -46px 40px -30px rgba(10, 42, 47, .45);
	pointer-events: none;
}
.cabins-grid .cabin-card:nth-child(3) {
	border: 2px solid var(--cta);
	box-shadow: 0 14px 44px rgba(255, 122, 61, .22);
}
.cabins-grid .cabin-card:nth-child(3) .cabin-card__badge { background: linear-gradient(135deg, var(--cta), #F0561B); }

/* Cabin CTA: outline that fills on hover (reduces orange overload in grid) */
.cabin-card__cta .btn {
	background: transparent; color: var(--cta-dark);
	border: 2px solid var(--cta); box-shadow: none;
}
.cabin-card__cta .btn:hover {
	background: linear-gradient(135deg, #FF8B4A, var(--cta));
	color: #fff; border-color: transparent;
	box-shadow: 0 10px 26px rgba(255, 122, 61, .35);
}
.cabins-grid .cabin-card:nth-child(3) .cabin-card__cta .btn {
	background: linear-gradient(135deg, #FF8B4A, var(--cta)); color: #fff; border-color: transparent;
	box-shadow: 0 10px 26px rgba(255, 122, 61, .35);
}

/* --- Trust strip: separators + hover lift --- */
.trust__item { position: relative; transition: transform .2s; }
.trust__item:hover { transform: translateY(-2px); }
@media (min-width: 861px) {
	.trust__item + .trust__item::before {
		content: ""; position: absolute; left: -1.5rem; top: 50%; transform: translateY(-50%);
		width: 1px; height: 18px; background: var(--line-inverse);
	}
}

/* --- Split media: gold corner accent instead of plain border --- */
.split__media::before { border-color: var(--gold); opacity: .65; inset: 1.2rem -1.2rem -1.2rem 1.2rem; }
.split__media::after {
	content: ""; position: absolute; width: 58px; height: 58px; right: -.6rem; top: -.6rem;
	border-top: 3px solid var(--cta); border-right: 3px solid var(--cta); border-radius: 0 14px 0 0;
}

/* --- Section title: subtle underline swash on centered titles --- */
.center .section-title { position: relative; display: inline-block; padding-bottom: .35rem; }
.center .section-title::after {
	content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
	width: 74px; height: 4px; border-radius: 4px;
	background: linear-gradient(90deg, var(--cta), var(--gold));
}

/* --- Reviews: quote mark watermark --- */
.review { position: relative; overflow: hidden; }
.review::before {
	content: "\201C"; position: absolute; top: -14px; right: 10px;
	font-family: var(--font-display); font-size: 7rem; line-height: 1;
	color: rgba(245, 201, 123, .14); pointer-events: none;
}

/* --- Footer: glow divider on top --- */
.site-footer { position: relative; }
.site-footer::before {
	content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: min(720px, 80%); height: 1px;
	background: linear-gradient(90deg, transparent, rgba(245, 201, 123, .55), transparent);
}

/* --- Nav Book button: proper pill (immune to menu-link styles) --- */
.site-nav__menu a.site-nav__book {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .6rem 1.6rem !important; margin-left: .4rem;
	min-height: 42px; border-radius: 999px;
	background: linear-gradient(135deg, #FF8B4A 0%, var(--cta) 55%, #F0561B 100%);
	color: #fff !important; font-weight: 700; font-size: .95rem; line-height: 1;
	border: 1.5px solid rgba(255, 255, 255, .25);
	box-shadow: 0 6px 20px rgba(255, 122, 61, .45), inset 0 1px 0 rgba(255,255,255,.3);
	transition: transform .2s var(--ease), box-shadow .2s, filter .2s;
}
.site-nav__menu a.site-nav__book::after { display: none; }
.site-nav__menu a.site-nav__book:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 10px 28px rgba(255, 122, 61, .55), inset 0 1px 0 rgba(255,255,255,.3);
}
.site-nav__menu a.site-nav__book:active { transform: scale(.97); }
/* ==========================================================
   18. ELEMENTOR COMPATIBILITY
   ========================================================== */
.bhela-elementor main#content { padding: 0; }
/* Let Elementor sections truly full-bleed inside our <main> */
.elementor-section.elementor-section-stretched { max-width: none; }
/* Match Elementor defaults to BHELA tokens */
.bhela-elementor h1, .bhela-elementor h2, .bhela-elementor h3 { font-family: var(--font-display); }
.elementor-widget-button .elementor-button { border-radius: 999px; font-weight: 700; }
/* Elementor Canvas template hides theme chrome itself — nothing to do.
   For "Full Width (Elementor)" template the fixed nav overlays content;
   start pages with a dark section, or add 90px top padding to the first section. */

/* ==========================================================
   19. BANGLA TYPOGRAPHY POLISH
   ========================================================== */
/* Give Bangla glyph stacks breathing room everywhere */
.section-title { line-height: 1.42; }
.page-hero h1 { line-height: 1.35; }
.cabin-card__title, .menu-day h3, .review__who strong { line-height: 1.45; }
.faq-item summary { line-height: 1.7; }
.btn { line-height: 1.5; }
/* Footer tagline: Bangla serif looks better with more air */
.footer-tagline { line-height: 1.7; font-weight: 600; }
/* Trust strip + labels: no tracking on Bangla */
.trust__item { letter-spacing: 0; }
.hero__kicker { letter-spacing: .02em; }
.hero__stat span { letter-spacing: .02em; }
/* Numerals: keep tabular where prices align */
.cabin-card__price .now, .sched-table td, .bhela-bm-price__row strong { font-variant-numeric: tabular-nums; }
/* Bolder Bangla display weight for better presence */
.hero__title, .section-title { font-weight: 700; }