/* ==========================================================================
   Gamingguiden · gamingguiden.css · v1.1 (02.10.2026)
   Design tokens (CSS custom properties) + basis + komponenter. Mobil først.
   Tabletguidens designeksport (v1.0, 28.09.2026) med Gamingguidens egen
   accentfarve (violet #4f2bb3) og logomærke (controller).

   Layoutskift bruger container queries på .gg-site (ikke media queries),
   så den samme CSS virker i designfilen og på sitet.
   Breakpoints (containerbredde): 700px = tablet · 1024px = desktop.

   "→" ved hver komponent angiver, hvilken WordPress-blok / blokstil den
   svarer til i et block theme (ingen page builder).
   ========================================================================== */


/* 1. TOKENS ---------------------------------------------------------------- */

:root {
  /* Farver: én accent til knapper, links, fokus og logomærket. Alt andet er neutralt.
     Hvid på accent 9,0:1 · accent på bg 8,6:1 · accent på subtle 7,9:1 (WCAG AA). */
  --gg-color-accent: #4f2bb3;
  --gg-color-on-accent: #ffffff;
  --gg-color-bg: #faf9f7;
  --gg-color-surface: #ffffff;
  --gg-color-subtle: #f2f0ec;
  --gg-color-border: #e2dfd9;
  --gg-color-border-strong: #c9c5bd;
  --gg-color-text: #1c1d1f;
  --gg-color-text-2: #4d5057;
  --gg-color-text-3: #676a70;
  --gg-color-ink: #1c1d1f;
  --gg-color-on-ink: #f4f2ee;

  /* Typografi */
  --gg-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --gg-font-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gg-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gg-font-size-xs: 0.8125rem;      /* 13 */
  --gg-font-size-sm: 0.875rem;       /* 14 */
  --gg-font-size-md: 1rem;           /* 16 */
  --gg-font-size-base: 1.0625rem;    /* 17 · 18 på desktop */
  --gg-font-size-lg: 1.1875rem;      /* 19 · 21 på desktop */
  --gg-font-size-xl: 1.375rem;       /* 22 */
  --gg-font-size-h3: 1.25rem;        /* 20 · 22 */
  --gg-font-size-h2: 1.625rem;       /* 26 · 32 */
  --gg-font-size-h1: 2rem;           /* 32 · 44 */
  --gg-font-size-display: 2.375rem;  /* 38 · 56 */

  --gg-line-height-tight: 1.15;
  --gg-line-height-snug: 1.4;
  --gg-line-height-body: 1.6;

  /* Afstande (4 px-basis) */
  --gg-space-1: 0.25rem;   /*  4 */
  --gg-space-2: 0.5rem;    /*  8 */
  --gg-space-3: 0.75rem;   /* 12 */
  --gg-space-4: 1rem;      /* 16 */
  --gg-space-5: 1.5rem;    /* 24 */
  --gg-space-6: 2rem;      /* 32 */
  --gg-space-7: 3rem;      /* 48 */
  --gg-space-8: 4rem;      /* 64 */
  --gg-space-9: 6rem;      /* 96 */
  --gg-gutter: 1.25rem;          /* 20 · 24 · 32 */
  --gg-section-space: 3rem;      /* 48 · 64 · 80 */

  /* Bredder */
  --gg-width-content: 46rem;     /* 736 – artikelkolonne */
  --gg-width-wide: 75rem;        /* 1200 – sidebredde */
  --gg-width-toc: 15rem;         /* 240 – indholdsfortegnelse */

  /* Form */
  --gg-radius-sm: 6px;
  --gg-radius-md: 10px;
  --gg-radius-lg: 16px;
  --gg-radius-pill: 999px;
  --gg-shadow-sm: 0 1px 2px rgb(28 29 31 / 0.06);
  --gg-shadow-md: 0 1px 2px rgb(28 29 31 / 0.05), 0 8px 24px -8px rgb(28 29 31 / 0.16);
  --gg-tap: 44px;                /* mindste klikflade */
}

/* Tokens der skifter med bredden */
@container site (min-width: 700px) {
  .gg-site > * {
    --gg-gutter: 1.5rem;
    --gg-section-space: 4rem;
  }
}
@container site (min-width: 1024px) {
  .gg-site > * {
    --gg-gutter: 2rem;
    --gg-section-space: 5rem;
    --gg-font-size-base: 1.125rem;
    --gg-font-size-lg: 1.3125rem;
    --gg-font-size-h3: 1.375rem;
    --gg-font-size-h2: 2rem;
    --gg-font-size-h1: 2.75rem;
    --gg-font-size-display: 3.5rem;
  }
}


/* 2. BASIS ----------------------------------------------------------------- */
/* I WordPress: sæt klassen "gg-site" på den yderste Group i hver skabelon
   (eller brug .wp-site-blocks). Basisstilene kan også ligge i theme.json. */

body { margin: 0; }

.gg-site {
  container: site / inline-size;
  background: var(--gg-color-bg);
  color: var(--gg-color-text);
  font-family: var(--gg-font-body);
  font-size: var(--gg-font-size-base);
  line-height: var(--gg-line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.gg-site > * { font-size: var(--gg-font-size-base); }
.gg-site *, .gg-site *::before, .gg-site *::after { box-sizing: border-box; }

.gg-page { display: flex; flex-direction: column; min-height: 100vh; }
.gg-main { flex: 1 0 auto; }

:where(.gg-site) :where(h1, h2, h3, h4) {
  margin: 0;
  font-family: var(--gg-font-display);
  font-weight: 600;
  line-height: var(--gg-line-height-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
:where(.gg-site) :where(p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.gg-site) :where(ul, ol) { padding: 0; }
:where(.gg-site) p { text-wrap: pretty; }
:where(.gg-site) a {
  color: var(--gg-color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
:where(.gg-site) a:hover {
  color: color-mix(in oklab, var(--gg-color-accent) 78%, black);
  text-decoration-thickness: 2px;
}
:where(.gg-site) :focus-visible { outline: 2px solid var(--gg-color-accent); outline-offset: 3px; }
:where(.gg-site) :where(img, svg) { display: block; max-width: 100%; }
:where(.gg-site) table { border-collapse: separate; border-spacing: 0; }
:where(.gg-site) button { font: inherit; }

.gg-container {
  width: 100%;
  max-width: calc(var(--gg-width-wide) + 2 * var(--gg-gutter));
  margin-inline: auto;
  padding-inline: var(--gg-gutter);
}

.gg-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gg-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.gg-eyebrow {
  font-size: var(--gg-font-size-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gg-color-text-3);
}


/* 3. KNAPPER, MÆRKATER, LINKS ----------------------------------------------- */

/* → core/button (standard). Den eneste flade med accentfarve (ud over logomærket). */
.gg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gg-space-2);
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--gg-radius-md);
  background: var(--gg-color-accent);
  color: var(--gg-color-on-accent);
  font-family: var(--gg-font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.gg-button:hover {
  background: color-mix(in oklab, var(--gg-color-accent) 80%, black);
  color: var(--gg-color-on-accent);
  text-decoration: none;
}
.gg-button .gg-icon { width: 18px; height: 18px; }
.gg-button--small { min-height: var(--gg-tap); padding: 10px 16px; font-size: var(--gg-font-size-sm); }
/* → core/button, blokstil "Outline" – sekundær handling, neutral */
.gg-button--quiet {
  background: transparent;
  color: var(--gg-color-text);
  box-shadow: inset 0 0 0 1px var(--gg-color-border-strong);
}
.gg-button--quiet:hover { background: var(--gg-color-subtle); color: var(--gg-color-text); }

/* → core/paragraph med klassen gg-badge */
.gg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  justify-self: start;
  align-self: start;
  padding: 4px 10px;
  border-radius: var(--gg-radius-pill);
  background: var(--gg-color-subtle);
  color: var(--gg-color-text);
  font-size: var(--gg-font-size-sm);
  font-weight: 700;
  line-height: 1.35;
}
.gg-badge--ink { background: var(--gg-color-ink); color: var(--gg-color-on-ink); }

/* Mærkning ved hvert reklamelink (markedsføringsloven §6, stk. 4) */
.gg-adlabel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gg-color-text-3);
  font-size: var(--gg-font-size-xs);
  font-weight: 500;
  line-height: 1.3;
}
.gg-adlabel .gg-icon { width: 14px; height: 14px; }

.gg-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--gg-tap);
  font-weight: 700;
}
.gg-more .gg-icon { width: 18px; height: 18px; transition: transform 0.15s ease; }
.gg-more:hover .gg-icon { transform: translateX(3px); }


/* 4. REKLAMELINKS-BJÆLKE → Group i skabelondelen "header", fuld bredde ------ */

.gg-disclosure {
  background: var(--gg-color-ink);
  color: var(--gg-color-on-ink);
  font-size: var(--gg-font-size-sm);
  line-height: 1.45;
}
.gg-disclosure__text { padding-block: 10px; }
.gg-disclosure__icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 6px;
  vertical-align: -0.22em;
}
.gg-disclosure a { color: inherit; }
.gg-disclosure a:hover { color: #ffffff; }


/* 5. HEADER → skabelondel "header": Site Logo + Site Title + Navigation ----- */

.gg-header { background: var(--gg-color-bg); border-bottom: 1px solid var(--gg-color-border); }
.gg-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gg-space-5);
  min-height: 64px;
}

.gg-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gg-color-text);
  font-family: var(--gg-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  text-decoration: none;
}
.gg-logo:hover { color: var(--gg-color-text); }
.gg-mark { width: 32px; height: 32px; flex: none; }
.gg-mark__bg { fill: var(--gg-color-accent); }
.gg-mark__line { fill: none; stroke: #ffffff; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.gg-logo--inverse, .gg-logo--inverse:hover { color: var(--gg-color-on-ink); }
.gg-logo--inverse .gg-mark__bg { fill: var(--gg-color-on-ink); }
.gg-logo--inverse .gg-mark__line { stroke: var(--gg-color-ink); }

/* I WordPress klarer core/navigation selv mobilmenuen (overlay). */
.gg-nav { display: none; }
.gg-nav__list { display: flex; align-items: center; gap: var(--gg-space-6); list-style: none; }
.gg-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--gg-tap);
  color: var(--gg-color-text-2);
  font-size: var(--gg-font-size-md);
  font-weight: 500;
  text-decoration: none;
}
.gg-nav__link:hover { color: var(--gg-color-text); text-decoration: underline; }
.gg-nav__link[aria-current="page"] {
  color: var(--gg-color-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}
.gg-menu-button {
  display: inline-flex;
  align-items: center;
  gap: var(--gg-space-2);
  min-height: var(--gg-tap);
  padding: 0 14px;
  border: 1px solid var(--gg-color-border-strong);
  border-radius: var(--gg-radius-md);
  background: var(--gg-color-surface);
  color: var(--gg-color-text);
  font-size: var(--gg-font-size-md);
  font-weight: 700;
  cursor: pointer;
}
.gg-menu-button:hover { background: var(--gg-color-subtle); }

@container site (min-width: 1024px) {
  .gg-header__inner { min-height: 80px; }
  .gg-logo { font-size: 1.5rem; }
  .gg-mark { width: 34px; height: 34px; }
  .gg-nav { display: block; }
  .gg-menu-button { display: none; }
}


/* 6. SEKTIONER OG GRID → core/group (constrained) + core/columns / grid ---- */

.gg-section { padding-block: var(--gg-section-space); }
.gg-section--subtle { background: var(--gg-color-subtle); }
.gg-section__head { display: grid; gap: var(--gg-space-2); max-width: 42rem; margin-bottom: var(--gg-space-5); }
.gg-section__title { font-size: var(--gg-font-size-h2); }
.gg-section__lead { color: var(--gg-color-text-2); }
.gg-section__foot { margin-top: var(--gg-space-4); }

.gg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gg-space-4); }

@container site (min-width: 700px) {
  .gg-grid--2, .gg-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@container site (min-width: 1024px) {
  .gg-section__head { margin-bottom: var(--gg-space-6); }
  .gg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gg-space-5); }
}


/* 7. FORSIDE: HERO + "HVAD SKAL DEN BRUGES TIL?" --------------------------- */

.gg-hero { padding-block: 2.5rem 3.5rem; }
.gg-hero__grid { display: grid; gap: var(--gg-space-6); }
.gg-hero__text { display: grid; gap: var(--gg-space-4); justify-items: start; align-content: start; }
.gg-hero__title { font-size: var(--gg-font-size-display); letter-spacing: -0.02em; }
.gg-hero__lead { max-width: 34rem; color: var(--gg-color-text-2); font-size: var(--gg-font-size-lg); line-height: 1.5; }
.gg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gg-space-3) var(--gg-space-5);
  margin-top: var(--gg-space-3);
}
.gg-hero__updated { color: var(--gg-color-text-3); font-size: var(--gg-font-size-sm); }

/* → core/group (blokstil "Panel") med core/list af links */
.gg-needs {
  padding: 20px 20px 8px;
  background: var(--gg-color-surface);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
  box-shadow: var(--gg-shadow-sm);
}
.gg-needs__title { font-size: var(--gg-font-size-xl); margin-bottom: var(--gg-space-2); }
.gg-needs__list { list-style: none; }
.gg-needs__list li + li { border-top: 1px solid var(--gg-color-border); }
.gg-needs__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gg-space-3);
  min-height: 56px;
  color: var(--gg-color-text);
  font-weight: 500;
  text-decoration: none;
}
.gg-needs__link .gg-icon { color: var(--gg-color-text-3); transition: transform 0.15s ease; }
.gg-needs__link:hover { color: var(--gg-color-accent); text-decoration: none; }
.gg-needs__link:hover .gg-icon { color: var(--gg-color-accent); transform: translateX(3px); }

@container site (min-width: 1024px) {
  .gg-hero { padding-block: 5.5rem 6rem; }
  .gg-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gg-space-8); align-items: center; }
  .gg-needs { padding: 28px 28px 12px; }
}

/* Guidekort → core/group (blokstil "Kort") med Post Title + Excerpt + Post Date */
.gg-guide-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--gg-space-2);
  height: 100%;
  padding: 20px;
  background: var(--gg-color-surface);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gg-guide-card:hover { border-color: var(--gg-color-border-strong); box-shadow: var(--gg-shadow-md); }
.gg-guide-card__title { font-size: 1.3125rem; line-height: 1.2; }
.gg-guide-card__title a { color: var(--gg-color-text); text-decoration: none; }
.gg-guide-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.gg-guide-card__title a:hover { color: var(--gg-color-text); text-decoration: underline; text-decoration-thickness: 2px; }
.gg-guide-card__text { color: var(--gg-color-text-2); font-size: var(--gg-font-size-md); line-height: 1.5; }
.gg-guide-card__meta { margin-top: var(--gg-space-1); color: var(--gg-color-text-3); font-size: var(--gg-font-size-sm); }

/* Principper ("Sådan arbejder vi") */
.gg-principle { display: grid; gap: var(--gg-space-2); align-content: start; }
.gg-principle__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--gg-space-2);
  border-radius: 50%;
  background: var(--gg-color-subtle);
  color: var(--gg-color-text);
}
.gg-principle__icon .gg-icon { width: 22px; height: 22px; }
.gg-principle__title { font-size: var(--gg-font-size-h3); }
.gg-principle__text { color: var(--gg-color-text-2); }


/* 8. PRODUKTKORT → synkroniseret mønster (core/group, blokstil "Produkt") ---- */
/* Fuldt kort i guides, kompakt kort på forsiden. */

.gg-product {
  display: grid;
  align-content: start;
  gap: var(--gg-space-4);
  padding: 20px;
  background: var(--gg-color-surface);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
  box-shadow: var(--gg-shadow-sm);
  scroll-margin-top: 80px;
}
.gg-product__media {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  aspect-ratio: 16 / 10;
  border-radius: var(--gg-radius-md);
  background: var(--gg-color-subtle);
  color: var(--gg-color-text-3);
  overflow: hidden;
}
.gg-product__media svg { width: 56px; height: 56px; stroke-width: 1.25; }
.gg-product__media-note { font-size: var(--gg-font-size-xs); }
.gg-product__body { display: grid; gap: 6px; }
.gg-product__title { font-size: 1.5rem; }
.gg-product__summary { color: var(--gg-color-text-2); }
.gg-product__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--gg-space-2); }
.gg-product__actions .gg-adlabel { justify-content: center; }

.gg-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gg-space-3);
  padding-block: 14px;
  border-block: 1px solid var(--gg-color-border);
}
.gg-specs__item { display: grid; gap: 2px; }
.gg-specs dt { color: var(--gg-color-text-3); font-size: var(--gg-font-size-xs); font-weight: 500; }
.gg-specs dd { font-size: var(--gg-font-size-md); font-weight: 700; line-height: 1.3; }

.gg-proscons { display: grid; gap: var(--gg-space-4); }
.gg-proscons__title {
  margin-bottom: 6px;
  font-family: var(--gg-font-body);
  font-size: var(--gg-font-size-sm);
  font-weight: 700;
  letter-spacing: 0;
}
.gg-proscons__list { display: grid; gap: 6px; list-style: none; }
.gg-proscons__list li { display: flex; align-items: flex-start; gap: var(--gg-space-2); font-size: var(--gg-font-size-md); line-height: 1.45; }
.gg-proscons__list .gg-icon { width: 18px; height: 18px; margin-top: 2px; }

.gg-product--compact { gap: 14px; }
.gg-product--compact .gg-product__title { font-size: 1.3125rem; }
.gg-product--compact .gg-product__summary { font-size: var(--gg-font-size-md); line-height: 1.5; }

/* Mobil: kompakt kort vises vandret, så tre kort ikke fylder en hel skærm hver */
@container site (max-width: 699px) {
  .gg-product--compact {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas: "media badge" "media body" "actions actions";
    gap: 8px 16px;
    padding: 16px;
  }
  .gg-product--compact .gg-badge { grid-area: badge; }
  .gg-product--compact .gg-product__media { grid-area: media; aspect-ratio: 1; align-self: start; }
  .gg-product--compact .gg-product__media svg { width: 40px; height: 40px; }
  .gg-product--compact .gg-product__media-note { display: none; }
  .gg-product--compact .gg-product__body { grid-area: body; }
  .gg-product--compact .gg-product__actions { grid-area: actions; margin-top: 8px; }
}

@container site (min-width: 700px) {
  .gg-product--compact .gg-product__media { aspect-ratio: 4 / 3; }
  .gg-proscons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Fuldt kort: billede til venstre, indhold til højre */
  .gg-product--full { grid-template-columns: 200px minmax(0, 1fr); column-gap: 28px; padding: 28px; }
  .gg-product--full .gg-product__media { grid-column: 1; grid-row: 1 / span 5; align-self: start; aspect-ratio: 3 / 4; }
  .gg-product--full > :not(.gg-product__media) { grid-column: 2; }
  .gg-product--full .gg-product__actions { flex-direction: row; align-items: center; gap: var(--gg-space-4); }
}


/* 9. ARTIKEL-SKABELON → skabelon "single" ---------------------------------- */

.gg-article { padding-top: var(--gg-space-5); padding-bottom: var(--gg-space-8); }
.gg-article-layout { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--gg-space-5); }

/* Brødkrumme → Yoast/Rank Math breadcrumb-blok eller core/navigation */
.gg-breadcrumb { color: var(--gg-color-text-3); font-size: var(--gg-font-size-sm); }
.gg-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 2px 8px; list-style: none; }
.gg-breadcrumb li { display: inline-flex; gap: 8px; }
.gg-breadcrumb li + li::before { content: "/"; color: var(--gg-color-border-strong); }
.gg-breadcrumb a { color: var(--gg-color-text-2); }

.gg-article-head { display: grid; gap: var(--gg-space-4); align-content: start; }
.gg-article-title { font-size: var(--gg-font-size-h1); letter-spacing: -0.015em; }
.gg-article-dek { color: var(--gg-color-text-2); font-size: var(--gg-font-size-lg); line-height: 1.5; }

/* "Opdateret" → core/post-date (vis senest ændret) + core/post-author-name */
.gg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  color: var(--gg-color-text-2);
  font-size: var(--gg-font-size-sm);
  line-height: 1.45;
}
.gg-meta strong { color: var(--gg-color-text); }

/* Kort svar → core/group, blokstil "Kort svar" */
.gg-shortanswer {
  display: grid;
  gap: var(--gg-space-3);
  margin-top: var(--gg-space-2);
  padding: 20px;
  background: var(--gg-color-subtle);
  border-radius: var(--gg-radius-lg);
  scroll-margin-top: 80px;
}
.gg-shortanswer__label,
.gg-verdict__label,
.gg-author__label,
.gg-toc__title {
  font-family: var(--gg-font-body);
  font-size: var(--gg-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.gg-shortanswer__text { font-size: var(--gg-font-size-lg); font-weight: 500; line-height: 1.5; }
.gg-shortanswer__picks { list-style: none; border-top: 1px solid var(--gg-color-border-strong); }
.gg-shortanswer__picks li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 12px;
  min-height: 46px;
  padding-block: 8px;
  border-bottom: 1px solid var(--gg-color-border);
  font-size: var(--gg-font-size-md);
}
.gg-shortanswer__picks li:last-child { border-bottom: 0; padding-bottom: 0; }
.gg-shortanswer__picks span { color: var(--gg-color-text-2); }
.gg-shortanswer__picks a { font-weight: 700; }

/* Indholdsfortegnelse → core/group (position: sticky) med core/list af ankerlinks.
   Mobil: vandret bar der sætter sig fast øverst. Desktop: venstre kolonne. */
.gg-toc {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-inline: calc(-1 * var(--gg-gutter));
  background: color-mix(in srgb, var(--gg-color-bg) 94%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-block: 1px solid var(--gg-color-border);
}
/* Tilføjes med en IntersectionObserver, når baren sidder fast (valgfrit) */
.gg-toc--stuck { box-shadow: 0 8px 16px -12px rgb(28 29 31 / 0.35); border-top-color: transparent; }
.gg-toc__inner {
  display: flex;
  align-items: center;
  gap: var(--gg-space-2);
  padding: 8px var(--gg-gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.gg-toc__inner::-webkit-scrollbar { display: none; }
.gg-toc__title { flex: none; margin-right: 4px; color: var(--gg-color-text-3); }
.gg-toc__list { display: flex; gap: 4px; list-style: none; }
.gg-toc__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--gg-tap);
  padding: 0 14px;
  border-radius: var(--gg-radius-pill);
  color: var(--gg-color-text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.gg-toc__list a:hover { background: var(--gg-color-subtle); color: var(--gg-color-text); text-decoration: none; }
.gg-toc__list a[aria-current="true"],
.gg-toc__list a[aria-current="true"]:hover { background: var(--gg-color-ink); color: var(--gg-color-on-ink); }

/* Artikeltekst */
.gg-article-body { padding-top: var(--gg-space-4); }
.gg-article-section { padding-top: 2.5rem; scroll-margin-top: 72px; }
.gg-article-section:first-child { padding-top: 0; }
.gg-prose > * + * { margin-top: var(--gg-space-4); }
.gg-prose > h2 { font-size: var(--gg-font-size-h2); }
.gg-prose > h3 { margin-top: var(--gg-space-6); font-size: var(--gg-font-size-h3); }
.gg-prose > h3 + p { margin-top: var(--gg-space-2); }
.gg-prose > .gg-lead { color: var(--gg-color-text-2); }
.gg-stack { display: grid; gap: var(--gg-space-4); }

@container site (min-width: 1024px) {
  .gg-article { padding-top: var(--gg-space-6); padding-bottom: var(--gg-space-9); }
  .gg-article-layout {
    grid-template-columns: var(--gg-width-toc) minmax(0, var(--gg-width-content));
    column-gap: var(--gg-space-8);
    row-gap: 2.5rem;
    justify-content: center;
  }
  .gg-article-head, .gg-article-body { grid-column: 2; }
  .gg-shortanswer { padding: 28px; }

  .gg-toc {
    position: static;
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
  }
  .gg-toc__inner { position: sticky; top: var(--gg-space-5); display: block; padding: 0; overflow: visible; }
  .gg-toc__title { display: block; margin: 0 0 var(--gg-space-3) 12px; }
  .gg-toc__list { flex-direction: column; gap: 2px; }
  .gg-toc__list a {
    display: flex;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--gg-radius-sm);
    white-space: normal;
  }
  .gg-toc__list a[aria-current="true"],
  .gg-toc__list a[aria-current="true"]:hover { background: var(--gg-color-subtle); color: var(--gg-color-text); font-weight: 700; }
  .gg-article-section { padding-top: 3.5rem; scroll-margin-top: var(--gg-space-5); }
}


/* 10. SAMMENLIGNINGSTABEL → core/table, blokstil "Sammenligning" ------------ */
/* Ruller vandret på smalle skærme. Første kolonne (model) står fast.       */

.gg-compare { margin-inline: calc(-1 * var(--gg-gutter)); }
.gg-compare__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--gg-gutter) 10px;
  color: var(--gg-color-text-3);
  font-size: var(--gg-font-size-sm);
}
.gg-compare__hint .gg-icon { width: 18px; height: 18px; }
/* Rullecontainer: .gg-compare__scroll i ren HTML – i WordPress er det
   core/table-figuren selv (.wp-block-table.gg-compare). */
.gg-compare__scroll,
.wp-block-table.gg-compare {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background: var(--gg-color-surface);
  border-block: 1px solid var(--gg-color-border);
}
.gg-compare table {
  width: 100%;
  min-width: 44rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.gg-compare thead, .gg-compare tfoot { border: 0; }
.gg-compare th,
.gg-compare td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  border: 0;
  border-bottom: 1px solid var(--gg-color-border);
}
.gg-compare thead th {
  background: var(--gg-color-subtle);
  color: var(--gg-color-text-2);
  font-size: var(--gg-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: bottom;
}
.gg-compare tbody tr:last-child > * { border-bottom: 0; }
/* Fast første kolonne */
.gg-compare :is(th, td):first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 9.5rem;
  white-space: normal;
  background: var(--gg-color-surface);
  box-shadow: inset -1px 0 0 var(--gg-color-border), 8px 0 10px -8px rgb(28 29 31 / 0.18);
}
.gg-compare thead th:first-child { z-index: 2; background: var(--gg-color-subtle); }
.gg-compare td:last-child,
.gg-compare thead th:last-child { text-align: right; }
/* Modelnavn: <span class="gg-compare__model"> – eller <strong> i en core/table-celle */
.gg-compare__model,
.gg-compare td:first-child strong { display: block; color: var(--gg-color-text); font-size: var(--gg-font-size-md); font-weight: 700; }
.gg-compare__role { display: block; margin-top: 2px; color: var(--gg-color-text-3); font-size: var(--gg-font-size-xs); font-weight: 400; }
.gg-compare__adnote { display: block; margin-top: 2px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.gg-compare figcaption,
.gg-compare__caption {
  padding: 10px var(--gg-gutter) 0;
  color: var(--gg-color-text-3);
  font-size: var(--gg-font-size-sm);
  line-height: 1.45;
}

@container site (min-width: 700px) {
  .gg-compare { margin-inline: 0; }
  .gg-compare__hint { display: none; }
  .gg-compare__scroll,
  .wp-block-table.gg-compare { border: 1px solid var(--gg-color-border); border-radius: var(--gg-radius-lg); }
  .gg-compare figcaption, .gg-compare__caption { padding-inline: 0; }
  .gg-compare :is(th, td):first-child { box-shadow: inset -1px 0 0 var(--gg-color-border); }
}


/* 11. DOM → core/group, blokstil "Dom" ---------------------------------------- */

.gg-verdict {
  display: grid;
  gap: var(--gg-space-4);
  padding: 22px;
  background: var(--gg-color-surface);
  border: 2px solid var(--gg-color-ink);
  border-radius: var(--gg-radius-lg);
}
.gg-verdict__label { display: flex; align-items: center; gap: 10px; color: var(--gg-color-text); }
.gg-verdict__seal {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gg-color-ink);
  color: var(--gg-color-on-ink);
}
.gg-verdict__seal .gg-icon { width: 16px; height: 16px; stroke-width: 2.5; }
.gg-verdict__title {
  font-family: var(--gg-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.gg-verdict__text { color: var(--gg-color-text-2); }
.gg-verdict__list {
  display: grid;
  gap: 10px;
  padding-top: var(--gg-space-4);
  border-top: 1px solid var(--gg-color-border);
  list-style: none;
}
.gg-verdict__list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--gg-font-size-md); line-height: 1.5; }
.gg-verdict__list .gg-icon { width: 18px; height: 18px; margin-top: 3px; color: var(--gg-color-text-3); }
.gg-verdict__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--gg-space-2); }
.gg-verdict__actions .gg-adlabel { justify-content: center; }

@container site (min-width: 700px) {
  .gg-verdict { padding: 32px; }
  .gg-verdict__title { font-size: 1.75rem; }
  .gg-verdict__actions { flex-direction: row; align-items: center; gap: var(--gg-space-4); }
}


/* 12. FAQ → core/details (én blok pr. spørgsmål, klassen gg-faq__item) ------ */
/* Kun elementselektorer inde i blokken, så WordPress' egen markup virker.   */

.gg-faq { border-top: 1px solid var(--gg-color-border); }
.gg-faq__item { margin: 0; border-bottom: 1px solid var(--gg-color-border); }
.gg-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gg-space-4);
  min-height: 60px;
  padding-block: 14px;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.gg-faq__item > summary::-webkit-details-marker { display: none; }
.gg-faq__item > summary:hover { color: var(--gg-color-accent); }
/* Plus/minus tegnet i CSS: to streger, den lodrette forsvinder når svaret er åbent */
.gg-faq__item > summary::after {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--gg-color-border-strong);
  border-radius: 50%;
  background:
    linear-gradient(var(--gg-color-text), var(--gg-color-text)) center / 12px 2px no-repeat,
    linear-gradient(var(--gg-color-text), var(--gg-color-text)) center / 2px 12px no-repeat;
}
.gg-faq__item[open] > summary::after {
  background: linear-gradient(var(--gg-color-text), var(--gg-color-text)) center / 12px 2px no-repeat;
}
.gg-faq__item > summary ~ * { max-width: 40rem; margin: 0; padding-bottom: 18px; color: var(--gg-color-text-2); }


/* 13. FORFATTERBOKS → core/group med Avatar + Post Author Name + Biography -- */

.gg-author {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--gg-space-4);
  align-items: start;
  padding: 20px;
  background: var(--gg-color-surface);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
}
.gg-author__avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gg-color-subtle);
  color: var(--gg-color-text-3);
}
.gg-author__avatar .gg-icon { width: 26px; height: 26px; stroke-width: 1.5; }
.gg-author__body { display: grid; gap: 6px; }
.gg-author__label { color: var(--gg-color-text-3); }
.gg-author__name { font-family: var(--gg-font-display); font-size: 1.3125rem; font-weight: 600; line-height: 1.2; }
.gg-author__bio { color: var(--gg-color-text-2); font-size: var(--gg-font-size-md); line-height: 1.55; }
.gg-author__links { display: flex; flex-wrap: wrap; gap: 0 20px; font-size: var(--gg-font-size-md); }
.gg-author__links a { display: inline-flex; align-items: center; min-height: var(--gg-tap); }
.gg-author__updated { color: var(--gg-color-text-3); font-size: var(--gg-font-size-sm); }

@container site (min-width: 700px) {
  .gg-author { grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding: 28px; }
  .gg-author__avatar { width: 72px; height: 72px; }
}


/* 14. FOOTER → skabelondel "footer" --------------------------------------- */

.gg-footer {
  padding-block: var(--gg-space-7) var(--gg-space-5);
  background: var(--gg-color-subtle);
  border-top: 1px solid var(--gg-color-border);
  font-size: var(--gg-font-size-md);
}
.gg-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gg-space-6) var(--gg-space-5); }
.gg-footer__brand { grid-column: 1 / -1; display: grid; gap: var(--gg-space-3); justify-items: start; }
.gg-footer__brand p { max-width: 22rem; color: var(--gg-color-text-2); line-height: 1.5; }
.gg-footer__title { margin-bottom: 4px; color: var(--gg-color-text-3); font-family: var(--gg-font-body); font-size: var(--gg-font-size-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.gg-footer__list { list-style: none; }
.gg-footer__list :is(a, button) {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gg-color-text);
  font-size: var(--gg-font-size-md);
  text-decoration: none;
  cursor: pointer;
}
.gg-footer__list :is(a, button):hover { color: var(--gg-color-accent); text-decoration: underline; }
.gg-footer__bottom {
  display: grid;
  gap: var(--gg-space-2);
  margin-top: var(--gg-space-6);
  padding-top: var(--gg-space-4);
  border-top: 1px solid var(--gg-color-border-strong);
  color: var(--gg-color-text-2);
  font-size: var(--gg-font-size-sm);
  line-height: 1.5;
}
.gg-footer__bottom a { color: inherit; }

@container site (min-width: 700px) {
  .gg-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container site (min-width: 1024px) {
  .gg-footer { padding-block: var(--gg-space-8) var(--gg-space-6); }
  .gg-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .gg-footer__brand { grid-column: auto; }
  .gg-footer__bottom { display: flex; justify-content: space-between; gap: var(--gg-space-5); }
}