/* ------------------------------------------ */
/*             MAIN STYLE                     */
/*         Mobile First Design                */
/* ------------------------------------------ */

/* ---------- ROOT VARIABLES ---------- */
:root {
	--color-background: #222222;
	--color-text: #f2f2f2;
	--color-heading-h3: #dddddd;
	--color-highligt: #6e98c2;
	--color-link-hover: #4d79a1; 
	--color-button--primary: #ca6702;
	--color-button--secondary: #6e98c2;
	--color-button--primary-hover: #aa4d00;
	--color-button--secondary-hover: #4d79a1;
	--color-pills: var(--color-button--secondary);
	--default-border-radius: 2.5rem;
	--default-spacing: 1.5rem; /* standard spacing for margins og paddings */
	--line-height: 1.8;

	--font-primary: "Rammetto One", sans-serif;
	--font-secondary: "Montserrat Alternates", sans-serif;
}

/* ---------- RESET STYLES ----------- */
/* Her nulstiller jeg browserens standardindstillinger */
* {
	box-sizing: border-box;
}

/* ---------- BASALE STYLES ---------- */
body { /*selektor*/
	margin: 0; /*deklaration*/
	padding: 0;
	background-color: var(--color-background);
	color: var(--color-text); /* standard farve til tekst */
	font-family: var(--font-secondary); /* standard font for body*/
}

/* ---------------------------------------- */
/*               TYPOGRAFI                  */
/* ---------------------------------------- */
/* Her overskriver jeg min standardsettings */

h1,
h2,
h3,
h4,
p {
	line-height: var(--line-height, 1.4rem);
	margin: 0;
}

h1 {
	font-family: var(--font-primary);
	font-size: 3.25rem; /* 52px */
	letter-spacing: 0.1rem;
	line-height: 1;
	margin-top: 1rem;
}

h2 {
	font-family: var(--font-secondary);
	font-weight: 300;
	font-style: italic;
	font-size: 1.5rem; /* 24px */
	letter-spacing: 0.1em;

}

h3 {
	font-family: var(--font-primary);
	font-size: 1.25rem; /* 20px */
	letter-spacing: 0.05rem;
	color: var(--color-heading-h3);
}

h4 {
	font-family: var(--font-secondary);
	font-weight: 300;
	font-style: italic;
	font-size: 1.4rem; /* 22.4px */
	margin: 1rem 0 3rem 0;
}

p {
	font-family: var(--font-secondary);
	font-weight: 300;
	font-size: 1rem; /* 16px */
	margin-bottom: 1rem;
}

a {
	font-family: var(--font-secondary);
	color: var(--color-text);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.6;
	text-decoration: none;
}

ul {
	font-family: var(--font-secondary);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1rem;
	padding-left: 1.5rem; /* giver indrykning til bullets */
	list-style-type: disc;
}

li {
	margin-bottom: 0.5rem; /* lidt luft mellem punkterne */
}

.text--lowlight {
	color: #ccc;
	font-size: 0.75rem;
}

.text--highlight {
	color: var(--color-highligt);
}

.text--spacing {
	margin: 2rem auto 0 auto;
	}

.text--center {
	text-align: center;
	width: 100%;
}

.tagList {
	display: flex;
	flex-wrap: wrap; /* tillader at tags kan bryde linje */
	gap: calc(var(--default-spacing, 1.4rem) * 0.25);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tagList__item {
	background: var(--color-pills);
	border-radius: var(--default-spacing);
	padding: calc(var(--default-spacing) * 0.25) calc(var(--default-spacing) * 0.5);
}

@media (min-width: 768px) {
	h1 {
		font-size: 5rem; /* 80px, ups omkring 40px er anbefalet. */
	}

	h2 {
		font-size: 1.6rem; /* 25px */
		line-height: 1.4;
		margin-top: 2.5rem;
	}

	h3 {
		font-size: 1.5rem; /* 24px */
		line-height: 1.5;
	}

	h4 {
		font-size: 1.25rem; /* 20px */
		line-height: 1.4;
		font-size: 1.5rem; /* 32px */
	}

	p {
		font-size: 1.125rem; /* 18px */
		font-weight: 200;
		line-height: 1.6;
		margin-bottom: 1rem;
	}

	blockquote {
		margin: 0;
	}
}

/* ------------------------------------------ */
/*               BUTTONS                      */
/* ------------------------------------------ */

.button {
	display: inline-block; /* inline-block for at kunne sætte margin og padding */
	padding: calc(var(--default-spacing, 1.4rem) * 0.5)
		var(--default-spacing, 1.4rem);
	border-radius: var(--default-border-radius, 2.5rem);
	text-align: center;
}

.button--primary{
	background-color: var(--color-button--primary, #ca6702);
}

.button--secondary {
	background-color: var(--color-button--secondary, #6e98c2);
}

.button--primary:hover {
	background-color: var(--color-button--primary-hover, #aa4d00);

	transition: all 0.3s ease;
}

.button--secondary:hover {
	background-color: var(--color-button--secondary-hover, #4d79a1);
	transition: all 0.3s ease;
}

.button--center {
	text-align: center; 
	text-wrap: balance; /* Fordeler tekstlinjer mere harmonisk, så de bliver visuelt afbalancerede.*/
}

.button--large {
	font-size: 1.4rem;
}

.buttons-container {
  display: flex;
  justify-content: center;  /* Centrer knapperne horisontalt */
	margin-top: 3rem;
  gap: 1rem;
}

/* ------------------------------------------ */
/*               MEDIER.                      */
/* ------------------------------------------ */
img,
video {
	border-radius: var(--default-border-radius, 2.5rem);
	max-width: 100%; /* sikrer at billeder og videoer ikke overskrider deres container */
}

.video--fullWidth {
	width: 100vw;
}

.imgFlipped {
	transform: scaleX(-1);
}

@media (min-width: 768px) {
	.imgHeroRight {
		width: 25rem;
		place-self: center;
	}

	.video--halfWidth {
		width: 25rem;
		place-self: center;
	}
}

/* ------------------------------------------ */
/*               STRUCTURE RULES              */
/* ------------------------------------------ */

/*Gør alle `<section>`-elementer med klassen `.section` til "flex-containere".  
/*Standardretning for flex er `row`, så deres indhold (her .section__content) bliver lagt vandret, medmindre andet er angivet.*/
.section {
	display: flex;
}

/* Denne klasse tilføjes oven i .section.
Gør at alle sektioner strækker sig over hele højden af deres container, og centrerer indholdet både lodret og vandret. */
.section--full {
	align-items: center;
	height: 100%;
	justify-content: center; 
	min-height: 100vh;
}

/*Mit indhold bliver stablet lodret med lidt luft imellem, venstrejusteret, og med god top/bund-margin.*/
.section__content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
	justify-items: start;
	padding: 4rem 0;
}

.section__contentProject {
	gap: 2rem;
}

.mobileHide {
	display: none;
}

.mobileSpace {
	margin: 0 var(--default-spacing, 1.4rem); /* giver luft på siderne */
}

.imgGrid {
	display: grid;
	gap: var(--default-spacing, 1.4rem);
	width: 100%;
}

.imgGrid--mobile2column {
  grid-template-columns: 1fr 1fr;
}

.imgGrid--3column {
	grid-template-columns: repeat(3, 1fr);
}

.full-width {
	width: 100%; /* Gør element bredt som dets container. */
}

@media (min-width: 768px) {
	.mobileHide {
		display: block;
	}

 /*`section__content` har normalt kun **én kolonne** (på mobil).  
Ved 768px skifter det til to kolonner med lige bredde.
Det betyder, at mit indhold nu automatisk deles op i to kolonner –
og hvis jeg har to `div`s inde i en `section__content`, vil de stå side om side i stedet for oven på hinanden.*/
	.section__content {
		grid-template-columns: 1fr 1fr;
	}

	.sectionContent--span2column {
		grid-column: 1 / 3; /* Gør at elementet strækker sig over begge kolonner */
	}


/*Denne klasse skifter layout fra grid til flex (lodret kolonne).  
Det bruges typisk til tekstindhold ved siden af et billede.
📌 Effekten er:
- Indholdet står stadig lodret.
- Det er centreret lodret i forhold til nabo-kolonnen (fx et billede).
- Der er luft (`gap`) mellem elementerne.*/
	.sectionContent-flexJustifyCenter {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: var(--default-spacing, 1.4rem);
	}

	.imgGrid-desktop4column {
		grid-template-columns: repeat(4, 1fr);
	}

	.imgGrid--9columnDesktop {
		grid-template-columns: repeat(9, 1fr);
	}
}

/* ------------------------------------------ */
/*               NAVIGATION                   */
/* ------------------------------------------ */
.navbar {
	background: var(--color-background);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem var(--default-spacing, 1.4rem);
	position: fixed; /* gør at navbaren forbliver øverst på siden */
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

.navbar__logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--color-text);
}

.navbar__logo-image {
	width: 20px;
	height: auto;
}

.navbar__toggle {
	position: absolute; /* placerer knappen i øverste højre hjørne */
	top: 1rem;
	right: 1rem;
	background: none;
	border: none;
	color: var(--color-text);
	font-size: 1.8rem;
	cursor: pointer;
}

.navbar__list {
	/* liste med links i navbaren */
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--color-background);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
	list-style: none;
}

.navbar__list a {
	/* links i navbaren */
	display: block;
	border: none;
	padding: 0.5rem 1rem;
	text-align: center;
	font-size: 1.75rem;
}

.navbar__list a.active {
	/* aktivt link på undersiderne */
	color: var(--color-link-hover);
	font-weight: 600;
}

.navbar__close {
	align-items: center;
	display: flex;
	height: calc(var(--default-spacing, 1.4rem) * 2);
	justify-content: center;
	position: absolute;
	right: calc(var(--default-spacing, 1.4rem) * 0.5);
	top: 0;
	width: calc(var(--default-spacing, 1.4rem) * 2);
}

@media (min-width: 768px) {
	.navbar__toggle,
	.navbar__close {
		display: none;
	}

	.navbar {
		align-items: center;
		height: 4rem;
	}

	.navbar__list {
		display: flex; /* vises på tablet og desktop */
		position: static;
		flex-direction: row;
		align-items: flex-end;
		width: auto;
		padding: 0;
	}

	.navbar__list a {
		background: none;
		border: none;
		font-size: 1rem;
	}
}

/* ------------------------------------------ */
/*                  FOOTER                    */
/* ------------------------------------------ */
.footer {
	background-color: #6e98c2;
}

.footer__content {
	display: grid;
	grid-template-areas:
		"logo"
		"contact"
		"nav"
		"copyright";
	grid-template-columns: 1fr;
	padding: var(--default-spacing, 1.4rem);
}

/* > betyder at det kun gælder for direkte børn af footer__content (dvs. logo, kontaks osv.) */
.footer__content > div {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: flex-start;
}

.footer__logo {
	grid-area: logo;
}

.footer__contact {
	grid-area: contact;
}

.footer__nav {
	grid-area: nav;
}

.footer__copyright {
	grid-area: copyright;
}

.footer__content ul {
	list-style: none;
	padding: 0;
	text-align: center;
}

@media (min-width: 768px) {
	.footer {
		padding-top: 4rem;
	}
	
	.footer__content {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto 200px;
		grid-template-areas:
			"logo contact nav"
			"copyright copyright copyright";
		margin: auto;
		max-width: 1200px; /* Maksimal bredde for footerindhold. Kig evt. på dette. */
		width: 100%;
	}

	.footer__content h3,
	.footer__content ul {
		text-align: left;
		width: 100%;
	}

	.footer__logo {
		align-self: center;
		align-items: flex-start;
	}

	.footer__copyright {
		grid-area: copyright;
		margin-top: 7rem;
	}
}

/* ------------------------------------------ */
/*                  INDEX                     */
/* ------------------------------------------ */
.front {
	/* Giver forsiden et baggrundsbillede */
	background-image: url("../img/billedeForside.webp");
	background-size: cover;
	background-position: 66% center;
}

.front__description {
	color: var(--color-text);
	grid-column: 1 / 1;
	line-height: 1.4;
	text-align: left;
	margin-top: 0;
}

.about__img {
	max-width: 38.125rem;
}

.front__name {
	margin-top: 7rem;
}

@media (min-width: 768px) {
	.front {
		background-size: cover; /* dækker hele containeren */
		background-position: center 20%;
	}

	.front__name {
		margin-top: 0;
	}
}

/* ------------------------------------------ */
/*                  PRODUKTER                 */
/* ------------------------------------------ */
.productList {
	display: grid;
	gap: calc(var(--default-spacing, 1.4rem) * 3);
}

.productList__item {
	display: flex;
	flex-direction: column;
	gap: calc(var(--default-spacing, 1.4rem) * 0.5);
}

.productList__button {
	margin-top: calc(var(--default-spacing, 1.4rem) * 0.5);
}

@media (min-width: 768px) {
	.productTitle,
	.productList {
		grid-column: 1 / 3;
		grid-template-columns: 1fr 1fr;
	}

	.UnderText {
		width: 70%
	}
} 

/* ------------------------------------------ */
/*                  OM MIG                    */
/* ------------------------------------------ */

.toolImg {
	border-radius: 0;
}

.omMig__img {
	margin-top: 1rem;
}

@media (min-width: 768px) {
	.quote__textStart {
		margin-top: 6rem;
	}
}

/* ------------------------------------------ */
/*                  Kontakt                   */
/* ------------------------------------------ */
.contact__text {
	margin: 0 0;
}

.contact__mail a:hover,
.contact__tlf a:hover {
  color: var(--color-link-hover);
}

@media (min-width: 768px) {
	.contact__header {
		font-size: 2rem; /* 32px */
	}
}