/**
 * The accordion - a SHARED COMPONENT (extracted 2026-09-07).
 *
 * Used by:
 *
 *   | surface            | container                | markup                          |
 *   | ------------------ | ------------------------ | ------------------------------- |
 *   | Single product     | `.ml-product__tabs`      | `content-single-product.php`    |
 *   | Shop filter groups | `.ml-filters`            | `woocommerce/archive-product.php` |
 *
 * WHY IT IS ITS OWN FILE. It was written for the product tabs and lived in
 * `product.css`, and every rule in it was already generic - not one was scoped
 * to `.ml-product`. When the shop sidebar needed the same control, the choice
 * was to copy it or to move it. The theme has been here before: `search.css`
 * exists because the same overflow bug had to be fixed twice, in two prefixed
 * copies of one component, and the second copy stayed broken for a day because
 * there was no shared thing to fix.
 *
 * So this is the move, not the copy. `accordion.js` needed NO change at all -
 * it already keyed on `[data-ml-accordion]` and `[data-ml-accordion-trigger]`
 * rather than on anything product-specific.
 *
 * THE CONTRACT, and it is the same one search.css states: an instance may set
 * spacing and may set the body's typography. It does NOT re-declare the card,
 * the trigger, the chevron or the animation. If you find yourself writing
 * `grid-template-rows` or a chevron `rotate` in shop.css or product.css, the
 * split has failed.
 *
 * Product-side typography (`.ml-product__tabs .ml-accordion__body h2/h3/h4`)
 * stays in `product.css` - it is instance styling of the panel contents, not
 * component behaviour.
 *
 * @package Medlife_Child
 */

/*
 * 20px, not the 44px this carried while the block sat full-width below the
 * grid. It is now a flex item in .ml-product__summary, whose own `gap: 12px`
 * already separates it from the assurance strip - 44 on top of that read as a
 * gap twice the size of anything else in the column.
 *
 * Width needs no declaration: the summary is a column flex container with the
 * default `align-items: stretch`, so the accordion fills it.
 */
.ml-accordion {
	margin-top: 20px;
}

/*
 * One hairline ABOVE each header and nothing below - so the rule between two
 * sections is drawn once, not twice, and the list does not close with a
 * trailing line under the last panel. No radius, no shadow, no card: the
 * sections are separated, not boxed.
 */
/*
 * THE CARD TREATMENT MIRRORS `.ml-faq` IN policy.css (2026-09-07), the same way
 * .medlife-carousel__arrow mirrors .ml-banner__arrow. If the FAQ accordion is
 * ever restyled, update this block to match rather than letting the two drift.
 *
 * Copied across: the 12px radius, the `--ml-line` border, the white fill, the
 * 12px gap between items, the hover lift with its shadow, and the open state.
 *
 * NOT copied, deliberately - the FAQ accordion is native `<details>`, so it has
 * **no expand/collapse transition at all**; the browser shows and hides the
 * panel instantly. This accordion animates `grid-template-rows: 0fr -> 1fr` on
 * `--ml-t-panel`, which is the better behaviour and is already on tokens.
 * Matching the FAQ exactly would have meant DELETING that animation.
 */
.ml-accordion__item {
	margin: 0 0 12px;
	border: 1px solid var(--ml-line);
	border-radius: 12px;
	background: var(--ml-white);
	overflow: hidden;
	transition: border-color var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard), transform var(--ml-t-base) var(--ml-e-standard);
}

.ml-accordion__item:hover {
	transform: translateY(-2px);
	border-color: #bfe3f7;
	box-shadow: 0 16px 28px -22px rgba(10, 37, 64, 0.75);
}

/*
 * `.is-open` here, not `[open]` - this accordion is buttons and a JS class,
 * where the FAQ is a native <details>. Same visual state, different hook.
 */
.ml-accordion__item.is-open {
	border-color: #bfe3f7;
	box-shadow: 0 16px 30px -24px rgba(10, 37, 64, 0.7);
}

/* The <h2> is a wrapper for the button, so it carries none of its own type. */
.ml-accordion__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/*
 * `padding` is declared because Astra paints every bare `button` with
 * `padding: 10px 20px` - see the icon-button note in CLAUDE.md. This one has a
 * text label so the padding is real work rather than a reset, but it still has
 * to be stated or Astra sets it.
 */
/* Padding and weight match `.ml-faq > summary`: 16px 18px, 600. */
.ml-accordion__trigger {
	width: 100%;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--ml-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: color var(--ml-t-base) var(--ml-e-standard);
}

/*
 * STATE LOCK, and without it the open section renders as white-on-solid-blue.
 *
 * Astra ships this in its inline Customizer CSS:
 *
 *     button:focus, button:hover, .ast-button:hover, ... {
 *         color: #ffffff;
 *         background-color: var(--ast-global-color-1);   [#045cb4]
 *         border-color: var(--ast-global-color-1);
 *     }
 *
 * That is (0,1,1). A single-class `.ml-accordion__trigger` is (0,1,0) and
 * loses, so the plain `background: none` this block used to carry was being
 * overridden the moment the control was hovered - and a clicked header KEEPS
 * :focus, which is why the open section in particular looked filled.
 *
 * Every state is listed explicitly at (0,2,x) so none of them can be reached.
 * This is the same trap the nav bar hit; see the Categories note in CLAUDE.md.
 */
.ml-accordion .ml-accordion__trigger,
.ml-accordion .ml-accordion__trigger:hover,
.ml-accordion .ml-accordion__trigger:focus,
.ml-accordion .ml-accordion__trigger:focus-visible,
.ml-accordion .ml-accordion__trigger:active {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Navy in every state, including :focus, which Astra would paint white. */
.ml-accordion .ml-accordion__trigger,
.ml-accordion .ml-accordion__trigger:focus {
	color: var(--ml-navy);
}

/*
 * Hover is a colour shift only - no fill. #0077B6 rather than brand cyan
 * because this is 16px/700 body text, under the 18.66px the large-text
 * exemption needs: cyan measures 2.50:1 on white and fails, #0077B6 is 4.87:1
 * and passes. It is the same deeper blue the search icon uses.
 */
.ml-accordion .ml-accordion__trigger:hover,
.ml-accordion .ml-accordion__trigger:focus-visible {
	color: var(--ml-cyan);
}

/*
 * BRAND CYAN, AND IT KNOWINGLY MISSES 1.4.11 - do not "fix" this back.
 *
 * A focus indicator is held to 3:1. Measured on the white panel behind it:
 *
 *     #00AFF0  2.50:1   fails
 *     #0077B6  4.87:1   passes - this was the value until 2026-09-03
 *
 * The site owner chose brand cyan with that figure in hand, so it is a
 * decision rather than an oversight. If it ever has to pass, #0077B6 is the
 * value to come back to - it is also the hover ink on this control, so the
 * button would then carry one accent instead of two.
 */
.ml-accordion .ml-accordion__trigger:focus-visible {
	outline: 3px solid var(--ml-cyan);
	outline-offset: -3px;
}

/*
 * The chevron takes the FAQ accordion's feel: cyan, and eased with
 * `--ml-e-enter` rather than `--ml-e-standard`.
 *
 * `.ml-faq > summary::after` writes that transition as a LITERAL `0.25s`, which
 * is motion-token drift in policy.css. It is not copied: `--ml-t-panel` is
 * 280ms, the nearest token and the same one this accordion's panel already
 * uses, so the chevron and the panel finish together. **Do not reintroduce a
 * literal duration here to match policy.css more exactly** — fix policy.css
 * instead.
 *
 * Cyan on white is 2.50:1. That is fine here and not a 1.4.3 miss: the chevron
 * is decorative, the state is carried by the panel itself and by
 * `aria-expanded`, and the trigger's own label stays navy.
 */
.ml-accordion__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--ml-cyan);
	transition: transform var(--ml-t-panel) var(--ml-e-enter);
}

.ml-accordion.is-ready .ml-accordion__item.is-open .ml-accordion__icon {
	transform: rotate(180deg);
}

/*
 * The 0fr -> 1fr grid trick, so the panel animates to its OWN height with no
 * measured max-height to go stale when the content reflows.
 * `min-height: 0` on the inner track is required or the row refuses to shrink.
 */
.ml-accordion__panel {
	display: grid;
	grid-template-rows: 1fr;
}

.ml-accordion__inner {
	overflow: hidden;
	min-height: 0;
}

/* `.ml-faq > *:not(summary)` sits at `margin: 0 18px 14px` - same inset here. */
.ml-accordion__body { padding: 0 18px 16px; }

.ml-accordion.is-ready .ml-accordion__panel {
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows var(--ml-t-panel) var(--ml-e-standard), visibility 0s linear var(--ml-t-panel);
}

.ml-accordion.is-ready .ml-accordion__item.is-open .ml-accordion__panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows var(--ml-t-panel) var(--ml-e-standard), visibility 0s;
}

/*
 * Reduced motion. Moved here with the component so the cover can never drift
 * from the rules it covers - it used to sit in product.css's own block, which
 * meant the shop sidebar would have animated freely the moment it reused this.
 *
 * The panel's `grid-template-rows` transition, the chevron's rotate and the
 * card's hover lift are all suppressed. Colour and shadow changes are left
 * alone deliberately: 2.3.3 is about motion, not a tint.
 */
@media (prefers-reduced-motion: reduce) {
	.ml-accordion.is-ready .ml-accordion__panel,
	.ml-accordion.is-ready .ml-accordion__item.is-open .ml-accordion__panel,
	.ml-accordion__icon,
	.ml-accordion__item,
	.ml-accordion__trigger {
		transition: none;
	}

	.ml-accordion__item:hover {
		transform: none;
	}
}