/*
 * .wp-block-accordion* — WP-ytimen natiivi accordion-lohko (core/accordion,
 * käytössä 6.9:stä), rakennettu Interactivity API:n päälle. Ei omaa JS:ää
 * eikä Alpine.js:ää tarvita — auki/kiinni-tila näkyy CSS:ssä .is-open
 * -luokkana, jonka WP-ydin lisää itse (data-wp-class--is-open).
 *
 * Ei renderöidä täältä teemasta (WP-ytimen oma merkintä), joten tyylit on
 * pakko kirjoittaa valitsimina — sama syy kuin buttons.css:ssä.
 *
 * Ulkoasu Figman "Luotettava valinta"- ja FAQ-osioista: siniset 20px otsikot,
 * oikealla keltainen pyöreä pilleri ja sininen chevron, joka kääntyy auki.
 * Väliviivat ja värit color-themes.css:n --froggy-*-muuttujista, jotta
 * accordion kääntyy oikein myös .is-style-brand-osioissa ja .has-theme-background-laatikoissa.
 */

.wp-block-accordion-item {
	border-bottom: 1px solid var(--froggy-divider);
}

.wp-block-accordion-item:first-child {
	border-top: 1px solid var(--froggy-divider);
}

/* Otsikkorivi: sininen 20px otsikko vasemmalla (ydin antaa otsikolle flex: 1),
   kuvake oikealla. .wp-block-accordion-heading on mukana valitsimessa, jotta
   nämä voittavat WP-ytimen omat säännöt latausjärjestyksestä riippumatta. */
.wp-block-accordion-heading .wp-block-accordion-heading__toggle {
	display: flex;
	align-items: center;
	gap: var(--froggy-space-40);
	padding-block: var(--froggy-space-40);
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: var(--wp--preset--font-size--large); /* 20px */
	font-weight: 700;
	line-height: 1.2;
	color: var(--froggy-heading);
}

.wp-block-accordion-heading__toggle:hover
	.wp-block-accordion-heading__toggle-title {
	text-decoration: underline;
	text-decoration-color: var(--froggy-accent);
}

/* Kuvake = keltainen pyöreä pilleri, jonka sisällä sininen chevron. Ytimen oma
   kuvake piilotetaan ja chevron piirretään maskilla, jotta muoto vastaa
   Figmaa; värit tulevat --froggy-icon-* -tokeneista (kääntyvät osion mukaan).
   Chevron on WP:n oma chevron-down-polku data-URI:na. */
.wp-block-accordion-heading__toggle-icon {
	--froggy-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 11.6 12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6z'/%3E%3C/svg%3E");

	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-color: var(--froggy-icon-bg);
	color: var(--froggy-icon);
	/* Ytimen oma kuvake on tekstimerkki "+" (span … children: "+"), ei SVG.
	   font-size: 0 piilottaa sen; chevron piirretään ::after-elementtiin
	   kiinteillä rem-mitoilla, joten font-size ei vaikuta siihen. */
	font-size: 0;
}

.wp-block-accordion-heading__toggle-icon::after {
	content: "";
	display: block;
	/* Chevron täyttää vain ~46 % 24-viewBoxistaan, joten elementti on
	   pilleriä (3rem) pienempi mutta selvästi 24px:ää leveämpi, jotta chevron
	   näkyy Figman levyisenä. */
	width: 2.25rem;
	height: 2.25rem;
	background-color: currentcolor;
	-webkit-mask: var(--froggy-chevron) center / contain no-repeat;
	mask: var(--froggy-chevron) center / contain no-repeat;
}

/* Auki: chevron kääntyy ylös. Kääntö tehdään koko pillerille (ympyrä on
   symmetrinen, joten vain chevron näyttää kääntyvän) ja se YLIKIRJOITTAA
   ytimen oletuksen rotate(45deg) — muuten kierrot summautuisivat (45 + 180 =
   225). .has-icon nostaa tarkkuuden ytimen valitsimen yli latausjärjestyksestä
   riippumatta. Siirtymä tulee ytimen omasta transitionista (0.2s). */
.wp-block-accordion-item.is-open
	.wp-block-accordion-heading.has-icon
	.wp-block-accordion-heading__toggle-icon {
	transform: rotate(180deg);
}

/* Vastausteksti: leipätekstin väri peritään ympäröivästä osiosta (theme.json:
   text-on-light), joten sitä ei aseteta tässä.

   Suljettuna WP-ydin asettaa paneeliin hidden="until-found", joka on
   content-visibility: hidden — ei display: none. Elementti siis piirtää yhä
   laatikkonsa, joten padding näkyisi tyhjänä tilana otsikon alla. Siksi
   padding annetaan vain auki olevalle paneelille. */
.wp-block-accordion-panel:not([hidden]) {
	padding-bottom: var(--froggy-space-40);
}

/* Vastaus rajataan luettavaan leveyteen (Figma: max-w-800px). Otsikkorivi
   pysyy täysleveänä, jotta kuvake on oikeassa reunassa. */
.wp-block-accordion-panel {
	max-width: 800px;
}

/* Avausanimaatio. Animoidaan VAIN paneelin korkeus yhden rivin ruudukkona
   (0fr -> 1fr). Otsikko pysyy normaalissa flow-asettelussa.

   HUOM: koko itemin animointi rivein `auto 0fr` -> `auto 1fr` ei toimi, koska
   `auto` ei interpoloidu — selain yliarvioi korkeuden kesken animaation
   (sisältö tönii alapuolella olevia lohkoja liikaa alas) ja palautuu vasta
   lopuksi. Pelkillä fr-arvoilla korkeus kasvaa tasaisesti eikä ylitä. Sisältö
   leikataan overflow: hiddenillä; min-height: 0 sallii kutistumisen nollaan.

   Sama prefers-reduced-motion-vartija kuin ytimellä: liikettä välttäville
   avaus/sulku tapahtuu heti. */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-accordion-panel {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.3s ease-out;
	}

	.wp-block-accordion-item.is-open .wp-block-accordion-panel {
		grid-template-rows: 1fr;
	}

	.wp-block-accordion-panel > * {
		min-height: 0;
		overflow: hidden;
	}
}