/* Gåder.dk - et gådehæfte i blomme, sennep og creme. Fonte ligger på sitet selv (OFL). */
@font-face { font-family: "Rokkitt"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/rokkitt-800.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/atkinson-next.woff2) format("woff2"); }

:root {
  --creme: #f5ecd7;
  --creme-2: #efe2c4;
  --blomme: #2a1d3a;
  --blomme-2: #5a4a69;
  --linje: #dccaa3;
  --sennep: #e9b53c;
  --sennep-lys: #f7dd9a;
  --zinnober: #b23c22;
  --zinnober-hover: #8f2e18;
  --band: #2a1d3a;
  --band-tekst: #f5ecd7;
  --band-tekst-2: #d6c9de;
  --svar-bg: #fbf3df;
  --fokus: #b23c22;
  --display: "Rokkitt", "Rockwell", "Roboto Slab", Georgia, serif;
  --tekst: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --creme: #1c1426;
    --creme-2: #251b31;
    --blomme: #f1e6cf;
    --blomme-2: #c4b6cf;
    --linje: #3b2e4a;
    --sennep: #ecbd4f;
    --sennep-lys: #4a3a17;
    --zinnober: #f0896d;
    --zinnober-hover: #f6a88f;
    --band: #120c19;
    --band-tekst: #f1e6cf;
    --band-tekst-2: #c4b6cf;
    --svar-bg: #2b2037;
    --fokus: #ecbd4f;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--blomme-2) var(--creme); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--creme); color: var(--blomme);
  font-family: var(--tekst); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
main { flex: 1; }
::selection { background: var(--sennep); color: #2a1d3a; }
a { color: var(--zinnober); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { color: var(--zinnober-hover); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.08; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
p { margin: 0; }
.ramme { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 48rem) { .ramme { padding-inline: 2rem; } }

/* Top */
.top { border-bottom: 2px solid var(--blomme); }
.top-ind { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-block: .9rem; }
.ordmaerke { display: inline-flex; align-items: center; gap: .6rem; color: var(--blomme); text-decoration: none; }
.ordmaerke:hover { color: var(--blomme); }
.maerke { color: var(--blomme); flex: none; }
.maerke-spm { stroke: var(--sennep); }
.maerke-prik { fill: var(--sennep); }
@media (prefers-color-scheme: dark) { .maerke rect { fill: #2a1d3a; } }
.navn { font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: -.01em; }
.navn span { color: var(--zinnober); }
.menu { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .975rem; }
.menu a { color: var(--blomme); text-decoration: none; padding-block: .3rem; border-bottom: 2px solid transparent; }
.menu a:hover { border-bottom-color: var(--sennep); color: var(--blomme); }
.menu a[aria-current="page"] { border-bottom-color: var(--zinnober); font-weight: 700; }

/* Dagens gåde */
.dagens { background: var(--band); color: var(--band-tekst); overflow: hidden; }
.dagens-ind { display: grid; grid-template-columns: 1fr; align-items: center; gap: 2rem; padding-block: 3rem 3.25rem; position: relative; }
.dagens h1 { font-size: 1.25rem; color: var(--sennep); letter-spacing: .01em; }
.dagens-spm { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 1.3rem + 3.2vw, 3.75rem); line-height: 1.05; margin-top: .9rem; max-width: 18ch; text-wrap: balance; }
.dagens-note { margin-top: 1.5rem; color: var(--band-tekst-2); font-size: .95rem; }
.stort-spm { display: none; color: var(--sennep); width: 100%; max-width: 15rem; justify-self: end; }
@media (min-width: 48rem) {
  .dagens-ind { grid-template-columns: 1fr auto; padding-block: 4.5rem; }
  .stort-spm { display: block; width: 13rem; transform: rotate(8deg); }
}
@media (min-width: 72rem) { .stort-spm { width: 16rem; } }

/* Svar bag et tryk */
details { margin-top: 1rem; }
summary {
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; list-style: none;
  font-weight: 700; font-size: .975rem; padding: .55rem 1.05rem .55rem 1rem; border-radius: 999px;
  border: 2px solid var(--blomme); color: var(--blomme); background: transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease);
  -webkit-user-select: none; user-select: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; width: .5rem; height: .5rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease);
}
summary:hover { background: var(--blomme); color: var(--creme); }
details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.skjul { display: none; }
details[open] .vis { display: none; }
details[open] .skjul { display: inline; }
.svar { margin-top: .85rem; padding: .9rem 1.1rem; background: var(--svar-bg); border-radius: 12px; max-width: 62ch; }
.svar strong { font-weight: 800; }
details[open] .svar { animation: frem .35s var(--ease); }
@keyframes frem { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { details[open] .svar { animation: none; } summary, summary::after { transition: none; } }

.dagens summary { border-color: var(--sennep); background: var(--sennep); color: #2a1d3a; }
.dagens summary:hover { background: #f2c55c; border-color: #f2c55c; color: #2a1d3a; }
.dagens .svar { background: rgba(245, 236, 215, .1); color: var(--band-tekst); font-size: 1.125rem; }

/* Afsnit */
.afsnit { padding-block: 3.5rem 0; }
.afsnit h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); margin-bottom: 1.25rem; }
.indledning { font-size: 1.125rem; color: var(--blomme-2); max-width: 62ch; }

/* Slags gåder */
.slags { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--blomme); }
.slags a {
  display: grid; grid-template-columns: 1fr; gap: .35rem; padding: 1.35rem 0; color: var(--blomme); text-decoration: none;
  border-bottom: 1px solid var(--linje); transition: background-color .2s var(--ease), padding .25s var(--ease);
}
.slags-navn { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.05; }
.slags-tekst { color: var(--blomme-2); max-width: 52ch; }
.slags-antal { font-size: .9rem; font-weight: 700; color: var(--zinnober); font-variant-numeric: tabular-nums; }
.slags a:hover .slags-navn { color: var(--zinnober); }
@media (min-width: 48rem) {
  .slags a { grid-template-columns: minmax(14rem, 1fr) 2fr auto; align-items: baseline; gap: 2rem; padding: 1.6rem .5rem; }
  .slags a:hover { background: var(--creme-2); padding-inline: 1rem; }
}

/* Tips */
.to-spalter { display: grid; gap: 1.5rem 3rem; }
@media (min-width: 60rem) { .to-spalter { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.tips { list-style: none; margin: 0; padding: 0; counter-reset: tip; }
.tips li { counter-increment: tip; position: relative; padding: .9rem 0 .9rem 2.75rem; border-bottom: 1px solid var(--linje); }
.tips li:first-child { padding-top: .25rem; }
.tips li:first-child::before { top: .2rem; }
.tips li::before { content: counter(tip); position: absolute; left: 0; top: .85rem; font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1; color: var(--sennep); }
@media (prefers-color-scheme: light) { .tips li::before { color: #c48d12; } }
.tips strong { display: block; font-weight: 800; }

/* Gådelister */
.sidetop { padding-block: 3rem 0; }
.sidetop h1 { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); margin-bottom: 1rem; }
.gaader { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--blomme); }
.gaade { display: grid; grid-template-columns: 2.75rem 1fr; gap: .5rem 1rem; padding-block: 1.6rem; border-bottom: 1px solid var(--linje); scroll-margin-top: 1rem; }
.nr { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--zinnober); font-variant-numeric: tabular-nums; }
.gaade h2, .gaade h3 { font-size: 1.5rem; margin-bottom: .4rem; }
.spm { font-size: 1.25rem; line-height: 1.45; max-width: 60ch; font-weight: 600; }
.gaade h2 + .spm, .gaade h3 + .spm { font-size: 1.0625rem; font-weight: 400; line-height: 1.6; }
@media (min-width: 48rem) {
  .gaade { grid-template-columns: 4.5rem 1fr; padding-block: 2rem; }
  .nr { font-size: 2.75rem; }
  .spm { font-size: 1.375rem; }
}

.videre { padding-block: 2.5rem 0; color: var(--blomme-2); }
.videre a { margin-right: .75rem; font-weight: 700; }

/* Tekstsider */
.tekstside { padding-block: 3rem 0; max-width: 46rem; margin-inline: 0; }
@media (min-width: 72rem) { .tekstside { margin-inline: calc((100vw - 72rem) / 2); } }
.tekstside h1 { font-size: clamp(2.5rem, 1.6rem + 4vw, 4rem); margin-bottom: 1rem; }
.tekstside h2 { font-size: 1.5rem; margin: 2.25rem 0 .5rem; }
.tekstside p + p { margin-top: 1rem; }
.knap { display: inline-block; margin-top: 1.5rem; padding: .7rem 1.3rem; border-radius: 999px; background: var(--blomme); color: var(--creme); font-weight: 700; text-decoration: none; }
.knap:hover { background: var(--zinnober); color: #fff; }

/* Bund */
.bund { margin-top: 4.5rem; border-top: 2px solid var(--blomme); background: var(--creme-2); }
.bund-ind { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-block: 1.75rem 2.25rem; font-size: .95rem; }
.bund-navn { font-family: var(--display); font-weight: 800; font-size: 1.25rem; }
.bund nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.bund a { color: var(--blomme); }
.bund a:hover { color: var(--zinnober); }