/* ══ VIK · CHROME RULES FROM THE LIB SHEET ══════════════════════════
   The one lib rule the site-wide chrome needs while a page does not link
   the lib sheet: the always-visible book pill on pages with no hero
   counter. Interior pages have no counter, so the pill is there from the
   first pixel; the two @media blocks are its narrower steps. Where each
   rule comes from is noted beside this sheet's link in BaseLayout.astro. */
.nav.nav-siempre .nav-book{opacity:1;pointer-events:auto;max-width:14rem;
  margin-left:1.9rem;padding:1.15rem 1.55rem;
  border:1px solid currentColor}
@media (max-width:1250px){
  .nav.nav-siempre .nav-book{padding-top:1.05rem;padding-bottom:1.05rem}
}
@media (max-width:640px){
  .nav.nav-siempre .nav-book{margin-left:.85rem;padding-left:1.1rem;padding-right:1.1rem}
}


/* ══ THE MAP CREDIT, VISIBLE ═════════════════════════════════════════
   The main sheet hides Leaflet's attribution on every .leaf-map
   (opacity 0, no pointer events) and stretches .leaf-map 34px below its
   clipped frame. Neither footer names OpenStreetMap or Esri, and both
   OpenStreetMap's licence and Esri's terms require a visible credit. The
   vendored sheet is never edited; this one loads after it at equal
   specificity, so these rules win the tie. */
.leaf-map .leaflet-control-attribution{opacity:1;pointer-events:auto;
  background:rgba(14,14,12,.72);color:rgba(248,248,240,.5);
  font:9px/1.6 "DM Sans",sans-serif;padding:2px 6px;margin:8px}
.leaf-map .leaflet-control-attribution a{color:inherit;text-decoration:underline}
.leaf-map .leaflet-control-attribution a:hover{color:var(--bone)}
/* The hub anchors its credit bottom-right, which the stretch drops
   outside the frame and the legend bar covers. Re-anchored top-right,
   under the zoom control (74px tall, so 80px clears it), the corner where
   MapSection puts its own credit: every map signs in the same place. */
.leaf-map .leaflet-bottom.leaflet-right{top:80px;bottom:auto}
/* A keyboard-focused place marker shows its label below zoom 14. */
#leafMap.is-far .poi:not(.poi-home):focus-visible .poi-label{opacity:1}

/* ══ THE LOADER CANNOT OUTLIVE THE ENGINE ════════════════════════════
   The loader is a full-screen layer that only the engine takes away. The
   page's noscript rule covers scripting switched off, but not a missing
   bundle, a browser without module scripts or an engine that throws: the
   page would stay blank. This failsafe ends exactly where the engine's
   hidden state does. It lands at 5s; the engine hides the loader within
   1.2s of starting, so it fires only when the engine never ran. Reduced motion
   shortens animation durations but not delays, so it still lands. */
@keyframes vik-loader-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
.loader{animation:vik-loader-failsafe 1ms linear 5s forwards}


/* ══ THE ENQUIRY MESSAGE, WITHOUT ITS DASH ═══════════════════════════
   The lib sheet opens a field's message with an em dash; the site's text
   carries none, so the message stands on its own. */
.enq-msg:before{content:none}

/* ══ A LIST THAT LIES OVER THE STRIP BELOW ═══════════════════════════
   The cover clips what runs past it, and the counter sits on its foot,
   so a list opening downward would be cut off. The engine adds
   .pick-spill to the clipping box while a list is open, and the list
   lies over what follows. The cover's picture carries a grain layer
   twice its size, which the cover alone was holding in, so the picture
   holds it in itself while the cover lets go. */
.pick-spill{overflow:visible}
.pick-spill .hero-media{overflow:hidden}

/* ══ THE LANGUAGE LINKS ══════════════════════════════════════════════
   The bar's picker and the menu's and footer's groups are links, so they
   work without the engine and a crawler can follow them; the main sheet
   styles them as buttons. These rules give the anchors the buttons'
   look. The picker's list sits in .nav-mid, whose link rule it undoes.
   A language whose pages are not built yet has no href: it takes no
   hover tint, the list's row is faded as the main sheet fades a link
   with nothing behind it, and the menu's and footer's keep the colour
   the switched-off buttons had. */
.pick-lang .pick-list a{color:var(--i-55);padding:.7rem .85rem;line-height:inherit;opacity:1;transition:color .25s,background .25s}
.pick-lang .pick-list a[href]:hover,.pick-lang .pick-list a[aria-current]{color:var(--ink);background:#1e1e1e0d}
.pick-lang .pick-list a:not([href]){opacity:.45}
.menu-lang a,.footer-lang a{display:inline-flex;align-items:center;justify-content:center;font-family:"Highway Gothic Expanded","Arial Narrow",sans-serif;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;line-height:1;padding:.55rem .6rem;transition:color .25s}
.menu-lang a{color:var(--i-26)}
.menu-lang a[aria-current]{color:var(--ink)}
.footer-lang a{color:#f8f8f03d}
.footer-lang a[aria-current]{color:#f8f8f0b8}
.pick-lang .pick-list a:not([href]),.menu-lang a:not([href]),.footer-lang a:not([href]){cursor:default}
@media (max-width:1250px){
  .menu-lang a,.footer-lang a{min-height:44px;min-width:44px}
}
@media (max-width:860px){
  .menu-lang a{position:relative;min-height:38px;min-width:42px;padding:.4rem .5rem}
  .menu-lang a:after{content:"";position:absolute;inset:-3px -6px}
}

.ed-read .link + .link{margin-left:2.4rem}

/* The bottom bar's faces never wrap: "2 Adults" stays on one line beside the dates. On a phone the bar is one row,
   Retreat, Arrival, Departure and Book: the sheet's rule hides the third field (its Guests), which on a page of more than
   one house is the Retreat, so the Retreat is shown again and the Guests hidden; the guest count is set on the booking page. */
.bookbar .f .pick-btn,.bookbar .f .date-face{white-space:nowrap}
/* The pickers sit at the date faces' height, so every label and value lines up; their 44px tap area is drawn around them,
   as the dates' is by the input laid over them. */
.bookbar .f .pick-btn{min-height:0;position:relative}
.bookbar .f .pick-btn:after{content:"";position:absolute;inset:-14px -8px}
@media (max-width:560px){
  .bookbar .f.f-retreat{display:flex}
  .bookbar .f.f-guests{display:none}
  .bookbar-row{gap:.75rem}
  .bookbar .pick-btn.is-property{letter-spacing:.12em}
  /* The open list spans the bar, just above it, so a narrow screen never cuts it. */
  .bookbar .f.f-retreat,.bookbar .f-retreat .pick{position:static}
  .bookbar .f-retreat .pick-list{left:var(--pad-x);right:var(--pad-x);min-width:0;bottom:calc(100% + .5rem)}
}
@media (max-width:380px){
  .bookbar-row{gap:.5rem}
  .bookbar .pill{padding:.85rem .9rem}
  .bookbar .pill .arw{display:none}
}

/* A kicker of several sentences (the group's cover): it breaks only between them, each line clear of the next, and on a
   phone it stands one sentence to a line with room before the headline. */
.kicker-lines{flex-wrap:wrap;justify-content:center;column-gap:.5em;row-gap:.7rem;line-height:1.2}
.kicker.kicker-lines .kl{white-space:nowrap;letter-spacing:var(--ls-label)}
@media (max-width:560px){
  .kicker-lines{flex-direction:column;align-items:center;row-gap:.65rem;margin-bottom:1.6rem}
}
