/* ==========================================================================
 * Ylä- ja alatunniste
 * ==========================================================================
 *
 * Tyylit lohkoille froggy/site-header, froggy/site-logo, froggy/site-footer,
 * froggy/footer-columns, froggy/footer-column ja froggy/site-footer-bottom
 * sekä valikon walkerille (inc/nav-walker.php).
 *
 * Ladataan sekä julkisivulla että editorissa (inc/assets.php) — ilman
 * editorilatausta Sivustomuokkain näyttäisi tyylittelemättömän
 * alatunnisteen.
 *
 * ⚠️ Älä siirrä näitä sääntöjä @layer-kerrokseen. WordPressin theme.jsonista
 * generoima global styles -CSS on kerrostamatonta, ja kerrostamaton CSS
 * voittaa aina kerrostetun spesifisyydestä riippumatta — mm. .froggy-footer a
 * { color: inherit } häviäisi WP:n linkkiväriin.
 *
 * Breakpointit:
 *   600px   alatunnisteen palstat 1 -> 2
 *   782px   alatunnisteen palstat 2 -> 3
 *   1024px  alatunnisteen palstat 3 -> 5 (vanha Fixus, viisi palstaa)
 *   1024px  valikko mobiili- <-> työpöytätilaan
 *           ⚠️ SAMA ARVO on assets/js/alpine-components.js:ssä
 *           (DESKTOP-vakio), joka ratkaisee saako pudotusvalikko avautua
 *           hoverilla. Jos muutat toista, muuta myös toinen.
 * ---------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * 0. Riippuvuudet: CSS-muuttujat
 *
 * Kaikki käytetyt muuttujat ovat teeman omia. Tämä tiedosto EI määrittele
 * niitä uudelleen:
 *
 *   --froggy-btn-secondary-text   assets/css/color-themes.css (vaalealla
 *                                 taustalla contrast) — valikkolinkit,
 *                                 ikonit, hampurilaispainike
 *   --froggy-border               assets/css/color-themes.css (= borders) —
 *                                 pudotusvalikon ja hakukortin reunat
 *   --wp--preset--color--*        theme.json paletti
 *   --wp--custom--radius          theme.json settings.custom.radius
 *
 * ⚠️ ÄLÄ määrittele --froggy-*-tokeneita täällä :root-lohkossa. Siirtopaketin
 * versiossa oli :root-lohko, joka asetti --froggy-btn-secondary-text- ja
 * -border-arvot fallbackeineen. color-themes.css asettaa ne valitsimella
 * `body` (spesifisyys 0,0,1), jonka :root (0,1,0) voittaa — tokenit
 * jämähtäisivät vaalean taustan arvoihin KOKO sivustolla, eivät vain
 * ylä-/alatunnisteessa, ja tummien osioiden painikkeet menettäisivät
 * vaaleat varianttinsa.
 * ---------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * 1. Alpine-apuri
 *
 * [x-cloak] piilottaa komponentit ennen kuin Alpine ehtii alustaa ne.
 * PAKOLLINEN: ilman tätä kaikki alavalikot ja hakulomake välähtävät auki
 * sivun latautuessa. Jos kohdeteemassa on tämä jo jossain, älä kaksinnusta.
 * ---------------------------------------------------------------------- */
[x-cloak] {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * 2. Sisältöleveys
 *
 * Sama kaava kuin teeman .container-luokassa (style.css), jotta ylä- ja
 * alatunnisteen sisältö asettuu samaan pystylinjaan sivun osioiden kanssa.
 * Omat luokat, koska sääntö kohdistuu render.php:n tuottamiin kääreisiin,
 * joihin .container-luokkaa ei kirjoiteta.
 *
 * .main-footer / .froggy-footer eivät ole listassa tarkoituksella: ne tuovat
 * taustavärin koko leveydeltä, ja leveysrajaus tapahtuu niiden SISÄLLÄ.
 * ---------------------------------------------------------------------- */
.froggy-footer .footer-columns,
.froggy-footer .bottom-footer {
	width: min(
		1280px,
		100% - 2 *
			var(--wp--style--root--padding-left, var(--wp--preset--spacing--40))
	);
	margin-inline: auto;
}

/* ==========================================================================
 * YLÄTUNNISTE
 * ======================================================================= */

/* Yksi vaakarivi: logo vasemmalle, valikko + CTA-painikkeet oikealle.
   Täysleveä sininen palkki (vanha Fixus-ylätunniste); sisältö keskitetään
   1280px:iin padding-inlinellä, joten erillistä sisäkääre-elementtiä ei
   tarvita. */
.froggy-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	/* Logo työnnetään vasempaan (margin-inline-end: auto), muut ryhmittyvät
	   oikealle; gap erottaa CTA-painikkeet ja hampurilaisen toisistaan. */
	gap: 1rem;
	background-color: var(--wp--preset--color--primary);
	/* Pystypadding on logolla, ei tässä (ks. .froggy-header .froggy-site-logo).
	   Ylätunniste keskittää lapset aina pystysuunnassa (align-items: center). */
	padding-inline: max(
		var(--wp--preset--spacing--40),
		calc((100% - 1280px) / 2)
	);
}

/*
 * Kiinnitetty ylätunniste: template-partin <header>-kääre tarttuu yläreunaan
 * koko sivun vierityssäiliössä (.wp-site-blocks). sticky (ei fixed), jotta se
 * pysyy virrassa eikä mene ensimmäisen lohkon päälle.
 */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/*
 * Sisäänkirjautuneena WP:n hallintapalkki on KIINNITETTY vain työpöydällä
 * (782px:stä ylöspäin, korkeus 32px) -> siirretään tarttuva ylätunniste sen
 * alle. Pienemmillä ruuduilla palkki on absoluuttinen ja vierii pois muun
 * sisällön mukana, joten ylätunniste tarttuu normaalisti top:0:aan; jos
 * antaisimme siellä 46px:n offsetin, palkin vieriydyttyä jäisi 46px rako.
 */
@media (min-width: 782px) {
	.admin-bar header.wp-block-template-part {
		top: 32px;
	}
}

/*
 * Vieritettäessä (vain työpöytä) logon padding kutistuu 29px -> 5px ja logo-
 * kuvan max-height 63px -> 55px pehmeästi (transitionit logossa/kuvassa alla).
 * .is-scrolled asetetaan froggyHeader-komponentista, ks.
 * assets/js/alpine-components.js. Mobiilissa ei kutistusta.
 *
 * ⚠️ Kutistus pienentää logon korkeutta 121px -> 65px, ja koska
 * ylätunniste on sticky (mukana virrassa), se siirtää koko sivun sisältöä
 * 56px ylöspäin. Siksi alpine-components.js käyttää kahta kynnysarvoa
 * (SCROLL_SHRINK 60 / SCROLL_GROW 0), joiden välin on oltava tuota 56px:ää
 * suurempi. Jos muutat näitä paddingeja tai max-heightteja, tarkista
 * kynnysarvot.
 */
@media (min-width: 1024px) {
	.froggy-header.is-scrolled .froggy-site-logo {
		padding-block: 5px;
	}

	.froggy-header.is-scrolled .froggy-site-logo__image {
		max-height: 55px;
	}
}

/* --- Logo ----------------------------------------------------------------
 * Kiinteä korkeus kontekstin mukaan — lohkolla ei ole leveys-säädintä, eli
 * ylä- ja alatunniste voivat käyttää eri kokoa ilman että kukaan pääsee
 * muuttamaan sitä editorissa.
 * -------------------------------------------------------------------- */
.froggy-site-logo {
	display: block;
	text-decoration: none;
}

/* Ylätunnisteen pystyrytmi tulee logolta: mobiilissa 16px (ei transitionia),
   työpöydällä 29px pehmennyksellä ja kutistuu 5px:ään vieritettäessä
   (.is-scrolled, ks. yllä). */
.froggy-header .froggy-site-logo {
	padding-block: 16px;
	/* Logo vasempaan; valikko ja CTA-painikkeet ryhmittyvät oikealle. */
	margin-inline-end: auto;
}

@media (min-width: 1024px) {
	.froggy-header .froggy-site-logo {
		padding-block: 29px;
		transition: padding-block 0.25s ease;
	}
}

.froggy-header .froggy-site-logo__image {
	width: auto;
	max-height: 48px;
	display: block;
}

/* Työpöydällä logo korkeuden mukaan (luonnollinen 120x63 -> 120px leveä),
   jotta max-height animoituu pehmeästi vieritettäessä. */
@media (min-width: 1024px) {
	.froggy-header .froggy-site-logo__image {
		width: auto;
		max-height: 63px;
		transition: max-height 0.25s ease;
	}
}

/* --- Hampurilaispainike --------------------------------------------------
 * Kolme viivaa: elementti itse + ::before/::after. Tarkoituksella CSS:ää
 * myös alkuperäisessä teemassa — pseudo-elementeille ei ole muuta
 * kiinnityskohtaa kuin valitsin.
 * -------------------------------------------------------------------- */
.site-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	/* Mobiilijärjestys: logo (0), hampurilainen (1), valikko (2), CTA viimeisenä
	   (3) eli alimmaisena. Työpöydällä piilossa. */
	order: 1;
}

@media (min-width: 1024px) {
	.site-header__toggle {
		display: none;
	}
}

.site-header__toggle-icon,
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
	width: 1.5rem;
	height: 2px;
	background: var(--wp--preset--color--white);
	transition:
		transform 0.2s ease,
		top 0.2s ease,
		opacity 0.2s ease;
}

.site-header__toggle-icon {
	position: relative;
	display: block;
}

.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.site-header__toggle-icon::before {
	top: -6px;
}
.site-header__toggle-icon::after {
	top: 6px;
}

.site-header__toggle-icon.is-open {
	background: transparent;
}

.site-header__toggle-icon.is-open::before {
	top: 0;
	transform: rotate(45deg);
}

.site-header__toggle-icon.is-open::after {
	top: 0;
	transform: rotate(-45deg);
}

/* --- Navigaatiosäiliö ----------------------------------------------------
 * Mobiilissa piilossa oletuksena; Alpine lisää .is-openin (ks.
 * render.php :class="open ? 'is-open' : ''"). Työpöydällä aina näkyvissä
 * vaakarivinä, jolloin .is-open on merkityksetön.
 * -------------------------------------------------------------------- */
.site-header__nav {
	display: none;
	width: 100%;
	/* Mobiilijärjestys: valikko (2) logon+hampurilaisen alle, CTA (3) sen alle. */
	order: 2;
	/* Pudotusvalikon yläpadding vastaa ylätunnisteen sivupaddingia
	   (.froggy-header padding-inline). Alapadding tulee CTA:lta (.site-header__cta),
	   joka on valikon alla auki-tilassa. Työpöydällä nollataan (navin oma flex-gap). */
}

.site-header__nav.is-open {
	display: block;
}

@media (min-width: 1024px) {
	.site-header__nav,
	.site-header__nav.is-open {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		gap: 2rem;
		width: auto;
		padding-block: 0;
		/* Logo (margin-auto) työntää CTA:n (order 1) ja valikon (order 2)
		   ryhmäksi oikealle; CTA on siis linkkien vieressä, ei logon. */
		order: 2;
	}
}

/* CTA-painikkeet (froggy/header-cta-links -lohko), ylätunnisteen lapsi.
   Mobiilissa piilossa kunnes valikko avataan (.is-menu-open) — silloin
   alimmaisena (order: 3) linkkien alla. Pudotusvalikon alareunan padding tulee
   tänne (siirretty .site-header__nav:sta). Työpöydällä aina näkyvissä ja
   linkkien vieressä oikealla (order: 1, valikko order: 2). */
.site-header__cta {
	display: none;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	order: 3;
	padding-bottom: var(--wp--preset--spacing--40);
}

.froggy-header.is-menu-open .site-header__cta {
	display: flex;
}

@media (min-width: 1024px) {
	.site-header__cta {
		display: flex;
		order: 1;
		padding-bottom: 0;
	}
}

/* --- Valikkolista (päätaso) --------------------------------------------- */
.site-header__links {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 1024px) {
	.site-header__links {
		flex-direction: row;
		align-items: center;
		gap: 1.5rem;
	}
}

/* Valikkokohde: linkki + mahdollinen ▾-painike samalla rivillä. */
.site-header__links .menu-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

/*
 * position: relative VAIN työpöydällä ja vain alavalikollisille kohteille —
 * se on absoluuttisesti sijoitetun pudotusvalikon ankkuri. Mobiilissa
 * alavalikko on staattinen sisennetty lista, joten ankkuria ei tarvita.
 */
@media (min-width: 1024px) {
	.site-header__links .menu-item-has-children {
		position: relative;
	}
}

/* Päätason linkit: valkoinen otsikkofontti sinisellä palkilla. */
.site-header__links .menu-link {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
}

.site-header__links .menu-link:hover {
	color: var(--wp--preset--color--accent);
}

/* Nykyinen sivu korostetaan keltaisella (kuten vanhassa Fixus-ylätunnisteessa). */
.site-header__links .current-menu-item > .menu-link,
.site-header__links .current-menu-ancestor > .menu-link,
.site-header__links .current_page_item > .menu-link {
	color: var(--wp--preset--color--accent);
}

/* CTA-painikkeet: keltainen pilleri sinisellä tekstillä + valinnainen kuvake.
   Kukin painike on froggy/header-cta-button (renderöi .site-header__cta-link);
   ne ovat froggy/header-cta-links -ryhmässä. Kuvake tulee painikkeen icon-
   attribuutista (froggy_icon_svg, ks. inc/icons.php). */
.site-header__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 9px 20px;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.site-header__cta-link:hover {
	color: var(--wp--preset--color--primary);
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--accent) 88%,
		#000
	);
}

.site-header__cta-link .menu-link__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.site-header__cta-link .menu-link__icon :is(svg, img) {
	display: block;
	width: 1.6em;
	height: 1.6em;
}

.site-header__links .menu-toggle {
	background: transparent;
	border: 0;
	padding: 0;
	line-height: 1;
	cursor: pointer;
	color: var(--wp--preset--color--white);
	flex: 1 1;
	display: flex;
	justify-content: end;
}

/* Chevron-ikoni (assets/images/chevron-down.svg) tekstimerkin tilalla. Valkoinen
   SVG sopii siniselle palkille; koko skaalautuu contain-arvolla. */
.site-header__links .menu-toggle__icon {
	display: block;
	width: 1.35rem;
	height: 1.35rem;
	background-image: url(../images/chevron-down.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/*
 * ▾-painike vain mobiilissa: siellä alavalikko avataan napauttamalla. Työpöy-
 * dällä alavalikko aukeaa hoverilla (allowHover, ks. inc/nav-walker.php), joten
 * chevronia ei näytetä -- päätason linkit ovat pelkkää tekstiä kuten vanhassa
 * Fixus-ylätunnisteessa.
 */
@media (min-width: 1024px) {
	.site-header__links .menu-toggle {
		display: none;
	}
}

/* Alavalikon linkit ovat kevyempiä kuin päätason (leipätekstifontti). Väri
   periytyy: mobiilissa valkoinen (sininen palkki), työpöydällä tumma
   (vaalea kortti, ks. 1024px alla). */
.site-header__links .sub-menu .menu-link {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
}

/* --- Alavalikot ----------------------------------------------------------
 * Mobiili: sisennetty pystylista normaalissa dokumenttivirrassa.
 * Työpöytä: irrallinen "kortti" vanhemman <li>:n alla.
 * -------------------------------------------------------------------- */
.site-header__links .sub-menu {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	margin: 0.5rem 0 0;
	padding: 0 0 0 1rem;
}

/* Alue, joka pitkää alavalikon näkyvillä, kun kursori poistuu päälinkin hoverista */
.site-header__links .sub-menu::before {
	content: "";
	position: absolute;
	top: -1rem;
	left: 0;
	right: 0;
	height: 1rem;
}

@media (min-width: 1024px) {
	.site-header__links .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		margin-top: 0.5rem;
		width: max-content;
		min-width: 9rem;
		padding: 0.75rem 1rem;
		background: var(--wp--preset--color--white);
		border: 1px solid var(--froggy-border);
		border-radius: var(--wp--custom--radius);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
		z-index: 40;
	}

	.site-header__links .menu-item:last-child .sub-menu {
		left: auto;
		right: 0;
	}

	/* Vaalea kortti -> tummat linkit. */
	.site-header__links .sub-menu .menu-link {
		color: var(--wp--preset--color--primary);
	}

	.site-header__links .sub-menu .menu-link:hover {
		color: var(--wp--preset--color--primary);
		text-decoration: underline;
	}
}

/* --- Megavalikko ---------------------------------------------------------
 * Sama irrallinen kortti, mutta sisältö automaattisesti sarakkeisiin ja
 * kolmas taso litistettynä kortin sisään (ei kortti kortin sisällä).
 * Vain työpöydällä — mobiilissa megavalikko on tavallinen sisennetty lista.
 * -------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.site-header__links .sub-menu--mega {
		display: grid;
		width: max-content;
		min-width: 28rem;
		max-width: min(60rem, calc(100vw - 2rem));
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		column-gap: 2rem;
		row-gap: 0.5rem;
	}

	/* Kolmas taso megavalikon sisällä: ei omaa korttia. */
	.site-header__links .sub-menu--mega .sub-menu {
		position: static;
		margin-top: 0.375rem;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: transparent;
		min-width: 0;
		width: auto;
	}
}

/* ==========================================================================
 * ALATUNNISTE
 * ======================================================================= */

.froggy-footer {
	overflow: hidden;
	background-color: var(--wp--preset--color--primary);
}

/*
 * Linkin väri periytyy footerin vaalealta tekstivärilta. Ilman tätä WP:n
 * global styles -linkkiväri (theme.json, tarkoitettu vaalealle taustalle)
 * voittaisi ja alarivin linkit jäisivät heikolle kontrastille tummaa
 * taustaa vasten. Kohdistuu tähän luokkaan, koska template-partin <footer>
 * saa vain .wp-block-template-partin.
 */
.froggy-footer a {
	color: inherit;
}

/* --- Yläosa: palstat --------------------------------------------------- */
.froggy-footer .main-footer {
	padding-top: 3rem;
	padding-bottom: 3rem;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white-70);
}

@media (min-width: 782px) {
	.froggy-footer .main-footer {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
}

/*
 * .main-footer tuo taustavärin KOKO leveydeltä; .footer-columns keskittää ja
 * rajaa sisällön sen SISÄLLÄ. Ne eivät voi olla samassa elementissä, koska
 * container asettaa oman width/margin-autonsa eikä tausta silloin ulotu
 * koko main-footerin levyiseksi.
 */
.froggy-footer .footer-columns {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 3rem;
	column-gap: 1rem;
}

@media (min-width: 600px) {
	.froggy-footer .footer-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 782px) {
	.froggy-footer .footer-columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 2rem;
	}
}

/* Viisi palstaa vierekkäin (vanha Fixus-alatunniste) vasta työpöydällä. */
@media (min-width: 1024px) {
	.froggy-footer .footer-columns {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/*
 * Logo on ruudukon SISÄLLÄ mutta vie koko rivin, jolloin se muodostaa oman
 * täysleveän rivinsä palstojen yläpuolelle — ei erillistä wrapperia eikä
 * PHP-jaottelua.
 */
.froggy-footer .footer-columns > .froggy-site-logo {
	grid-column: 1 / -1;
}

.froggy-footer .froggy-site-logo__image {
	height: 51px;
	width: auto;
	display: block;
}

/* Palstojen otsikot: leipätekstifontti, pienet versaalit (vanha Fixus). */
.froggy-footer .footer-columns :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #fff;
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.froggy-footer .footer-columns p {
	margin-top: 0;
}

.froggy-footer .main-footer__links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}

/*
 * Editorissa linkki on <span class="main-footer__link"> (RichText),
 * julkisivulla <a>. Sama luokka molemmissa, jotta väri ja alleviivaus
 * täsmäävät esikatselussa.
 */
.froggy-footer .main-footer a,
.froggy-footer .main-footer__link {
	color: #fff;
	text-decoration: none;
}

/*
 * Linkin valinnainen kuvake tulee mediakirjastosta (froggy/footer-link,
 * mediaId). Luokan --has-icon kirjoittaa render.php vain kun liite todella
 * löytyi, joten kuvakkeeton linkki pysyy tavallisena tekstilinkkinä eikä
 * inline-flex muuta sen rivitystä.
 */
.froggy-footer .main-footer__link--has-icon {
	display: inline-flex;
	align-items: center;
	gap: var(--froggy-space-20);
}

/*
 * Kiinteä laatikko kuvakkeelle: SVG:n oma koko on mitä designer sattui
 * viemään, joten lopullinen koko tulee aina täältä. object-fit pitää myös
 * ei-neliömäisen rasterikuvakkeen laatikon sisällä.
 */
.froggy-footer .main-footer__link-icon {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	object-fit: contain;
}

.froggy-footer .main-footer a:hover {
	text-decoration: underline;
}

/*
 * MIGRAATIOJÄÄNNE -- poistetaan kun tuotannon alatunniste on muunnettu
 * froggy/footer-links-lohkoiksi (ks. parts/footer.html ja
 * blocks/site-footer/footer-links/transforms.js).
 *
 * Nämä säännöt piirtävät some-kuvakkeet vielä VANHASTA core/list-merkinnästä
 * href-attribuutin perusteella. Ne olivat aikanaan ainoa keino: rich-text
 * riisuu SVG:n list-item-lohkosta. Uusi merkintä ei kanna --social-luokkaa,
 * joten nämä eivät osu siihen -- kuvake tulee sinne liitteestä (mediaId).
 */
.froggy-footer .main-footer__links--social a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.froggy-footer .main-footer__links--social a::before {
	content: "";
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.froggy-footer .main-footer__links--social a[href*="facebook"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E");
}

.froggy-footer .main-footer__links--social a[href*="instagram"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07zM12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.31-1.46.72-2.12 1.38C1.36 2.67.95 3.34.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.79.72 1.46 1.38 2.12.66.66 1.33 1.07 2.12 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.31 1.46-.72 2.12-1.38.66-.66 1.07-1.33 1.38-2.12.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.9 5.9 0 0 0-1.38-2.12A5.9 5.9 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 16 12a4 4 0 0 1-4 4zm6.41-10.4a1.44 1.44 0 1 0 1.44 1.44 1.44 1.44 0 0 0-1.44-1.44z'/%3E%3C/svg%3E");
}

/* --- Alarivi: tekijänoikeus + lakisivut -------------------------------- */
.froggy-footer .bottom-footer {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
	color: var(--wp--preset--color--white-70);
}

@media (min-width: 782px) {
	.froggy-footer .bottom-footer {
		gap: 2rem;
	}
}

/* Korvaa Tailwindin "relative z-10 text-white" -luokat copyright-spanista. */
.froggy-footer .bottom-footer__copyright {
	position: relative;
	z-index: 10;
	color: #fff;
}

.froggy-footer .bottom-footer__links {
	list-style: none;
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0;
}

.froggy-footer .bottom-footer__links a:hover {
	text-decoration: none;
}