/* =========================================================
   1619 Studio – Menu dropdowns (About, Services) & back-to-top button
   Uses the theme's tokens: --gold, --brown, --black, --line, --ease.
   ========================================================= */

/* ---------- Desktop dropdowns ---------- */
/* the homepage header fades in via motion.css, which leaves clip-path:inset(0) on it and would clip the dropdown */
header[data-anim].is-in{clip-path:none}
/* the mobile menu and dropdowns live inside the hero / page header: keep that layer above the sections that follow */
.hero,.page-hero{z-index:2}
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;margin:0;padding:6px 0;cursor:pointer;color:inherit;font:inherit;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;position:relative;text-shadow:0 1px 18px rgba(0,0,0,.45)}
.nav-dd-btn::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.nav-dd-btn:hover::after,.nav-dd.open .nav-dd-btn::after,.nav-dd-btn.is-active::after{transform:scaleX(1);transform-origin:left}
.dd-caret{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .45s var(--ease)}
.nav-dd.open .dd-caret,.drawer-dd.open .dd-caret{transform:translateY(1px) rotate(-135deg)}

.nav-dd-menu{position:absolute;top:100%;left:-22px;padding-top:14px;min-width:240px;z-index:20;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s .35s}
.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .5s var(--ease)}
/* until ui.js has loaded (or if it fails): open on hover / keyboard focus */
html:not(.ui-ready) .nav-dd:hover .nav-dd-menu,html:not(.ui-ready) .nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:none}
html:not(.ui-ready) .drawer-dd-menu{grid-template-rows:1fr}
html:not(.ui-ready) .drawer-dd-inner a{visibility:visible}
.nav-dd-inner{display:flex;flex-direction:column;background:rgba(20,20,20,.94);border:1px solid rgba(255,255,255,.12);border-top:2px solid var(--gold);padding:8px 0;box-shadow:0 18px 40px rgba(0,0,0,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
nav.main .nav-dd-inner a{display:block;padding:12px 22px;color:#fff;white-space:nowrap;text-shadow:none;transition:color .35s,padding .45s var(--ease),background .35s}
nav.main .nav-dd-inner a::after{display:none}
nav.main .nav-dd-inner a:hover,nav.main .nav-dd-inner a:focus-visible{color:var(--gold);padding-left:28px;background:rgba(255,255,255,.04)}
nav.main .nav-dd-inner a.is-active{color:var(--gold)}

/* ---------- Mobile menu (drawer) dropdowns ---------- */
.drawer-dd{display:flex;flex-direction:column}
.drawer-dd-btn{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;margin:0;padding:0;cursor:pointer;color:inherit;font:inherit;font-size:clamp(2rem,9vw,3rem);font-weight:300;text-transform:uppercase;letter-spacing:-.02em;text-align:left;line-height:inherit}
.drawer-dd-btn:hover,.drawer-dd-btn.is-active{color:var(--gold)}
.drawer-dd-btn .dd-caret{width:10px;height:10px;transform:translateY(-4px) rotate(45deg)}
.drawer-dd.open .drawer-dd-btn .dd-caret{transform:translateY(2px) rotate(-135deg)}
.drawer-dd-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.drawer-dd.open .drawer-dd-menu{grid-template-rows:1fr}
.drawer-dd-inner{overflow:hidden;display:flex;flex-direction:column;gap:4px;padding-left:4px;border-left:1px solid rgba(244,239,232,.25);margin-left:4px}
.drawer-dd.open .drawer-dd-inner{padding-top:10px;padding-bottom:8px}
.drawer .drawer-dd-inner a{font-size:clamp(1.05rem,4.6vw,1.35rem);font-weight:300;letter-spacing:.06em;padding:6px 0 6px 18px}
.drawer-dd:not(.open) .drawer-dd-inner a{visibility:hidden}

/* ---------- Back-to-top button ---------- */
.to-top{position:fixed;right:max(20px,env(safe-area-inset-right,0px) + 16px);bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:40;width:54px;height:54px;display:grid;place-items:center;padding:0;cursor:pointer;color:var(--gold);background:rgba(20,20,20,.86);border:1px solid rgba(217,188,114,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s .45s,background .4s,color .4s,border-color .4s}
.to-top.show{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .6s var(--ease),background .4s,color .4s,border-color .4s}
.to-top svg{width:18px;height:18px;position:relative;z-index:1;transition:transform .5s var(--ease)}
.to-top:hover,.to-top:focus-visible{background:var(--gold);border-color:var(--gold);color:#141414}
.to-top:hover svg,.to-top:focus-visible svg{transform:translateY(-3px)}
.to-top:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.to-top .to-top-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gold);transform:scaleX(var(--p,0));transform-origin:left}
.to-top:hover .to-top-bar{background:#141414}
.menu-open .to-top{opacity:0;visibility:hidden}
@media (max-width:560px){.to-top{width:46px;height:46px;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px))}}

@media (prefers-reduced-motion:reduce){
  .nav-dd-menu,.drawer-dd-menu,.dd-caret,.to-top,.to-top svg,nav.main .nav-dd-inner a{transition:none!important}
}