/* ═══════════════════════════════════════════════════════ GladPote — reset, typografi, formularer, knapper ═══════════════════════════════════════════════════════ */ /* ── Reset ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; } ul[class], ol[class] { list-style: none; } /** * Browserens egen regel er [hidden] { display: none }, som har samme * specificitet som en klasse. Enhver display-regel i vores CSS vinder * derfor over den, og elementet bliver synligt selvom det er hidden. * * Attributvælgeren gentages, så denne regel vinder over en klasse. * Uden den skal hver eneste komponent huske sin egen [hidden]-regel. */ [hidden][hidden] { display: none; } body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } table { border-collapse: collapse; width: 100%; } /* ── Typografi ─────────────────────────────────────── */ h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; } h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); } h2 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem); } h3 { font-size: 1.175rem; } h4 { font-size: 1rem; } p { text-wrap: pretty; } a { color: var(--primary-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--primary); } small, .text-sm { font-size: .875rem; } .text-xs { font-size: .8125rem; } .text-soft { color: var(--text-soft); } .text-danger { color: var(--danger); } .text-center { text-align: center; } code, pre { font-family: var(--font-mono); font-size: .9em; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; } /* ── Fokus og tilgængelighed ───────────────────────── */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* Kun synlig for skærmlæsere. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Springlink — første element i , synligt ved tab. */ .skip-link { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 100; padding: var(--sp-2) var(--sp-4); background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); transform: translateY(-200%); transition: transform var(--transition); } .skip-link:focus { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ── Formularer ────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); } label { font-weight: 600; font-size: .9375rem; } .field-hint { font-size: .8125rem; color: var(--text-soft); } .field-error { font-size: .8125rem; color: var(--danger); font-weight: 600; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="search"], input[type="tel"], input[type="url"], select, textarea { width: 100%; padding: var(--sp-3) var(--sp-4); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); } input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); } input::placeholder, textarea::placeholder { color: var(--text-soft); } input:disabled, select:disabled, textarea:disabled { background: var(--surface-alt); color: var(--text-soft); cursor: not-allowed; } textarea { min-height: 96px; resize: vertical; } select { appearance: none; padding-right: var(--sp-7); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-4) center; } .check { display: flex; align-items: center; gap: var(--sp-2); font-weight: 400; cursor: pointer; } .check input[type="checkbox"], .check input[type="radio"] { width: 18px; height: 18px; accent-color: var(--primary); flex: none; } fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); margin: 0 0 var(--sp-4); } legend { font-weight: 700; padding: 0 var(--sp-2); } /* ── Knapper ───────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; /* touch target */ padding: var(--sp-3) var(--sp-5); background: var(--primary); color: var(--on-primary); border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; cursor: pointer; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); } .btn:hover { background: var(--primary-dark); color: var(--on-primary); } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; transform: none; } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--surface-alt); color: var(--text); } .btn-ghost { background: transparent; color: var(--text); border-color: transparent; } .btn-ghost:hover { background: var(--surface-alt); color: var(--text); } .btn-danger { background: var(--danger); color: var(--on-danger); } .btn-danger:hover { background: var(--danger); filter: brightness(.9); color: var(--on-danger); } .btn-sm { min-height: 36px; padding: var(--sp-2) var(--sp-3); font-size: .875rem; } .btn-lg { min-height: 52px; padding: var(--sp-4) var(--sp-6); font-size: 1.0625rem; } .btn-block { width: 100%; } /* Ikonknap — husk aria-label i HTML. */ .btn-icon { min-height: 44px; width: 44px; padding: 0; border-radius: var(--radius-pill); } /* Spinner mens en anmodning kører: