/* ==========================================================================
   Gamingguiden · gp-bridge.css
   Maps GeneratePress 3.6's own markup (header, menu, content, footer wrapper)
   and core blocks onto the design in gamingguiden.css (tokens + components).
   Loaded after GeneratePress' stylesheet and its inline dynamic CSS.
   Installed by gamingguiden-setup/09-design.sh — edit files/child-theme/ there.
   ========================================================================== */


/* 1. QUERY CONTAINERS -------------------------------------------------------
   The export puts the query container "site" on one wrapper (.gg-site). Here
   <body> carries .gg-site for the base styles, but a query container is also
   the containing block for position:fixed descendants (Complianz' banner, the
   back-to-top link), so the container moves to the page regions instead. Each
   region spans the viewport width, so the 700/1024 px queries behave the same. */

body.gg-site { container-type: normal; }
.site-header,
.site,
.site-footer { container: site / inline-size; }

/* The export switches its width-dependent tokens on ".gg-site > *" (children of its one
   container). Here the containers are the regions, so the same tokens go on their children. */
@container site (min-width: 700px) {
  .site-header > *, .site > *, .site-footer > * {
    --gg-gutter: 1.5rem;
    --gg-section-space: 4rem;
  }
}
@container site (min-width: 1024px) {
  .site-header > *, .site > *, .site-footer > * {
    --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;
  }
}

/* The export's ".gg-site > * { font-size: base }": re-read the (switched) token below the regions. */
.site-header > *, .site > *, .site-footer > * { font-size: var(--gg-font-size-base); }

/* Full-width blocks elsewhere use 100vw (incl. the scrollbar); clip, not hidden, keeps sticky working. */
body { overflow-x: clip; }


/* 2. GENERATEPRESS' GLOBAL COLOURS -> DESIGN TOKENS ------------------------- */

:root {
  --contrast: var(--gg-color-text);
  --contrast-2: var(--gg-color-text-2);
  --contrast-3: var(--gg-color-border-strong);
  --base: var(--gg-color-subtle);
  --base-2: var(--gg-color-bg);
  --base-3: var(--gg-color-bg);
  --accent: var(--gg-color-accent);
}

body {
  background: var(--gg-color-bg);
  color: var(--gg-color-text);
}
body,
button,
input,
select,
textarea {
  font-family: var(--gg-font-body);
}
body {
  font-size: var(--gg-font-size-base);
  line-height: var(--gg-line-height-body);
}


/* 3. TYPOGRAPHY -------------------------------------------------------------
   GeneratePress sizes headings with element selectors, which beat the export's
   zero-specificity :where() base rules, so the design is restated here. */

h1, h2, h3, h4, h5, h6 {
  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;
}
h1 { font-size: var(--gg-font-size-h1); letter-spacing: -0.015em; }
h2 { font-size: var(--gg-font-size-h2); }
h3 { font-size: var(--gg-font-size-h3); }
h4 { font-size: var(--gg-font-size-lg); }

/* Beats GeneratePress' element margins (same specificity, loaded later) but not the
   components' class rules in gamingguiden.css. */
body :where(p, ul, ol, dl, dd, figure, blockquote, pre) { margin: 0; }
body :where(ul, ol) { padding: 0; }

a {
  color: var(--gg-color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover,
a:focus,
a:active {
  color: color-mix(in oklab, var(--gg-color-accent) 78%, black);
  text-decoration-thickness: 2px;
}
:focus-visible { outline: 2px solid var(--gg-color-accent); outline-offset: 3px; }


/* 4. HEADER AND LOGO --------------------------------------------------------- */

.site-header {
  background: var(--gg-color-bg);
  border-bottom: 1px solid var(--gg-color-border);
}
.site-header .inside-header {
  max-width: calc(var(--gg-width-wide) + 2 * var(--gg-gutter));
  min-height: 64px;
  padding: 0 var(--gg-gutter);
  gap: var(--gg-space-5);
}
.site-branding .main-title { margin: 0; font-size: inherit; line-height: 1; }
.site-header .main-title a.gg-logo,
.gg-footer a.gg-logo {
  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;
}
.site-header .main-title a.gg-logo:hover,
.gg-footer a.gg-logo:hover { color: var(--gg-color-text); }

@container site (min-width: 1024px) {
  .site-header .inside-header { min-height: 80px; }
  .site-header .main-title a.gg-logo { font-size: 1.5rem; }
  .site-header .gg-mark { width: 34px; height: 34px; }
}


/* 5. MAIN MENU (desktop) ------------------------------------------------------ */

.main-navigation,
.main-navigation ul ul { background: transparent; }
.main-navigation .main-nav > ul { gap: var(--gg-space-6); }
.main-navigation .main-nav ul li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--gg-tap);
  padding-inline: 0;
  color: var(--gg-color-text-2);
  font-size: var(--gg-font-size-md);
  font-weight: 500;
  line-height: var(--gg-line-height-snug);
}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a {
  color: var(--gg-color-text);
  text-decoration: underline;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--gg-color-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}


/* 6. MOBILE MENU (GeneratePress toggles it below 769 px) ---------------------- */

/* No "display" here: GeneratePress shows/hides the toggle by viewport (769 px). */
.mobile-menu-control-wrapper .menu-toggle,
.main-navigation .menu-toggle {
  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;
  line-height: 1;
}
.mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus {
  background: var(--gg-color-subtle);
  color: var(--gg-color-text);
}
.has-inline-mobile-toggle #site-navigation.toggled { background: var(--gg-color-bg); }

@media (max-width: 768px) {
  .mobile-menu-control-wrapper .menu-toggle { display: inline-flex; }
  .main-navigation.toggled .main-nav > ul { gap: 0; padding-bottom: var(--gg-space-3); }
  .main-navigation.toggled .main-nav ul li { border-top: 1px solid var(--gg-color-border); }
  .main-navigation.toggled .main-nav ul li a {
    display: flex;
    min-height: 48px;
    padding-inline: 0;
    color: var(--gg-color-text);
    font-size: var(--gg-font-size-base);
  }
}


/* 7. CONTENT AREA -------------------------------------------------------------- */

/* The page width sits on .site-content, not on .site: .site is the query container, and a
   container query never matches the container itself, so only its children see the 24/32px
   gutters (with the width on .site the text sat 12px right of the logo at 1024px+). */
.site.grid-container { max-width: none; }
.one-container .container,
.one-container .site-content { background: transparent; }
.one-container .site-content {
  box-sizing: border-box;
  max-width: calc(var(--gg-width-wide) + 2 * var(--gg-gutter));
  margin-inline: auto;
  padding: var(--gg-space-6) var(--gg-gutter) var(--gg-space-8);
}
@container site (min-width: 1024px) {
  .one-container .site-content { padding-top: var(--gg-space-7); }
}

/* Page head and text column (export: .gg-article-title, 46rem content column) */
.entry-header { margin-bottom: var(--gg-space-5); }
.entry-title { font-size: var(--gg-font-size-h1); letter-spacing: -0.015em; }
/* body.* — GeneratePress also puts "page"/"post" classes on <article>. */
body.page .entry-header,
body.single .entry-header,
body.page:not(.home) .entry-content,
body.single .entry-content { max-width: var(--gg-width-content); }

/* Prose rhythm inside the post/page body (export: .gg-prose) */
.entry-content > * + * { margin-top: var(--gg-space-4); }
.entry-content > h2 { margin-top: var(--gg-space-7); }
.entry-content > h3 { margin-top: var(--gg-space-6); }
.entry-content > h3 + p { margin-top: var(--gg-space-2); }
.entry-content > :is(ul, ol),
.gg-prose :is(ul, ol) { padding-left: 1.25em; }
.entry-content > :is(ul, ol) > li + li,
.gg-prose :is(ul, ol) > li + li { margin-top: var(--gg-space-1); }
.entry-content > blockquote {
  padding-left: var(--gg-space-4);
  border-left: 3px solid var(--gg-color-border-strong);
  color: var(--gg-color-text-2);
}
.entry-content img { border-radius: var(--gg-radius-md); }
.entry-content :where(table) { width: 100%; border-collapse: collapse; }
.entry-content :where(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--gg-color-border); text-align: left; }
/* Plain tables (Markdown articles have no wrapper) scroll sideways on narrow screens instead of
   widening the page, like the design's .gg-compare; cells are a little tighter there. */
@container site (max-width: 699px) {
  .entry-content > table { display: block; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .entry-content > table :where(th, td) { padding: 8px 10px; font-size: var(--gg-font-size-sm); }
}
.entry-content :where(th) { font-weight: 700; }

/* (WordPress' block-gap margins inside components are removed in base.css, before gamingguiden.css.) */

/* Real product photos in the product cards (the export only had a placeholder): shop photos have
   white backgrounds, so the frame turns white with a hairline, and the photo is fitted inside it. */
.gg-product__media:has(> img) {
  position: relative;
  display: block;
  background: var(--gg-color-surface);
  border: 1px solid var(--gg-color-border);
}
.gg-product__media:has(> img) > :not(img) { display: none; }   /* the placeholder, shown if the photo fails */
.gg-product__media > img {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: contain;
  border-radius: 0;
}
/* The price from [gg_pris] gets its own line above the button and "Reklamelink" in the card. Only
   in full cards from 700px, where the export lays the actions out in a row; below that they are a column anyway
   (and wrapping a column would push the button out to the side). */
@container site (min-width: 700px) {
  .gg-product--full .gg-product__actions { flex-wrap: wrap; }
  .gg-product--full .gg-product__actions > .gg-price { flex: 1 0 100%; }
  .gg-product--full .gg-product__actions > .gg-button { flex: none; }
}
/* Accessory grid ("tilbehør" block): compact cards, two per row from 700px. */
.entry-content > .gg-accessories { margin-top: var(--gg-space-4); }
/* [gg_prisgraf] directly under a product card ("prisgraf: ja" in a produkt block). */
.entry-content > .gg-product__chart { margin-top: var(--gg-space-3); }
/* Product cards from article blocks get a little more room between them than prose. */
.entry-content > .gg-product + .gg-product,
.entry-content > .gg-product__chart + .gg-product { margin-top: var(--gg-space-5); }

/* [gg_pris key="…"]: the shop's price from its Partner-ads feed (mu-plugin gamingguiden-partner-ads.php).
   The shortcode block wraps it in a <p>; when there is no fresh price that <p> is empty and hidden. */
.gg-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.gg-price__amount { font-family: var(--gg-font-display); font-size: var(--gg-font-size-xl); font-weight: 600; line-height: 1.2; color: var(--gg-color-text); }
.gg-price__meta { color: var(--gg-color-text-3); font-size: var(--gg-font-size-sm); }
.gg-product__actions > p:empty { display: none; }

/* The meta line under a post title ("Opdateret … · Indeholder reklamelinks", functions.php). */
.entry-header .gg-meta { margin-top: var(--gg-space-3); }

/* Guide header band (posts): eyebrow, title, meta line and photo tiles of the guide's products on a
   full-width subtle band; tiles to the right of the title from 1024px. */
body.single.one-container .site-content { padding-top: 0; }
body.single .entry-header {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--gg-space-3);
  max-width: none;
  margin-bottom: var(--gg-space-6);
  padding-block: var(--gg-space-6);
}
body.single .entry-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--gg-color-subtle);
  border-bottom: 1px solid var(--gg-color-border);
}
body.single .entry-header > * { margin: 0; }
body.single .entry-header .entry-title { max-width: var(--gg-width-content); }
body.single .entry-header .entry-meta:empty { display: none; }
.gg-guide-hero__picks { margin-top: var(--gg-space-2); }
@container site (min-width: 1024px) {
  body.single .entry-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--gg-space-7);
    padding-block: var(--gg-space-7);
  }
  body.single .entry-header > * { grid-column: 1; }
  body.single .entry-header > .gg-guide-hero__picks { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}

/* Photo tiles (guide header, front-page hero): product photo on a white card + a short label. */
.gg-picks { display: flex; gap: 12px; }
.gg-pick {
  display: grid;
  flex: 0 1 120px;
  min-width: 0;
  justify-items: center;
  align-content: start;
  gap: 6px;
  color: var(--gg-color-text);
  font-size: var(--gg-font-size-xs);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}
.gg-pick__img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--gg-color-surface);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-md);
  box-shadow: var(--gg-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gg-pick__img > img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; border-radius: 0; }
.gg-pick__img > svg { position: absolute; inset: 0; width: 36px; height: 36px; margin: auto; color: var(--gg-color-text-3); }
.gg-pick__img > .gg-product__media-note,
.gg-pick__img:has(> img) > svg { display: none; }
.gg-pick:hover { color: var(--gg-color-accent); text-decoration: none; }
.gg-pick:hover .gg-pick__img { transform: translateY(-2px); box-shadow: var(--gg-shadow-md); }

/* Front-page hero as a banner: a soft band, and the photo tiles under the button. */
.home .gg-hero { background: linear-gradient(180deg, var(--gg-color-subtle) 0%, var(--gg-color-bg) 100%); }
.gg-hero__picks { width: 100%; max-width: 400px; margin-top: var(--gg-space-2); }

/* [gg_prisfald]: the drop in kroner as the card's badge. */
.gg-badge--deal { background: var(--gg-color-accent); color: var(--gg-color-on-accent); }

/* [gg_annonce]: a shop banner, clearly marked "Annonce", centred in the column or the page. */
.gg-ad { display: grid; justify-items: center; gap: 6px; margin-block: var(--gg-space-6); }
.gg-ad__label { color: var(--gg-color-text-3); font-size: var(--gg-font-size-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.gg-ad__link { display: block; max-width: 100%; line-height: 0; }
.gg-ad img { display: block; max-width: 100%; height: auto; border-radius: var(--gg-radius-sm, 6px); }
.gg-ad-band { padding-block: var(--gg-space-4); }
.gg-ad-band .gg-ad { margin-block: 0; }

/* [gg_prisgraf key="…"]: price graph from the price history (mu-plugin gamingguiden-partner-ads.php).
   The SVG stretches to the column with non-scaling strokes; labels and dots are HTML, positioned in %. */
.gg-pricechart {
  margin: 0;
  padding: 16px 16px 14px;
  background: var(--gg-color-surface);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
}
.gg-pricechart__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 14px; }
.gg-pricechart__title { font-family: var(--gg-font-display); font-size: var(--gg-font-size-h3); font-weight: 600; line-height: 1.2; color: var(--gg-color-text); }
.gg-pricechart__meta { color: var(--gg-color-text-3); font-size: var(--gg-font-size-sm); }
.gg-pricechart__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 160px auto;
  column-gap: 10px;
  padding-top: 6px;   /* room for the top label */
}
.gg-pricechart__yaxis, .gg-pricechart__xaxis { position: relative; color: var(--gg-color-text-3); font-size: var(--gg-font-size-xs); line-height: 1; font-variant-numeric: tabular-nums; }
.gg-pricechart__yaxis { min-width: 4.6em; }
.gg-pricechart__yaxis span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.gg-pricechart__plot { position: relative; }
.gg-pricechart__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gg-pricechart__grid { stroke: var(--gg-color-border); stroke-width: 1; }
.gg-pricechart__line { fill: none; stroke: var(--gg-color-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.gg-pricechart__line--out { stroke: var(--gg-color-text-3); stroke-width: 2; stroke-dasharray: 4 5; }
.gg-pricechart__dot {
  position: absolute;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--gg-color-accent);
  box-shadow: 0 0 0 3px var(--gg-color-surface);
}
.gg-pricechart__dot--low { background: var(--gg-color-surface); border: 2.5px solid var(--gg-color-accent); }
.gg-pricechart__xaxis { grid-column: 2; height: 1em; margin-top: 8px; }
.gg-pricechart__xaxis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.gg-pricechart__xaxis span:first-child { transform: none; }
.gg-pricechart__xaxis span:last-child { transform: translateX(-100%); }
.gg-pricechart__summary { margin-top: 12px; color: var(--gg-color-text-2); font-size: var(--gg-font-size-sm); line-height: 1.5; }
.gg-pricechart__summary strong { color: var(--gg-color-text); font-weight: 700; }
.gg-pricechart__legend { color: var(--gg-color-text-3); }
.gg-pricechart-note { color: var(--gg-color-text-3); font-size: var(--gg-font-size-sm); }

/* "Guides på vej" on the front page: the needs list as plain items until the guides exist. */
span.gg-needs__link,
span.gg-needs__link:hover { color: var(--gg-color-text); cursor: default; }

/* The export's arrow icons for links written in the block editor (plain text, no <svg>): the same
   paths as a CSS mask in currentColor, so the content stays editable. Links that do carry a
   .gg-icon keep it. */
.gg-more:not(:has(.gg-icon))::after,
a.gg-needs__link:not(:has(.gg-icon))::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--gg-arrow) center / contain no-repeat;
	mask: var(--gg-arrow) center / contain no-repeat;
	transition: transform 0.15s ease;
}
.gg-more:not(:has(.gg-icon)) {
	--gg-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15'/%3E%3Cpath d='M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
}
a.gg-needs__link:not(:has(.gg-icon)) {
	--gg-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5'/%3E%3C/svg%3E");
}
a.gg-needs__link:not(:has(.gg-icon))::after { width: 1.25em; height: 1.25em; color: var(--gg-color-text-3); }
.gg-more:not(:has(.gg-icon)):hover::after,
a.gg-needs__link:not(:has(.gg-icon)):hover::after { transform: translateX(3px); }
a.gg-needs__link:not(:has(.gg-icon)):hover::after { color: var(--gg-color-accent); }

/* Front page: full-width sections, each with its own .gg-container (as in the export). The
   content area itself is full width there, so the sections need no 100vw bleed (which would
   include the scrollbar and overflow). */
.home.one-container .site-content { max-width: none; padding: 0; }   /* both classes are on <body> */
.home .entry-content { margin-top: 0; }
.home .entry-content > .alignfull { margin-inline: 0; width: auto; max-width: none; }
.entry-content > .alignfull + .alignfull { margin-top: 0; }

/* Complianz' generated documents ([cmplz-document], e.g. Cookiepolitik): its document.css sets
   14px text and 22px headings; they follow the design's article text instead. */
#cmplz-document { max-width: none; font-size: inherit; }
#cmplz-document :is(p, li, td) { font-size: inherit; }
#cmplz-document :is(h2, h3) {
  margin-top: var(--gg-space-6);
  margin-bottom: var(--gg-space-2);
  padding-bottom: 0;
  font-size: var(--gg-font-size-h3);
}
#cmplz-document .cmplz-dropdown :is(p, a),
#cmplz-document .cmplz-dropdown .cookies-per-purpose :is(div, span) { font-size: var(--gg-font-size-sm); }


/* 8. BUTTONS (core/button -> export .gg-button) -------------------------------- */

.wp-block-button__link,
.wp-element-button,
a.wp-block-button__link:not(.has-background) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  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: var(--gg-font-size-md);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus,
a.wp-block-button__link:not(.has-background):hover,
a.wp-block-button__link:not(.has-background):focus {
  background: color-mix(in oklab, var(--gg-color-accent) 85%, black);
  color: var(--gg-color-on-accent);
  text-decoration: none;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 1px solid var(--gg-color-border-strong);
  background: var(--gg-color-surface);
  color: var(--gg-color-text);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--gg-color-subtle);
  color: var(--gg-color-text);
}


/* 9. FOOTER ------------------------------------------------------------------------
   gamingguiden_footer() renders the export's .gg-footer inside GeneratePress'
   .site-footer wrapper; the "Cookieindstillinger" button is a Complianz trigger. */

.site-footer { background: var(--gg-color-subtle); }
.gg-footer .gg-publisher a { color: inherit; }
.gg-footer .gg-cookie-settings { font-family: var(--gg-font-body); font-weight: 400; }

/* Complianz' own floating "manage consent" tab is redundant next to the footer button. */
#cmplz-manage-consent .cmplz-manage-consent { display: none; }


/* 10. ACCESSIBILITY HELPERS ------------------------------------------------------- */

.skip-link:focus {
  background: var(--gg-color-surface);
  color: var(--gg-color-text);
  outline: 2px solid var(--gg-color-accent);
}

/* ---------------------------------------------------------------- photos, tip boxes, checklists
   Photos are the article's own (billeder.csv in its folder; 07-publish.sh uploads them). Used first
   in Tips og tricks (2026-10-03, the owner wanted them "less boring"). */

/* The header band's photo on posts without product cards (functions.php gamingguiden_post_photo()). */
.gg-guide-hero__photo { margin: var(--gg-space-2) 0 0; }
.gg-guide-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--gg-radius-lg);
  box-shadow: var(--gg-shadow-md);
}
.gg-guide-hero__credit,
.gg-figure__caption {
  margin-top: var(--gg-space-2);
  color: var(--gg-color-text-3);
  font-size: var(--gg-font-size-xs);
  line-height: 1.45;
}
.gg-figure__credit a { color: inherit; text-decoration-color: var(--gg-color-border-strong); }
@container site (min-width: 1024px) {
  body.single .entry-header > .gg-guide-hero__photo { grid-column: 2; grid-row: 1 / span 4; width: 440px; margin-top: 0; }
  .gg-guide-hero__img { aspect-ratio: 4 / 3; }
}

/* [gg_billede]: a photo in the article, cropped to 3:2 unless form="hel". */
.entry-content .gg-figure { margin: var(--gg-space-6) 0; }
.gg-figure__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--gg-radius-lg);
}
.gg-figure--hel .gg-figure__img { aspect-ratio: auto; }

/* Tip boxes: a paragraph followed by {: .gg-callout } or {: .gg-callout .gg-callout--advarsel }. */
.entry-content .gg-callout {
  margin: var(--gg-space-5) 0;
  padding: var(--gg-space-4) var(--gg-space-5);
  background: #f1edfa;   /* the accent, very light (fallback) */
  background: color-mix(in oklab, var(--gg-color-accent) 8%, white);
  border-left: 4px solid var(--gg-color-accent);
  border-radius: 0 var(--gg-radius-md) var(--gg-radius-md) 0;
}
.entry-content .gg-callout--advarsel { background: #fdf3e7; border-left-color: #b4570f; }

/* Quick facts under a tip: a paragraph followed by {: .gg-facts }, e.g. "⏱️ 10 min · 💰 Gratis". */
.entry-content .gg-facts {
  display: inline-block;
  margin: 0 0 var(--gg-space-3);
  padding: 4px 12px;
  background: var(--gg-color-subtle);
  border-radius: var(--gg-radius-pill);
  color: var(--gg-color-text-2);
  font-size: var(--gg-font-size-sm);
}

/* Checklists: <ul class="gg-checklist"> written as HTML in the article; each item gets a tick. */
.entry-content .gg-checklist {
  margin: var(--gg-space-5) 0;
  padding: var(--gg-space-4) var(--gg-space-5);
  list-style: none;
  background: var(--gg-color-surface);
  border: 1px solid var(--gg-color-border);
  border-radius: var(--gg-radius-lg);
}
.entry-content .gg-checklist li { position: relative; margin: 0.4em 0; padding-left: 2em; }
.entry-content .gg-checklist li::before { content: "✅"; position: absolute; left: 0; }