/* ==========================================================================
   Heaven's Garden — Site header
   Two variants of one bar: `hgh--overlay` sits over the homepage hero,
   `hgh--solid` is the opaque bar every inner page uses.
   Namespaced under .hgh so none of the legacy .header__* rules apply.
   ========================================================================== */

.hgh {
    --gold: #BF9948;
    --gold-lt: #E1C285;
    --gold-dk: #8C6D2C;
    --ink: #16120E;
    --sand: #F7F3EB;

    --serif: 'Cormorant Garamond', 'Anglecia Pro Dsp', Georgia, serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --e-out: cubic-bezier(.16, 1, .3, 1);

    --h: 88px;
    --pad: clamp(20px, 4vw, 64px);

    /* per-variant, overridden below */
    --fg: #fff;
    --fg-dim: rgba(255, 255, 255, .72);
    --hair: rgba(255, 255, 255, .18);

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--h);
    color: var(--fg);
    font-family: var(--sans);
    transition: transform .45s var(--e-out), background-color .45s var(--e-out),
    box-shadow .45s var(--e-out), height .45s var(--e-out);
    will-change: transform;
}

.hgh__bar {
    width: min(100% - (var(--pad) * 2), 1720px);
    margin-inline: auto;
    height: 100%;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 40px);
}

/* backdrop layer, faded in on scroll — animating a pseudo-element rather than
   the header's own background keeps the blur from repainting the whole bar */
.hgh::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity .45s var(--e-out);
}

.hgh::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(191, 153, 72, .5) 20%, rgba(191, 153, 72, .5) 80%, transparent);
    opacity: 0;
    transition: opacity .45s var(--e-out);
}

.hgh.is-solid::before,
.hgh.is-solid::after {
    opacity: 1;
}

/* --- variant: overlay (homepage) --- */

.hgh--overlay::before {
    background: rgba(16, 13, 10, .82);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
}

/* --- variant: solid (inner pages) --- */

.hgh--solid {
    --fg: var(--ink);
    --fg-dim: rgba(22, 18, 14, .62);
    --hair: rgba(22, 18, 14, .14);
    background: var(--sand);
}

.hgh--solid::before {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
}

.hgh--solid.is-solid {
    box-shadow: 0 10px 30px -18px rgba(22, 18, 14, .5);
}

/* shrink + auto-hide */
.hgh.is-solid {
    --h: 72px;
}

.hgh.is-hidden {
    transform: translateY(-101%);
}

/* The page needs to start below the fixed bar. Deliberately NOT tied to the
   live --header-h: that value shrinks when the bar goes solid, which would
   yank the whole page up by 16px the moment you start scrolling. */
.hgh-spacer {
    height: 88px;
}

@media (max-width: 1024px) {
    .hgh-spacer {
        height: 72px;
    }
}

/* ---------- logo -------------------------------------------------------- */

.hgh__logo {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}

.hgh__logo img {
    height: clamp(38px, 3.4vw, 52px);
    width: auto;
    display: block;
    transition: height .45s var(--e-out);
}

.hgh.is-solid .hgh__logo img {
    height: clamp(34px, 3vw, 44px);
}

/* ---------- primary nav ------------------------------------------------- */

.hgh__nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.hgh__nav ul {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.1vw, 42px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.hgh__nav li {
    margin: 0;
}

/* the CMS emits two stacked labels per link — used here as a vertical roll */
.hgh__nav a {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 6px 0;
    font-size: clamp(11px, .78vw, 12.5px);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fg);
    text-decoration: none;
    white-space: nowrap;
}

.hgh__nav a .original,
.hgh__nav a .hover-menu {
    display: block;
    transition: transform .5s var(--e-out), opacity .4s var(--e-out);
}

.hgh__nav a .original {
    transform: translateY(0);
    opacity: 1;
}

.hgh__nav a .hover-menu {
    position: absolute;
    inset: 6px 0 auto;
    transform: translateY(115%);
    opacity: 0;
    color: var(--gold-lt);
    text-align: left;
}

.hgh--solid .hgh__nav a .hover-menu {
    color: var(--gold-dk);
}

.hgh__nav a:hover .original,
.hgh__nav a:focus-visible .original {
    transform: translateY(-115%);
    opacity: 0;
}

.hgh__nav a:hover .hover-menu,
.hgh__nav a:focus-visible .hover-menu {
    transform: translateY(0);
    opacity: 1;
}

/* current page */
.hgh__nav a.is-active {
    color: var(--gold-lt);
}

.hgh--solid .hgh__nav a.is-active {
    color: var(--gold-dk);
}

.hgh__nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
}

/* ---------- right-hand cluster ------------------------------------------ */

.hgh__side {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.4vw, 26px);
}

/* generic dropdown (phone + language) */
.hgh__drop {
    position: relative;
}

.hgh__droptrigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 8px 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--fg);
    text-decoration: none;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: color .35s var(--e-out);
    white-space: nowrap;
}

.hgh__droptrigger:hover {
    color: var(--gold-lt);
}

.hgh--solid .hgh__droptrigger:hover {
    color: var(--gold-dk);
}

.hgh__droptrigger svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    stroke: var(--gold);
    fill: none;
    stroke-width: 1.5;
}

.hgh__caret {
    width: 9px !important;
    height: 9px !important;
    stroke: currentColor !important;
    opacity: .6;
    transition: transform .35s var(--e-out);
}

.hgh__drop.is-open .hgh__caret {
    transform: rotate(180deg);
}

.hgh__dropmenu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 190px;
    background: #fff;
    border: 1px solid rgba(22, 18, 14, .1);
    box-shadow: 0 24px 50px -24px rgba(22, 18, 14, .5);
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s var(--e-out), transform .3s var(--e-out), visibility .3s var(--e-out);
    z-index: 5;
}

.hgh__drop.is-open .hgh__dropmenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hgh__dropmenu a {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #3A332B;
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: background-color .25s var(--e-out), color .25s var(--e-out);
}

.hgh__dropmenu a:hover,
.hgh__dropmenu a:focus-visible {
    background: var(--sand);
    color: var(--gold-dk);
}

/* language trigger reads as a small label, not a phone number */
.hgh__lang .hgh__droptrigger {
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 11.5px;
}

.hgh__lang .hgh__dropmenu {
    min-width: 96px;
}

/* ---------- book CTA ---------------------------------------------------- */

.hgh__cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1em 1.9em;
    border: 1px solid var(--gold);
    border-radius: 2px;
    background: var(--gold);
    color: var(--ink);
    font-size: clamp(10.5px, .74vw, 12px);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color .4s var(--e-out), border-color .4s var(--e-out);
}

.hgh__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ink);
    transform: translateY(101%);
    transition: transform .5s var(--e-out);
}

.hgh__cta:hover,
.hgh__cta:focus-visible {
    color: var(--gold-lt);
    border-color: var(--ink);
}

.hgh__cta:hover::before,
.hgh__cta:focus-visible::before {
    transform: translateY(0);
}

/* ---------- burger ------------------------------------------------------ */

.hgh__burger {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--fg);
}

.hgh__burger span {
    position: absolute;
    left: 11px;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    transition: transform .4s var(--e-out), opacity .3s var(--e-out);
}

.hgh__burger span:nth-child(1) { top: 18px; }
.hgh__burger span:nth-child(2) { top: 25px; }

body.navx-open .hgh__burger span:nth-child(1) {
    transform: translateY(3.5px) rotate(45deg);
}

body.navx-open .hgh__burger span:nth-child(2) {
    transform: translateY(-3.5px) rotate(-45deg);
}

.hgh :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
}

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1180px) {
    .hgh__nav ul {
        gap: clamp(12px, 1.6vw, 26px);
    }
}

@media (max-width: 1024px) {
    .hgh {
        --h: 72px;
    }

    .hgh.is-solid {
        --h: 64px;
    }

    .hgh__nav,
    .hgh__phone {
        display: none;
    }

    .hgh__bar {
        justify-content: space-between;
    }

    .hgh__burger {
        display: block;
    }
}

@media (max-width: 600px) {
    .hgh__cta {
        padding: .9em 1.2em;
        letter-spacing: .12em;
    }

    .hgh__lang .hgh__droptrigger {
        font-size: 11px;
    }

    .hgh__logo img {
        height: 34px;
    }
}

@media (max-width: 400px) {
    .hgh__cta {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hgh,
    .hgh *,
    .hgh *::before,
    .hgh *::after {
        transition-duration: .01ms !important;
    }
}