/**
 * SMI GEO - Yoast FAQ: haitari.
 *
 * Sulkevat säännöt saavat kohdistua vain JS:n luomiin elementteihin
 * (.schema-faq-answer-wrapper), jotta vastaukset jäävät näkyviin ilman JS:ää.
 */

.schema-faq {
	font-family: var(--faq-font-family, inherit);
	background: var(--faq-bg, transparent);
	padding: var(--faq-padding, 0);
	border-radius: var(--faq-container-radius, 0);
}

.schema-faq-section {
	/* Erotinviiva ja korostus ylikirjoittavat kehyksen, joten niiden varana on
	   kehys itse: muuten pelkän kehyksen asettaminen jättäisi alan ja vasemman
	   sivun pois ja tuloksena olisi vain ylä- ja oikea reuna. */
	border: var(--faq-border, none);
	border-bottom: var(--faq-divider, var(--faq-border, 1px solid #e2e8f0));
	border-left: var(--faq-accent-border, var(--faq-border, none));
	background: var(--faq-section-bg, transparent);
	border-radius: var(--faq-section-radius, 0);
	box-shadow: var(--faq-section-shadow, none);
	margin-bottom: var(--faq-section-gap, 0);
	backdrop-filter: var(--faq-backdrop-filter, none);
	overflow: hidden;
	/* Nimetyt ominaisuudet, ei "all": "all" animoi myös sen mitä ei ole tarkoitettu. */
	transition:
		background-color var(--faq-duration, 0.3s) ease,
		box-shadow var(--faq-duration, 0.3s) ease,
		border-color var(--faq-duration, 0.3s) ease;
}

/* JS korvaa Yoastin <strong class="schema-faq-question"> tällä. */
.schema-faq .faq-toggle-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	width: 100%;
	margin: 0;
	background: transparent;
	border: none;
	padding: var(--faq-btn-padding, 1.25rem 0);
	font-family: inherit;
	font-size: var(--faq-question-size, 1.1rem);
	font-weight: var(--faq-question-weight, 700);
	color: var(--faq-question-color, #1e293b);
	cursor: pointer;
	text-align: left;
	line-height: 1.4;
}

/* Negatiivinen offset piirtää renkaan napin sisäpuolelle. Nappi täyttää osion
   reunasta reunaan, joten ulospäin piirretty rengas jäisi osion overflow:hidden
   -leikkauksen alle eikä näkyisi lainkaan. */
.schema-faq .faq-toggle-btn:focus-visible {
	outline: 2px solid var(--faq-focus-color, #2271b1);
	outline-offset: -2px;
	border-radius: 2px;
}

.schema-faq .faq-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	transition: transform var(--faq-duration, 0.3s) ease;
	color: var(--faq-icon-color, currentColor);
}

.schema-faq .faq-toggle-btn[aria-expanded="true"] .faq-icon {
	transform: rotate(180deg);
}

/* grid 0fr -> 1fr animoi sisällön korkeuteen ilman JS-mittausta tai max-heightia. */
.schema-faq .schema-faq-answer-wrapper {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--faq-duration, 0.3s) ease;
}

.schema-faq .schema-faq-answer-wrapper.is-open {
	grid-template-rows: 1fr;
}

/* visibility on saavutettavuutta, ei kosmetiikkaa: pelkkä 0fr jättää suljetun
   vastauksen ruudunlukijalle ja tab-järjestykseen. Diskreettinä ominaisuutena se
   palautuu heti auettaessa mutta vasta animaation lopussa suljettaessa. */
.schema-faq .schema-faq-answer-inner {
	overflow: hidden;
	visibility: hidden;
	transition: visibility var(--faq-duration, 0.3s);
}

.schema-faq .schema-faq-answer-wrapper.is-open .schema-faq-answer-inner {
	visibility: visible;
}

.schema-faq .schema-faq-answer {
	margin: 0;
	padding: var(--faq-answer-padding, 0 0 1.25rem 0);
	font-size: var(--faq-answer-size, 1rem);
	line-height: 1.6;
	color: var(--faq-answer-color, #4a5568);
}

/* WCAG 2.3.3: haitari toimii yhä, se vain avautuu ilman animaatiota. */
@media (prefers-reduced-motion: reduce) {
	.schema-faq .schema-faq-section,
	.schema-faq .faq-icon,
	.schema-faq .schema-faq-answer-wrapper,
	.schema-faq .schema-faq-answer-inner {
		transition: none;
	}
}