/* klinik — calm, airy, rounded, serif headings. System fonts only, no external requests. */
:root {
  --primary: #2a7f76;
  --primary-dark: #1b514b;
  --primary-soft: #eaf5f4;
  --on-primary: #ffffff;
  --accent: #2a7f76;
  --bg: #fcfcfb;
  --card: #ffffff;
  --text: #1d2127;
  --muted: #5a626c;
  --line: #e2e5e9;
  --radius: 18px;
  --gutter: 16px;
  /* The column that holds the blocks placing more than one thing — the behandlingsliste, the
     header and the hero. Exactly 56rem (896px) up to 1280, then it opens with the screen:
     1124px at 1920, 1286px at 2560. Capped at 68rem because this family is the calm one; a
     treatment card stops reading as calm once it is half a metre wide. */
  --max: clamp(56rem, 27rem + 34vw, 68rem);
  /* Running text and the praktisk card keep a fixed rem measure on purpose — see the note on
     the fluid root below. They grow with the type, not with the window. */
  --narrow: 40rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary-soft: #1e3836;
    --accent: #66ccc1;
    --bg: #15171b;
    --card: #1e2126;
    --text: #eceef1;
    --muted: #aab1ba;
    --line: #30343b;
  }
}
*, *::before, *::after { box-sizing: border-box; }
/* Fluid root. Every rem below — the serif type ladder, the spacing, the 40rem prose measure —
   rides this single value, so the page grows on a big monitor instead of rendering identically
   at 1280, 1920 and 2560.
     * up to a 1280px-wide viewport it is exactly 1rem, i.e. the visitor's own browser default
       (usually 16px). A phone at 360, a tablet at 768 and a laptop at 1280 therefore render
       exactly what they rendered before this rule existed — to the pixel. 1280 is the width
       the published screenshot on /eksempler/ is taken at and described in.
     * above it the root climbs linearly: 17.44px at 1920 and 18.91px at 2560, where body text
       lands at 20.09px against 17.00px today. This family climbs more gently than haandvaerker
       does — a clinic page is meant to stay quiet.
   rem inside a font-size on the root element means the INITIAL root size, not a circular
   reference, so a visitor who has set a 20px browser default keeps all of that increase.
   Because the whole ladder moves together, the 2.07 h1/body ratio test/family-identity.test.cjs
   pins for this family is unchanged at every width, and a paragraph capped at --narrow keeps
   its ~75-character measure instead of turning into a long thin line. */
html {
  -webkit-text-size-adjust: 100%;
  font-size: clamp(1rem, 0.814rem + 0.23vw, 1.2rem);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: var(--narrow); }
.skip { position: absolute; left: -999px; top: 0; background: var(--primary); color: var(--on-primary); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: var(--gutter); }

/* centred header: brand above a quiet menu */
.top { padding: 1.25rem 0 .75rem; text-align: center; }
.brand { display: inline-flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--text); text-decoration: none; }
.brand-name { font-family: ui-serif, Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 600; letter-spacing: .01em; }
.mark { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: .95rem; }
.top nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; margin-top: .75rem; }
.top nav a { color: var(--muted); text-decoration: none; font-size: .95rem; padding: .3rem 0; }
.top nav a[aria-current="page"] { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--accent); }

/* type */
h1, h2, h3 { font-family: ui-serif, Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.2; margin: 0 0 .7rem; overflow-wrap: anywhere; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
.kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 600; color: var(--accent); margin-bottom: .6rem; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 34rem; margin-left: auto; margin-right: auto; }

/* sections */
section { padding: 2.25rem 0; }
/* The hero is deliberately shorter on a phone: the block under it ("Praktisk") carries the
   opening hours, and on a 390x844 screen those hours have to be on the first screen. */
.hero { text-align: center; padding: 1.5rem 0 1.5rem; background: var(--primary-soft); border-radius: 0 0 var(--radius) var(--radius); }
.hero .actions { margin-top: 1rem; }
@media (min-width: 40rem) { .hero { padding: 3rem 0; } .hero .actions { margin-top: 1.5rem; } }
.page-head { text-align: center; padding-bottom: .5rem; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.btn { display: inline-block; background: var(--primary); color: var(--on-primary); padding: .8rem 1.5rem; border-radius: 999px; font-weight: 600; text-decoration: none; }
.btn:hover { background: var(--primary-dark); }
.link { font-weight: 600; text-underline-offset: .2em; }
.cta { margin-top: 1.5rem; text-align: center; }

/* praktisk: a clinic visitor's first question is "are you open, and how do I reach you" —
   so this block sits directly under the hero, above the treatments, and the hours are set
   at reading size rather than in small print. */
.praktisk { padding: 1rem 0 .5rem; }
.praktisk-kort { padding: 1.15rem var(--gutter) .9rem; }
.praktisk-kort h2 { font-size: 1.25rem; margin-bottom: .45rem; }
.praktisk-kort .contact-list div { padding: .45rem 0; }
.praktisk-kort .contact-list dd { font-size: 1.05rem; font-weight: 600; }
.praktisk-mere { margin: .8rem 0 0; text-align: center; font-size: .95rem; }

/* services: soft cards, two columns when there is room */
.services h2 { text-align: center; }
.list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; }
.list li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.25rem; }
.list h2, .list h3 { margin: 0 0 .3rem; }
.list p { margin: 0; color: var(--muted); }
/* Above 40rem the treatment cards fill the row instead of being pinned to two columns: each
   track is at least 18rem wide and the browser fits as many as the (now fluid) --max allows —
   measured: two columns up to 1480px of viewport, three from 1500px up. Pinning it at two meant
   a one-word treatment name sat in a 620px-wide empty card on a 2560 monitor, which is the same
   "ocean of margin" defect one level down. The 18rem floor is what keeps a brief with real
   treatment descriptions in readable columns; the tracks share what is left over equally. */
@media (min-width: 40rem) { .list { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } }

.about { text-align: center; }
.about p, .prose p { font-size: 1.1rem; }
.prose { padding-top: 1rem; }

/* contact card */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem var(--gutter); }
.card h2 { margin-top: 0; text-align: center; }
.contact-list { margin: 0; display: grid; gap: .25rem; }
.contact-list div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.contact-list div:first-child { border-top: 0; }
.contact-list dt { color: var(--muted); font-size: .95rem; }
.contact-list dd { margin: 0; overflow-wrap: anywhere; }

/* footer */
.foot { text-align: center; padding: 2rem 0 2.5rem; color: var(--muted); font-size: .92rem; border-top: 1px solid var(--line); margin-top: 1rem; }
.foot p { margin: 0 0 .3rem; }
.foot-name { color: var(--text); }
.foot-links { font-size: .92rem; }
.foot-links a { color: var(--accent); font-weight: 600; }
.madeby { font-size: .82rem; }

/* Virksomhedsoplysninger — the practice's own details, on their own page. Sized in rem so
   it rides the fluid root font-size at the top of this file: the card, the key column and
   the reading measure all grow together from 1280 to 2560 instead of sitting in a pinned
   strip. The rows are flex, so the key drops above its value on a phone without a media
   query. The page-head above it is centred like every other head in this family; the list
   itself reads left-aligned, because an address read from the middle is hard work. */
.virksomhed .wrap { max-width: var(--narrow); }
.vo-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem 1.35rem; text-align: left; }
.vo-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0; padding: .75rem 0; border-top: 1px solid var(--line); }
.vo-row:first-child { border-top: 0; }
.vo-key { flex: 0 0 8.5rem; color: var(--muted); font-size: .95rem; }
.vo-val { flex: 1 1 11rem; overflow-wrap: anywhere; }
/* The "not filled in yet" marker, in this family's own calm idiom: a dashed brand-coloured
   frame with the same radius as the cards, so it reads as deliberate rather than broken. */
.udfyldes { display: inline-block; padding: .05rem .6rem; border: 2px dashed var(--primary); border-radius: var(--radius); font-weight: 600; color: var(--muted); }
.vo-note { margin: 1.25rem auto 0; max-width: 34rem; color: var(--muted); font-size: .98rem; text-align: center; }
.vo-note a { color: var(--accent); font-weight: 600; }