/*
Theme Name:   BeautyShop Child
Theme URI:    https://shop.habe.dk/
Description:  Child theme til Blocksy for shop.habe.dk. Al tilpasning af WooCommerce, søgning, filtrering og brands ligger her, så parent-temaet kan opdateres uden at vi mister noget.
Author:       habe.dk
Author URI:   https://habe.dk/
Template:     blocksy
Version:      1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.3
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  beautyshop
Domain Path:  /languages
Tags:         e-commerce, block-styles, full-width-template, translation-ready
*/

/*
 * Denne fil indlæses EFTER Blocksys egne stilark (se functions.php), så alt
 * herunder vinder uden !important. Bruger vi !important, bliver vi selv fanget
 * af det næste gang noget skal justeres — derfor er reglen: ingen !important,
 * ret specificiteten i stedet.
 *
 * Siderne bygges i Gutenberg, ikke i en page builder. Derfor rammer vi Gutenbergs
 * egne klasser (.wp-block-*) og WooCommerces markup frem for at opfinde nye
 * wrapper-klasser, som redaktøren alligevel ikke kan sætte i blok-editoren.
 */

:root {
	/*
	 * Egne tokens får beautyshop-præfiks, så de aldrig kolliderer med Blocksys
	 * --theme-* variabler. Blocksy genererer sine ud fra Customizer-indstillinger;
	 * overskriver vi dem her, bliver Customizeren en løgn for redaktøren.
	 */
	/*
	 * HABEs farvepalette, aflæst fra designmanualen (Habe-Logo.pdf, side 3).
	 * Skalaen er kølig og blågrå og har INGEN kulørt accent. Det er et bevidst
	 * valg i identiteten: produktfotos skal bære farven, ikke sitet.
	 *
	 * Navngivet efter ROLLE, ikke efter udseende. Hedder en variabel
	 * --habe-graa-3, skal hver eneste brug rettes den dag tonen justeres.
	 * Hedder den --habe-kant, retter man ét sted.
	 */
	--habe-blaek: #1d1d1b;        /* logoets sort - varm, ikke ren sort */
	--habe-sort: #000000;
	--habe-skifer: #4e535a;       /* sekundær tekst, sidefod */
	--habe-graagroen: #828d92;    /* dæmpet tekst, deaktiveret */
	--habe-graablaa: #aeb9bf;     /* kanter på mørk baggrund */
	--habe-dis: #d4dee2;          /* kanter, skillelinjer */
	--habe-taage: #e9eef1;         /* fladebaggrund bag produktfotos */
	--habe-hvid: #ffffff;

	/* Roller. Ret disse frem for at bruge råfarverne direkte i reglerne. */
	--beautyshop-tekst: var(--habe-blaek);
	--beautyshop-tekst-daempet: var(--habe-skifer);
	--beautyshop-kant: var(--habe-dis);
	--beautyshop-flade: var(--habe-taage);
	/*
	 * Fladen bag et VAREFOTO er hvid, ikke tonet — og det er en anden rolle
	 * end --beautyshop-flade, selvom de ligner hinanden.
	 *
	 * Kataloget blander PNG, JPEG og WebP. En JPEG kan ikke have gennemsigtig
	 * baggrund, så den har altid hvidt bagt ind. Står den på en tonet flade,
	 * tegner der sig et synligt hvidt rektangel midt i feltet, og varen ser ud
	 * som om den er klistret på. Med hvid flade forsvinder overgangen, og de
	 * fritlagte PNG'er ser ud præcis som før.
	 *
	 * Derfor et eget token: kampagne- og heltefelter SKAL blive tonede, og de
	 * må ikke følge med når varefladen ændres.
	 */
	--beautyshop-vareflade: var(--habe-hvid);

	/*
	 * Heroens panel er en GRADIENT i designet, ikke en flad tone, og de tre
	 * stop findes ikke i paletten. De er lysere end --habe-graablaa, og det
	 * er ikke kosmetik: mod den lysere flade giver --habe-skifer 4,52:1 og
	 * består WCAG 1.4.3, hvor den mod --habe-graablaa kun gav 3,87:1. Den
	 * lysere flade er altså dét, der gør designets egen dæmpede tekstfarve
	 * mulig i stedet for at tvinge alting op i næsten-sort.
	 *
	 * Tre tokens og ikke ét: en gradient har ingen mening som enkelt værdi,
	 * og skal den justeres, skal alle tre kunne ses på én gang.
	 */
	--habe-panel-lys: #cdd3d6;
	--habe-panel-mel: #d8dadb;
	--habe-panel-moerk: #bfc7ca;

	--beautyshop-gap-card: 1rem;
	/*
	 * Kvadratiske hjørner. Identiteten er stram og geometrisk - cirklen i
	 * logoet er den eneste runding. Afrundede kort ville modsige den.
	 */
	--beautyshop-radius-card: 0;
	/*
	 * Tilbudsmærket er den ENESTE kulørte flade på sitet. Paletten har ingen
	 * accentfarve, men et tilbud skal kunne ses på et halvt sekund, og en grå
	 * nuance blandt seks andre grå kan det ikke. Rød er derfor bevidst
	 * udenfor paletten - ikke en forglemmelse.
	 */
	--beautyshop-badge-sale-bg: #b3123c;
	--beautyshop-badge-sale-fg: #ffffff;
	--beautyshop-focus-outline: 3px solid currentColor;
}

/*
 * Synligt fokus er et tilgængelighedskrav (WCAG 2.4.7) og fjernes ofte utilsigtet
 * af temaers reset. Vi sætter det eksplicit, så tastaturbrugere kan navigere
 * kassen igennem. :focus-visible frem for :focus, så musebrugere ikke ser ringen.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: var(--beautyshop-focus-outline);
	outline-offset: 2px;
}

/*
 * Produktkort: fast billedforhold forhindrer layoutskift (CLS) når billederne
 * loades dovent. Uden dette hopper hele kataloggrid'et, når hvert billede lander.
 */
.woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	/*
	 * contain, IKKE cover. Billederne fra Rackbeat spænder fra 182x600 til
	 * 5044x5339 - med cover ville de smalle flakoner blive skåret midt over.
	 * contain viser hele varen og lader fladen fylde resten ud.
	 */
	object-fit: contain;
	background: var(--beautyshop-vareflade);
	border-radius: var(--beautyshop-radius-card);
}

/*
 * Prisen skal kunne læses uden at se farven — derfor markeres tilbudsprisen
 * også typografisk, ikke kun med rødt.
 */
.woocommerce ul.products li.product .price ins {
	font-weight: 600;
	text-decoration: none;
}

.woocommerce ul.products li.product .price del {
	opacity: 0.7;
}

/*
 * Respekter brugerens systemvalg. Animationer i galleri og lightbox kan udløse
 * ubehag hos brugere med vestibulære lidelser.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}
}