/* RUMA v3 · the header: "Five rooms" (navigation lab option A, approved by the client).
   Desktop: five disclosure buttons, each opening a full width panel under the bar (two short
   columns, one picture, a quiet help line); the page behind dims. Below 1100px: the rooms fold
   into a drill down dialog with Book pinned. Behaviour in pages/nav.js. Motion: entrances
   ease-out 220–320ms, exits faster, swaps between panels instant; none under reduced motion. */

.theme-v3 {
  --nav-in: 220ms; --nav-out: 140ms; --nav-drawer: cubic-bezier(.32, .72, 0, 1);
  --rooms-ml: clamp(16px, 3vw, 48px); --rooms-pad: 14px; /* the rooms' left margin and item padding (the panel indent follows) */
}
.theme-v3 .rooms ul, .theme-v3 .menu ul { list-style: none; margin: 0; padding: 0; }
.theme-v3 .nav-gh { font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--sage); font-weight: 700; margin: 0 0 10px; }
.theme-v3 .nav__ic { flex: none; }

/* ---------- the bar ---------- */
.theme-v3 .nav { position: relative; }
.theme-v3 .nav__right { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: none; }
.theme-v3 .nav__acct { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-size: var(--fs-small); color: var(--text); transition: color .3s var(--ease-warm); }
.theme-v3 .nav__acct .nav__ic { width: 19px; height: 19px; }
.theme-v3 .nav__acct[aria-current="page"] { color: var(--candle-soft); }
@media (hover: hover) { .theme-v3 .nav__acct:hover { color: var(--candle-soft); } }
.theme-v3 .nav__cta { --h: 46px; flex: none; }

/* the round two-line menu button */
.theme-v3 .menu-btn { display: none; width: 46px; height: 46px; flex: none; position: relative; border: 0; padding: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px var(--field-line); }
.theme-v3 .menu-btn span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: var(--text-strong); border-radius: 2px; }
.theme-v3 .menu-btn span:first-child { top: 19px; }
.theme-v3 .menu-btn span:last-child { top: 26px; right: 18px; }
.theme-v3 .menu-btn:active { transform: scale(.96); }

/* ---------- the five rooms ---------- */
/* full bar height, so the pointer stays inside on its way down from a room to its panel */
.theme-v3 .rooms { margin-left: var(--rooms-ml); align-self: stretch; display: flex; align-items: center; }
.theme-v3 .rooms__items { display: flex; align-items: center; gap: 2px; }
.theme-v3 .rooms__item {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--rooms-pad); border: 0; background: none;
  color: var(--text-strong); font-size: 1.0625rem; letter-spacing: .01em; border-radius: var(--r-pill); position: relative; white-space: nowrap;
}
.theme-v3 .rooms__item::after {
  content: ""; position: absolute; left: var(--rooms-pad); right: calc(var(--rooms-pad) + 18px); bottom: 6px; height: 1px; background: var(--candle);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
}
.theme-v3 .rooms__item.is-current { color: var(--candle-soft); }
.theme-v3 .rooms__item[aria-expanded="true"] { color: var(--candle-soft); }
.theme-v3 .rooms__item[aria-expanded="true"]::after { transform: scaleX(1); }
.theme-v3 .rooms__chev { width: 10px; height: 7px; flex: none; transition: transform .25s var(--ease-out); opacity: .8; }
.theme-v3 .rooms__item[aria-expanded="true"] .rooms__chev { transform: rotate(180deg); }
@media (hover: hover) { .theme-v3 .rooms__item:hover { color: var(--candle-soft); } }

/* a panel is open: the bar turns solid and the page behind dims */
.theme-v3 .site-head:has(.rooms__panel[data-open]) .nav { background: var(--night-deep); box-shadow: none; }
.theme-v3 .rooms__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--night-deep);
  box-shadow: 0 1px 0 var(--line) inset, 0 40px 80px -30px rgb(0 0 0 / .7), 0 0 0 100vmax rgb(var(--deep-rgb) / .5);
  clip-path: inset(0 0 -100vmax 0);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--nav-out) ease, transform var(--nav-out) ease, visibility 0s linear var(--nav-out);
}
.theme-v3 .rooms__panel[data-open] { opacity: 1; visibility: visible; transform: none; transition: opacity var(--nav-in) var(--ease-out), transform var(--nav-in) var(--ease-out), visibility 0s; }
.theme-v3 .rooms.is-swap .rooms__panel { transition: none; }
.theme-v3 .rooms__panel-in {
  --rooms-indent: calc(112px + 16px + var(--rooms-ml) + var(--rooms-pad)); /* logo + bar gap + rooms margin + item padding: the columns line up under the first room */
  max-width: var(--wrap); margin-inline: auto; padding: 36px var(--gut) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 24px 56px;
}
.theme-v3 .rooms__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 0 56px; align-content: start; padding-left: var(--rooms-indent); }
.theme-v3 .rooms__col a {
  display: flex; align-items: center; min-height: 40px; color: var(--text); text-decoration: none; font-size: var(--fs-body);
  transition: color .2s ease, transform .25s var(--ease-out);
}
.theme-v3 .rooms__col a[aria-current="page"] { color: var(--candle-soft); font-style: italic; }
@media (hover: hover) { .theme-v3 .rooms__col a:hover { color: var(--candle-soft); transform: translateX(3px); } }
.theme-v3 .rooms__feature { position: relative; display: block; border-radius: var(--r-media); overflow: hidden; aspect-ratio: 5 / 4; color: var(--text-strong); text-decoration: none; align-self: start; background: var(--ember); }
.theme-v3 .rooms__feature img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8) saturate(.9); transition: transform .8s var(--ease-out), filter .4s ease; }
.theme-v3 .rooms__feature span {
  position: absolute; inset: auto 0 0; padding: 40px 18px 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  font-family: var(--font-display); font-size: 1.1rem; line-height: 1.3;
  background: linear-gradient(0deg, rgb(var(--deep-rgb) / .85), rgb(var(--deep-rgb) / 0));
}
.theme-v3 .rooms__feature svg { width: 15px; height: 15px; flex: none; color: var(--candle-soft); }
@media (hover: hover) { .theme-v3 .rooms__feature:hover img { transform: scale(1.03); filter: brightness(.9); } }
.theme-v3 .rooms__foot {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px;
  margin-top: 4px; padding: 14px 0 18px var(--rooms-indent); border-top: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--muted);
}
.theme-v3 .rooms__foot a { color: var(--text); min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; }
.theme-v3 .rooms__foot a[aria-current="page"] { color: var(--candle-soft); }
@media (hover: hover) { .theme-v3 .rooms__foot a:hover { color: var(--candle-soft); } }

/* ---------- below 1100px: the drill down menu (a modal dialog) ---------- */
.theme-v3 .menu {
  position: fixed; inset: 0; z-index: calc(var(--z-menu) + 2); display: flex; flex-direction: column;
  background: var(--night-deep); color: var(--text);
  padding: calc(env(safe-area-inset-top) + 14px) var(--gut) calc(env(safe-area-inset-bottom) + 16px);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--nav-out) ease, transform var(--nav-out) ease, visibility 0s linear var(--nav-out);
}
.theme-v3 .menu[data-open] { opacity: 1; visibility: visible; transform: none; transition: opacity 280ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s; }
body.theme-v3.menu-open { overflow: hidden; }
.theme-v3 .menu__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; }
.theme-v3 .menu__mark { width: 26px; height: auto; color: var(--candle); }
.theme-v3 .menu__close {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  background: rgb(var(--text-rgb) / .06); color: var(--text-strong); font-size: var(--fs-small);
}
.theme-v3 .menu__close svg { width: 14px; height: 14px; }
@media (hover: hover) { .theme-v3 .menu__close:hover { background: rgb(var(--text-rgb) / .1); } }
.theme-v3 .menu__views { position: relative; flex: 1; overflow: hidden; margin: 8px calc(var(--gut) * -1) 0; }
.theme-v3 .menu__view {
  position: absolute; inset: 0; overflow-y: auto; padding: 8px var(--gut) 28px; overscroll-behavior: contain;
  transition: transform 380ms var(--nav-drawer), opacity 280ms ease;
  mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); /* more below: a soft edge, not a cut */
}
.theme-v3 .menu__view[data-menu-view="sub"] { transform: translateX(100%); }
.theme-v3 .menu__view[data-menu-view="sub"][data-open] { transform: none; }
.theme-v3 .menu.is-deep [data-menu-view="root"] { transform: translateX(-22%); opacity: 0; }
.theme-v3 .menu__rooms li { overflow: hidden; }
.theme-v3 .menu__room {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0; border: 0; background: none;
  color: var(--text-strong); font-family: var(--font-display); font-size: clamp(2rem, 9vw, 2.6rem); letter-spacing: -.02em; text-align: left;
  border-bottom: 1px solid var(--line);
}
.theme-v3 .menu__room.is-current span { font-style: italic; color: var(--candle-soft); }
.theme-v3 .menu__room svg { width: 18px; height: 18px; color: var(--candle); flex: none; }
.theme-v3 .menu[data-open] .menu__rooms li > * { animation: nav-rise 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
@keyframes nav-rise { from { opacity: 0; transform: translateY(14px); } }
.theme-v3 .menu__quiet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 22px 0 8px !important; }
.theme-v3 .menu__quiet a, .theme-v3 .menu__links a { display: flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
.theme-v3 .menu__quiet a[aria-current="page"], .theme-v3 .menu__links a[aria-current="page"] { color: var(--candle-soft); font-style: italic; }
.theme-v3 .menu__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; margin-left: -8px; border: 0; background: none; color: var(--candle-soft); font-size: var(--fs-small); border-radius: var(--r-pill); }
.theme-v3 .menu__back .nav__ic { width: 16px; height: 16px; }
.theme-v3 .menu__h { font-size: clamp(2rem, 9vw, 2.6rem); margin: 6px 0 18px; outline: none; }
.theme-v3 .menu__feature { position: relative; display: block; border-radius: var(--r-media); overflow: hidden; aspect-ratio: 16 / 8; margin-bottom: 22px; text-decoration: none; color: var(--text-strong); background: var(--ember); }
.theme-v3 .menu__feature img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); }
.theme-v3 .menu__feature span { position: absolute; inset: auto 0 0; padding: 36px 16px 12px; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; background: linear-gradient(0deg, rgb(var(--deep-rgb) / .88), rgb(var(--deep-rgb) / 0)); }
.theme-v3 .menu__links { margin-bottom: 20px !important; border-top: 1px solid var(--line); }
.theme-v3 .menu__links li { border-bottom: 1px solid var(--line); }
.theme-v3 .menu__links a { min-height: 52px; font-size: 1.125rem; }
.theme-v3 .menu__dock { padding-top: 14px; border-top: 1px solid var(--line); }
/* short screens (small phones, phones on their side): tighter rows so the five rooms fit above Book */
@media (max-height: 700px) {
  .theme-v3 .menu__top { min-height: 44px; }
  .theme-v3 .menu__room { min-height: 54px; font-size: clamp(1.75rem, 8vw, 2.2rem); }
  .theme-v3 .menu__h { font-size: clamp(1.75rem, 8vw, 2.2rem); margin-bottom: 14px; }
}
@media (max-height: 480px) {
  .theme-v3 .menu { padding-top: calc(env(safe-area-inset-top) + 8px); padding-bottom: calc(env(safe-area-inset-bottom) + 10px); }
  .theme-v3 .menu__rooms, .theme-v3 .menu__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .theme-v3 .menu__links a { min-height: 46px; }
  .theme-v3 .menu__room { min-height: 48px; font-size: 1.6rem; }
  .theme-v3 .menu__h { margin: 0 0 10px; }
  /* the room's picture becomes its line of text (the link stays) */
  .theme-v3 .menu__feature { aspect-ratio: auto; margin-bottom: 14px; background: none; }
  .theme-v3 .menu__feature img { display: none; }
  .theme-v3 .menu__feature span { position: static; padding: 0; background: none; color: var(--candle-soft); }
  .theme-v3 .menu__dock { padding-top: 10px; }
  .theme-v3 .menu__dock .btn { --h: 48px; }
}

/* ---------- breakpoints: the five rooms fold into the menu below 1100px ---------- */
/* 1100–1279px the bar is tight (the Spanish labels are longer): narrower rooms */
@media (min-width: 1100px) and (max-width: 1279px) { .theme-v3 { --rooms-pad: 10px; } }
/* there and on phones the account link is its icon; the label stays as the link's accessible name */
@media (min-width: 1100px) and (max-width: 1279px), (max-width: 700px) {
  .theme-v3 .nav__acct { min-width: 44px; justify-content: center; }
  .theme-v3 .nav__acct span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 1099px) {
  .theme-v3 .rooms { display: none; }
  .theme-v3 .menu-btn { display: block; }
  .theme-v3 .nav .wrap { gap: 12px; }
  .theme-v3 .wordmark__tag { display: inline; }
}
@media (min-width: 1100px) { .theme-v3 .menu { display: none; } }
/* the tagline only where it fits beside account, language, Book and the menu button */
@media (max-width: 899px) { .theme-v3 .wordmark__tag { display: none; } }
/* phones: up to 700px, where the Book dock takes over on most pages (pages/shell.css) */
@media (max-width: 700px) {
  .theme-v3 .lang--head { display: none; }
  .theme-v3 .nav .wrap { gap: 10px; }
  .theme-v3 .nav__right { gap: 8px; }
  .theme-v3 .wordmark__tag { display: none; }
  .theme-v3 .nav__cta { --h: 44px; padding: 0 16px !important; }
  .theme-v3 .nav__cta .btn__ic { display: none; }
}
@media (max-width: 560px) {
  .theme-v3 { --head-h: 100px; }
  .theme-v3 .nav { height: 64px; }
  .theme-v3 .wordmark__logo { width: 96px; }
  .theme-v3 .wordmark b { font-size: 1.45rem; }
}
@media (max-width: 370px) { .theme-v3 .nav__cta { padding: 0 12px !important; } }

/* a short fade only; visibility flips at once, so focus can move into the menu as it opens */
@media (prefers-reduced-motion: reduce) {
  .theme-v3 .site-head *, .theme-v3 .menu, .theme-v3 .menu * { animation: none !important; transition: opacity 160ms ease !important; }
  .theme-v3 .menu__view[data-menu-view="sub"], .theme-v3 .menu { transform: none !important; }
  .theme-v3 .menu__view:not([data-open]) { opacity: 0; visibility: hidden; }
}
