/*
Theme Name:		Astra Child
The URI:		smistraffe.dk
Description:	Beskrivelse her
Author:			Rasmus Hultquist
Author URI:		smistraffe.dk
Template:		astra
Version:		1.0.0
License:		GNU General Public License v2 or later
License URI:	http://www.gnu.org/licenses/gpl-2.0.html
Text Domain		astra-child
*/


/* CUSTOM STYLING START */

:root {
	--green: #2E8B57;
	--green-dark: #1f5e43;
	--green-light: #e8f3ee;
	--green-medium: #D5E4D2;
	--yellow: #FFD700;
	--orange: #FFA500;
	--blue: #3b82f6;
	--dark: #1f2937;
	--gray: #6b7280;
	--light: #f9fafb;
	--white: #ffffff;
	--radius: 12px;
	--max-width: 1200px;
	--gold: #facc15;
	--silver: #9ca3af;
	--bronze: #fb923c;
	--gold-bg: #facc15;
	--silver-bg: #9ca3af;
	--bronze-bg: #fb923c;
}

.transparent {
	background: transparent !important;
}

.gold {
	border-top: 6px solid var(--gold) !important;
}

.silver {
	border-top: 6px solid var(--silver) !important;
}

.bronze {
	border-top: 6px solid var(--bronze) !important;
}

.gold-bg {
	background: var(--gold) !important;
}

.silver-bg {
	background: var(--silver) !important;
}

.bronze-bg {
	background: var(--bronze) !important;
}

.yellow {
	color: var(--yellow) !important;
}

.orange {
	color: var(--orange) !important;
}

.yellow-bg {
	background: var(--yellow) !important;
}

.green-bg {
	background: var(--green) !important;
}

.orange-bg {
	background: var(--orange) !important;
}

.white-bg {
	background: var(--white) !important;
	color: var(--dark) !important;
}

.dark-bg {
	background: var(--dark) !important;
	color: var(--white) !important;
}

.dark-bg h2,
.dark-bg p {
	color: var(--white) !important;
}

.white {
	color: var(--white);
}

/* Reset */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--dark);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	text-decoration: none;
	color: inherit;
}

/* Helpers */
.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.section {
	padding: 4.5rem 0;
}

.section--light {
	background: var(--green-light);
}

.section__title {
	text-align: center;
	margin-bottom: 2.5rem;
}

.section__title h2 {
	font-size: 2.25rem;
	margin: 0 0 0.75rem;
}

.section__title p {
	color: var(--gray);
	margin: 0;
}

/* Header (layout only) */
.site-header {
	background: var(--white);
	border-bottom: 1px solid #e5e7eb;
}

.site-header__inner {
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-weight: 700;
}

.site-nav ul {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav a {
	font-weight: 500;
	color: var(--dark);
}

.header-cta {
	background: var(--green);
	color: var(--white);
	padding: 0.5rem 1rem;
	border-radius: 8px;
	font-weight: 600;
}

/* Hero */
.hero {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.35)), url(https://smistraffe.dk/wp-content/uploads/2025/12/smistraffe-baggrund.avif) center / cover no-repeat;
	color: var(--white);
	padding: 6rem 0 7rem;
	text-align: center;
}

.hero__badge {
	display: inline-block;
	background: var(--green);
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	font-size: 0.85rem;
	margin-bottom: 1.5rem;
}

.hero h1 {
	font-size: 3rem;
	margin: 0 0 1rem;
	color: var(--white);
}

.hero p {
	max-width: 720px;
	margin: 0 auto 2rem;
	opacity: 0.95;
}

.hero__info {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.hero__info-box {
	background: rgba(255, 255, 255, 0.15);
	padding: 1rem;
	border-radius: var(--radius);
	font-size: 0.9rem;
	text-align: left;
}

.hero__actions {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: 10px;
	font-weight: 600;
}

.btn--primary {
	background: var(--orange);
	color: var(--white);
	font-weight: bold;
}

.btn--secondary {
	background: var(--white);
	color: var(--dark);
}

.btn--tertiary,
.btn--tertiary a {
	background: var(--green) !important;
	color: var(--white) !important;
}

.btn--quaternary,
.btn--quaternary a {
	background: var(--white) !important;
	color: var(--green) !important;
	border: 2px solid var(--green) !important;
}

/* Why participate */
.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.card {
	background: var(--white);
	border-radius: var(--radius);
	padding: 2rem;
	text-align: center;
}

.card__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--green-light);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: var(--green);
}

.card h3 {
	margin: 0 0 0.5rem;
}

.card p {
	color: var(--gray);
	font-size: 0.95rem;
}

/* Stats */
.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin-top: 3rem;
}

.stat {
	text-align: center;
}

.stat strong {
	display: block;
	font-size: 2rem;
	color: var(--green);
}

.sections__cta-box {
	margin-top: 48px;
	padding: 48px;
}

/* Who can participate */
.participants {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.participant {
	background: rgba(255, 255, 255, 0.12);
	color: var(--white);
	padding: 1.5rem;
	border-radius: var(--radius);
	text-align: center;
}

.section--green {
	background: linear-gradient(135deg, var(--green), #3a7fa3);
	color: var(--white);
}

.targetgroup h2,
.targetgroup p {
	color: var(--white) !important;
}

.targetgroup__cta {
	margin: 5px 0;
}

.sections__cta-box.white-bg h2,
.sections__cta-box.white-bg p {
	color: var(--dark) !important;
}

.sections__cta-box.dark-bg h2,
.sections__cta-box.dark-bg p {
	color: var(--white) !important;
}

/* Info section */
.info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.info-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.info-list li {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
}

.info-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--green-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--green);
	font-weight: 700;
}

.info-point {
	margin-bottom: 20px;
	display: grid !important;
	grid-template-columns: 1fr 6fr;
}

/* Prizes */
.prizes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.prize {
	background: var(--white);
	border-radius: var(--radius);
	padding: 2rem;
	text-align: center;
}

.prizes p {
	margin-bottom: 0 !important;
}

.prize--gold {
	border-top: 6px solid #facc15;
}

.prize--silver {
	border-top: 6px solid #9ca3af;
}

.prize--bronze {
	border-top: 6px solid #fb923c;
}

.award,
.award h3 {
	color: var(--white);
}

.award__first {
	background: linear-gradient(135deg, #4f8f6a 0%, #4a86a8 100%);
}

.award__second {
	background: linear-gradient(135deg, #f2ab3c 0%, #d8942f 100%);
}

.award__third {
	background: linear-gradient(135deg, #63c7d6 0%, #3f6fe0 100%);
}


/* FAQ */
.faq {
	max-width: 900px;
	margin: 0 auto;
}

.faq-item {
	background: var(--green-light);
	border-radius: var(--radius);
	margin-bottom: 1rem;
	overflow: hidden;
}

.faq-question {
	padding: 1rem 1.25rem;
	cursor: pointer;
	font-weight: 600;
}

.faq-answer {
	padding: 0 1.25rem 1rem;
	display: none;
	color: var(--gray);
}

/* Footer (layout only) */
.site-footer {
	background: var(--dark);
	padding: 4rem 0;
}

.site-footer h3 {
	margin-bottom: 14px;
}

.site-footer li {
	list-style: none;
	margin-bottom: 8px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 3rem;
}

.footer-title {
	font-weight: 600;
	margin-bottom: 1rem;
}

.footer-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-nav li {
	margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 1024px) {

	.cards,
	.participants,
	.stats,
	.prizes {
		grid-template-columns: repeat(2, 1fr);
	}

	.info-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.site-nav {
		display: none;
	}

	.hero h1 {
		font-size: 2.25rem;
	}

	.cards,
	.participants,
	.stats,
	.prizes {
		grid-template-columns: 1fr;
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}
}

/* THEME STYLING */

.ast-container {
	display: block !important;
}

a.btn--primary:hover,
a.btn--primary:focus {
	color: var(--white) !important;
}

a.btn--secondary:hover,
a.btn--secondary:focus {
	color: var(--dark) !important;
}

.height-100 {
	height: 100%;
}

.box-shadow {
	box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.border-radius {
	border-radius: 16px;
}

.fp-atf {
	background: url("http://smistraffe.dk/wp-content/uploads/2025/12/smistraffe-baggrund.avif");
	background-repeat: no-repeat;
	background-size: cover;
	padding: 80px 100px;
}

.content-area {
	max-width: 896px;
	padding-top: 40px !important;
}

.fp-atf-content {
	z-index: 1;
	position: relative;
	color: #fff !important;
	text-align: center;
	max-width: 896px;
	margin: auto;
}

.fp-atf-content h1 {
	color: #fff !important;
	font-size: 72px;
}

.trumpet {
	background: #2E8B57;
	width: fit-content;
	padding: 8px 24px;
	border-radius: 9999px;
	margin: auto;
	font-weight: bold;
}

.fp-atf-content p {
	font-size: 24px;
}

.fp-atf-btns {
	margin-top: 20px !important;
	margin: auto;
}

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.grid3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 24px;
}

.grid4 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 24px;
}

.selling-point {
	padding: 32px;
	background: #fff;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	border-radius: 12px;
	text-align: left;
}

.selling-point:hover {
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.selling-point-title {
	margin: 16px 0 6px;
	font-weight: bolder;
	font-size: 18px;
}

.selling-point span {
	font-size: 14px;
}

.selling-point-green {
	background: #2E8B57;
	border-radius: 9999px;
	width: 64px;
	height: 64px;
	justify-content: center;
	align-items: center;
	display: flex;
}

.selling-point-orange {
	background: #FFA500;
	border-radius: 9999px;
	width: 64px;
	height: 64px;
	justify-content: center;
	align-items: center;
	display: flex;
}

.selling-point-yellow {
	background: #FFD700;
	border-radius: 9999px;
	width: 64px;
	height: 64px;
	justify-content: center;
	align-items: center;
	display: flex;
}

.flex-align-center {
	display: flex;
	align-items: center;
}

.m-auto {
	margin: 0 auto !important;
}

.mb-40 {
	margin-bottom: 40px;
}

.ta-left {
	text-align: left;
}

.mw-500 {
	max-width: 500px;
}

.shadow {
	position: relative;
}

.shadow::after {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #000;
	content: "";
	opacity: 0.6;
}

.date-box,
.location-box,
.light-info-box {
	padding: 16px 24px;
	border-radius: 5px;
	backdrop-filter: blur(20px);
	border: 1px solid #fff;
	color: #fff !important;
}

.ta-center {
	text-align: center;
}

.margin-0 {
	margin: 0 !important;
}

.margin-auto {
	margin: auto !important;
}

.cta-box {
	padding: 16px 24px;
	border-radius: 5px;
	background: #FFA500;
	border: 1px solid #FFA500;
	color: #fff !important;
}

.cta-box a,
.light-info-box a {
	color: #fff !important;
}

.transition {
	transition: ease-in-out 0.2s;
}

.translate02:hover {
	transform: translate(0, -2px);
	box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.translate06:hover {
	transform: translate(0, -6px);
	box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.fp-atf-bottom-content {
	font-size: 14px;
	font-style: italic;
}

.bold,
.bold-text p,
.bold-text h2 {
	font-weight: bolder !important;
}

.custom-div-area {
	margin: auto;
}

.custom-div-area .elementor-shortcode {
	display: grid;
	grid-template-columns: 1fr 1fr;
	text-align: center;
}

.custom-div-1,
.custom-div-2 {
	color: #fff;
	padding: 15px 20px;
	border: 1px solid #fff;
	border-radius: 10px !important;
	margin: 0 20px;
	text-align: left;
	backdrop-filter: blur(50px);
}

.custom-btn-1,
.custom-btn-2 {
	padding: 15px 20px;
	text-align: left !important;
}

.custom-btn-1 button,
.custom-btn-2 button {
	text-align: left;
	display: flex;
	align-items: center;
	padding: 15px 40px;
}

.custom-btn-1-element {
	margin: 0 0 0 auto;
	background: #FFA500;
	border: 1px solid #FFA500;
}

.custom-btn-2-element {
	margin: 0 auto 0 0;
	backdrop-filter: blur(50px);
	background: transparent;
	border: 1px solid #fff;
}

.custom-grid {
	display: grid;
	grid-template-columns: 1fr 5fr;
}

.vertical-center {
	display: flex;
	align-items: center;
}

.section-green {
	background: #EAF5E8;
	padding: 80px 100px;
}

.section-green h2 {
	font-size: 48px;
}

.section-green p {
	font-size: 24px;
}

.facts-numbers {
	margin-top: 48px !important;
	margin-bottom: 48px !important;
}

.fact-single {
	color: #2E8B57;
	font-size: 48px;
	font-weight: bolder;
}

.ast-builder-menu-1 .menu-item.current-menu-item>.menu-link,
.ast-builder-menu-1 .inline-on-mobile .menu-item.current-menu-item>.ast-menu-toggle,
.ast-builder-menu-1 .current-menu-ancestor>.menu-link {
	color: #2E8B57 !important;
}

.ast-builder-menu-1 .menu-item:hover>.menu-link,
.ast-builder-menu-1 .inline-on-mobile .menu-item:hover>.ast-menu-toggle {
	color: #2E8B57 !important;
}

.sponsors {
	padding: 4rem 1rem;
	background: #f8fafc;
	/*background: linear-gradient(180deg,#f4f8f6 0%,#eef3f1 100%);*/
}

.sponsors__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.sponsors__title {
	text-align: center;
	margin-bottom: 1rem;
	font-size: 2rem;
}

.sponsors__grid {
	display: grid;
	/*grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));*/
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2rem;
	align-items: center;
}

.sponsor {
	background: #fff;
	border-radius: 16px;
	padding: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sponsor:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.sponsor__logo {
	max-width: 100%;
	max-height: 80px;
	object-fit: contain;
}

.sponsor__name {
	font-weight: 600;
}

.become-sponsor {
	text-align: center;
	margin-top: 20px;
}

.become-sponsor a {
	font-weight: bold;
	color: var(--green);
}



@media (max-width: 1399.98px) {
	...
}


@media (max-width: 1199.98px) {
	...
}


@media (max-width: 991.98px) {
	...
}


@media (max-width: 767.98px) {
	footer aside.widget-area {
		max-width: 90% !important;
		margin: auto !important;
	}
}

@media (max-width: 575.98px) {
	...
}