/*
 * A/B Tomsgårdshuse – Nyheder og Driftstatus: hjemmesiden.
 * Farver og skrift hentes fra Elementors globale indstillinger (Site Settings),
 * så visningen følger sidens design. Værdierne efter kommaet bruges kun som reserve.
 */
.bfn-front {
	--bfn-primary: var(--e-global-color-primary, #003366);
	--bfn-secondary: var(--e-global-color-secondary, #00509E);
	--bfn-accent: var(--e-global-color-accent, #FF6F61);
	--bfn-soft: var(--e-global-color-backgroundAccent, #D9E6F2);
	--bfn-line: var(--e-global-color-5fa790c, #8A8A8A);
	--bfn-text: #1a1a1a;
	--bfn-muted: #5b6b7c;
	--bfn-bg: #ffffff;
	--bfn-green: #319A36;
	--bfn-green-soft: #e6f4e7;
	--bfn-amber: #a8650f;
	--bfn-amber-soft: #fdf3e1;
	--bfn-red: var(--bfn-accent);
	--bfn-red-soft: #ffe9e6;
	--bfn-radius: 32px;
	--bfn-font: var(--e-global-typography-text-font-family, "Open Sans"), sans-serif;
	--bfn-font-head: var(--e-global-typography-primary-font-family, "Open Sans"), sans-serif;

	color: var(--bfn-text);
	font-family: var(--bfn-font);
	font-size: 1rem;
	line-height: 1.5;
}
.bfn-front *, .bfn-front *::before, .bfn-front *::after { box-sizing: border-box; }
.bfn-front p { font-size: inherit; margin: 0 0 .5em; }
.bfn-front h1, .bfn-front h2, .bfn-front h3 { font-family: var(--bfn-font-head); color: var(--bfn-primary); }

.bfn-icon { width: 1.1em; height: 1.1em; vertical-align: -0.2em; flex-shrink: 0; display: inline-block; }

/* Metatekst – som "Bestyrelsen · oktober 17, 2026" på forsiden */
.bfn-meta { font-size: 12px; color: var(--bfn-secondary); margin-bottom: .5rem; }

/* ---------- Fælles kort (samme stil som Loop Grid-kortene) ---------- */
.bfn-panel, .bfn-card, .bfn-drift {
	background: var(--bfn-bg);
	border: 1px solid var(--bfn-line);
	border-radius: var(--bfn-radius);
}

/* ---------- Kompakt driftstatus (forsiden) ---------- */
.bfn-panel { padding: 28px 32px; }
.bfn-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.bfn-front .bfn-panel__title { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.2; display: inline-flex; align-items: center; gap: 10px; }
.bfn-panel__title .bfn-icon { width: 22px; height: 22px; color: var(--bfn-secondary); }
.bfn-panel__count { font-size: 12px; color: var(--bfn-secondary); }
.bfn-front .bfn-panel__link { display: inline-block; margin-top: 18px; font-weight: 600; font-size: 14px; color: var(--bfn-secondary); text-decoration: none; }
.bfn-front .bfn-panel__link:hover { color: var(--bfn-primary); text-decoration: underline; }

.bfn-front .bfn-compact { list-style: none; margin: 0; padding: 0; }
.bfn-front .bfn-compact li { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--bfn-soft); margin: 0; }
.bfn-front .bfn-compact li:first-child { border-top: 0; padding-top: 0; }
.bfn-front .bfn-compact li:last-child { padding-bottom: 0; }
.bfn-compact__icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--bfn-soft); color: var(--bfn-primary); }
.bfn-compact__icon .bfn-icon { width: 20px; height: 20px; }
.bfn-compact li.bfn-alvor--hoj .bfn-compact__icon { background: var(--bfn-red-soft); color: var(--bfn-red); }
.bfn-compact__body { min-width: 0; flex: 1; }
.bfn-compact__title { display: block; font-weight: 600; color: var(--bfn-primary); line-height: 1.35; }
.bfn-compact__meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--bfn-muted); margin-top: 2px; }
.bfn-compact__meta span { display: inline-flex; align-items: center; gap: 4px; }
.bfn-compact__meta .bfn-icon { color: var(--bfn-secondary); width: 1em; height: 1em; }
.bfn-compact li > .bfn-pill { justify-self: end; }

/* Ingen fejl */
.bfn-status-ok { display: flex; align-items: center; gap: 14px; }
.bfn-status-ok__icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--bfn-green-soft); color: var(--bfn-green); }
.bfn-status-ok__icon .bfn-icon { width: 22px; height: 22px; }
.bfn-status-ok strong { display: block; color: var(--bfn-primary); font-weight: 600; }
.bfn-status-ok span { font-size: 14px; color: var(--bfn-muted); }

/* ---------- Status-mærker ---------- */
.bfn-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; background: var(--bfn-soft); color: var(--bfn-primary); }
.bfn-front .bfn-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bfn-pill--aktiv { background: var(--bfn-red-soft); color: #b83a29; }
.bfn-pill--igang { background: var(--bfn-amber-soft); color: var(--bfn-amber); }
.bfn-pill--udbedret { background: var(--bfn-green-soft); color: var(--bfn-green); }
.bfn-pill--alvor-hoj { background: var(--bfn-red); color: #fff; }
.bfn-front .bfn-pill--alvor-middel, .bfn-front .bfn-pill--alvor-lav { display: none; }

/* ---------- Fuld driftstatus ---------- */
/* Luft under boksen: padding i stedet for margin, så den ikke "forsvinder" i Elementors containere (fx på mobil). */
.bfn-front.bfn-front--drift { display: flow-root; padding-bottom: 60px; }
.bfn-drift-wrap { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 600px) { .bfn-front.bfn-front--drift { padding-bottom: 40px; } }
.bfn-front .bfn-section-title { margin: 0; font-size: 22px; font-weight: 600; }
.bfn-drift { display: flex; gap: 20px; padding: 28px 32px; }
.bfn-drift.bfn-alvor--hoj { border-color: var(--bfn-red); }
.bfn-drift__icon { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--bfn-soft); color: var(--bfn-primary); }
.bfn-drift__icon .bfn-icon { width: 26px; height: 26px; }
.bfn-alvor--hoj .bfn-drift__icon { background: var(--bfn-red-soft); color: var(--bfn-red); }
.bfn-drift--udbedret .bfn-drift__icon { background: var(--bfn-green-soft); color: var(--bfn-green); }
.bfn-drift__main { flex: 1; min-width: 0; }
.bfn-drift__top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.bfn-drift__kat { font-size: 12px; color: var(--bfn-secondary); }
.bfn-front .bfn-drift__title { margin: 0 0 6px; font-size: 22px; font-weight: 600; line-height: 1.2; }
.bfn-drift__omraade { font-size: 14px; color: var(--bfn-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.bfn-drift__omraade .bfn-icon { color: var(--bfn-primary); }
.bfn-drift__text { font-size: 1rem; line-height: 1.5; }
.bfn-drift__times { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 12px 0 0; font-size: 13px; }
.bfn-drift__times div { display: flex; flex-wrap: wrap; column-gap: 6px; }
.bfn-drift__times dt { color: var(--bfn-muted); margin: 0; font-weight: 400; white-space: nowrap; }
.bfn-drift__times dd { margin: 0; font-weight: 600; color: var(--bfn-primary); }
.bfn-drift__log { margin-top: 12px; font-size: 14px; }
.bfn-drift__log summary { cursor: pointer; color: var(--bfn-secondary); font-weight: 600; }
.bfn-drift__log ol { list-style: none; margin: 10px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--bfn-soft); }
.bfn-drift__log li { margin: 0 0 8px; }
.bfn-drift__log time { display: block; color: var(--bfn-muted); font-size: 12px; }
.bfn-front .bfn-drift--udbedret .bfn-drift__title { color: var(--bfn-muted); }

.bfn-resolved > summary { cursor: pointer; font-weight: 600; color: var(--bfn-secondary); padding: 4px 0; }
.bfn-resolved > .bfn-drift { margin-top: 16px; }

@media (max-width: 600px) {
	.bfn-panel, .bfn-drift { padding: 22px 20px; border-radius: 24px; }
	.bfn-drift { gap: 14px; }
	.bfn-drift__icon { width: 42px; height: 42px; }
	.bfn-front .bfn-compact li { grid-template-columns: 42px minmax(0, 1fr); align-items: start; }
	.bfn-compact li > .bfn-pill { grid-column: 2; justify-self: start; margin-top: 8px; }
	.bfn-front .bfn-panel__title { font-size: 20px; }
}

/* ---------- Nyhedskort ([bf_nyheder] – valgfri, Loop Grid kan bruges i stedet) ---------- */
.bfn-grid { display: grid; gap: 24px; grid-template-columns: repeat(var(--bfn-cols, 3), minmax(0, 1fr)); }
@media (max-width: 900px) { .bfn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bfn-grid { grid-template-columns: 1fr; } }
.bfn-card { overflow: hidden; display: flex; flex-direction: column; padding: 28px 28px 24px; }
.bfn-card__img { display: block; aspect-ratio: 2 / 1; border-radius: 12px; margin-bottom: 18px; background: var(--bfn-soft) center / cover no-repeat; }
.bfn-card__body { display: flex; flex-direction: column; flex: 1; }
.bfn-front .bfn-card__title { font-size: 22px; font-weight: 600; line-height: 1.1; margin: 0 0 12px; }
.bfn-card__title a { color: inherit; text-decoration: none; }
.bfn-card__title a:hover { color: var(--bfn-secondary); }
.bfn-front .bfn-card__excerpt { margin: 0 0 1rem; flex: 1; }
.bfn-front .bfn-readmore { font-weight: 600; font-size: 14px; color: var(--bfn-secondary); text-decoration: none; }
.bfn-readmore:hover { text-decoration: underline; }
.bfn-all { text-align: center; margin-top: 24px; }
.bfn-empty-front { color: var(--bfn-muted); font-style: italic; }

/* Hel artikel (bruges i forhåndsvisningen) */
.bfn-article { max-width: 720px; margin: 0 auto; }
.bfn-article__img { width: 100%; border-radius: 16px; margin-bottom: 20px; display: block; }
.bfn-front .bfn-article__title { font-size: 2rem; line-height: 1.2; margin: 0 0 1rem; }
.bfn-article__content { font-size: 1.05rem; line-height: 1.7; }
.bfn-article__content img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---------- Lille badge ([bf_driftstatus_badge]) ---------- */
.bfn-front.bfn-badge-wrap { display: inline-block; line-height: 1; font-size: 14px; }
.bfn-front .bfn-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; border: 1px solid transparent; white-space: nowrap; transition: filter .15s; }
.bfn-front a.bfn-badge:hover { filter: brightness(.96); text-decoration: none; }
.bfn-badge .bfn-icon { width: 16px; height: 16px; }
.bfn-front .bfn-badge--aktiv { background: var(--bfn-amber-soft); color: var(--bfn-amber); border-color: #f1d9ae; }
.bfn-front .bfn-badge--hoj { background: var(--bfn-red-soft); color: #b83a29; border-color: #f7c6bf; }
.bfn-front .bfn-badge--ok { background: var(--bfn-green-soft); color: var(--bfn-green); border-color: #c4e3c6; }
.bfn-badge__new { background: var(--bfn-primary); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; }
.bfn-badge__arrow { opacity: .7; }
.bfn-badge--aktiv .bfn-icon, .bfn-badge--hoj .bfn-icon { animation: bfn-pulse 2s ease-in-out infinite; }
@keyframes bfn-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .bfn-badge .bfn-icon { animation: none; } }
/* Mobil: badgen må bryde om på to linjer i stedet for at gå ud over kanten. */
@media (max-width: 600px) {
	.bfn-front.bfn-badge-wrap { display: block; max-width: 100%; }
	.bfn-front .bfn-badge { flex-wrap: wrap; white-space: normal; row-gap: 6px; border-radius: 20px; max-width: 100%; }
}