/* ═══════════════════════════════════════════════════════════
   style.css — Tornolo Mountain Landscape Theme
   Brand direction: alpine stone lodge + wild meadow + misty ridge
   Main editable colors live in :root below.
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   1) THEME TOKENS (EDIT THESE FIRST)
   If you want to rebrand the whole site later, start here.
   Change these variables and most of the site updates automatically.
   ─────────────────────────────────────────────────────────── */
:root {
    --bg-main: #eef1ea;          /* Main page background: misty off-white */
    --bg-soft: #f7f8f4;          /* Softer card background */
    --text-main: #2f342e;        /* Main text: deep mountain charcoal */
    --text-soft: #61685d;        /* Secondary text */
    --accent: #5f7558;           /* Main accent: forest sage */
    --accent-dark: #485b42;      /* Darker accent hover state */
    --accent-warm: #a8784d;      /* Warm stone / chestnut accent */
    --line: #d8ded3;             /* Border color */
    --panel: #fefcf7;            /* White panel */
    --tab-bg: #dfe6da;           /* Inactive room tab background */
    --tab-icon: #7e8c78;         /* Inactive mountain icon color */
    --hero-overlay-top: rgba(36, 50, 38, 0.25);
    --hero-overlay-mid: rgba(99, 117, 99, 0.4);
    --hero-overlay-bottom: rgba(238, 241, 234, 1);
}

/* ───────────────────────────────────────────────────────────
   2) BASE RESET
   ─────────────────────────────────────────────────────────── */
* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    overflow-x: hidden;
}

/* EDIT HERE if you want a different heading font later */
h1, h2, h3, h4, .font-serif-elegant {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
}

.font-body-serif {
    font-family: 'Lora', serif;
}

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #e6ebe3; }
::-webkit-scrollbar-thumb { background: #a8b39f; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── 3) HERO OVERLAY
   A two-layer approach:
   - .hero-overlay   = a moody dark veil that makes ALL text readable
   - .hero-fade      = the bottom fade that blends into --bg-main
   Edit the rgba opacity values below to make the photo lighter or darker.
   ── */
.hero-overlay {
    background: linear-gradient(
        160deg,
        rgba(86, 76, 45, 0.11) 0%,
        rgba(28, 32, 26, 0.22) 60%,
        rgba(28, 32, 26, 0.20) 100%
    );
}
.hero-fade {
    background: linear-gradient(
        to top,
        var(--bg-main) 0%,
        rgba(244, 242, 237, 0) 100%
    );
}
/* Hero text always reads white on the photo */
.hero-text-zone h1,
.hero-text-zone p,
.hero-text-zone .hero-tag {
    color: #f9f7f3;
}
/* Animated entrance for hero elements */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-tag   { animation: heroFadeUp 0.7s ease 0.1s both; }
.hero-title { animation: heroFadeUp 0.7s ease 0.25s both; }
.hero-sub   { animation: heroFadeUp 0.7s ease 0.4s both; }
.hero-btns  { animation: heroFadeUp 0.7s ease 0.55s both; }
/* Scroll indicator pulse */
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(5px); }
}
.scroll-hint { animation: scrollBounce 2s ease-in-out infinite; }

/* ───────────────────────────────────────────────────────────
   4) MOBILE MENU
   JS toggles the .open class.
   If you want a faster/slower animation, change 0.4s.
   ─────────────────────────────────────────────────────────── */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    opacity: 0;
}
.mobile-menu.open {
    max-height: 500px;
    opacity: 1;
}

/* ───────────────────────────────────────────────────────────
   5) ROOM TABS
   This is the main room selector UI.
   If you want a different shape, radius, or spacing, edit below.
   ─────────────────────────────────────────────────────────── */
.room-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .room-tabs {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}

.room-tab {
    position: relative;
    padding: 1.15rem 0.9rem;
    background: var(--tab-bg);
    border: 2px solid transparent;
    border-radius: 1.1rem 1.1rem 0 0;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-height: 110px;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.02);
}
@media (min-width: 768px) {
    .room-tab {
        min-height: 132px;
        padding: 1.4rem 1rem;
    }
}

/* These SVG icons are your mini mountain shapes.
   To swap the shapes, edit the SVG path directly in index.html. */
.room-tab svg {
    width: 34px;
    height: 34px;
    transition: all 0.35s ease;
}
@media (min-width: 768px) {
    .room-tab svg {
        width: 46px;
        height: 46px;
    }
}
.room-tab svg path {
    fill: var(--tab-icon);
    transition: fill 0.35s ease;
}

.tab-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.1;
}
@media (min-width: 768px) {
    .tab-name { font-size: 1.15rem; }
}

.tab-price {
    font-size: 0.65rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
@media (min-width: 768px) {
    .tab-price { font-size: 0.75rem; }
}

.room-tab:hover {
    background: #d2dbcc;
    transform: translateY(-2px);
}
.room-tab:hover svg path {
    fill: var(--accent);
}

/* Active tab = selected room */
.room-tab.active {
    background: var(--panel);
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(95,117,88,0.12);
}
.room-tab.active svg path { fill: var(--accent); }
.room-tab.active .tab-name { color: var(--accent-dark); }
.room-tab.active .tab-price { color: var(--accent-warm); }

/* The content panel below the tabs.
   Only one room panel is shown at a time via JS. */
.room-panel {
    background: var(--panel);
    color: var(--text-main);
    border-radius: 0 0 1.5rem 1.5rem;
    border: 2px solid var(--accent);
    border-top: none;
    box-shadow: 0 22px 36px rgba(47,52,46,0.08);
    display: none;
    animation: fadeIn 0.45s ease forwards;
}
.room-panel.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ───────────────────────────────────────────────────────────
   6) FLOATING WHATSAPP BUTTON
   Edit background if you want a greener or more branded CTA.
   ─────────────────────────────────────────────────────────── */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 60;
    width: 60px;
    height: 60px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    box-shadow: 0 6px 20px rgba(95,117,88,0.30);
    transition: transform 0.3s ease, background 0.3s ease;
}
.whatsapp-float:hover {
    transform: scale(1.08);
    background: var(--accent-dark);
}

/* ───────────────────────────────────────────────────────────
   7) TOAST NOTIFICATION
   The .show class is added/removed by JS.
   ─────────────────────────────────────────────────────────── */
#toast {
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 96px;
    transform: translateY(120%);
}
@media (min-width: 640px) {
    #toast {
        left: auto;
        right: 24px;
        top: 24px;
        bottom: auto;
        transform: translateX(120%);
        width: auto;
    }
}
#toast.show {
    transform: translateY(0) !important;
    opacity: 1 !important;
}
@media (min-width: 640px) {
    #toast.show { transform: translateX(0) !important; }
}

/* ───────────────────────────────────────────────────────────
   8) CODE GUIDE STYLES
   These are only for the educational code blocks on the page.
   ─────────────────────────────────────────────────────────── */
.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-warm));
    color: white;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(95,117,88,0.15);
}

.code-block {
    background: #2b2f2a;
    border: 1px solid #424940;
    border-radius: 0.75rem;
    padding: 1.25rem;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.6;
    color: #f0f2ee;
    overflow-x: auto;
}
.code-block .kw   { color: #d8b085; }
.code-block .str  { color: #a3c0a0; }
.code-block .prop { color: #b4c2d8; }
.code-block .val  { color: #f0f2ee; }
.code-block .cmt  { color: #9ca39a; font-style: italic; }