/* Børns Vilkår - design 2026. Overrider theme.css og gamle inline-styles. */

@font-face {
	font-family: "Metropolis";
	src: url("/font/metropolis-latin-400-normal.woff") format("woff"),
	     url("/font/metropolis-latin-400-normal.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ABC Gravity Condensed";
	src: url("/font/ABCGravity-Condensed.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--bv-tekst: #252525;
	--bv-bg: #fffeee;
	/* Farver fra BørnsVilkår_Designguide_20260706.pdf */
	--bv-roed: #E84249;        /* primærpalet - erstatter den gamle #F05041 */
	--bv-groen: #10AE8C;       /* primærpalet - knapper og aktivt trin i flow-bjælken */
	--bv-groen-moerk: #0D9375; /* hover-nuance af --bv-groen */
	--bv-groen-lys: #CBE5DA;   /* sekundærpalet - flow-bjælkens bund */
	--bv-broedtekst: "Metropolis", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--bv-overskrift: "ABC Gravity Condensed", "Metropolis", "Arial Narrow", Arial, sans-serif;
}

/* Baggrundsfarve */
html, body {
	background-color: var(--bv-bg);
}

.hovedindhold, .hovedindhold2, .melddig,
.whitepadding, .hvidbg, .inviter {
	background-color: var(--bv-bg) !important;
	background-image: none !important;
}

/* Brødtekst */
body,
p, li, td, th, div, span, label, a,
input, select, textarea, button,
.form-control, .btn {
	font-family: var(--bv-broedtekst);
}

/* Tekststørrelse. Bootstrap 3 sætter 14px, hvilket er småt efter nutidens
   standard. Hævet til 16px med luftigere linjeafstand. Alt, der ikke selv
   sætter en størrelse, arver herfra - så det er den ene knap at dreje på,
   hvis teksten skal op eller ned igen.
   Designguiden foreskriver ingen px-skala; den eneste konkrete regel er, at
   tekst på farvet baggrund skal være over 14 pkt. eller bold (side 7). */
body {
	font-size: 16px;
	line-height: 1.55;
}

body,
p, li, td, th, div, span, font, label,
.blaahead, .blaaheadmain, .toptextbv {
	color: var(--bv-tekst);
}

/* Footeren er mørk - den skal blive ved med at have hvid tekst */
.footer, .footer p, .footer div, .footer span, .footer font,
.footer li, .footer td, .footer th, .footer label, .footer a,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
	color: #fff !important;
}

/* Overskrifter - ABC Gravity, altid i versaler (designrettelse sept. 2026).
   a.forsidelink er en knap og hører ikke til her længere - knapper står i
   Metropolis, se knapafsnittet nedenfor. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.RobotoSlab,
.toptekst,
.greyboks > strong:first-of-type,
.greyboks > p > strong:first-of-type,
.greyboks > span > strong:first-of-type,
.greyboks > span > p > strong:first-of-type {
	font-family: var(--bv-overskrift) !important;
	text-transform: uppercase;
}

/* Farve på overskrifter - !important fordi de gamle sider sætter color inline */
h1, h2, h3, h4, h5, h6,
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
.toptekst {
	color: var(--bv-tekst) !important;
}

/* Logo-label. SVG'en har selv rød flade, så ingen wrapper-baggrund/padding.
   Logoet 2026 er kvadratisk (1:1), hvor det gamle var aflangt (694x483).
   Bredden er derfor sat ned fra 170px til 120px, så det fylder det samme
   i højden som før og ikke skubber headeren. */
.bvlogo {
	width: 120px;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.bvlogo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Logoet skal flugte med indholdet, ikke med browserkanten. Bootstrap-gridet
   får derfor beholde sin centrering og sine 15px - kun tabellens eget
   cellemellemrum fjernes, så logoet starter præcis på indholdskanten. */
.bvtop table {
	border-collapse: collapse;
}

/* Logoet skal helt til kant i toppen (designrettelse sept. 2026).
   Luften over logoet kom af, at tabelceller som standard er
   vertical-align: middle - "Stop svigt"-stickerens celle til højre er højere
   (116px + 2x14px padding) end logoet (120px), så logoet blev centreret og hang
   ca. 12px under kanten. Bootstrap nulstiller selv td-padding, så resten af
   luften er der ikke. */
.bvtop td {
	vertical-align: top;
}

/* Overskriften i headeren stod helt oppe ved kanten - rykket lidt ned
   (designrettelse sept. 2026). */
.bvtop td.toptekst {
	padding-top: 18px;
}

@media only screen and (max-width: 600px) {
	.bvlogo { width: 90px; }
}


/* ============================================================
   Knapper (Designguide 2026 + designrettelser sept. 2026)
   Alle knapper: 2px hjørner, tekst i Metropolis semibold, #252525.
   !important er nødvendigt, fordi theme.css og flere sider sætter
   border-radius, font og hvid tekst i <style>-blokke eller inline.
   ============================================================ */
.btn,
a.forsidelink {
	border-radius: 2px !important;
	font-family: var(--bv-broedtekst) !important;
	font-weight: 600 !important;
	color: var(--bv-tekst) !important;
}

/* Handlingsknapperne - grøn flade og pil til højre.
   Gælder både links-knapperne i boksene (.forsidelink) og
   formularknapperne (.btn-moveon, .btn-primary, .btn-danger).
   Pilen lægges som baggrundsbillede frem for ::after, fordi flere af
   knapperne er <input type="submit">, som ikke kan have pseudo-elementer.
   Baggrundsbilledet erstatter samtidig Bootstrap-temaets gradient.
   !important er nødvendigt, fordi flere sider sætter den gamle
   røde farve i <style>-blokke inde i <body> eller direkte inline. */
a.forsidelink,
.btn-moveon,
.btn-primary,
.btn-danger {
	background-color: var(--bv-groen) !important;
	/* Pilen (Pil-2026.svg) ligger inline som data-URI, så den ikke afhænger af
	   en ekstra fil på serveren. Kun farven adskiller den fra hover-udgaven. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 482602 482602'%3E%3Cg fill='%23191919'%3E%3Cpath d='m324271 105772-2993-2993-5986 5986 2993 2993 132536 132536 2993 2993 5986-5986-2993-2993z'/%3E%3Cpath d='m318284 370844-2993 2993 5986 5986 2993-2993 132536-132536 2993-2993-5986-5986-2993 2993z'/%3E%3Cpath d='m28693 237124h-4234v8468h4234 421834 4234v-8468h-4234z'/%3E%3C/g%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 26px auto !important;
	padding-right: 54px !important;
	border-color: var(--bv-groen) !important;
	color: var(--bv-tekst) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
}

/* Links-knapperne i boksene har en større pil og mere højde, som på
   bornsvilkar.dk (pil ca. 40px bred, knap ca. 55px høj). */
a.forsidelink {
	background-size: 40px auto !important;
	background-position: right 16px center !important;
	padding: 14px 72px 14px 12px !important;
}

a.forsidelink:hover, a.forsidelink:focus, a.forsidelink:active,
.btn-moveon:hover, .btn-moveon:focus, .btn-moveon:active, .btn-moveon.active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active,
.open .dropdown-toggle.btn-moveon,
.open .dropdown-toggle.btn-primary,
.open .dropdown-toggle.btn-danger {
	/* Hover: fladen beholder sin farve, kun tekst og pil bliver hvide.
	   Et baggrundsbillede kan ikke skifte farve, så pilen byttes til en hvid
	   kopi af samme SVG (fill='%23fff'). */
	background-color: var(--bv-groen) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 482602 482602'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='m324271 105772-2993-2993-5986 5986 2993 2993 132536 132536 2993 2993 5986-5986-2993-2993z'/%3E%3Cpath d='m318284 370844-2993 2993 5986 5986 2993-2993 132536-132536 2993-2993-5986-5986-2993 2993z'/%3E%3Cpath d='m28693 237124h-4234v8468h4234 421834 4234v-8468h-4234z'/%3E%3C/g%3E%3C/svg%3E") !important;
	border-color: var(--bv-groen) !important;
	color: #fff !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

/* Knapper i pop op-vinduer - ny grøn farve.
   Bootstrap-modaler (.btn-success) og SweetAlert (v1: .swal-button--confirm,
   v2: .swal2-confirm). !important, fordi Bootstrap-temaet lægger en gradient
   på, og fordi knapperne har hvid tekst inline. */
.modal .btn-success,
.swal-button--confirm,
.swal2-popup .swal2-confirm {
	background-color: var(--bv-groen) !important;
	background-image: none !important;
	border-color: var(--bv-groen) !important;
	color: var(--bv-tekst) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
}

.modal .btn-success:hover, .modal .btn-success:focus, .modal .btn-success:active,
.swal-button--confirm:hover, .swal-button--confirm:focus, .swal-button--confirm:active,
.swal2-popup .swal2-confirm:hover, .swal2-popup .swal2-confirm:focus, .swal2-popup .swal2-confirm:active {
	background-color: var(--bv-groen) !important;
	background-image: none !important;
	border-color: var(--bv-groen) !important;
	color: #fff !important;
	text-decoration: none !important;
}
/* Success-ikonet i pop op-vinduer - designets grønne (designrettelse sept. 2026).
   Fluebenet står i --bv-groen, ringen rundt om i --bv-groen-lys. Streg og
   ring i --bv-groen-lys alene blev fravalgt - fluebenet var næsten usynligt
   på den hvide boks.
   Gælder både SweetAlert v2 (swal(..., "success") - .swal-icon--success) og
   SweetAlert2 (Swal.fire({icon:'success'}) - .swal2-success). Begge
   biblioteker lægger deres CSS ind i <head> fra JavaScript efter dette
   stylesheet, derfor !important. */
.swal-icon--success,
.swal-icon--success__ring {
	border-color: var(--bv-groen-lys) !important;
}

.swal-icon--success__line {
	background-color: var(--bv-groen) !important;
}

.swal2-icon.swal2-success {
	border-color: var(--bv-groen-lys) !important;
	color: var(--bv-groen) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
	border-color: var(--bv-groen-lys) !important;
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
	background-color: var(--bv-groen) !important;
}

/* Pilen sidder nu som baggrund på knappen. Det gamle Font Awesome-ikon i
   .forsidelink-knapperne (index.aspx, indsamlern.aspx) skjules, så der ikke
   står to pile. */
a.forsidelink > .fa-solid,
a.forsidelink > i {
	display: none !important;
}


/* ============================================================
   Bokse på forsiden og på Min side - ingen fyldfarve, sort streg
   Boksene sætter selv background-color inline, derfor !important.
   ============================================================ */
.greyboks {
	background-color: var(--bv-bg) !important;
	background-image: none !important;
	border: 1px solid var(--bv-tekst);
}

/* Fast højde -> minimumshøjde. Boksene havde height:200/230/250px, dels i
   theme.css og top2016.aspx, dels inline på hver enkelt boks - derfor
   !important. Med min-height fylder de stadig det samme, så knapperne flugter
   på tværs af en række, men en lang overskrift kan nu skubbe boksen større i
   stedet for at løbe ud over kanten. */
.greyboks {
	height: auto !important;
	min-height: 250px;
}

/* Links-knappen er absolut placeret i bunden af kolonnen. Bokse med sådan en
   knap får reserveret plads til den, så teksten ikke kan løbe ind under den. */
.greyboks:has(> a.forsidelink),
.greyboks:has(> span > a.forsidelink),
.greyboks:has(> p > a.forsidelink) {
	padding-bottom: 72px;
}

@media only screen and (max-width: 600px) {
	/* På mobil står boksene under hinanden og må gerne klappe sammen. */
	.greyboks { min-height: 0; }
}


/* ============================================================
   Teasere på forsiden (index.aspx) - designrettelse sept. 2026
   Billede, boks og knap ligger i én ramme: 1px streg i tekstfarven
   rundt om hele teaseren med 2px hjørner, og knappen fylder hele
   bredden og ligger helt til kant i bunden.
   ============================================================ */
.teaser {
	position: relative;
	border: 1px solid var(--bv-tekst) !important;
	border-radius: 2px !important;
	overflow: hidden;
}

/* Billedet skal fylde rammen kant til kant. */
.teaser > .img-responsive {
	width: 100%;
}

/* Rammen sidder på teaseren - boksen indeni skal ikke have sin egen. */
.teaser > .greyboks {
	border: none;
}

/* Knappen er absolut placeret i top2016.aspx (bottom:25px, left:37px,
   bredde minus 72px) i forhold til kolonnen. .teaser er position:relative,
   så her måles den fra teaserens kant i stedet: fuld bredde, helt i bunden.
   Hjørnerne klippes af teaserens overflow:hidden, så knappen har ingen egne. */
.teaser a.forsidelink {
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	border-radius: 0 !important;
}

/* Mindre luft mellem teksten og knappen: de to <br> efter knappen i
   index.aspx lagde to tomme linjer ind i boksen, oven i den plads der
   allerede er reserveret til knappen (padding-bottom). */
.teaser > .greyboks > a.forsidelink ~ br {
	display: none;
}

/* Knapperne skal være lige høje - teksten står altid på én linje. */
.teaser a.forsidelink {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Min side (indsamlern.aspx): billedet ligger i et link, og siden sætter
   selv max-width og margin-bottom på .greyboks i en <style>-blok. */
.teaser > a {
	display: block;
}

.teaser > a > .img-responsive {
	width: 100%;
}

.teaser > .greyboks {
	max-width: none;
	margin-bottom: 0;
}

/* Plads til knappen i bunden. Min side sætter padding:22px inline på
   boksene, hvilket ellers overskriver reglen længere oppe, så tekst og
   links løber ind under knappen - derfor !important. */
.teaser > .greyboks:has(a.forsidelink) {
	padding-bottom: 72px !important;
}

/* På mobil/tablet står teaserne under hinanden - giv luft imellem.
   På Min side giver theme.css allerede kolonnerne margin-bottom. */
@media (max-width: 991px) {
	.teaser {
		margin-bottom: 30px;
	}

	.hovedindhold .teaser {
		margin-bottom: 0;
	}
}


/* ============================================================
   Bokserækker - lige høje kolonner, så knapperne flugter
   Boksene ligger som .row > .col-md-4 > .greyboks (Min side) eller
   .row > .col-md-4 > .teaser > .greyboks (forsiden), og links-knappen
   er absolut placeret i bunden. Når kolonnerne er lige høje, lander
   alle knapper derfor automatisk i samme højde, og underkanterne flugter.
   Kun fra 992px og op - det er der, col-md-4 begynder at stå ved
   siden af hinanden. Derunder står boksene under hinanden som før.
   :has() bruges til at ramme netop de rækker, der indeholder bokse,
   uden at røre alle andre rækker på sitet. Kan en browser ikke
   :has(), falder reglen bare væk, og boksene ser ud som hidtil.
   ============================================================ */
@media (min-width: 992px) {
	.row:has(> [class*="col-"] > .greyboks),
	.row:has(> [class*="col-"] > .teaser > .greyboks) {
		display: flex;
		flex-wrap: wrap;
	}

	.row:has(> [class*="col-"] > .greyboks) > [class*="col-"],
	.row:has(> [class*="col-"] > .teaser > .greyboks) > [class*="col-"] {
		display: flex;
		flex-direction: column;
		float: none;
	}

	/* Boksen (eller teaseren) strækkes ned til bunden af kolonnen, så
	   underkanterne flugter. */
	.row:has(> [class*="col-"] > .greyboks) > [class*="col-"] > .greyboks,
	.row:has(> [class*="col-"] > .teaser > .greyboks) > [class*="col-"] > .teaser {
		flex: 1 1 auto;
	}

	/* Inde i teaseren er det boksen, der strækkes - ikke billedet. */
	.teaser {
		display: flex;
		flex-direction: column;
	}

	.teaser > .greyboks {
		flex: 1 1 auto;
	}
}

/* Overskriften i de små bokse skal være større, så prikken og stregen
   i "i" ikke løber sammen i ABC Gravity Condensed. */
.greyboks > strong:first-of-type,
.greyboks > p > strong:first-of-type,
.greyboks > span > strong:first-of-type,
.greyboks > span > p > strong:first-of-type,
.greyboks p b {
	font-family: var(--bv-overskrift) !important;
	font-size: 26px !important;
	line-height: 1.15 !important;
	text-transform: uppercase;
}


/* ============================================================
   Introteksten på forsiden (.forsideintro i top2016.aspx) -
   designrettelse sept. 2026: ingen ramme. Blokken ligger i samme
   Bootstrap-grid som boksene nedenunder, så teksten flugter med
   venstre boks. "Find rute"-knappen står i fuld bredde under felterne på
   mobil og til højre for felterne på desktop, når tilmeldingen er åben.
   ============================================================ */
.forsideintro {
	margin: 40px 0 0 0;
	padding: 0;
}

.forsideintro h2 {
	margin-top: 0;
}

/* Brødteksten i den åbne udgave har padding:10px inline - fjernes, så den
   flugter med overskriften og boksene. */
.forsideintro form > font > div {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Knappen i formularen: fuld bredde, samme højde og pil som knapperne
   i boksene. */
.forsideintro form > .btn-moveon {
	display: block;
	width: 100%;
	margin: 24px 0 0 0;
	text-align: left;
	padding: 14px 72px 14px 16px !important;
	background-size: 40px auto !important;
	background-position: right 16px center !important;
}

/* På desktop står knappen til højre for de to felter i stedet for i fuld
   bredde under dem (designrettelse sept. 2026). Felterne står allerede på
   én linje fra 768px (Bootstrap .form-inline), og knappen får samme højde
   (34px), luft og pil som en almindelig .btn-moveon - ligesom "Vis rute"
   nedenunder. Under 768px står felterne under hinanden, og knappen beholder
   fuld bredde. */
@media only screen and (min-width: 768px) {
	.forsideintro form > .btn-moveon {
		display: inline-block;
		width: auto;
		margin: 0 0 0 8px;
		vertical-align: middle;
		padding: 6px 54px 6px 16px !important;
		background-size: 26px auto !important;
		background-position: right 14px center !important;
	}
}

@media only screen and (max-width: 600px) {
	.forsideintro {
		margin-top: 24px;
	}
}


/* ============================================================
   Flow-bjælken (RUTEOVERSIGT / DINE OPLYSNINGER / KVITTERING)
   Lys grøn bund, sort tekst hele vejen, aktivt trin i mørk grøn.
   Bjælkens egen CSS ligger i <style>-blokke inde i <body> på
   ruteoversigt.aspx og step3n.aspx, og step3n sætter dertil
   color:#FFFFFF inline - derfor !important overalt her.
   ============================================================ */
.flowmenu {
	background: var(--bv-groen-lys) !important;
}

.flowmenu a,
.flowmenu > .menu,
.flowmenu > .menu a,
.flowmenu > .menupil,
.flowmenu span {
	color: var(--bv-tekst) !important;
}

.flowmenu > .menu,
.flowmenu > .menupil {
	opacity: 1 !important;
}

.flowmenu > .menuvalgt {
	background: var(--bv-groen) !important;
}


/* ============================================================
   Links i indholdet - ny rød farve (designrettelse sept. 2026).
   theme.css sætter den gamle #F05041 på .hovedindhold a.
   ============================================================ */
/* !important, fordi nogle af de redigerbare tekster (settings) har farven
   inline. Knapper er undtaget - de har deres egen farve. */
.hovedindhold a:not(.btn):not(.forsidelink):not(.swal2-styled),
.hovedindhold2 a:not(.btn):not(.forsidelink):not(.swal2-styled) {
	color: var(--bv-roed) !important;
}

/* Flow-bjælken skal have sort tekst - undtaget fra den røde linkfarve ovenfor */
.hovedindhold .flowmenu a:not(.btn):not(.forsidelink):not(.swal2-styled),
.hovedindhold2 .flowmenu a:not(.btn):not(.forsidelink):not(.swal2-styled) {
	color: var(--bv-tekst) !important;
}