/*
Theme Name: Mainosmatto
Theme URI: https://www.mainosmatto.com/
Author: TETRIX
Author URI: https://tetrix.fi/
Description: Block theme for mainosmatto.com. Built to replace Avada 7.10.1 after
  the 2026 migration to srv01. Three language versions (fi/sv/en) live as plain
  pages; no multilingual plugin. hreflang is emitted by the mainosmatto-hreflang
  mu-plugin from a slug manifest.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mainosmatto
Tags: block-theme, business, full-site-editing
*/

/* ==========================================================================
   Sidfot — blått band, fyra kolumner.
   Färger och typografi ur Avadas dynamiska CSS, se docs/DESIGN.md.
   ========================================================================== */

.mm-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

@media (max-width: 900px) {
	.mm-footer__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
	.mm-footer__cols { grid-template-columns: 1fr; }
}

.mm-footer__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;               /* --footer_headings_typography-font-size: 1.55em @ 14px */
	font-weight: 700;
	line-height: 2em;              /* --footer_headings_typography-line-height */
	color: #ffffff;
	margin: 0 0 10px;
}

.mm-footer__cols p,
.mm-footer__list {
	margin: 0 0 15px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}

.mm-footer__list { list-style: none; padding: 0; }

.mm-footer__item::before {
	content: "\00bb";              /* originalet satte » före varje sidfotslänk */
	margin-right: 0.5em;
	opacity: 0.7;
}

.mm-footer__social::before { content: none; }

.mm-footer a { color: #ffffff; text-decoration: none; }
.mm-footer a:hover,
.mm-footer a:focus-visible { text-decoration: underline; }

/* Sociala ikoner i naturlig storlek (63x86 / 64x86), sida vid sida.
   Originalet renderar dem i full storlek utan texetikett — ordmarket star
   i bildfilen. Tidigare tvingade vi in dem i 24x24, vilket bade krympte
   och forvrangde dem. */
.mm-footer__social {
	display: inline-block;
	margin-right: 12px;
}

.mm-footer__social a { display: inline-block; }

.mm-footer__social img {
	width: auto;
	height: auto;
	max-width: 100%;
	display: block;
}

.mm-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	padding-top: 20px;
	opacity: 0.85;
}

/* ==========================================================================
   Sidhuvud
   ========================================================================== */

.wp-block-site-logo img { max-height: 50px; width: auto; }   /* originalets max-height:50px */

/* ==========================================================================
   Hero — centrerad rubrik, ingress, prickad avdelare, centrerad knapp.
   Läggs på en grupp med klassen is-style-mm-hero.
   ========================================================================== */

.is-style-mm-hero { text-align: center; }

.is-style-mm-hero > * { margin-left: auto; margin-right: auto; }

.is-style-mm-hero .wp-block-separator {
	border: 0;
	border-top: 2px dotted var(--wp--preset--color--primary);
	width: 90px;
	opacity: 1;
	margin: 30px auto;
}

.is-style-mm-hero .wp-block-buttons { justify-content: center; }

/* ==========================================================================
   Sektionsband — helbreddsbakgrund, växlande vitt och grått.
   ========================================================================== */

.is-style-mm-band-white,
.is-style-mm-band-grey {
	padding-block: 60px;
}

.is-style-mm-band-white { background: var(--wp--preset--color--base); }
.is-style-mm-band-grey  { background: var(--wp--preset--color--surface); }

/* ==========================================================================
   Produkt- och top-seller-kort
   ========================================================================== */

/* Kortrad — jamnhoga kolumner. Antalet kolumner styrs av markupen:
   tre pa startsidorna, tva pa produktoversikterna. */
.is-style-mm-cards {
	align-items: stretch;
	gap: 30px;
}

/* Core ger .alignwide/.is-layout-constrained > * sin max-width; den har
   selektorn ar mer specifik och vinner utan !important. 877 px ar
   originalets 1_4 x 3 = 75 % av 1170 px — och galler DARFOR bara raden
   med tre kort, alltsa startsidans. Produktoversikten har fyra kort i
   full sidbredd, precis som originalets 1_4-kolumner. */
.is-layout-constrained > .wp-block-columns.is-style-mm-cards:has(> .wp-block-column[style*="33.33"]) {
	max-width: 877px;
	margin-inline: auto;
}

/* Produktoversikten: fyra kort i bredd. Sista raden har tva kort och ska
   behalla kortbredden i stallet for att spanna ut sig over halva sidan. */
.is-style-mm-cards:has(> .wp-block-column[style*="25%"]) {
	flex-wrap: wrap;
}

.is-style-mm-cards:has(> .wp-block-column[style*="25%"]) > .wp-block-column {
	flex: 0 1 calc(25% - 22.5px);
	min-width: 0;
}

@media (max-width: 980px) {
	.is-style-mm-cards:has(> .wp-block-column[style*="25%"]) > .wp-block-column {
		flex-basis: calc(50% - 15px);
	}
}

/* Tre i rad fran 782 px, som core. Explicit sa raden aldrig kollapsar
   av en arvd flex-wrap nagon annanstans ifran. */
@media (min-width: 782px) {
	.is-style-mm-cards { flex-wrap: nowrap; }
	.is-style-mm-cards > .wp-block-column { flex: 1 1 0; min-width: 0; }
}

.is-style-mm-cards > .wp-block-column { display: flex; flex-direction: column; }

@media (max-width: 780px) {
	.is-style-mm-cards { gap: 15px; }
}

.is-style-mm-card {
	background: #ffffff;
	height: 100%;
	display: flex;
	flex-direction: column;
	text-align: left;          /* originalet vansterstaller korttexten */
}


.is-style-mm-card img { width: 100%; height: auto; display: block; }

.is-style-mm-card h2,
.is-style-mm-card h3 {
	font-size: var(--wp--preset--font-size--large);
	margin: 15px 0 10px;
}

.is-style-mm-card h2 a,
.is-style-mm-card h3 a { color: var(--wp--preset--color--heading); }

.is-style-mm-card h2 a:hover,
.is-style-mm-card h3 a:hover { color: var(--wp--preset--color--primary); }

.is-style-mm-card ul {
	margin: 0 0 15px;
	padding-left: 1.2em;
}

.is-style-mm-card .mm-price {
	margin-top: auto;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--primary);
}

/* Priset står som <p class="mm-price"> i sidinnehållet sedan tidigare. */
.mm-price strong { font-weight: 700; }

/* ==========================================================================
   Kontaktbandet på startsidorna — soita.jpg som bakgrund.
   ========================================================================== */

.is-style-mm-contact-band {
	position: relative;
	background-image: url("/wp-content/uploads/2019/10/soita.jpg");
	background-size: cover;
	background-position: center;
	color: #ffffff;
	padding-block: 90px;
	text-align: center;
}

.is-style-mm-contact-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(2, 118, 184, 0.75);   /* #0276b8, sidfotsbandets blå */
}

.is-style-mm-contact-band > * { position: relative; }

.is-style-mm-contact-band :is(h1, h2, h3, p, a) { color: #ffffff; }

/* ==========================================================================
   Menyn
   ========================================================================== */

.wp-block-navigation a:hover { color: #3a4149; }   /* --menu_hover_first_color */

/* Sprakvaxlaren.

   Originalet har PA SVENSKA / IN ENGLISH / SUOMEKSI som knappar i huvudmenyn:
   li.fusion-menu-item-button > a > span.menu-text.fusion-button.button-default.button-medium.
   Bada knapparna ar identiska — det finns ingen fylld/ram-uppdelning i kallan.
   Bara de tva andra spraken visas; det aktuella har ingen knapp.

   Varden ur root-vars.txt: --button_font_size 13px, --button_line_height 16px,
   --button_padding 11px/23px, --button_text_transform uppercase,
   --button_accent_color #ffffff, --button_border_width 1px,
   --button_border_color #ffffff. Bakgrunden ar sidornas egen overskrivning
   av --button_gradient_top_color till #00a6dc, se Farger ovan. */

.mm-lang { display: inline-flex; align-items: center; gap: 10px; }

.mm-lang__btn {
	display: inline-block;
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--button);
	font-size: 13px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 11px 23px;
	transition: background-color 0.2s, color 0.2s;
	white-space: nowrap;
}

.mm-lang__btn:hover,
.mm-lang__btn:focus-visible {
	background: #ffffff;
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* Kortform pa mobil. Brytpunkten ar 600 px darfor att det ar dar core later
   navigationens overlayMenu="mobile" ta over — hamburgaren och kortformen
   slar om i samma andetag. Fulla etiketterna ryms inte: tva knappar med
   nowrap och 46 px padding blir bredare an innehallsytan (viewport − 60 px). */
.mm-lang__code { display: none; }

@media (max-width: 599px) {
	.mm-lang { gap: 8px; }
	.mm-lang__full { display: none; }
	.mm-lang__code { display: inline; }
	.mm-lang__btn { padding: 11px 14px; }
}


/* ==========================================================================
   Stilar for markupen som faktiskt finns i sidinnehallet i dag.
   Innehallet rors inte, sa detta far fasta i kartan som redan ar ritad:
   wp:columns pa produkt- och oversiktssidor, listor, priser, bilder.
   ========================================================================== */

/* Priset — enda mm-klassen som redan star i innehallet, 30 forekomster. */
.mm-price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--primary);
}

/* Produktoversikternas kort ar wp:columns med bild, rubrik som lank och pris. */
.wp-block-columns .wp-block-column > .wp-block-image { margin-bottom: 15px; }
.is-style-mm-card > .wp-block-image:first-child { margin-top: 0; }

.wp-block-columns h2 a,
.wp-block-columns h3 a { color: var(--wp--preset--color--heading); }

.wp-block-columns h2 a:hover,
.wp-block-columns h3 a:hover { color: var(--wp--preset--color--primary); }

/* Galleriet och bilderna behaller originalets fyrkantiga horn. */
.wp-block-image img,
.wp-block-gallery img { border-radius: 0; }

.wp-block-image figcaption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* Avdelaren mellan avsnitt — originalets prickade linje. */
.wp-block-separator {
	border: 0;
	border-top: 2px dotted var(--wp--preset--color--primary);
	width: 90px;
	opacity: 1;
	margin-inline: auto;
}

/* Offertformularet arver temats knapp- och faltfarger. */
.tof-form input[type="submit"],
.tof-form button[type="submit"] {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	border: 1px solid var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--button);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 11px 23px;
	cursor: pointer;
}

.tof-form input[type="submit"]:hover,
.tof-form button[type="submit"]:hover {
	background: #ffffff;
	color: var(--wp--preset--color--primary);
}

.tof-fieldset legend {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--heading);
}


/* ==========================================================================
   Originalets matt och rytm. Sektionerna har 0/0 i padding; rytmen kommer
   ur elementens egna marginaler, precis som i Avada.
   ========================================================================== */

.is-style-mm-band-white,
.is-style-mm-band-grey {
	padding-block: 0;
}

/* Smal textkolumn - originalets 3_5 av 1170 px. */
.is-style-mm-narrow > :where(*) {
	max-width: 700px;
	margin-inline: auto;
}

/* Rubrikmarginaler ur --hN_typography-margin-top/bottom. */
:where(.entry-content) h1 { margin-block: 0.40em; }
:where(.entry-content) h2 { margin-block: 0.40em; }
:where(.entry-content) h3 { margin-block: 0.43em; }
:where(.entry-content) h4 { margin-block: 0.55em; }

/* Avdelaren: Avadas .fusion-separator har margin 40px 0. */
.wp-block-separator { margin-block: 40px; }

/* Sidfotens topp-padding ned till originalets 35 px. */
.mm-footer { padding-top: 35px !important; }

/* Heroets lilla sparrade rad ovanfor rubriken. */
.mm-eyebrow {
	font-size: 14px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #7fd4f0;
	margin-bottom: 0;
}



/* ==========================================================================
   Dekor ur originalet, uppmatt 24.8.2026 med DevTools mot den LEVANDE sajten
   (crawlen fran 21.8 ar aldre och saknar bl.a. rubriken "Top sellers").
   Varje varde har en rad i docs/DESIGN.md med selektor och property.
   Inga tredjepartsberoenden: ingen ikonfont, ingen Avada, ingen licens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Flytande rubrikskala — Avadas egen formel, utan Avada.

   .fusion-responsive-typography-calculated i fusion-dynamic.css:
     font-size = F - s(F - Fmin) + s(F - Fmin) * (100vw - Vmin) / (Vmax - Vmin)
   med  F    = --mm-fs                (elementets --fontSize)
        s    = 0.81                   (--typography_sensitivity)
        Fmin = 1.50 * 14 = 21         (--typography_factor * --base-font-size)
        Vmin = 360, Vmax = 1600       (--grid_main_break_point)

   Kontrollerad mot originalet vid 1106 px: F=77 ger 58.93 px och F=130 ger
   94.83 px — bada exakt vad DevTools visar. Anvands dar vi satter ny
   displaytext; de befintliga rubrikstorlekarna ar ororda i den har omgangen.
   -------------------------------------------------------------------------- */

.mm-fluid {
	--mm-fs-min:  calc((var(--mm-fs) - 0.81 * (var(--mm-fs) - 21)) * 1px);
	--mm-fs-max:  calc(var(--mm-fs) * 1px);
	--mm-fs-grow: calc(0.81 * (var(--mm-fs) - 21) * (100vw - 360px) / 1240);
	font-size: clamp(var(--mm-fs-min),
	                 calc(var(--mm-fs-min) + var(--mm-fs-grow)),
	                 var(--mm-fs-max));
}

/* --------------------------------------------------------------------------
   ••• — avdelaren under rubriken.

   Originalet ritar Font Awesomes fa-ellipsis-h (U+F141, fas) i 14 px, #000,
   centrerad. Tva forekomster pa startsidan: under S1-rubriken och under
   leveransikonens bildtext. Aterskapad som tre CSS-cirklar — geometrin foljer
   ikonens egen (cx 64/224/384, r 48 i en 448-bred ruta, skalat till 14 px).
   -------------------------------------------------------------------------- */

.mm-dots::after {
	content: "";
	display: block;
	width: 14px;
	height: 3px;
	margin: 0.9em auto 0;
	background-image:
		radial-gradient(circle at 2px  50%, #000 0 1.5px, transparent 1.5px),
		radial-gradient(circle at 7px  50%, #000 0 1.5px, transparent 1.5px),
		radial-gradient(circle at 12px 50%, #000 0 1.5px, transparent 1.5px);
	background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   S1 — markesbilden och leveransikonen centrerade.

   Originalet centrerar bada i sin 3_5-kolumn; vara figurer lag vansterstallda
   eftersom .wp-block-image arver text-align fran gruppen.
   -------------------------------------------------------------------------- */

.is-style-mm-band-grey .wp-block-image,
.is-style-mm-band-white .wp-block-image { text-align: center; }
.is-style-mm-band-grey .wp-block-image img,
.is-style-mm-band-white .wp-block-image img { margin-inline: auto; }

/* Kortens bilder ska daremot fylla kortet, inte centreras som en ikon. */
.is-style-mm-card .wp-block-image img { margin-inline: 0; width: 100%; }

/* Leveransikonens bildtext: originalet har 12pt (16 px), #000000, centrerad,
   tatt under ikonen, med forsta ordet i fetstil. Var generella figcaption ar
   13 px och --muted; den galler fortfarande overallt annars. */
.mm-delivery figcaption {
	font-size: 16px;
	color: var(--wp--preset--color--contrast);
	text-align: center;
	margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Heroets hojd.

   Originalets Fusion Slider mater 715 px i en 805 px hog vy med 90 px
   sidhuvud — 100vh MINUS headern, inte 100vh. Med 100vh hamnar scrollpilen
   precis under vikningen och gor ingen nytta. Blocket skriver
   min-height:100vh inline, sa overstyrningen kraver !important.
   -------------------------------------------------------------------------- */

:where(.entry-content) > .wp-block-cover:first-child {
	min-height: calc(100vh - 90px) !important;
}

/* --------------------------------------------------------------------------
   Heroet — scrollpilen.

   Originalet: .tfs-scroll-down-indicator, en lank med en chevron i awb-icons,
   40 px, #ffffff, 25 px fran nederkanten, centrerad. Ingen animation
   (animation: none i Computed). Aterskapad som en ren CSS-chevron.
   -------------------------------------------------------------------------- */

:where(.entry-content) .wp-block-cover::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 25px;
	width: 22px;
	height: 22px;
	transform: translateX(-50%) rotate(45deg);
	border-right: 3px solid #ffffff;
	border-bottom: 3px solid #ffffff;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Kontaktbandet.

   Originalet: bakgrund soita.jpg (cover, center) pa #eeeeee, INGEN
   fargoverlay — filen bar sin egen cyan-till-bla gradient. Overst ett
   triangelurtag i vitt, 99 px hogt: fusion-section-separator bigtriangle,
   SVG-banan "M-1 -1 L50 99 L101 -1 Z" i en 0 0 100 100-vy med
   preserveAspectRatio="none".
   -------------------------------------------------------------------------- */

.is-style-mm-contact-band {
	position: relative;
	background-image: url("/wp-content/uploads/2019/10/soita.jpg");
	background-size: cover;
	background-position: center;
	background-color: var(--wp--preset--color--surface);
	color: #ffffff;
	text-align: center;
	/* Padding kommer ur blockets egna varden: 99 px topp (plats for urtaget)
	   och 5 % botten, samma 5 % som originalets --awb-padding-bottom. */
}

/* Overlayen finns INTE i originalet. Den behalls anda, men sankt fran 75 %
   till 40 %: soita.jpg ar sa ljus i vanstra halvan att originalets vita
   rubrik nastan inte gar att lasa dar. 40 % later fotot synas och haller
   rubriken lasbar. Medveten avvikelse — se docs/DESIGN.md. */
.is-style-mm-contact-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(2, 118, 184, 0.40);
}

/* Triangelurtaget. Ritas efter ::before sa det ligger over overlayen. */
.is-style-mm-contact-band::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 99px;
	background: var(--wp--preset--color--base);
	clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.is-style-mm-contact-band > * { position: relative; z-index: 1; }

.is-style-mm-contact-band :is(h1, h2, h3, p, a) { color: #ffffff; }

/* Eyebrow: Barlow 22 px, 400, letter-spacing 4px, line-height 18px, marginal 0.
   60 px topp ar originalets --awb-margin-top pa innehallskolumnen. */
.mm-band__eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 22px;
	line-height: 18px;
	font-weight: 400;
	letter-spacing: 4px;
	margin: 60px 0 0;
}

/* Jatterubriken: Barlow Condensed 700, --fontSize 130, line-height 1,
   marginal 10px 0 30px. 130 px vid >=1600 px bred vy, 41.7 px vid 360 px. */
.mm-band__title {
	/* Samma varde som presetet 'display' i theme.json (F=130). Ett stalle. */
	font-size: var(--wp--preset--font-size--display);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	line-height: 1;
	margin: 10px 0 30px;
}

/* 60 px botten pa innehallskolumnen, samma --awb-margin-bottom som toppen. */
.is-style-mm-contact-band .wp-block-buttons { margin-bottom: 60px; }

/* Ramknappen: #008fc4 med 1 px vit ram, Oswald 18/21, 500, letter-spacing 1px,
   padding 17/40, radie 2 px, overgang 0.2 s. Vid hover vit botten med
   #00a6dc text, samma vandning som temats ovriga knappar. */
.is-style-mm-btn-outline > .wp-block-button__link {
	background-color: #008fc4;
	color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--button);
	font-size: 18px;
	line-height: 21px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 17px 40px;
	transition: background-color 0.2s, color 0.2s;
}

.is-style-mm-btn-outline > .wp-block-button__link:hover,
.is-style-mm-btn-outline > .wp-block-button__link:focus-visible {
	background-color: #ffffff;
	color: var(--wp--preset--color--primary);
}

/* --------------------------------------------------------------------------
   Inzoomningen som originalet gjorde med Avadas JS.

   Kontaktbandets innehallskolumn bar data-animationType="fadeIn",
   data-animationDuration="1.0", data-animationOffset="top-into-view".
   Aterskapad med IntersectionObserver + @keyframes i stallet for Fusion
   Builders JS. Utan JS syns innehallet direkt: opaciteten sanks forst av
   skriptet, sa en besokare utan JS ser bandet som vanligt.
   -------------------------------------------------------------------------- */

@keyframes mm-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
	.mm-reveal { opacity: 0; }
	.mm-reveal.is-visible { animation: mm-fade-in 1s ease both; }
}

/* ==========================================================================
   Sticky header.

   Originalet har `fusion-sticky-header` pa body, men ocksa
   `no-tablet-sticky-header` och `no-mobile-sticky-header` — sticky galler
   alltsa bara over headerns brytpunkt, 1408 px. Samma villkor har, annars
   far vi ett beteende originalet inte har pa smala skarmar.

   Originalet loser det med position:fixed + ett tomt hojdelement
   (.fusion-header-sticky-height) som jQuery sticky-kit visar nar headern
   lyfter. position:sticky ger samma effekt utan bade skript och spacer.

   Varden: --header_sticky_bg_color #ffffff, z-index 210, och skuggan
   rgba(0,0,0,.117647) 0 1px 3px ur .fusion-is-sticky .fusion-sticky-shadow.
   Kroppen bar avada-header-shadow-yes, sa skuggan ligger pa hela tiden.
   -------------------------------------------------------------------------- */

@media (min-width: 1409px) {
	.wp-site-blocks > header {
		position: sticky;
		top: 0;
		z-index: 210;
		background: #ffffff;
		box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 3px;
	}
}

/* ==========================================================================
   Vertikal rytm.

   Originalet satter `margin: 0 0 20px` pa varje textblock — 20 px mellan
   block, rakt igenom. Rubrikerna ar dar inga egna element utan en fet forsta
   rad inuti samma <p>, sa rubrik och brodtext sitter ihop utan glapp och
   luften hamnar mellan avsnitten.

   Vi har riktiga rubriker och maste alltsa aterskapa samma intryck med
   marginaler: 20 px mellan block, mer luft OVANFOR en rubrik och nastan
   ingen under den. Tidigare lag allt pa 15 px rakt igenom, aven runt
   rubriker, vilket gjorde att avsnitten inte separerade alls.
   -------------------------------------------------------------------------- */

.entry-content > * + * { margin-block-start: 20px; }

.entry-content :is(h2, h3, h4) {
	margin-block-start: 34px;
	margin-block-end: 4px;
}

/* Rubriken hor ihop med stycket direkt under — samma glapp som inuti
   originalets <p>. */
.entry-content :is(h2, h3, h4) + * { margin-block-start: 4px; }

.entry-content > h1 { margin-block-start: 0; margin-block-end: 8px; }
.entry-content > h1 + * { margin-block-start: 8px; }

/* Ett band som byter bakgrund ska inte ocksa fa 20 px ovanfor sig —
   bandets egen padding ar luften dar. */
.entry-content > .wp-block-group.alignfull + .wp-block-group.alignfull { margin-block-start: 0; }

/* ==========================================================================
   Banden: marginalkollaps och radlangd.

   1. Banden har padding-block: 0 (originalets varde). En rubrik som ar
      forsta barnet far da sin toppmarginal kollapsad ut genom bandets
      overkant, sa rubriken klistrar sig mot fargskiftet. `flow-root`
      skapar en egen blockformateringskontext och stoppar kollapsen utan
      att lagga till padding som originalet inte har.

   2. Radlangden. Originalets innehallssidor haller texten i en 1_2- eller
      3_5-kolumn — 585 till 700 px. Var text lopte over hela 1170 px,
      alltsa nastan dubbelt sa langa rader som originalet.
   -------------------------------------------------------------------------- */

.is-style-mm-band-white,
.is-style-mm-band-grey {
	display: flow-root;
}

.is-style-mm-band-white > :is(p, ul, ol, h1, h2, h3, h4, figure),
.is-style-mm-band-grey > :is(p, ul, ol, h1, h2, h3, h4, figure) {
	max-width: 700px;
	margin-inline: auto;
}

/* Kortraderna ar undantagna — de ska ligga i full sidbredd. */
.is-style-mm-band-white > .wp-block-columns,
.is-style-mm-band-grey > .wp-block-columns {
	max-width: none;
}

/* Forsta och sista elementet i ett band ska inte trycka mot fargskiftet. */
.is-style-mm-band-white > :first-child,
.is-style-mm-band-grey > :first-child { margin-block-start: 20px; }

.is-style-mm-band-white > :last-child,
.is-style-mm-band-grey > :last-child { margin-block-end: 20px; }

/* Sidrubriken ska sta i samma textkolumn som brodtexten. */
.entry-content > :is(h1, h2, h3, p, ul, ol) {
	max-width: 700px;
	margin-inline: auto;
}

/* Keyframes ur Avadas stylesheet, ordagrant. Se assets/js/reveal.js. */
@keyframes mm-fade-in-down {
	0%   { opacity: 0; transform: translateY(-20px); }
	100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
	.mm-reveal--down.is-visible { animation: mm-fade-in-down 1s ease both; }
	.mm-reveal--in.is-visible   { animation: mm-fade-in 1s ease both; }
}

/* ==========================================================================
   Omgang 4 — meny, kort, ikoner, hero. Varden ur originalet 24.8.2026.
   ========================================================================== */

/* Menyavstandet. --nav_padding: 62px i fusion-dynamic.css, applicerat som
   calc(var(--nav_padding)/2) pa vardera sidan — 31 px per sida, alltsa
   62 px mellan tva poster. Vi lag pa temats standard. */
.wp-block-navigation .wp-block-navigation-item > a {
	padding-inline: 31px;
}

.wp-block-navigation .wp-block-navigation__container { gap: 0; }

/* OSTA-etiketten pa TUOTTEET. Originalet:
   <span class="fusion-menu-highlight-label" style="border-color:#0288cc;color:#0288cc">OSTA</span>
   med padding .35em .55em, line-height 1, margin-left .75em, font-size .7em,
   border .1em solid, radie 3px (--main_nav_highlight_radius). */
.mm-menu-badge {
	display: inline-block;
	margin-left: 0.75em;
	padding: 0.35em 0.55em;
	font-size: 0.7em;
	line-height: 1;
	border: 0.1em solid #0288cc;
	border-radius: 3px;
	color: #0288cc;
	vertical-align: middle;
}

/* ==========================================================================
   Korten
   ========================================================================== */

/* Originalets kort har INGEN egen bakgrund — de ligger direkt mot sidans
   bakgrund. Var vita platta pa ett gratt band gjorde att korten sag ut som
   losa rutor. Enda bakgrundsfargen i originalets produktoversikt ar
   kontaktbandets #0276b8. */
.is-style-mm-card { background: transparent; }

/* Zoom vid hover — men bara pa produktoversikten. Originalet har
   hover-type-zoomin pa oversiktens sex produktbilder och hover-type-none
   pa startsidans kort.
   .hover-type-zoomin img       { opacity:1; transition: opacity 1s, transform 1s }
   .hover-type-zoomin:hover img { opacity:.9; transform: scale3d(1.1,1.1,1) } */
.is-style-mm-cards:has(> .wp-block-column[style*="25%"]) .wp-block-image {
	overflow: hidden;
}

.is-style-mm-cards:has(> .wp-block-column[style*="25%"]) .wp-block-image img {
	opacity: 1;
	transition: opacity 1s, transform 1s;
}

.is-style-mm-cards:has(> .wp-block-column[style*="25%"]) .wp-block-image:hover img {
	opacity: 0.9;
	transform: scale3d(1.1, 1.1, 1);
}

/* ==========================================================================
   MADE IN EUROPE — centrerad overallt.

   Market ligger pa alla 42 sidor. Var tidigare regel centrerade det bara
   inuti grabandet, sa pa ovriga sidtyper stod det kvar till vanster.
   ========================================================================== */

.wp-block-image:has(> img.wp-image-23612) { text-align: center; }
.wp-block-image > img.wp-image-23612 { margin-inline: auto; }

/* ==========================================================================
   Heroets scrollpil.

   Originalet: .tfs-slider .tfs-scroll-down-indicator — position absolute,
   bottom 25px, left 50%, translateX(-50%), font-size 40px, color #fff,
   cursor:pointer, glyfen "\e61f" i awb-icons. Det ar en LANK som rullar
   vidare till nasta sektion; var version var ett ::after utan klickyta.

   Nu ett riktigt <a> (se assets/js/reveal.js) med samma placering. Den
   mjuka rorelsen ar vart tillagg — originalet animerar via Fusion Sliders
   JS, som inte gar att lasa ur CSS:en.
   ========================================================================== */

/* Den gamla dekorpilen tas bort — ersatt av lanken nedan. */
:where(.entry-content) .wp-block-cover::after { content: none; }

.mm-scroll-down {
	position: absolute;
	left: 50%;
	bottom: 25px;
	transform: translateX(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	cursor: pointer;
	z-index: 10;
	text-decoration: none;
}

.mm-scroll-down::before {
	content: "";
	width: 22px;
	height: 22px;
	margin-top: -8px;
	border-right: 3px solid currentColor;
	border-bottom: 3px solid currentColor;
	transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
	.mm-scroll-down { animation: mm-scroll-hint 2s ease-in-out infinite; }
}

@keyframes mm-scroll-hint {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 8px); }
}

/* ==========================================================================
   Kontaktbandet — texten langre ner.

   Originalets triangelkolumn (1_1) bar --awb-margin-bottom: 7%, alltsa en
   lucka mellan urtaget och innehallskolumnen. Utan den bocjade texten for
   hogt upp i bilden.
   ========================================================================== */

/* WordPress globala stilar nollar forsta barnets toppmarginal med den
   LOGISKA egenskapen (margin-block-start: 0). Samma specificitet som en
   ren .mm-band__eyebrow-regel, sa margin-top forlorar pa kaskadordning.
   Darfor bade hogre specificitet och samma logiska egenskap har. */
.is-style-mm-contact-band > .mm-band__eyebrow { margin-block-start: calc(60px + 7%); }

/* ==========================================================================
   Designguiden: text till vanster, bla ruta till hoger.

   Originalet har en 1_2-kolumn med guiden och en 1_4-kolumn bredvid med en
   bla ruta: --awb-bg-color #0276b8, padding 25px runt om, marginal 15px
   topp och botten, vit text. Ingen vaxlande gra/vit bandning pa den har
   sidtypen — den var vart tillagg.
   ========================================================================== */

.is-style-mm-guide { gap: 40px; align-items: flex-start; }

.is-style-mm-side-box {
	background: var(--wp--preset--color--primary-dark);   /* #0276b8 */
	color: #ffffff;
	padding: 25px;
	margin-block: 15px;
}

.is-style-mm-side-box :is(h1, h2, h3, h4, p, li, a, em, strong) { color: #ffffff; }
.is-style-mm-side-box > :first-child { margin-block-start: 0; }
.is-style-mm-side-box ul { padding-left: 1.2em; }

@media (max-width: 900px) {
	.is-style-mm-guide { flex-wrap: wrap; }
	.is-style-mm-guide > .wp-block-column { flex-basis: 100% !important; }
}

/* ==========================================================================
   Sidhuvudet pa EN rad.

   --nav_padding: 62px (31 px per sida) ar originalets varde, men originalet
   anvander det bara over headerns brytpunkt 1408 px — under den visar det
   hamburgare i stallet. Vi behaller skrivbordsmenyn aven under brytpunkten,
   och da racker inte raden till: vid 1106 px ar raden 1059 px medan
   logotyp 200 + meny 746 + spraknappar 245 = 1191 px. Menyn hamnade darfor
   pa en egen rad och headern blev 146 px i stallet for 91 px.

   Losning: full 31 px fran 1409 px, dar originalet faktiskt anvander det,
   och krympt avstand darunder sa logotyp och meny star kvar pa samma rad.
   ========================================================================== */

.wp-site-blocks > header .wp-block-group.is-layout-flex { flex-wrap: nowrap; }

/* Menyn ska inte brytas internt heller — hela raden star pa en rad. */
.wp-site-blocks > header .wp-block-navigation { flex-shrink: 0; }

/* Logotypen ska inte krympa nar menyn tar plats — originalets ar 200x50
   med max-height 50px. Utan detta absorberar logotypen hela krympningen. */
.wp-site-blocks > header .wp-block-site-logo { flex-shrink: 0; }
.wp-site-blocks > header .wp-block-site-logo img { max-height: 50px; width: auto; }
.wp-site-blocks > header .wp-block-navigation__container { flex-wrap: nowrap; }
.wp-site-blocks > header .wp-block-navigation-item { white-space: nowrap; }

/* Under 1200 px: minsta avstand som far raden att rymmas. */
.wp-block-navigation .wp-block-navigation-item > a { padding-inline: 10px; }

/* Luckan mellan menyn och spraknapparna (blockGap 30px i header.html)
   kortas ocksa, annars svammar raden over med nagra pixlar och hela
   sidan far vagratt scroll. */
.wp-site-blocks > header .wp-block-group.is-layout-flex .wp-block-group.is-layout-flex { gap: 20px; }

@media (min-width: 1200px) {
	.wp-block-navigation .wp-block-navigation-item > a { padding-inline: 20px; }
}

@media (min-width: 1409px) {
	.wp-block-navigation .wp-block-navigation-item > a { padding-inline: 31px; }
}

/* ==========================================================================
   Produktsidan: stor bild med miniatyrer under, tvattsymboler i texten.

   Originalet lagger vansterkolumnen pa 40 % med den stora bilden (500x500)
   overst och en nastlad rad med 1_5-kolumner darunder — alltsa fem
   miniatyrer i bredd. Tvattsymbolerna ar en liten bildremsa (t.ex.
   logomatto_logo.jpg, 174x40) som star INUTI produkttexten, inte som en
   egen sektion.
   ========================================================================== */

.mm-gallery .wp-block-image { margin-block: 0; }

.mm-gallery > .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Miniatyrraden: fem i bredd, som originalets 1_5-kolumner. */
.mm-thumbs.wp-block-gallery {
	margin-top: 10px;
	gap: 10px;
}

.mm-thumbs.wp-block-gallery .wp-block-image {
	margin: 0;
	flex-basis: calc(20% - 8px) !important;
}

.mm-thumbs.wp-block-gallery .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

/* Tvattsymbolerna: liten remsa i naturlig storlek, vansterstalld i texten.
   Var generella bandregel centrerar bilder — den ska inte galla har. */
.wp-block-image.mm-wash,
.mm-wash {
	text-align: left;
	margin-block: 18px;
}

.mm-wash img {
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: 0;
}

/* Miniatyrerna ar klickbara: den klickade byter plats med den stora bilden. */
.mm-thumbs .wp-block-image {
	cursor: pointer;
	outline-offset: 2px;
	transition: opacity 0.2s;
}

.mm-thumbs .wp-block-image:hover { opacity: 0.75; }

.mm-thumbs .wp-block-image:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
}

.mm-thumbs .wp-block-image.is-current { outline: 2px solid var(--wp--preset--color--primary); }