/* ipLink — æstetik til den juridiske/IP-branche: navy + pergament + diskret guld,
   serif-overskrifter, god luft. Tilgængelig (WCAG 2.1 AA). */
:root {
  --ink: #1b2436;
  --navy: #16213e;
  --navy-2: #22314f;
  --paper: #f6f3ec;
  --card: #ffffff;
  --line: #ddd5c6;
  --muted: #5a6473;
  --gold: #6f571f;          /* tekst-guld, ~5.4:1 på pergament */
  --gold-rule: #b89968;     /* dekorativ guldlinje */
  --link: #1f4e79;          /* navy-blå link, ~6:1 */
  --ok: #1d6b3a; --ok-bg: #e8f3ea;
  --warn: #7a4f01; --warn-bg: #fbf1de;
  --err: #98231f; --err-bg: #fbe9e7;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 8px;
}
* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0; font-family: var(--sans); line-height: 1.6; color: var(--ink); background: var(--paper);
}
.wrap { width: min(1020px, 92vw); margin-inline: auto; }
main.wrap { width: min(680px, 92vw); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; color: var(--navy); }
a { color: var(--link); }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0; z-index: 10; }
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.req { color: var(--err); font-weight: 700; }
.muted { color: var(--muted); font-weight: 400; }

/* Sidehoved */
.site-header { background: var(--navy); color: #fff; border-bottom: 2px solid var(--gold-rule); }
.site-header .wrap { display: flex; align-items: center; gap: .7rem; padding: .85rem 0; flex-wrap: wrap; }
.brand { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; letter-spacing: .01em; color: #fff; text-decoration: none; }
.brand-sub { color: #c7b894; font-size: .9rem; font-style: italic; }
.topnav { display: flex; gap: 1.1rem; margin-left: 1.4rem; }
.topnav a { color: #e7ddca; text-decoration: none; font-size: .95rem; }
.topnav a:hover { color: #fff; text-decoration: underline; }
.lang { margin-left: auto; display: flex; gap: .45rem; align-items: center; font-size: .9rem; }
.lang a { color: #cdd6e0; text-decoration: none; }
.lang a:hover { text-decoration: underline; }
.lang a[aria-current="true"] { color: #fff; font-weight: 700; text-decoration: underline; }
.lang span { color: #8893a2; }

/* Landingsside */
.hero { background: linear-gradient(180deg, #fbf9f4, var(--paper)); border-bottom: 1px solid var(--line); }
.hero .wrap { padding: 3.4rem 0 3rem; max-width: 760px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 700; color: var(--gold); margin: 0 0 .6rem; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 .8rem; }
.hero .lead { font-size: 1.2rem; color: #34404f; max-width: 60ch; margin: 0 0 1.6rem; }
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin: 0; }

.button { display: inline-block; font: 600 1rem/1 var(--sans); padding: .8rem 1.5rem; border-radius: var(--radius); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; }
.button.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.button.primary:hover { background: var(--navy-2); }
.button.ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.button.ghost:hover { background: rgba(22,33,62,.06); }

.features { padding: 2.8rem 0; }
.features h2, .howto h2, .signup h2 { font-size: 1.6rem; margin: 0 0 1.4rem; }
.features h2 { text-align: center; }
.features h2::after { content: ""; display: block; width: 54px; height: 3px; background: var(--gold-rule); margin: .6rem auto 0; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.feature { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--gold-rule); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.feature h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.feature p { margin: 0; color: #3a4150; }

.howto { background: #fbf9f4; border-block: 1px solid var(--line); padding: 2.6rem 0; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; max-width: 820px; }
.steps li { counter-increment: step; position: relative; padding-left: 3rem; min-height: 2.2rem; display: flex; align-items: center; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--navy); color: #fff; font: 700 1rem/2.1rem var(--serif); text-align: center; }

.signup { padding: 3rem 0 3.4rem; }
.signup .wrap { max-width: 620px; }
.signup .lead { color: #34404f; margin: 0 0 1.4rem; }
.signup-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.signup-thanks { background: var(--ok-bg); border: 1px solid #bfe0c8; border-left: 5px solid var(--ok); border-radius: var(--radius); padding: 1.1rem 1.3rem; color: var(--ok); font-size: 1.05rem; }
.privacy { color: var(--muted); font-size: .88rem; margin: 1rem 0 0; }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-err { display: block; color: var(--err); font-size: .9rem; margin-top: .35rem; }

/* Felter (delt af opslag + opskrivning) */
.field { margin-bottom: 1.1rem; }
.field > label, legend { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--ink); }
select, input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; padding: .62rem .7rem; font: 1rem/1.4 var(--sans);
  border: 1px solid #b9b2a3; border-radius: 6px; background: #fff; color: var(--ink);
}
textarea { resize: vertical; }
.hint { margin: .4rem 0 0; font-size: .9rem; color: var(--muted); }
fieldset.scope { border: 1px solid var(--line); border-radius: 6px; padding: .6rem .8rem; margin: 0 0 1.1rem; }
fieldset.scope legend { padding: 0 .3rem; }
.radio { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; margin-right: 1.2rem; }
button[type="submit"] { font: 600 1.02rem var(--sans); cursor: pointer; background: var(--navy); color: #fff; border: 1.5px solid var(--navy); border-radius: 6px; padding: .7rem 1.5rem; }
button[type="submit"]:hover { background: var(--navy-2); }

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--link); outline-offset: 2px;
}

/* Opslags-side */
main.wrap { padding: 1.8rem 0 3rem; }
main.wrap h1 { font-size: 1.7rem; margin: .2rem 0 .4rem; }
main.wrap .lead { color: var(--muted); margin-top: 0; }
.lookup { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; margin: 1.2rem 0; }
.result { margin: 1rem 0; }
.result-card { border: 1px solid var(--line); border-left-width: 5px; border-radius: 6px; padding: .8rem 1rem; background: var(--card); }
.result-card p { margin: .3rem 0; }
.result-card.is-ok { border-left-color: var(--ok); background: var(--ok-bg); }
.result-card.is-warn { border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.result-card.is-error { border-left-color: var(--err); background: var(--err-bg); color: var(--err); }
.result-card a { color: var(--link); font-weight: 600; }
.demo-note { color: var(--muted); font-size: .95rem; }

/* Admin-dashboard (opskrivninger) */
main.wrap.dash { width: min(1040px, 95vw); }
.admin-link { margin-top: .5rem; }
.dash-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); margin-top: 1rem; }
.dash-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.dash-table th, .dash-table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.dash-table thead th { background: #efe9dd; color: var(--navy); font-family: var(--serif); }
.dash-table tbody tr:nth-child(even) { background: #faf8f3; }
.dash-table td:nth-child(6) { max-width: 30ch; }

.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; background: #fbf9f4; }
.site-footer .wrap { padding: 1.4rem 0; }

@media (prefers-reduced-motion: no-preference) {
  .result-card, .button, button[type="submit"] { transition: background .15s ease; }
}