/*! Vandmærke · Lavet af Martin Lindhard Lock Rosenkrantz Dall til Kløften 29 */
/* ============================================================
   Kløften 29 – fælles stylesheet
   ============================================================ */

/* Sidebaggrund (bruges på alle sider undtagen index.html) */
.page-bg {
  background-image: url('../images/Baghave2-1600.jpg');
  background-image: image-set(
    url('../images/Baghave2.webp') type('image/webp'),
    url('../images/Baghave2-1600.jpg') type('image/jpeg')
  );
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

/* Glass-panel (frosted look) */
.glass-panel {
  background: rgba(18, 18, 18, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Menu-drawer animation */
.menu-drawer {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.menu-drawer.closed { transform: translateX(120%); }
.menu-drawer.open   { transform: translateX(0); }

/* Submenu collapse/expand */
.submenu-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}
.submenu-container.open {
  max-height: 800px;
  opacity: 1;
  pointer-events: auto;
}

/* Chevron-rotation */
.chevron-icon { transition: transform 0.3s ease; }
.chevron-icon.rotate { transform: rotate(90deg); }

/* ============================================================
   Klassisk scrollbar – synlig, i HØJRE side af skærmen
   ------------------------------------------------------------
   Her stod før "::-webkit-scrollbar { display: none }" sammen med
   scrollbar-width:none. Siden KUNNE scrolle, men der var ingen
   scrollbar at se eller gribe fat i med musen – på en bærbar så
   det ud som om siden ikke kunne rulles.

   Browserens egen scrollbar gøres derfor synlig igen, i sidens
   farver (guld på mørk bund). Den står i højre side, som den
   plejer – der er ingen venstrestillet scrollbar.

   overflow-y: scroll betyder, at pladsen er der på ALLE sider –
   også de korte (404, Om os …). Ellers hoppede indholdet nogle
   få pixels, når man skiftede mellem en kort og en lang side.
   ============================================================ */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(201, 169, 97, 0.55) rgba(255, 255, 255, 0.06);
  scrollbar-width: auto;
}

::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb {
  background: rgba(201, 169, 97, 0.55);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
  min-height: 40px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 169, 97, 0.85);
  background-clip: content-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Performance: defer rendering work for offscreen media without affecting layout or styling
   Må KUN gælde <img>. <picture> og <source> er selv tomme containere, og bliver reglen
   sat på dem, gav contain-intrinsic-size hvert <source>-element en placebo-størrelse
   på 1400x900 px – og rykkede hele siden 900 px ned (billeder + layout fejl). */
img {
  content-visibility: auto;
  contain-intrinsic-size: 1400px 900px;
}

/* Skip-link (tilgængelighed) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Sticky topbar – logo, sprogvalg og menu følger med når der scrolles */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.site-header.is-scrolled {
  background-color: rgba(14, 13, 12, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
/* M. L. L. R. Dall · Kløften 29 · Martin Lindhard Lock  Rosenkrantz Dall */

/* Ankre, skip-links og scrollIntoView må ikke gemme sig under topbaren */
html { scroll-padding-top: 6.5rem; }

/* ============================================================
   Header-knapperne: sprogvalg (DA/EN/DE) og MENU
   ------------------------------------------------------------
   De virkede "fadede": pillen lå i samme lysstyrke som billedet
   bagved (målt 0,040 mod 0,060-0,103), så knapformen forsvandt,
   og MENU stod med vægten "light". De får derfor egne, skarpe
   kanter, løft og mere skriftvægt – stadig gennemsigtige, så de
   følger billedet, men altid til at se som knapper.
   ============================================================ */
.site-header nav[aria-label="Sprogvalg"],
.site-header #menu-btn {
  background-color: rgba(8, 8, 8, 0.62);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.site-header #menu-btn:hover {
  background-color: rgba(30, 27, 23, 0.86);
  border-color: rgba(197, 168, 128, 0.8);
}
/* MENU-teksten var "light" og gik ud i billedet */
.site-header #menu-btn span[data-i18n="menu-label"] {
  color: #ffffff;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.site-header nav[aria-label="Sprogvalg"] .lang-btn {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.site-header nav[aria-label="Sprogvalg"] .lang-btn:not([aria-pressed="true"]) {
  color: rgba(255, 255, 255, 0.85);
}
.site-header nav[aria-label="Sprogvalg"] .lang-btn:not([aria-pressed="true"]):hover {
  color: #ffffff;
}
.site-header nav[aria-label="Sprogvalg"] > span[aria-hidden="true"] {
  color: rgba(255, 255, 255, 0.55);
}

/* "Til toppen"-pil, nederst til højre (oprettes af js/main.js) */
.til-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 35;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 9999px;
  background: rgba(18, 18, 18, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #c5a880;
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.75rem) scale(0.9);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s ease, border-color 0.25s ease;
}
.til-top.vis {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.til-top.vis:hover {
  background: rgba(32, 32, 32, 0.85);
  border-color: rgba(197, 168, 128, 0.55);
  transform: translateY(-2px) scale(1.05);
}
.til-top.vis:active { transform: translateY(1px) scale(0.94); }
.til-top:focus-visible { outline: 2px solid #c5a880; outline-offset: 3px; }
.til-top svg { width: 1.35rem; height: 1.35rem; display: block; }

/* ============================================================
   Dato-felterne: browserens kalender-ikon i guld
   ------------------------------------------------------------
   <input type="date"> tegner sit eget lille kalender-ikon yderst
   til højre. Det er næsten sort og forsvandt mod den mørke bund,
   så man ikke kunne se, at feltet åbner en kalender.

   Her stod før en regel, der SKJULTE ikonet, fordi den gamle
   popup-knap (et ekstra guld-ikon) stod ved siden af. Den knap
   findes ikke længere – kalenderen står fast i formularen – så
   ikonet skal vises igen, bare i husets guld.

   Ikonet er en del af browserens eget UI og kan ikke styles med
   color eller fill, men det kan farves med et filter: invert gør
   det lyst, sepia og saturate giver det guld, og hue-rotate rammer
   tonen #c9a961. ::picker-icon dækker Chrome 125+ direkte.
   ============================================================ */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  filter: invert(78%) sepia(35%) saturate(500%) hue-rotate(2deg) brightness(1.05);
  transition: filter 0.15s ease;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator {
  filter: invert(88%) sepia(45%) saturate(560%) hue-rotate(2deg) brightness(1.12);
}
input[type="date"]:disabled::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Chrome 125+ kan farve ikonet direkte. */
input[type="date"]::picker-icon {
  color: #c9a961;
}

/* ============================================================
   Klassisk månedskalender i bookingformularen
   ------------------------------------------------------------
   Kalenderen stod før som en popup på 296 px, der lagde sig hen
   over udtjekning og prisoversigt. Nu står den fast i formularen:
   to måneder side om side på en bærbar, én på tablet og mobil.
   Hver dag viser nattens pris, så ledighed og pris ses på stedet,
   og lukkede dage er streget over.
   ============================================================ */

.kalender-kort {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.40);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

@media (min-width: 640px) {
  .kalender-kort { padding: 1.25rem; }
}

.kalender-hoved {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.kalender-pil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  color: #c9a961;                       /* mutedGold */
  transition: background-color 120ms, color 120ms;
}
.kalender-pil:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.kalender-pil:focus-visible { outline: 2px solid #c9a961; outline-offset: 1px; }
.kalender-pil[disabled] { opacity: 0.35; cursor: not-allowed; }
.kalender-pil[disabled]:hover { background: transparent; color: #c9a961; }

.kalender-maaneder {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* To måneder side om side kræver plads – ellers vises kun den første. */
@media (min-width: 900px) {
  .kalender-maaneder { grid-template-columns: 1fr 1fr; }
}

.kalender-maaned--ekstra { display: none; }

@media (min-width: 900px) {
  .kalender-maaned--ekstra { display: block; }
}

.kalender-maaned-titel {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: #c9a961;
  text-align: center;
  margin-bottom: 0.5rem;
  text-transform: capitalize;
}

.kalender-ugedage,
.kalender-dage {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
}

.kalender-ugedage {
  margin-bottom: 0.25rem;
}

.kalender-ugedage span {
  padding: 0.25rem 0;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(212, 212, 212, 0.75);
}

/* Dagen: nummer øverst, nattens pris nedenunder. Tydeligt større
   klikflade end de 35 × 32 px popuppen gav.
   background:transparent er vigtig – <button> har ellers browserens
   egen grå bund, og så blev "er-mellem" en mørk plade i stedet for
   et gyldent bånd. */
.kalender-dag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.125rem 0;
  border-radius: 0.5rem;
  background: transparent;
  border: 0;
  font-size: 0.8125rem;
  line-height: 1.1;
  color: #f5f5f4;
  cursor: pointer;
  transition: background-color 120ms, color 120ms;
}

.kalender-dag .d-nr { font-weight: 500; }
.kalender-dag .d-pris {
  font-size: 0.5625rem;
  color: rgba(212, 212, 212, 0.65);
  white-space: nowrap;
}

.kalender-dag:hover:not(.er-ude):not(.er-lukket) { background: rgba(255, 255, 255, 0.10); }
.kalender-dag:focus-visible { outline: 2px solid #c9a961; outline-offset: 1px; }

/* Fortid og lukkede dage kan ikke vælges. */
.kalender-dag.er-ude {
  color: rgba(115, 115, 115, 0.55);
  cursor: not-allowed;
}
.kalender-dag.er-lukket {
  color: rgba(252, 165, 165, 0.60);
  text-decoration: line-through;
  cursor: not-allowed;
}
.kalender-dag.er-lukket .d-pris { text-decoration: none; }

/* I dag markeres svagt, så den er til at finde. */
.kalender-dag.er-i-dag {
  box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.55);
}

/* Airbnb-nætter i lilla, nætter fra andre sider (Booking.com, VRBO …) i gult.
   Det er de dage, der er booket et andet sted — husets egne spærringer og
   godkendte bookinger står i rødt. Farven gør det muligt at se, hvorfor en
   periode er lukket, uden at der afsløres gæstenavne.
   Reglerne står FØR reglerne om den valgte periode, så markeringen af et valgt
   ophold altid vinder over lilla, gul og rød. */
.kalender-dag.er-airbnb {
  color: rgba(196, 181, 253, 0.95);
}
.kalender-dag.er-airbnb .d-pris { color: rgba(196, 181, 253, 0.70); }

.kalender-dag.er-ekstern {
  color: rgba(253, 224, 71, 0.95);
}
.kalender-dag.er-ekstern .d-pris { color: rgba(253, 224, 71, 0.70); }

/* Prikkerne i forklaringen under kalenderen. */
.kalender-prik {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
}
.kalender-prik--lukket { background: rgba(252, 165, 165, 0.70); }
.kalender-prik--airbnb { background: rgba(196, 181, 253, 0.90); }
.kalender-prik--ekstern { background: rgba(250, 204, 21, 0.95); }

/* Den valgte periode: ankomst og udtjekning i guld, nætterne imellem dæmpet.
   Markeringen skal vinde over "lukket": en nat, der ligger inde i den valgte
   periode, må ikke se ud som en fejl i valget – perioden er valgt, og det er
   den, gæsten skal kunne se. Derfor står de to regler sidst, og den
   gennemstregning, "lukket" giver, fjernes inden for perioden. */
.kalender-dag.er-start,
.kalender-dag.er-slut,
.kalender-dag.er-start.er-lukket,
.kalender-dag.er-slut.er-lukket {
  background: #c9a961;
  color: #1c1917;
  font-weight: 600;
  text-decoration: none;
}
.kalender-dag.er-start .d-pris,
.kalender-dag.er-slut .d-pris { color: rgba(28, 25, 23, 0.75); }

.kalender-dag.er-mellem,
.kalender-dag.er-mellem.er-lukket {
  background: rgba(201, 169, 97, 0.30);
  color: #fff;
  text-decoration: none;
}

.kalender-fod {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1rem;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.6875rem;
  color: rgba(212, 212, 212, 0.80);
}

.kalender-hjaelp {
  flex-basis: 100%;
  color: rgba(163, 163, 163, 0.90);
  line-height: 1.35;
}

/* Linjerne i "Overnatninger": én linje pr. sammenhængende periode med
   samme pris i stedet for én pr. nat. På smalle skærme får teksten sin
   egen linje og beløbet sin egen, så intet mases sammen. */
.overnatning-linje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 120ms;
}
.overnatning-linje:hover { background: rgba(255, 255, 255, 0.05); }

.overnatning-periode {
  font-size: 0.875rem;
  font-weight: 300;
  color: #e5e5e5;
  white-space: nowrap;
}

.overnatning-antal {
  font-size: 0.6875rem;
  color: rgba(163, 163, 163, 0.90);
  margin-left: 0.375rem;
  white-space: nowrap;
}

.overnatning-pris {
  font-size: 0.875rem;
  font-weight: 300;
  color: #f5f5f4;
  white-space: nowrap;
  margin-left: auto;
}

/* Prisoversigtens linjer: teksten må gerne ombrydes, men et beløb som
   "4200 kr." må ikke deles over to linjer. På smalle skærme betød det
   ellers, at "kr." røg ned under tallet. */
#price-breakdown .flex.justify-between > span:first-child {
  min-width: 0;
}
#price-breakdown .flex.justify-between > span:last-child {
  white-space: nowrap;
  margin-left: 0.75rem;
  flex-shrink: 0;
}

/* Under 420 px: teksten fylder hele bredden, prisen går på næste linje
   sammen med sæsonmærkatet. Ellers brød "7 overnatninger" midt over. */
@media (max-width: 420px) {
  .overnatning-linje > span:first-child { flex-basis: 100%; }
  .overnatning-linje > span:last-child { width: 100%; justify-content: space-between; }
  .overnatning-pris { margin-left: 0; }
}

/* Reduceret bevægelse */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}