/* ============================================================================
   Timilo Boutique — nav mega menus (Info and Rooms)
   Loaded LAST on every page that carries the nav (immediately before </head>),
   which is what lets one file govern both panels on all 26 pages without editing
   the fifteen separate places `.subnav` is declared.

   Both panels use their own class, `.megasub`, rather than reusing `.subnav`.
   None of the existing `#navlinks .subnav` rules match it, so there is no cascade
   fight with any page's inline block. `.has-sub` still supplies position, the
   caret rotation and the hover/focus-within reveal, so both panels open exactly
   the way the old dropdowns did.

   Info and Rooms differ ONLY in horizontal geometry and in what fills the card.
   Everything else — the shell, the notch, the card chrome, and the photo card
   treatment the room tiles are built from — is shared, so the two cannot drift
   apart visually.

   Desktop only. Below 941px `#navlinks` is display:none and the hamburger takes
   over; `#mobilemenu` is deliberately untouched by this file.

   No JavaScript. The nav's dropdowns have always been :hover + :focus-within,
   which means they survive JS being disabled and never flash on load. This
   keeps that contract.

   Tokens only — every colour below is a custom property already defined by
   landing.html and info.css, and both fonts are already loaded by every page.
   ========================================================================== */

/* ── the panel shell ──────────────────────────────────────────────────────
   `.megasub` itself is an invisible positioning box; the visible card is
   `.mm-card` inside it. The gap between the bar and the card is therefore the
   shell's transparent top padding rather than a `top` offset, so it is part of
   the hovered subtree across the panel's FULL width. `.has-sub:hover::after`
   only bridges the trigger's own width (+14px either side); a 880px panel means
   the pointer routinely crosses that gap far to the left of the trigger, and a
   `top:calc(100% + 26px)` panel would drop out from under the cursor there.

   26px is measured, not chosen: the trigger's bottom edge sits at 62px and the
   bar is 80px tall, so 18px of that padding is spent clearing the bar's own
   lower padding and the remaining 8px is the visible gap under the bar.

   The panel's right edge runs 245px past the trigger's, out over the bar's
   "Reserve my stay" button. Nothing collides — the panel sits below the bar, so
   that button's x-range is free real estate — and it buys the card 245px of
   width it would otherwise have to take out of its left margin.

   245px rather than "align to the bar's right edge", which is what this wants to
   be: the nav is `justify-content:space-between`, so the distance from the
   trigger to the bar's edge is not fixed — measured at 345px at 1450px wide but
   only 237px at 1000px. A single value has to be safe at the narrow end, and the
   media query below drops it further still.

   Width is then clamped against the viewport so the left margin cannot collapse.
   The trigger sits at ~0.72 * 100vw, so `left = 0.72vw + 245 - width`; holding
   that at 40px or more gives `width <= 100vw - 205px`, which is the subtraction
   below. Measured, not guessed — at 1450px the card lands 161px in from the
   left. The panel is right-anchored, so trimming the width tightens it from the
   left and leaves the right edge where it was.

   Rooms sits mid-bar and gets the opposite treatment — see its own block below.
   Only the horizontal geometry differs between the two; everything from the card
   inwards is shared. */
#navlinks .megasub{
  position:absolute;top:100%;z-index:120;padding-top:26px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
#navlinks .has-sub:hover .megasub,
#navlinks .has-sub:focus-within .megasub{
  opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}

#navlinks .info-sub .megasub{right:-245px;width:min(1145px,calc(100vw - 205px))}

/* Rooms hangs the other way. Its trigger sits mid-bar — measured at 570px in at
   1450px wide and 324px at 950px — so right-anchoring it the way Info is would
   throw the card off the left of the screen. Left-anchored with a 280px pull
   back instead, which is the largest pull that still leaves a margin at the
   narrow end: at 950px it lands the card exactly on the bar's own 44px padding
   line. The width clamp is the mirror of Info's, derived the same way — the
   trigger tracks ~0.492 * 100vw, so holding the card's right edge at least 30px
   inside the bar gives `width <= 0.508 * 100vw + 357`, hence the 360px reserve
   and the 1040px cap.

   The reserve has to be that large because both ends move at once: the trigger
   walks right as the viewport grows (the bar is space-between) while the bar's
   own right edge walks right faster. A smaller reserve passes at 1450px and then
   fails in the middle — 1080/280 measured fine at 1450 but put the card 32px past
   the bar's edge at 1360. Checked across the range, not at one width. */
#navlinks .rooms-sub .megasub{left:-280px;width:min(1040px,calc(100vw - 360px))}

/* ── the nub ──────────────────────────────────────────────────────────────
   A notch under the trigger, so the panel reads as belonging to Info rather
   than floating loose under the bar.

   It hangs off the TRIGGER, not the panel. Anchoring it to the panel's right
   edge was the obvious thing and it was wrong: the panel's width and its offset
   from the trigger are both things that get tuned, and every such tune silently
   slid the notch off the word it is supposed to point at, needing two more
   numbers re-derived by hand each time. Anchored here it is correct by
   construction and the panel above can be resized freely.

   14px in from the trigger's right edge puts it under the caret rather than the
   word — the caret is the part of the trigger that signals a menu. Vertically,
   100% is the trigger's own 44px height, so +17px lands the notch's base on the
   card's top edge with no dependence on the bar's height.

   Two stacked triangles rather than one: the lower `::before` is 1px larger in
   every direction and painted in `--line`, so all that shows of it is the same
   hairline rim the card itself carries. z-index clears the panel's 120 so the
   fill covers the card's own top border and the notch merges into the card
   instead of sitting on top of it. */
#navlinks .info-sub .sub-toggle,
#navlinks .rooms-sub .sub-toggle{position:relative;z-index:121}
#navlinks .info-sub .sub-toggle::before,
#navlinks .info-sub .sub-toggle::after,
#navlinks .rooms-sub .sub-toggle::before,
#navlinks .rooms-sub .sub-toggle::after{
  content:"";position:absolute;width:0;height:0;pointer-events:none;opacity:0;
  transition:opacity .2s ease;
  border-left-style:solid;border-right-style:solid;border-bottom-style:solid;
  border-left-color:transparent;border-right-color:transparent}
#navlinks .info-sub .sub-toggle::before,
#navlinks .rooms-sub .sub-toggle::before{
  top:calc(100% + 17px);right:5px;border-width:0 9px 9px;border-bottom-color:var(--line)}
/* Apex 1px below the outline's, base 1px past it, so the rim reads as a
   hairline and the fill still covers the card's top border. */
#navlinks .info-sub .sub-toggle::after,
#navlinks .rooms-sub .sub-toggle::after{
  top:calc(100% + 18px);right:6px;border-width:0 8px 9px;border-bottom-color:var(--paper)}
#navlinks .info-sub:hover .sub-toggle::before,
#navlinks .info-sub:hover .sub-toggle::after,
#navlinks .info-sub:focus-within .sub-toggle::before,
#navlinks .info-sub:focus-within .sub-toggle::after,
#navlinks .rooms-sub:hover .sub-toggle::before,
#navlinks .rooms-sub:hover .sub-toggle::after,
#navlinks .rooms-sub:focus-within .sub-toggle::before,
#navlinks .rooms-sub:focus-within .sub-toggle::after{opacity:1}
@media (prefers-reduced-motion:reduce){
  #navlinks .info-sub .sub-toggle::before,
  #navlinks .info-sub .sub-toggle::after,
  #navlinks .rooms-sub .sub-toggle::before,
  #navlinks .rooms-sub .sub-toggle::after{transition:none}
}

/* White v2 card: opaque paper, hairline, soft shadow — the same recipe
   landing.html's `.subnav` uses. Opaque rather than translucent because the
   panel opens over white and grey sections where any transparency lets the
   section rules behind bleed through the list. */
#navlinks .megasub .mm-card{
  display:grid;grid-template-columns:1fr;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px rgba(30,30,30,.20);overflow:hidden}

#navlinks .info-sub .megasub .mm-card{grid-template-columns:1fr 245px}

#navlinks .megasub .mm-main{display:flex;flex-direction:column;padding:26px 30px 22px}

/* ── the three groups ─────────────────────────────────────────────────────
   Dividers live on the columns rather than between them so the rule stops at
   the column text and never runs into the footer's own top border. */
#navlinks .megasub .mm-cols{display:grid;grid-template-columns:repeat(3,1fr)}
#navlinks .megasub .mm-col{padding:0 22px;border-right:1px solid var(--line)}
#navlinks .megasub .mm-col:first-child{padding-left:0}
#navlinks .megasub .mm-col:last-child{padding-right:0;border-right:0}

/* Eyebrow is `.eyebrow span`'s recipe verbatim — 12px/700, 3px tracking,
   uppercase, `--gray` — with the section dot replaced by a stroked mark. */
#navlinks .megasub .mm-head{display:flex;align-items:center;gap:8px;margin-bottom:13px}
#navlinks .megasub .mm-head svg{
  width:14px;height:14px;flex:none;fill:none;stroke:var(--amber);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#navlinks .megasub .mm-head span{
  font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:var(--gray);line-height:1}

/* ── links ────────────────────────────────────────────────────────────────
   The doubled selector is not redundant. `#nav.over-hero:not(.solid) #navlinks a`
   carries two IDs, so a single-ID rule loses to it and every link in the panel
   would paint white-on-white while the bar floats over the hero. Same guard
   landing.html's own `.subnav` needed. It also has to undo `#navlinks a`'s
   inline-flex/44px/20px bar geometry, which is wrong inside a panel. */
#navlinks .megasub a,
#nav.over-hero:not(.solid) #navlinks .megasub a{
  display:block;min-height:0;font-family:var(--body);font-size:inherit;
  font-weight:400;letter-spacing:normal;text-transform:none;color:var(--charcoal)}

/* Negative margin lets the hover wash bleed to the column's text edge while the
   items still align flush with the eyebrow above them. */
#navlinks .megasub .mm-col a,
#nav.over-hero:not(.solid) #navlinks .megasub .mm-col a{
  padding:8px 10px;margin:0 -10px;border-radius:9px;transition:background .15s}
#navlinks .megasub .mm-col a:hover,
#navlinks .megasub .mm-col a:focus-visible,
#nav.over-hero:not(.solid) #navlinks .megasub .mm-col a:hover,
#nav.over-hero:not(.solid) #navlinks .megasub .mm-col a:focus-visible{
  background:var(--wash)}

#navlinks .megasub .mm-t{
  display:block;font-family:var(--display);font-size:19px;font-weight:500;
  line-height:1.15;letter-spacing:.2px;color:var(--charcoal);transition:color .15s}
#navlinks .megasub .mm-d{
  display:block;margin-top:1px;font-family:var(--body);font-size:12.5px;
  line-height:1.45;color:var(--gray)}
#navlinks .megasub .mm-col a:hover .mm-t,
#navlinks .megasub .mm-col a:focus-visible .mm-t{color:var(--amber-ink)}

/* Matches `.subnav a[aria-current="page"]`, which most of these pages set on
   their own entry. */
#navlinks .megasub .mm-col a[aria-current="page"],
#nav.over-hero:not(.solid) #navlinks .megasub .mm-col a[aria-current="page"]{
  background:rgba(245,166,35,.10)}
#navlinks .megasub .mm-col a[aria-current="page"] .mm-t{color:var(--amber-ink)}

/* ── concierge footer ─────────────────────────────────────────────────────
   margin-top:auto pins the row to the card's bottom so the left cell always
   matches the photo's full height, however uneven the columns are. */
#navlinks .megasub .mm-foot{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
#navlinks .megasub .mm-note{
  margin:0;font-family:var(--body);font-size:13.5px;line-height:1.5;color:var(--gray)}
/* `.btn-ghost`'s shape with `.nav-book`'s weight. Outlined rather than filled:
   the bar's own solid amber "Reserve my stay" sits a few centimetres away, and
   two filled amber pills in one nav read as a mistake. */
#navlinks .megasub .mm-cta,
#nav.over-hero:not(.solid) #navlinks .megasub .mm-cta{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:11px 22px;border:1px solid var(--amber);border-radius:999px;
  font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--amber-ink);background:transparent;
  transition:background .2s,color .2s,border-color .2s}
#navlinks .megasub .mm-cta:hover,
#navlinks .megasub .mm-cta:focus-visible,
#nav.over-hero:not(.solid) #navlinks .megasub .mm-cta:hover,
#nav.over-hero:not(.solid) #navlinks .megasub .mm-cta:focus-visible{
  background:var(--amber);color:var(--charcoal)}

/* ── gallery card ─────────────────────────────────────────────────────────
   The one dark surface in the panel, so it carries `.info-hero`'s treatment:
   charcoal scrim, paper display type, amber action. */
#navlinks .megasub .mm-photo,
#nav.over-hero:not(.solid) #navlinks .megasub .mm-photo{
  position:relative;overflow:hidden;background:var(--wash)}
#navlinks .megasub .mm-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
#navlinks .megasub .mm-photo:hover img,
#navlinks .megasub .mm-photo:focus-visible img{transform:scale(1.05)}
#navlinks .megasub .mm-photo .shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,30,30,.34) 0%,rgba(30,30,30,0) 40%,rgba(30,30,30,.84) 100%)}
/* The badge sits at the top of the card, where .shade is at its thinnest (~.31 there), so its own
   fill is most of what separates the white numeral from the photo. At .42 that held on three of the
   four room shots but not the Royal Twin, whose top-left is bright sunlit wood — rgb(222,180,146)
   averaged, brighter at its worst point — and the numeral measured 4.24:1 against the 4.5 floor.
   .50 is the lightest step that clears it (5.09:1) and leaves the other three at 10:1+. */
#navlinks .megasub .mm-badge{
  position:absolute;top:14px;left:14px;
  font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--paper);background:rgba(30,30,30,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  padding:5px 9px;border-radius:999px;line-height:1}
#navlinks .megasub .mm-cap{position:absolute;left:16px;right:16px;bottom:15px}
#navlinks .megasub .mm-pt{
  display:block;font-family:var(--display);font-size:27px;font-weight:500;
  line-height:1.02;color:var(--paper)}
#navlinks .megasub .mm-pc{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--amber)}
#navlinks .megasub .mm-pc svg{
  width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  transition:transform .25s ease}
#navlinks .megasub .mm-photo:hover .mm-pc svg{transform:translateX(3px)}

/* ── narrow desktop ───────────────────────────────────────────────────────
   Below ~1280px the clamp above starts squeezing the 880px card, and the photo
   is the right thing to drop first — it is the only decorative element in the
   panel. The columns then get the full width down to the 940px hamburger
   breakpoint, where the bar disappears and the panel stops rendering entirely. */
/* ── Rooms panel ──────────────────────────────────────────────────────────
   Four room cards in a row under a header rule. The cards are not new
   components: each one is a `.mm-photo` — the same element as the Info panel's
   gallery card — so the badge, scrim, display title and amber action all come
   from the rules above rather than from a parallel set that would drift. All
   this block adds is the grid, a radius (the gallery card gets its corners from
   the parent's overflow:hidden; these sit inside padding and need their own) and
   the header row.

   3:4 is not a crop decision either — every room has a portrait plate at exactly
   that ratio in uploads/rooms, so the cards show the photograph whole. */
#navlinks .rooms-sub .rm-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:15px;padding-bottom:13px;border-bottom:1px solid var(--line)}
/* `.eyebrow span`'s recipe, same as the Info panel's group labels. */
#navlinks .rooms-sub .rm-eyebrow{
  font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:var(--gray);line-height:1}
#navlinks .rooms-sub .rm-all,
#nav.over-hero:not(.solid) #navlinks .rooms-sub .rm-all{
  display:inline-flex;align-items:center;gap:8px;min-height:0;
  font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--amber-ink);transition:color .15s}
#navlinks .rooms-sub .rm-all:hover,
#navlinks .rooms-sub .rm-all:focus-visible,
#nav.over-hero:not(.solid) #navlinks .rooms-sub .rm-all:hover,
#nav.over-hero:not(.solid) #navlinks .rooms-sub .rm-all:focus-visible{color:var(--charcoal)}
#navlinks .rooms-sub .rm-all svg{
  width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  transition:transform .25s ease}
#navlinks .rooms-sub .rm-all:hover svg{transform:translate(2px,-2px)}

#navlinks .rooms-sub .rm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
#navlinks .rooms-sub .mm-photo,
#nav.over-hero:not(.solid) #navlinks .rooms-sub .mm-photo{
  aspect-ratio:3/4;border-radius:12px}
/* The current room reads as selected rather than just unvisited, matching the
   aria-current treatment the Info list already carries. */
#navlinks .rooms-sub .mm-photo[aria-current="page"]{
  outline:2px solid var(--amber);outline-offset:-2px}

@media (max-width:1280px){
  /* The bar compresses faster than the panel does, so the 245px overhang has to
     come back in here or the card's right edge passes the bar's own. */
  #navlinks .info-sub .megasub{right:-150px;width:min(620px,calc(100vw - 440px))}
  #navlinks .info-sub .megasub .mm-card{grid-template-columns:1fr}
  /* Scoped to .info-sub, and that scoping is load-bearing: the room cards reuse
     `.mm-photo` so they get the gallery card's treatment for free, which means an
     unscoped rule here would blank the entire Rooms panel below 1280px.

     Doubled again too: the over-hero rule that undoes the bar's link geometry
     sets display:block with two IDs, so a one-ID display:none loses to it and the
     photo survives — but only on the page whose bar floats over a hero, which is
     exactly the page a quick check at one width would miss. */
  #navlinks .info-sub .megasub .mm-photo,
  #nav.over-hero:not(.solid) #navlinks .info-sub .megasub .mm-photo{display:none}
  #navlinks .info-sub .megasub .mm-main{padding:24px 26px 20px}
  #navlinks .megasub .mm-col{padding:0 16px}
  #navlinks .megasub .mm-t{font-size:18px}
  #navlinks .megasub .mm-foot{flex-direction:column;align-items:flex-start;gap:12px}

  /* Rooms keeps all four cards at every desktop width — they are the content,
     not decoration. The card grid just gets tighter. */
  #navlinks .rooms-sub .megasub .mm-main{padding:22px 22px 22px}
  #navlinks .rooms-sub .rm-grid{gap:10px}
  #navlinks .rooms-sub .mm-pt{font-size:20px}
  #navlinks .rooms-sub .mm-cap{left:12px;right:12px;bottom:12px}
  #navlinks .rooms-sub .mm-badge{top:10px;left:10px}
}

@media (prefers-reduced-motion:reduce){
  #navlinks .megasub,
  #navlinks .megasub .mm-photo img,
  #navlinks .megasub .mm-pc svg{transition:none}
}