/* Hallmark · shape: kept (Letter swapped: the page has no first-person voice and a redesign keeps the words) · genre: editorial · theme: Atelier (deal 1/3, seed small-city-hotel-copenhagen-3ed9·2b2be8df·2026-10-30·r0) · redesign: full · draw: 08f017
 * hero: full-bleed photo over a split head · nav: masthead · footer: statement · imagery: photographs (the user's own) · signature: the hotel's own corner, full width, receding on scroll
 * axes: light/roman-serif/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S3 R5 V4 · weakest: S, a fictional hotel with no photos of its own; led with a real Copenhagen street and the real prices instead of stock rooms */
/* Hallmark · dropped .card-image · three empty grey rectangles (81) with no picture behind them */
/* Hallmark · reworded "kl. 7–10" to "kl. 7 til 10" · 19 names the dash */
/* Hallmark · dropped chat-buttons · the user asked for suggestions as bubbles inside the conversation; chat.js now renders .chat-suggestions in #chat-messages */
/* Hallmark · dropped mailto:kontakt@bitlabhotel.example · the user renamed the hotel to Hotel AGOA; the link is now mailto:kontakt@hotelagoa.example */

/* Hotel AGOA, stylesheet til hotellets hjemmeside.
   tokens.css: alle farver, skrifter og afstande som variabler (--color-*, --space-* osv.).
   base.css: grundregler for hele siden (body, overskrifter, fokus-ring, mobil-afstande).
   Denne fil: én blok pr. del af siden. Her bruges kun variabler, aldrig faste farver. */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- Fælles ---------- */

body {
  color: var(--color-ink-2);
  line-height: 1.6;
}

/* Links får en tynd skiferblå understregning */
a {
  text-decoration-color: var(--color-accent);
}

/* Knap: tynd ramme i blæk, fyldes med blæk ved hover */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--space-lg);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  background: transparent;
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.btn:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}

.btn:active {
  transform: translateY(1px);
}

.section {
  padding-block: var(--section-gap-s);
}

.section h2 {
  margin-bottom: var(--space-lg);
}

/* ---------- Prototype-bjælke ---------- */

/* Lille grå tekst helt øverst. Fortæller, at hotellet er fiktivt, uden at være i vejen */
.prototype-note {
  max-width: none;
  padding: var(--space-2xs) var(--gutter);
  font-size: var(--text-xs);
  text-align: center;
  color: var(--color-muted);
  background: var(--color-paper-2);
}

/* ---------- Menu (masthead) ---------- */

.masthead .container {
  display: flex;
  justify-content: center;
  padding-block: var(--space-lg) var(--space-sm);
}

/* Logoet er et billede. Bredden følger skærmen, men holdes mellem 200 og 340 px */
.masthead-brand img {
  width: clamp(200px, 26vw, 340px);
  /* Logoet har hvid baggrund. "multiply" blander billedet med siden, så det hvide
     bliver til sidens papirfarve, og det sorte bliver ved med at være sort */
  mix-blend-mode: multiply;
}

/* Menulinjen. position: sticky + top: 0 betyder: den ruller med siden, indtil den rammer
   toppen af skærmen, og bliver så stående dér. Baggrunden gør, at indholdet ikke skinner igennem */
.masthead-links {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-lg);
  padding: var(--space-sm) var(--gutter);
  font-size: var(--text-sm);
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.masthead-links a {
  text-decoration: none;
}

.masthead-links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
}

/* ---------- Velkomst (hero) ---------- */

/* Fotoet går fra side til side og vises altid helt: bredden er skærmens,
   og højden følger billedets eget format (height: auto i base.css), så intet skæres væk.
   position: relative gør, at teksten kan placeres oven på fotoet */
.hero {
  position: relative;
}

.hero img {
  width: 100%;
}

/* Et mørkt slør over fotoet, kraftigst i midten bag teksten, så den lyse tekst kan læses */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    color-mix(in oklab, var(--color-ink) 55%, transparent),
    color-mix(in oklab, var(--color-ink) 20%, transparent));
  pointer-events: none;
}

/* Teksten ligger oven på fotoet (og over sløret), centreret */
.hero-text {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: var(--gutter);
  text-align: center;
  color: var(--color-accent-ink);
}

.hero-text h1 {
  color: var(--color-accent-ink);
}

.hero-text .lead {
  margin-block: var(--space-md) var(--space-xl);
}

/* Lys udgave af knappen til mørk baggrund: lys ramme, fyldes lyst ved hover */
.btn-light {
  border-color: var(--color-accent-ink);
  color: var(--color-accent-ink);
}

.btn-light:hover {
  background: var(--color-accent-ink);
  color: var(--color-ink);
}

/* Scroll-animation (kun CSS, ingen JavaScript).
   animation-timeline: view() betyder, at animationen ikke styres af tid, men af hvor
   fotoet er på skærmen. "exit" er det stykke, hvor fotoet forsvinder op over toppen.
   Imens bliver foto og tekst lidt mindre, glider en smule ned og toner ud. Det bliver mindre
   i stedet for større, så hele billedet stadig kan ses undervejs.
   Kun transform og opacity animeres, fordi browseren kan gøre det uden at beregne layoutet igen.
   Browsere, der ikke kender animation-timeline, viser bare fotoet uden animation (@supports). */
@supports (animation-timeline: view()) {
  .hero {
    animation: foto-forsvinder linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
}

@keyframes foto-forsvinder {
  to {
    opacity: 0;
    transform: translateY(15%) scale(0.9);
  }
}

/* Ønsker brugeren mindre bevægelse (indstilling i styresystemet), står fotoet stille */
@media (prefers-reduced-motion: reduce) {
  .hero {
    animation: none;
  }
}

/* ---------- Værelser ---------- */

/* Overskrift til venstre, kort tekst til højre */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-columns);
  align-items: end;
  margin-bottom: var(--space-xl);
}

.section-head h2 {
  margin-bottom: 0;
}

.rooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-columns);
}

/* Kortet ligner et stykke karton: lyst øverst til venstre, en skygge og en tynd indre ramme */
.room {
  position: relative;
  padding: var(--space-xl) var(--space-lg);
  border-radius: 2px;
  background: linear-gradient(160deg, var(--card-lit), var(--color-card) 55%, var(--card-shade));
  box-shadow: var(--shadow-card), inset 1px 1px 0 var(--lit);
}

.room::before {
  content: "";
  position: absolute;
  inset: 0.875rem;
  border: var(--rule-hair) solid var(--color-card-edge);
  pointer-events: none;
}

/* Fotoet af værelset fylder kortets bredde inden for den tynde ramme og beholder sit eget format (ingen beskæring) */
.room img {
  width: 100%;
  margin-bottom: var(--space-lg);
}

.room h3 {
  font-weight: var(--serif-small);
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}

.room p {
  color: var(--color-muted);
}

/* Prisen er det vigtigste på kortet, så den står stort */
.room .price {
  margin-top: var(--space-xl);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-3xl);
  line-height: 1.1;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums; /* alle cifre lige brede, så priserne står pænt */
}

.room .price span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ---------- Faciliteter og praktisk info ---------- */

.info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-columns);
  border-top: var(--rule-hair) solid var(--color-rule);
}

/* Linjeret liste: en mørk streg øverst, tynde streger mellem rækkerne */
.ruled {
  margin: 0;
  border-top: var(--rule-head) solid var(--color-ink);
}

.ruled > div {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.ruled dt {
  font-family: var(--font-display);
  font-weight: var(--serif-small);
  color: var(--color-ink);
}

.ruled dd {
  margin: 0;
}

/* ---------- Footer (kontakt) ---------- */

.footer {
  padding-block: var(--space-3xl) var(--space-xl);
  background: var(--color-paper-2);
  border-top: var(--rule-hair) solid var(--color-rule);
}

/* Adressen er sidens sidste sætning og står stort */
.footer-address {
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-section);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-xl);
  margin-block: var(--space-xl);
}

.footer-note {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ---------- Chat ---------- */

/* Robot-ikonet (SVG). Stregerne får tekstens farve via currentColor */
.robot-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Knappen nederst til højre, der åbner chatten. Mørk og stor, så den er sidens tydeligste knap */
.chat-open {
  position: fixed;
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 60px;
  padding: 0 var(--space-lg) 0 var(--space-md);
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-lg);
  color: var(--color-paper);
  background: var(--color-ink);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.chat-open .robot-icon {
  width: 28px;
  height: 28px;
}

.chat-open:hover {
  background: var(--color-ink-2);
}

/* Selve chatvinduet: stort, med runde hjørner, som chat-widgets på rigtige hotelsider.
   Størrelsen følger skærmen, men bliver højst 420 x 720 px */
.chat {
  --radius-chat: 24px;   /* hjørnerne på vinduet */
  --radius-bubble: 18px; /* hjørnerne på beskederne */
  position: fixed;
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: var(--z-modal);
  width: min(420px, calc(100% - 2 * var(--space-lg))); /* 100% = skærmens bredde uden scrollbar */
  height: min(720px, calc(100svh - 2 * var(--space-lg)));
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-chat);
  overflow: hidden;
  background: var(--color-card);
  box-shadow: var(--shadow-card);
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-sm) var(--space-md) var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

/* Ikon, navn og "Automatisk chatbot, ikke et menneske" side om side */
.chat-identity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-ink);
}

/* Robot-ikonet i en rund ramme, som et profilbillede */
.chat-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: 50%;
}

.chat-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.chat-subtitle {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.chat-close {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-ink);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
}

.chat-close:hover {
  background: var(--color-paper);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
}

/* Intet i beskedområdet må krympe, når der ikke er plads. Så scroller området i stedet.
   (Uden denne regel klemte flexbox valglisten sammen til 0 px, fordi den har overflow: hidden) */
.chat-messages > * {
  flex-shrink: 0;
}

/* Én boble pr. besked. Chatbotten til venstre (lys), gæsten til højre (mørk) */
.chat-msg {
  max-width: 85%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-bubble);
  white-space: pre-wrap;
}

.chat-msg-bot {
  align-self: flex-start;
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.chat-msg-guest {
  align-self: flex-end;
  background: var(--color-ink);
  color: var(--color-paper);
}

/* Tænkeboblen: tre prikker, der blinker efter hinanden */
.chat-typing {
  display: flex;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
}

.chat-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-muted);
  animation: prik 1.2s infinite;
}

.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes prik {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* Forslagene: lyse bobler til højre, ligesom gæstens egne beskeder, så det er tydeligt, at man kan sende dem */
.chat-suggestions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.chat-suggestion {
  max-width: 85%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-bubble);
  text-align: left;
  color: var(--color-ink);
  background: var(--color-paper);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}

.chat-suggestion:hover {
  background: var(--color-paper-3);
}

/* Valglisten, når chatbotten ikke forstod: en ramme på chatbottens side (venstre)
   med én valgmulighed pr. linje og tynde streger imellem, som en menu */
.chat-options {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  width: 85%;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-bubble);
  overflow: hidden;
  background: var(--color-card);
}

.chat-option {
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-align: left;
  color: var(--color-ink);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}

.chat-option:last-child {
  border-bottom: none;
}

.chat-option:hover {
  background: var(--color-paper);
}

.chat-option:active {
  transform: translateY(1px);
}

.chat-suggestion:active,
.chat-open:active {
  transform: translateY(1px);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Oplysningen om, hvad der gemmes (kan lukkes) */
.chat-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0 var(--space-md) var(--space-sm);
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
  border-radius: 14px;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  background: var(--color-paper);
}

.chat-notice p {
  flex: 1;
}

.chat-notice button {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-ink);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}

/* Skrivefeltet: et rundt felt med en rund send-knap inde i højre side */
.chat-form {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 var(--space-md) var(--space-md);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 999px;
  background: var(--color-card);
}

.chat-form:focus-within {
  border-color: var(--color-ink);
}

.chat-form input {
  flex: 1;
  min-width: 0;
  padding: var(--space-sm) 0;
  border: none;
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-md);
}

/* Fokus vises på hele feltet (.chat-form:focus-within) i stedet for på selve input */
.chat-form input:focus-visible {
  outline: none;
}

.chat-form input::placeholder {
  color: var(--color-muted);
}

.chat-send {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  color: var(--color-paper);
  background: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}

.chat-send:hover {
  background: var(--color-ink-2);
}

.chat-send svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Boksen i chatten (engangskode og booking, se scripts/bookingBox.js) ---------- */

/* Boksen har en tynd mørk ramme og runde hjørner som beskederne */
.chat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-bubble);
  background: var(--color-card);
  color: var(--color-ink-2);
}

.chat-card h3 {
  font-size: var(--text-lg);
  font-weight: var(--serif-small);
  color: var(--color-ink);
}

.chat-card form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-sm);
}

.chat-card-label {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.chat-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.chat-card-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.chat-card-summary:empty {
  display: none;
}

.chat-card-error {
  color: var(--color-error);
  font-size: var(--text-sm);
}

.chat-card-error:empty {
  display: none;
}

/* Felt med label over og en streg at skrive på */
.chat-field {
  display: flex;
  flex-direction: column;
  flex: 1 1 8rem;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.chat-field input {
  padding: var(--space-2xs) 0;
  border: none;
  border-bottom: var(--rule-hair) solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-md);
}

/* Knapper i boksen: tynd ramme. Den vigtigste knap og den valgte dato er fyldt med blæk */
.chip {
  min-height: 40px;
  padding: 0 var(--space-sm);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: 999px; /* helt runde ender, som resten af chatten */
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.chip:hover,
.chip-primary,
.chip[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-paper);
}

.chip-primary:hover {
  background: var(--color-ink-2);
}

.chip:active {
  transform: translateY(1px);
}

/* "Send ny kode": ligner et link. Spærret, mens tælleren kører */
.chat-link {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: none;
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  cursor: pointer;
}

.chat-link:disabled {
  color: var(--color-muted);
  text-decoration: none;
}

/* ---------- Tablet og mobil ---------- */

@media (max-width: 60rem) {
  .info {
    grid-template-columns: minmax(0, 1fr);
  }

  /* På smalle skærme er fotoet for lavt til teksten, så den står under fotoet i mørk skrift */
  .hero::after {
    display: none;
  }

  .hero-text {
    position: static;
    padding-block: var(--space-xl);
    color: var(--color-ink-2);
  }

  .hero-text h1 {
    color: var(--color-ink);
  }

  .btn-light {
    border-color: var(--color-ink);
    color: var(--color-ink);
  }

  .btn-light:hover {
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .rooms {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }

  .ruled > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }

  /* Chatten fylder hele skærmen på mobil */
  .chat {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}