/* ==========================================================================
   Minthis header adjustments (2026-10-20) — loaded after theme CSS (see header.php)
   Selectors are scoped to .site_header so page-level Elementor rules such as
   "body.elementor-page-N a { position: relative; font-size: 16px }" can't override them.
   ========================================================================== */

/* --- Desktop: "Gift Vouchers" in the top bar, next to the language switcher --- */
.site_header a.top-gift-vouchers {
  font-family: Prompt, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
  transition: opacity 0.2s, color 0.2s;
}
.site_header a.top-gift-vouchers:hover { opacity: 0.7; }
.site_header.solid a.top-gift-vouchers { color: #2b2e31; }
.site_header:hover a.top-gift-vouchers { color: #000; } /* header turns white on hover */
/* ...except while the language dropdown is open: the theme keeps the header transparent then
   (page dimmed behind it) and the other header items stay white */
.language_switcher_open .site_header:not(.solid):hover a.top-gift-vouchers { color: #fff; }

/* language toggle is 119px wide (its wrapper is wider), link sits 22px after it */
#header .secondary_navigation a.top-gift-vouchers {
  position: absolute;
  top: 50%;
  left: 141px;
  transform: translateY(-50%);
  z-index: 1001; /* above .language_switcher (z-index 200, 1000 while its dropdown is open), whose box is
                   wider than its visible text; the dropdown list opens below this row, so it is never covered */
}

.site_header.sticky_header a.top-gift-vouchers--sticky {
  position: absolute;
  top: 50px;
  left: 171px;
  transform: translateY(-50%);
  z-index: 1001;
}

@media (max-width: 1080px) {
  .site_header a.top-gift-vouchers { display: none; }
}
.touch .site_header a.top-gift-vouchers { display: none; }

/* --- Mobile menu: "Gift Vouchers" in the bottom bar (between phone & language) --- */
.site_header a.mobile-gift-vouchers {
  position: absolute;
  left: 50%;
  bottom: 12px;
  top: auto;
  z-index: 10;
  height: 32px;
  margin: 0;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  font-family: Prompt, sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: #2b2e31;
}
/* RateParity widget (#rp-allinone: price card + chat bubble) floats over the open mobile menu on some
   pages (z-index 2147483636, inside a shadow DOM whose host has `all: initial !important`, so it can't be
   hidden from outside). Lift the header above it only while the mobile menu is open. */
#header.site_header:has(.mobile_menu_overlay.active) { z-index: 2147483647; }

/* phones: centre it in the gap between the phone button and the language text */
@media (max-width: 679px) {
  .site_header a.mobile-gift-vouchers { left: calc(50% - 18px); }
}
@media (max-width: 379px) {
  .site_header a.mobile-gift-vouchers { font-size: 12px; letter-spacing: 0.06em; }
}
/* narrow phones: start right after the phone button so it never reaches the language text
   (on some pages, e.g. Spa, the language text sits ~17px further left) */
@media (max-width: 359px) {
  .site_header a.mobile-gift-vouchers { left: 88px; transform: none; }
}
@media (max-width: 339px) {
  .site_header a.mobile-gift-vouchers { left: 86px; font-size: 11px; letter-spacing: 0.04em; }
}

/* --- Mobile header: logo left-aligned next to the menu icon, on one row with BOOK --- */
@media (max-width: 680px) {
  .site_header .top-wrapper .logo,
  .site_header.sticky_header .logo {
    position: absolute;
    top: 15px;
    left: 60px;
    height: 30px;
    margin: 0;
    float: none;
    display: flex;
    align-items: center;
    transform: none;
  }
  .site_header.sticky_header .logo { top: 5px; }
  .site_header.sticky_header .logo .icon { margin: 0; }
  .site_header .top-wrapper .logo .icon,
  .site_header.sticky_header .logo .icon {
    width: 130px;
    height: 19px;
    max-width: none;
  }
}
@media (max-width: 360px) {
  .site_header .top-wrapper .logo .icon,
  .site_header.sticky_header .logo .icon { width: 110px; height: 16px; }
}