/* ═══════════════════════════════════════════════════════════════════
   UTHAI THAI MASSAGE — UDKAST 3, LYST (6. nov. 2026)

   Klinikken ville have en lys side i stedet for den mørkegrønne.
   Farverne er hentet fra deres eget materiale: bordeaux fra uniformerne
   på billederne og guld fra logoet.

   PALETTEN ER "COMMITTED": hvid er luften, bordeaux bærer de store flader
   (trinene, afslutningen og foden) og er knapfarven. Guld bruges kun som
   pynt på bordeaux, aldrig til tekst på hvid (for lav kontrast).

   ⚠️ Baggrunden er hvid med et strejf af bordeaux, ikke cremet. Logoet og
   billederne er cremede nok i forvejen.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;
  --hvid:        oklch(0.995 0.002 20);
  --flade:       oklch(0.972 0.007 20);
  --blaek:       oklch(0.24 0.030 28);
  --daempet:     oklch(0.44 0.030 28);
  --bordeaux:    oklch(0.37 0.115 22);
  --bordeaux-dyb:oklch(0.27 0.080 22);
  --bordeaux-lys:oklch(0.45 0.130 22);
  --guld:        oklch(0.80 0.115 80);
  --paa-bordeaux:oklch(0.97 0.012 40);
  --paa-bordeaux-d:oklch(0.86 0.030 40);
  --linje:       oklch(0.90 0.010 20);

  --r: 10px;
  --ud: cubic-bezier(.22,1,.36,1);
  --luft: clamp(1rem, 4vw, 2.5rem);
  --maks: 72rem;

  --z-nav: 100;
  --z-panel: 200;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--hvid); color:var(--blaek);
  font-family:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:1.0625rem; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Young Serif",Georgia,serif; font-weight:400;
  line-height:1.12; letter-spacing:-.012em; margin:0; text-wrap:balance;
}
h1{font-size:clamp(2.3rem,1.4rem + 3.6vw,4rem)}
h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.7rem)}
h3{font-size:clamp(1.2rem,1.1rem + .4vw,1.4rem)}
p{margin:0; text-wrap:pretty}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--bordeaux); outline-offset:3px; border-radius:4px}

.ramme{max-width:var(--maks); margin-inline:auto; padding-inline:var(--luft)}
.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.spring{position:absolute; left:-9999px}
.spring:focus{left:1rem; top:1rem; z-index:999; background:var(--hvid); padding:.6rem 1rem}

/* ── Udkast-bjælken. Skal væk, før siden går i luften. ─────────── */
.udkast{margin:0; padding:.5rem var(--luft); background:var(--blaek); color:var(--hvid);
  font-size:.8125rem; line-height:1.45; text-align:center}

/* ── Knapper ──────────────────────────────────────────────────── */
.knap{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:3rem; padding:.75rem 1.5rem; border-radius:999px; border:1.5px solid transparent;
  font:inherit; font-weight:600; text-decoration:none; cursor:pointer;
  transition:background-color .25s var(--ud), color .25s var(--ud), border-color .25s var(--ud)}
.knap--book{background:var(--bordeaux); color:var(--paa-bordeaux)}
.knap--book:hover{background:var(--bordeaux-dyb)}
.knap--ramme{border-color:var(--blaek); color:var(--blaek)}
.knap--ramme:hover{background:var(--blaek); color:var(--hvid)}
.knap--guld{background:var(--guld); color:var(--bordeaux-dyb)}
.knap--guld:hover{background:var(--paa-bordeaux)}

/* ── Menulinjen ───────────────────────────────────────────────── */
/* ⚠️ Sløret ligger på .nav::before og IKKE på .nav. backdrop-filter på .nav gør den
   til ramme for position:fixed, og så kan telefonmenuen ikke lægge sig under linjen. */
.nav{position:sticky; top:0; z-index:var(--z-nav); border-bottom:1px solid var(--linje)}
.nav::before{content:""; position:absolute; inset:0; z-index:-1; background:color-mix(in oklch, var(--hvid) 94%, transparent)}
@supports (backdrop-filter:blur(8px)){ .nav::before{background:color-mix(in oklch, var(--hvid) 82%, transparent); backdrop-filter:blur(10px)} }
.nav__ind{max-width:var(--maks); margin-inline:auto; padding:.55rem var(--luft);
  display:flex; align-items:center; gap:1rem}
.mrk{display:block; margin-right:auto}
.mrk img{height:3rem; width:auto}
.nav__links{display:flex; align-items:center; gap:clamp(1rem,2.4vw,2rem)}
.nav__links a{text-decoration:none; font-weight:500; font-size:.97rem}
.nav__links a:not(.knap):hover{color:var(--bordeaux)}
.nav__links a[aria-current="page"]:not(.knap){color:var(--bordeaux); text-decoration:underline; text-underline-offset:.35em}
.nav__links .knap{min-height:2.6rem; padding:.5rem 1.2rem}
.nav__mobilbook,.burger{display:none}

@media (max-width:880px){
  .mrk img{height:2.6rem}
  .nav__mobilbook{display:inline-flex; min-height:2.75rem; padding:.45rem 1.1rem}
  .burger{display:grid; place-items:center; width:2.75rem; height:2.75rem; border:0; background:none; color:var(--blaek); cursor:pointer}
  .burger svg{width:1.5rem; height:1.5rem}
  .burger .luk{display:none}
  .nav[data-aaben] .burger .menu{display:none}
  .nav[data-aaben] .burger .luk{display:block}
  .nav__links{position:fixed; inset:var(--nav-bund,4rem) 0 auto 0; z-index:var(--z-panel);
    flex-direction:column; align-items:stretch; gap:0; padding:.5rem var(--luft) 1.5rem;
    background:var(--hvid); border-bottom:1px solid var(--linje); box-shadow:0 24px 40px -28px oklch(0.24 0.03 28 / .5);
    visibility:hidden; opacity:0; transform:translateY(-.5rem);
    transition:opacity .25s var(--ud), transform .25s var(--ud), visibility 0s .25s}
  .nav[data-aaben] .nav__links{visibility:visible; opacity:1; transform:none; transition:opacity .25s var(--ud), transform .25s var(--ud)}
  .nav__links a:not(.knap){padding:.95rem 0; border-bottom:1px solid var(--linje); font-size:1.05rem}
  .nav__links .knap{margin-top:1rem}
}
@media (prefers-reduced-motion:reduce){ .nav__links{transition:none!important} }

/* ── Forsidens top ────────────────────────────────────────────── */
.top{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem)}
.top__ind{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,5vw,5rem); align-items:center}
.top__sted{font-weight:600; color:var(--bordeaux); margin-bottom:1rem}
.top h1{max-width:14ch}
.top__manchet{margin-top:1.25rem; font-size:clamp(1.08rem,1rem + .35vw,1.25rem); color:var(--daempet); max-width:36rem}
.top__handling{margin-top:2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem}
.top__tlf{font-weight:600; text-decoration:none}
.top__tlf span{display:block; font-weight:400; font-size:.9rem; color:var(--daempet)}
.top__tlf:hover{color:var(--bordeaux)}

/* Uthai i en bue. Buen er formen på en thailandsk dør, og den er det
   eneste sted på siden, den bliver brugt. */
.bue{position:relative; margin:0}
.bue img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%;
  border-radius:999px 999px var(--r) var(--r); background:var(--flade)}
.bue figcaption{margin-top:.85rem; font-size:.95rem; color:var(--daempet)}
.bue figcaption b{color:var(--blaek); font-weight:600}

@media (max-width:760px){
  .top__ind{grid-template-columns:1fr}
  /* Billedet står først på telefon, men så lille, at overskriften og knappen
     stadig kan ses uden at rulle. */
  .top{padding-top:1.5rem}
  .bue{justify-self:start; order:-1; width:min(13rem,52%)}
  .bue img{aspect-ratio:1; object-position:50% 12%}
  .bue figcaption{margin-top:.5rem; font-size:.88rem}
}

/* Linjen om seksuelle ydelser. Rolig og tydelig, ikke en advarsel. */
.varsel{margin:0; padding:1rem var(--luft); background:var(--flade); border-block:1px solid var(--linje);
  text-align:center; font-size:.97rem; color:var(--daempet)}
.varsel b{color:var(--blaek)}

/* ── Sektioner ────────────────────────────────────────────────── */
.sek{padding-block:clamp(3.5rem,8vw,6.5rem)}
.sek__top{max-width:40rem; margin-bottom:clamp(2rem,4vw,3rem)}
.sek__top p{margin-top:1rem; color:var(--daempet)}

/* ── Behandlinger: en liste, ikke et gitter af ens kort ──────────── */
.gruppe + .gruppe{margin-top:clamp(2.75rem,5vw,4rem)}
.gruppe__navn{font-size:clamp(1.35rem,1.2rem + .6vw,1.7rem); padding-bottom:.85rem; border-bottom:1.5px solid var(--blaek)}
.beh-liste{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.5rem,4vw,3.5rem)}
.beh{display:grid; grid-template-columns:clamp(7rem,13vw,10rem) minmax(0,1fr); gap:1.15rem; align-items:start;
  padding-block:1.4rem; border-bottom:1px solid var(--linje)}
.beh__billede{position:relative}
.beh img{display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r); background:var(--flade)}
.beh h4{font-family:"Young Serif",Georgia,serif; font-weight:400; font-size:1.25rem; line-height:1.2; margin:0}
.beh p{margin-top:.45rem; font-size:.98rem; color:var(--daempet)}
.beh__tal{margin-top:.7rem!important; font-size:.92rem!important; font-weight:600; color:var(--blaek)!important}
.beh--gave{grid-template-columns:1fr}
@media (max-width:820px){ .beh-liste{grid-template-columns:1fr} }
@media (max-width:420px){ .beh{grid-template-columns:6rem minmax(0,1fr); gap:.9rem} }

/* ── Trin, på bordeaux ────────────────────────────────────────── */
.sek--bordeaux{background:var(--bordeaux); color:var(--paa-bordeaux)}
.sek--bordeaux .sek__top p{color:var(--paa-bordeaux-d)}
.trin{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.75rem,4vw,3rem)}
.trin li{padding-top:1.25rem; border-top:1px solid color-mix(in oklch, var(--guld) 60%, transparent)}
.trin__nr{font-family:"Young Serif",Georgia,serif; font-size:2.4rem; line-height:1; color:var(--guld)}
.trin h3{margin-top:.9rem}
.trin p{margin-top:.6rem; color:var(--paa-bordeaux-d)}
@media (max-width:760px){ .trin{grid-template-columns:1fr} }

/* ── Om Uthai og find os ──────────────────────────────────────── */
.om{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,6vw,6rem)}
.om p{margin-top:1rem; max-width:34rem}
.om__navn{font-weight:600}
.om__navn span{display:block; font-weight:400; color:var(--daempet)}
@media (max-width:760px){ .om{grid-template-columns:1fr} }

.sted address{font-style:normal; margin-top:1rem; font-size:1.1rem}
.sted__links{margin-top:1rem; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem}
.sted__links a{font-weight:600; color:var(--bordeaux); text-underline-offset:.25em}
.tider{margin-top:1.75rem; width:100%; max-width:26rem; border-collapse:collapse}
.tider caption{text-align:left; font-weight:600; padding-bottom:.4rem}
.tider th,.tider td{padding:.55rem 0; border-bottom:1px solid var(--linje); text-align:left; font-weight:400}
.tider td{text-align:right; font-variant-numeric:tabular-nums}
.tider tr[data-i-dag] th,.tider tr[data-i-dag] td{font-weight:700; color:var(--bordeaux)}

/* ── Afslutning med logoet ────────────────────────────────────── */
.slut{padding-block:clamp(3rem,7vw,5.5rem); text-align:center; border-top:1px solid var(--linje)}
.slut img{width:min(26rem,86%); margin:0 auto}
.slut h2{margin-top:1.25rem}
.slut p{margin:1rem auto 0; max-width:30rem; color:var(--daempet)}
.slut .knap{margin-top:1.75rem}

/* ── Foden ───────────────────────────────────────────────────── */
.bund{background:var(--bordeaux-dyb); color:var(--paa-bordeaux); padding-block:clamp(3rem,6vw,4.5rem) 2rem; font-size:.97rem}
.bund__top{display:grid; grid-template-columns:1.3fr repeat(3,minmax(0,1fr)); gap:2rem}
.bund h3{font-family:inherit; font-size:.97rem; font-weight:700; margin-bottom:.6rem; color:var(--guld)}
.bund ul{list-style:none; margin:0; padding:0; display:grid; gap:.3rem; color:var(--paa-bordeaux-d)}
.bund a{text-underline-offset:.2em}
.bund__navn{font-family:"Young Serif",Georgia,serif; font-size:1.5rem}
.bund__blurb{margin-top:.5rem; color:var(--paa-bordeaux-d); max-width:22rem}
.bund__linje{margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid color-mix(in oklch, var(--paa-bordeaux) 20%, transparent);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem; font-size:.85rem; color:var(--paa-bordeaux-d)}
@media (max-width:860px){ .bund__top{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .bund__top{grid-template-columns:1fr} }

/* ── Undersider ──────────────────────────────────────────────── */
.side-top{padding-block:clamp(2.5rem,6vw,4rem) 0}
.side-top p{margin-top:.9rem; color:var(--daempet); max-width:38rem}
.book{display:grid; grid-template-columns:minmax(0,1fr) 18rem; gap:clamp(1.5rem,4vw,3rem); align-items:start; padding-block:2rem clamp(3.5rem,8vw,6rem)}
.bookramme{border:1px solid var(--linje); border-radius:var(--r); overflow:hidden; background:var(--hvid)}
.bookramme iframe{display:block; width:100%; height:58rem; border:0}
.book aside{position:sticky; top:6rem}
.book aside h2{font-size:1.35rem}
.book aside p{margin-top:.6rem; color:var(--daempet); font-size:.97rem}
@media (max-width:900px){ .book{grid-template-columns:1fr} .book aside{position:static} .bookramme iframe{height:52rem} }

.kontakt{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); padding-block:2rem clamp(3.5rem,8vw,6rem)}
.kontakt__linjer{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:1rem}
.kontakt__linjer b{display:block; font-size:.9rem; color:var(--daempet); font-weight:600}
.kontakt__linjer a{font-size:1.15rem; font-weight:600; color:var(--bordeaux); text-underline-offset:.2em; overflow-wrap:anywhere}
.kort{position:relative; border-radius:var(--r); overflow:hidden; background:var(--flade); border:1px solid var(--linje); aspect-ratio:4/3}
.kort iframe{width:100%; height:100%; border:0; display:block}
.kort__plads{position:absolute; inset:0; display:grid; place-content:center; gap:.9rem; text-align:center; padding:1.5rem}
.kort__plads p{color:var(--daempet); font-size:.93rem; max-width:22rem}
@media (max-width:760px){ .kontakt{grid-template-columns:1fr} }

/* ── En rolig ankomst på forsiden. Indholdet er synligt uden den. ── */
@media (prefers-reduced-motion:no-preference){
  .top__tekst > *{animation:op .7s var(--ud) both}
  .top__tekst > :nth-child(2){animation-delay:.06s}
  .top__tekst > :nth-child(3){animation-delay:.12s}
  .top__tekst > :nth-child(4){animation-delay:.18s}
  .bue img{animation:bue 1s var(--ud) both}
}
@keyframes op{from{opacity:0; transform:translateY(12px)}}
@keyframes bue{from{opacity:0; clip-path:inset(30% 0 0 0 round 999px 999px var(--r) var(--r))}}

/* ── Afbudsregler på bookingsiden ─────────────────────────────── */
.afbud__tabel{margin-top:.75rem}
.afbud__tabel th{padding-right:1rem; font-size:.95rem}
.afbud__tabel td{white-space:nowrap; font-weight:600}
.trin a{color:var(--guld); text-underline-offset:.2em}

/* ── Åbningstilbuddet ─────────────────────────────────────────── */
.tilbud{margin:0; padding:.9rem var(--luft); background:var(--bordeaux); color:var(--paa-bordeaux); text-align:center; font-size:1rem}
.tilbud b{color:var(--guld)}
.beh__tilbud{display:block; margin-top:.2rem; color:var(--bordeaux); font-weight:700}
.pris{white-space:nowrap}

/* ── Åbningsrabat ved hver behandling (TILBUD i byg.py) ───────────── */
.beh__maerke{position:absolute; top:.45rem; left:.45rem; padding:.42rem .7rem; border-radius:999px;
  background:var(--bordeaux); color:var(--guld); font-size:clamp(.88rem,1.4vw,1rem); font-weight:700; line-height:1;
  letter-spacing:.01em; box-shadow:0 1px 3px oklch(0.2 0.03 22 / .25)}
.pris s{color:var(--daempet); font-weight:400; text-decoration-thickness:1px}
.pris__ny{color:var(--bordeaux); font-weight:700}