/*
 * base.css — designtokens, typografi og primitiver.
 *
 * Alt visuelt i temaet trækker fra variablerne herunder. Skal en farve eller en
 * skriftstørrelse ændres, sker det her og ingen andre steder.
 *
 * Fontene er self-hostede med vilje: hentes Google Fonts fra Googles CDN, sendes
 * den besøgendes IP til Google uden samtykke. LG München afgjorde i 2022 at det
 * bryder GDPR, og det er siden blevet en af de hyppigste Abmahnung-anledninger
 * mod tyske shops. Læg .woff2-filerne i assets/fonts/ — se README i temamappen.
 */

/* ---------------------------------------------------------------- Fonte ---- */

/*
 * Én variabel fil dækker alle vægte fra 100 til 900.
 *
 * Jost er en variabel skrift, så vi slipper for tre separate filer — og for
 * tre netværksforespørgsler. Hele familien fylder 26 kB, hvilket er mindre
 * end én enkelt statisk vægt normalt gør.
 *
 * Filen er hentet fra Google Fonts og lagt lokalt i temaet. Der er altså
 * INGEN forespørgsel til fonts.gstatic.com når en besøgende åbner siden, og
 * dermed intet IP-læk. Jost er under SIL Open Font License, som tillader
 * netop dette — licensteksten ligger i assets/fonts/OFL.txt.
 */
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/jost-variabel.woff2') format('woff2');
}

/*
 * Ingen serif længere.
 *
 * Jost er en open source-genfortolkning af Futura og bruges nu til det hele —
 * overskrifter, navigation, brødtekst og logo. Cormorant er udgået, så der
 * kun skal hentes én skriftfamilie.
 *
 * Skal den ægte Futura ind en dag, er det de to variabler herunder der
 * ændres. Bemærk at Adobe Fonts ikke kan self-hostes, så den vej genindfører
 * GDPR-problemet med besøgendes IP.
 */

/* --------------------------------------------------------------- Tokens ---- */

:root {
	/* Farver — se DESIGN.md afsnit 2. Introducér ikke nye uden at fjerne en. */
	--fst-ink: #111111;
	--fst-stone: #6b6b6b;
	--fst-onyx: #000000;
	--fst-paper: #ffffff;
	--fst-bone: #f5f3f1;

	/*
	 * Lysere udgave af Bone — ikke en ny farve, samme kulør halvt op mod
	 * Paper. Bruges hvor en flade skal adskille sig fra det hvide uden at
	 * blive en synlig blok, fx krydssalget i kurv-drawer'en.
	 */
	--fst-bone-let: #faf9f8;
	--fst-ash: #e5e2de;
	--fst-signal: #c1272d;

	/*
	 * Begge peger på Jost. De to variabler beholdes adskilt, så en anden
	 * skrift til overskrifter kan indføres senere uden at røre alle regler.
	 */
	--fst-font-display: 'Jost', 'Futura', 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--fst-font-ui: 'Jost', 'Futura', 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* Letterspacing på versaler er dét der giver modeudtrykket. */
	--fst-track: 0.14em;
	--fst-track-logo: 0.28em;

	/*
	 * Produktgriddets mellemrum — ÉN værdi til alle grids på sitet.
	 *
	 * Den bruges både som gap mellem kortene og som padding i venstre og
	 * højre side af sektionen. Det er dét der gør at kanten ser ud som en
	 * fortsættelse af mellemrummet frem for en afskæring.
	 *
	 * Ændres den her, følger arkivet, relaterede, handpicked og forsidens
	 * widgets med. Tidligere havde de tre forskellige værdier.
	 */
	--fst-grid-gap: 5px;

	/* Layout */
	--fst-max: 1440px;
	--fst-sektion-y: 88px;
	--fst-gutter: 24px;

	/* Overgange — korte og uden bounce. Fladt design tåler ikke fjedre. */
	--fst-overgang: 0.25s ease;
}

@media (max-width: 767px) {
	:root {
		--fst-sektion-y: 56px;
		--fst-gutter: 16px;
	}
}

/* ---------------------------------------------------------------- Basis ---- */

/*
 * html body i stedet for body.
 *
 * Elementors kit sætter baggrund og skrift direkte på body. Ved samme
 * specificitet afgør rækkefølgen, og selv om vi nu indlæses sidst, giver
 * det ekstra element en margin at arbejde med hvis rækkefølgen skifter.
 */
/*
 * 16px og linjeafstand 1,75, også på mobil.
 *
 * Jost har — som Futura — en lille x-højde: de små bogstaver fylder lidt i
 * forhold til versalerne. Det er en styrke i overskrifter og versaler, men
 * gør løbende tekst tungere at læse. Større grad og mere luft mellem
 * linjerne kompenserer.
 */
html body {
	background: var(--fst-paper);
	color: var(--fst-ink);
	font-family: var(--fst-font-ui);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * hidden skal betyde skjult.
 *
 * Accordionens paneler og modalen styres med hidden-attributten. Sætter et
 * tredjepartsstylesheet display på elementet, vinder det over browserens
 * indbyggede [hidden]-regel, og så står alle punkter åbne på én gang —
 * præcis som de gjorde her. !important er berettiget: reglen skal aldrig
 * kunne tabe til noget som helst.
 */
[hidden] {
	display: none !important;
}

/*
 * Sidens rulning låses mens kurv-skuffen eller mobilmenuen er åben.
 *
 * Klassen sidder på <html>, ikke på <body>, og det er hele pointen. Browseren
 * giver kun body's overflow videre til viewporten når <html> selv har
 * overflow: visible. Vores html har overflow-x: clip — den er forudsætningen
 * for fuldbredde-sektionerne — og når den ene akse er clip og den anden
 * visible, regnes den synlige akse som auto. Dermed er det <html> der ruller,
 * og en regel på body når aldrig frem til viewporten. Det er derfor man kunne
 * rulle siden bag kurven, med to rullepaneler ved siden af hinanden.
 *
 * padding-right lægger rullepanelets bredde tilbage som luft. Uden den hopper
 * hele siden 15px til højre i det øjeblik panelet åbner. Bredden måles i
 * JavaScript FØR klassen sættes og skrives ud som --fst-rullepanel.
 *
 * Reglen ligger her og ikke i drawer.css, fordi drawer.css kun indlæses når
 * WooCommerce er aktiv — og mobilmenuen bruger den samme lås.
 */
html.fst-laast {
	overflow: hidden;
	padding-right: var( --fst-rullepanel, 0px );
}

/*
 * Ingen afrundede hjørner nogen steder. Det er den enkeltregel der flytter
 * shoppen fra "WooCommerce-tema" til modebrand — se DESIGN.md afsnit 7.
 */
img,
input,
select,
textarea,
button,
.fst-kort,
.fst-modal,
.fst-drawer {
	border-radius: 0;
}

/* ------------------------------------------------------------ Typografi ---- */

/*
 * Overskrifter i let Jost med let spatiering.
 *
 * En geometrisk sans i display-størrelse har brug for lidt luft mellem
 * bogstaverne — uden den klumper de runde former sammen. Graderne er sat
 * ned fra serif-versionen, fordi Jost fylder optisk mere ved samme px-værdi.
 */
h1,
h2 {
	font-family: var(--fst-font-display);
	font-weight: 300;
	line-height: 1.14;
	letter-spacing: 0.03em;
	margin: 0 0 0.4em;
}

h1 {
	font-size: 54px;
}

h2 {
	font-size: 36px;
}

h3,
h4,
h5,
h6 {
	font-family: var(--fst-font-ui);
	font-weight: 400;
	line-height: 1.3;
	margin: 0 0 0.5em;
}

h3 {
	font-size: 22px;
}

h4 {
	font-size: 18px;
}

@media (max-width: 767px) {
	h1 {
		font-size: 34px;
	}

	h2 {
		font-size: 26px;
	}

	h3 {
		font-size: 19px;
	}

	h4 {
		font-size: 17px;
	}
}

p {
	margin: 0 0 1.2em;
}

/*
 * Fed skrift skal have en ABSOLUT vægt.
 *
 * Browserens standard er `strong { font-weight: bolder }`, og bolder er
 * relativ: den regner ud fra forælderen efter en fast trappe, hvor 100-300
 * løftes til 400. Brødteksten her er 300, så alt der blev gjort fedt i
 * editoren landede på 400 — altså almindelig vægt. Det så ud som om
 * formateringen var gået tabt, men markuppen var der hele tiden.
 *
 * 600 og ikke 700: mod 300 er 600 rigeligt tydeligt, og 700 bliver tungt i
 * en modebutik hvor resten af siden er let.
 */
strong,
b {
	font-weight: 600;
}

a {
	color: var(--fst-ink);
	text-decoration: none;
	transition: opacity var(--fst-overgang);
}

a:hover {
	opacity: 0.62;
}

/*
 * Produktkort er undtaget.
 *
 * Hele kortet ligger i et <a>, så den generelle hover-dæmpning ovenfor gjorde
 * billedet 62 % gennemsigtigt over den lyse baggrund. Det så ud som en hvid
 * overlay og skjulte samtidig at billedskiftet rent faktisk skete.
 *
 * Undtagelsen må IKKE hænge på .woocommerce eller .woocommerce-page. De to
 * klasser findes kun på WooCommerces egne sider — forsiden er en almindelig
 * Elementor-side, og dér havde produkt-widgettens kort stadig sløret. Derfor
 * hænger reglen nu udelukkende på li.product, som findes i alle fire grids:
 * arkiv, relaterede, handpicked og widgetten.
 *
 * li.product a:hover er (0,1,2) og slår a:hover (0,1,1) uanset kontekst.
 */
li.product a:hover,
.fst-galleri .fst-galleri__item:hover {
	opacity: 1;
}

/*
 * Versal-stilen. Alt der er navigation, label, knap eller produktnavn bruger
 * denne — det er den mest gentagne visuelle beslutning på hele sitet.
 */
.fst-versal,
.fst-sektionstitel,
.fst-knap,
.fst-link,
.fst-arkivbjaelke__titel,
.fst-sorter__select,
.fst-sale {
	font-family: var(--fst-font-ui);
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	font-weight: 400;
}

.fst-sektionstitel {
	font-size: 12px;
	text-align: center;
	margin: 0 0 32px;
	color: var(--fst-ink);
}

/* ---------------------------------------------------------------- Knapper -- */

/*
 * a.fst-knap og button.fst-knap, ikke bare .fst-knap.
 *
 * Elementors kit sætter linkfarven med .elementor-kit-XXX a — altså (0,1,1).
 * En enkelt .fst-knap er (0,1,0) og taber, så knappen stod sort med sort
 * tekst. Med elementnavnet foran rammer vi (0,1,1) og vinder på at blive
 * indlæst sidst; html foran løfter det til (0,1,2) for en sikkerheds skyld.
 */
html a.fst-knap,
html a.fst-knap:visited,
html button.fst-knap,
.fst-knap,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	display: inline-block;
	background: var(--fst-onyx);
	color: var(--fst-paper);
	font-family: var(--fst-font-ui);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	padding: 18px 32px;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background var(--fst-overgang);
	text-align: center;

	/*
	 * Elementor-kittet understreger ALLE links (.elementor-kit-XXX a). En
	 * knap der er et <a> — "Checkout" i kurv-skuffen, "Continue shopping" —
	 * stod derfor understreget på hele sitet. html a.fst-knap er (0,1,2) og
	 * slår kittets (0,1,1).
	 */
	text-decoration: none;
}

html a.fst-knap:hover,
html button.fst-knap:hover,
.fst-knap:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: #333333;
	color: var(--fst-paper);
	opacity: 1;
}

/* Ghost-varianten skal have mørk tekst — også som link. */
html a.fst-knap.fst-knap--ghost,
html a.fst-knap.fst-knap--ghost:visited {
	background: transparent;
	color: var(--fst-ink);
	border: 1px solid var(--fst-ink);
}

html a.fst-knap.fst-knap--ghost:hover {
	background: var(--fst-ink);
	color: var(--fst-paper);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--fst-ash);
	color: var(--fst-stone);
	cursor: not-allowed;
}

/* Ghost — hårfin ramme, ikke 2px. Tyndheden er hele pointen. */
.fst-knap--ghost {
	background: transparent;
	color: var(--fst-ink);
	border: 1px solid var(--fst-ink);
}

.fst-knap--ghost:hover {
	background: var(--fst-ink);
	color: var(--fst-paper);
}

.fst-knap--fuld {
	display: block;
	width: 100%;
}

/*
 * Tekstlink-knap: understregning, ingen ramme.
 *
 * To klasser og alle tilstande gentaget. Elementors kit styler ethvert
 * button-element med baggrund, padding og en rød hover-farve — og en enkelt
 * klasse taber. Det var derfor "Size guide" stod som en sort kasse med
 * usynlig tekst og blev pink når man holdt musen over.
 *
 * html body .fst-link er tilføjet, og det er den der gør arbejdet uden for
 * butikken. Kurv-skuffen findes på hver eneste side, men body.fst-shop kun
 * på butikssiderne — så på 404 og forsiden ramte ingen af reglerne, og
 * "Remove" i skuffen blev til kittets sorte pille med border-radius 2000px.
 * (0,1,2) slår kittets .elementor-kit-XXX button (0,1,1) uanset side.
 */
html body .fst-link,
html body .fst-link:hover,
html body .fst-link:focus,
body.fst-shop .fst-link,
body.fst-shop .fst-link:hover,
body.fst-shop .fst-link:focus,
.fst-pdp .fst-link {
	display: inline-block;
	width: auto;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	font-family: var(--fst-font-ui);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-ink);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

html body .fst-link:hover,
body.fst-shop .fst-link:hover {
	color: var(--fst-ink);
	opacity: 0.62;
}

/* ------------------------------------------------------------ Formularer --- */

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
input[type='number'],
input[type='search'],
select,
textarea {
	width: 100%;
	background: var(--fst-paper);
	color: var(--fst-ink);
	font-family: var(--fst-font-ui);
	font-size: 15px;
	font-weight: 300;
	border: 1px solid var(--fst-ash);
	border-radius: 0;
	padding: 14px 16px;
	transition: border-color var(--fst-overgang);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--fst-ink);
	outline: 0;
	box-shadow: none;
}

label {
	display: block;
	font-family: var(--fst-font-ui);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-stone);
	margin-bottom: 8px;
}

select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23111' stroke-width='1' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
}

/* --------------------------------------------------------------- Layout ---- */

.fst-container {
	max-width: var(--fst-max);
	margin: 0 auto;
	padding-left: var(--fst-gutter);
	padding-right: var(--fst-gutter);
}

.fst-sektion {
	padding-top: var(--fst-sektion-y);
	padding-bottom: var(--fst-sektion-y);
}

/*
 * Fuldbredde.
 *
 * Hello Elementor lægger flere lag containere med max-width og padding omkring
 * indholdet, og Elementors kit sætter sin egen containerbredde ovenpå. Vi
 * nulstiller alle de lag der optræder på shop-skabelonerne — det er billigere
 * end at gætte hvilket ét der er det aktive i den aktuelle Hello-version.
 */
/*
 * !important er nødvendigt her.
 *
 * Hello Elementor sætter containerbredden med en CSS-variabel som Elementors
 * kit derefter overskriver, og kittets regel har både højere specificitet og
 * senere placering. Der findes ikke en selektor vi kan vinde med — det eneste
 * alternativ ville være at gætte på kit-id'et, som ændrer sig.
 *
 * Reglen er scopet til .fst-fuldbredde, så den kun rammer shop-skabelonerne
 * og aldrig Elementor-byggede sider.
 */
.fst-fuldbredde .site-main,
.fst-fuldbredde .page-content,
.fst-fuldbredde .entry-content,
.fst-fuldbredde .site-content,
.fst-fuldbredde #content,
.fst-fuldbredde main,
.fst-fuldbredde article {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Elementors egne containere på arkiv- og produktskabelonen. */
.fst-fuldbredde .e-con,
.fst-fuldbredde .e-con-inner,
.fst-fuldbredde .elementor-section .elementor-container {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* -------------------------------------------------------------- Diverse ---- */

.fst-sale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	font-size: 10px;
	color: var(--fst-signal);
	background: var(--fst-paper);
	padding: 4px 8px;
	line-height: 1;
}

hr,
.fst-divider {
	border: 0;
	border-top: 1px solid var(--fst-ash);
	margin: 32px 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Tastaturfokus skal være synligt — men diskret og i brandets farver. */
:focus-visible {
	outline: 1px solid var(--fst-ink);
	outline-offset: 2px;
}

/* ================================================================ 404 === */

/*
 * To klasser på overskrifterne — (0,2,0) — så de slår Elementor-kittets
 * .elementor-kit-XXX h1 (0,1,1), som ellers sætter Bogart i 70px.
 */
.fst-404 {
	max-width: 560px;
	margin: 0 auto;
	padding: 96px var(--fst-gutter) 72px;
	text-align: center;
}

.fst-404 .fst-404__kode {
	margin: 0 0 20px;
	font-family: var(--fst-font-ui);
	font-size: 11px;
	letter-spacing: var(--fst-track);
	color: var(--fst-stone);
}

.fst-404 .fst-404__titel {
	margin: 0 0 16px;
	font-family: var(--fst-font-ui);
	font-size: 22px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fst-ink);
}

.fst-404 .fst-404__tekst {
	margin: 0 0 32px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--fst-stone);
}

.fst-404__soeg {
	display: flex;
	gap: 12px;
	margin: 0 0 24px;
}

.fst-404 .fst-404__soeg input[type='search'] {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 12px;
	border: 1px solid var(--fst-ash);
	border-radius: 0;
	background: var(--fst-paper);
	font-family: var(--fst-font-ui);
	font-size: 14px;
}

.fst-404 .fst-404__soeg input[type='search']:focus {
	outline: none;
	border-color: var(--fst-ink);
}

.fst-404 .fst-404__soegknap,
.fst-404 .fst-404__soegknap:hover,
.fst-404 .fst-404__soegknap:focus {
	height: 48px;
	padding: 0 20px;
	border: 1px solid var(--fst-ink);
	border-radius: 0;
	background: var(--fst-paper);
	color: var(--fst-ink);
	font-family: var(--fst-font-ui);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--fst-track);
	text-transform: uppercase;
	box-shadow: none;
	cursor: pointer;
}

.fst-404 .fst-404__soegknap:hover {
	background: var(--fst-ink);
	color: var(--fst-paper);
}

.fst-404__nyt {
	padding: 0 0 var(--fst-sektion-y);
}