/*
 Theme Name:   Nordwaystore
 Description:  Child-tema för nordwaystore.se. Innehåller enbart presentation — CSS, egna Bricks-element och rena presentationsfilter. All affärslogik ligger i pluginen nordwaystore-core.
 Author:       Middleout AB
 Template:     bricks
 Version:      1.0.0
 Text Domain:  nordwaystore
*/


/* =========================================================================
   Nordway Store — bas.
   Tokens (--nws-*, --space-*, --text-*) definieras som Bricks-globalvariabler.
   Färger: --nws-green (#BED62F, alltid fyllning med svart text), --nws-black,
   --nws-grey / -grey-line / -grey-soft / -grey-surface, --nws-white, --nws-red
   (bara fel och slut i lager), --nws-trustpilot (bara i deras stjärnor).
   Sajten går kant i kant med fönstret: sektionerna får hela bredden, medan
   INNEHÅLLET hålls kvar på --nws-content-width av containrarna. Bakgrunder,
   avgränsningar och det mörka sidfotsfältet spänner alltså över hela
   fönstret, men texten står kvar på samma måttband som förut.

   Resten av CSS:en ligger delad per yta i assets/css/ och köas i ordning av
   functions.php: header → home → cards → product → archive → footer.
   Allt laddas på alla sidor — uppdelningen är organisering, inte villkorlig
   laddning; mallarna delar klasser (korten, guiden, brödsmulorna).
   ========================================================================= */

body {
	background: var(--nws-white);
}

/*
 * Ytterhöljena spärrar inte längre bredden — det gör containrarna, var för
 * sig (header.css, home.css, footer.css, archive.css). Skillnaden syns på
 * sektioner med egen bakgrund eller underkant: de går nu ut i kanterna i
 * stället för att sluta vid kortet.
 */
#brx-header,
main#brx-content,
#brx-footer {
	background: var(--nws-white);
	width: 100%;
}

/* Hover på gröna knappar. På vitt blir de svarta, men svart mot svart syns
   inte — därför bär varje mörk yta sina egna hover-värden (vit knapp, svart
   text). Ny mörk yta? Lägg till dess klass i listan nedan, inget mer. */
:root {
	--nws-green-hover-bg: var(--nws-black);
	--nws-green-hover-fg: var(--nws-white);
}
.nws-topbar,
.nws-footer,
.nws-b2b__card,
.nws-mega__promo,
.nws-pdp-protocol__card,
.nws-cart-banner,
.nws-side-card__info,
.nws-ghero__feature,
.nws-article__hero,
.nws-article__news,
.nws-mini__head,
.woocommerce-thankyou-order-received {
	--nws-green-hover-bg: var(--nws-white);
	--nws-green-hover-fg: var(--nws-black);
}

/* Samma sak åt andra hållet: svarta knappar blir gröna vid hover, men på en
   grön yta (kampanjbaren, quizrutan, minivarukorgens notis) blir de vita. */
:root {
	--nws-black-hover-bg: var(--nws-green);
	--nws-black-hover-fg: var(--nws-black);
}
.nws-campaign,
.nws-ghero__quiz,
.nws-mini__notice {
	--nws-black-hover-bg: var(--nws-white);
	--nws-black-hover-fg: var(--nws-black);
}

/* Synlig fokusmarkering — samma stil överallt. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--nws-black);
	outline-offset: 2px;
	border-radius: 2px;
}

/* På svarta ytor är konturen grön i stället — svart mot svart syns inte. */
.nws-topbar :focus-visible,
.nws-footer :focus-visible,
.nws-b2b__card :focus-visible,
.nws-mega__promo :focus-visible,
.nws-pdp-protocol__card :focus-visible,
.nws-cart-banner :focus-visible,
.nws-article__hero :focus-visible,
.nws-article__news :focus-visible {
	outline-color: var(--nws-green);
}

/* Respektera minskad rörelse. */
@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;
	}
}

/* Tightare tracking på display-text utanför rubriktaggarna.
   Härledning: typskalan stramas åt med −0.005em per skalsteg över text-m,
   samma regel som h1 (−0.025) … h4 (−0.01) i theme stylen. */
.nws-b2b__title { letter-spacing: -0.015em; }
.nws-card__price .woocommerce-Price-amount,
.nws-mega__promo-title,
.nws-b2b__stat-value { letter-spacing: -0.01em; }

/* Brödsmulor — delas med arkiv och sök. */
.nws-crumbs > .brxe-container { padding: 2rem var(--nws-gutter) 1.2rem; }

/* Mobil: samma 1,6 rem-kant som headerns rader och arkivets innehåll —
   56 px-guttern åt annars upp en tredjedel av skärmen. */
@media (max-width: 767px) {
	.nws-crumbs > .brxe-container { padding: 1.4rem 1.6rem 0.8rem; }
}

/* Mobil: hela rem-typografin ett snäpp ner. Bricks sätter roten till 62,5 %
   (1rem = 10px); 59 % ger 1rem = 9,44px, dvs. ~6 % mindre överallt —
   17px brödtext blir 16, 21px korttitel blir ~20. html:root behövs för att
   gå över Bricks theme style-regel med ren specificitet, utan !important.
   Fluid-skalorna (text- och space-variablerna) är px-baserade och rörs inte.
   OBS: skriv aldrig "--x-*" följt av snedstreck i CSS-kommentarer — en
   asterisk+snedstreck stänger kommentaren och käkar nästa regelblock. */
@media (max-width: 767px) {
	html:root { font-size: 59%; }
}
.nws-crumbs nav > .navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 1.5rem;
	color: var(--nws-grey);
}
.nws-crumbs nav a { color: var(--nws-grey); }
.nws-crumbs nav a:hover { color: var(--nws-black); }
.nws-crumbs nav .separator::before { content: '/'; color: var(--nws-grey); }

/* =========================================================================
   Sektionsrytm (2026-09-18)

   Konventionen: en vanlig sektion bär sin luft NEDÅT (padding-bottom
   --space-xl på containern) och ingen uppåt — avståndet mellan två vita
   sektioner blir alltid ett --space-xl. Band med egen bakgrund (hero,
   USP-raden, Trustpilot-raden, varumärkesbandet) bär luften inuti bandet,
   så sektionen som följer ett band måste själv sätta luft uppåt. Det görs
   här på ett ställe, i stället för i varje sektions egen regel.

   Efter brödsmulorna får första sektionen samma lilla avstånd överallt:
   produktsida, arkiv, sida, undersida, guider och artikel.
   ========================================================================= */
.nws-crumbs + .brxe-section > .brxe-container { padding-top: 1.2rem; }
:is(.nws-hero, .nws-usps, .nws-trustrow, .nws-brandband) + .brxe-section > .brxe-container { padding-top: var(--space-xl); }