@import 'variables.css';
@import 'base.css';

/*========================================
	KOMPONENTER
========================================*/
.btn {
	font-family: var(--font-fun);
	text-transform: uppercase;
	font-size: 2.3rem;
	padding: 10px;
	
	border-radius: 0.5rem;
	transition: transform 0.2s;
	display: block;
	margin: auto;
}
.btn:hover   { filter: contrast(1.10); }
.btn:active  { filter: contrast(0.90); }

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	display: grid;
	padding: 10px 30px;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	background-color: var(--main_color_light);
	transition: transform 0.3s ease-in-out;
}
.nav_left,
.nav_center,
.nav_right {
	display: flex;
	align-items: center;
	gap: 10px;
}
.nav_center {
    text-align: center;
	justify-content: center;
}
.nav_right {
	justify-content: right;
}
nav h5 {
	width: max-content;
}
nav li {
	list-style: none;
}
#site_logo {
	display: flex;
}
#site_logo img {
	width: 50px;
}
.nav_left .logo_type {
	padding-left: 6px;
	flex-direction: column;
	align-items: first baseline;
	justify-content: center;
}
.menu_item img {
	width: 30px;
}
.nav_item {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	padding-top: 5px;
}

/* main.css */



.nav_item.active img {
	filter: drop-shadow(0 0 10px var(--light_color_50));
}

nav .logo_type, nav h5 {
	display: none;
}

/* Flydende titler */
.float_title {
	position: relative;
	display: block;
	width: 100%;
	padding-top: var(--big_padding);
}
.float_title::after {
	content: "";
	position: relative;
	display: block;
	margin: auto;
	width: 20px;
	height: 20px;
	background-color: inherit;
	z-index: 99;
	transform: rotate(45deg);
	bottom: -10px;
}

/* Ikoner med mask */
.icon_mask {
	content: "";
	display: block;
	position: absolute;
	width: 60px;
	height: 60px;
	top: 20px;
	left: 10px;
}
#kom_med .icon_mask    { mask: url(svgs/hff_graphics_kommed.svg) no-repeat center/contain; }
#sæt_igang .icon_mask  { mask: url(svgs/hff_graphics_sætigang.svg) no-repeat center/contain; }
#hjælp_til .icon_mask  { mask: url(svgs/hff_graphics_hjælptil.svg) no-repeat center/contain; }

/*========================================
	LAYOUT
========================================*/
.panel {
	position: relative;
}
.panel .container {
	padding: var(--big_padding);
	padding-top: 80px;
	max-width: 400px;
	margin: auto;
}
.content {
	position: relative;
}
.main_image {
	max-width: 400px;
}

/*========================================
	SLIDER
========================================*/
.slides-wrapper {
	position: relative;
}
.slides-slider {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 20px;
	scrollbar-width: none;
	padding: 10px;
}
.slide-card {
	flex: 0 0 75%;
	scroll-snap-align: center;
	background: var(--light_color);
	border-radius: var(--border_r);
	padding: var(--small_padding);
	color: var(--sec_color_dark);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s;
	animation: swipeCue 1s ease-in-out 1 1s;
}
.slide-card:hover {
	transform: scale(1.02);
}
.slide-card p {
	flex: content;
}

/*========================================
	ANIMATIONER
========================================*/
@keyframes swipeCue {
	0%   { transform: translateX(0); }
	50%  { transform: translateX(-20px); }
	100% { transform: translateX(0); }
}
header.hidden {
	transform: translateY(-100%);
}


@keyframes logoEntrance {
	0% {
		filter: blur(5px);
		transform: rotate(-360deg) scale(0.5);
		opacity: 0;
	}
	100% {
		filter: blur(0);
		transform: rotate(0deg) scale(1);
		opacity: 1;
	}
}

.main_image.animate-logo {
	animation: logoEntrance 1.0s ease-out forwards;
}

/*========================================
	RESPONSIVE
========================================*/
@media (min-width: 800px) {
	.panel .container    { max-width: 600px; }
	.hero h1             { font-size: 3rem; }
	nav .logo_type       { display: flex !important; }
	nav h5               { display: unset }
}
@media (min-width: 1200px) {
	.panel .container    { max-width: 900px; }
	.slides-slider {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
		grid-gap: 10px;
		max-width: 800px;
		margin: auto;
		overflow-x: unset;
		scroll-snap-type: unset;
		scrollbar-width: unset;
		padding: 0 10px;
	}
	.slide-card {
		flex: none;
		animation: none;
	}
}