/* Slyde design polish 1.0.0 — scoped corrections on top of the native Bricks pages.
 * Palette: brand orange #ff6633 (fills only), accessible orange text #bc430c,
 * ink #1d1b1a / #32302f, peach #ffe2d4. Target: WCAG 2.2 AA text contrast. */

/* ---------- Orange buttons: keep the brand fill, use dark ink (5.9:1) ---------- */
.bricks-button.bricks-background-dark:not(.flex-button),
.bricks-button.bricks-background-secondary:not(.flex-button),
.cmplz-cookiebanner .cmplz-btn.cmplz-accept,
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences {
	color: #1d1b1a !important;
}
.bricks-button.bricks-background-dark:not(.flex-button):hover,
.bricks-button.bricks-background-dark:not(.flex-button):focus-visible,
.bricks-button.bricks-background-secondary:not(.flex-button):hover,
.bricks-button.bricks-background-secondary:not(.flex-button):focus-visible {
	background-color: #32302f !important;
	color: #fff !important;
}
.bricks-button.bricks-background-dark:not(.flex-button):focus-visible,
.bricks-button.bricks-background-secondary:not(.flex-button):focus-visible {
	outline: 3px solid #bc430c;
	outline-offset: 3px;
}

/* ---------- Orange text on white/peach ---------- */
#brx-header .bricks-nav-menu .current-menu-item > a,
#brx-header .bricks-nav-menu a[aria-current="page"],
#brx-header .bricks-nav-menu > li > a:hover {
	color: #bc430c;
}
#brx-content .slyde-remote__eyebrow { color: #bc430c; }
/* Billing-bridge Kundecenter pill (child theme), if/when the bridge is live. */
a.menu-item-slyde-billing-login,
li.menu-item-slyde-billing-login > a { color: #1d1b1a !important; }

/* ---------- Header: no wrapped menu labels; tablets use the mobile menu ---------- */
#brx-header .bricks-nav-menu > li > a { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 991px) {
	#brx-header .bricks-nav-menu-wrapper { display: none !important; }
	#brx-header .bricks-mobile-menu-toggle { display: block !important; }
	#brx-header .brxe-logo { width: 200px; flex-shrink: 0; }
	#brx-header .brxe-logo img { width: 100%; height: auto; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	#brx-header .bricks-nav-menu { gap: 14px; }
	#brx-header .bricks-nav-menu > li > a { font-size: 14px; }
}

/* ---------- Hosting: "Sammenlign vores webhoteller" ---------- */
#brxe-qzmuqy { padding-inline: 0; text-align: center; width: 100%; }
#brxe-guusrg {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
	max-width: 1240px;
	margin-inline: auto;
	padding-top: 24px;
}
#brxe-guusrg::before, #brxe-guusrg::after { display: none; content: none; }
#brxe-guusrg > .brxe-div {
	float: none;
	width: auto;
	margin: 0;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(50, 48, 47, .12);
}
/* Plan name */
#brxe-guusrg > .brxe-div > :nth-child(1) {
	background: #32302f;
	color: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	padding: 18px 12px;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .01em;
}
/* Price block */
#brxe-guusrg > .brxe-div > :nth-child(2) {
	background: #242221;
	box-shadow: none;
	border: 0;
	color: #fff;
	padding: 22px 20px 24px;
}
#brxe-guusrg #brxe-iafpdz, #brxe-guusrg #brxe-cuxhyt,
#brxe-guusrg #brxe-fijoxw, #brxe-guusrg #brxe-ynsrzj {
	color: #fff;
	font-size: 46px;
	line-height: 1.15;
	font-weight: 600;
	text-shadow: none;
}
#brxe-guusrg .slyde-hosting-price-note {
	color: #e8e3df;
	font-size: 15px;
	line-height: 1.55;
	text-shadow: none;
}
#brxe-guusrg .slyde-hosting-price-note p { margin: 0; }
#brxe-guusrg .slyde-hosting-price-note a {
	background: none;
	color: #ffc4a8;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 3px;
}
#brxe-guusrg .slyde-hosting-price-note a:hover,
#brxe-guusrg .slyde-hosting-price-note a:focus-visible { color: #fff; }
/* Feature rows */
#brxe-guusrg > .brxe-div > :nth-child(3) > div {
	padding: 13px 16px;
	text-shadow: none;
	border-bottom: 1px solid #eee7e2;
	background: #fff;
}
#brxe-guusrg > .brxe-div > :nth-child(3) > div:nth-child(even) { background: #faf6f3; }
#brxe-guusrg > .brxe-div > :nth-child(3) p {
	color: #32302f;
	font-size: 16px;
	line-height: 1.5;
	text-shadow: none;
}
/* Order button */
#brxe-guusrg > .brxe-div > :nth-child(4) {
	background: #fff;
	margin-top: auto;
	padding: 22px 16px;
	text-align: center;
}
/* Medium is the raised plan: give it a visible cue. */
#brxe-guusrg > #brxe-icyekw { box-shadow: 0 0 0 3px #ff6633, 0 16px 36px rgba(50, 48, 47, .2); }
#brxe-guusrg #brxe-xosohe { background: #ff6633; color: #1d1b1a; padding-top: 12px; }
/* "Most popular" badge (BKH, 2026-10-27). In normal flow above the plan name so
 * it cannot overlap name or price; Danish pages only (CSS text is not translatable). */
html[lang^="da"] #brxe-guusrg #brxe-xosohe::before {
	content: "Mest populære";
	display: block;
	width: fit-content;
	margin: 0 auto 6px;
	padding: 3px 12px;
	border-radius: 999px;
	background: #1d1b1a;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .03em;
}
@media (min-width: 992px) {
	#brxe-guusrg > #brxe-icyekw { transform: translateY(-12px); }
}
@media (max-width: 991px) {
	#brxe-guusrg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 600px) {
	#brxe-guusrg { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Hero H1s: the longest word was wider than the text column
 * (Software: "virksomhedens" ran into the image; Hosting: "hjemmeside").
 * Sizes are fitted to the ~32vw hero column; tablets/phones keep their sizes. */
@media (min-width: 992px) {
	#brxe-uofxti { font-size: clamp(36px, 3.8vw, 56px); line-height: 1.12; }
	#brxe-odzuqo { font-size: clamp(40px, 4.7vw, 70px); line-height: 1.1; }
	#brxe-oxgvkm, #brxe-ysizgb { font-size: clamp(56px, 7vw, 84px); }
}

/* ---------- Long Danish words never widen the page ---------- */
#brx-content :is(h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; }

/* ---------- Phones ---------- */
@media (max-width: 767px) {
	/* Centred text columns: keep bullets attached to their items. */
	#brx-content .brxe-text ul {
		display: table;
		margin-inline: auto;
		text-align: left;
		padding-left: 1.2em;
	}
	/* Wide policy tables scroll inside the text column instead of the page. */
	#brx-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}
@media (max-width: 600px) {
	/* Phone/e-mail side by side truncated the placeholders. */
	.brxe-form .form-group:has(> input[type="tel"]),
	.brxe-form .form-group:has(> input[type="email"]) { width: 100% !important; }
}

/* ---------- Footer: tablet columns were squeezed to one word per line ---------- */
@media (min-width: 768px) and (max-width: 991px) {
	#brxe-34e5d4 { flex-wrap: wrap; row-gap: 32px; }
	#brxe-6d0930 { flex: 0 0 100%; width: 100%; max-width: 100%; }
	#brxe-487023, #brxe-7f9006, #brxe-8d5e19 { flex: 1 1 0; min-width: 0; }
}
#brx-footer li > a { font-size: 15px; }

/* ---------- Home: testimonials (visible again now Splide loads normally) ---------- */
#brxe-fgdslv .brxe-heading,
#brxe-fgdslv .brxe-text-basic { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 991px) {
	/* Two half-width columns left a ~100px-wide quote card on tablets. */
	#brxe-3efe04 { flex-direction: column; align-items: stretch; row-gap: 40px; }
	#brxe-890ded, #brxe-09016f, #brxe-fgdslv { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
	/* Home service cards: three 160px columns on tablets; stack them. */
	#brxe-kdpyfs { flex-direction: column; }
	#brxe-kdpyfs > * { width: 100%; max-width: 100%; }
}

/* ---------- Phones: oversized headings split long Danish words ---------- */
@media (max-width: 478px) {
	#brxe-eehiie { font-size: clamp(30px, 10vw, 44px); line-height: 1.15; }
	#brx-content .brxe-text h3 { font-size: 22px; line-height: 1.3; hyphens: auto; }
	#brx-content .brxe-text h4 { font-size: 20px; line-height: 1.3; hyphens: auto; }
}

/* ---------- Contact sections: two fixed 584px columns + 100px gap overflowed the
 * page from 1101px to ~1360px (commerce.css already stacks them ≤1100px). ---------- */
@media (min-width: 1101px) and (max-width: 1439px) {
	#brxe-bphoau, #brxe-jwgupp, #brxe-bpjnyd {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(40px, 5vw, 100px);
		align-items: center;
	}
	#brxe-bphoau > *, #brxe-jwgupp > *, #brxe-bpjnyd > *,
	#brxe-eb65d7, #brxe-ninpjp, #brxe-vlseyo { width: auto; min-width: 0; max-width: 100%; }
}