/*
Theme Name: netfliser.dk
Theme URI: https://netfliser.dk/
Description: Child-tema til netfliser.dk. Bibrand til Næstved Flisecenter ApS. Alle farve-, skrift- og formværdier stammer fra NF designmanual 2023 og er defineret én gang i theme.json.
Author: Næstved Flisecenter ApS
Template: twentytwentyfive
Version: 0.3.0
Requires at least: 6.7
Tested up to: 7.0
Text Domain: netfliser
*/

/* ==========================================================================
   1. TOKENS
   Hex-værdierne står ÉT sted: theme.json. Herunder mappes de blot til de
   korte navne fra designmanualen, så komponent-CSS og plugin-markup kan
   bruge --main, --family osv. Ret aldrig en hex-værdi her.
   ========================================================================== */

:root {
	/* Farveroller */
	--main:   var(--wp--preset--color--main);            /* #134869 petroleum */
	--family: var(--wp--preset--color--family);          /* #4D7159 NF-grøn   */
	--scarce: var(--wp--preset--color--scarce);          /* #EA5B1B orange    */
	--ink:    var(--wp--preset--color--ink);             /* #000000 sort      */
	--grey:   var(--wp--preset--color--grey);            /* #9D9D9D sort 50 % */
	--sale:   var(--wp--preset--color--sale);            /* #FFD419 RESERVERET */

	/* Web-neutraler (ikke i manualen) */
	--bund:   var(--wp--preset--color--bund);
	--flade:  var(--wp--preset--color--flade);
	--streg:  var(--wp--preset--color--streg);
	--muted:  var(--wp--preset--color--daempet-tekst);

	/* Konceptfarver — kun kategori- og sæsonbilleder, max 2 pr. visning */
	--koncept-oliven:      var(--wp--preset--color--koncept-oliven);
	--koncept-stoevet-blaa: var(--wp--preset--color--koncept-stoevet-blaa);
	--koncept-stoevet-rosa: var(--wp--preset--color--koncept-stoevet-rosa);
	--koncept-oxblod:      var(--wp--preset--color--koncept-oxblod);
	--koncept-sand:        var(--wp--preset--color--koncept-sand);
	--koncept-roed:        var(--wp--preset--color--koncept-roed);
	--koncept-daempet-gul: var(--wp--preset--color--koncept-daempet-gul);

	/* Skrift */
	--display: var(--wp--preset--font-family--display);
	--text:    var(--wp--preset--font-family--text);
	--mono:    var(--wp--preset--font-family--mono);

	/* Form */
	--r:   18px;  /* kort, bokse, billedfelter */
	--r-s: 10px;  /* knapper, badges, chips    */
	--tracking-label: 0.09em;
}

/* ==========================================================================
   2. FORM — tre runde hjørner og ét skarpt
   Fire utilities, intet andet. Det skarpe hjørne peger mod elementets ophæng.
   Rækkefølgen i border-radius er: øverst-v · øverst-h · nederst-h · nederst-v.
   ========================================================================== */

.c-tl { border-radius: 0 var(--nf-r, var(--r)) var(--nf-r, var(--r)) var(--nf-r, var(--r)); }
.c-tr { border-radius: var(--nf-r, var(--r)) 0 var(--nf-r, var(--r)) var(--nf-r, var(--r)); }
.c-br { border-radius: var(--nf-r, var(--r)) var(--nf-r, var(--r)) 0 var(--nf-r, var(--r)); }
.c-bl { border-radius: var(--nf-r, var(--r)) var(--nf-r, var(--r)) var(--nf-r, var(--r)) 0; }

/* Knapper, badges og chips bruger den lille radius i samme fire klasser. */
.nf-btn,
.nf-badge,
.nf-chip { --nf-r: var(--r-s); }

/* Billeder må ikke stikke ud af det skarpe hjørne. */
.c-tl, .c-tr, .c-br, .c-bl { overflow: hidden; }

/* UNDTAGELSE: det sekundære grafiske element. Firkanterne er firkantede. */
.nf-squares {
	display: flex;
	gap: 4px;
	border-radius: 0;
}
.nf-squares > i {
	display: block;
	inline-size: 18px;
	aspect-ratio: 1;
	border-radius: 0;
}

/* ==========================================================================
   3. SKRIFT — reglerne fra manualen
   ========================================================================== */

/* "I overskrifter fremhæves ALTID ét enkelt ord i Black; resten i Light." */
h1, h2, h3, h4, .nf-heading {
	font-family: var(--display);
	font-weight: 300;
}
h1 .nf-em, h2 .nf-em, h3 .nf-em, h4 .nf-em, .nf-heading .nf-em {
	font-weight: 900;
}

/* Labels og badges */
.nf-label, .nf-badge, .nf-chip, .nf-btn {
	font-family: var(--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--label);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	line-height: 1;
}

/* Data: varenumre, mål, ekskl.-moms-linjer */
.nf-data, .nf-price__excl, .nf-spec td.nf-spec__value {
	font-family: var(--mono);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--data);
}

body { max-inline-size: 100%; }
p { max-inline-size: var(--wp--custom--max-measure); }

/* ==========================================================================
   4. PRISBLOKKEN
   Fire linjer, fast rækkefølge. Markup kommer fra mu-pluginnet netfliser-core;
   ændr aldrig rækkefølge eller vægte her — visningen er juridisk bundet.
   ========================================================================== */

.nf-price {
	display: block;
	font-family: var(--display);
}

/* Linje 0 — prisnavn */
.nf-price__name {
	display: block;
	font-weight: 800;
	font-size: var(--wp--preset--font-size--label);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	color: var(--main);
	margin-block-end: 0.35em;
}

/* Linje 1 — kr/m² inkl. moms. Prisen er altid sort og altid Black. */
.nf-price__main {
	display: block;
	color: var(--ink);
	line-height: 1.05;
}
.nf-price__amount {
	font-weight: 900;
	font-size: var(--wp--preset--font-size--price);
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.nf-price__unit {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--muted);
	white-space: nowrap;
}

/* Linje 2 — købsenheden med tal, inkl. moms */
.nf-price__buy {
	display: block;
	font-family: var(--text);
	font-size: var(--wp--preset--font-size--small);
	color: var(--ink);
	margin-block-start: 0.4em;
	font-variant-numeric: tabular-nums;
}
.nf-price__buy strong { font-weight: 700; }

/* Linje 3 — ekskl. moms. Nederst, mindst, grå. Må aldrig fremhæves. */
.nf-price__excl {
	display: block;
	color: var(--grey);
	font-size: var(--wp--preset--font-size--excl-vat);
	margin-block-start: 0.6em;
	font-variant-numeric: tabular-nums;
}

/* Tilbehør (salgsform "stk"): dækning i stedet for m²-pris */
.nf-price__coverage {
	display: block;
	font-family: var(--text);
	font-size: var(--wp--preset--font-size--small);
	color: var(--muted);
	margin-block-start: 0.25em;
}

/* Woo pakker prisen i <span class="price"> — nulstil arvet kursiv/streg. */
.woocommerce span.price,
.woocommerce span.price del,
.woocommerce span.price ins {
	text-decoration: none;
	font-style: normal;
}

/* ==========================================================================
   5. LAGER OG KNAPHED — orange og intet andet
   ========================================================================== */

.nf-stock { display: block; }
.nf-stock__text {
	display: block;
	font-family: var(--mono);
	font-size: var(--wp--preset--font-size--data);
	color: var(--scarce);
}
.nf-stock__note {
	display: block;
	font-family: var(--text);
	font-size: var(--wp--preset--font-size--small);
	color: var(--muted);
	margin-block-start: 0.2em;
}
.nf-stock__bar {
	display: block;
	block-size: 3px;
	inline-size: 100%;
	background: var(--streg);
	margin-block-start: 0.5em;
	border-radius: 0;
	overflow: hidden;
}
.nf-stock__bar::before {
	content: "";
	display: block;
	block-size: 100%;
	inline-size: var(--nf-fill, 100%);
	background: var(--scarce);
}

/* Fyldet sættes som klasse, ikke som inline style, fordi wp_kses_post
   fjerner CSS-variabler fra style-attributter i lagerteksten. */
.nf-fill-0   { --nf-fill: 0%; }
.nf-fill-5   { --nf-fill: 5%; }
.nf-fill-10  { --nf-fill: 10%; }
.nf-fill-15  { --nf-fill: 15%; }
.nf-fill-20  { --nf-fill: 20%; }
.nf-fill-25  { --nf-fill: 25%; }
.nf-fill-30  { --nf-fill: 30%; }
.nf-fill-35  { --nf-fill: 35%; }
.nf-fill-40  { --nf-fill: 40%; }
.nf-fill-45  { --nf-fill: 45%; }
.nf-fill-50  { --nf-fill: 50%; }
.nf-fill-55  { --nf-fill: 55%; }
.nf-fill-60  { --nf-fill: 60%; }
.nf-fill-65  { --nf-fill: 65%; }
.nf-fill-70  { --nf-fill: 70%; }
.nf-fill-75  { --nf-fill: 75%; }
.nf-fill-80  { --nf-fill: 80%; }
.nf-fill-85  { --nf-fill: 85%; }
.nf-fill-90  { --nf-fill: 90%; }
.nf-fill-95  { --nf-fill: 95%; }
.nf-fill-100 { --nf-fill: 100%; }

/* Kurvlinjen: begge enheder, og beløbet under. */
.nf-cartline { display: block; text-align: end; }
.nf-cartline__units {
	display: block;
	font-family: var(--mono);
	font-size: var(--wp--preset--font-size--data);
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.nf-cartline__money {
	display: block;
	font-family: var(--display);
	font-weight: 900;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

/* Kompakt prisblok i kurven — samme fire linjer, mindre sats. */
.nf-price--cart .nf-price__amount { font-size: 1.25rem; }
.nf-price--cart .nf-price__unit { font-size: 0.8rem; }

/* ==========================================================================
   6. BADGES, CHIPS OG KNAPPER
   ========================================================================== */

.nf-badge {
	display: inline-block;
	padding: 0.5em 0.75em;
	color: var(--flade);
	background: var(--main);
}
.nf-badge--parti  { background: var(--family); }
.nf-badge--kasse  { background: var(--main); }

.nf-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 0.75em;
	color: var(--flade);
	background: var(--main);
	text-decoration: none;
}

.nf-btn {
	display: inline-block;
	padding: 1rem 1.5rem;
	color: var(--flade);
	background: var(--main);
	border: 0;
	cursor: pointer;
	text-decoration: none;
	box-shadow: inset 0 0 0 0 var(--flade);
	transition: box-shadow 120ms ease-out;
}
/* Hover ændrer ikke farven — paletten har ingen hover-nuance. */
.nf-btn:hover,
.nf-btn:focus-visible { box-shadow: inset 0 0 0 2px var(--flade); }
.nf-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Woo-knapper følger samme regel: skarpt hjørne nederst højre. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button {
	--nf-r: var(--r-s);
	border-radius: var(--r-s) var(--r-s) 0 var(--r-s);
	background: var(--main);
	color: var(--flade);
	font-family: var(--display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
}

/* ==========================================================================
   7. KORT OG FLADER
   ========================================================================== */

.nf-card {
	background: var(--flade);
	border: 1px solid var(--streg);
	border-radius: 0 var(--r) var(--r) var(--r); /* = .c-tl */
	overflow: hidden;
}
.nf-card__media { aspect-ratio: 1; background: var(--bund); }

/* Afsenderblokken — grøn bærer altid Næstved Flisecenter, aldrig handel. */
.nf-sender {
	background: var(--family);
	color: var(--flade);
	border-radius: 0 var(--r) var(--r) var(--r);
}
.nf-sender a { color: var(--flade); text-decoration: underline; }

/* Petroleumsbåndet under headeren */
.nf-ribbon {
	background: var(--main);
	color: var(--flade);
	border-radius: 0;
}
.nf-ribbon a { color: var(--flade); text-decoration: underline; }

/* Hero-tekstbokse må ikke bleede til viewportens kant. */
.nf-hero__box { margin: var(--wp--preset--spacing--40); }

/* ==========================================================================
   8. UDSALGSGUL — kampagnetilstand. SLUKKET VED LAUNCH.
   Reglerne aktiveres først, når <body> har klassen nf-campaign, og den
   sættes udelukkende af netfliser-core pr. produkt med dokumenteret førpris.
   ========================================================================== */

body:not(.nf-campaign) .nf-sale-only { display: none !important; }
body.nf-campaign .nf-sale-only {
	background: var(--sale);
	color: var(--ink);
}