/* ===========================================================================
   HEADER  —  masthead, one menu, Book direct, Plan my day
   ===========================================================================

   Mike, 2 Oct 2026. Two decisions drove this:

   1. "i dont want people to think that its called one more night anymore so i
      want to incorporate one more night as just being the parties and events
      side"

      So One More Day is the masthead and never shares it. A second logo
      beside it would have said the opposite: LOGO x LOGO is the visual
      grammar of two companies in partnership, which is exactly the reading
      we are trying to kill.

   2. "we can always have a drop down menu in the header that can lead them
      onto various things around the website ... the drop down menu on the
      right next to the basket far right"

      One menu now carries what used to be three separate things competing
      for width: the destination switcher, the two social icons, and the
      routes into the planner and the events side.

   The header is four items at every width:

       [One More Day]  ......  [Book direct]  [Menu v]  [Plan my day]

   The destination rows inside the menu keep their original markup, ids and
   data-dest attributes, so the per-page switcher script -- which maps you to
   the equivalent page on the next destination rather than dumping you on its
   home page -- carries on working untouched.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------- Book direct ---
   Was a two-line pill reading "After dark / Book direct". "After dark" was
   wrong: Yona's two sittings, Hype's island days, Savaya's daybeds and Desa
   Kitsune's sunset garden are all daytime, and they are four of the seven
   venues we actually book. One line, no claim about the hour. */
.hdr__bd {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .01em;
  /* One More Night's own accent, not a Day colour. It is the only purple on
     a Day page, so it reads as "this goes somewhere else" before the word
     is read. */
  color: #CF8BFF;
  border: 1px solid rgba(207, 139, 255, .34);
  transition: background .15s, border-color .15s, color .15s;
}
.hdr__bd:hover,
.hdr__bd:focus-visible {
  background: rgba(207, 139, 255, .14);
  border-color: rgba(207, 139, 255, .7);
  color: #EBD2FF;
}
.hdr__bd svg { width: 14px; height: 14px; flex: none; }

/* ----------------------------------------------------------- menu panel ---
   The panel is the old destination dropdown with two sections added above
   the destinations and the socials added below. Keeping .dsw__p and its ids
   means no page's inline switcher script had to change. */
.dsw__sec {
  margin: 0;
  padding: 11px 13px 7px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sea, #2E6A7C);
}
.dsw__sec + .dsw__go { margin-top: 0; }

/* A route out of the menu: icon, label, one line of what it is. Same shape
   as a destination row so the panel reads as one list, not three. */
.dsw__go {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 13px;
  text-decoration: none;
  color: var(--ink, #08222C);
  transition: background .15s;
}
.dsw__go:hover, .dsw__go:focus-visible { background: var(--sand-pale, #F3EADC); }
.dsw__go svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.dsw__go b { display: block; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.dsw__go span { display: block; font-size: .78rem; color: var(--sea, #2E6A7C); line-height: 1.3; margin-top: 2px; }

/* The events route, inside the menu. Tinted so the two halves of the
   business are visibly different things even in a plain list. */
.dsw__go--night b { color: #6B21A8; }
.dsw__go--night svg { color: #8E2BD6; opacity: 1; }
.dsw__go--night:hover { background: rgba(142, 43, 214, .09); }

.dsw__rule { height: 1px; margin: 7px 12px; background: var(--line, rgba(8,34,44,.12)); border: 0; }

/* Socials live at the foot of the menu now. They were two icons competing
   for header width with a route into half the business, which was never a
   fair fight. */
.dsw__soc { display: flex; gap: 8px; padding: 4px 12px 8px; }
.dsw__soc a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--ink, #08222C); text-decoration: none;
  border: 1px solid var(--line, rgba(8,34,44,.12));
  transition: background .15s, border-color .15s;
}
.dsw__soc a:hover { background: var(--sand-pale, #F3EADC); border-color: var(--sea, #2E6A7C); }
.dsw__soc svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------- the squeeze ---
   Four items on a 360px phone. Measured at 320/360/390/414 in
   check-header.js: the masthead and the menu label give ground first, and
   "Book direct" keeps its words at every width, because a wordless icon
   there is the exact problem this change exists to fix. */
@media (max-width: 560px) {
  .hdr .hdr__in { gap: 7px; }
  .hdr__bd { height: 36px; padding: 0 11px; font-size: .78rem; gap: 5px; }
  .hdr__bd svg { display: none; }
}
@media (max-width: 400px) {
  .hdr .hdr__in { gap: 5px; }
  .hdr__bd { padding: 0 9px; font-size: .74rem; }
}

/* ------------------------------------------------------- the menu button ---
   A hamburger, not a map pin: this stopped being only a destination
   switcher when the planner, the events side and the socials moved into it.
   It also moved to the right of Book direct, next to the basket, where Mike
   wanted it -- which means the panel has to hang from the button's RIGHT
   edge or a 390px panel runs off the screen. */
.hdr .dsw { margin-left: 0; }
.dsw__lbl { font-weight: 600; font-size: .86rem; }
@media (min-width: 641px) {
  .dsw__p { left: auto; right: 0; }
}
@media (max-width: 440px) {
  /* Label goes before anything else does. The hamburger is understood on
     its own; "Book direct" is not, so that keeps its words. */
  .dsw__lbl { display: none; }
}

/* The panel grew from four destinations to four destinations plus two
   routes plus the socials. On a short phone in landscape that runs past the
   bottom of the screen, and a row you cannot reach is the same as a row
   that is not there. */
.dsw__p { max-height: calc(100vh - 86px); overflow-y: auto; overscroll-behavior: contain; }

/* A destination with no planner yet. omd-header.js strips the href after
   the inline switcher script has run, so this is genuinely not a link. */
.dsw__o--soon { opacity: .55; cursor: default; }
.dsw__o--soon:hover { background: transparent; }