/* ===========================================================================
 * Refresh-laget — 2026.
 *
 * Bevidst ADSKILT fra den harvestede CSS (frontend.css / layout.css), så
 * originalens stilark stadig kan gensynkroniseres fra kilden uden at vores
 * ændringer går tabt. Alt her er tilsigtede afvigelser fra originalen.
 * ======================================================================== */

/* --- Bredere container ---------------------------------------------------
 * Originalen er 1000px (665 + 335). Vi går til 1280 og lader indholdsspalten
 * tage hele forskellen; sidebjælken beholder sin bredde, så bokse og
 * annoncefri moduler ikke skal måles om.
 */
:root {
	--gr-max: 1280px;
	--gr-thin: 340px;
	--gr-gap: 24px;
}

.main { width: var(--gr-max) !important; max-width: 100%; }
.colwide { width: calc(var(--gr-max) - var(--gr-thin) - var(--gr-gap)) !important; }
.colthin { width: var(--gr-thin) !important; }
.colwide_grtv { width: calc(var(--gr-max) - 30px) !important; }
#ads_top2, #cookieInfoBoxMenu, #cookieInfoBoxExpand { width: var(--gr-max); max-width: 100%; }

/* Bælter og rubrikker følger den nye bredde i stedet for 985px. */
.rightbox, .rbreakout, [id^="grtvbelt"], .contentrr { max-width: 100%; }
#main > section.rightbox { width: calc(var(--gr-max) - 15px); }

/* --- Headerrækken -------------------------------------------------------
 * Burger, logo og navigation til venstre; sprogvælger og sociale ikoner
 * yderst til højre. Alt i ÉN række, som bestilt.
 */
#mainHeaderSection {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: var(--gr-max);
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}
#nav-container { display: flex; align-items: center; gap: 22px; min-width: 0; }
#nav-container .gr-logo a { display: flex; }
.rightMenu { display: flex; align-items: center; gap: 18px; margin-left: auto; }

#gr-primary-nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#gr-primary-nav a {
	display: block;
	padding: 10px 13px;
	color: #1a1a1a;
	font: 600 13px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .02em;
	text-decoration: none;
	border-radius: 6px;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
#gr-primary-nav a:hover, #gr-primary-nav a:focus-visible {
	background: #f1f1f1;
	color: #000;
	text-decoration: none;
}

/* --- Sprogvælger --------------------------------------------------------- */
.gr-langpick { position: relative; }
.gr-langbtn {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 7px 11px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 999px;
	font: 600 13px/1 Arial, Helvetica, sans-serif;
	color: #1a1a1a;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.gr-langbtn:hover { border-color: #bdbdbd; background: #fafafa; }
.gr-langbtn[aria-expanded="true"] { border-color: #e0322e; box-shadow: 0 0 0 3px rgba(224,50,46,.14); }
.gr-langbtn .gr-flag { font-size: 17px; line-height: 1; }
.gr-langbtn .gr-caret { color: #8a8a8a; transition: transform .18s; }
.gr-langbtn[aria-expanded="true"] .gr-caret { transform: rotate(180deg); }

.gr-langmenu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 200;
	width: 216px;
	max-height: 340px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	box-shadow: 0 12px 34px rgba(0,0,0,.16);
	padding: 6px;
}
.gr-langmenu[hidden] { display: none; }
.gr-langmenu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	color: #1a1a1a;
	font-size: 14px;
	text-decoration: none;
}
.gr-langmenu a:hover, .gr-langmenu a:focus-visible { background: #f3f3f3; text-decoration: none; }
.gr-langmenu .gr-flag { font-size: 18px; line-height: 1; }

.socialTopBar ul.socialTopBar { display: flex; align-items: center; gap: 13px; margin: 0; padding: 0; }

@media (max-width: 1100px) {
	#gr-primary-nav { display: none; }
}

/* --- Footer -------------------------------------------------------------- */
#mainfooter { background: #0e0e0e; }
#mainfooter #brandSection { padding: 30px 0 22px; }
/* Temaet giver .footercol en fast bredde på 98px (tiltænkt de flydende
 * bokse i originalen). I gridet skal kolonnen fylde sin celle, ellers
 * brækker "Om redaktionen" til to linjer i en 300px bred kolonne. */
#mainfooter .gr-footer-grid .footercol,
#mainfooter .gr-footer-grid .footercol ul,
#mainfooter .gr-footer-grid .footercol li {
	width: 100% !important;
	max-width: 100%;
	float: none;
	box-sizing: border-box;
}
#mainfooter .gr-footer-grid .footercol { padding: 0; }
#mainfooter .gr-footer-grid .footercol a { display: inline-block; }
#mainfooter .footercol h2 {
	font: 700 12px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8c8c8c;
	margin: 0 0 12px;
}
#mainfooter .footercol ul { list-style: none; margin: 0; padding: 0; }
#mainfooter .footercol li { margin: 0 0 9px; }
#mainfooter .footercol a {
	color: #d8d8d8;
	font-size: 14px;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .15s, border-color .15s;
}
#mainfooter .footercol a:hover { color: #fff; border-bottom-color: #e0322e; text-decoration: none; }
#mainfooter hr { border: 0; border-top: 1px solid #232323; margin: 8px 0 0; }
#mainfooter #re_bottomaddress {
	color: #6f6f6f;
	font-size: 12px;
	padding: 18px 18px 26px;
	text-align: center;
}
#mainfooter ul.socialFooter { gap: 16px; }
#mainfooter ul.socialFooter svg { transition: transform .15s, opacity .15s; opacity: .85; }
#mainfooter ul.socialFooter a:hover svg { transform: translateY(-2px); opacity: 1; }

/* Footerens kolonner i et rigtigt grid frem for flydende blokke, så de
 * fordeler sig jævnt uanset hvor mange kolonner sitet har (3 på de fleste). */
#mainfooter {
	display: block;
	padding-bottom: 0;
}
#mainfooter > div:first-child { background: #111 !important; }
#mainfooter #brandSection {
	max-width: var(--gr-max);
	margin: 0 auto;
	text-align: center;
}
#mainfooter #brandSection img { margin: 0 auto; }
#mainfooter .slogan {
	color: #9a9a9a;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-top: 10px;
}
#mainfooter ul.socialFooter {
	display: flex;
	justify-content: center;
	align-items: center;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}
#mainfooter ul.socialFooter li { margin: 0; }

/* Kolonnerne: ét grid, centreret i containeren. */
#mainfooter {
	--gr-cols: repeat(auto-fit, minmax(170px, 1fr));
}

#mainfooter .gr-footer-grid {
	display: grid;
	grid-template-columns: var(--gr-cols);
	gap: 28px 34px;
	max-width: var(--gr-max);
	margin: 0 auto;
	padding: 34px 18px 10px;
	box-sizing: border-box;
}

/* --- Små moderniseringer ------------------------------------------------- */
.colthin .gr-sidebox { border-radius: 8px; background: #fafafa; border: 1px solid #ececec; border-top: 0; }
.colthin .gr-sidebox > h4.hbar1 { border-radius: 8px 8px 0 0; }
.colthin .gr-sidebox img { border-radius: 4px; }

/* Kortenes <a> er inline og krymper om billedet, så nogle billeder blev
 * 243px og andre 290px i samme boks. Både artikel, link og billede skal
 * fylde boksens bredde. */
.colthin .gr-sidebox article.guide,
.colthin .gr-sidebox article.guide > a,
.colthin .gr-sidebox .content > article {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	float: none;
}
.colthin .gr-sidebox article.guide > a > img,
.colthin .gr-sidebox img[width] {
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
}

@media (max-width: 1320px) {
	.main, #gr-primary-nav ul { width: 100% !important; }
}

/* --- /igaming/ ----------------------------------------------------------- */
.gr-igaming-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 22px;
	margin: 18px 0 30px;
}
.gr-igaming-card {
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	overflow: hidden;
	padding-bottom: 14px;
	background: #fff;
	transition: box-shadow .18s, transform .18s;
}
.gr-igaming-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); transform: translateY(-2px); }
.gr-igaming-card img { width: 100%; height: auto; display: block; }
.gr-igaming-card h2 { font-size: 17px; margin: 12px 14px 2px; }
.gr-igaming-card .gr-provider { font-size: 12px; color: #777; margin: 0 14px 6px; }
.gr-igaming-card .gr-score { font-weight: 700; margin: 0 14px 6px; }
.gr-igaming-card p { font-size: 14px; margin: 0 14px 10px; color: #444; }
.gr-igaming-card .gr-cta {
	display: inline-block;
	margin: 0 14px;
	padding: 8px 16px;
	background: #e0322e;
	color: #fff;
	border-radius: 6px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}
.gr-igaming-card .gr-cta:hover { background: #c22a26; text-decoration: none; }
.gr-igaming-card .gr-disclaimer { font-size: 11px; color: #888; margin: 10px 14px 0; }

/* --- Megamenu ------------------------------------------------------------
 * Burgermenuen var én lang enkeltspaltet liste med 50+ punkter. Her er den
 * et grid: punkter med undermenu får deres egen spalte, resten samles først.
 */
dialog#nav-content {
	width: min(1180px, 94vw);
	max-width: none;
	max-height: 88vh;
	border: 0;
	border-radius: 14px;
	padding: 26px 30px 30px;
	box-shadow: 0 24px 70px rgba(0,0,0,.34);
}
dialog#nav-content::backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
dialog#nav-content hr { border: 0; border-top: 1px solid #ececec; margin: 18px 0 22px; }

.gr-mega {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 26px 30px;
	align-items: start;
}
.gr-mega-col h3 {
	margin: 0 0 12px;
	font: 700 11px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #9a9a9a;
}
.gr-mega-col h3 a { color: inherit; text-decoration: none; }
.gr-mega-col h3 a:hover { color: #e0322e; text-decoration: none; }
.gr-mega-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Temaet sætter ul { display:flex } — og en flex-container ignorerer
	   column-count, så listerne blev én lang spalte. */
	display: block !important;
}
.gr-mega-col li {
	display: block !important;
	margin: 0 0 1px;
	height: auto !important;
}
.gr-mega-col a {
	display: block;
	padding: 6px 8px;
	margin-left: -8px;
	border-radius: 6px;
	color: #1a1a1a;
	font-size: 14px;
	text-decoration: none;
	transition: background .13s, color .13s;
}
.gr-mega-col a:hover, .gr-mega-col a:focus-visible { background: #f4f4f4; color: #000; text-decoration: none; }

/* Sektionsspalten har flest punkter og fylder to kolonner. */
.gr-mega-sections { grid-column: span 2; }
.gr-mega-sections > ul { column-count: 2; column-gap: 26px; }
/* Videolisten er den længste (24 punkter) og deles også. */
.gr-mega-col:has(> ul > li:nth-child(14)) { grid-column: span 2; }
.gr-mega-col:has(> ul > li:nth-child(14)) > ul { column-count: 2; column-gap: 26px; }
.gr-mega-sections li { break-inside: avoid; -webkit-column-break-inside: avoid; }

/* Sprogene: kompakt liste i to kolonner, så de ikke fylder en hel højde. */
.gr-mega-langs { grid-column: span 2; }
.gr-mega-langs > ul { column-count: 2; column-gap: 26px; }
.gr-mega-langs a { font-size: 13px; padding: 5px 8px; }

@media (max-width: 700px) {
	.gr-mega { grid-template-columns: 1fr 1fr; }
	.gr-mega-sections { grid-column: span 2; }
	.gr-mega-sections ul { columns: 1; }
}

/* --- Statiske sider (kontakt, vilkår, cookies …) --------------------------
 * Indholdet er importeret HTML med h2 + afsnit + mailadresser. Her får det en
 * læsbar bredde, luft og kort omkring hver afdeling — som eksempel på hvordan
 * en indholdsside kan se ud efter refreshen.
 */
.gr-page {
	max-width: 760px;
	padding: 6px 4px 40px;
}
.gr-page h1 {
	font-size: 34px;
	line-height: 1.15;
	margin: 0 0 6px;
	letter-spacing: -.01em;
}
.gr-page .gr-page-lead {
	color: #666;
	font-size: 16px;
	margin: 0 0 26px;
	padding-bottom: 20px;
	border-bottom: 1px solid #ececec;
}
.gr-page p { font-size: 15px; line-height: 1.65; color: #333; margin: 0 0 14px; }
.gr-page h2 {
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8a8a8a;
	margin: 30px 0 10px;
}
.gr-page h3 { font-size: 18px; margin: 22px 0 8px; }
.gr-page a { color: #c22a26; text-decoration: none; border-bottom: 1px solid rgba(194,42,38,.3); }
.gr-page a:hover { border-bottom-color: #c22a26; text-decoration: none; }
.gr-page ul, .gr-page ol { margin: 0 0 16px 20px; }
.gr-page li { margin: 0 0 7px; line-height: 1.6; }
.gr-page img { max-width: 100%; height: auto; border-radius: 8px; }
.gr-page table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.gr-page td, .gr-page th { padding: 9px 12px; border-bottom: 1px solid #eee; text-align: left; font-size: 14px; }

/* Mailadresser bliver til tydelige kontaktkort. */
.gr-page a[href^="mailto:"] {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	margin: 2px 0;
	background: #fbf4f4;
	border: 1px solid #f0dede;
	border-radius: 999px;
	color: #c22a26;
	font-weight: 600;
	font-size: 14px;
}
.gr-page a[href^="mailto:"]::before { content: "✉"; font-size: 13px; }
.gr-page a[href^="mailto:"]:hover { background: #f6e9e9; border-color: #e4c9c9; }