/* goodcoffee.dk — sidehoved, variant B.
   Erstatter Hestias page header på de sider der bruger det nye design. */

.gc-banner{
	--ink:#241B14; --acc:#A9482A;
	--serif:"Source Serif 4",Georgia,serif;
	--sans:"Source Sans 3",-apple-system,"Segoe UI",sans-serif;
	position:relative;
	overflow:hidden;
	background:#241B14;
	min-height:300px;
	display:flex;
	align-items:flex-end;
	padding:0;
	margin:0;
}
.gc-banner__bg{
	position:absolute;inset:0;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.gc-banner__veil{
	position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(30,20,13,.42) 0%,rgba(30,20,13,.68) 55%,rgba(30,20,13,.86) 100%);
}
/* Bruger temaets eget grid (.container > .row > .col-md-8.col-md-offset-2),
   så bannerteksten flugter præcis med indholdet nedenunder. */
.gc-banner > .container{
	position:relative;
	z-index:2;
	/* Sæt ikke width her - Bootstraps egen .container-bredde skal gælde,
	   ellers flugter banneret ikke med indholdet. */
}
@media(max-width:767px){
	.gc-banner > .container{width:100%}
}
.gc-banner__body{
	/* Top-padding rydder Hestias navbar, som ligger hen over banneret. */
	padding-top:100px;
	padding-bottom:38px;
}

.gc-banner__crumb{
	font-family:var(--sans);
	font-size:12.5px;
	letter-spacing:.13em;
	text-transform:uppercase;
	font-weight:600;
	color:#E4B892;
	margin:0 0 14px;
	line-height:1.5;
}
.gc-banner__crumb a{color:#C6B6A6;text-decoration:none}
.gc-banner__crumb a:hover{color:#fff;text-decoration:underline}
.gc-banner__sep{margin:0 8px;color:#8C7A6A}

.gc-banner__title{
	font-family:var(--serif);
	font-weight:700;
	color:#fff;
	margin:0;
	font-size:clamp(28px,3.8vw,42px);
	line-height:1.12;
	letter-spacing:-.01em;
	max-width:20ch;
	text-transform:none;
}
.gc-banner__sub{
	font-family:var(--sans);
	font-size:17px;
	color:#DCCCBB;
	margin:14px 0 0;
	max-width:56ch;
	line-height:1.6;
}

/* Hestia pakker sideindhold ind i en hævet, skyggekastende boks — fjern den,
   så banneret og indholdet støder direkte op til hinanden. */
.gc-banner + .main,
.gc-banner + .main-raised,
body:has(.gc-banner) .main-raised{
	margin:0 !important;
	padding-top:0 !important;
	box-shadow:none !important;
	border-radius:0 !important;
}

@media(max-width:781px){
	.gc-banner{min-height:230px}
	.gc-banner__body{padding-top:44px;padding-bottom:28px}
	.gc-banner__sub{font-size:15.5px}
	.gc-banner__crumb{font-size:11.5px}
}