/* ============================================================
   MajeStay — Figma overlay menu (tourism.html + tourismcontact.html)
   Matches images/contact-menu.svg:
   translucent navy/blur backdrop · cream crown logo top-left ·
   cream X close top-right · large centred nav links each with a
   thin underline (active = thicker copper) · frosted glass info
   panel near the bottom (Visit Us address + Contact Us tel/mail).
   Self-contained: this REPLACES the luxe.js 3D houses overlay on
   the two pages that set window.LUXE_NO_MENU = true.
   ============================================================ */
:root{
  --fm-cream:#F3E9D6; --fm-cream-soft:#E8E3DF; --fm-copper:#C59463;
  --fm-copper-lit:#E0D5C3; --fm-ink:#0B1825;
}

/* ---- trigger ----
   The floating hamburger is NOT shown anywhere:
   • desktop tourism uses the real HTML header nav (no hamburger wanted)
   • mobile uses the baked hamburger in the frame image, which calls
     window.FM_MENU.open() directly via the #mNav hotspot.
   The element still exists in the DOM (menu.js manages aria-expanded on it),
   it is simply never visible. */
.fm-trigger{position:fixed;top:20px;right:clamp(16px,3.4vw,40px);z-index:140;
  width:48px;height:48px;border:0;background:transparent;cursor:pointer;
  display:none!important;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;
  -webkit-tap-highlight-color:transparent}
.fm-trigger span{display:block;height:2px;background:var(--fm-copper);border-radius:2px;
  transition:width .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1),opacity .25s}
.fm-trigger span:nth-child(1){width:26px}
.fm-trigger span:nth-child(2){width:18px}
.fm-trigger:hover span:nth-child(2){width:26px}
.fm-trigger:focus-visible{outline:2px solid var(--fm-cream);outline-offset:4px;border-radius:4px}
/* on mobile the baked hamburger (in the frame) opens the menu — hide the
   floating desktop trigger so there is only one hamburger */
@media(max-width:768px){.fm-trigger{display:none!important}}

/* ---- overlay ---- */
#fm-overlay{position:fixed;inset:0;z-index:150;display:none;
  opacity:0;transition:opacity .42s cubic-bezier(.22,1,.36,1);
  font-family:"Poppins","DM Sans",system-ui,sans-serif}
#fm-overlay.is-on{display:block}
#fm-overlay.is-vis{opacity:1}
/* deep translucent navy + frosted blur backdrop */
#fm-overlay .fm-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,24,37,.62) 0%,rgba(11,24,37,.74) 46%,rgba(11,24,37,.66) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(118%);backdrop-filter:blur(26px) saturate(118%)}
#fm-overlay .fm-inner{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:22px clamp(20px,5vw,56px) clamp(20px,4vh,40px);
  overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ---- top bar: crown logo (cream) + X close ---- */
.fm-top{display:flex;align-items:center;justify-content:space-between;flex:none}
.fm-logo{width:118px;height:42px;background:var(--fm-cream);
  -webkit-mask:url("logos/crown.png") center/contain no-repeat;
  mask:url("logos/crown.png") center/contain no-repeat;opacity:.96}
.fm-x{width:42px;height:42px;border:0;background:transparent;cursor:pointer;position:relative;
  -webkit-tap-highlight-color:transparent}
.fm-x:focus-visible{outline:2px solid var(--fm-cream);outline-offset:3px;border-radius:6px}
.fm-x::before,.fm-x::after{content:"";position:absolute;left:9px;right:9px;top:50%;height:2px;
  background:var(--fm-cream);border-radius:2px}
.fm-x::before{transform:rotate(45deg)}
.fm-x::after{transform:rotate(-45deg)}
.fm-x:hover::before,.fm-x:hover::after{background:#fff}

/* ---- centred nav links ---- */
.fm-nav{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,3.4vh,40px);padding:clamp(24px,6vh,64px) 0}
.fm-link{position:relative;display:inline-block;text-align:center;color:var(--fm-cream);
  font-weight:600;font-size:clamp(1.5rem,5.4vw,2rem);line-height:1.1;letter-spacing:.01em;
  padding:4px 10px 14px;text-decoration:none;
  transform:translateY(12px);opacity:0;transition:color .25s,transform .5s cubic-bezier(.22,1,.36,1),opacity .5s}
#fm-overlay.is-vis .fm-link{transform:translateY(0);opacity:1}
/* thin underline under every link */
.fm-link::after{content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:min(280px,72vw);height:1px;background:rgba(243,233,214,.55);transition:height .25s,background .25s}
.fm-link:hover{color:#fff}
.fm-link:hover::after{background:rgba(243,233,214,.9)}
.fm-link:focus-visible{outline:none}
.fm-link:focus-visible::after{height:2px;background:var(--fm-cream)}
/* active = thicker copper underline */
.fm-link.is-active{color:#fff}
.fm-link.is-active::after{height:5px;border-radius:3px;
  width:min(150px,40vw);background:var(--fm-copper-lit);
  box-shadow:0 0 14px rgba(197,148,99,.45)}

/* ---- B2B accordion (iter 15): one "B2B" item that expands in place ---- */
.fm-acc{display:flex;flex-direction:column;align-items:center}
.fm-acc-btn{background:transparent;border:0;cursor:pointer;font-family:inherit;
  -webkit-tap-highlight-color:transparent;min-height:44px}
.fm-acc-btn:focus-visible{outline:none}
.fm-acc-btn:focus-visible::after{height:2px;background:var(--fm-cream)}
/* copper chevron after the label, rotates when open */
.fm-caret{display:inline-block;margin-left:14px;width:11px;height:11px;
  border-right:2px solid var(--fm-copper);border-bottom:2px solid var(--fm-copper);
  transform:translateY(-4px) rotate(45deg);transform-origin:center;
  transition:transform .35s cubic-bezier(.22,1,.36,1)}
.fm-acc.is-open .fm-caret{transform:translateY(2px) rotate(225deg)}
/* sub-list collapses to 0 rows; visibility keeps closed links out of tab order */
.fm-sub{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),visibility 0s .45s}
.fm-acc.is-open .fm-sub{grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),visibility 0s}
.fm-sub-in{overflow:hidden;min-height:0;display:flex;flex-direction:column;
  align-items:center;gap:2px}
/* sub-items: slightly smaller, indented by a copper dash, cream text */
.fm-sublink{display:inline-flex;align-items:center;min-height:44px;padding:4px 12px;
  color:rgba(243,233,214,.94);text-decoration:none;font-weight:500;
  font-size:clamp(1.05rem,3.6vw,1.3rem);letter-spacing:.01em;
  opacity:0;transform:translateY(-6px);
  transition:color .25s,opacity .3s,transform .35s cubic-bezier(.22,1,.36,1)}
.fm-acc.is-open .fm-sublink{opacity:1;transform:none}
.fm-acc.is-open .fm-sublink:nth-child(2){transition-delay:.06s}
.fm-sublink::before{content:"";width:16px;height:1px;background:var(--fm-copper);
  margin-right:12px;transition:width .25s}
.fm-sublink:hover{color:#fff}
.fm-sublink:hover::before{width:24px}
.fm-sublink:focus-visible{outline:2px solid var(--fm-cream);outline-offset:3px;border-radius:6px}

/* ---- frosted-glass info panel near the bottom ---- */
.fm-glass{flex:none;margin-top:auto;border-radius:22px;padding:clamp(22px,4vh,34px) clamp(20px,5vw,40px);
  background:rgba(232,227,223,.16);border:1px solid rgba(243,233,214,.22);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  text-align:center;color:var(--fm-cream);
  transform:translateY(16px);opacity:0;transition:transform .55s cubic-bezier(.22,1,.36,1) .1s,opacity .55s .1s}
#fm-overlay.is-vis .fm-glass{transform:translateY(0);opacity:1}
.fm-glass .fm-h{font-weight:600;font-size:clamp(1.15rem,4vw,1.4rem);color:#fff;margin-bottom:8px}
.fm-glass p{margin:0;font-family:"DM Sans",sans-serif;font-size:clamp(.95rem,3.4vw,1.05rem);
  line-height:1.5;color:rgba(243,233,214,.92)}
.fm-glass a{color:rgba(243,233,214,.92);text-decoration:none}
.fm-glass a:hover{color:#fff;text-decoration:underline}
.fm-glass .fm-block + .fm-block{margin-top:clamp(18px,3vh,26px)}

/* ---- desktop: centre the nav, constrain width ---- */
@media(min-width:769px){
  #fm-overlay .fm-inner{max-width:760px;margin:0 auto;padding-top:28px}
  .fm-glass{align-self:stretch}
  .fm-glass .fm-cols{display:flex;gap:48px;justify-content:center;text-align:left}
  .fm-glass .fm-block{flex:1;max-width:300px}
}

/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  #fm-overlay,.fm-link,.fm-glass{transition:opacity .2s!important}
  .fm-link,.fm-glass{transform:none!important}
  .fm-trigger span{transition:none}
  /* B2B accordion snaps open/shut, no slide or caret spin */
  .fm-sub,.fm-caret,.fm-sublink{transition:none!important}
  .fm-sublink{transform:none!important}
}