/* Hestehave Madhus – public site.
   Deep forest green, warm cream and tan, with the gold logo (assets/img/logo.png) on a dark-green,
   curved top bar. (This was the «Hjalte» design; the site has had a single design since 2026-11-03.) */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --linen: #F7F1E6;
  --paper: #FFFDF8;
  --tint: #EFE6D5;
  --sand: #D9AE6E;
  --gold: #C9A063;
  --gold-deep: #8A6012;
  --tan: #D9AE6E;
  --tan-light: #E8C78F;
  --cream: #F4EEE2;
  --forest: #1E3A2B;
  --forest-deep: #152A1F;
  --sage: #A3B18A;
  --ink: #2B2B28;
  --muted: #5C5B54;
  --line: #E2D6C0;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --label: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(43, 43, 40, .05), 0 8px 28px rgba(43, 43, 40, .07);
  --footer-text: #DCD8CB;
  --footer-muted: #B9B5A8;
  --hero-shade: 18, 28, 20;  /* RGB of the darkening over top photos */
  --curve-shade: 12, 22, 16; /* RGB of the shadow under the curved top bar */
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--forest); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-deep); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

h1, h2, h3 { font-family: var(--serif); font-weight: 420; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; color: var(--forest-deep); font-variation-settings: "SOFT" 50, "opsz" 72; }
h1 { font-size: clamp(2.4rem, 2rem + 3.2vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 1.5rem + 1.6vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 1.2rem + .5vw, 1.6rem); }
p { margin: 0 0 1em; }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { max-width: 760px; margin-inline: auto; }
.center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--forest); color: #fff; padding: .6rem 1rem; border-radius: 8px; }
.skip-link:focus { top: 12px; }

/* Small uppercase label with a gold rule, like the lines around "madhus" in the logo. */
.eyebrow {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--label); font-size: .8rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 1rem;
}
.eyebrow::before { content: ""; width: 2.5rem; height: 2px; background: var(--gold); flex: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 46px; padding: .7rem 1.4rem; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--label); font-size: .85rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; line-height: 1.2; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn .icon { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: #1F1A10; }
.btn-gold:hover { background: var(--sand); color: #1F1A10; }
.btn-green { background: var(--forest); color: #fff; }
.btn-green:hover { background: var(--forest-deep); color: #fff; }
.btn-outline { border-color: var(--forest); color: var(--forest); }
.btn-outline:hover { background: var(--forest); color: #fff; }
.btn-outline-light { border-color: var(--sand); color: var(--linen); }
.btn-outline-light:hover { background: var(--sand); color: var(--ink); }
.btn-large { min-height: 54px; padding: .9rem 1.8rem; font-size: .9rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--label); font-size: .82rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--forest); text-decoration: none;
}
.link-arrow .icon { width: 18px; height: 18px; transition: transform .2s; }
a:hover .link-arrow .icon, a.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow.back:hover .icon { transform: translateX(-4px); }

/* ---------- Header & menu ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 2rem; min-height: var(--header-h); }
.logo { flex: none; display: block; padding: 6px 0; }
.logo img { height: 50px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 1.15rem; list-style: none; margin: 0; padding: 0; }
.nav-list a, .lang-switch a {
  position: relative; display: block; padding: .5rem 0;
  font-family: var(--label); font-size: .86rem; font-weight: 450; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.nav-list a[aria-current="page"] { color: var(--forest); }
.nav-extra { display: flex; align-items: center; gap: 1.2rem; }
/* DK / EN: both shown, the current language underlined in gold. */
.lang-switch { display: flex; align-items: center; gap: .35rem; }
.lang-switch a { color: var(--muted); }
.lang-switch a:hover { color: var(--forest); }
.lang-switch a[aria-current] { color: var(--forest-deep); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold); }
.lang-sep { color: var(--line); font-family: var(--label); }

.menu-toggle {
  display: none; margin-left: auto; align-items: center; gap: .6rem;
  min-height: 44px; padding: .4rem .2rem .4rem .8rem; background: none; border: 0; cursor: pointer;
  font-family: var(--label); font-size: .82rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--forest-deep);
}
.menu-toggle-bars { position: relative; width: 26px; height: 18px; }
.menu-toggle-bars span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s, opacity .2s, top .3s; }
.menu-toggle-bars span:nth-child(1) { top: 0; }
.menu-toggle-bars span:nth-child(2) { top: 8px; }
.menu-toggle-bars span:nth-child(3) { top: 16px; }
.menu-open .menu-toggle-bars span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.menu-open .menu-toggle-bars span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle-bars span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* Smaller computer screens: same top menu, just tighter, so all items fit down to 1100px. */
@media (max-width: 1439px) {
  .header-inner { gap: 1.25rem; }
  .logo img { height: 44px; }
  .main-nav { gap: 1rem; }
  .nav-list { gap: .95rem; }
  .nav-list a, .lang-switch a { font-size: .8rem; letter-spacing: .06em; }
}
@media (max-width: 1199px) {
  .header-inner { gap: 1rem; }
  .logo img { height: 40px; }
  .nav-list { gap: .8rem; }
  .nav-list a, .lang-switch a { font-size: .76rem; letter-spacing: .05em; }
}

/* Phones and tablets (touch screens) – and very narrow browser windows – get the hamburger menu. */
@media (max-width: 1099px), (hover: none) and (pointer: coarse) {
  :root { --header-h: 68px; }
  /* backdrop-filter would make the fixed menu position itself inside the header instead of the screen. */
  .site-header { backdrop-filter: none; background: var(--paper); }
  .header-inner { gap: 2rem; }
  .logo img { height: 44px; }
  .menu-toggle { display: inline-flex; }
  .main-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 40;
    flex-direction: column; align-items: stretch; justify-content: space-between; gap: 2rem;
    padding: 1.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
    background: var(--linen); overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity .25s, transform .25s, visibility 0s .25s;
  }
  .menu-open .main-nav { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li { border-bottom: 1px solid var(--line); }
  .nav-list a {
    padding: 1rem 0; font-family: var(--serif); font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 400;
    letter-spacing: 0; text-transform: none; color: var(--forest-deep);
  }
  .nav-list a::after { bottom: .7rem; right: auto; width: 2.5rem; }
  .nav-extra { flex-direction: column-reverse; align-items: stretch; gap: 1rem; }
  .lang-switch { justify-content: center; gap: .8rem; padding: .5rem; }
  .lang-switch a { font-size: 1rem; padding: .6rem .5rem; }
  body.menu-open { overflow: hidden; }
}

/* Curved bottom edge under the top bar. It hangs over the top of the page. */
.header-curve { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; height: 48px; fill: var(--forest); pointer-events: none; }
@media (max-width: 1099px), (hover: none) and (pointer: coarse) {
  .header-curve { height: 24px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(380px, 58vh, 580px); color: #fff; isolation: isolate; }
.hero-large { min-height: clamp(540px, 86vh, 880px); }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--forest); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; }
.hero-video.is-playing { opacity: 1; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(var(--hero-shade), .78) 0%, rgba(var(--hero-shade), .4) 45%, rgba(var(--hero-shade), .08) 100%),
    linear-gradient(to right, rgba(var(--hero-shade), .35), rgba(var(--hero-shade), 0) 60%);
}
.hero-content { padding-block: 5rem clamp(3rem, 7vw, 5.5rem); }
.hero-large .hero-content { padding-bottom: clamp(5rem, 11vw, 8.5rem); }
.hero h1 { color: #fff; max-width: 15ch; text-wrap: balance; }
.hero .eyebrow { color: var(--sand); }
.hero-intro { max-width: 40rem; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); line-height: 1.55; color: rgba(255, 255, 255, .92); margin-bottom: 1.8rem; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero.hero-plain .btn-outline-light { border-color: var(--forest); color: var(--forest); }
.hero-plain { color: var(--ink); min-height: 0; background: var(--tint); border-bottom: 1px solid var(--line); }
.hero-plain h1 { color: var(--forest-deep); }
.hero-plain .eyebrow { color: var(--gold-deep); }
.hero-plain .hero-intro { color: var(--muted); }

/* ---------- Info strip (front page) ---------- */
.info-strip { position: relative; z-index: 2; margin-top: -3.5rem; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); }
.info-item { display: flex; gap: 1rem; padding: 1.8rem 1.9rem; }
.info-item + .info-item { border-left: 1px solid var(--line); }
.info-item > .icon { width: 28px; height: 28px; flex: none; color: var(--gold); margin-top: .2rem; }
.info-item h2 { font-family: var(--label); font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: .4rem; }
.info-item p { margin: 0; font-size: 1rem; color: var(--muted); }
@media (max-width: 860px) {
  .info-grid { grid-template-columns: 1fr; }
  .info-item + .info-item { border-left: 0; border-top: 1px solid var(--line); }
  .info-item { padding: 1.3rem 1.4rem; }
}

/* ---------- Blocks ---------- */
.block { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.block-tint { background: var(--tint); }
.block-header { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.block-header h2 { margin: 0; text-wrap: balance; }
.block-header.split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; max-width: none; }
.empty-note { font-size: 1.15rem; color: var(--muted); max-width: 42rem; }

/* ---------- Cards ---------- */
.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
  color: inherit; text-decoration: none; transition: transform .3s, box-shadow .3s;
}
a.card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(43, 43, 40, .05), 0 18px 40px rgba(43, 43, 40, .1); color: inherit; }
.card-image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--tint); }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
a.card:hover .card-image img { transform: scale(1.04); }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.6rem; }
.card-body h3 { margin-bottom: .4rem; }
.card-body p { color: var(--muted); font-size: 1.02rem; }
.card-body .link-arrow { margin-top: auto; }
.card-kicker { display: flex; align-items: center; gap: .4rem; font-family: var(--label); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep) !important; margin-bottom: .5rem; }
.card-kicker .icon { width: 16px; height: 16px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 1000px) {
  /* Five services: three on the first row, two wider ones below. */
  .service-grid.count-5 { grid-template-columns: repeat(6, 1fr); }
  .service-grid.count-5 > :nth-child(-n+3) { grid-column: span 2; }
  .service-grid.count-5 > :nth-child(n+4) { grid-column: span 3; }
  .service-grid.count-5 > :nth-child(n+4) .card-image { aspect-ratio: 16 / 9; }
  .service-grid.count-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Content sections ---------- */
.content-section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.content-section + .content-section { padding-top: 0; }
.content-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.content-section:not(.has-image) .content-grid { max-width: 46rem; }
.content-section.has-image .content-grid { grid-template-columns: 1fr 1fr; }
.content-section.image-right .content-image { order: 2; }
.content-image { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); }
.content-image img { width: 100%; height: 100%; object-fit: cover; }
.content-text h2::before { content: ""; display: block; width: 2.5rem; height: 2px; background: var(--gold); margin-bottom: 1.1rem; }
@media (max-width: 860px) {
  .content-section.has-image .content-grid { grid-template-columns: 1fr; }
  .content-section.image-right .content-image { order: 0; }
}

.prose > :last-child { margin-bottom: 0; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 0; margin: 0 0 1em; list-style: none; }
.prose li { position: relative; padding-left: 1.7rem; margin-bottom: .45em; }
.prose ul > li::before { content: ""; position: absolute; left: .3rem; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.prose ol { counter-reset: step; }
.prose ol > li { counter-increment: step; padding-left: 2.4rem; }
.prose ol > li::before {
  content: counter(step); position: absolute; left: 0; top: .1em;
  width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--forest); color: var(--sand); font-family: var(--label); font-size: .85rem; font-weight: 500;
}

/* ---------- Courses ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.course-card { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.course-image { aspect-ratio: 16 / 10; overflow: hidden; }
.course-image img { width: 100%; height: 100%; object-fit: cover; }
.course-body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 1.6rem 1.5rem 1.6rem; }
.course-body > p:last-child { margin: auto 0 0; padding-top: .6rem; }
.course-date {
  position: absolute; top: -2.2rem; right: 1.4rem;
  width: 4.4rem; height: 4.4rem; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: var(--forest); color: var(--sand); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); border: 3px solid var(--paper);
}
.course-card:not(:has(.course-image)) .course-date { position: static; margin-bottom: 1rem; }
.course-day { font-family: var(--serif); font-size: 1.6rem; line-height: 1; }
.course-month { font-family: var(--label); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.course-body h3 { padding-right: 4.5rem; }
.course-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .95rem; color: var(--muted); }
.course-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.course-meta .icon { width: 17px; height: 17px; color: var(--gold-deep); }
.course-body .prose { font-size: 1.02rem; margin-bottom: .8rem; }

/* ---------- Recipe ---------- */
.recipe-grid { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; margin-top: 1.5rem; }
.recipe-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem 1.7rem; }
.recipe-aside h2, .recipe-method h2 { font-size: 1.6rem; }
.recipe-facts { display: flex; gap: 1.8rem; margin: 0 0 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.recipe-facts dt { font-family: var(--label); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.recipe-facts dd { margin: 0; font-weight: 600; }
.ingredients { list-style: none; margin: 0; padding: 0; }
.ingredients li { padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.ingredients li:last-child { border-bottom: 0; }
@media (max-width: 860px) {
  .recipe-grid { grid-template-columns: 1fr; }
  .recipe-aside { position: static; }
}

/* ---------- Contact ---------- */
.contact-card { display: grid; gap: .2rem; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: .8rem; }
.contact-line { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.1rem; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 1.15rem; overflow-wrap: anywhere; }
a.contact-line:hover { background: var(--tint); color: var(--forest); }
.contact-line .icon { width: 26px; height: 26px; flex: none; color: var(--gold); margin-top: .15rem; }
.contact-line small { display: block; font-family: var(--label); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.social-row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }

.order-embed { min-height: 400px; }
.order-embed iframe { width: 100%; border: 0; min-height: 700px; }

/* A video on a page: small and uncropped. */
.page-video video { display: block; width: 100%; max-width: 800px; margin-inline: auto; border-radius: var(--radius); background: #000; }

/* ---------- CTA band & footer ---------- */
.cta-band { background: var(--forest); color: var(--linen); padding-block: clamp(3rem, 6vw, 4.5rem); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; }
.cta-band h2 { color: var(--linen); margin: 0; max-width: 22ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.site-footer { background: var(--forest-deep); color: var(--footer-text); padding-top: clamp(2.5rem, 5vw, 3.5rem); font-size: 1.05rem; }
.site-footer a { color: var(--footer-text); text-decoration: none; transition: color .15s; }
.site-footer a:hover, .site-footer a[aria-current="page"] { color: var(--tan); }
/* Columns between two thin rules: logo (or, instead of it, the pages ticked «Vis i bunden af siden»), contact, hours, social media. */
.footer-main { border-top: 1px solid rgba(217, 174, 110, .3); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1.7fr 1.4fr .8fr; gap: 2.5rem; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 1200px) {
  .footer-grid:not(:has(> .footer-brand)) { grid-template-columns: 1fr 1.6fr 1.7fr .8fr; } /* «Sider» needs less room than the logo */
}
.footer-brand img { width: 210px; margin-bottom: 1.1rem; }
.footer-brand p { max-width: 22rem; }
.footer-heading { font-family: var(--label); font-size: 1.5rem; font-weight: 600; letter-spacing: .01em; color: var(--cream); margin: 0 0 1.3rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; letter-spacing: .04em; }
.footer-contact a { display: inline-grid; grid-template-columns: 1.4rem 1fr; gap: .7rem; align-items: start; overflow-wrap: break-word; min-width: 0; }
.footer-contact .icon { width: 1.3rem; height: 1.3rem; margin-top: .1rem; color: var(--tan); }
/* A picture used as a shape, so it takes the same tan colour as the drawn icons. */
.icon-crown { display: block; background: currentColor; -webkit-mask: url("../img/icon-crown.png") center / contain no-repeat; mask: url("../img/icon-crown.png") center / contain no-repeat; }
.footer-text { margin: 0; letter-spacing: .04em; line-height: 1.75; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding-block: 1.4rem; border-top: 1px solid rgba(217, 174, 110, .55); font-size: .9rem; color: var(--footer-muted); }
.footer-credit { margin-left: auto; } /* lower right corner */
@media (max-width: 1199px) {
  /* The logo gets its own row; the «Sider» column stays in the row. The email address needs the widest column. */
  .footer-grid { grid-template-columns: .9fr 1.6fr 1.3fr .9fr; }
  .footer-grid:has(> .footer-brand) { grid-template-columns: 1.6fr 1.3fr .9fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .footer-grid, .footer-grid:has(> .footer-brand) { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer-grid, .footer-grid:has(> .footer-brand) { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* The opening dates in the footer: the next two with a link, or (the editor's choice) all of them in two columns. */
.footer-hours-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem; font-family: var(--label); font-size: .82rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--tan) !important; }
.footer-hours-link .icon { width: 16px; height: 16px; }
.footer-hours-link:hover { color: var(--tan-light) !important; }
.footer-hours-all { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.6rem; letter-spacing: .04em; line-height: 1.75; }
.footer-hours-all li { break-inside: avoid; }
.footer-hours-year { color: var(--cream); font-weight: 600; }
.footer-grid.hours-all { grid-template-columns: 1.1fr 1.4fr 2.1fr .8fr; }
@media (max-width: 1199px) {
  .footer-grid.hours-all { grid-template-columns: .8fr 1.4fr 1.9fr .8fr; }
  .footer-grid.hours-all:has(> .footer-brand) { grid-template-columns: 1.4fr 1.9fr .8fr; }
}
@media (max-width: 860px) {
  .footer-grid.hours-all, .footer-grid.hours-all:has(> .footer-brand) { grid-template-columns: 1fr 1fr; }
  .footer-hours-wide { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-grid.hours-all, .footer-grid.hours-all:has(> .footer-brand) { grid-template-columns: 1fr; }
}

/* ---------- Dark-green top bar: these come last so they win over the base header rules above ---------- */
.site-header { background: var(--forest); border-bottom: 0; backdrop-filter: none; }
.header-inner { position: relative; z-index: 1; }
/* A soft shadow along the curved edge, so the top bar looks lifted above the page.
   The blur is no larger than the offset, so the shadow never shows above the edge inside the bar. */
.header-curve { filter: drop-shadow(0 6px 6px rgba(var(--curve-shade), .34)) drop-shadow(0 2px 2px rgba(var(--curve-shade), .2)); }
.nav-list a { color: var(--cream); }
.nav-list a::after { background: var(--tan); }
.nav-list a:hover, .nav-list a[aria-current="page"] { color: #fff; }
.lang-switch a { color: rgba(244, 238, 226, .65); }
.lang-switch a:hover { color: var(--cream); }
.lang-switch a[aria-current] { color: var(--cream); box-shadow: inset 0 -2px 0 var(--tan); }
.lang-sep { color: rgba(244, 238, 226, .3); }
.menu-toggle { color: var(--cream); }

/* Phones and tablets: the full-screen menu is dark green too (same query as the menu block above). */
@media (max-width: 1099px), (hover: none) and (pointer: coarse) {
  .site-header { background: var(--forest); }
  .main-nav { background: var(--forest); }
  .nav-list li { border-bottom-color: rgba(244, 238, 226, .14); }
  .nav-list a { color: var(--cream); }
}

/* ---------- Buttons ---------- */
.btn-gold { background: var(--tan); color: #1F1A10; }
.btn-gold:hover { background: var(--tan-light); color: #1F1A10; }
.btn-outline-light { border-color: var(--tan); }
.btn-outline-light:hover { background: var(--tan); color: #1F1A10; }

/* ---------- Accents ---------- */
.eyebrow::before, .content-text h2::before { background: var(--tan); }
.hero .eyebrow { color: var(--tan-light); }
.hero-plain .eyebrow { color: var(--forest); }
.info-item > .icon, .contact-line .icon { color: var(--gold); }
.course-date { color: var(--tan-light); }

/* ---------- Lukket hjemmeside: only the «kommer snart» picture (templates/gate.php) ---------- */
.gate-body { margin: 0; min-height: 100vh; background: #0D1A13; overflow: hidden; }
.gate { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; }
/* The space around the picture: a blurred, darkened copy of it. */
.gate::before { content: ""; position: absolute; inset: -60px; background: url("../img/kommer-snart-blur.jpg?v=2") center / cover no-repeat; filter: blur(28px) brightness(.5); }
/* The whole picture always fits; positions inside the frame are percentages of the picture. */
.gate-frame { position: relative; width: min(100vw, calc(100vh * 1447 / 1087)); width: min(100vw, calc(100dvh * 1447 / 1087)); aspect-ratio: 1447 / 1087; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.gate-frame img { display: block; width: 100%; height: 100%; }
/* The first «r» in «rødder» (x 498–550, y 566–640 of 1447 × 1087). */
.gate-r { position: absolute; left: 34.42%; top: 52.07%; width: 3.59%; height: 6.81%; border-radius: 6px; cursor: pointer; }
.gate-r:focus-visible { outline: 3px solid var(--tan); outline-offset: 2px; }
/* On small screens the r is tiny: an invisible tap area of at least 40px around it. */
.gate-r::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 40px); height: max(100%, 40px); transform: translate(-50%, -50%); }
.gate-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 10; width: min(92vw, 400px); border: 0; border-radius: 18px; padding: 2rem 1.8rem; background: var(--paper); color: var(--ink, #2B2B28); box-shadow: 0 24px 70px rgba(0, 0, 0, .45); }
.gate-dialog::backdrop { background: rgba(10, 20, 14, .65); }
.gate-dialog h1 { font-size: 1.9rem; margin: 0 0 .4rem; color: var(--forest); }
.gate-dialog p { margin: 0 0 .6rem; }
.gate-error { color: #8B2A1A; font-weight: 600; }
.gate-form input { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: .75rem .9rem; margin: .4rem 0 1.2rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.gate-form input:focus { outline: 3px solid var(--tan); outline-offset: 1px; border-color: var(--forest); }
.gate-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* The floating theme switcher. Switched off for now: see THEME_SWITCHER in includes/public.php. */
.theme-switcher { display: none; position: fixed; left: 14px; bottom: 14px; z-index: 40; gap: 2px; padding: 4px; border-radius: 999px; background: var(--paper); box-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.js .theme-switcher { display: flex; }
body:has(.theme-switcher) .site-footer { padding-bottom: 3.6rem; } /* so the switcher never covers the © line */
body.menu-open .theme-switcher { display: none; }
.theme-switcher button { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; padding: .2rem .7rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-family: var(--label); font-size: .78rem; font-weight: 500; letter-spacing: .04em; cursor: pointer; }
.theme-switcher button:hover { background: var(--tint); }
.theme-switcher button[aria-pressed="true"] { background: var(--tint); font-weight: 600; }
.theme-switcher button:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }
.theme-dot { width: 12px; height: 12px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}