/* Tit is and Buns – Gilleleje
   Farver og typografi samlet her, så de er nemme at justere. */
:root {
  --mork: #241C1D;
  --morkere: #1A1415;
  --fersken: #E8916A;
  --fersken-lys: #F2A584;
  --rust: #A9502B;
  --rust-mork: #8E3F1F;
  --creme: #FBF3E8;
  --rosa: #F6D9C8;
  --sand: #EADBC8;
  --graa-brun: #6B5A4E;
  --display: 'Anton', 'Oswald', 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --tekst: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
section[id] { scroll-margin-top: 126px; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--mork);
  font-family: var(--tekst);
  font-size: 17px;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--rust); }
a:hover { color: #7E3A1E; }
.dark a { color: var(--fersken-lys); }
.dark a:hover { color: var(--creme); }
:focus-visible { outline: 3px solid var(--fersken); outline-offset: 3px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.dark { background: var(--mork); color: var(--creme); }

.eyebrow {
  margin: 0 0 8px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rust);
}
.dark .eyebrow { color: var(--fersken-lys); }
.display {
  margin: 0;
  font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1;
}
h2.display { font-size: clamp(40px, 5.2vw, 72px); }
.lead { margin: 16px 0 0; max-width: 40em; font-size: 19px; }

.btn {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px;
  border-radius: 999px; background: var(--fersken); color: var(--mork) !important;
  font-weight: 700; text-decoration: none;
}
.btn:hover { background: var(--fersken-lys); }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid rgba(251,243,232,0.12); position: sticky; top: 0; z-index: 10; }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--creme) !important; }
.brand img { width: 89px; height: 96px; object-fit: contain; }
.brand-name {
  font-family: var(--display); font-size: 26px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
}
.brand-name small {
  display: block; margin-top: 4px;
  font-family: var(--tekst); font-size: 12px; letter-spacing: 0.18em; color: var(--fersken-lys);
}
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; font-size: 15px; font-weight: 500; }
.main-nav a { text-decoration: none; padding: 10px 0; }
.main-nav .nav-cta {
  padding: 10px 18px; border-radius: 999px; background: var(--fersken); color: var(--mork); font-weight: 700;
}
.main-nav .nav-cta:hover { background: var(--fersken-lys); color: var(--mork); }

/* ---------- Hero ---------- */
.hero { overflow: hidden; }
.hero-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding-top: 72px; }
.hero-text { flex: 1 1 520px; min-width: 0; }
.hero h1 {
  margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase;
  line-height: 0.98; letter-spacing: 0.01em; font-size: clamp(48px, 7.4vw, 104px);
}
.hero h1 span { color: var(--fersken); }
.hero-intro { margin: 24px 0 0; max-width: 34em; font-size: 19px; color: rgba(251,243,232,0.86); }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-logo { flex: 0 1 380px; min-width: 0; display: flex; justify-content: center; }
.hero-logo img { width: 100%; max-width: 380px; height: auto; }
.hero-photo { margin-top: 56px; }
.hero-photo img {
  width: 100%; height: 440px; object-fit: cover; object-position: center 60%; border-radius: 20px 20px 0 0;
}

/* ---------- USP ---------- */
.usp { background: var(--fersken); color: var(--mork); }
.usp .wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 32px;
  padding-top: 28px; padding-bottom: 28px; font-weight: 700; font-size: 16px; line-height: 1.35;
}
.usp-item { display: flex; align-items: center; gap: 12px; }
.usp-item svg { flex: none; }

/* ---------- Burgere ---------- */
.burgers .wrap { padding-top: 96px; padding-bottom: 40px; }
.burger {
  margin-top: 32px; display: flex; flex-wrap: wrap; border-radius: 20px; overflow: hidden;
}
.burger--flip { flex-direction: row-reverse; }
.burger > img { flex: 1 1 420px; min-width: 0; width: 100%; height: auto; min-height: 420px; align-self: stretch; object-fit: cover; }
.burger-body {
  flex: 1 1 420px; min-width: 0; padding: 44px 40px;
  display: flex; flex-direction: column; justify-content: center;
}
.burger-tag { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fersken-lys); }
.burger h3 { margin: 8px 0 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 44px; line-height: 1.05; }
.burger-desc { margin: 16px 0 0; color: rgba(251,243,232,0.86); }
.chips { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(251,243,232,0.35); font-size: 14px; font-weight: 700; }
.price { margin: 20px 0 0; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.price-now { font-family: var(--display); font-size: 40px; line-height: 1; color: var(--fersken); }
.price-before { font-size: 18px; color: rgba(251,243,232,0.6); text-decoration: line-through; }
.price-badge {
  padding: 4px 12px; border-radius: 999px; background: var(--fersken); color: var(--mork);
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.price-note { flex-basis: 100%; font-size: 15px; color: rgba(251,243,232,0.75); }
.price-note strong { color: var(--creme); }

/* ---------- Is ---------- */
.ice { background: var(--rosa); }
.ice .wrap { padding-top: 88px; padding-bottom: 88px; text-align: center; }
.ice-inner { max-width: 720px; margin: 0 auto; }
.ice .eyebrow { color: var(--rust-mork); }
.coming {
  margin: 20px 0 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px;
  border-radius: 999px; background: var(--mork); color: var(--creme);
  font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.coming::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fersken); }
.ice .lead { margin-left: auto; margin-right: auto; }

/* ---------- Strandhotel ---------- */
.about .wrap { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 96px; padding-bottom: 96px; }
.about-quote { flex: 1 1 460px; min-width: 0; margin: 0; font-family: var(--display); text-transform: uppercase; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; }
.about-quote span { color: var(--fersken); }
.about-text { flex: 1 1 420px; min-width: 0; }
.about-text p { margin: 0; font-size: 19px; color: rgba(251,243,232,0.88); }
.about-text .eyebrow { margin-bottom: 8px; font-size: 14px; color: var(--fersken-lys); }
.about-text .about-link { margin-top: 24px; }
.about-link a { font-weight: 700; }

/* ---------- Find os ---------- */
.find .wrap { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 96px; padding-bottom: 96px; }
.find-info { flex: 1 1 380px; min-width: 0; }
.info-list { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; }
.info-list h3 { margin: 0; font-size: 17px; font-weight: 700; }
.info-list p { margin: 4px 0 0; }
.hours { margin: 6px 0 0; display: grid; grid-template-columns: auto auto; justify-content: start; gap: 4px 32px; }
.hours dt, .hours dd { margin: 0; }
.muted { font-size: 15px; color: var(--graa-brun); }
.map {
  flex: 1.3 1 460px; min-width: 0; position: relative; display: block;
  border-radius: 20px; overflow: hidden; border: 1px solid var(--sand); text-decoration: none;
}
.map img { width: 100%; height: 440px; object-fit: cover; object-position: 55% 50%; }
.map span {
  position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; min-height: 48px;
  padding: 0 22px; border-radius: 999px; background: var(--mork); color: var(--creme); font-weight: 700; font-size: 15px;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--morkere); color: rgba(251,243,232,0.8); font-size: 15px; }
.site-footer .wrap {
  display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between;
  padding-top: 48px; padding-bottom: 48px;
}
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-brand img { width: 64px; height: 69px; object-fit: contain; }
.footer-brand p { margin: 0; }
.footer-name { font-family: var(--display); font-size: 20px; text-transform: uppercase; color: var(--creme); letter-spacing: 0.04em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ---------- Mobil ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  section[id] { scroll-margin-top: 82px; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .site-header .wrap { padding-top: 10px; padding-bottom: 10px; flex-wrap: nowrap; }
  .brand img { width: 56px; height: 60px; }
  .brand-name { font-size: 20px; }
  .main-nav a:not(.nav-cta) { display: none; }
  .main-nav .nav-cta { padding: 12px 16px; font-size: 14px; white-space: nowrap; }
  .hero-grid { padding-top: 40px; gap: 24px; }
  .hero h1 { font-size: clamp(40px, 15vw, 64px); }
  .hero-text { flex-basis: 100%; }
  .hero-intro, .lead { font-size: 17px; }
  .hero-logo { flex-basis: 100%; }
  .hero-logo img { max-width: 240px; }
  .hero-photo { margin-top: 32px; }
  .hero-photo img { height: 240px; border-radius: 14px 14px 0 0; }
  .burgers .wrap { padding-top: 64px; padding-bottom: 24px; }
  .burger > img { flex-basis: 100%; height: 260px; min-height: 0; }
  .burger-body { flex-basis: 100%; padding: 28px 22px 32px; }
  .burger h3 { font-size: 34px; }
  .ice .wrap { padding-top: 64px; padding-bottom: 64px; }
  .about .wrap, .find .wrap { padding-top: 64px; padding-bottom: 64px; gap: 32px; }
  .about-quote, .about-text, .find-info, .map { flex-basis: 100%; }
  .about-text p { font-size: 17px; }
  .map img { height: 320px; }
}