/**
 * The FAQ accordion, shared.
 *
 * These rules were scoped to the brand archive until the product page needed
 * the same accordion. Rather than keep two copies that could drift apart,
 * they live here, unscoped - the `kajo-ba-faq__*` names belong to this one
 * component and cannot collide - and both pages load this file.
 *
 * The colour tokens are declared on the brand archive's body; every use below
 * carries a fallback so the component looks the same wherever it is dropped.
 *
 * SPECIFICITY: every selector is prefixed with `body `. The rules used to be
 * scoped to `body.kajo-brand-archive`, which gave them (0,2,1); unscoping
 * dropped them to (0,1,0) and Woodmart's own button and accordion styling
 * started winning - the questions came back uppercase and centred on a grey
 * pill. The `body ` prefix restores the original weight without tying the
 * component to one page.
 *
 * Button + panel rather than <details>/<summary>, because a height animation
 * from 0 to auto is not reliable on <details> outside recent Chrome, and the
 * requested behaviour needs one.
 *
 * Progressive enhancement: the markup ships OPEN. The script adds
 * data-enhanced and closes everything on init, so with no JavaScript every
 * answer is still visible and still in the document. The closed state below
 * is therefore scoped to [data-enhanced].
 */

body .kajo-ba-faq__item {
	border-top: 1px solid var(--kajo-ba-line, rgba(0, 0, 0, .10));
	border-radius: 0;
	background: transparent;
}

body .kajo-ba-faq__item:last-child {
	border-bottom: 1px solid var(--kajo-ba-line, rgba(0, 0, 0, .10));
}

/* the heading exists for document outline only; it must not add its own type scale */
body .kajo-ba-seo .kajo-ba-faq__qwrap,
body .kajo-ba-faq__qwrap {
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
}

body .kajo-ba-faq__q {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	margin: 0;
	/* block axis only: the horizontal padding is set with the hover
	 * highlight at the foot of this file, and a `padding` shorthand here
	 * would silently reset it. */
	padding-block: 14px;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.45;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	/* Woodmart's base.min.css uppercases buttons. The question was sentence
	 * case while it was a <summary>, and it stays sentence case now that it is
	 * a <button> - the element changed, the typography should not. */
	text-transform: none;
	letter-spacing: normal;
}

body .kajo-ba-faq__qtext {
	flex: 1 1 auto;
	min-width: 0;
}

body .kajo-ba-faq__q:focus-visible {
	outline: 2px solid var(--kajo-ba-orange, #f58634);
	outline-offset: 2px;
}

/* the chevron, rotated on the same timing as the box */
body .kajo-ba-faq__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-inline-start: auto;
	color: var(--kajo-ba-orange, #f58634);
	/* matches the script's critically damped spring closely enough that the
	 * two read as one movement; the spring itself drives only the height */
	transition: transform .4s cubic-bezier(.22, 1, .36, 1);
	transform: rotate(0deg);
}

body .kajo-ba-faq__item[data-expanded="true"] .kajo-ba-faq__icon {
	transform: rotate(180deg);
}

/*
 * The panel is height-animated in px by the script and settles to auto, so it
 * must not have padding or a border of its own - those would be included in
 * the measured height and make the close land short.
 */
body .kajo-ba-seo__faq[data-enhanced] .kajo-ba-faq__panel {
	overflow: hidden;
	will-change: height;
}

body .kajo-ba-faq__a {
	padding: 0 28px 16px 0;
}

body .kajo-ba-faq__a p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--kajo-ba-ink-soft, rgba(0, 0, 0, .68));
	text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
	body .kajo-ba-faq__icon {
		transition: none;
	}
}

/* ───────────────────────────────────────────────────────────────────────────
 * On the product page the accordion is the whole tab panel rather than a
 * column beside the brand copy, so it gets a little more room to breathe and
 * the first item's rule doubles as the top of the panel.
 * ------------------------------------------------------------------------ */

body .kajo-pdp-faq .kajo-ba-faq__q {
	padding-block: 16px;
	font-size: 15.5px;
}

body .kajo-pdp-faq .kajo-ba-faq__a {
	padding-inline-end: 34px;
}

body .kajo-pdp-faq .kajo-ba-faq__a p {
	font-size: 14.5px;
}

@media (max-width: 767px) {
	body .kajo-pdp-faq .kajo-ba-faq__q {
		padding-block: 14px;
		font-size: 14.5px;
	}

	body .kajo-pdp-faq .kajo-ba-faq__a {
		padding-inline-end: 8px;
	}
}

/*
 * Inside the product page's tab accordion the FAQ list is nested one level
 * down, and the tab item it sits in already draws a closing rule beneath it.
 * The list's own last-child rule would land 27px above that one - two lines
 * closing the same thing. The outer one wins, because it belongs to the
 * accordion the reader is actually operating.
 *
 * Only below 1024px: above that the tabs are tabs, nothing encloses the list,
 * and it still needs its own bottom.
 */
@media (max-width: 1024px) {
	body .woocommerce-tabs .kajo-pdp-faq .kajo-ba-faq__item:last-child {
		border-bottom: 0;
	}
}

/* ===========================================================================
   The hover highlight.

   The question is a <button>, so Woodmart's blanket rule
       :is(.btn, .button, button, [type="submit"], [type="button"]):hover
           { background-color: var(--btn-bgcolor-hover, #e0e0e0) }
   was painting it grey. The resting state here already set `background: none`
   but never a hover, so the theme owned it.

   It also sat flush against its own contents: the button had `padding: 14px 0`
   - no horizontal padding at all - and spans the full column, so the grey
   rectangle's edges landed exactly on the first letter of the question and on
   the far side of the chevron. Measured at 1440px: 0px to the text, 0px to
   the chevron.

   Horizontal padding is used rather than a negative-margin outdent because
   the same accordion renders inside the product page's tab panel, and that
   panel is overflow:hidden for its open/close animation - anything bleeding
   outward would be clipped there. Padding behaves identically in both places.
   =========================================================================== */

body .kajo-ba-faq__q {
	padding-inline: 14px;
	border-radius: 10px;
	/* the highlight should arrive and leave, not blink */
	transition: background-color .18s ease, color .18s ease;
}

body .kajo-ba-faq__q:hover,
body .kajo-ba-faq__q:focus-visible {
	/* olive, the brand archive's own, kept translucent so the question stays
	   as readable hovered as it is at rest */
	background-color: rgba(82, 105, 72, .10);
	color: var(--kajo-ba-olive, #526948);
}

body .kajo-ba-faq__item[data-expanded="true"] .kajo-ba-faq__q {
	color: var(--kajo-ba-olive, #526948);
}

/* The answer lines up with the question, not with the rule above it. */
body .kajo-ba-faq__a {
	padding-inline: 14px 42px;
}

@media (prefers-reduced-motion: reduce) {
	body .kajo-ba-faq__q {
		transition: none;
	}
}