/* =========================================================
   AVORA — CENTRAL THEME
   =========================================================

   Every page in this project carries its own inline <style>
   block, which is why a colour change used to mean editing
   43 files. This file is the one place brand values live.

   Load it BEFORE the page's own <style> block so a page can
   still override anything locally.

   ---------------------------------------------------------
   ON THE STATUS COLOURS

   Available stays green and Occupied stays red, unchanged —
   the existing colour coding is deliberate and is left
   exactly as it was. The brand mark is used in black or
   white wherever it sits near those states, so the wordmark
   never competes with a red "fully booked" badge.
   ---------------------------------------------------------  */

:root {

    /* ---------- BRAND ---------- */

    /* Olive carries white text at 5.77:1, so it is the only one of
       the three safe as a button or a link. Amber is the opposite:
       white text on it lands at 2.49:1 and is unreadable, while
       black text reaches 8.44:1. That is why amber is used for
       badges and highlights with dark text on them, and never for
       a solid button with white letters. */
    --olive:           #636947;   /* primary — Secret Garden */
    --olive-dark:      #4E5338;   /* hover / pressed         */
    --olive-light:     #7E8560;   /* lighter accent          */
    --olive-tint:      #F2F3ED;   /* pale wash for panels    */

    --amber:           #E39300;
    /* The ONLY text colour amber may carry. Defined here because
       the override section below calls var(--on-amber) and, until
       now, nothing defined it — so every amber fill was rendering
       its label with no colour set at all, i.e. inheriting
       whatever happened to be nearest. */
    --on-amber:        #1A1206;   /* accent — dark text only */
    --amber-dark:      #B87700;
    --amber-tint:      #FEF6E7;

    --ink:             #000000;   /* true black              */

    /* Previous palette, kept so anything still pointing at these
       keeps rendering rather than falling back to nothing. */
    --ruby:            #9F1239;
    --ruby-dark:       #7D0E2E;
    --ruby-light:      #C81E4A;
    --ruby-tint:       #FFF1F2;

    /* Kept as the name every page reaches for. Repointing these
       two lines is how the whole UI changes colour in future —
       but note that only a handful of rules actually READ them
       today. The override section at the end of this file is
       what does the real work; see the note there. */
    --brand-primary:      var(--olive);
    --brand-primary-dark: var(--olive-dark);
    --brand-accent:       var(--amber);

    /* ---------- STATUS (unchanged) ---------- */
    --status-available: #16A34A;
    --status-occupied:  #DC2626;
    --status-held:      #D97706;
    --status-settled:   #059669;

    /* ---------- NEUTRALS ---------- */
    --text:            #1F2937;
    --text-muted:      #6B7280;
    --text-faint:      #9CA3AF;
    --border:          #E5E7EB;
    --surface:         #FFFFFF;
    --surface-alt:     #FAFAFA;

    /* ---------- SIDEBAR (owner + admin portals) ---------- */
    --sidebar-bg:      #111827;
    --sidebar-text:    #E5E7EB;

    /* ---------- SHAPE ---------- */
    --radius-sm:       8px;
    --radius-md:       12px;
    --radius-pill:     50px;

    /* ---------- LOGO SIZE ----------

       Change the wordmark size HERE, in one place. Every rule in
       the BRAND LOGO section reads these two tokens, so there is
       never a reason to find-and-replace a pixel value through
       the file. Doing that flattens the deliberate differences
       below — in particular it defeats the short-screen rules,
       which shrink the logo precisely so all ten admin sidebar
       links still fit on a laptop.

       The sidebar affords more height than the top bar: it owns a
       whole column, while the nav is a strip roughly 80px tall.
       Push --logo-nav much past 72px and the bar simply grows to
       fit it, shoving the page content down. */

    --logo-nav:        64px;   /* guest top bar        */
    --logo-sidebar:    84px;   /* owner + admin column */
}


/* =========================================================
   BRAND LOGO
   =========================================================

   The wordmark replaces the old "Zam<span>Stay</span>" text.
   Three variants ship in /images:

     ruby-logo.png        ruby red   — light backgrounds
     ruby-logo-white.png  white      — dark sidebars, hero nav

   Sizing is driven by height so the wordmark's aspect ratio
   is never distorted, whatever the container width.
   ========================================================= */

/* Sizing is height-driven so the wordmark's aspect ratio is never
   distorted, whatever the container width.

   ON THE `body ` PREFIX — same reason as the palette section far
   below. This file loads BEFORE each page's inline <style>, so a
   bare `.brand-logo` would lose any specificity tie to a page rule.
   Prefixing means the size is decided here and stays decided. */

body .brand-logo {
    display: block;
    height: var(--logo-nav);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Sidebar lockup — owner and admin portals. The sidebar is
   dark, so this is where the white variant is used. */
body .sidebar .logo .brand-logo,
body .sidebar .logo-img {
    height: var(--logo-sidebar);
    width: auto;
    margin: 0 auto 40px;
    display: block;
    object-fit: contain;
}

/* Top navigation bar (guest-facing pages).

   THE INCONSISTENCY THIS FIXES

   Five pages wrap the bar in <nav>; four use <div class="nav">.
   The old rule selected the ELEMENT `nav`, so those four never
   matched it and fell through to the base size instead — the
   wordmark was rendering at two different sizes depending on
   which page you were looking at. Matching .nav as well as nav
   makes every page agree.

   Height also raised well past the old 38px: the wordmark
   replaced a 26px bold text logo, and a PNG of a wordmark reads
   much smaller than text at the same pixel height, because the
   letterforms only occupy part of the image box. */

body .topbar .brand-logo,
body .nav .brand-logo,
body nav .brand-logo {
    height: var(--logo-nav);
    margin: 0;
}

/* index.html's nav sits transparent over the hero image and
   turns white on scroll. The white wordmark reads over the
   hero; the coloured one takes over once the bar is solid. */
nav .brand-logo.on-hero { display: block; }
nav .brand-logo.on-solid { display: none; }

nav.scrolled .brand-logo.on-hero { display: none; }
nav.scrolled .brand-logo.on-solid { display: block; }

/* Anchor wrapping a logo shouldn't inherit link underlines. */
a.logo,
a.brand {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 600px) {

    body .brand-logo,
    body .topbar .brand-logo,
    body .nav .brand-logo,
    body nav .brand-logo {
        /* A phone viewport is about 360px wide. The desktop size
           eats the space above the fold, so these step down
           rather than inheriting it. */
        height: 48px;
    }

    body .sidebar .logo .brand-logo,
    body .sidebar .logo-img {
        height: 56px;
        margin-bottom: 28px;
    }

}

/* Owner + admin login cards. The ".logo" wrapper here is left over from
   an old bold-text wordmark (it only ever set text-align/font-size), so
   it never centers a block-level <img>: the logo was rendering both
   undersized (inheriting the 64px nav height, meant for a slim top bar)
   and stuck to the left edge of the card instead of centered.

   The logo is the only branding on these pages, so it gets its own
   larger size rather than reusing the nav token, and margin: 0 auto
   centers it directly regardless of what the wrapper div does. */
.login-container .brand-logo,
.login-box .brand-logo {
    display: block;
    height: 110px;
    width: auto;
    margin: 0 auto 20px;
}

@media (max-width: 600px) {
    .login-container .brand-logo,
    .login-box .brand-logo {
        height: 80px;
        margin: 0 auto 16px;
    }
}


/* =========================================================
   PORTAL SIDEBAR  (owner + admin)
   =========================================================

   THE BUG

   The sidebar is position:fixed with height:100vh and no overflow
   handling. The owner menu carries nine links, the admin menu ten.
   On a laptop — roughly 640px of usable viewport once browser
   chrome is accounted for — that column is taller than the screen,
   so the last entries fall off the bottom. Settings and Logout end
   up unreachable: there is nothing to scroll, because the sidebar
   never had overflow-y set. Only admin-bookings.html ever did.

   THE FIX, in three parts

     1. The column scrolls when it genuinely has to.
     2. Logout sits at the bottom of the column when there is room,
        which is where people look for it anyway.
     3. On short screens the spacing tightens, so in most cases
        everything fits and no scrolling is needed at all.

   Scoped with `body ` so these win against the .sidebar rules
   declared in each page's own inline <style> block, which loads
   after this file.

   Below 900px each page turns the sidebar into a full-width,
   height:auto block that stacks above the content — nothing is cut
   off there, so the height-dependent rules stay behind a
   min-width:901px guard and leave mobile alone.
   ========================================================= */

body .sidebar {
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    /* Stops a scroll gesture that reaches the end of the sidebar
       from carrying on and scrolling the page behind it. */
    overscroll-behavior: contain;

    /* Unobtrusive scrollbar for the dark column. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

body .sidebar::-webkit-scrollbar {
    width: 8px;
}

body .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 4px;
}

body .sidebar::-webkit-scrollbar-track {
    background: transparent;
}

body .sidebar .menu {
    display: flex;
    flex-direction: column;

    /* Takes the height left over below the logo. min-height:0 is
       required — without it a flex child refuses to shrink past its
       content and the scrolling above never engages. */
    flex: 1 1 auto;
    min-height: 0;
}


@media (min-width: 901px) {

    /* Logout is always the last link. auto margin pushes it to the
       bottom when the menu is shorter than the screen; when it is
       taller, the margin collapses to nothing and the link simply
       scrolls into view like any other. */
    body .sidebar .menu > a:last-child {
        margin-top: auto;
        margin-bottom: 0;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }

}


/* Laptop-height windows: tighten enough that all ten admin links
   fit without scrolling. */
@media (min-width: 901px) and (max-height: 800px) {

    /* Shrinking the logo here is the whole point of this block:
       it buys back the vertical space that keeps Settings and
       Logout on screen. Setting it to the desktop size undoes
       the sidebar fix above. */
    body .sidebar .logo .brand-logo {
        height: 60px;
        margin-bottom: 20px;
    }

    body .sidebar .menu a {
        padding: 10px 15px;
        margin-bottom: 5px;
    }

}


/* Very short windows — a small laptop, or a browser with several
   toolbars open. */
@media (min-width: 901px) and (max-height: 640px) {

    body .sidebar {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    body .sidebar .logo .brand-logo {
        height: 46px;
        margin-bottom: 14px;
    }

    body .sidebar .menu a {
        padding: 8px 14px;
        margin-bottom: 3px;
        font-size: 14px;
    }

}

/* =========================================================
   PALETTE OVERRIDE
   =========================================================

   WHY THIS SECTION EXISTS

   Almost nothing on the site reads the variables above. The
   brand colours are typed as raw hex inside each page's own
   <style> block: #1E5EFF appears 107 times, #9F1239 43 times
   and #F4B400 34 times across the project. Changing :root
   alone therefore changes almost nothing on screen.

   Rewriting all 43 pages is the proper fix. Until that
   happens, these rules recolour the components that carry
   those hexes today.

   ON SPECIFICITY

   theme.css is loaded BEFORE each page's inline <style>, so
   source order loses every time. Every selector here is
   prefixed with `body` so it wins on specificity instead —
   the same trick the sidebar section above already relies on.

   Anything not listed here still renders in the old colours.
   When you spot one, add its selector to the matching group
   rather than editing the page.
   ========================================================= */


/* ---------- PRIMARY ACTIONS: olive, white text ---------- */

body .submit-btn,
body .book-btn,
body .confirm-btn,
body .action-btn,
body .btn-export,
body .approve-btn,
body .confirm-actions .primary,
body .small-btn.settle {
    background: var(--olive);
    border-color: var(--olive);
    color: #fff;
}

body .submit-btn:hover,
body .book-btn:hover,
body .confirm-btn:hover,
body .action-btn:hover,
body .btn-export:hover,
body .approve-btn:hover,
body .confirm-actions .primary:hover {
    background: var(--olive-dark);
    border-color: var(--olive-dark);
}

/* Outline variant: olive text on white, not a solid fill. */
body .secondary-btn {
    background: #fff;
    color: var(--olive);
    border-color: var(--olive);
}

body .secondary-btn:hover {
    background: var(--olive-tint);
}

/* Disabled states inherit the old blue tint otherwise. */
body .submit-btn:disabled,
body .book-btn:disabled,
body .confirm-btn:disabled {
    background: var(--olive-light);
    border-color: var(--olive-light);
}

body .secondary-btn:disabled {
    background: #fff;
    color: var(--olive-light);
    border-color: var(--olive-light);
}


/* ---------- FORM FOCUS ---------- */

body .field input:focus,
body .field textarea:focus,
body .field select:focus {
    border-color: var(--olive);
    outline: none;
}


/* ---------- SIDEBAR (owner + admin) ---------- */

body .sidebar {
    background: var(--ink);
}

body .sidebar .menu a:hover,
body .sidebar .menu .active,
body .sidebar .menu a.active {
    background: var(--olive);
    color: #fff;
}


/* ---------- ACCENTS: amber, dark text only ----------

   .logo span is the "Stay" half of the old wordmark and the
   single most common use of the gold. Prices and figures are
   set in olive rather than amber: amber on white is 2.49:1
   and fails outright as text.                              */

body .logo span {
    color: var(--amber);
}

body .price,
body .price-tag,
body .amount,
body .number {
    color: var(--olive);
}

body .room-type-badge {
    background: var(--amber-tint);
    color: var(--amber-dark);
}

/* Stars stay amber — a filled star is a shape, not text, so
   the contrast rule for body copy does not apply. */
body .avg-rating .stars,
body .review-item .review-stars,
body .star.filled {
    color: var(--amber);
}


/* ---------- PANELS THAT WERE BLUE-TINTED ---------- */

body .countdown-box {
    background: var(--olive-tint);
    color: var(--olive-dark);
}

body .gallery-thumbs img.active {
    border-color: var(--olive);
}

body .state-view a {
    color: var(--olive);
}


/* ---------- GAPS FOUND ON A SECOND PASS ----------

   Four component families still rendered blue after the section
   above, because their selectors never appeared in it. Counted
   across the site's inline <style> blocks: the guest-facing top
   nav (9), generic .btn / .btn-primary buttons (5), the revenue
   breakdown bars on owner-payments (2), and the marketing
   sections on index.html (5).

   Worth knowing WHY .nav-links was missed: the sidebar rules
   above are scoped `body .sidebar .menu`, which is right for
   the owner and admin portals but matches nothing on the guest
   pages — those use a flat .nav-links list with no sidebar
   ancestor. Two different nav structures, so two rules.      */


/* Guest-facing top navigation (index, explore-rooms, book-room). */

body .nav-links a:hover,
body .nav-links a.active {
    color: var(--olive);
}

/* Portal menus that sit outside a .sidebar wrapper on a few pages. */

body .menu a:hover,
body .menu .active,
body .menu a.active {
    background: var(--olive);
    color: #fff;
}


/* Generic buttons. .ghost is excluded — it is an outline style,
   so filling it would erase the distinction it exists for. */

body .btn-primary,
body .btn:not(.ghost) {
    background: var(--olive);
    border-color: var(--olive);
    color: #fff;
}

body .btn-primary:hover,
body .btn:not(.ghost):hover {
    background: var(--olive-dark);
    border-color: var(--olive-dark);
}

body .btn.ghost:hover {
    border-color: var(--olive);
    color: var(--olive);
}


/* Revenue breakdown, owner-payments.html.

   These two bars are read as a pair, so they need to be
   distinguishable at a glance rather than merely on-brand:
   olive for money that came through Avora, amber for cash the
   lodge collected. Amber carries dark text here, as everywhere. */

body .online-bar {
    background: var(--olive);
    color: #fff;
}

body .cash-bar {
    background: var(--amber);
    color: var(--on-amber);
}


/* index.html marketing sections. */

body .help a,
body .split-col h3,
body .split-col .cta,
body .split-col li::before,
body .card .mark {
    color: var(--olive);
}

body .pull-quote {
    border-left-color: var(--olive);
}


/* ---------- STATUS COLOURS: DELIBERATELY UNTOUCHED ----------

   Available stays #16A34A and Occupied stays #DC2626.

   One thing to watch: olive IS a green. An olive "Book Now"
   sitting beside a green "Available" badge blurs the one
   signal a guest reads fastest. If they start to look alike
   on a real screen, darken --status-available towards
   #15803D rather than moving the brand colour — the badge is
   the thing that has to stay unmistakable.               */