/* ══════════════════════════════════════════════════════════════
   Interactive button — left-to-right fill wipe
   (adapted from Uiverse.io by alexroumi)

   The site is plain HTML/CSS, so the effect is a shared class. Each
   button keeps its OWN font, colours and label; on hover a panel
   wipes in from the left (a ::before that grows 0 → 100% width) and
   the text colour inverts. Fill colour and the inverse (on-fill) text
   colour are set per button through the --ihb-* tokens below.

   NB: the brand styling (sharp corners, no shadow, light weights) is
   preserved — only the wipe mechanic is borrowed, not Uiverse's look.
   ────────────────────────────────────────────────────────────── */

.ihb {
    position: relative;
    z-index: 0;                 /* own stacking context for ::before */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: color 250ms ease;
    --ihb-fill: var(--ink, #211F17);
    --ihb-on:   var(--white, #FFFFFF);
}

/* colour presets */
.ihb--ink    { --ihb-fill: var(--ink, #211F17);    --ihb-on: var(--white, #FFFFFF); }
.ihb--accent { --ihb-fill: var(--accent, #796C5D); --ihb-on: var(--white, #FFFFFF); }
.ihb--light  { --ihb-fill: var(--white, #FFFFFF);  --ihb-on: var(--ink, #211F17); }

/* the panel that wipes in from the left */
.ihb::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: var(--ihb-fill);
    z-index: -1;                /* above the button's bg, below its text */
    transition: width 250ms ease;
}

.ihb:hover,
.ihb:focus-visible { color: var(--ihb-on) !important; }

.ihb:hover::before,
.ihb:focus-visible::before { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .ihb::before { transition: none; }
}

/* ── Per-button reconciliation: the ::before is the only fill, so
      neutralise each button's previous :hover background. ───────── */

/* Inquire (header CTA) — fill = ink (light variant on dark pages) */
.nav-cta.ihb:hover               { background: transparent !important; }
#header.compact .nav-cta.ihb:hover { background: transparent !important; }

/* The Rooms (gallery) */
.gal-more-btn.ihb:hover {
    background: transparent;
    border-color: var(--taupe-light);
}

/* Inquire now (region CTA) */
.rg-cta-btn.ihb:hover {
    background: transparent;
    border-color: rgba(196, 185, 170, 0.3);
}

/* Send Inquiry (form) — resting stays ink, accent panel wipes in */
.btn-submit.ihb { align-self: flex-start; }
.btn-submit.ihb:hover { background: var(--dark); }

/* submitted state (set by handleSubmit) */
.btn-submit.is-sent          { color: var(--white) !important; }
.btn-submit.is-sent::before  { width: 100%; }


/* ══════════════════════════════════════════════════════════════
   LANGUAGE TOGGLE (header)
   The options live inside <nav> as <a>, so they inherit the nav
   link colour per page/state automatically (light over hero, dark
   when compact). Visual selection only — no translations yet.
   ────────────────────────────────────────────────────────────── */
.lang-toggle { display:inline-flex; align-items:center; gap:0.55rem; }

.lang-opt {
    font-size:0.55rem !important;
    letter-spacing:0.16em;
    cursor:pointer;
    opacity:0.5;
    padding-bottom:2px;
    border-bottom:1px solid transparent;
    transition:opacity 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.lang-opt:hover        { opacity:0.85; }
.lang-opt.is-active    { opacity:1; border-bottom-color:currentColor; }
.lang-opt::after       { display:none !important; }   /* no nav underline */


/* ══════════════════════════════════════════════════════════════
   MOBILE NAVIGATION — hamburger + full-screen drawer
   Built by ui.js and shared across all pages. Desktop (>980px) keeps
   the inline <nav> exactly as designed; at ≤980px the inline nav is
   hidden and replaced by a hamburger opening an ink overlay that holds
   every link plus the language toggle.
   ────────────────────────────────────────────────────────────── */
.nav-toggle { display:none; }

/* drawer + backdrop live in the DOM on every viewport but stay inert
   (pointer-events:none, hidden) until the menu is opened */
.m-nav-backdrop {
    position:fixed; inset:0; z-index:1000;
    background:rgba(17,16,12,0.5);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .4s ease, visibility .4s ease;
}
.m-nav {
    position:fixed; inset:0; z-index:1001;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2.2rem;
    padding:6rem 1.5rem calc(2.2rem + env(safe-area-inset-bottom, 0px));
    background:var(--ink, #211F17);
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-12px);
    transition:opacity .45s ease, visibility .45s ease,
               transform .6s cubic-bezier(.16,1,.3,1);
    overflow-y:auto;
}
body.nav-open .m-nav-backdrop { opacity:1; visibility:visible; pointer-events:auto; }
body.nav-open .m-nav          { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
body.nav-open                 { overflow:hidden; }   /* lock page scroll */

/* the hamburger lives inside #header (z-index:200); raise the header above
   the drawer when open so the close (X) stays clickable, and hide the logo
   so only a clean X floats over the dark overlay */
body.nav-open #header {
    z-index:1003;
    background:transparent !important;
    border-bottom-color:transparent !important;
}
body.nav-open #header .h-brand {
    opacity:0; pointer-events:none; transition:opacity .3s ease;
}

.m-nav-links {
    display:flex; flex-direction:column; align-items:center;
    gap:1.4rem; width:100%; max-width:420px;
}
.m-nav-links a {
    font-family:'Kobenhavn', sans-serif; font-weight:300;
    font-size:1.5rem; letter-spacing:0.14em; text-transform:uppercase;
    text-decoration:none; color:rgba(250,249,246,0.82);
    padding:0.3em 0.2em; position:relative;
    transition:color .3s ease;
}
.m-nav-links a:hover,
.m-nav-links a.is-current { color:var(--white, #FAF9F6); }
.m-nav-links a.is-current::after {
    content:''; display:block; width:22px; height:1px;
    margin:0.55rem auto 0; background:var(--amber, #C8922A);
}
.m-nav-cta {
    margin-top:0.6rem; border:1px solid rgba(250,249,246,0.35);
    padding:0.7em 1.7em !important; font-size:0.95rem !important;
    letter-spacing:0.18em !important;
}
.m-nav-cta:hover { border-color:rgba(250,249,246,0.7); }

.m-nav-lang { margin-top:1.6rem; gap:1.6rem; }
.m-nav-lang .lang-opt {
    font-size:0.72rem !important; opacity:0.6;
    color:rgba(250,249,246,0.85);
    padding:0.55em 0.6em; min-width:44px; text-align:center;
}
.m-nav-lang .lang-opt.is-active { opacity:1; color:var(--white, #FAF9F6); }

@media (max-width: 980px) {
    #header > nav { display:none !important; }   /* hide the desktop nav */

    .nav-toggle {
        display:flex; flex-direction:column; justify-content:center; gap:5px;
        width:44px; height:44px; padding:0; margin-left:auto;
        background:transparent; border:0; cursor:pointer;
        position:relative; z-index:1002;
        -webkit-tap-highlight-color:transparent;
    }
    .nav-toggle span {
        display:block; width:24px; height:1.5px; margin:0 auto;
        background:var(--white, #FAF9F6);
        transition:transform .35s cubic-bezier(.4,0,.2,1),
                   opacity .25s ease, background .3s ease;
    }
    #header.compact .nav-toggle span { background:var(--ink, #211F17); }
    /* bars sit on the dark drawer when open → keep them light */
    body.nav-open .nav-toggle span            { background:var(--white, #FAF9F6); }
    body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
    body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
    body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
    .m-nav, .m-nav-backdrop, .nav-toggle span { transition:none; }
}