/* Villa Dolce Vita - fixes layered over the original build (there is no source for it).
   Loaded last in <head>. Selectors lead with an id or two classes so they outrank the
   original scoped rules (.x[data-astro-cid-…] = one class + one attribute). */

/* ---- phone menu: keep the header row (logo + button) above the open panel -------------
   The panel is position:fixed; inset:0 at z-index nav+1 and covered its own close button. */
#site-nav.nav--menu-open .nav__inner {
  position: relative;
  z-index: calc(var(--z-nav, 100) + 2);
  color: var(--c-ivory, #f4f1ea);
  opacity: 1;
  transform: none;
  animation: none;
}
#site-nav .nav__burger {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
#site-nav.nav--menu-open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#site-nav.nav--menu-open .nav__burger span:nth-child(2) { opacity: 0; }
#site-nav.nav--menu-open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---- floating "Check Availability" bar: it ran off the right edge on phones ------------- */
@media (max-width: 520px) {
  #sticky-cta .stickycta__name { display: none; }
  #sticky-cta .stickycta__btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
}

/* ---- cookie notice: smaller on phones, and the home hero makes room for it --------------
   A first-time visitor's page carries "vdv-cc" on <html> before anything is drawn (set by the first
   script in the page), and --vdv-cc-room is the notice's height at that screen width, measured
   2026-10-13: 143px under 375, 126px to 640, up to 160px to 899, 94px wider. So the title and button
   start above where the notice will appear instead of jumping up when it does. vdv-fixes.js sets
   --vdv-cc-h to the real height once the notice shows; the larger of the two wins. */
html.vdv-cc { --vdv-cc-room: 94px; }
@media (max-width: 899px) { html.vdv-cc { --vdv-cc-room: 160px; } }
@media (max-width: 640px) { html.vdv-cc { --vdv-cc-room: 126px; } }
@media (max-width: 374px) { html.vdv-cc { --vdv-cc-room: 143px; } }
main .hero .hero__content {
  padding-bottom: calc(clamp(3.5rem, 8vh, 7rem) + max(var(--vdv-cc-h, 0px), var(--vdv-cc-room, 0px)));
}
@media (max-width: 640px) {
  #cookie-consent .cc__inner { padding-block: 0.7rem; gap: 0.6rem; }
  #cookie-consent .cc__text { font-size: 0.74rem; line-height: 1.45; }
  #cookie-consent .cc__btn { padding-block: 0.65rem; }
}

/* ---- home overview facts: two columns need 375px; narrower phones get one ----------------
   Without this the whole page was laid out 375px wide and shrunk to fit. */
@media (max-width: 380px) {
  main .overview .overview__meta { grid-template-columns: minmax(0, 1fr); }
}

/* ---- text for screen readers only ------------------------------------------------------- */
.vdv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- booking page (book-app.js): the parts the original stylesheet has no rules for ------- */
/* Day cells are square and seven to a row, so their size is the calendar's width / 7. A fixed minimum
   height made the row 10px wider than a 390px phone. Give the days room instead by trimming the
   calendar's own padding on phones (37px -> about 40px cells), and make the month buttons 44px. */
.bk-app .bk-cal__navbtn { width: 2.75rem; height: 2.75rem; }
@media (max-width: 560px) {
  .bk-app .bk-cal { padding: 0.85rem 0.5rem; }
  .bk-app .bk-cal__nav { top: 0.6rem; right: 0.5rem; }
  .bk-app .bk-cal__label { padding-left: 0.4rem; line-height: 2.75rem; margin-bottom: 0.4rem; }
}
.bk-app [hidden] { display: none !important; }
.bk-app .vdv-bk-row2 { margin-top: 1.4rem; }
.bk-app .bk-guest > .bk-field,
.bk-app .bk-guest > .vdv-check,
.bk-app .bk-guest > .vdv-extras { margin-top: 1.4rem; }
.bk-app .vdv-select {
  width: 100%;
  color-scheme: dark;
  padding-right: 2.8rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.35rem) 55%, calc(100% - 1rem) 55%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.bk-app .vdv-select option { color: #161412; background: #f4f1ea; }
.bk-app .bk-field__input[aria-invalid="true"],
.bk-app .vdv-check input[aria-invalid="true"] { border-color: #d27878; outline-color: #d27878; }
.bk-app .bk-field__input:focus-visible,
.bk-app .vdv-check input:focus-visible,
.bk-app .vdv-extra input:focus-visible,
.bk-app .vdv-link:focus-visible { outline: 2px solid var(--accent, #c08a58); outline-offset: 2px; }
.bk-app .vdv-field-error { display: block; margin-top: 0.45rem; font-size: 0.8rem; line-height: 1.4; color: #ecb7b7; letter-spacing: 0; text-transform: none; font-weight: 400; }
.bk-app .vdv-check { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.55; color: var(--text-muted, #b6afa2); cursor: pointer; }
.bk-app .vdv-check input,
.bk-app .vdv-extra input { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin: 0.05rem 0 0; accent-color: var(--accent, #c08a58); }
.bk-app .vdv-hp { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
/* seven equal columns that may shrink below their text: on a 320px phone the price under a day
   ("€4.75k") was wider than its cell and pushed the page 5px sideways */
.bk-app .bk-cal__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 350px) {
  .bk-app .bk-cal__price { font-size: 0.56rem; letter-spacing: -0.01em; }
}
.bk-app .vdv-note { margin: 1rem 0 0; font-size: 0.78rem; line-height: 1.6; color: var(--text-muted, #b6afa2); }
.bk-app .vdv-total { display: none; margin: 1.4rem 0 0; font-size: 0.95rem; text-align: right; }
@media (max-width: 1080px) {
  .bk-app .vdv-total:not([hidden]) { display: block; }   /* the price panel has dropped below the button */
}
.bk-app .vdv-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.bk-app .vdv-promo { display: flex; gap: 0.6rem; }
.bk-app .vdv-promo input { flex: 1 1 auto; min-width: 0; }
.bk-app .vdv-promo__apply { flex: 0 0 auto; }
.bk-app .vdv-extras { margin: 1.4rem 0 0; padding: 0; border: 0; min-width: 0; }
.bk-app .vdv-extras legend { padding: 0; margin-bottom: 0.4rem; }
.bk-app .vdv-extra { display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: start; padding: 0.95rem 0; border-top: 1px solid var(--line, rgba(244, 241, 234, 0.14)); cursor: pointer; }
.bk-app .vdv-extra__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.bk-app .vdv-extra__name { font-size: 0.98rem; }
.bk-app .vdv-extra__desc { font-size: 0.8rem; line-height: 1.5; color: var(--text-muted, #b6afa2); }
.bk-app .vdv-extra__price { font-size: 0.85rem; white-space: nowrap; color: var(--text-muted, #b6afa2); }
.bk-app .vdv-fallback { max-width: 40rem; margin: 3rem auto; padding: 0 var(--gutter, 1.4rem); text-align: center; line-height: 1.7; color: var(--text-muted, #b6afa2); }
.bk-app .vdv-fallback a { color: var(--c-ivory, #f4f1ea); }
.bk-app .bk-done:focus { outline: none; }

/* ---- tap targets: controls that were smaller than a fingertip ------------------------------ */
#main .tc__dot { position: relative; }
#main .tc__dot::after { content: ""; position: absolute; inset: -18px -5px; }   /* the dot stays 2px tall; its touch area does not */
#main .tc__nav,
#main .ctl__btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ---- home: pause button for the background video ----------------------------------------- */
.hero .vdv-video-toggle {
  position: absolute;
  right: var(--gutter, 1.4rem);
  bottom: calc(1.2rem + max(var(--vdv-cc-h, 0px), var(--vdv-cc-room, 0px)));
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(244, 241, 234, 0.45);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #f4f1ea;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}
.hero .vdv-video-toggle:hover,
.hero .vdv-video-toggle:focus-visible { opacity: 1; }
.hero .vdv-video-toggle:focus-visible { outline: 2px solid #f4f1ea; outline-offset: 3px; }

/* ---- home: the villa's name is on screen from the first moment ----------------------------
   The title began invisible and faded in over 1.3 s, so the largest thing on the first screen was the
   last to appear. It still rises into place (the site's own hero-rise animation moves it); it just
   no longer starts transparent. The lines under it keep their fade. */
.hero .hero__title { opacity: 1; }

/* ---- suites: the headline's longest word fits on one line on a phone -------------------------
   "UNFORGETTABLE" was wider than a phone screen at the original size, so it broke as "UNFORGETTABL / E"
   (and the headline grew a line a moment after the page appeared, pushing the page down). The size now
   follows the screen width closely enough for the word to fit, from 320px up; wider screens are unchanged. */
@media (max-width: 600px) {
  main .shero .shero__title { font-size: min(calc(1rem + 6vw), calc(9.9vw - 5px)); }
}

/* ---- contact form: note under the dates --------------------------------------------------- */
#enquiry-form .vdv-form-note { margin: 0.6rem 0 0; font-size: 0.85rem; color: #a3402f; }
#enquiry-form .vdv-form-note[hidden] { display: none; }

/* ---- gallery: a filter with no photographs is hidden by vdv-fixes.js -------------------- */
#main .gal-chip[hidden] { display: none !important; }
/* a tile the fade-in animation missed (vdv-fixes.js galleryReveal()); beats the animation's inline style */
#gal-grid .wp-item.vdv-shown { opacity: 1 !important; transform: none !important; transition: opacity 0.8s ease; }

/* ---- home: the villa's photographs in the Overview (release P, vdv-fixes.js snapshots()) --------
   Wide screens: the frame sits in the empty left column under the "Overview" label; the text column
   spans both rows, so the section keeps its height (the frame is at most 430px tall, the text 650+).
   Phones (one column, as the original): under the "Read our story" button, centred. */
@media (min-width: 861px) {
  main .overview .overview__grid { grid-template-rows: auto 1fr; row-gap: 2rem; }
  main .overview .overview__grid > .eyebrow { grid-column: 1; grid-row: 1; }
  main .overview .overview__body { grid-column: 2; grid-row: 1 / span 2; }
  main .overview .vdv-snaps { grid-column: 1; grid-row: 2; }
}
main .overview .vdv-snaps { margin: 0; width: 100%; max-width: 24rem; }
@media (max-width: 860px) {
  main .overview .vdv-snaps { width: min(80%, 22rem); justify-self: center; margin-top: 1.5rem; }
}
.vdv-snaps .vdv-snaps__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-sunk, #1d1a17);
}
.vdv-snaps .vdv-snaps__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.vdv-snaps .vdv-snaps__img.is-on { opacity: 1; }
.vdv-snaps .vdv-snaps__toggle {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(244, 241, 234, 0.45);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #f4f1ea;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.vdv-snaps .vdv-snaps__toggle::before { content: "\275A\275A"; }
.vdv-snaps .vdv-snaps__toggle[aria-pressed="true"]::before { content: "\25B6"; }
.vdv-snaps:hover .vdv-snaps__toggle,
.vdv-snaps .vdv-snaps__toggle:focus-visible { opacity: 1; }
.vdv-snaps .vdv-snaps__toggle:focus-visible { outline: 2px solid #f4f1ea; outline-offset: 3px; }
.vdv-snaps .vdv-snaps__cap { margin-top: 0.4rem; }
.vdv-snaps .vdv-snaps__cap a {
  display: inline-block;
  padding: 0.6rem 0;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: var(--tracking-caps, 0.18em);
  text-transform: uppercase;
  color: var(--text-on-dark-muted, #b6afa2);
  text-decoration: none;
  transition: color 0.3s ease;
}
.vdv-snaps .vdv-snaps__cap a:hover,
.vdv-snaps .vdv-snaps__cap a:focus-visible { color: var(--text-on-dark, #f4f1ea); }
.vdv-snaps .vdv-snaps__cap a:focus-visible { outline: 2px solid #f4f1ea; outline-offset: 3px; }