/* A19 – grundstyles: fonte, nulstilling, typografi, knapper og pladsholdere.
   Farver kun via variablerne i tokens.css. */

@font-face{
  font-family:"Figtree";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("../fonts/figtree-400-700-latin.woff2") format("woff2");
}
@font-face{
  font-family:"DM Serif Display";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/dm-serif-display-400-latin.woff2") format("woff2");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:150px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
a{color:var(--link)}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--max);margin-inline:auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.1;text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,1.5rem + 2vw,3rem)}
h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.4rem)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tnum{font-variant-numeric:tabular-nums}

/* Spring til indhold – kun synlig ved tastaturfokus */
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--sun);color:var(--on-sun);font-weight:700;text-decoration:none}
.skip-link:focus{top:12px}

/* Logo som maske, så det kan farves via currentColor */
.logo{display:block;width:64px;aspect-ratio:500/334;background:currentColor;
  -webkit-mask:url("../img/logo-mask.png") center/contain no-repeat;
          mask:url("../img/logo-mask.png") center/contain no-repeat}

/* Knapper */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:0;font-weight:700;font-size:1.02rem;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}
.btn-primary{background:var(--sun);color:var(--on-sun)}
.btn-primary:hover{background:var(--sun-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px}
.close-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.close-x svg{width:20px;height:20px}

/* Pladsholdere for billeder (bruges, indtil der er rigtige billeder) */
.ph{position:relative;display:grid;place-items:center;width:100%;max-width:100%;color:var(--muted);
  background:linear-gradient(135deg,var(--ph-a),var(--ph-b))}
.ph svg{width:34%;max-width:120px;height:auto;opacity:.55;color:var(--forest)}
:root:not([data-theme="light"]) .ph svg{color:currentColor}
.ph.t-sand{--ph-a:#efe1bf;--ph-b:#f7eed7}
.ph.t-sage{--ph-a:#d7e3d6;--ph-b:#e9f0e7}
.ph.t-sun{--ph-a:#f6dc8c;--ph-b:#fbeec3}
.ph.t-clay{--ph-a:#ead2c0;--ph-b:#f5e7dc}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ph{--ph-a:#1d342c;--ph-b:#24413a}}
:root[data-theme="dark"] .ph{--ph-a:#1d342c;--ph-b:#24413a}

/* Midlertidig indholdsramme for sider uden egen skabelon (fase 2–4) */
.page-content{padding-block:48px 72px;min-height:40vh}
.page-content .entry + .entry{margin-top:32px}
.entry-content{max-width:46em}