/*
Theme Name: FireAndFlames
Template: hello-elementor
Version: 1.0
Description: Barnetema til fireandflames.dk. Indeholder kun WooCommerce-tilpasninger
der ikke hoerer hjemme i Elementor.
*/

/*
 * Globale styles (opgave 14) — de to farvebrug WooCommerce/Elementor ikke
 * selv styrer via Site Settings' globale farver, fundet ved at aflaese
 * produktionens (Riode) faktiske computed styles:
 *
 *   --wp--preset--color--primary   #c9511d  (samme som Elementors globale
 *                                            "Primary" — knappen "Laeg i
 *                                            kurv" arver allerede denne via
 *                                            WordPress' egne preset-farver,
 *                                            delt mellem produktion og
 *                                            staging)
 *   --wp--preset--color--secondary #fec348  (Elementors globale "Secondary")
 *
 * WooCommerce's eget kerne-.price-selektor bruger IKKE preset-farven, men
 * sit eget fald-tilbage-tema (#958e09) — derfor den eneste regel herunder
 * der reelt mangler. Samme specificitet som WooCommerce'egen regel
 * (":where()" taeller 0), saa !important sikrer den vinder uafhaengigt af
 * indlaesningsraekkefoelge — samme moenster som produktionens egen
 * Additional CSS brugte konsekvent.
 *
 * To selektorer, fordi WooCommerce bruger to forskellige opmaerkninger:
 * `div.product` paa selve varesiden, men `li.product` (ikke en div) i
 * butiksgitteret/produktkarrusellen — bekraeftet ved at proeven paa
 * varesiden virkede foerste gang, men gitteret stadig viste #958e09.
 */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	color: #fec348 !important;
}

/*
 * Linkfarve ved hover/fokus. Riode-produktionen satte dette via
 * `a:hover, a:focus { color: var(--rio-primary-color) }` — samme mekanisme
 * findes ikke i Elementor/hello-elementor, saa den porteres direkte.
 */
a:hover,
a:focus {
	color: #c9511d;
}

/*
 * Prisens vaegt og stoerrelse (1. august 2026). Farven #fec348 var allerede
 * portet ovenfor, men vaegten var ikke, saa prisen stod 20px/400 mod
 * produktionens 30px/700. Maalt paa produktionens computed styles:
 *
 *   varesiden      30px / 700
 *   produktkortet  16px / 600
 *
 * Bemaerk: #fec348 mod hvid giver 1,60:1, hvilket ikke opfylder WCAG AA.
 * Det gaelder ogsaa produktionen i dag. Vi genskaber den her frem for at
 * aendre kundens prisfarve paa eget initiativ. Se noten om designafvigelser.
 */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 30px;
	font-weight: 700;
}

.woocommerce ul.products li.product .price {
	font-size: 16px;
	font-weight: 600;
}

/* ==========================================================================
   Tilgaengelighed, 2. august 2026
   ========================================================================== */

/*
 * Synlig fokusmarkering.
 *
 * Maalt foer: nul af 24 testede elementer viste hvor tastaturet stod, hverken
 * i menuen eller i hele kassen. Det er WCAG 2.4.7 og en reel spaerre for alle
 * der ikke bruger mus.
 *
 * Brandorangen giver 4,49:1 mod hvid og 4,68:1 mod den sorte header, altsaa
 * over kravet paa 3:1 for brugerfladeelementer begge steder. Afstanden paa
 * 2 px sikrer at ringen kan ses ogsaa paa farvede knapper.
 */
/* Bemaerk: IKKE :where(). Den giver nul specificitet, og saa vinder enhver
   regel der saetter outline: none. Selektorerne staar derfor eksplicit, og
   !important sikrer at markeringen ikke kan slaas fra af tema eller plugin. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
	outline: 3px solid #c9511d !important;
	outline-offset: 2px !important;
	border-radius: 2px;
}

/* Aeldre browsere uden :focus-visible skal ikke staa helt uden markering. */
@supports not selector(:focus-visible) {
	a:focus, button:focus, input:focus, select:focus, textarea:focus {
		outline: 3px solid #c9511d !important;
		outline-offset: 2px !important;
	}
}

/*
 * Knapper: hvid tekst paa #c9511d gav 4,49:1, en hundrededel under kravet paa
 * 4,5:1. #c04e1c giver 4,83:1 og er visuelt ikke til at skelne fra brandfarven.
 * Kun baggrunden paa knapper aendres, ikke brandfarven i oevrigt.
 */
/*
 * Knapper skal se ens ud uanset hvor de renderes.
 *
 * Paa /produkter/ tegner Elementors produktwidget knapperne og giver dem hvid
 * tekst. Paa sider hvor produkterne kommer fra en kortkode, f.eks. Fragtpriser,
 * renderer WooCommerce dem selv, og saa vinder woocommerce.css med sin egen
 * graa #515151. Resultatet var graa tekst paa orange, 2,44:1, paa nogle sider
 * og hvid tekst paa andre.
 *
 * Derfor saettes BAADE farve, baggrund og stoerrelse her, og bredt nok til at
 * daekke begge veje. min-height 44 px opfylder samtidig kravet til klikflade.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.single_add_to_cart_button,
.woocommerce #place_order,
.woocommerce ul.products li.product a.button,
.woocommerce .add_to_cart_button,
.elementor-button {
	background-color: #c04e1c;
	color: #ffffff;
	border: 0;
	border-radius: 3px;
	font-weight: 600;
	line-height: 1.2;
	padding: 12px 22px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce #place_order:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce .add_to_cart_button:hover,
.elementor-button:hover {
	background-color: #a84316;
	color: #ffffff;
}

/* Respektér brugere der har slaaet bevaegelse fra i deres styresystem. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/*
 * Kontaktformularens send-knap.
 *
 * Hello Elementors reset.css giver [type="submit"] farven #c36, en pladsholder
 * temaet forventer at man overskriver. Den slog igennem paa Kontakt os, hvor
 * Send-knappen stod gennemsigtig med lyserød tekst og lyserød kant.
 *
 * Vi giver den sitets egen knapstil, saa den ligner alt andet man klikker paa.
 * Farven foelger designskabelonen: #c04e1c giver 4,83:1 med hvid tekst.
 */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
.wpcf7-form-control.wpcf7-submit {
	background-color: #c04e1c;
	color: #ffffff;
	border: 0;
	border-radius: 3px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	padding: 12px 28px;
	min-height: 44px;
	cursor: pointer;
	transition: background-color .15s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover,
.wpcf7-form-control.wpcf7-submit:hover {
	background-color: #a8431a;
}

/* Mens beskeden sendes, saa kunden kan se der sker noget. */
.wpcf7 input[type="submit"]:disabled,
.wpcf7-form-control.wpcf7-submit:disabled {
	background-color: #a8431a;
	opacity: .7;
	cursor: wait;
}

/* --------------------------------------------------------------------------
   Kategoritekst under produkterne paa /shop/bioethanol/

   Teksten kommer fra selve kategorien og udskrives af [faf_kategoritekst].
   Den arvede Elementors arkivtypografi, som gav 32 px overskrifter (skalaen
   siger 24 til sektionsoverskrifter), fuld sidebredde paa broedtekst, og links
   der kun var markeret med farve. Det sidste er baade et laesbarhedsproblem og
   WCAG 1.4.1: farve alene maa ikke vaere eneste signal.
   -------------------------------------------------------------------------- */
.faf-kategoritekst {
	max-width: 72ch;
	color: #333;
}

.faf-kategoritekst h2 {
	font-size: 24px;
	line-height: 1.3;
	margin: 32px 0 8px;
	color: #333;
}

.faf-kategoritekst h2:first-child {
	margin-top: 0;
}

.faf-kategoritekst p,
.faf-kategoritekst li {
	font-size: 16px;
	line-height: 1.6;
}

.faf-kategoritekst ul {
	margin: 0 0 16px 20px;
	list-style: disc;
}

.faf-kategoritekst a {
	color: #b8491a;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.faf-kategoritekst a:hover,
.faf-kategoritekst a:focus-visible {
	color: #8f3814;
}