/* =============================================================
   FLIEXSE SUITES — Forest Green Luxury Theme
   Forest Green #1a3d2e + British Gold #C9A84C
   ============================================================= */

/* ── Body ──────────────────────────────────────────────────── */
body {
    background-color: #f0f4f1;
    color: #1a2e22;
}

/* ── Hero → deep forest green ──────────────────────────────── */
.hero-bg {
    background: linear-gradient(150deg, #0b2016 0%, #1a3d2e 45%, #2d5a40 100%);
}

/* ── Scrolled header → crisp sage white ────────────────────── */
#main-header {
    transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
#main-header.scrolled {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(232, 240, 234, 0.97);
    box-shadow: 0 4px 28px rgba(0,0,0,.10);
}

/* Nav links when header is scrolled */
#main-header.scrolled .nav-link {
    color: rgba(26, 61, 46, .70) !important;
}
#main-header.scrolled .nav-link:hover {
    color: #C9A84C !important;
}
#main-header.scrolled .logo-mark {
    color: #1a3d2e !important;
}
#main-header.scrolled #hamburger-btn {
    color: rgba(26, 61, 46, .70) !important;
}

/* ── Mobile menu → sage white with green text ──────────────── */
#mobile-menu {
    background-color: rgba(232, 240, 234, .98) !important;
    border-color: rgba(26, 61, 46, .08) !important;
}
#mobile-menu a {
    color: rgba(26, 61, 46, .72) !important;
    border-color: rgba(26, 61, 46, .06) !important;
}
#mobile-menu a:hover { color: #C9A84C !important; }
#mobile-menu .text-gold { color: #C9A84C !important; }

/* ── Dark sections → bottle green ─────────────────────────── */
.dark-section {
    background: linear-gradient(145deg, #0e2d1e 0%, #1a3d2e 55%, #1f4a36 100%) !important;
}

/* ── Page / section backgrounds ────────────────────────────── */
section.bg-white {
    background-color: #f8fbf8 !important;
}
section.bg-gray-50 {
    background-color: #e8f0ea !important;
}

/* ── Sticky filter bar ─────────────────────────────────────── */
div.sticky.bg-white {
    background-color: #f0f4f1 !important;
    border-color: rgba(26, 61, 46, .10) !important;
}

/* ── Cards ─────────────────────────────────────────────────── */
.bg-white.rounded-2xl,
.bg-white.rounded-3xl {
    background-color: #fff !important;
}
.bg-white.rounded-2xl.border-gray-100,
.bg-white.rounded-3xl.border-gray-100 {
    border-color: rgba(26, 61, 46, .08) !important;
}
.bg-white.rounded-2xl.shadow-md {
    box-shadow: 0 4px 20px rgba(0,0,0,.05) !important;
}

/* ── Text color overrides ──────────────────────────────────── */
.text-navy {
    color: #1a3d2e !important;
}
section.bg-white .text-gray-500,
section.bg-gray-50 .text-gray-500 {
    color: rgba(26, 61, 46, .55) !important;
}
section.bg-white .text-gray-600,
section.bg-gray-50 .text-gray-600 {
    color: rgba(26, 61, 46, .65) !important;
}
section.bg-white .text-gray-400,
section.bg-gray-50 .text-gray-400 {
    color: rgba(26, 61, 46, .42) !important;
}

/* ── Outline buttons in light sections ─────────────────────── */
section.bg-white .border-navy,
section.bg-gray-50 .border-navy {
    border-color: #1a3d2e !important;
    color: #1a3d2e !important;
}
section.bg-white .border-navy:hover,
section.bg-gray-50 .border-navy:hover {
    border-color: #C9A84C !important;
    color: #C9A84C !important;
}

/* ── CTA split section left panel ──────────────────────────── */
section.overflow-hidden .bg-navy {
    background-color: #1a3d2e !important;
}

/* ── Hover utilities ───────────────────────────────────────── */
.hover\:border-gold:hover { border-color: #C9A84C !important; }
.hover\:text-gold:hover   { color: #C9A84C !important; }

/* ── Footer → bottle green ─────────────────────────────────── */
#site-footer {
    background-color: #152f22 !important;
    color: rgba(255, 255, 255, .55) !important;
}
#site-footer h4 {
    color: #fff !important;
}
#site-footer a:not([class*="bg-"]) {
    color: rgba(255, 255, 255, .55) !important;
}
#site-footer a:not([class*="bg-"]):hover {
    color: #C9A84C !important;
}
#site-footer .footer-tagline {
    color: rgba(255, 255, 255, .45) !important;
}
#site-footer .footer-bottom {
    border-color: rgba(255, 255, 255, .08) !important;
    color: rgba(255, 255, 255, .28) !important;
}

/* ══════════════════════════════════════════════════════════════
   SUITE DESCRIPTION — Styled Content
   .sdesc-* classes render markdown-sourced text beautifully
   while keeping semantic h3/ul/li/p tags intact for SEO.
   ══════════════════════════════════════════════════════════════ */

.suite-desc { font-family: inherit; }

/* Lead paragraph */
.sdesc-lead {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: #1a2638;
    font-weight: 500;
    margin-bottom: 1.1rem;
}

/* Regular paragraphs */
.sdesc-p {
    font-size: 0.875rem;
    line-height: 1.75;
    color: rgba(26, 61, 46, .68);
    margin-bottom: 0.875rem;
}

/* Section headings — gold accent bar */
.sdesc-h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1a3d2e;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    padding-inline-start: 0.9rem;
    border-inline-start: 3px solid #C9A84C;
    background: linear-gradient(to right, rgba(201, 168, 76, 0.10) 0%, transparent 80%);
    border-radius: 0 4px 4px 0;
    line-height: 1.4;
}

/* Bullet list */
.sdesc-ul {
    list-style: none;
    margin: 0.25rem 0 1.1rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.sdesc-li {
    position: relative;
    padding-inline-start: 1.35rem;
    font-size: 0.875rem;
    line-height: 1.65;
    color: rgba(26, 61, 46, .68);
}
.sdesc-li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.52rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #C9A84C;
    flex-shrink: 0;
}

/* Bold text inside descriptions */
.suite-desc strong {
    color: #1a3d2e;
    font-weight: 700;
}

/* Public redesign helpers */
.fs-section-kicker {
    color: #C9A84C;
    font-size: 0.72rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-weight: 700;
}

.fs-soft-card {
    background: #fff;
    border: 1px solid rgba(26, 61, 46, .08);
    box-shadow: 0 18px 45px rgba(16, 45, 31, .07);
}

.fs-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
    padding: .42rem .72rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1a3d2e;
    background: rgba(201, 168, 76, .13);
    border: 1px solid rgba(201, 168, 76, .24);
}

.fs-image-placeholder {
    background:
        linear-gradient(135deg, rgba(201,168,76,.16), transparent 38%),
        linear-gradient(150deg, #102b1e 0%, #1a3d2e 52%, #295640 100%);
}

.fs-booking-panel {
    border: 1px solid rgba(201, 168, 76, .28);
    box-shadow: 0 24px 70px rgba(16, 45, 31, .12);
}

.fs-input {
    width: 100%;
    border: 1px solid rgba(26, 61, 46, .14);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    color: #1a2e22;
    background: #fff;
}
.fs-input:focus {
    outline: none;
    border-color: #C9A84C;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, .18);
}

@media (max-width: 640px) {
    .card-hover:hover {
        transform: none;
    }
    .fs-mobile-sticky {
        position: sticky;
        bottom: 0;
        z-index: 40;
        margin-left: -1.25rem;
        margin-right: -1.25rem;
        border-radius: 1rem 1rem 0 0;
    }
}