/* ==========================================================================
   header-nav.css — slim sticky header + left slide-out menu (push).
   Loaded last (after the frozen dumps and mobile-fixes.css) so it wins the
   cascade. New markup uses the `abh2-*` prefix; the account/currency dropdowns
   keep their legacy hooks (.abh-acct, .currency-header-menu/.default-currency/
   .currency-menu, Bootstrap 3 .dropdown) so the frozen JS keeps working.
   ========================================================================== */

:root{ --abh2-dw: 380px; --abh2-h: 92px; --abh2-top-h: 40px; --abh2-accent:#9b1c33; --abh2-ink:#15242A; }

/* ---------- the slim bar ---------------------------------------------------- */
/* Transparent at the top of the page (the hero shows through); turns solid and
   casts a shadow once scrolled (.abh2-stuck, toggled by header-nav.js). It is
   always fixed to the top. */
/* Colour model: `--abh2-fg` is the foreground (text/icons/logo) colour for the
   whole header. The DEFAULT (solid) look applies everywhere — inner pages have no
   hero, so they are solid from the start. The transparent, white-on-hero look is an
   exception applied only on hero pages while scrolled to the very top
   (body.abh2-has-hero + :not(.abh2-stuck)). Scrolling down removes .abh2-stuck's
   absence → the header snaps to the solid look and the logo flips to colour. */
.navbar.abh2{ --abh2-fg: var(--abh2-ink);
  background:rgba(255,255,255,.97); border:0; margin:0; min-height:0; border-radius:0;
  font-family:'Lato',system-ui,-apple-system,Arial,sans-serif;
  box-shadow:0 1px 0 #e8eaed, 0 6px 18px -14px rgba(18,37,49,.25);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); z-index:1030;
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, color .3s ease; }
.abh2 .abh2-bar{ background:transparent; }

/* hero pages, scrolled to the top: transparent header, white text/icons */
body.abh2-has-hero .navbar.abh2:not(.abh2-stuck){ --abh2-fg:#fff;
  background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
/* logo: colour is the base, the white version crossfades in over the hero */
body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-logo-white{ opacity:1;
  /* tight dark edge + soft shadow keeps the white logo legible even on a near-white sky frame */
  filter:drop-shadow(0 0 2px rgba(0,0,0,.95)) drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
/* give the white header TOGGLES over the hero a strong shadow (account + currency had none),
   so the bar stays readable on a bright video frame (reported at ~950px, repeatedly).
   Scoped to the toggles only — NOT the dropdown menus (those are white popups; a shadow
   there blurred the menu text, client #26). */
body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-right .abh-acct > a.abh2-acct-link,
body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-right .currency-header-menu > .default-currency,
body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-right .abh2-cur-ico,
body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-right .abh2-cur-caret,
body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-logo .subtitle,
body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-burger{ text-shadow:0 0 3px rgba(0,0,0,.8), 0 1px 6px rgba(0,0,0,.6); }
/* belt-and-suspenders: never let the shadow bleed into the (white) dropdown menus */
.abh2-right .dropdown-menu, .abh2-right .dropdown-menu *{ text-shadow:none !important; }
body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-logo-color{ opacity:0; }
/* dark top scrim so the white text/logo stay legible over a bright hero.
   Confined to the header's own height (100%, not 200%) so the gradient fades
   out by the header's bottom edge instead of spilling a grey band onto the
   hero below it. */
body.abh2-has-hero .navbar.abh2:not(.abh2-stuck)::before{ content:""; position:absolute; left:0; right:0; top:0; height:100%;
  background:linear-gradient(180deg, rgba(10,15,20,.72), rgba(10,15,20,.5) 52%, rgba(10,15,20,.16)); pointer-events:none; z-index:-1; }
/* ---------- top utility bar: phones (left) + sister-brand links (right) ------- */
.abh2-top{ border-bottom:1px solid rgba(0,0,0,.07); }
/* no divider line over the hero — it reads as a grey strip on the image */
body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-top{ border-bottom-color:transparent; }
.abh2-top-in{ max-width:1280px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:18px; padding:0 22px; min-height:var(--abh2-top-h); }
.abh2-top-left{ display:flex; align-items:center; gap:26px; min-width:0; }
.abh2-top-right{ display:flex; align-items:center; gap:22px; min-width:0; }
/* color uses !important: a legacy `a:link{color:#000}` (specificity 0,1,1) would
   otherwise beat these class rules and force the links black on the hero. */
.abh2-tel{ color:var(--abh2-fg) !important; text-decoration:none; text-underline-offset:3px; font-size:16px; font-weight:600;
  white-space:nowrap; transition:color .3s ease; }
.abh2-tel:hover{ color:var(--abh2-accent) !important; text-decoration:underline; }
/* match the phone links' size/weight (client: sibling links were smaller than the phone) */
.abh2-sibling{ color:var(--abh2-fg) !important; text-decoration:none; text-underline-offset:3px;
  font-size:16px; font-weight:600; letter-spacing:.02em; white-space:nowrap; transition:color .3s ease; }
.abh2-sibling:hover{ color:var(--abh2-accent) !important; text-decoration:underline; }
@media (min-width: 992px){ .abh2-tel, .abh2-sibling{ font-size:14px; } }
/* inline icons on the top-bar links (phone on the left, external-link on the right).
   currentColor keeps them in step with the per-state link colour rules above. */
.abh2-tel i{ margin-right:6px; font-size:.9em; color:currentColor; }
.abh2-sibling i{ margin-left:6px; font-size:.85em; color:currentColor; }
/* Explicit state-scoped colours for the top-bar links. The var(--abh2-fg) approach
   alone resolved to the dark ink here (a legacy a:link rule interferes), so pin the
   colour per state with high specificity: white over the hero, dark when solid. */
body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-tel,
body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-sibling{ color:#fff !important;
  text-shadow:0 0 3px rgba(0,0,0,.8), 0 1px 6px rgba(0,0,0,.55); }
.navbar.abh2.abh2-stuck .abh2-tel,
.navbar.abh2.abh2-stuck .abh2-sibling,
body:not(.abh2-has-hero) .navbar.abh2 .abh2-tel,
body:not(.abh2-has-hero) .navbar.abh2 .abh2-sibling{ color:var(--abh2-ink) !important; }

.abh2 .abh2-in{ max-width:1280px; margin:0 auto; display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center; gap:18px;
  padding:0 22px; min-height:var(--abh2-h); }

.abh2-left{ display:flex; align-items:center; gap:18px; min-width:0; }
.abh2-right{ display:flex; align-items:center; justify-content:flex-end; gap:14px; min-width:0; }

/* burger — icon with the MENU label stacked underneath (per the mockup) */
.abh2-burger{ display:inline-flex; flex-direction:column; align-items:center; gap:4px; background:none; border:0;
  cursor:pointer; color:var(--abh2-fg); padding:4px 2px; font:inherit; transition:color .3s ease; }
/* width tuned to match the "MENU" label underneath (client: icon should be the same size as the word) */
.abh2-bars{ position:relative; width:42px; height:22px; display:inline-block; }
.abh2-bars i{ position:absolute; left:0; height:3px; width:100%; background:currentColor; border-radius:2px; transition:.25s; }
.abh2-bars i:nth-child(1){ top:0 } .abh2-bars i:nth-child(2){ top:9.5px } .abh2-bars i:nth-child(3){ top:19px }
.abh2-menulbl{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; line-height:1; }
.abh2-burger:hover{ color:var(--abh2-accent); }

/* logo (centre): two stacked states (colour base + white overlay) that crossfade */
.abh2-logo{ justify-self:center; position:relative; display:inline-flex; align-items:center; }
.abh2-logo img{ height:66px; width:auto; display:block; transition:opacity .3s ease; }
.abh2-logo-color{ position:relative; }
.abh2-logo-white{ position:absolute; left:0; top:0; opacity:0; }

/* ---------- right: account + currency (legacy Bootstrap dropdowns) ---------- */
.abh2-acct-wrap, .abh2-cur-wrap{ list-style:none; margin:0; padding:0; display:flex; align-items:center; }
.abh2-right .dropdown{ position:relative; }

/* account: icon + Login/Logout label, no pill (per mockup) */
.abh2-right .abh-acct > a.abh2-acct-link{ display:inline-flex !important; align-items:center; gap:8px;
  height:52px; padding:0 8px !important; border-radius:999px; background:transparent;
  color:var(--abh2-fg) !important; font-weight:700; font-size:16px; white-space:nowrap; text-decoration:none;
  transition:color .3s ease; }
.abh2-right .abh-acct > a.abh2-acct-link:hover{ color:var(--abh2-fg) !important; }
/* account + currency toggles must never show a focus/active/open outline, border or
   background — Bootstrap's default open/focus state otherwise leaked a grey border
   strip under the header. */
.abh2-right .abh-acct > a.abh2-acct-link:focus,
.abh2-right .abh-acct > a.abh2-acct-link:active,
.abh2-right .currency-header-menu .default-currency:focus,
.abh2-right .currency-header-menu .default-currency:active,
.abh2-right .currency-header-menu.open .default-currency{
  outline:0 !important; box-shadow:none !important; border:0 !important; background:transparent !important; }
/* account: inline person-in-circle icon (monochrome, follows the header state) */
.abh2-right .abh-acct > a.abh2-acct-link .abh2-acct-ic{ display:inline-flex; align-items:center; }
.abh2-right .abh-acct > a.abh2-acct-link .abh2-acct-ic svg{ width:30px; height:30px; display:block; }

/* currency switcher: coins icon + code + caret (icon/caret are siblings of the
   JS-managed .default-currency anchor, laid out as a flex row on the li). */
.abh2-right .currency-header-menu{ position:relative; display:inline-flex; align-items:center; gap:4px;
  color:var(--abh2-fg); transition:color .3s ease; }
.abh2-right .abh2-cur-ico{ font-size:22px; line-height:1; color:inherit; }
.abh2-right .abh2-cur-caret{ font-size:13px; opacity:.8; color:inherit; }
.abh2-right .default-currency{ display:inline-flex !important; align-items:center; gap:6px; height:52px;
  padding:0 2px !important; color:var(--abh2-fg) !important; font-weight:700; font-size:16px;
  background:transparent !important; border:0; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:color .3s ease; }
.abh2-right .currency-header-menu:hover,
.abh2-right .default-currency:hover{ color:var(--abh2-fg) !important; }
/* symbol matches the currency code (no longer the red accent): white over the hero,
   dark ink when the header is solid — always readable. Client asked for white; inherit
   keeps that over the hero while staying legible on the solid state. */
.abh2-right .default-currency .menu-currency-symbol{ color:inherit; margin-left:2px; }
.abh2-right .default-currency .menu-currency-sep{ margin:0 3px; opacity:.55; }
/* the currency JS injects a "Valuta:" label inside a .visible-xs.visible-sm span (shows on
   tablet widths). Drop it in the header — the coins icon already signals currency (client). */
.abh2-right .default-currency .visible-xs,
.abh2-right .default-currency .visible-sm{ display:none !important; }
.abh2-right .default-currency .border{ border:0 !important; }
/* two-column currency list; active currency (cookie) highlighted by header-nav.js */
.abh2-right .currency-menu{ left:auto; right:0; min-width:230px; padding:6px 0; column-count:2; column-gap:0; }
.abh2-right .currency-menu > li{ break-inside:avoid; }
/* 12: no dead gap between the trigger and its menu, plus an invisible bridge over the
   header padding, so moving the pointer down into the list keeps it open */
.abh2-right .dropdown-menu{ margin-top:0; }
.abh2-right .dropdown-menu::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.abh2-right .currency-menu > li > a{ display:block; padding:8px 16px; color:var(--abh2-ink); font-size:13.5px; }
.abh2-right .currency-menu > li > a:hover{ background:#f4f6f8; color:#122531; }
.abh2-right .currency-menu > li > a.abh2-cur-active{ color:var(--abh2-accent); font-weight:700;
  background:color-mix(in srgb, var(--abh2-accent) 10%, #fff); }

/* ---------- left slide-out drawer ------------------------------------------ */
/* visibility is delayed by the slide duration on close so the drawer stays
   on screen while it slides back out (mirrors the open animation); on open it
   turns visible immediately. */
.abh2-drawer-root{ position:fixed; inset:0; z-index:2000; visibility:hidden; transition:visibility 0s linear .42s; }
html.nav-open .abh2-drawer-root{ transition:visibility 0s linear 0s; }
.abh2-scrim{ position:absolute; inset:0; background:rgba(18,20,26,.42); opacity:0;
  transition:opacity .4s ease; cursor:pointer; }
.abh2-drawer{ position:absolute; top:0; bottom:0; left:0; width:var(--abh2-dw); max-width:88%;
  background:#fff; transform:translateX(-100%); transition:transform .42s cubic-bezier(.4,.01,.2,1);
  display:flex; flex-direction:column; box-shadow:24px 0 60px -30px rgba(0,0,0,.55);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  font-family:'Lato',system-ui,-apple-system,Arial,sans-serif; }

html.nav-open .abh2-drawer-root{ visibility:visible; }
html.nav-open .abh2-scrim{ opacity:1; }
html.nav-open .abh2-drawer{ transform:translateX(0); }

.abh2-dtop{ display:flex; align-items:center; justify-content:flex-end; padding:16px 22px 6px; }
.abh2-dlogo img{ height:30px; width:auto; }
/* close "X" sized to visually match the hamburger icon (.abh2-bars is 42x22) */
.abh2-dclose{ background:none; border:0; cursor:pointer; color:#2a2e35; font-size:40px; line-height:1;
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  padding:0; border-radius:6px; }
.abh2-dclose:hover{ background:#f0ece5; color:var(--abh2-accent); }
/* X built from two bars of the burger's size (42px x 3px) so both icons match (client) */
.abh2-x{ position:relative; width:42px; height:22px; display:block; }
.abh2-x i{ position:absolute; left:0; top:9.5px; width:100%; height:3px; background:currentColor; border-radius:2px; }
.abh2-x i:nth-child(1){ transform:rotate(45deg); } .abh2-x i:nth-child(2){ transform:rotate(-45deg); }

/* drawer accent = each brand's footer colour (client); keep in sync with the footer
   backgrounds (alpine: compiled bundle; azure/urban: base.html.twig #footer.abf). */
#alpinebooker .abh2-drawer, #alpinebooker .typeahead.dropdown-menu{ --abh2-accent:#4371b5; }
#azurebooker .abh2-drawer, #azurebooker .typeahead.dropdown-menu{ --abh2-accent:#a87029; }
#urbanbooker .abh2-drawer, #urbanbooker .typeahead.dropdown-menu{ --abh2-accent:#c55a24; }
.abh2-dnav{ display:flex; flex-direction:column; padding:6px 22px 2px; }
/* width is 100% + the two 22px gutters so the row (and its hover fill) spans the
   drawer edge-to-edge; width:100% alone left a 44px gap on the right. */
.abh2-mrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:calc(100% + 44px);
  margin:0 -22px; padding:13px 22px; color:#22262c !important; text-decoration:none; font-size:19px; font-weight:400;
  letter-spacing:.01em; background:none; border:0; border-bottom:1px solid #f0f0ee; cursor:pointer;
  text-align:left; font-family:inherit;
  transition:background .18s ease, color .18s ease, padding .18s ease, box-shadow .18s ease; }
/* Editorial rail + indent: a growing accent bar on the left, a small indent, and a
   full-width accent tint (edge-to-edge — the rows bleed into the nav's 22px gutter
   via the negative margin so the highlight runs to both edges). */
.abh2-mrow:hover{ color:var(--abh2-accent) !important; text-decoration:none; padding-left:32px;
  box-shadow:inset 4px 0 0 var(--abh2-accent);
  background:linear-gradient(90deg, color-mix(in srgb,var(--abh2-accent) 12%,#fff), color-mix(in srgb,var(--abh2-accent) 5%,#fff)); }
.abh2-subtoggle .abh2-chev{ transition:transform .3s; color:#9a948a; }
.abh2-subtoggle:hover .abh2-chev{ color:var(--abh2-accent); }
.abh2-sub.open .abh2-subtoggle .abh2-chev{ transform:rotate(180deg); color:var(--abh2-accent); }
.abh2-submenu{ list-style:none; margin:0; padding:0; max-height:0; overflow:hidden; transition:max-height .4s ease; }
.abh2-sub.open .abh2-submenu{ max-height:60vh; }
.abh2-submenu > li > a{ display:block; padding:9px 0 9px 14px; color:#5c6169 !important; text-decoration:none;
  font-size:14.5px; border-left:2px solid #ececec; margin-left:2px;
  transition:color .16s ease, border-color .16s ease, padding .16s ease; }
.abh2-submenu > li > a:hover{ color:var(--abh2-accent) !important; border-color:var(--abh2-accent); padding-left:22px; }
.abh2-sub-all{ font-weight:600; }

.abh2-dcta{ padding:14px 22px 4px; }
.abh2-club{ display:flex; align-items:center; justify-content:center; width:100%; background:var(--abh2-accent);
  color:#fff !important; text-decoration:none; font-weight:700; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; padding:13px 16px; border-radius:7px; }
.abh2-club:hover{ background:color-mix(in srgb, var(--abh2-accent) 85%, #000); color:#fff !important; text-decoration:none; }
/* same 3px corners as the Search button (client); !important beats the legacy *{border-radius:0 !important} */
.abh2-club{ border-radius:3px !important; }
.abh2-dfoot{ margin-top:auto; border-top:1px solid #f0f0ee; padding:16px 22px 22px; display:flex;
  flex-direction:column; gap:12px; color:#5c6169; font-size:14px; }
.abh2-dfoot a{ color:#2a2e35 !important; text-decoration:none; }
.abh2-dfoot a:hover{ color:var(--abh2-accent) !important; }
.abh2-dfoot .icons8-medal-filled{ color:var(--abh2-accent); margin-right:6px; }

/* ---------- PUSH: shift the whole site right by the drawer width ------------
   #sitePush carries the page; the fixed header and the hero's fixed parallax
   mirror are shifted by the same amount so the background travels WITH the
   content (otherwise the hero bg detaches and a white strip shows on the left).
   All three share the same duration/easing so they move in lockstep. */
/* NOTE: do NOT put `will-change:transform` here unconditionally. On a static
   element it creates a stacking context that persists even when no transform is
   active, which traps the z-index of every Bootstrap modal nested inside
   #sitePush (#newsletterModal etc.) BELOW the body-level .modal-backdrop
   (z-index 1040, appended to <body> outside #sitePush) — the dim overlay then
   paints over the modal and swallows all clicks. Scope the hint to the open
   state instead, so it only applies while the drawer is actually sliding. */
#sitePush{ transition:transform .42s cubic-bezier(.4,.01,.2,1); }
html.nav-open{ overflow:hidden; }
html.nav-open #sitePush{ transform:translateX(var(--abh2-dw)); will-change:transform; }
/* slide the header with the page instead of narrowing it — shrinking the width
   reflowed the merged search over the account links (client). */
.navbar.abh2{ transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, color .3s ease,
  transform .42s cubic-bezier(.4,.01,.2,1); }
html.nav-open .navbar.abh2{ transform:translateX(var(--abh2-dw)); }
/* The hero's parallax mirror is position:fixed and the plugin only moves it
   vertically, so the push can slide the hero out from under it and reveal the
   white page behind. While the menu is open, pin the mirror to the full viewport
   so its video/image always covers the hero wherever the push moves it. */
html.nav-open .parallax-mirror{ left:0 !important; right:auto !important; width:100vw !important; transform:none !important; }

/* ---------- fixed-top clearance (top utility bar + slim main bar) ----------- */
body{ padding-top:calc(var(--abh2-h) + var(--abh2-top-h)) !important; }
/* a page with a hero lets it run up UNDER the transparent header (SLH-style).
   Only >=768: on phones every hero is hidden (hidden-xs), so there the header is
   solid and the body keeps its normal top clearance (see the mobile block below). */
/* hero pages: the hero sits UNDER the fixed header, so drop BOTH the fixed-header padding
   and the legacy 60px body margin (that margin showed as a white band above the hero at
   tablet widths — client). */
@media (min-width: 768px){ body.abh2-has-hero{ padding-top:0 !important; margin-top:0 !important; } }
.abh2.hasNewsBar ~ #sitePush{ /* news bar adds its own height via the bar itself */ }

/* ---------- responsive ------------------------------------------------------ */
@media (max-width: 991px){
  .abh2 .abh2-in{ gap:10px; padding:0 14px; min-height:58px; }
  :root{ --abh2-h:76px; --abh2-top-h:32px; }
  .abh2-menulbl{ display:none; }
  .abh2-logo img{ height:48px; }
  /* Login/Logout: text only on small screens (an icon alone doesn't say which) */
  .abh2-right .abh-acct .abh2-acct-ic{ display:none !important; }
  .abh2-right .abh-acct > a.abh2-acct-link{ padding:0 12px !important; }
  .abh2-right .default-currency{ padding:0 6px !important; }
  /* top bar: drop the sister-brand links, keep the phones compact */
  .abh2-top-in{ padding:0 14px; justify-content:center; }
  .abh2-top-right{ display:none; }
  .abh2-top-left{ gap:16px; }
  .abh2-tel{ font-size:12.5px; }
}
/* <=767: the wide "Valuta: EUR" currency text + the full-size logo overflowed the
   right grid track and slid the account/currency under the centred logo (reported
   overlap). Collapse the currency to just its coins icon (tap opens the list) and
   shrink the logo so burger | logo | account+currency never collide. */
@media (max-width: 767px){
  .abh2 .abh2-in{ gap:8px; padding:0 12px; }
  .abh2-right{ gap:8px; }
  .abh2-logo{ min-width:0; }
  .abh2-logo img{ height:40px; max-width:100%; }
  .abh2-right .default-currency{ font-size:0 !important; padding:0 !important; gap:0 !important;
    width:0 !important; min-width:0 !important; overflow:hidden; }
  .abh2-right .abh2-cur-caret{ display:none; }
}
/* very narrow: hide the whole top bar and reclaim its clearance */
@media (max-width: 480px){
  .abh2-top{ display:none; }
  body{ padding-top:var(--abh2-h) !important; }
  /* hero pages keep this clearance too — on phones the hero is hidden, so the
     header is solid and the content must start below the fixed bar (not under it). */
  /* keep the solid header's logo + account + currency from colliding on narrow
     phones (reported overlap: the logo ran under the account icon / currency). */
  .abh2 .abh2-in{ gap:6px; padding:0 10px; }
  .abh2-right{ gap:6px; }
  .abh2-logo img{ height:32px; }
  /* currency: show only the coins icon (tapping it opens the list); the "EUR" code
     + caret were wide enough that the right group overflowed its track and the
     account icon slid under the centred logo. Collapse the (now text-less) anchor
     to zero width so only the coins icon remains. */
  .abh2-right .default-currency{ font-size:0 !important; padding:0 !important; gap:0 !important;
    width:0 !important; min-width:0 !important; overflow:hidden; }
  .abh2-right .abh2-cur-caret{ display:none; }
}
/* phones: overlay instead of push (don't shove narrow content off-screen) */
@media (max-width: 768px){
  :root{ --abh2-dw: 86%; }
  html.nav-open #sitePush{ transform:none; }
  html.nav-open .navbar.abh2{ transform:none; }
}

/* ---------- phones: no hero is shown (every hero is hidden-xs), yet the body still
   carries .abh2-has-hero — which left the top-of-page header transparent, so the
   white logo/text sat invisibly on the white page and a big gap opened above the
   search. Force the solid header look + readable colours. (reported mobile bug) */
@media (max-width: 767px){
  body.abh2-has-hero .navbar.abh2:not(.abh2-stuck){ --abh2-fg:var(--abh2-ink);
    background:rgba(255,255,255,.97); box-shadow:0 2px 14px rgba(0,0,0,.06);
    -webkit-backdrop-filter:none; backdrop-filter:none; }
  body.abh2-has-hero .navbar.abh2:not(.abh2-stuck)::before{ display:none; }
  body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-right *,
  body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-burger,
  body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-logo .subtitle{ text-shadow:none !important; }
  .abh2-right .currency-header-menu{ gap:0; }
  body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-logo-white{ opacity:0; }
  body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-logo-color{ opacity:1; }
  body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-tel,
  body.abh2-has-hero .navbar.abh2:not(.abh2-stuck) .abh2-sibling{ color:var(--abh2-ink) !important; text-shadow:none; }
  /* legacy body margin-top (old fixed-header spacer) shows as dead space on phones
     where the hero is hidden; the new header clears via padding-top instead. */
  body{ margin-top:0 !important; }
  /* no hero → drop the hero-positioning margin that left a big white gap above search.
     `body` prefix raises specificity above the `<=991` `.jumbo-search-top.main-page`
     rule (22vh) that is declared later in this file. */
  body .jumbo-search-top.main-page{ margin-top:14px !important; }
  /* "Advanced search" toggle is white for over-hero; make it readable on the white page */
  .jumbo-search-top .abk-adv-toggle{ color:#1f5fa6 !important; text-shadow:none !important; }
}

@media (prefers-reduced-motion: reduce){
  #sitePush, .abh2-drawer, .abh2-scrim, .abh2-submenu, .abh2-chev, .navbar.abh2{ transition:none !important; }
}

/* ---------- homepage hero: full-bleed cover video, search + title over it -----
   We bypass the jQuery parallax plugin: its fixed .parallax-mirror repositioned
   every frame (visible "jumping") and clipped the hero to 500px. header-nav.js
   relocates the <video> into the hero as a cover layer and the mirror is hidden,
   so the hero is a stable, viewport-tall background that scales like the mockup. */
.jumbo.parallax-window-home{ position:relative !important; height:100vh !important;
  max-height:none !important; overflow:hidden;
  background:linear-gradient(135deg,#2e4a66 0%, #6d7f8e 55%, #b9a99a 100%); }
.jumbo-parallax, .jumbo-dark-overlay{ height:auto !important; max-height:none !important; }
.abh2-hero-video{ position:absolute; inset:0; width:100% !important; height:100%; object-fit:cover;
  z-index:0; pointer-events:none; opacity:0; transition:opacity .6s ease; }
.abh2-hero-video.abh2-video-on{ opacity:1; }
/* soft dark overlay so the white search/title read over any footage */
.jumbo.parallax-window-home::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.10) 42%, rgba(0,0,0,.34)); }
body.abh2-hero-home .parallax-mirror{ display:none !important; }

/* search floated ~1/3 down the hero (+50px), title centred below it */
.jumbo-search-top.main-page{ margin-top:calc(30vh + 50px) !important; z-index:1000; position:relative; }
/* Desktop + tablet: the hero is a tall video/banner in normal flow, so a positive margin
   would drop the search into a white gap BELOW it. Take the search OUT of flow and OVERLAY
   it ~30vh down the hero (anchored to the relative <body>); the content then follows right
   after the hero. Phones (<=767) keep their own banner positioning (search pulled over it). */
@media (min-width:768px){
  .jumbo-search-top.main-page{ position:absolute !important; top:30vh; left:0; right:0; margin:0 !important; }
}
/* laptop/desktop: nudge the hero search (+ title) 100px lower on the tall video (client) */
@media (min-width:992px){ .jumbo-search-top.main-page{ top:calc(30vh + 100px) !important; } }
/* keep the "Advanced search" link reachable while the date/guests dropdown is open:
   the inline widget CSS hides .abk-adv-row on .dgopen; instead float it into the
   top-right corner of the expanded search so you can switch to advanced (client #18). */
/* hero search keeps the "Advanced search" link under the Search button in the collapsed
   bar (base .abk-adv-row). While a date/guests dropdown is open it moves into the top-right
   corner of the dropdown as a blue link (readable on the white panel); the dropdown stays
   flush to the bar. A slim top strip keeps it clear of the Rooms&Guests / calendar headings. */
.jumbo-search-top.main-page .abk-search.dgopen:not(.advopen) .abk-dg{ padding-top:22px !important; }
.jumbo-search-top.main-page .abk-search.dgopen:not(.advopen) .abk-adv-row{
  display:flex !important; position:absolute; top:calc(100% + 7px); right:22px; z-index:1250; margin:0; }
.jumbo-search-top.main-page .abk-search.dgopen:not(.advopen) .abk-adv-toggle{
  color:#1f5fa6 !important; text-shadow:none !important; padding:0 !important; line-height:1.2 !important; }

/* STACKED: dates + advanced both open → advanced is glued flush UNDER the dates panel by
   JS (positionAdv sets top:calc(100% + dg-height), kept in sync via ResizeObserver so there
   is no gap even as the dates panel changes size). Hide the now-redundant link and the
   advanced panel's own "Advanced search" title (it is kept when advanced is opened on its
   own). Works for both the hero search and the merged-header search (panels stay absolute,
   so they overlay rather than growing the header grid). */
.abk-search.dgopen.advopen .abk-dg{ padding-top:0 !important; }
.abk-search.dgopen.advopen .abk-adv-row{ display:none !important; }
/* stacked under the dates: drop the panel title, but keep the head row — it now
   carries the Apply filters button (top-right) */
.abk-search.dgopen.advopen .abk-adv .abk-adv-title{ display:none !important; }
.abk-search.dgopen.advopen .abk-adv .abk-adv-head{ justify-content:flex-end; }
/* ONE unified bordered block (client #31 + #32): bar → dates → advanced read as a single
   box framed by the bar's 2px border. The bar loses its bottom border/round + shadow where
   it meets a dropdown; the open panels continue the frame down the left + right; and only the
   LAST visible panel closes it off at the bottom (bottom border + rounded corners). Inter-
   panel drop-shadows are dropped so there's no horizontal seam; outer depth stays on the bar
   (sides) + the last panel (bottom). */
.abk-search.dgopen .abk-bar,
.abk-search.advopen .abk-bar{ border-bottom-color:transparent !important; border-radius:3px 3px 0 0 !important; box-shadow:none !important; }
.abk-search.dgopen .abk-dg,
.abk-search.advopen .abk-adv{ border-left:2px solid #a6acb4 !important; border-right:2px solid #a6acb4 !important; }
.abk-search.dgopen:not(.advopen) .abk-dg,
.abk-search.advopen .abk-adv{ border-bottom:2px solid #a6acb4 !important; border-radius:0 0 3px 3px !important; }
/* stacked: the dates panel is NOT the last block → no bottom frame/round + no shadow seam */
.abk-search.dgopen.advopen .abk-dg{ border-bottom:0 !important; border-radius:0 !important; box-shadow:none !important; }
/* the advanced panel's drop-shadow (0 24px 60px — blur > offset) also bled UPWARD onto the
   dates panel, drawing a line between the two blocks. Drop it in the stack: the 2px frame
   already defines the unified block (client #35). */
.abk-search.dgopen.advopen .abk-adv{ box-shadow:none !important; }
/* homepage hero scroll-down arrow. header-nav.js relocates .scroll-down (which lives
   in the search block by default) ONTO the hero so it pins to the hero's bottom; it
   smooth-scrolls to the first content block (abkScrollDown in header-nav.js).
   Hidden until moved (avoids a flash in the search block), and off on <=991 where the
   hero is a short banner with the search below it. */
.jumbo-search-top.main-page .scroll-down{ display:none !important; }
.jumbo.parallax-window-home .scroll-down{ display:block !important; position:absolute;
  left:50%; bottom:26px; transform:translateX(-50%); margin:0 !important; width:auto; height:auto;
  color:#fff; z-index:5; cursor:pointer; filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));
  animation:abkBob 1.8s ease-in-out infinite; }
.jumbo.parallax-window-home .scroll-down svg{ display:block; }
@keyframes abkBob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,7px); } }
@media (max-width:991px){ .jumbo.parallax-window-home .scroll-down{ display:none !important; } }
/* search block width relative to the grid column (fields shrink proportionally
   because the bar is flex); kept centred so the advanced-search row aligns under it */
.jumbo-search-top.main-page .abk-search{ max-width:93.5%; margin-left:auto; margin-right:auto; }
/* keep the why-book strip + the content below it under the search dropdowns */
.container.top-why-book{ position:relative; z-index:1; padding-top:5px; }
#homepage{ position:relative; z-index:1; }
.jumbo-search-top.main-page .container{ text-align:center; }
.jumbo-search-top.main-page .abh2-hero-title{ clear:both; width:100%; margin:calc(22vh - 40px) 0 0; }
.jumbo-search-top.main-page .abh2-hero-title h1.jumbo-more-content-heading{
  margin:0; color:#fff; font-weight:400; font-size:47px; line-height:1.1;
  font-family:Georgia,'Times New Roman',serif; letter-spacing:.01em;
  text-shadow:0 2px 20px rgba(0,0,0,.55); }
.jumbo-search-top.main-page .scroll-down{ clear:both; margin-top:28px; }
@media (max-width: 991px){
  .jumbo.parallax-window-home{ height:min(70vh, 560px) !important; }
  /* tablet hero is a shorter banner (<=560px), so raise the search + title to sit within it
     (the desktop 30vh + 22vh offsets pushed them to the hero bottom / below it — client). */
  .jumbo-search-top.main-page{ top:23vh !important; margin:0 !important; }
  .jumbo-search-top.main-page .abh2-hero-title{ margin:6vh 0 0 !important; }
  .jumbo-search-top.main-page .abh2-hero-title h1.jumbo-more-content-heading{ font-size:34px; }
}

/* ---------- Destination hero (country / city / area) ------------------------
   Tall static banner image with the title + search centred over it, matching the
   /hotels landing. Replaces the old short (450px) parallax hero. The banner is
   desktop-only (hidden-xs); the search wrapper (.jumbo-search-top) stays on every
   viewport, exactly like /hotels. */
.abh2-dest-hero{ position:relative; }
.abh2-dest-hero .jumbo-img{ display:block; width:100%; height:auto; }
/* soft dark scrim so the white title/search read over a bright hero */
.abh2-dest-scrim{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.08) 42%, rgba(0,0,0,.42)); }
.jumbo-search-top.abh2-dest-search{ z-index:3; }
.jumbo-search-top.abh2-dest-search .container{ text-align:center; }
.jumbo-search-top.abh2-dest-search .abk-search{ max-width:93.5%; margin-left:auto; margin-right:auto; }
.jumbo-search-top.abh2-dest-search .jumbo-more-content-heading{ margin:0 0 22px; font-weight:400;
  line-height:1.1; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.55); }
/* desktop intro copy below the hero (SEO; it used to live in the old hero) */
.abh2-dest-intro{ margin:22px 0 4px; font-size:16px; line-height:1.65; color:#444; }
.abh2-dest-intro p{ margin:0 0 10px; }

/* ---------- destination hero ON MOBILE --------------------------------------
   The banner <img> is hidden-xs, so phones showed a plain white top. Client wants
   the destination image as a background behind the search, like desktop. Un-hide
   the hero as a fixed-height band (image cropped to cover) and pull the search
   card up to sit over it — the same "search floats over the banner" look. Covers
   the country/city/area pages (.abh2-dest-hero) AND the /hotels index, which uses
   a different shell (#destinations + a plain .jumbo-search-top sibling). */
@media (max-width: 767px){
  /* margin-top:-18px pulls the banner flush under the header: the body clears the
     fixed header with 76px padding but the mobile header is only 58px tall, which
     otherwise left an ~18px white strip above the image (client). */
  .abh2-dest-hero,
  #destinations{ display:block !important; position:relative; height:300px; overflow:hidden; margin-top:-18px; }
  .abh2-dest-hero .jumbo-img,
  #destinations .jumbo-img{ height:100% !important; width:100% !important; object-fit:cover; }
  .abh2-dest-scrim{ display:block; }
  .jumbo-search-top.abh2-dest-search,
  #destinations + .jumbo-search-top{ position:relative; margin-top:-240px !important; z-index:3; }
  /* the Advanced-search toggle sits over the banner here, so keep it white — the
     generic mobile rule forces it blue for the white homepage. */
  .jumbo-search-top.abh2-dest-search .abk-adv-toggle,
  #destinations + .jumbo-search-top .abk-adv-toggle{ color:#fff !important; text-shadow:0 1px 6px rgba(0,0,0,.5) !important; }
}

/* ---------- homepage hero (video) ON MOBILE ---------------------------------
   Same idea as the destination hero, but the homepage hero is the parallax video.
   It is hidden-xs, so phones showed a plain white top. Show it as a 300px band
   with the clip covering it (header-nav.js wires the <video> src from the hero's
   data-hero-video on mobile) and pull the search card over it. If the clip can't
   autoplay, the hero's gradient background stays as the fallback. */
@media (max-width: 767px){
  .jumbo.parallax-window-home{ display:block !important; position:relative;
    height:300px !important; min-height:0 !important; max-height:300px !important;
    overflow:hidden; margin-top:-18px; }
  .jumbo.parallax-window-home .abh2-hero-video{ position:absolute; inset:0;
    width:100% !important; height:100% !important; object-fit:cover; }
  body .jumbo-search-top.main-page{ position:relative; z-index:3; margin-top:-240px !important; }
  .jumbo-search-top.main-page .abk-adv-toggle{ color:#fff !important; text-shadow:0 1px 6px rgba(0,0,0,.5) !important; }
  /* no scroll-down arrow on the short 300px mobile hero */
  .jumbo-search-top.main-page .scroll-down{ display:none !important; }
  /* widen the hero search to full container width (~+45px vs the old 93.5%) so the
     Advanced-search dropdown covers the cards below instead of letting them peek (client #14) */
  .jumbo-search-top.main-page .abk-search{ max-width:100% !important; }
}

/* ---------- Search button — deep maroon (client reference) ----------------- */
/* all button-links get the Search button's 3px corners (client); the legacy bundle
   zeroes every radius with `*{border-radius:0 !important}`, hence the !important */
.btn{ border-radius:3px !important; }
.abk-btn, .abk-btn.btn{ background:#9b1c33 !important; border-color:#9b1c33 !important; color:#fff !important; }
.abk-btn:hover, .abk-btn:focus{ background:#85132a !important; border-color:#85132a !important; color:#fff !important; }


/* ---------- hide the Hotjar "Feedback" survey widget --------------------------
   It floated in the middle of the page; hidden per request. Hotjar still loads
   (heatmaps/analytics keep working) — to bring the survey back or reposition it,
   use the survey's settings in the Hotjar dashboard. Class hashes change per
   survey, so match the stable `hj-survey-` prefix. */
div[class*="hj-survey-"]{ display:none !important; }

/* ---------- search results header: keep "Show Map" out of the filters --------
   The .search-results-list-view ("Show Map") button used to be position:absolute
   with a hard-coded offset inside .search-num-results, so with longer titles or
   several filter chips (dates + guests + children) the chips ran underneath it.
   Lay the header out as a flex row instead: title on the left, the button pinned
   to the right of that row, and the filter chips on their own full-width line
   below. No overlap at any width; wraps cleanly on narrow screens. */
.search-num-results{ display:flex; flex-wrap:wrap; align-items:center; column-gap:16px; }
.search-num-results > h2{ flex:1 1 auto; margin:0; }
.search-num-results > .search-results-list-view{
  position:static; left:auto; right:auto; top:auto; order:2; margin-left:auto; flex:0 0 auto; }
.search-num-results > .search-filters{ flex:1 0 100%; order:3; margin-top:8px; }

/* ---------- handwriting font utility ----------------------------------------
   Caveat (loaded in base.html.twig) is the house handwriting face. Apply it
   anywhere with this class instead of repeating inline font-family rules. */
.font-handwriting{ font-family:'Caveat', cursive; }

/* ---------- hotel names: blue + Playfair Display regular (client round 3) -----
   Names render via two unshared wrappers (.hotelBlockContentHeading on homepage
   teasers, .block-hotel-heading/.hotel-name on result/grid/destination cards).
   Scoped to #alpinebooker so Azure/Urban keep their own brand colours. The
   font-weight:400 overrides the legacy <b>/bold so names are Playfair regular. */
#alpinebooker .hotelBlockContentHeading a:link,
#alpinebooker .hotelBlockContentHeading a:visited,
#alpinebooker .block-hotel-heading a:link,
#alpinebooker .block-hotel-heading a:visited,
#alpinebooker a.hotel-name{
  color:#4371B5;
  font-family:'Playfair Display', serif;
  font-weight:400;
}
#alpinebooker .hotelBlockContentHeading a b,
#alpinebooker .block-hotel-heading a b{ font-weight:400; }
#alpinebooker .hotelBlockContentHeading a:hover,
#alpinebooker .block-hotel-heading a:hover,
#alpinebooker a.hotel-name:hover{ color:#355a90 !important; }

/* ---------- photo tier/label badges: transparent, white outlined, Playfair ----
   Shared look for the inline teaser badge + the label_badge.html.twig partial +
   the new "Adults Only" left badge. The markup carries these classes now. */
.abk-photo-badge{
  display:inline-block; background:transparent !important; color:#fff;
  font-family:'Lato', sans-serif; font-weight:700; letter-spacing:.04em;
  white-space:nowrap; border-radius:0;
  /* single soft shadow for legibility over photos — the old double shadow +
     text-stroke read as a harsh/dark halo (client feedback). */
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}

/* ---------- homepage: search MERGES into the header row on scroll -------------
   header-nav.js relocates #abkSearch into .abh2-in (burger | search | account)
   and sets .abh2-merged on the nav once scrolled past the hero. The logo floats
   to the top-centre and grows; the search sits on the lower line so they never
   overlap (client mockup #24). Desktop only (JS skips it at <=991px). */
.abk-dock-spacer{ display:none; }

/* 3-column grid: burger (left) | search (true centre) | account (right). Items
   bottom-aligned; the logo floats absolutely on the top-centre ABOVE the search
   so the two never overlap. */
.navbar.abh2.abh2-merged .abh2-bar{ min-height:106px; } /* 10px less top space (client) */
.navbar.abh2.abh2-merged .abh2-in{ display:grid; grid-template-columns:1fr auto 1fr;
  align-items:end; gap:16px; min-height:106px; padding-bottom:14px; }
.navbar.abh2.abh2-merged .abh2-left{ grid-column:1; justify-self:start; padding-bottom:2px; }
.navbar.abh2.abh2-merged #abkSearch.abk-in-header{ grid-column:2; justify-self:center;
  position:relative; top:auto; margin:0; width:min(814px, 62vw); max-width:814px;
  transform:translateY(-2px); } /* relative so the dropdowns/adv panel anchor under the bar (client) */
.navbar.abh2.abh2-merged .abh2-right{ grid-column:3; justify-self:end; padding-bottom:4px; }
/* no gray divider under the utility bar in the merged header (client) */
.navbar.abh2.abh2-merged .abh2-top{ border-bottom-color:transparent; }
/* logo: raised to the top-centre; 20% smaller than before + lowered (client).
   Kept at +11px (not the full +15) so the subtitle clears the raised search bar. */
.navbar.abh2.abh2-merged .abh2-logo{ position:absolute; left:50%; top:11px;
  transform:translateX(-50%); justify-self:auto; z-index:5; }
.navbar.abh2.abh2-merged .abh2-logo img{ height:53px; }
/* Advanced-search in the merged header (client): show the toggle, but float it
   ABSOLUTELY just below the bar (right-aligned, under the Search button) so it never
   changes the bar height — that height change was the old "search jumps" bug, which
   is why this used to be hidden. It drops out while a date/advanced panel is open
   (the panel takes that space). The panel .abk-adv is absolute top:100% of the now
   position:relative #abkSearch, so it opens directly under the bar. */
/* merged header: NO standalone Advanced-search link in the collapsed bar (client #28) —
   unlike the hero, which keeps it under the Search button. It appears only while a
   date/guests dropdown is open, in the dropdown's top-right (same as the hero). */
#abkSearch.abk-in-header .abk-adv-row{ display:none; }
.navbar.abh2.abh2-merged #abkSearch.abk-in-header.dgopen:not(.advopen) .abk-adv-row{
  display:flex !important; position:absolute; top:calc(100% + 7px); right:22px; margin:0; z-index:1250; }
.navbar.abh2.abh2-merged #abkSearch.abk-in-header.dgopen:not(.advopen) .abk-dg{ padding-top:22px !important; }
.navbar.abh2.abh2-merged #abkSearch.abk-in-header.dgopen:not(.advopen) .abk-adv-toggle{
  color:#1f5fa6 !important; text-shadow:none !important; padding:0 !important; line-height:1.2 !important; }
/* compress the search pill while merged (shorter fields) so it sits cleanly on
   the lower line under the logo and reads as the slimmer bar the client wants. */
.navbar.abh2.abh2-merged #abkSearch .abk-bar{ padding:3px; box-shadow:none; } /* no shadow when merged; the base search over the hero keeps it (client) */
.navbar.abh2.abh2-merged #abkSearch .abk-seg{ padding:3px 12px; }
.navbar.abh2.abh2-merged #abkSearch .abk-lab{ line-height:1.1; margin:0 0 1px; }
.navbar.abh2.abh2-merged #abkSearch .abk-input{ line-height:1.15; }
.navbar.abh2.abh2-merged #abkSearch .abk-btn,
.navbar.abh2.abh2-merged #abkSearch .topSearchSubmit{ padding-top:0; padding-bottom:0; }
/* merged dropdown: month-nav buttons 50% smaller + far less calendar side padding
   so the two months widen and don't look cramped (client, image #26). */
.navbar.abh2.abh2-merged #abkSearch .abk-cal-nav{ width:34px; height:34px; font-size:22px; }
.navbar.abh2.abh2-merged #abkSearch .abk-cal-head{ gap:0; } /* drop the 10px gap (client #28) */
.navbar.abh2.abh2-merged #abkSearch .abk-dg-cal{ padding-left:18px; padding-right:18px; }
/* pull the month arrows inward off the panel edges / guests block, and (via the
   cal padding above) indent "Select your dates" so it isn't flush left (client #27). */
.navbar.abh2.abh2-merged #abkSearch .abk-cal-head > .abk-cal-nav:first-child{ margin-left:16px; }
.navbar.abh2.abh2-merged #abkSearch .abk-cal-head > .abk-cal-nav:last-child{ margin-right:16px; }
/* once scrolled, collapse "My Account" to just its icon (users recognise it) to
   free horizontal room for the search (client note). Currency stays as is. */
.navbar.abh2.abh2-merged .abh2-right .abh-acct > a.abh2-acct-link{ gap:4px; }
.navbar.abh2.abh2-merged .abh2-right .abh-acct .abh2-acct-ic{ display:none !important; }

@media (max-width:1180px){
  .navbar.abh2.abh2-merged #abkSearch.abk-in-header{ width:min(616px, 55vw); }
  .navbar.abh2.abh2-merged .abh2-logo img{ height:48px; }
}

/* ---------- homepage hotel teasers: SLH-style image cards (client) ------------
   Scoped to #homepage so the shared block_main_hotel partial is unchanged on the
   hotel page. The name + location are lifted onto the photo over a bottom gradient;
   the description blurb is dropped. Hover: photo ~10% lighter + a white frame. */
/* gap below the full-viewport hero so the first content row doesn't touch it */
#homepage{ margin-top:46px; }
#homepage .hotelBlock{ position:relative; overflow:hidden; }
#homepage .hotelBlock > a:first-child{ display:block; }
#homepage .hotelBlock > a:first-child img{ display:block; width:100%; height:auto;
  transition:filter .3s ease; }
#homepage .hotelBlock:hover > a:first-child img{ filter:brightness(1.1); }
/* white inner frame on hover — drawn as an overlay (::after) ABOVE the photo; a
   box-shadow/border on .hotelBlock itself sits behind the full-bleed <img>. */
#homepage .hotelBlock::after{ content:""; position:absolute; inset:11px; z-index:3;
  pointer-events:none; border:1px solid rgba(255,255,255,0); transition:border-color .2s ease; }
#homepage .hotelBlock:hover::after{ border-color:#fff; }
/* tier / Adults Only badges sit in the corner; pad them clear of the 11px hover frame */
#homepage .hotelBlock .abk-photo-badge{ padding:18px 22px !important; }

#homepage .hotelBlockContent{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:40px 18px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); }
/* neutralise the fixed-height name wrapper (inline height:80px) so it hugs the bottom */
#homepage .hotelBlockContent > div:first-child{ height:auto !important; overflow:visible !important; }
#homepage .hotelBlockContentHeading{ padding-top:0; }
#homepage .hotelBlockContentHeading a,
#homepage .hotelBlockContentHeading a:link,
#homepage .hotelBlockContentHeading a:visited,
#homepage .hotelBlockContentHeading a b{ color:#fff !important; font-weight:400; }
#homepage .hotelBlockContentHeading a:hover{ color:#fff !important; text-decoration:underline; }
#homepage .hotelBlockAreInfo,
#homepage .hotelBlockAreInfo a,
#homepage .hotelBlockAreInfo a:link,
#homepage .hotelBlockAreInfo a:visited{ color:rgba(255,255,255,.9) !important; }
#homepage .hotelBlockAreInfo a:hover{ color:#fff !important; }
/* SLH card = photo + name + location only: hide the blurb and hidden icon row */
#homepage .hotelBlockFeatures,
#homepage .hotelBlockContentFeaturesLeft{ display:none !important; }

/* ---------- Exclusive Offers: three image link-cards at the page bottom --------
   Script heading flanked by rules, then 3 cover-photo cards with centred titles.
   Same hover-lighten as the hotel photos; links are placeholders (#) for now. */
.abk-offers{ margin:54px 0 16px; }
/* the footer's legacy 100px top margin left a big blank band under the offers (client) */
body:has(.abk-offers) #footer.abf{ margin-top:0; }
.abk-offers-head{ display:flex; align-items:center; gap:24px; margin:0 0 30px; }
.abk-offers-head::before, .abk-offers-head::after{ content:""; flex:1 1 auto; height:1px;
  background:rgba(0,0,0,.18); }
.abk-offers-head span{ flex:0 0 auto; font-size:44px; line-height:1; color:#a98a5c; }
.abk-offer-card{ position:relative; display:flex; align-items:center; justify-content:center;
  height:260px; margin-bottom:24px; overflow:hidden; text-align:center;
  background-size:cover; background-position:center; text-decoration:none;
  transition:filter .3s ease, box-shadow .3s ease; }
.abk-offer-card::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.30); }
.abk-offer-card:hover{ filter:brightness(1.1); box-shadow:inset 0 0 0 3px #fff; }
.abk-offer-card:link, .abk-offer-card:visited, .abk-offer-card:hover{ text-decoration:none; }
.abk-offer-title{ position:relative; z-index:1; color:#fff; font-family:'Playfair Display', serif;
  font-weight:400; font-size:30px; letter-spacing:.01em; text-shadow:0 2px 14px rgba(0,0,0,.55); }
@media (max-width:767px){
  .abk-offers-head span{ font-size:34px; }
  .abk-offer-card{ height:200px; }
}

/* ---------- homepage "Pick Your Next Destination" (AlpineBooker: static grid) --
   script.js skips the slick carousel for siteId 1 and adds .home-country-static:
   all 4 countries in one row, 2x2 on phones (client: carousel hid some). */
.home-country-container.home-country-static{ display:flex; flex-wrap:wrap; justify-content:space-around; }
.home-country-container.home-country-static .home-country-menu{ flex:1 1 25%; width:auto; min-width:0; }
@media (max-width: 600px){
  .home-country-container.home-country-static .home-country-menu{ flex-basis:50%; margin:14px 0; }
  .home-country-container.home-country-static .home-country-menu-icon{ font-size:80px; }
}

/* ---------- homepage phones (client round 5) ---------------------------------
   (1) "The Luxury Ski Hotel Collection" title is hidden-xs and rendered after the
       search; on phones show it ABOVE the search, inside the video band.
   (2) hotel cards: name + location stay overlaid on the photo, the blurb is added
       under the photo. .hotelBlockContent becomes display:contents so its name row
       can share the photo's grid cell while the blurb takes a row below it. */
@media (max-width: 767px){
  .jumbo-search-top.main-page .container{ display:flex; flex-direction:column; }
  .jumbo-search-top.main-page .abh2-hero-title.hidden-xs{ display:block !important; order:-1;
    margin:0 0 16px !important; padding:0 18px; }
  .jumbo-search-top.main-page .abh2-hero-title h1.jumbo-more-content-heading{ font-size:24px; line-height:1.25;
    text-shadow:0 2px 12px rgba(0,0,0,.6); }
  /* the <=991 tablet rule offsets the search with top:23vh; a relative offset doesn't
     move what follows, so on phones the hotel cards started ~170px UNDER the search
     ("Advanced search" sat on a hotel photo). Place it with the margin only: title in
     the lower part of the 300px video band, search card floating on the band's edge. */
  body .jumbo-search-top.main-page{ top:auto !important; margin-top:-182px !important; }
  /* darken the band's lower half so the white title reads on bright snow */
  .jumbo.parallax-window-home::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 60%); }
  /* "Advanced search" now sits on the white page under the card, not over a photo */
  .jumbo-search-top.main-page .abk-adv-toggle{ color:#1f5fa6 !important; text-shadow:none !important; }
  .jumbo-search-top.main-page .abk-adv-row{ margin-top:10px; }
  #homepage{ margin-top:18px !important; }
  .abh2-right .abh-acct > a.abh2-acct-link{ font-size:15px; }

  #homepage .hotelBlock{ display:grid; grid-template-columns:100%; }
  #homepage .hotelBlock > a:first-child{ grid-area:1 / 1; }
  #homepage .hotelBlock > .clear{ display:none; }
  #homepage .hotelBlockContent{ display:contents; }
  #homepage .hotelBlockContent > div:first-child{ grid-area:1 / 1; align-self:end; position:relative; z-index:2;
    padding:40px 18px 14px; background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); }
  #homepage .hotelBlockContent > .clear{ display:none; }
  #homepage .hotelBlockFeatures{ display:block !important; padding:12px 15px 4px; color:#333; text-align:left; }
  #homepage .hotelBlockFeatures > div:first-child{ height:auto !important; }
  #homepage .hotelBlockFeatures p{ margin:0 0 8px; }
}

/* ---------- search preloader (#searchingModal, base.html.twig) -----------------
   Square box centred in the visible viewport instead of Bootstrap's wide
   top-anchored dialog (client round 5). */
#searchingModal .modal-dialog{ position:fixed; top:50%; left:50%; margin:0 !important; /* beats the legacy JS inline margin-top */
  width:240px; max-width:calc(100vw - 32px); transform:translate(-50%,-50%) !important; }
#searchingModal .modal-content{ aspect-ratio:1 / 1; display:flex; align-items:center; justify-content:center;
  border-radius:3px; }
#searchingModal .modal-body{ padding:20px !important; }
#searchingModal .modal-body img{ margin:0 0 14px !important; width:56px !important; }
#searchingModal .modal-body p{ margin:0; font-size:14px; line-height:1.45; }

/* USP band on phones (/search shows it on xs): compact stacked rows */
@media (max-width: 767px){
  .container.top-why-book{ padding-top:6px; padding-bottom:4px; }
  .container.top-why-book .row > div,
  .container.top-why-book .row > div *{ line-height:30px !important; }
  .container.top-why-book span{ font-size:14px !important; }
  .container.top-why-book i{ font-size:20px !important; }
}

/* destination label is longer now ("Enter destination or hotel"): keep it on one
   line (ellipsis) so the compact merged-header search doesn't grow a second row */
.abk-seg.abk-dest .abk-lab{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- destination hero (country/area/city): no overlaps at any width ----
   The search used to be absolutely placed at a fixed margin-top (272/222/100px)
   while the banner's height scales with the width (~0.29 x vw), so the search and
   its "Advanced search" link spilled onto the USP band / breadcrumbs at
   768-1400px (client round 5). Now hero + search share one grid cell: the cell is
   as tall as the taller of the two, the image covers it, the search sits at the
   bottom. Phones keep their own band rules (<=767 block above). */
@media (min-width: 768px){
  .abh2-dest-wrap{ display:grid; }
  /* .jumbo = country/area/city .abh2-dest-hero or the /hotels #destinations banner */
  .abh2-dest-wrap > .jumbo,
  .abh2-dest-wrap > .jumbo-search-top{ grid-area:1 / 1; }
  .abh2-dest-wrap > .jumbo{ height:auto !important; min-height:0 !important; }
  .abh2-dest-wrap > .jumbo .jumbo-img{ height:100% !important; object-fit:cover; }
  .abh2-dest-wrap > .jumbo-search-top{ position:relative !important; top:auto;
    margin:0 !important; align-self:end;
    padding:calc(var(--abh2-h) + var(--abh2-top-h) + 30px) 0 34px; }  /* clear the fixed header */
}

/* "Why book with …" check bullets: plain black on every brand (client) — the compiled
   bundle tints them per brand (#4371B5 / #FF1200 / #ff6600). */
#alpinebooker .why-book-with-us i,
#azurebooker .why-book-with-us i,
#urbanbooker .why-book-with-us i{ color:#000; }

/* USP band ("Best Rates Guaranteed …"): black on every brand — the per-brand tints in
   the compiled bundle no longer match the logos (client). */
#alpinebooker .top-why-book i, #alpinebooker .top-why-book span,
#azurebooker .top-why-book i, #azurebooker .top-why-book span,
#urbanbooker .top-why-book i, #urbanbooker .top-why-book span{ color:#000; }

/* homepage hotel cards (mobile): outlined "View hotel" button under the blurb — thin
   maroon line (= the Search button colour), black text (client). Hidden elsewhere,
   since block_main_hotel is shared. */
.abk-view-hotel{ display:none; }
@media (max-width: 767px){
  #homepage .abk-view-hotel{ display:block; margin:6px 0 10px; padding:10px 16px; text-align:center;
    border:1px solid #9b1c33; background:transparent; color:#000 !important; font-size:15px;
    letter-spacing:.03em; text-decoration:none; }
  #homepage .abk-view-hotel:hover{ background:#9b1c33; color:#fff !important; text-decoration:none; }
}

/* ---------- search autocomplete: active row in the footer colour, white icon --
   --abh2-accent on .typeahead is set per brand next to the drawer accent. */
body .typeahead.dropdown-menu > li.active > a,
body .typeahead.dropdown-menu > li > a:hover{ background:var(--abh2-accent) !important; color:#fff !important; }
body .typeahead.dropdown-menu > li.active .abk-ac-ic,
body .typeahead.dropdown-menu > li > a:hover .abk-ac-ic{ color:#fff !important; }

/* 13: bigger mobile logo (client: "barely readable"). The logo is 4.7:1, so 36px is
   ~170px wide: clear of the burger and of "Login"/"Logout" + currency at 375px. */
@media (max-width: 767px){ .abh2-logo img{ height:50px; } }
@media (max-width: 480px){ .abh2-logo img{ height:36px; } }
@media (max-width: 359px){ .abh2-logo img{ height:30px; } }

/* 18: the legacy "SHOW MAP" marker next to "N hotels found" (mobile style.css forced
   it visible with display:contents) — the MAP toggle replaces it */
.search-results-list-view{ display:none !important; }

/* 22: Lato is the text face (Playfair for headings, Caveat for the handwriting
   accents); the compiled bundles still set Montserrat on body and the phone block */
body, div.tel-number p, div.tel-number a, .right-cr{ font-family:'Lato', system-ui, -apple-system, Arial, sans-serif; }

/* 23: the reservation request ran full-bleed against the left edge */
#new-reservation{ max-width:1170px; margin-left:auto; margin-right:auto; padding-left:15px; padding-right:15px; }

/* 24: request notifications without the green / red boxes (coloured text stays) */
#new-reservation .alert, .alert.flash-message{ background:transparent !important; border-color:transparent !important;
  box-shadow:none !important; padding-left:0; padding-right:0; }

/* Oct-28: hotel teaser — the Book Direct / Reservation Request button and the price are pinned
   absolute to the card bottom; reserve room under the text so a long description isn't covered */
@media (min-width: 768px){ .block-hotel-left-col-container{ padding-bottom:60px; } }