/*
 * Accordion: one look for every expandable row on the site
 * - core/details (the Tiedot block: page content and the questions of avalon/faq),
 * - the product page's tabs (avalon/product-accordion: .ab-accordion__item),
 * - the category's "Lue lisää" text (the theme's avalon/term-extra: .an-term-extra).
 * Hairline rows, an airy question row of at least 64px, a plain chevron (no circle: minimal, 2026-09-25) that turns
 * when the row is open. Dark variant inside navy sections. Opening is animated with CSS only where the
 * browser can (no script needed).
 *
 * (The theme keeps only the layout of "Lue lisää" in the archive head.)
 */

/* ------------------------------------------------------------ rows */

:is(.wp-block-details, .ab-accordion__item, .an-term-extra) {
	--ab-acc-line: var(--ab-line, #e3e8ee);
	--ab-acc-circle: transparent;
	--ab-acc-hover: transparent;
	--ab-acc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002b56' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	--ab-acc-chevron-hover: var(--ab-acc-chevron);
	--ab-acc-focus: var(--ab-navy, #002b56);
	box-sizing: border-box;
	border-bottom: 1px solid var(--ab-acc-line);
	background: none;
}

/* the first row of a run also gets a line on top */
:is(.wp-block-details, .ab-accordion__item, .an-term-extra):not(:is(.wp-block-details, .ab-accordion__item, .an-term-extra) + *) {
	border-top: 1px solid var(--ab-acc-line);
}

/* questions are text: in page content the rows are at most 760px wide, from the left edge of the text */
.wp-block-details:not(.alignwide, .alignfull) {
	max-width: var(--ab-text-width, 760px);
}

/* rows of a run touch (the flow layouts put a gap between blocks) */
.wp-block-details.wp-block-details.wp-block-details + .wp-block-details {
	margin-block-start: 0;
}

/* on a light section (#f2f6f8) the circle is white by itself (--ab-tint is white there: blocks.css .ab-bg-light and
   components/base.css); the hairline gets a little navy so it does not melt into the background (before the navy
   rule, which wins when a navy section sits inside a light one) */
:is(.ab-bg-light, .has-light-background-color) :is(.wp-block-details, .ab-accordion__item, .an-term-extra) {
	--ab-acc-line: rgba(0, 43, 86, 0.14);
}

/* on navy: white text, lighter lines and circle */
:is(.is-dark, .has-navy-background-color) :is(.wp-block-details, .ab-accordion__item, .an-term-extra) {
	--ab-acc-line: rgba(255, 255, 255, 0.2);
	--ab-acc-circle: transparent;
	--ab-acc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	--ab-acc-chevron-hover: var(--ab-acc-chevron);
	--ab-acc-focus: var(--ab-accent, #30cbd3);
}

/* ------------------------------------------------------------ question row */

:is(.wp-block-details, .ab-accordion__item, .an-term-extra) > summary,
.ab-accordion__item > .ab-accordion__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	min-height: 64px;
	margin: 0;
	padding: 20px 0;
	border-radius: 0;
	color: var(--ab-heading, #012b55);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

:is(.wp-block-details, .ab-accordion__item, .an-term-extra) > summary::-webkit-details-marker {
	display: none;
}

/* the chevron (plain, no circle) */
:is(.wp-block-details, .ab-accordion__item, .an-term-extra) > summary::after,
.ab-accordion__item > .ab-accordion__title::after {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--ab-acc-circle) var(--ab-acc-chevron) center / 18px no-repeat;
	transition: transform 0.2s ease, background-color 0.15s ease;
}

:is(.wp-block-details, .ab-accordion__item, .an-term-extra) > summary:hover::after,
.ab-accordion__item > .ab-accordion__title:hover::after {
	background-color: var(--ab-acc-hover);
	background-image: var(--ab-acc-chevron-hover);
}

:is(.wp-block-details, .ab-accordion__item, .an-term-extra)[open] > summary::after {
	transform: rotate(180deg);
}

:is(.wp-block-details, .ab-accordion__item, .an-term-extra) > summary:focus {
	outline: none;
}

:is(.wp-block-details, .ab-accordion__item, .an-term-extra) > summary:focus-visible {
	outline: 2px solid var(--ab-acc-focus);
	outline-offset: 2px;
}

@media (min-width: 1025px) {
	:is(.wp-block-details, .ab-accordion__item, .an-term-extra) > summary,
	.ab-accordion__item > .ab-accordion__title {
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.wp-block-details, .ab-accordion__item, .an-term-extra) > summary::after {
		transition: none;
	}
}

/* ------------------------------------------------------------ panel */

/* core/details has its blocks right after the summary; the product and category panels have a wrapper */
.wp-block-details[open] {
	padding-bottom: 28px;
}

.ab-accordion__item > .ab-accordion__body,
.an-term-extra > .an-term-extra__content {
	padding: 0 0 20px;
}

/* text rhythm inside a panel: 12px between paragraphs and lists, more around headings and components
   (html + :is(): stronger than the flow layout's block gap) */
html :is(.wp-block-details > :not(summary), .ab-accordion__body > *, .an-term-extra__content > *) {
	margin-block: 0;
}

html :is(.wp-block-details > :not(summary) + *, .ab-accordion__body > * + *, .an-term-extra__content > * + *) {
	margin-block-start: var(--ab-flow-p, 12px);
}

/* headings in a panel (also inside leftover wrappers of old page builders): h2 20px, the rest 18px */
html :is(.wp-block-details, .ab-accordion__body, .an-term-extra__content) :is(h2, h3, h4, h5, h6) {
	color: var(--ab-heading, #012b55);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

html :is(.wp-block-details, .ab-accordion__body, .an-term-extra__content) :is(h3, h4, h5, h6) {
	font-size: 18px;
}

html :is(.wp-block-details > :not(summary), .ab-accordion__body > *, .an-term-extra__content > *) + :is(h2, h3, h4, h5, h6) {
	margin-block-start: 24px;
}

html :is(.wp-block-details, .ab-accordion__body, .an-term-extra__content) > :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: 8px;
}

html :is(.wp-block-details, .ab-accordion__body, .an-term-extra__content) > * + :is(table, figure, .wp-block-table, .wp-block-image, .wp-block-columns, .wp-block-group, .wp-block-buttons, .kncc-iframe-placeholder),
html :is(.wp-block-details, .ab-accordion__body, .an-term-extra__content) > :is(table, figure, .wp-block-table, .wp-block-image, .wp-block-columns, .wp-block-group, .wp-block-buttons) + * {
	margin-block-start: 20px;
}

/* line length */
html :is(.wp-block-details, .ab-accordion__body, .an-term-extra__content) > :is(p, ul, ol) {
	max-width: var(--ab-measure, 68ch);
}

html :is(.wp-block-details, .ab-accordion__body, .an-term-extra__content) > :is(ul, ol) {
	padding-inline-start: 1.25em;
}

html :is(.wp-block-details, .ab-accordion__body, .an-term-extra__content) > :is(ul, ol) > li + li {
	margin-block-start: 4px;
}

/* leftover WPBakery wrappers in a panel (page 89, until the converter removes them): the first and last text in a
   wrapper lose the theme's paragraph and heading margins, so the panel keeps its 20px bottom like the others */
html :is(.wp-block-details, .ab-accordion__body, .an-term-extra__content) .wpb_wrapper > :first-child {
	margin-top: 0;
}

html :is(.wp-block-details, .ab-accordion__body, .an-term-extra__content) .wpb_wrapper > :last-child {
	margin-bottom: 0;
}

/* product tabs: the tab plugin repeats the tab title as a heading at the top of the panel */
.ab-accordion__body > .yikes-custom-woo-tab-title:first-child {
	display: none;
}

html .ab-accordion__body > .yikes-custom-woo-tab-title:first-child + * {
	margin-block-start: 0;
}

/* product tabs on phones: link lists (files, accessories: links separated by line breaks) get 44px tap targets */
@media (max-width: 768px) {
	.ab-accordion__body p:has(> br) > a {
		display: inline-block;
		padding-block: 10px;
		line-height: 24px;
	}
}

/* ------------------------------------------------------------ opening animation (CSS only, where supported) */

@media (prefers-reduced-motion: no-preference) {
	@supports (interpolate-size: allow-keywords) and selector(::details-content) {
		:is(.wp-block-details, .ab-accordion__item, .an-term-extra) {
			interpolate-size: allow-keywords;
			transition: padding-bottom 0.25s ease;
		}

		:is(.wp-block-details, .ab-accordion__item, .an-term-extra)::details-content {
			block-size: 0;
			overflow-y: clip;
			transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
		}

		:is(.wp-block-details, .ab-accordion__item, .an-term-extra)[open]::details-content {
			block-size: auto;
		}
	}
}

/* ------------------------------------------------------------ Usein kysyttyä (avalon/faq) */

/* a question list is text: at most 760px wide, from the section's left edge (like the rows themselves) */
.ab-faq__list {
	max-width: var(--ab-text-width, 760px);
}

.ab-faq__list > .wp-block-details {
	margin-block: 0;
}