/*
Theme Name: Bookmakertjek
Theme URI: https://bookmakertjek.dk
Author: Mahope v/ Mads Holst Jensen
Author URI: https://mahoje.dk
Description: Tema til bookmakertjek.dk — dansk affiliate-site der sammenligner bookmaker-bonusser. Let, hurtigt og uden afhængigheder. Bygget over det godkendte design-udkast.
Version: 1.0.0
Requires PHP: 8.0
License: Proprietær — leveret til Kenneth Friis Davidsen
Text Domain: bookmakertjek
*/

/* BEMÆRK: denne fil er genereret af _byg-css.js. Ret i _design/additions.css. */


  /* ============ Reset & tokens ============ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg: #F5F7F9;
    --surface: #FFFFFF;
    --navy: #0B1B30;
    --navy-deep: #071223;
    --navy-soft: #34465E;
    --ink: #182A3F;
    --muted: #5D6B7E;
    --line: #E2E8EF;
    --green: #0FA05C;
    --green-dark: #0B7E48;
    --green-bright: #2BD57F;
    --green-tint: #EDFAF3;
    --blue: #2160D3;
    --blue-tint: #EEF4FD;
    --gold: #F0B429;
    --red: #D64541;
    --red-dark: #B4322E;
    --red-tint: #FDECEB;
    --dk-red: #C8102E;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(11, 27, 48, 0.07);
    --shadow-md: 0 4px 18px rgba(11, 27, 48, 0.09);
    --shadow-lg: 0 18px 44px rgba(7, 18, 35, 0.22);
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "tnum" 0;
  }

  a { color: var(--blue); text-decoration: none; }
  a:hover { text-decoration: underline; }

  :where(a, button, summary):focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .wrap { max-width: 1140px; margin: 0 auto; padding: 0 18px; }

  /* Ikon-basis: ét sæt, 1.75px stroke, runde hjørner */
  .ic {
    width: 1em; height: 1em;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex: none;
    display: inline-block;
    vertical-align: -0.12em;
  }
  .ic-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 8px;
    flex: none;
  }

  /* ============ Topbar ============ */
  .topbar {
    background: var(--navy-deep);
    color: #A9B7C9;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-align: center;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .topbar a { color: #D6DFEA; text-decoration: underline; text-underline-offset: 2px; }
  .topbar a:hover { color: #fff; }
  .topbar .sep { margin: 0 8px; opacity: 0.4; }
  .topbar strong { color: #E9EFF6; font-weight: 700; }

  /* ============ Header (mørk, glider ind i hero) ============ */
  header.site {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11, 27, 48, 0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 18px;
    max-width: 1140px;
    margin: 0 auto;
  }
  .logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.22rem;
    color: #fff;
    letter-spacing: -0.03em;
  }
  .logo:hover { text-decoration: none; }
  .logo-mark {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: linear-gradient(150deg, var(--green) 10%, var(--green-dark) 90%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 2px 6px rgba(0,0,0,0.3);
  }
  .logo-mark svg { display: block; }
  /* .dk er en del af domænet, ikke et selvstændigt ord — træk det tættere
     på navnet (flex-gap'en ville ellers give for meget luft foran ".dk"). */
  .logo .dk { color: var(--green-bright); margin-left: -0.32em; }

  nav.main { display: none; }
  nav.main a {
    color: #B9C6D6;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 8px 12px;
    border-radius: 8px;
  }
  nav.main a:hover { color: #fff; background: rgba(255,255,255,0.08); text-decoration: none; }

  .header-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--green);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 9px 18px;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 8px rgba(0,0,0,0.28);
    transition: background 0.15s, transform 0.15s;
  }
  .header-cta:hover { background: var(--green-dark); text-decoration: none; transform: translateY(-1px); }
  .header-cta .ic { font-size: 0.95em; }

  @media (min-width: 768px) {
    nav.main { display: flex; gap: 2px; }
  }

  /* ============ Hero: mørk, venstrestillet, svævende kort ============ */
  .hero {
    position: relative;
    background:
      radial-gradient(900px 480px at 78% -10%, rgba(15, 160, 92, 0.16), transparent 62%),
      radial-gradient(700px 420px at -8% 118%, rgba(33, 96, 211, 0.14), transparent 60%),
      linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 92%);
    color: #fff;
    overflow: hidden;
  }
  /* dot-grid-tekstur, lav opacitet */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.55) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.055;
    pointer-events: none;
  }
  .hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: center;
    padding: 54px 0 96px;
  }
  .hero-copy { max-width: 560px; }
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--green-bright);
    margin-bottom: 18px;
  }
  .hero-eyebrow .ic { font-size: 1.15em; }
  .hero h1 {
    font-size: clamp(2.1rem, 5.6vw, 3.35rem);
    font-weight: 850;
    letter-spacing: -0.035em;
    line-height: 1.06;
  }
  .hero h1 em { font-style: normal; color: var(--green-bright); }
  .hero p.sub {
    color: #A9B9CC;
    font-size: clamp(1rem, 2.4vw, 1.13rem);
    font-weight: 450;
    max-width: 48ch;
    margin-top: 18px;
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 30px;
  }
  .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--green);
    color: #fff;
    font-weight: 750;
    font-size: 1.02rem;
    padding: 14px 28px;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 10px 26px rgba(15, 160, 92, 0.38);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  }
  .hero-cta:hover {
    background: var(--green-dark);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 14px 30px rgba(15, 160, 92, 0.42);
  }
  .hero-note { font-size: 0.8rem; color: #8296AC; }

  .trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
  }
  .trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    padding: 7px 14px 7px 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #C9D5E2;
  }
  .trust-badge .ic-chip { width: 22px; height: 22px; border-radius: 999px; font-size: 0.78rem; }
  .trust-badge.tb-age .ic-chip { background: rgba(255,255,255,0.12); color: #fff; }
  .trust-badge.tb-license .ic-chip { background: rgba(43, 213, 127, 0.18); color: var(--green-bright); }
  .trust-badge.tb-fresh .ic-chip { background: rgba(240, 180, 41, 0.18); color: var(--gold); }

  /* Svævende bonus-kort (signatur) */
  .hero-visual {
    position: relative;
    min-height: 320px;
    perspective: 1100px;
    display: none;
  }
  .float-card {
    position: absolute;
    width: 320px;
    background: #FFFFFF;
    color: var(--ink);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 13px;
    transform-style: preserve-3d;
  }
  .float-card .fc-body { flex: 1; min-width: 0; }
  .float-card .fc-name { font-weight: 750; font-size: 0.95rem; color: var(--navy); letter-spacing: -0.01em; }
  .float-card .fc-meta { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
  .float-card .fc-amount {
    font-size: 1.28rem;
    font-weight: 850;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--green-dark);
    white-space: nowrap;
  }
  .float-card .fc-amount small { font-size: 0.62em; font-weight: 700; color: var(--muted); letter-spacing: 0; }
  .fc-1 {
    top: 8%; right: 4%;
    transform: rotateY(-9deg) rotateX(4deg) rotateZ(-1.5deg);
    z-index: 3;
    animation: floaty 7s ease-in-out infinite;
  }
  .fc-2 {
    top: 38%; right: 14%;
    transform: rotateY(-9deg) rotateX(4deg) rotateZ(1deg) scale(0.94);
    z-index: 2;
    opacity: 0.94;
    animation: floaty 8s ease-in-out infinite 0.9s;
  }
  .fc-3 {
    top: 67%; right: 1%;
    transform: rotateY(-9deg) rotateX(4deg) rotateZ(-0.5deg) scale(0.88);
    z-index: 1;
    opacity: 0.85;
    animation: floaty 9s ease-in-out infinite 1.7s;
  }
  @keyframes floaty {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -10px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .float-card { animation: none !important; }
    * { transition-duration: 0.01ms !important; }
  }
  @media (min-width: 900px) {
    .hero-grid { grid-template-columns: 1.05fr 0.95fr; padding: 66px 0 110px; }
    .hero-visual { display: block; }
  }

  /* Asymmetrisk kurve-overgang ud af heroen */
  .hero-curve { position: relative; display: block; width: 100%; height: 64px; margin-top: -64px; }
  .hero-curve svg { display: block; width: 100%; height: 100%; }

  /* ============ Section headings ============ */
  section { padding: 56px 0; }
  .section-head { margin-bottom: 28px; }
  .section-head h2 {
    font-size: clamp(1.5rem, 3.6vw, 2rem);
    font-weight: 830;
    letter-spacing: -0.028em;
    color: var(--navy);
    line-height: 1.15;
  }
  .section-head p { color: var(--muted); margin-top: 8px; max-width: 58ch; font-weight: 450; }
  .kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--green-dark);
    margin-bottom: 10px;
  }
  .kicker::before {
    content: "";
    width: 22px; height: 2px;
    border-radius: 2px;
    background: var(--green);
  }

  /* ============ Sammenligningstabel ============ */
  .table-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
  }
  .updated {
    font-size: 0.82rem;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .updated .pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    flex: none;
    box-shadow: 0 0 0 3px rgba(15, 160, 92, 0.16);
  }
  .sort-hint { font-size: 0.78rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }

  .comp {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }

  .comp-head {
    display: none;
    grid-template-columns: 1.7fr 0.95fr 1.15fr 1.55fr 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 20px;
    background: #F2F5F8;
    border-bottom: 1px solid var(--line);
  }
  .comp-head .col { font-size: 0.72rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.09em; color: var(--navy-soft); }
  .sort-btn {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    margin-left: -6px;
    border-radius: 6px;
  }
  .sort-btn:hover { color: var(--navy); background: rgba(33, 96, 211, 0.08); }
  .sort-btn .arrow { display: inline-flex; opacity: 0.4; transition: opacity 0.15s, transform 0.2s; font-size: 0.85em; }
  .sort-btn[data-dir] .arrow { opacity: 1; color: var(--blue); }
  .sort-btn[data-dir="asc"] .arrow { transform: rotate(180deg); }

  .comp-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    padding: 20px 18px 16px;
    border-bottom: 1px solid var(--line);
    transition: background 0.15s;
  }
  .comp-row:last-child { border-bottom: none; }
  .comp-row:hover { background: #F7FAFC; }
  .comp-row.top {
    background: linear-gradient(180deg, var(--green-tint) 0%, #FAFDFB 100%);
    border-left: 3px solid var(--green);
  }
  .comp-row.top:hover { background: linear-gradient(180deg, #E4F8EE 0%, #F5FBF7 100%); }

  .best-badge {
    position: absolute;
    top: -1px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--green);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 4px 12px 5px 10px;
    border-radius: 0 0 9px 9px;
    box-shadow: 0 2px 6px rgba(15, 160, 92, 0.3);
  }
  .best-badge .ic { font-size: 1.05em; }

  .cell-brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 13px; }
  .comp-row.top .cell-brand { margin-top: 12px; }
  .brand-logo {
    position: relative;
    width: 48px; height: 48px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 830;
    font-size: 1.02rem;
    letter-spacing: -0.03em;
    flex: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      inset 0 -10px 14px rgba(0, 0, 0, 0.22),
      0 2px 6px rgba(11, 27, 48, 0.18);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  }
  .brand-logo::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    pointer-events: none;
  }
  .lg-bet365 { background: linear-gradient(150deg, #1B7A45 0%, #0E5A31 100%); }
  .lg-unibet { background: linear-gradient(150deg, #2E7D32 0%, #14532D 100%); }
  .lg-leo    { background: linear-gradient(150deg, #F59E0B 0%, #B45309 100%); }
  .lg-betsson{ background: linear-gradient(150deg, #F97316 0%, #B91C1C 100%); }
  .lg-mrgreen{ background: linear-gradient(150deg, #10B981 0%, #065F46 100%); }
  .brand-name { font-weight: 750; font-size: 1.05rem; color: var(--navy); letter-spacing: -0.01em; }
  .brand-license { font-size: 0.74rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
  .brand-license .ic { font-size: 0.95em; color: var(--green-dark); }

  .cell-rating { display: flex; flex-direction: column; gap: 4px; }
  .stars {
    position: relative;
    display: inline-block;
    width: 92px; height: 17px;
    line-height: 0;
  }
  .stars .base, .stars .fill {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 3px;
  }
  .stars .fill { overflow: hidden; }
  .stars svg { width: 16px; height: 16px; flex: none; }
  .stars .base svg { fill: #DCE3EB; }
  .stars .fill svg { fill: var(--gold); }
  .rating-num { font-weight: 750; font-size: 0.92rem; color: var(--navy); font-variant-numeric: tabular-nums; }
  .rating-num small { font-weight: 500; color: var(--muted); }

  .cell-bonus { text-align: right; }
  .bonus-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }
  .bonus-amount {
    font-size: 1.7rem;
    font-weight: 850;
    letter-spacing: -0.04em;
    color: var(--navy);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .bonus-amount .kr { color: var(--green-dark); }
  .bonus-amount .pre { font-size: 0.55em; font-weight: 650; letter-spacing: -0.01em; color: var(--muted); margin-right: 2px; }

  .cell-highlights { grid-column: 1 / -1; }
  .cell-highlights ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
  .cell-highlights li {
    font-size: 0.85rem;
    color: var(--navy-soft);
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .cell-highlights .ic-chip {
    width: 24px; height: 24px;
    font-size: 0.8rem;
    background: var(--green-tint);
    color: var(--green-dark);
  }
  .cell-highlights .ic-chip.hc-blue { background: var(--blue-tint); color: var(--blue); }
  .cell-highlights .ic-chip.hc-gold { background: #FDF4DC; color: #B07E0A; }

  .cell-cta { grid-column: 1 / -1; }
  .btn-bonus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    background: var(--green);
    color: #fff;
    font-weight: 720;
    font-size: 0.95rem;
    padding: 12px 20px;
    border-radius: 11px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 3px 10px rgba(15, 160, 92, 0.26);
    transition: background 0.15s, transform 0.15s;
  }
  .btn-bonus:hover { background: var(--green-dark); text-decoration: none; transform: translateY(-1px); }
  .btn-bonus .ic { font-size: 0.9em; opacity: 0.85; }
  .review-link { display: block; text-align: center; font-size: 0.8rem; margin-top: 8px; font-weight: 600; }

  .cell-terms {
    grid-column: 1 / -1;
    font-size: 0.7rem;
    color: #86919F;
    line-height: 1.5;
    border-top: 1px dashed var(--line);
    padding-top: 9px;
    margin-top: 2px;
    display: flex;
    align-items: baseline;
    gap: 7px;
  }
  .cell-terms .ic { font-size: 0.95rem; color: #A6B0BD; position: relative; top: 2px; }
  .cell-terms a { color: #86919F; text-decoration: underline; text-underline-offset: 2px; }
  .cell-terms a:hover { color: var(--navy-soft); }

  @media (min-width: 768px) {
    .comp-head { display: grid; }
    .comp-row {
      grid-template-columns: 1.7fr 0.95fr 1.15fr 1.55fr 1fr;
      align-items: center;
      gap: 8px 12px;
      padding: 22px 20px 14px;
    }
    .cell-brand { grid-column: auto; }
    .comp-row.top .cell-brand { margin-top: 0; }
    .comp-row.top { border-left: none; }
    .comp-row.top .best-badge { left: 20px; }
    .cell-bonus { text-align: left; }
    .bonus-amount { font-size: 1.5rem; }
    .cell-highlights { grid-column: auto; }
    .cell-cta { grid-column: auto; }
    .btn-bonus { padding: 11px 14px; font-size: 0.9rem; }
    .cell-terms { grid-column: 1 / -1; margin-top: 6px; }
  }

  /* ============ Anmeldelser ============ */
  .reviews { background: var(--surface); border-block: 1px solid var(--line); position: relative; }
  .reviews::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(11,27,48,0.5) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.03;
    pointer-events: none;
  }
  .reviews .wrap { position: relative; }
  .card-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
  @media (min-width: 768px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

  .review-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
  }
  .review-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #D2DCE6; }
  .review-top { display: flex; align-items: center; gap: 14px; }
  .score-ring {
    --pct: 90;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: conic-gradient(var(--green) calc(var(--pct) * 1%), #E1E8EF 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .score-ring span {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 830;
    font-size: 0.95rem;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
  }
  .review-top h3 { font-size: 1.05rem; font-weight: 750; color: var(--navy); letter-spacing: -0.01em; }
  .review-top .verdict { font-size: 0.78rem; color: var(--green-dark); font-weight: 650; }
  .review-card p.excerpt { font-size: 0.88rem; color: var(--navy-soft); }
  .pros { list-style: none; display: flex; flex-direction: column; gap: 7px; }
  .pros li { font-size: 0.85rem; color: var(--ink); display: flex; gap: 9px; align-items: center; }
  .pros .ic-chip { width: 21px; height: 21px; border-radius: 7px; font-size: 0.72rem; background: var(--green-tint); color: var(--green-dark); }
  .review-card .more { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 0.88rem; margin-top: auto; }
  .review-card .more .ic { font-size: 0.95em; transition: transform 0.15s; }
  .review-card:hover .more .ic { transform: translateX(3px); }

  /* ============ Guides ============ */
  .guide-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s, transform 0.15s;
  }
  .guide-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

  /* Komponerede CSS-thumbnails — forskelligt mønster pr. kort */
  .guide-thumb {
    height: 138px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .guide-thumb .thumb-chip {
    position: relative;
    z-index: 2;
    width: 54px; height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.25);
    backdrop-filter: blur(3px);
    transition: transform 0.2s;
  }
  .guide-card:hover .thumb-chip { transform: translateY(-3px) rotate(-2deg); }
  /* 1: navy + diagonale striber (regnestykket bag bonussen) */
  .gt-1 { background: linear-gradient(150deg, #10233C 0%, #0B1B30 100%); }
  .gt-1::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: repeating-linear-gradient(-52deg, rgba(43, 213, 127, 0.13) 0 2px, transparent 2px 18px);
    transform: rotate(0.001deg);
  }
  .gt-1::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(220px 120px at 82% 8%, rgba(43, 213, 127, 0.2), transparent 70%);
  }
  /* 2: grøn bane + kridtstreger (begynderguiden) */
  .gt-2 { background: linear-gradient(150deg, #0E7A46 0%, #0A5A34 100%); }
  .gt-2::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(rgba(255,255,255,0.14) 1.5px, transparent 1.5px) 0 0 / 100% 34px,
      radial-gradient(circle at 50% 120%, transparent 58px, rgba(255,255,255,0.14) 58px, rgba(255,255,255,0.14) 60px, transparent 60px);
  }
  .gt-2::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(240px 130px at 15% 0%, rgba(255, 255, 255, 0.12), transparent 65%);
  }
  /* 3: mørk slate + koncentriske ringe (odds-radar) */
  .gt-3 { background: linear-gradient(150deg, #1D2A3C 0%, #131E2D 100%); }
  .gt-3::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 78% 42%, transparent 26px, rgba(240, 180, 41, 0.2) 26px 27.5px, transparent 27.5px 52px, rgba(240, 180, 41, 0.13) 52px 53.5px, transparent 53.5px 80px, rgba(240, 180, 41, 0.08) 80px 81.5px, transparent 81.5px);
  }
  .gt-3::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(200px 120px at 10% 100%, rgba(33, 96, 211, 0.22), transparent 70%);
  }

  .guide-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
  .tag {
    align-self: flex-start;
    font-size: 0.66rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--green-dark);
    background: var(--green-tint);
    padding: 3px 10px;
    border-radius: 999px;
  }
  .tag.t-blue { color: var(--blue); background: var(--blue-tint); }
  .tag.t-gold { color: #96690A; background: #FDF4DC; }
  .guide-body h3 { font-size: 1rem; font-weight: 720; color: var(--navy); line-height: 1.38; letter-spacing: -0.008em; }
  .guide-body h3 a { color: inherit; }
  .guide-body h3 a:hover { color: var(--blue); text-decoration: none; }
  .guide-date { font-size: 0.78rem; color: var(--muted); margin-top: auto; display: inline-flex; align-items: center; gap: 6px; }
  .guide-date .ic { font-size: 0.95em; }

  /* ============ FAQ ============ */
  .faq { background: var(--surface); border-block: 1px solid var(--line); }
  .faq-list { max-width: 740px; display: flex; flex-direction: column; gap: 10px; }
  .faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    overflow: hidden;
    transition: border-color 0.15s;
  }
  .faq-item:hover { border-color: #C6D1DE; }
  .faq-item[open] { border-color: var(--green); background: var(--surface); box-shadow: var(--shadow-sm); }
  .faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--navy);
    padding: 16px 20px;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary .ic {
    font-size: 1.1rem;
    color: var(--green-dark);
    transition: transform 0.2s;
  }
  .faq-item[open] summary .ic { transform: rotate(180deg); }
  .faq-item .answer { padding: 0 20px 18px; font-size: 0.9rem; color: var(--navy-soft); max-width: 62ch; }

  /* ============ Ansvarligt spil ============ */
  .responsible {
    position: relative;
    background: linear-gradient(162deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #C3CEDC;
    overflow: hidden;
  }
  .responsible::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.045;
    pointer-events: none;
  }
  .responsible .inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
  }
  .age-badge {
    width: 54px; height: 54px;
    border-radius: 50%;
    border: 2.5px solid #E1E8F1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 830;
    font-size: 1.02rem;
    flex: none;
    letter-spacing: -0.02em;
  }
  .responsible h2 { color: #fff; font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 830; letter-spacing: -0.025em; }
  .responsible p { max-width: 58ch; font-size: 0.94rem; margin-top: 8px; }
  .help-links { display: flex; flex-wrap: wrap; gap: 12px; }
  .help-btn {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 13px;
    padding: 13px 22px 13px 16px;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
  }
  .help-btn .ic { font-size: 1.15rem; margin-top: 2px; color: var(--green-bright); }
  .help-btn .txt { display: flex; flex-direction: column; gap: 2px; }
  .help-btn small { font-weight: 500; font-size: 0.76rem; color: #A2B0C2; }
  .help-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.42);
    text-decoration: none;
    transform: translateY(-1px);
  }
  @media (min-width: 768px) {
    .responsible .inner { flex-direction: row; align-items: center; gap: 32px; }
    .responsible .text { flex: 1; }
  }

  /* ============ Footer ============ */
  footer.site {
    background: #060F1C;
    color: #8291A4;
    padding: 44px 0 32px;
    font-size: 0.85rem;
  }
  .footer-top {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }
  footer .logo { color: #fff; font-size: 1.1rem; }
  .footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
  .footer-links a { color: #A7B4C5; font-weight: 500; }
  .footer-links a:hover { color: #fff; }
  .footer-bottom { padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
  .footer-age {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #C1CBD9;
    font-weight: 600;
  }
  .footer-age .age-badge { width: 38px; height: 38px; font-size: 0.8rem; border-width: 2px; }
  .disclaimer { font-size: 0.76rem; line-height: 1.6; max-width: 72ch; }
  @media (min-width: 768px) {
    .footer-top { flex-direction: row; align-items: center; justify-content: space-between; }
  }

  .draft-badge {
    margin-top: 22px;
    text-align: center;
  }
  .draft-badge span {
    display: inline-block;
    font-size: 0.7rem;
    color: #5B6A80;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 5px 16px;
    letter-spacing: 0.02em;
  }
  .draft-badge a { color: #7A89A0; }


/* ==========================================================================
   Tilføjelser til design-udkastet.
   Alt herunder er nyt, som mockup'en ikke dækkede: anmeldelsessiden,
   filtrering, brødkrumme, indholdstypografi og admin-agtige tilstande.
   Bruger de SAMME tokens som designet, så det ikke kan skride fra hinanden.
   ========================================================================== */

/* ==========================================================================
   Rettelser oven på designet
   ========================================================================== */

/* theme.json giver ALLE overskrifter navy (så Gutenberg-editoren viser brandets
   farver). På den mørke hero blev h1 derved navy-på-navy = usynlig.
   Vi sætter den eksplicit tilbage til hvid. */
.hero h1 { color: #fff; }
.hero h1 em { color: var(--green-bright); }
.bonus-box h2, .bonus-box .bb-amount { color: #fff; }
.responsible h2 { color: #fff; }

/* wp_nav_menu udsender <li>-elementer. Designet var tegnet til rene <a>,
   så vi fjerner listemarkørerne og lader li'erne opføre sig som links.

   Listen bliver i DOM'en af hensyn til skærmlæsere og arver navens flex-layout. */
nav.main .bt-menu,
.footer-links .bt-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: inherit;
}
nav.main li,
.footer-links li { list-style: none; display: block; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
nav.main .current-menu-item a { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* --- Tilgængelighed --- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* --- Brødkrumme --- */
.crumbs { background: var(--surface); border-bottom: 1px solid var(--line); font-size: 0.82rem; }
.crumbs .wrap { display: flex; gap: 8px; align-items: center; padding-top: 12px; padding-bottom: 12px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--green-dark); }
.crumbs .sep { color: #C3CDD8; }
.crumbs [aria-current] { color: var(--navy); font-weight: 650; }

/* --- Sorterbare kolonner --- */
/* Sortér-headers skal LIGNE noget man kan klikke på — en diskret chip-affordance
   (box-shadow-pille, så den ikke skubber grid-layoutet), grøn ved hover/aktiv. */
.comp-head .sortable {
  cursor: pointer; user-select: none; border-radius: 6px;
  background: rgba(11, 27, 48, 0.05);
  box-shadow: 0 0 0 5px rgba(11, 27, 48, 0.05);
  transition: color 0.12s, background 0.12s, box-shadow 0.12s;
}
.comp-head .sortable:hover,
.comp-head .sorted-asc,
.comp-head .sorted-desc {
  color: var(--green-dark);
  background: var(--green-tint);
  box-shadow: 0 0 0 5px var(--green-tint);
}
.comp-head .sortable:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.comp-head .ic.s { opacity: 0.55; transition: transform 0.15s, opacity 0.15s; }
.comp-head .sortable:hover .ic.s { opacity: 1; }
.comp-head .sorted-asc .ic.s { opacity: 1; transform: rotate(180deg); color: var(--green); }
.comp-head .sorted-desc .ic.s { opacity: 1; color: var(--green); }

/* --- Filtrering --- */
.comp-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.comp-filter .f-item { display: flex; flex-direction: column; gap: 4px; }
.comp-filter .f-item > span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 650; }
.comp-filter select {
  font: inherit; font-size: 0.88rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 11px; min-width: 130px;
}
.comp-filter select:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.comp-filter .f-check { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--ink); align-self: flex-end; padding-bottom: 8px; }
.comp-filter .f-check input { width: 17px; height: 17px; accent-color: var(--green); }
.comp-filter .f-reset {
  margin-left: auto; align-self: flex-end; font: inherit; font-size: 0.84rem; font-weight: 650;
  color: var(--muted); background: none; border: 0; cursor: pointer; padding: 8px 4px;
}
.comp-filter .f-reset:hover { color: var(--navy); text-decoration: underline; }
.comp-noresult {
  text-align: center; padding: 34px; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); margin-top: 14px;
}
.bt-empty { text-align: center; padding: 40px; color: var(--muted); }

/* Logo som rigtigt billede (når Kenneth uploader et) */
.brand-logo-img { background: var(--surface) !important; border: 1px solid var(--line); overflow: hidden; }
.brand-logo-img img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

/* ==========================================================================
   Anmeldelsesside (single bookmaker)
   ========================================================================== */
.bm-single { padding: 40px 0 10px; }
.bm-single .wrap { max-width: 1120px; }

.bm-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.bm-head .brand-logo { width: 62px; height: 62px; border-radius: 16px; font-size: 1.15rem; }
.bm-head-body { flex: 1; min-width: 220px; }
.bm-head h1 { font-size: clamp(1.55rem, 3.4vw, 2.15rem); font-weight: 800; color: var(--navy); letter-spacing: -0.025em; line-height: 1.15; }
.bm-head-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 7px; }
.bm-checked { font-size: 0.76rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.bm-checked .ic { color: var(--green-dark); }
.bm-score { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bm-score .verdict { font-size: 0.76rem; font-weight: 650; color: var(--green-dark); }

.bm-layout { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 940px) { .bm-layout { grid-template-columns: 1fr 320px; align-items: start; } }

/* Bonusboks — sidens vigtigste element */
.bonus-box {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--radius); padding: 24px; color: #fff; box-shadow: var(--shadow-lg);
}
.bonus-box .bb-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.bonus-box .bonus-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; color: var(--green-bright); }
.bonus-box .bb-amount { display: block; font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 830; letter-spacing: -0.03em; margin-top: 3px; }
.bonus-box .bb-oms { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.82rem; color: #A7B4C5; }
.bonus-box .bb-oms .ic { color: var(--green-bright); }
.bonus-box .btn-bonus { flex: none; }
.bonus-box .bb-info { margin-top: 14px; font-size: 0.88rem; color: #C3CDD8; line-height: 1.55; }
.bonus-box .bb-terms {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; gap: 8px; align-items: flex-start; font-size: 0.72rem; color: #8FA0B4;
}
.bonus-box .bb-terms .ic { flex: none; margin-top: 2px; }
.bonus-box .bb-terms a { color: #A7B4C5; text-decoration: underline; }

/* Fordele / ulemper */
.pc-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 26px; }
@media (min-width: 700px) { .pc-grid { grid-template-columns: 1fr 1fr; } }
.pc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.pc h2 { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 750; color: var(--navy); margin-bottom: 14px; }
.pc-pro h2 .ic { color: var(--green); }
.pc-con h2 .ic { color: #C2703B; }
.cons { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.cons li { font-size: 0.85rem; color: var(--ink); display: flex; gap: 9px; align-items: center; }
.cons .ic-chip { width: 21px; height: 21px; border-radius: 7px; font-size: 0.72rem; background: #FBF0E7; color: #C2703B; flex: none; display: inline-flex; align-items: center; justify-content: center; }

/* Faktaboks */
.bm-side { position: sticky; top: 86px; }
.fact-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.fact-box h2 { font-size: 1rem; font-weight: 750; color: var(--navy); margin-bottom: 14px; }
.fact-box dl { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.fact-box dl > div { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.fact-box dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.fact-box dt { display: flex; align-items: center; gap: 7px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 650; color: var(--muted); }
.fact-box dt .ic { color: var(--green-dark); }
.fact-box dd { font-size: 0.92rem; color: var(--ink); font-weight: 600; }
.fact-box .btn-bonus { width: 100%; justify-content: center; }
.fact-terms { display: flex; gap: 7px; align-items: flex-start; margin-top: 12px; font-size: 0.68rem; color: var(--muted); line-height: 1.45; }
.fact-terms .ic { flex: none; margin-top: 2px; }

.bm-verdict { margin-top: 30px; }
.bm-verdict h2, .bm-faq h2 { font-size: 1.25rem; font-weight: 780; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 14px; }
.bm-faq { margin-top: 34px; padding: 0; background: none; }
.bm-compare { margin-top: 46px; }

/* ==========================================================================
   Sider, guides og indholdstypografi
   ========================================================================== */
.wrap.narrow { max-width: 760px; }
.page-hero, .archive { padding: 44px 0 20px; }
.page-single { padding: 40px 0 20px; }
.page-head { margin-bottom: 26px; }
.page-head h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: var(--navy); letter-spacing: -0.03em; line-height: 1.12; }
.page-head p { margin-top: 10px; color: var(--navy-soft); font-size: 1.02rem; }
.page-head .tag { margin-bottom: 10px; display: inline-block; }
.page-head .guide-date { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted); }

.entry { color: var(--ink); font-size: 1rem; line-height: 1.72; }
.entry > * + * { margin-top: 1.1em; }
.entry h2 { font-size: 1.4rem; font-weight: 780; color: var(--navy); letter-spacing: -0.02em; margin-top: 1.7em; }
.entry h3 { font-size: 1.12rem; font-weight: 720; color: var(--navy); margin-top: 1.5em; }
/* Links KUN i brødtekst.
   Var det bare ".entry a", ramte reglen også knapper og vores egne blokke:
   en "Hent bonus"-knap blev til blå, understreget tekst i det øjeblik
   sammenligningstabellen blev sat ind i en side. Vi peger derfor præcist på
   de steder, hvor et link faktisk ER brødtekst. */
.entry :is(p, li, td, th, blockquote, figcaption, dd) a {
  color: var(--blue); text-decoration: underline; text-underline-offset: 2px;
}
.entry :is(p, li, td, th, blockquote, figcaption, dd) a:hover { color: var(--green-dark); }
.entry ul, .entry ol { padding-left: 1.3em; }
.entry ul { list-style: disc; }
.entry ol { list-style: decimal; }
.entry li + li { margin-top: 0.4em; }
.entry strong { font-weight: 700; color: var(--navy); }
.entry blockquote {
  border-left: 3px solid var(--green); padding: 4px 0 4px 18px; color: var(--navy-soft); font-style: italic;
}
.entry img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.entry table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.entry th, .entry td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.entry th { background: var(--bg); font-weight: 700; color: var(--navy); }

/* Paginering */
.pagination { display: flex; justify-content: center; gap: 7px; margin-top: 34px; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
  padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-weight: 650; font-size: 0.88rem;
}
.pagination .page-numbers:hover { border-color: var(--green); color: var(--green-dark); }
.pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }

.copyright { margin-top: 12px; font-size: 0.74rem; color: #6E7E92; }

/* Design-udkastets vandmærke hører ikke hjemme på det rigtige site */
.draft-badge { display: none !important; }

/* Guide-thumbnail med rigtigt billede (fallback = designets CSS-thumbnail) */
.guide-thumb.has-img { display: block; padding: 0; overflow: hidden; background: var(--navy-deep); }
.guide-thumb.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.guide-card:hover .guide-thumb.has-img img { transform: scale(1.04); }

/* Guide-side: billede i toppen */
.guide-hero { margin-bottom: 26px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--navy-deep); }
.guide-hero img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   Bonus-beregner
   ========================================================================== */
.beregner {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-md); margin: 30px 0;
}
.ber-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.ber-head .ic-chip { width: 38px; height: 38px; border-radius: 11px; background: var(--green-tint); color: var(--green-dark); font-size: 1.05rem; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.ber-head h2 { font-size: 1.2rem; font-weight: 780; color: var(--navy); letter-spacing: -0.02em; }
.ber-head p { font-size: 0.9rem; color: var(--navy-soft); margin-top: 3px; }

.ber-inputs { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .ber-inputs { grid-template-columns: repeat(3, 1fr); } }
.ber-field { display: flex; flex-direction: column; gap: 5px; }
.ber-field > span:first-child { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 650; color: var(--muted); }
.ber-input { display: flex; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.ber-input:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(15, 160, 92, 0.12); }
.ber-input input {
  flex: 1; min-width: 0; font: inherit; font-size: 1.15rem; font-weight: 750; color: var(--navy);
  background: none; border: 0; padding: 11px 12px; font-variant-numeric: tabular-nums;
}
.ber-input input:focus { outline: none; }
.ber-input .suffix { padding: 0 13px 0 4px; font-size: 0.9rem; font-weight: 650; color: var(--muted); }

.ber-resultat {
  display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 20px;
  background: var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
@media (min-width: 620px) { .ber-resultat { grid-template-columns: repeat(3, 1fr); } }
.ber-tal { background: var(--bg); padding: 15px 17px; display: flex; flex-direction: column; gap: 3px; }
.ber-tal .k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 650; color: var(--muted); }
.ber-tal strong { font-size: 1.35rem; font-weight: 830; color: var(--navy); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.ber-tal.fremhaev { background: var(--navy); }
.ber-tal.fremhaev .k { color: var(--green-bright); }
.ber-tal.fremhaev strong { color: #fff; }
.ber-tal.fremhaev strong.negativ { color: #FF9B85; }

.ber-forklaring { margin-top: 15px; font-size: 0.92rem; color: var(--ink); line-height: 1.6; }
.ber-note { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: flex-start; font-size: 0.75rem; color: var(--muted); line-height: 1.55; }
.ber-note .ic { flex: none; margin-top: 2px; color: var(--green-dark); }

/* Relaterede guides */
.rel-guides { margin-top: 44px; }
.rel-guides h2 { font-size: 1.25rem; font-weight: 780; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 16px; }

/* ==========================================================================
   Fuldbredde-udbrud
   Sammenligningstabellen har brug for ~1120px. Placeres den i en side med den
   smalle læse-kolonne (760px), bliver kolonnerne klemt og knapperne brækker.
   Her bryder den ud af kolonnen og centreres — uden at røre selve sidebredden.
   ========================================================================== */
.wrap.narrow .comp-wrap {
  width: min(1120px, calc(100vw - 40px));
  margin-left: 50%;
  transform: translateX(-50%);
}
/* "Hent bonus" må aldrig brække over to linjer */
.btn-bonus { white-space: nowrap; }

/* ==========================================================================
   Søgefelt
   Bruges på 404 og ved en søgning uden resultater. Ligger ikke i headeren:
   folk søger ikke på et sammenligningssite, de klikker. Men er de først faret
   vild, skal feltet være der.
   ========================================================================== */
.bt-search {
  display: flex; gap: 8px; max-width: 520px; margin: 0 auto 26px;
}
.bt-search input[type="search"] {
  flex: 1; min-width: 0;
  padding: 13px 16px; font-size: 15px; font-family: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  outline: none;
}
.bt-search input[type="search"]:focus {
  border-color: var(--green-dark); outline: 2px solid var(--green-dark); outline-offset: 2px;
}
.bt-search input[type="search"]::placeholder { color: #5D6B7E; }
.bt-search button {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 13px 20px; font-size: 15px; font-weight: 600; font-family: inherit;
  color: #fff; background: var(--green); border: 0; border-radius: var(--radius-sm);
  cursor: pointer;
}
.bt-search button:hover { background: var(--green-dark); }
.bt-search button svg { width: 17px; height: 17px; }

/* ==========================================================================
   Tom tilstand
   ========================================================================== */
.bt-empty { text-align: center; padding: 46px 20px 30px; color: var(--muted); }
.bt-empty > p { font-size: 16px; margin-bottom: 22px; }
.bt-empty-links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.bt-empty-links a { color: var(--blue); font-weight: 600; }

/* ==========================================================================
   404
   En 404 er en besøgende på vej et sted hen. Siden skal hjælpe dem videre,
   ikke bare beklage — derfor kort med de tre veje folk faktisk leder efter.
   ========================================================================== */
.err404 .page-head { text-align: center; }
.err404 .err-code {
  display: block; font-size: 62px; font-weight: 800; line-height: 1;
  color: var(--line); letter-spacing: -.02em; margin-bottom: 6px;
}
.err404 .page-head p { max-width: 52ch; margin-left: auto; margin-right: auto; }

.err-links { display: grid; gap: 12px; margin: 0 0 40px; }
.err-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); transition: border-color .15s, transform .15s;
}
.err-card:hover { border-color: var(--green); transform: translateY(-1px); }
.err-card .ic-chip { flex: none; }
.err-card .txt b { display: block; font-size: 15px; font-weight: 700; }
.err-card .txt small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

.err-top { margin-top: 8px; }
.err-top h2 { font-size: 19px; margin-bottom: 16px; text-align: center; }

/* Kategori-mærkatet på et guide-kort er nu et link — det må ikke ligne brødtekst */
.guide-card .tag { text-decoration: none; }
.guide-card .tag:hover { filter: brightness(.94); }

/* ==========================================================================
   Gutenberg-blokke
   Kenneth skriver i block-editoren. Alt hvad han kan finde på at indsætte,
   skal se ud som om det hører til — ikke som WordPress' standard oven på
   vores design. Det her er de blokke, han realistisk kommer til at bruge.
   ========================================================================== */

/* Knapper. Standarden er en grå kasse; den skal være brandets grønne. */
.entry .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.entry .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: 0.95rem; line-height: 1;
  color: #fff; background: var(--green);
  text-decoration: none; border: 1px solid var(--green);
  transition: background .15s, border-color .15s;
}
.entry .wp-block-button__link:hover {
  background: var(--green-dark); border-color: var(--green-dark); color: #fff;
}
.entry .is-style-outline .wp-block-button__link,
.entry .wp-block-button__link.is-style-outline {
  background: transparent; color: var(--green-dark); border-color: var(--line);
}
.entry .is-style-outline .wp-block-button__link:hover {
  background: var(--green-tint); border-color: var(--green); color: var(--green-dark);
}

/* Skillelinje */
.entry hr, .entry .wp-block-separator {
  border: 0; height: 1px; background: var(--line); margin: 2.2em 0;
}

/* Billedtekst */
.entry figcaption, .entry .wp-element-caption {
  font-size: 0.85rem; color: var(--muted); margin-top: 8px; text-align: left;
}

/* Kolonner. Skal stables på mobil, ikke klemmes. */
.entry .wp-block-columns { display: flex; gap: 28px; }
.entry .wp-block-column { flex: 1; min-width: 0; }
@media (max-width: 700px) {
  .entry .wp-block-columns { flex-direction: column; gap: 0; }
  .entry .wp-block-column + .wp-block-column { margin-top: 1.1em; }
}

/* Tabel: skal kunne scrolle vandret på mobil frem for at sprænge siden */
.entry .wp-block-table { overflow-x: auto; }
.entry .wp-block-table table { min-width: 460px; }

/* Overskrift niveau 4, kode og "citat med stor tekst" — sjældne, men de findes */
.entry h4 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-top: 1.4em; }
.entry code {
  background: var(--bg); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; font-size: 0.88em;
}
.entry .wp-block-pullquote { border-top: 0; border-bottom: 0; text-align: left; }
.entry cite { display: block; margin-top: 8px; font-style: normal; font-size: 0.86rem; color: var(--muted); }

/* Vores egne blokke må gerne stå frit i indholdet uden at arve brødtekst-mål */
.entry .comp-wrap, .entry .beregner { margin-top: 1.8em; }

/* ==========================================================================
   Mobilmenu
   Design-udkastet skjulte menuen helt under 768px. På et site hvor 70 % af
   trafikken er mobil, betød det, at flertallet af de besøgende ikke kunne
   navigere. Her er den rigtige menu.
   ========================================================================== */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  order: 3; /* visuelt yderst til højre, men sidst i tastatur-rækkefølgen */
  width: 42px; height: 42px; flex: none; margin-left: 4px;
  background: rgba(255, 255, 255, 0.08); border: 0; border-radius: 10px;
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.14); }
.nav-toggle:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; }

.burger { display: block; width: 18px; height: 13px; position: relative; }
.burger span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: #fff; transition: transform .2s ease, opacity .15s ease;
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 50%; margin-top: -1px; }
.burger span:nth-child(3) { bottom: 0; }

/* Åben tilstand: burgeren bliver til et kryds */
.nav-toggle[aria-expanded="true"] .burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 767px) {
  header.site { position: relative; }

  /* Logo + CTA + burger skal dele en smal skærm. Uden dette sprænger de tre
     tilsammen (logo alene er ~249px) headeren og skubber burgeren ud over
     højre kant → vandret scroll. Vi strammer mellemrum og skruer logo/CTA
     lidt ned, så alt får plads på én linje ned til 360px. */
  .header-inner { flex-wrap: nowrap; gap: 8px; padding: 12px 14px; }
  .logo { font-size: 0.95rem; gap: 7px; }
  .logo-mark { width: 26px; height: 26px; }

  /* CTA'en fylder for meget ved siden af en burger på en smal skærm */
  .header-cta { padding: 8px 11px; font-size: 0.78rem; white-space: nowrap; }
  .header-cta .ic { display: none; }

  /* Menuen folder ud som et panel under headeren */
  header.site.nav-open nav.main {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    padding: 10px 16px 16px;
    background: var(--navy-deep);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  }
  header.site.nav-open nav.main a {
    display: block; padding: 13px 12px; font-size: 1rem;
    border-radius: var(--radius-sm);
  }
  header.site.nav-open nav.main .bt-menu { flex-direction: column; width: 100%; }
  header.site.nav-open nav.main li + li a { border-top: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0; }

  .nav-toggle { width: 38px; height: 38px; margin-left: 2px; }
}

/* Sikkerheds-floor til meget smalle skærme (<345px, fx iPhone SE 1. gen):
   her er der ikke plads til CTA'en ved siden af logo + burger. Vi skjuler den
   frem for at lade den sprænge siden — navigationen ligger stadig i menuen. */
@media (max-width: 344px) {
  .header-cta { display: none; }
}

@media (min-width: 768px) {
  .nav-toggle { display: none; }
}

/* ==========================================================================
   Licens
   Sitets præmis: kun bookmakere med dansk licens. Det skal kunne SES, og det
   skal kunne efterprøves — derfor link til Spillemyndighedens egen liste.
   ========================================================================== */

/* Båndet, der går igen på hver eneste side (lige over "ansvarligt spil") */
.licens-baand { background: var(--surface); border-top: 1px solid var(--line); padding: 26px 0; }
.licens-baand .wrap {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.licens-baand .lb-skjold {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--green-tint); color: var(--green-dark);
}
.licens-baand .lb-skjold svg { width: 24px; height: 24px; }
.licens-baand .lb-tekst { flex: 1; min-width: 260px; }
.licens-baand h2 {
  font-size: 1.02rem; font-weight: 750; color: var(--navy); margin-bottom: 3px;
}
.licens-baand p { font-size: 0.86rem; color: var(--muted); line-height: 1.55; max-width: 74ch; }
.licens-baand .lb-verificer {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 17px; border-radius: var(--radius-sm);
  font-size: 0.86rem; font-weight: 650;
  color: var(--green-dark); background: var(--green-tint);
  border: 1px solid transparent;
}
.licens-baand .lb-verificer:hover {
  border-color: var(--green); text-decoration: none; background: #E2F6EB;
}

/* Licensboksen øverst på en anmeldelse */
.licens-boks {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--green-tint); border: 1px solid #CFEBDC;
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 22px;
}
.licens-boks .lb-ic {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: #fff; color: var(--green-dark);
}
.licens-boks .lb-txt b { display: block; font-size: 0.95rem; color: var(--navy); margin-bottom: 3px; }
.licens-boks .lb-txt p { font-size: 0.85rem; color: #3D6A55; line-height: 1.6; }
.licens-boks .lb-txt a { color: var(--green-dark); text-decoration: underline; font-weight: 600; }

/* Uden licens: samme boks, men den skal IKKE se indbydende ud */
.licens-boks.advarsel { background: #FBF0E7; border-color: #EED9C6; }
.licens-boks.advarsel .lb-ic { color: #C2703B; }
.licens-boks.advarsel .lb-txt p { color: #7A4E2C; }
.licens-boks.advarsel .lb-txt a { color: #A85A2A; }

/* Licensmærket ved bookmakerens navn i tabellen */
.brand-license.ingen-licens { color: #A85A2A; }
.brand-license.ingen-licens .ic { color: #A85A2A; }

@media (max-width: 700px) {
  .licens-baand .lb-verificer { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Indholds-komponenter
   Sider bygges af Gutenberg-blokke med disse klasser. Kenneth kan skrive i dem,
   flytte dem og slette dem — men han kan ikke komme til at ødelægge designet,
   for udseendet ligger i CSS'en og ikke i indholdet.
   Findes som færdige mønstre i editoren under "Bookmakertjek".
   ========================================================================== */

/* --- Kort --- */
.entry .bt-kort {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.entry .bt-kort > *:first-child { margin-top: 0; }
.entry .bt-kort h3 { margin-top: 0; font-size: 1.05rem; }
.entry .bt-kort p { font-size: 0.92rem; color: var(--muted); }
.entry .bt-kort p:last-child { margin-bottom: 0; }

/* Ikon-chip øverst i et kort (skrives som et emoji eller en overskrift) */
.entry .bt-kort .bt-ikon {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--green-tint); color: var(--green-dark);
  font-size: 1.15rem; margin-bottom: 12px;
}

/* --- Trin (nummererede kort) --- */
.entry .bt-trin { counter-increment: bt-trin; position: relative; padding-top: 30px; }
.entry .bt-trin::before {
  content: counter(bt-trin);
  position: absolute; top: 22px; left: 24px;
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--navy); color: #fff;
  font-size: 0.8rem; font-weight: 700;
}
.entry .wp-block-columns { counter-reset: bt-trin; }

/* --- Pointe (den ting, læseren skal huske) --- */
.entry .bt-pointe {
  background: var(--green-tint); border-left: 3px solid var(--green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 22px;
}
.entry .bt-pointe > *:first-child { margin-top: 0; }
.entry .bt-pointe > *:last-child { margin-bottom: 0; }
.entry .bt-pointe strong { color: var(--green-dark); }

/* --- Advarsel (bruges på ansvarligt spil) --- */
.entry .bt-advarsel {
  background: #FBF0E7; border-left: 3px solid #C2703B;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 22px;
}
.entry .bt-advarsel strong { color: #A85A2A; }
.entry .bt-advarsel > *:last-child { margin-bottom: 0; }

/* --- CTA-boks --- */
.entry .bt-cta {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--radius); padding: 30px 32px; text-align: center;
  box-shadow: var(--shadow-lg);
}
.entry .bt-cta h2, .entry .bt-cta h3 { color: #fff; margin-top: 0; }
.entry .bt-cta p { color: #A7B4C5; max-width: 56ch; margin-left: auto; margin-right: auto; }
.entry .bt-cta .wp-block-buttons { justify-content: center; margin-top: 18px; }

/* --- Nøgletal --- */
.entry .bt-tal { text-align: center; }
.entry .bt-tal h3 {
  font-size: 2.1rem; font-weight: 830; color: var(--green-dark);
  letter-spacing: -0.03em; margin: 0 0 2px;
}
.entry .bt-tal p { font-size: 0.85rem; margin: 0; }

/* --- Sidehoved på almindelige sider --- */
.page-hero-band {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff; padding: 44px 0 40px;
}
.page-hero-band h1 {
  color: #fff; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.15;
}
.page-hero-band .ph-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 700; color: var(--green-bright); margin-bottom: 10px;
}
.page-hero-band .ph-manchet {
  margin-top: 10px; font-size: 1.02rem; color: #A7B4C5; max-width: 62ch; line-height: 1.6;
}
.page-single.har-hero { padding-top: 34px; }

/* ==========================================================================
   BLOKKE
   Anmeldelsens midterkolonne er nu blokke. Den har .entry, så almindelig tekst,
   som Kenneth tilføjer mellem blokkene, får den samme typografi som alle andre
   sider — og editoren viser det samme (se _byg-css.js).
   ========================================================================== */

.bm-main > * + * { margin-top: 26px; }

/* --- Bookmaker-kort: fremhæv én bookmaker midt i en tekst --- */
.entry .bm-kort {
  display: grid; grid-template-columns: 56px 1fr auto auto;
  align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 1px 2px rgba(15, 32, 51, 0.04);
}
.entry .bm-kort .brand-logo,
.entry .bm-kort .brand-mono { width: 56px; height: 56px; }
.entry .bm-kort .bk-body { min-width: 0; }
.entry .bm-kort .bk-navn {
  display: block; font-weight: 780; font-size: 1.05rem;
  color: var(--navy); text-decoration: none; letter-spacing: -0.01em;
}
.entry .bm-kort .bk-navn:hover { color: var(--green-dark); }
.entry .bm-kort .bk-meta {
  display: flex; align-items: center; gap: 8px; margin-top: 5px;
}
.entry .bm-kort .bk-bonus { text-align: right; }
.entry .bm-kort .bk-belob {
  display: block; font-weight: 830; font-size: 1.15rem;
  color: var(--green-dark); letter-spacing: -0.02em;
}
.entry .bm-kort .bk-terms {
  grid-column: 1 / -1; margin: 4px 0 0;
  font-size: 0.72rem; color: var(--muted); line-height: 1.5;
}

@media (max-width: 620px) {
  .entry .bm-kort { grid-template-columns: 48px 1fr; }
  .entry .bm-kort .brand-logo,
  .entry .bm-kort .brand-mono { width: 48px; height: 48px; }
  .entry .bm-kort .bk-bonus { grid-column: 1 / -1; text-align: left; }
  .entry .bm-kort .bk-cta { grid-column: 1 / -1; }
  .entry .bm-kort .bk-cta .btn-bonus { width: 100%; justify-content: center; }
}

/* --- Blok sat et sted, den ikke hører hjemme (vises kun i editoren) --- */
.bt-blok-tom {
  border: 1px dashed var(--line); border-radius: 12px;
  background: #F7F9FB; padding: 16px 18px;
  font-size: 0.88rem; color: var(--muted); line-height: 1.55;
}
.bt-blok-tom strong { color: var(--navy); }

/* ==========================================================================
   FORSIDEN SOM BLOKKE
   Forsiden var hårdkodet PHP. Nu er den en almindelig side, bygget af blokke,
   så Kenneth selv kan rette overskrift, manchet, sektionstitler og FAQ.
   De her regler genskaber designets rytme: sektioner i fuld bredde, indhold
   centreret, hvid og tonet baggrund skiftevis.
   ========================================================================== */

.forside > .hero { margin: 0; }

/* Sektion i fuld bredde (bookmakertjek/baand) */
.bt-baand { padding: 56px 0; position: relative; }
.bt-flade {
  background: var(--surface);
  border-block: 1px solid var(--line);
}
/* Det fine prikmønster fra designets anmeldelses-sektion. */
.bt-flade::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(11, 27, 48, 0.5) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.03;
  pointer-events: none;
}
.bt-baand > .wrap { position: relative; }

/* Editoren: samme rytme, men uden fuld bredde at bryde ud i. */
.editor-styles-wrapper .bt-baand { padding: 40px 0; }
.editor-styles-wrapper .bt-baand > .wrap { padding: 0; }

/* ==========================================================================
   Kenneth-feedback (runde 1)
   1) Røde krydser ved ulemper + kraftigere grønne flueben ved fordele
   2) Dansk licens gjort markant med Dannebrog på alle sider + i boks-hjørner
   4) Bookmaker- og bonus-bokse som tydeligt adskilte kort
   ========================================================================== */

/* --- 1) Fordele / ulemper: solide, markante ikoner --- */
.pc-pro { border-color: #CFEBDC; }
.pc-con { border-color: #F1D6D4; }
.pc-pro h2 .ic { color: var(--green); }
.pc-con h2 .ic { color: var(--red); }

/* Fluebenene og krydsene bliver fyldte cirkler med hvidt, kraftigt ikon */
.pros .ic-chip,
.cons .ic-chip {
  width: 23px; height: 23px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; flex: none;
}
.pros .ic-chip { background: var(--green); color: #fff; }
.cons .ic-chip { background: var(--red); color: #fff; }
.pros .ic-chip .ic,
.cons .ic-chip .ic { stroke-width: 2.6; }

/* --- 2) Dannebrog som CSS (ingen billedfil) --- */
.flag-dk {
  --fw: 22px; --fh: 15px;
  position: relative; display: inline-block; vertical-align: -0.18em;
  width: var(--fw); height: var(--fh);
  background: var(--dk-red); border-radius: 2px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.flag-dk::before,
.flag-dk::after { content: ""; position: absolute; background: #fff; }
.flag-dk::before { top: 0; bottom: 0; left: 37%; width: 17%; }   /* korsets lodrette bjælke, mod stangen */
.flag-dk::after  { left: 0; right: 0; top: 40%; height: 20%; }   /* korsets vandrette bjælke */

/* Mærke der lægger sig i hjørnet af en boks ("smyger sig om hjørnet") */
.dk-hjorne {
  position: absolute; top: -11px; right: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 9px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 3px 9px rgba(11, 27, 48, 0.12);
  font-size: 0.7rem; font-weight: 750; color: var(--navy);
  letter-spacing: 0.01em; white-space: nowrap;
}
.dk-hjorne .flag-dk { --fw: 20px; --fh: 13px; }

/* Boksene skal kunne bære et hjørnemærke */
.bonus-box, .fact-box { position: relative; }

/* Flag ved bookmaker-navnets licenslinje */
.brand-license .flag-dk { --fw: 18px; --fh: 12px; margin-right: 1px; }

/* Licens-båndet: markant, med Dannebrog og dansk-rød kant */
.licens-baand {
  background: linear-gradient(180deg, #F3FAF5 0%, var(--surface) 100%);
  border-top: 3px solid var(--dk-red);
}
.licens-baand .lb-skjold {
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.licens-baand .lb-skjold .flag-dk { --fw: 30px; --fh: 20px; }
.licens-baand h2 { font-size: 1.12rem; }

/* --- 4) Bookmaker-kort: tydeligt adskilte kort i stedet for én lang liste --- */
.comp {
  background: transparent; border: 0; box-shadow: none;
  border-radius: 0; overflow: visible;
}
.comp-head { border: 1px solid var(--line); border-radius: 12px; }
.comp-row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 12px;
  box-shadow: var(--shadow-sm);
}
.comp-row:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px);
  border-color: #CFE6D8; background: #fff;
}
.comp-row.top {
  border-color: var(--green);
  box-shadow: 0 8px 22px rgba(15, 160, 92, 0.16);
}

/* --- Spørgsmåls-blokken under redigering --- */
.bt-faq-red { position: relative; padding-right: 96px; }
.bt-faq-red .question {
  font-weight: 700; color: var(--navy); margin: 0;
}
.bt-faq-red .answer { margin: 8px 0 0; color: var(--muted); }
.bt-faq-vaerktoej {
  position: absolute; top: 10px; right: 10px;
  display: flex; gap: 2px; opacity: 0.45; transition: opacity 0.15s;
}
.bt-faq-red:hover .bt-faq-vaerktoej,
.bt-faq-red:focus-within .bt-faq-vaerktoej { opacity: 1; }
.bt-faq-tilfoej { margin-top: 12px; }

/* ==========================================================================
   Kenneth-feedback (runde 2)
   Forside-komprimering, WCAG-kontrast på CTA'er + terms, tydeligere links,
   tillids-tjekliste, grønt licens-bånd, "Se alle guides", stjerner på
   hero-kort, "vores vurdering"-label, footer-synlighed, .guide-tag, sr-text.
   ========================================================================== */

/* --- Kontrast: primær CTA (WCAG AA). Hvid på --green var 3.38:1; --green-dark
   giver 5.14:1. Rammer hver "Hent bonus", hero-CTA, header-CTA, søgeknap og
   editor-knap. --- */
.btn-bonus,
.hero-cta,
.header-cta,
.bt-search button,
.entry .wp-block-button__link {
  background: var(--green-dark);
  border-color: var(--green-dark);
}
.btn-bonus:hover,
.hero-cta:hover,
.header-cta:hover,
.bt-search button:hover,
.entry .wp-block-button__link:hover {
  background: #0A6B3E;
  border-color: #0A6B3E;
}

/* --- Forsiden: komprimér heroen ~15-20% i højden, så toppen af
   sammenligningstabellen anes uden at scrolle --- */
.hero-grid { padding: 40px 0 74px; gap: 34px; }
.hero-eyebrow { margin-bottom: 12px; }
.hero h1 { font-size: clamp(1.95rem, 5vw, 2.9rem); }
.hero p.sub { margin-top: 13px; }
.hero-actions { margin-top: 22px; }
.trust-row { margin-top: 20px; }
@media (min-width: 900px) {
  .hero-grid { padding: 46px 0 86px; }
}

/* --- Hero-note ("Gratis at bruge - ingen skjulte gebyrer!") fremhævet, så den
   ikke drukner i den mørke bund --- */
.hero-note {
  color: #E7F0F9; font-weight: 600; font-size: 0.82rem;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(43, 213, 127, 0.13);
  border: 1px solid rgba(43, 213, 127, 0.3);
}

/* --- Stjerne-rating på de tre hero-kort, så blikket fanges --- */
.float-card .fc-rating { display: flex; align-items: center; gap: 7px; margin: 3px 0 1px; }
.float-card .fc-rating .stars { width: 80px; height: 14px; }
.float-card .fc-rating .stars svg { width: 14px; height: 14px; }
.float-card .fc-num { font-size: 0.72rem; font-weight: 750; color: var(--navy); font-variant-numeric: tabular-nums; }
.float-card .fc-meta { margin-top: 0; }

/* --- "Nulstil"-filter som en lille grå knap i stedet for et anonymt link --- */
.comp-filter .f-reset {
  margin-left: auto; align-self: flex-end;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 14px;
  color: var(--navy-soft); font-weight: 650;
}
.comp-filter .f-reset:hover {
  background: var(--bg); border-color: var(--muted);
  color: var(--navy); text-decoration: none;
}

/* --- "Klik på en kolonne for at sortere": mørkere, træder frem --- */
.sort-hint { color: var(--navy-soft); font-weight: 600; }
.sort-hint .ic { color: var(--navy-soft); opacity: 0.9; }

/* --- Terms-linjen "18+ Gælder nye kunder...": en tone mørkere (WCAG AA) --- */
.cell-terms { color: var(--muted); }
.cell-terms a { color: var(--muted); }
.cell-terms a:hover { color: var(--navy); }

/* --- "Læs anmeldelse"-links: tydeligere, grønne, med pil foran --- */
.review-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--green-dark); font-weight: 700; text-decoration: none;
}
.review-link:hover { color: #0A6B3E; text-decoration: underline; }
.review-link .ic { width: 15px; height: 15px; }
.review-card .more { color: var(--green-dark); font-weight: 700; }

/* --- Lovpligtige oplysninger direkte under bonusomtalerne på forsiden --- */
.review-card .review-terms {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: -2px 0 0;
  padding-top: 10px;
  border-top: 1px dashed #C8D9D0;
  color: var(--navy-soft);
  font-size: 0.75rem;
  line-height: 1.5;
}
.review-card .review-terms > .ic {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 1px;
  color: var(--green-dark);
}
.review-card .review-terms a {
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- "Bookmakertjek.dk's vurdering"-label under stjernerne i tabellen --- */
.rating-caption {
  display: block; font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--muted); font-weight: 650; margin-top: 1px;
}

/* --- Sektionsoverskrift med "se alle"-handling i højre side (fx guides) --- */
.section-head.has-action {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px 28px; flex-wrap: wrap;
}
.section-head.has-action .sh-text { flex: 1 1 320px; }
.section-head .sh-action {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 0.92rem; color: var(--green-dark);
  white-space: nowrap; padding-bottom: 4px;
}
.section-head .sh-action:hover { color: #0A6B3E; text-decoration: underline; }
.section-head .sh-action .ic { width: 17px; height: 17px; transition: transform 0.15s; }
.section-head .sh-action:hover .ic { transform: translateX(3px); }

/* --- Licens-båndet: grøn kant i stedet for dansk-rød (Kenneth runde 2) --- */
.licens-baand {
  background: linear-gradient(180deg, #F3FAF5 0%, var(--surface) 100%);
  border-top: 3px solid var(--green);
}

/* --- Tillids-tjekliste, der balancerer toppen af listesiderne --- */
.page-hero-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px 32px; flex-wrap: wrap;
}
.page-hero-head .section-head { margin-bottom: 0; flex: 1 1 340px; }
.trust-liste { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0; padding: 0; }
.trust-liste li {
  list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 600; color: var(--navy);
}
.trust-liste .tl-ic {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff;
}
.trust-liste .tl-ic .ic { width: 14px; height: 14px; stroke-width: 2.6; }

/* Lys arkiv-/listehero: tjeklisten står lodret til højre for overskriften */
.page-hero .page-hero-head .trust-liste,
.archive .page-hero-head .trust-liste { flex: none; flex-direction: column; gap: 12px; padding-top: 4px; }
@media (max-width: 820px) {
  .page-hero .page-hero-head .trust-liste,
  .archive .page-hero-head .trust-liste { flex-direction: row; }
}
/* Mørk sidehoved-bjælke (bonussiden): lys tekst, vandret under manchetten */
.page-hero-band .trust-liste { margin-top: 20px; }
.page-hero-band .trust-liste li { color: #DCE7F2; }

/* --- Bonussiden: venstrejustér intro-tekst med tabellens venstrekant.
   Tabellen skal bruge ~1120px; prosaen holdes læsbar (780px), men venstrestilles
   i stedet for at stå i en smal, centreret kolonne forskudt fra tabellen. --- */
body.bt-listeside .page-single .wrap.narrow { max-width: 1120px; }
body.bt-listeside .entry > :not(.comp-wrap) { max-width: 780px; }
body.bt-listeside .wrap.narrow .comp-wrap { width: 100%; margin-left: 0; transform: none; }

/* --- Ansvarligt spil: mere luft mellem punktliste og den farvede boks --- */
.entry .bt-advarsel { margin-top: 1.9em; }

/* --- Footer: 18+, ROFUS/StopSpillet og disclaimer gjort mere synlige --- */
.footer-age { color: #E4EAF2; font-size: 0.92rem; }
.disclaimer { font-size: 0.82rem; color: #98A6B9; line-height: 1.65; }
.disclaimer a { color: #CAD6E5; font-weight: 600; }
.disclaimer a:hover { color: #fff; }

/* --- .guide-tag: kategorimærket i single.php manglede styling --- */
.guide-tag {
  display: inline-block; margin-bottom: 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--green-dark); background: var(--green-tint);
  padding: 4px 10px; border-radius: 999px;
}

/* --- "Nej" i faktaboksen (var inline-style #C2703B, fejlede kontrast) --- */
.fact-nej { color: #A85A2A; }

/* --- Overskrifter der er links (fx ROFUS.nu/StopSpillet på ansvarligt spil) --- */
.entry .bt-kort h3 a { color: inherit; text-decoration: none; }
.entry .bt-kort h3 a:hover { color: var(--green-dark); text-decoration: underline; }

/* --- .screen-reader-text: gør temaet selvbærende (afhang før af core-CSS) --- */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute !important; white-space: nowrap; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: #fff; clip: auto; clip-path: none; color: var(--navy);
  display: block; height: auto; width: auto; padding: 12px 18px; z-index: 100000;
}

/* --- "Bedste valg"-badge: hvid tekst på --green fejlede 4.5:1 (3.99). --- */
.best-badge { background: var(--green-dark); }

/* --- Sticky header dækker ellers anker-mål (#tabel, #ansvarligt) og
       elementer, man shift-tab'er til øverst. Skub scroll-målet ned. --- */
html { scroll-padding-top: 84px; }

/* ==========================================================================
   Kenneth-feedback (runde 3) — visuel tydelighed og kontaktoplysninger
   ========================================================================== */

/* Forsidens tillidsmærker skal kunne aflæses ved et hurtigt blik. */
.trust-badge {
  padding: 6px 12px 6px 7px;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.09);
  color: #E8F0F8;
  font-size: 0.875rem;
  font-weight: 700;
}
.trust-badge .ic-chip { width: 28px; height: 28px; }
.trust-badge.tb-license .flag-dk { width: 18px; height: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }

/* Anmeldelseskortene adskilles fra den hvide sektion med en rolig grøn tone. */
.review-card { background: #E3F2E8; border-color: #BFDCC9; }
.review-card:hover { border-color: #8FC5A4; }

/* De tre kriterier på bonussiden fungerer som tydelige visuelle stopklodser. */
.entry .bt-bonus-kriterier .bt-ikon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  border: 2px solid #A8D5B9;
  background: #DDF1E4;
  color: #075C38;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.entry .bt-bonus-kriterier .bt-kort:nth-child(2) .bt-ikon { font-size: 1rem; letter-spacing: 0; }

/* Faresignalerne samles i én rolig, grøn fremhævelse. */
.entry .bt-tegn-boks {
  margin: 1.9em 0;
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid #BBDCC7;
  border-left: 5px solid var(--green-dark);
  border-radius: var(--radius);
  background: #E8F5EC;
}
.entry .bt-tegn-boks h2 { margin-top: 0; color: var(--navy); }
.entry .bt-tegn-boks ul { margin-bottom: 0; }

/* Footerens kontaktoplysninger er almindelig, læsbar tekst — ikke kursiv address. */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #C9D5E2;
  font-size: 0.86rem;
  font-style: normal;
  line-height: 1.55;
}
.footer-contact strong { color: #F4F7FA; }
.footer-contact a { color: #DCE7F2; text-decoration: underline; text-underline-offset: 2px; }
.footer-contact a:hover { color: #fff; }

/* Den visuelle tekst skærpes, mens aria-label fortsat er normal sætningsform. */
.btn-bonus {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.025em;
}

/* Gennemsigtig forklaring af den samlede bookmakerkarakter. */
.rating-breakdown {
  margin: 0 0 28px;
  padding: clamp(22px, 4vw, 32px);
  border: 1px solid #C7DCCF;
  border-radius: var(--radius);
  background: #F4FAF6;
  box-shadow: var(--shadow-sm);
}
.rating-breakdown-head { max-width: 720px; margin-bottom: 22px; }
.rating-breakdown-head .eyebrow {
  color: var(--green-dark);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rating-breakdown-head h2 { margin: 5px 0 6px; color: var(--navy); font-size: clamp(1.25rem, 3vw, 1.65rem); }
.rating-breakdown-head p { margin: 0; color: var(--navy-soft); }
.rating-factors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.rating-factor-label { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 7px; color: var(--navy); }
.rating-factor-label span { font-weight: 700; }
.rating-factor-label strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rating-factor-track { height: 9px; overflow: hidden; border-radius: 999px; background: #DCE8E0; }
.rating-factor-track span { display: block; height: 100%; border-radius: inherit; background: var(--green-dark); }
@media (max-width: 700px) {
  .rating-factors { grid-template-columns: 1fr; gap: 16px; }
}