:root{
	--teal:#48E6D9;
	--teal-dark:#34c9bb;
	--accent:#9b6bff;
	--nav-bg:#f6eadb; /* creamy tone */
	--button-mint:#57f0d6;
	--text-dark:#0b0b0b;

	/* soft yellow for Tilmeld buttons */
	--button-tilmeld:#fff9ec; /* much milder, creamier yellow */
	--tilmeld-text:#4a3710;

	/* milder stroke for outline buttons */
	--stroke-yellow:#fff3bf;

	/* brown / gray palette (from hero image) */
	--tone-brown:#8b6b5a;
	--tone-brown-muted:#f3ebe6;
	--tone-gray:#9aa0a6;
	--tone-gray-muted:#eceff1;
	--tone-text:#1b1b1b;
}
*{box-sizing:border-box}
body{font-family:Montserrat,system-ui,Segoe UI,Arial; margin:0; color:var(--text-dark); background:var(--tone-brown-muted)}

/* NAVBAR */
header.site-header{background:var(--nav-bg); border-bottom:4px solid rgba(111,79,62,0.06);}
.container{max-width:1200px; margin:0 auto; padding:0 20px}
nav{display:flex; align-items:center; justify-content:space-between; height:66px}
.logo{display:flex; align-items:center; gap:10px}
.logo img{height:42px}
.nav-links{display:flex; gap:28px; list-style:none; margin:0; padding:0; align-items:center}
.nav-links a{
	color:var(--tilmeld-text); /* darker, readable on creamy navbar */
	text-decoration:none;
	font-weight:700;
	padding:6px 10px;
	border-radius:6px;
	transition:background .18s ease, color .12s ease;
	display:inline-block;
}
.nav-links a:hover{background:rgba(0,0,0,0.04); color:#2b1700}
.nav-links a:focus{outline:3px solid rgba(198,134,66,0.12); outline-offset:4px}
.cta{background:var(--button-tilmeld); border-radius:6px; padding:8px 14px; color:var(--tilmeld-text); font-weight:700; text-decoration:none}

/* HERO */
.hero-inner{position:relative; text-align:center; padding:56px 20px; max-width:920px; z-index:2; background:transparent; transform:translateY(-22%)}
.hero{
	min-height:78vh;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	background:transparent; /* removed colored box so text sits directly on the image */
	overflow:hidden;
}
/* Hero background image (use the provided file 'mændtilsnak.png' in the project root) */
.hero::before{content:""; position:absolute; inset:0; /* try new image first, fall back to original filename */ background-image: url('mænd-til-snak.png'), url('mændtilsnak.png'); background-size:cover; background-position:center 40%; background-repeat:no-repeat; opacity:1; filter:saturate(1);}

.hero-inner{/* duplicate removed - combined with earlier rule */}
.eyebrow{font-weight:600; color:#084a49; margin-bottom:12px}
h1{font-size:64px; line-height:1.02; margin:0 0 12px; font-weight:800; color:#0b0b0b; text-shadow:0 1px 0 rgba(255,255,255,0.6)}
p.lead{max-width:760px; margin:0 auto 28px; color:#2e3b3a; font-weight:600}

.hero-buttons{display:flex; gap:12px; justify-content:center; flex-direction:column; align-items:center; margin-top:24px}
.btn{padding:12px 28px; border-radius:10px; border:2px solid transparent; font-weight:700; cursor:pointer; text-decoration:none; min-width:220px}
.btn-primary{background:var(--button-tilmeld); color:var(--tilmeld-text); box-shadow:0 6px 14px rgba(75,50,20,0.08)}
.btn-outline{background:rgba(255,255,255,0.9); border:2px solid var(--stroke-yellow); color:#043130}

/* decorative bottom overlay */
.hero-overlay{position:absolute; left:0; right:0; bottom:0; height:80px; background:linear-gradient(180deg, rgba(72,230,217,0.18), rgba(72,230,217,0.45)); pointer-events:none}

/* Ensure no colored box appears over the hero image: force transparent backgrounds
   and remove borders/shadows for any elements inside the hero section. */
.hero, .hero * {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
.hero::before { z-index: -2; }
.hero-inner { z-index: 2; }
/* Move only the header (title + lead) slightly up so the text shifts
	without moving the CTA buttons which are also inside `.hero-inner`. */
.hero-inner > header{ transform:translateY(-4%); }
.hero header { background: transparent !important; }
.hero-overlay{display:none !important}

/* Restore CTA button visuals inside hero (override the broad transparent rule) */
.hero .btn-primary{
	background:var(--button-tilmeld) !important;
	color:var(--tilmeld-text) !important;
	box-shadow:0 6px 14px rgba(75,50,20,0.08) !important;
	border:2px solid transparent !important;
}
.hero .btn-outline{
	background:rgba(255,255,255,0.95) !important;
	color:#043130 !important;
	border:2px solid var(--stroke-yellow) !important;
}

/* Responsive */
@media (max-width:900px){
	h1{font-size:40px}
	.nav-links{display:none}
}
@media (max-width:520px){
	h1{font-size:28px}
	.hero{min-height:60vh}
	nav{height:56px}
	.hero-inner{transform:translateY(-11%)}
	.hero-inner > header{ transform:translateY(-2%); }
	/* move hero image slightly less on mobile to keep faces visible */
	.hero::before{background-position:center 30%;}
	.hero-buttons{margin-top:12px}
	.cta{padding:6px 10px}
}

#reasons{padding:64px 0; background:transparent}
#reasons h2{font-size:36px; text-align:center; margin:0 0 36px; font-weight:800; color:#052b2a}
.reasons-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start}

.card{
	background: rgba(255,255,255,0.95);
	border-radius:12px;
	padding:22px 20px;
	cursor:default;
	transition:transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s ease;
	box-shadow: 0 6px 18px rgba(11,22,26,0.06);
	border:1px solid rgba(154,154,154,0.10);
	overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 50px rgba(11,22,26,0.09)}

/* smaller variant for the specific 'Bedre kondition og vejrtrækning' card */
.card.card--small{
	padding:14px 12px;
}

.card summary{list-style:none; font-weight:800; font-size:18px; margin:0; padding:0 36px 8px 0; color:#062f2d; cursor:pointer}
.card summary::-webkit-details-marker{display:none}

/* hide content by default and animate on open */
.card .content{max-height:0; opacity:0; transform:translateY(-6px); transition:all .26s ease; overflow:hidden}
.card[open] .content{max-height:400px; opacity:1; transform:translateY(0)}
.card p{margin:0; color:#234; font-size:15px; line-height:1.5}

/* chevron */
.card summary{position:relative}
.card summary::after{content:'▾'; position:absolute; right:0; top:50%; transform:translateY(-50%); transition:transform .18s ease; font-size:18px; color:#084a49}
.card[open] summary::after{transform:translateY(-50%) rotate(180deg)}

@media (max-width:1000px){ .reasons-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .reasons-grid{grid-template-columns:1fr} #reasons h2{font-size:28px} }

/* Stories / Testimonials styles */
#stories{padding:56px 0;}
#stories h2{font-size:36px; text-align:center; margin:0 0 24px; font-weight:800; color:#052b2a}
.stories-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.story-card{background: rgba(255,255,255,0.95); border-radius:12px; padding:20px; box-shadow:0 6px 18px rgba(11,22,26,0.06); border:1px solid rgba(11,22,26,0.06)}
.story-card header{display:flex; flex-direction:column; gap:4px; margin-bottom:12px}
.story-name{font-weight:800; color:inherit}
.story-meta{color:#6b8f8e; font-size:13px}
.story-quote{background:rgba(139,107,90,0.06); padding:12px 14px; border-radius:8px; margin-bottom:12px; color:var(--tone-text)}
.story-card p{margin:0 0 12px; color:#234}
.story-benefits{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px}
.story-benefits li::before{content:'★'; margin-right:8px; color:#ffb86b}

@media (max-width:900px){ .stories-grid{grid-template-columns:1fr} }

/* Footer styles */
.site-footer{background:var(--nav-bg); padding:40px 0 18px; color:var(--tone-text)}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:24px; align-items:start; padding-bottom:18px; border-bottom:2px solid rgba(155,107,255,0.12)}
.site-footer .footer-col ul{list-style:none; padding:0; margin:0}
.site-footer a{color:inherit; text-decoration:none}
.footer-brand img{height:40px; margin-bottom:10px}
.site-footer h4{font-size:14px; margin:0 0 10px; font-weight:700}
.site-footer address{font-style:normal; color:#425754}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding:12px 0; font-size:13px; color:#6b6b6b}
.footer-links a{margin-left:16px; color:#052b2a}

@media (max-width:1000px){ .footer-grid{grid-template-columns:1fr 1fr} .footer-bottom{flex-direction:column; gap:8px; align-items:flex-start} }
@media (max-width:600px){ .footer-grid{grid-template-columns:1fr} }

/* small accessibility focus styles */
.card summary:focus{outline:3px solid rgba(72,230,217,0.25); outline-offset:4px}

/* 'Sådan virker det' section styling */
#how-it-works{padding:60px 0; background:transparent}
.how-it-works h2{font-size:36px; text-align:center; margin:0 0 18px; font-weight:800; color:#052b2a}
.how-card{background:#ffffff; border-radius:10px; padding:28px; box-shadow:0 10px 30px rgba(11,22,26,0.06); border:1px solid rgba(11,22,26,0.04); display:flex; gap:24px; align-items:flex-start}
.how-steps{flex:1}
.how-step{margin-bottom:18px}
.how-step h3{margin:0 0 6px; font-size:16px; color:#062f2d}
.how-step p{margin:0; color:#233; line-height:1.6}
.how-cta{align-self:center; padding:10px 18px; border-radius:8px; margin-left:12px}

@media (max-width:900px){
	.how-card{flex-direction:column}
	.how-cta{align-self:flex-start; margin-top:12px}
}