/* Mekonomen — brändin yleistyylit.

   Ladataan vain Mekonomenin sivustolla, jaettujen tyylien jälkeen sekä
   julkisivulla että editorissa (inc/brand.php). Paletti, fontit ja muodot
   (kulmat) tulevat brands/mekonomen/theme.jsonista; tämä tiedosto hoitaa
   vain sen, mitä tokenien arvoilla ei voi ilmaista:

   1. tokenien kytkennät, jotka eroavat Fixuksesta (assets/css/color-themes.css)
   2. jaettujen osien (accordion, artikkelikortti) erilainen rakenne.

   Yhden lohkon erot ovat kansiossa blocks/ (esim. blocks/hero.css).
   Lähde: Figma "Mekonomen 2026", sivu "Share Mekonomen" (node 32:8682). */

/* --- 1. Tokenit ------------------------------------------------------------ */

/* Light (oletus): leipäteksti on musta, ei harmaa (Figma: paragraph
   #1E2021). Yläotsikon teksti on musta jo Fixuksen kytkennällä (primary). */
body {
	--froggy-paragraph: var(--wp--preset--color--ink);
	--froggy-card-text: var(--wp--preset--color--ink);
	/* Koristekuvitusten väri (blocks/text-image.css). */
	--froggy-illustration: var(--wp--preset--color--accent);
}

/* Ensisijainen (tumma) moodi: yläotsikko on viiva + teksti ilman taustaa
   (blocks/pre-heading.css), joten teksti on valkoinen eikä keltaisen
   pillerin päällä luettava tumma. */
.is-style-brand,
.has-theme-background {
	--froggy-eyebrow-text: var(--wp--preset--color--white);
}

/* Valkoinen laatikko tummassa osiossa palaa Light-moodiin
   (vrt. color-themes.css), myös leipäteksti ja yläotsikko. */
.is-style-brand .has-theme-background {
	color: var(--wp--preset--color--ink);
	--froggy-paragraph: var(--wp--preset--color--ink);
	--froggy-card-text: var(--wp--preset--color--ink);
	--froggy-eyebrow-text: var(--wp--preset--color--primary);
}

/* Korostus-moodi (keltainen): yläotsikon viiva ja teksti ovat molemmat
   tummia, ja kuvakepilleri on tumma keltaisella kuvakkeella (Fixuksella
   valkoinen pilleri sinisellä kuvakkeella). */
.is-style-accent {
	--froggy-eyebrow-text: var(--wp--preset--color--primary);
	--froggy-icon-bg: var(--wp--preset--color--primary);
	--froggy-icon: var(--wp--preset--color--accent);
	--froggy-illustration: var(--wp--preset--color--primary);
}

/* Alatunnisteen palstaotsikot ovat korostusvärisiä, otsikkofonttia ja
   tavallisin kirjaimin (Fixuksella valkoisia, leipätekstifonttia ja
   versaalein, assets/css/header-footer.css). */
.froggy-footer .footer-columns {
	--froggy-heading: var(--wp--preset--color--accent);
}

.froggy-footer .footer-columns :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: none;
	font-size: var(--wp--preset--font--size--large);
}

/* --- 2. Accordion (assets/css/accordion.css) ---------------------------------
   Fixuksella kohteet erottaa väliviiva; Mekonomenilla jokainen kohde on oma
   vaalea laatikkonsa (Figma "Haitari", node 24:372): 20px täyte, 4px kulmat,
   kohteiden välissä 24px. Laatikko on aina vaalea, joten sen sisällä
   palataan Light-moodin tokeneihin osion moodista riippumatta. */
.wp-block-accordion-item,
.wp-block-accordion-item:first-child {
	border: 0;
	border-radius: var(--wp--custom--radius-card);
	padding-inline: 1.25rem;
	background-color: var(--wp--custom--surface);
	color: var(--wp--preset--color--ink);
	--froggy-heading: var(--wp--preset--color--ink);
	--froggy-paragraph: var(--wp--preset--color--ink);
	--froggy-link: var(--wp--preset--color--ink);
	--froggy-accent: var(--wp--preset--color--ink);
	--froggy-icon-bg: var(--wp--preset--color--white);
	--froggy-icon: var(--wp--preset--color--ink);
}

.wp-block-accordion-item + .wp-block-accordion-item {
	margin-top: var(--froggy-space-40);
}

/* Otsikkorivi: 20px ylä- ja alatäyte. */
.wp-block-accordion-heading .wp-block-accordion-heading__toggle {
	padding-block: 1.25rem;
}

/* Kuvake: 40px valkoinen neliö (8px täyte + 24px chevron), Fixuksella 48px
   pallo. */
.wp-block-accordion-heading__toggle-icon {
	width: 2.5rem;
	height: 2.5rem;
}

.wp-block-accordion-heading__toggle-icon::after {
	width: 2rem;
	height: 2rem;
	margin: 0.25rem;
}

/* Vastaus laatikon sisällä: alatäyte 20px kuten ylhäällä. */
.wp-block-accordion-panel:not([hidden]) {
	padding-bottom: 1.25rem;
}

/* --- 3. Artikkelikortti (assets/css/cards.css) ------------------------------
   Fixuksella valkoinen kortti ohuella reunuksella; Mekonomenilla vaalea
   täyte ilman reunusta (Figma "tiedote", node 29:3578). */
.content-listing__card--article {
	border: 0;
	background-color: var(--wp--custom--surface);
	color: var(--wp--preset--color--ink);
}