/*
 * Rettelser på kommercielle sider.
 *
 * frontend.css indeholder reglen
 *     .breadtext ul, ol { margin-top: -1.5em; ... }
 * hvor kommaet gør, at det bare "ol" rammer HELE sitet — også uden for
 * .breadtext. Derfor blev hver nummereret liste trukket 24 px op over sin egen
 * overskrift. app.css sætter kun margin-bottom og overskriver den ikke.
 */
.e-content ol,
.e-content ul {
	margin-top: 0;
}

/* Brede tabeller skal rulle i egen kasse, ikke skubbe siden vandret. */
.e-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* Kreditlinjen skal ombryde på smalle skærme i stedet for at stikke ud. */
.entry-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	align-items: baseline;
	max-width: 100%;
}

.entry-meta-people {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	align-items: baseline;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Typografi og spaltebredde på kommercielle sider.
 *
 * Live kører ikke det redaktionelle tema, så dets layout.css/frontend.css
 * findes slet ikke dér. Hos os ligger de på siden for at klæde header og
 * footer, og fordi de er ulagdelte slår de hele app.css, som ligger i @layer.
 * Resultatet var 13 px brødtekst og H2 i samme størrelse som brødteksten.
 *
 * Værdierne herunder er aflæst direkte på live med getComputedStyle.
 * ───────────────────────────────────────────────────────────────────────── */

body.gr-commercial-page {
	font-size: 16px;
	line-height: 26px;
}

body.gr-commercial-page .e-content p,
body.gr-commercial-page .e-content li,
body.gr-commercial-page .e-content table,
body.gr-commercial-page .intro {
	font-size: 16px;
	line-height: 24px;
}

body.gr-commercial-page .e-content h2,
body.gr-commercial-page .e-content h3,
body.gr-commercial-page .e-content h4 {
	font-size: 18px;
	line-height: 22.5px;
	font-weight: 700;
	margin-bottom: 16px;
}

body.gr-commercial-page .gambling-title {
	font-size: 36px;
	line-height: 36px;
	font-weight: 700;
	margin: 0 0 24px;
}

body.gr-commercial-page .entry-meta {
	font-size: 14px;
}

body.gr-commercial-page .gambling-disclosure {
	font-size: 10px;
	line-height: 11px;
}

/*
 * Spaltebredde. Live: ydre container 1000 px centreret, artikel 640 px,
 * højrespalte 300 px, 20 px imellem. Hos os er spalten 916 px bred og
 * venstrestillet, så linjelængden bliver 43 % længere end originalens.
 */
@media (min-width: 1024px) {
	/*
	 * Live: ydre container 1000 px centreret, artikel 640 px, højrespalte
	 * 300 px, 20 px imellem. Flex-rækken skal ligge på <article>, som er
	 * spalternes forælder — ikke på #main, hvis eneste barn er artiklen.
	 *
	 * refresh.css sætter ".colwide { width: … !important }" og det
	 * redaktionelle layout er float-baseret, derfor !important og float:none.
	 */
	body.gr-commercial-page #main {
		max-width: 1000px;
		margin-inline: auto;
		padding-inline: 20px;
	}

	body.gr-commercial-page article.gambling {
		display: flex;
		gap: 20px;
		align-items: flex-start;
		width: 100%;
	}

	body.gr-commercial-page .colwide {
		width: 640px !important;
		flex: 0 0 640px;
		min-width: 0;
		margin: 0 !important;
		float: none !important;
	}

	body.gr-commercial-page .colthin {
		width: 300px !important;
		flex: 0 0 300px;
		margin: 0 !important;
		float: none !important;
	}
}

/* Keep the primary action readable above the inherited editorial link rules. */
body.gr-commercial-page .e-content a.toplist-gamereactor__offer-cta-btn {
    color: #fff;
    background-color: #c91570;
    text-decoration: none;
}
body.gr-commercial-page .e-content a.toplist-gamereactor__offer-cta-btn:hover,
body.gr-commercial-page .e-content a.toplist-gamereactor__offer-cta-btn:focus-visible {
    color: #fff;
    background-color: #b81467;
}
body.gr-commercial-page .e-content a.toplist-gamereactor__offer-cta-btn:focus-visible {
    /* The light outline remains visible on dark cards; its dark backing
       also separates it from light backgrounds. */
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #171715;
}

/* Callouts already provide padding/gaps. Article heading margins must not
 * add another 18–28px inside them; keep the blocks' original inset values. */
body.gr-commercial-page article.gambling .e-content :is(.top-picks-block, .summary-block) :is(h1, h2, h3, h4, h5, h6),
body.gr-commercial-page article.gambling .e-content .pro-tip-title,
body.gr-commercial-page article.gambling .e-content .gr-how-we-rate-slide-heading {
    margin: 0 0 8px;
}
body.gr-commercial-page article.gambling .e-content .special-list-title {
    margin: 0 0 12px;
}
body.gr-commercial-page article.gambling .e-content .special-list-panel {
    position: relative;
    overflow: hidden;
    padding: 16px;
    margin-block: 24px;
    background-image: linear-gradient(67.2deg, #f0fbff 5.96%, #d4f3ff 99.15%);
}
body.gr-commercial-page article.gambling .e-content .special-list-panel.is-cross {
    background-image: linear-gradient(247.22deg, #ffdfeb 0%, #f0fbff 100%);
}
body.gr-commercial-page article.gambling .e-content .special-list-panel::before {
    content: '';
    position: absolute;
    inset-block-start: 26px;
    inset-inline-end: 0;
    width: 69px;
    height: 63px;
    background: var(--gr-special-list-mark) no-repeat center / contain;
}
body.gr-commercial-page article.gambling .e-content .special-list-panel.is-cross::before {
    inset-block-start: 20px;
    width: 62px;
    height: 71px;
}
body.gr-commercial-page article.gambling .e-content .special-list-panel > * { position: relative; }
body.gr-commercial-page article.gambling .e-content .special-list-panel > .special-list {
    margin-block: 0;
    gap: 4px;
}
body.gr-commercial-page article.gambling .e-content .special-list-panel > .special-list > li::before {
    inset-block-start: 2px;
    width: 20px;
    height: 20px;
}
body.gr-commercial-page article.gambling .e-content .wp-block-column > .special-list-panel {
    height: 100%;
    margin-block: 0;
}
body.gr-commercial-page article.gambling .e-content .gr-how-we-rate-heading {
    margin: 0 0 16px;
}
body.gr-commercial-page article.gambling .e-content .timeline :is(h1, h2, h3, h4, h5, h6, p) {
    margin-block: 0;
}
body.gr-commercial-page article.gambling .e-content .gr-how-we-rate-cta a {
    color: #181715;
    border-color: #181715;
    background-color: transparent;
    text-decoration: none;
}
body.gr-commercial-page article.gambling .e-content .gr-how-we-rate-cta a:hover,
body.gr-commercial-page article.gambling .e-content .gr-how-we-rate-cta a:focus-visible {
    color: #fff;
    background-color: #181715;
    text-decoration: none;
}
body.gr-commercial-page article.gambling .e-content .gr-how-we-rate-cta a:focus-visible {
    outline: 2px solid #0088cc;
    outline-offset: 3px;
}
body.gr-commercial-page .grc-cm-hero .entry-meta-verified a {
    color: #0088cc;
}
body.gr-commercial-page .grc-cm-hero .entry-meta-verified a:hover,
body.gr-commercial-page .grc-cm-hero .entry-meta-verified a:focus-visible {
    color: #6cb6ef;
    text-decoration: underline;
}

/* Native disclosure keeps a long guide's contents compact and keyboard
 * operable. The expanded list scrolls within the available sidebar space. */
body.gr-commercial-page .grc-toc {
    margin: 0 0 24px;
    border: 1px solid #ddd;
    background: #fff;
    color: #181715;
    font: 16px/24px var(--grc-font-body);
}
body.gr-commercial-page .grc-toc summary {
    padding: 14px 16px;
    cursor: pointer;
    font-family: var(--grc-font-ui);
    font-weight: 600;
}
body.gr-commercial-page .grc-toc summary:focus-visible {
    outline: 2px solid #0088cc;
    outline-offset: 2px;
}
body.gr-commercial-page .grc-toc nav {
    max-height: 50vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 16px 16px;
}
body.gr-commercial-page .grc-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.gr-commercial-page .grc-toc li {
    padding: 0;
    margin: 0;
    font: inherit;
}
body.gr-commercial-page .grc-toc li::before { content: none; }
body.gr-commercial-page .grc-toc ul ul { padding-inline-start: 16px; }
body.gr-commercial-page .grc-toc a {
    display: block;
    padding-block: 5px;
    color: #0088cc;
    text-decoration: underline;
}
body.gr-commercial-page article.gambling .e-content :is(h2, h3)[id] { scroll-margin-block-start: 88px; }