/*
Theme Name: Fixus & Mekonomen
Theme URI: https://trimedia.fi/
Template: froggyberg-2026
Author: Trimedia Oy
Description: Froggyberg-lapsiteema — koko sivustoteema (lohkot, tyylit, sisältö, brändi) froggyberg-2026-pohjateeman päällä. Pohjateema hoitaa vain ydinlohkojen rajoitukset ja päivitykset.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: froggyberg
*/

/* Nestemäinen skaala.
   Kaikki teeman clamp()-arvot — spacing-presetit 20/40/60/80 ja
   --wp--custom--radius-image — on laskettu samalle viewport-välille:
   375px -> 1440px. Väli on tallessa theme.jsonin custom-tokeneina
   fluidViewportMin / fluidViewportMax, koska JSON ei salli kommentteja.

   Uusi nestemäinen arvo (koosta Smin kokoon Smax) lasketaan näin:

     kulmakerroin = (Smax - Smin) / (1440 - 375)
     vw-osa       = kulmakerroin * 100
     vakio        = Smin - kulmakerroin * 375
     tulos        = clamp(Smin, vakio + <vw-osa>vw, Smax)

   Esim. 24px -> 42px antaa clamp(1.5rem, 1.1rem + 1.69vw, 2.625rem), joka on
   spacing-preset 60. Kertoimet pyöristetään kahteen desimaaliin.

   Pidä vakio rem-yksikössä kaikissa teksti- ja väljyysarvoissa, jotta
   selaimen fonttikoon suurennus toimii (WCAG 1.4.4) — pelkkä vw ei skaalaudu.
   Kulmapyöristykset ja muut ei-tekstiarvot voivat käyttää px:ää.

   Myös fonttikoot käyttävät samaa väliä: settings.typography.fluid on
   asetettu arvoihin 375px / 1440px, jotta WordPressin oletusankkurit
   (320px -> 1600px) eivät jättäisi typoa eri käyrälle kuin väljyydet.
   WordPress laskee fonttikokojen alarajat itse (minFontSize, oletus 14px);
   jos haluat päättää alarajan itse, anna presetille oma fluid.min-arvo.

   Huom: jos theme.jsoniin lisätään settings.layout.wideSize, se ohittaa
   maxViewportWidth-arvon fonttikokolaskennassa. Pidä maxViewportWidth
   silloin eksplisiittisesti asetettuna. */

/*
 * scroll-padding-top: ankkurilinkit pysähtyvät tarttuvan ylätunnisteen alle.
 * Mobiilissa 80px ylätunniste, työpöydällä (1024px, sama raja jolla
 * ylätunniste kutistuu) 65px = kutistetun ylätunnisteen korkeus (ks.
 * assets/css/header-footer.css). Lisäksi väli, ettei kohde osu suoraan
 * ylätunnisteen reunaan.
 */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(80px + var(--froggy-space-20));
}

@media (min-width: 1024px) {
	html {
		scroll-padding-top: calc(65px + var(--froggy-space-40));
	}
}

mark {
	background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Sisällön leveysrajoitus — joustava, enintään 1280px. */
.container {
	width: min(
		1280px,
		100% - 2 *
			var(--wp--style--root--padding-left, var(--wp--preset--spacing--40))
	);
	margin-inline: auto;
}

/* Ensimmäinen sisälohko ei aloita väljyydellä.
   theme.json antaa kaikille otsikoille margin-top: spacing/40. Kun otsikko on
   säiliönsä (ryhmä, sarake, kansi, sisältöalue) ensimmäinen lohko, väli on
   turha — säiliön oma padding hoitaa etäisyyden. :root nostaa tarkkuutta niin,
   että sääntö voittaa ytimen :root :where(h1, h2, ...) -säännön. */
:root .wp-block-heading:first-child {
	margin-top: 0;
}

/* Viimeinen lohko säiliössään ei jätä perään väljyyttä.
   theme.json antaa mm. otsikoille, kappaleille ja painikkeille alamarginaalin.
   Kun tällainen lohko on säiliönsä (ryhmä, sarake, kansi, sisältöalue) viimeinen
   lapsi, tuo alamarginaali työntää turhaa tilaa säiliön reunaan — säiliön oma
   padding hoitaa etäisyyden. Sama logiikka kuin ensimmäisen otsikon yllä, mutta
   yleistettynä jokaiseen lohkoon: margin-bottom vaikuttaa vain elementteihin
   joilla sellainen on (otsikot, kappaleet, painikkeet, listat…), joten muihin
   (esim. inline-elementteihin) sääntö on tyhjä. :root nostaa tarkkuutta niin,
   että sääntö voittaa teeman/ytimen :where-marginaalisäännöt. */
:root :last-child {
	margin-bottom: 0;
}

:root :first-child {
	margin-top: 0;
}