/**
 * Product specifications table.
 *
 * Partner of template-parts/product/specifications.php. Ports the look of the legacy
 * [product_specifications] snippet — same rhythm, same hairlines, same toggle — but as
 * a real, cacheable, enqueued stylesheet instead of an inline <style> repeated on every
 * render.
 *
 * There is no JavaScript anywhere in this component. The collapse is a native
 * <details>/<summary>; everything below keys off the [open] attribute the browser
 * manages for us: the label swap, the triangle rotation and the closed-state fade.
 *
 * Colours are the theme's design tokens only — never a raw hex. The tokens are declared
 * once by the theme's base stylesheet, which also redefines them under
 * prefers-color-scheme: dark, so this component follows the colour scheme without a
 * single dark-mode rule of its own.
 *
 * @package Bedi\Theme
 */

/* -------------------------------------------------------------------------- *
 * Component scope and local metrics
 * -------------------------------------------------------------------------- */

.bedi-specs {
	/*
	 * Row height and the fade height are shared with the PHP: specifications.php uses
	 * the same numbers to estimate where to put the fold. Change one, change both.
	 */
	--bedi-specs-row-height: 42px;
	--bedi-specs-fade-height: 70px;

	/* Legacy sizes were 18px and 14px; expressed in rem so user text scaling works. */
	--bedi-specs-title-size: 1.125rem;
	--bedi-specs-row-size: 0.875rem;

	--bedi-specs-gap: 1.5rem;
	--bedi-specs-inline-padding: 0.25rem;

	color: var(--bedi-ink);
	font-size: var(--bedi-specs-row-size);
	line-height: 1.45;
}

/* -------------------------------------------------------------------------- *
 * Group heading
 * -------------------------------------------------------------------------- */

.bedi-specs__title {
	margin-block: var(--bedi-specs-gap) 0.5rem;
	color: var(--bedi-ink);
	font-size: var(--bedi-specs-title-size);
	font-weight: 800;
	line-height: 1.3;
}

.bedi-specs__visible > .bedi-specs__title:first-child,
.bedi-specs__rest > .bedi-specs__title:first-child {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------- *
 * Rows
 *
 * <dl> with a <div> per pair: the div is what carries the hairline and the flex
 * layout, because dt and dd cannot be flex siblings of each other reliably.
 * -------------------------------------------------------------------------- */

.bedi-specs__list {
	margin: 0;
	padding: 0;
}

.bedi-specs__row {
	display: flex;
	align-items: center;
	min-block-size: var(--bedi-specs-row-height);
	padding-inline: var(--bedi-specs-inline-padding);
	border-block-end: 1px solid var(--bedi-rule);
	gap: 1rem;
}

.bedi-specs__row:last-child {
	border-block-end: 0;
}

/*
 * flex: 1 1 0 rather than a literal 50% basis: with the gap included, two 50% bases
 * overflow the row. Equal zero bases split the remaining space exactly in half, which
 * is what the legacy 50/50 actually looked like.
 */
.bedi-specs__name {
	flex: 1 1 0;
	min-inline-size: 0;
	margin: 0;
	font-weight: 500;
}

.bedi-specs__value {
	flex: 1 1 0;
	min-inline-size: 0;
	/* The UA gives dd a 40px inline start margin. It is not wanted here. */
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------- *
 * The fold
 *
 * <details> holds every group past the first screenful. The summary is styled as a
 * full-width button; the fade over the content above it is a pseudo-element on that
 * summary rather than an overlay div, because with no JavaScript there would be
 * nothing to remove an overlay when the table expands.
 * -------------------------------------------------------------------------- */

/*
 * THE TOGGLE SITS BELOW THE CONTENT IT REVEALS, and `order` is the only way to
 * get that from a <details>.
 *
 * A <summary> must be the first child of its <details> — that is the element's
 * definition, not a convention — so the browser always paints it above the
 * disclosed content. With ten rows visible and six groups hidden, that left
 * "დაკეცვა" stranded in the middle of the expanded table, pointing at nothing,
 * with several hundred pixels of specification below it.
 *
 * Making the <details> a flex column and giving the summary `order: 2` moves it
 * to the bottom in the open state, where a collapse control belongs. The DOM
 * order is untouched, so the disclosure semantics, the keyboard handling and
 * the screen-reader announcement are all exactly what they were.
 *
 * In the CLOSED state there is nothing else to order against — the browser
 * hides every non-summary child — so the button is simply where it always was.
 */
.bedi-specs__fold {
	display: flex;
	flex-direction: column;
	margin-block-start: 0.75rem;
}

.bedi-specs__toggle {
	order: 2;
	/*
	 * THE GAP THAT MAKES THE HAIRLINE READ.
	 *
	 * The fold is a flex column with no gap, so this button's border box sat
	 * flush on the bottom of the rows above it — measured at zero. A 1px
	 * --bedi-rule top edge with nothing above it does not read as the top of a
	 * button; it reads as one more table rule, or as nothing at all, which is
	 * how it was reported. The border was always painting. What it lacked was
	 * air to be a border against.
	 *
	 * Margin rather than a gap on the fold, because the fold's two children are
	 * order-swapped: `gap` would also open a space in the CLOSED state between
	 * the summary and a panel that is not being shown.
	 */
	margin-block-start: var(--bedi-space-5);
}

/*
 * THE TOGGLE IS THE THEME'S GHOST BUTTON, not a button of its own.
 *
 * This component predates the design system and had drifted off it on six axes
 * at once — measured: a 4px radius (the ladder is 3 / 6 / 12 / 18 / 999), a
 * font-weight of 600 (the theme ships 400 / 500 / 700 and nothing else), a
 * 160ms transition (the tokens are 120 / 220 / 420), a 42px height (the button
 * heights are 44 / 48 / 52), 14px text, and an --bedi-link-brand border, which
 * is the ACCENT-STRONG blue — a pressed state — used as a resting outline.
 *
 * It is now the same object as `.bedi-buy-now`: a 48px white button on the
 * shared 12px radius, with a --bedi-rule hairline that goes navy on hover. That pairing is deliberate —
 * both are the quiet secondary action on their surface, and a visitor who has
 * learned one has learned the other.
 */
.bedi-specs__toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bedi-space-2);
	block-size: 48px;
	padding-inline: var(--bedi-space-5);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	background-color: var(--bedi-surface);
	color: var(--bedi-ink);
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-medium);
	text-align: center;
	cursor: pointer;
	user-select: none;
	/* Removes the disclosure marker in Firefox and Chromium; Safari needs the two rules below. */
	list-style: none;
	transition:
		border-color var(--bedi-dur-micro) var(--bedi-ease-out),
		color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-specs__toggle::-webkit-details-marker {
	display: none;
}

.bedi-specs__toggle::marker {
	content: "";
}

/* Border and text only — no fill change. The same restraint `.bedi-buy-now`
   shows, and for the same reason: the quieter control stays quieter in
   motion, not just in colour. */
.bedi-specs__toggle:hover,
.bedi-specs__toggle:focus-visible {
	border-color: var(--bedi-navy);
	color: var(--bedi-navy);
}

.bedi-specs__toggle:focus-visible {
	outline: 3px solid var(--bedi-accent);
	outline-offset: 2px;
}

/*
 * Closed state: a soft fade over the last ~70px of the rows above the summary. It sits
 * on ::before so ::after is free for the triangle, and it is painted upward out of the
 * summary box — no ancestor in this component clips it.
 */
.bedi-specs__toggle::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	block-size: var(--bedi-specs-fade-height);
	background-image: linear-gradient(to bottom, transparent, var(--bedi-surface));
	pointer-events: none;
}

.bedi-specs__fold[open] > .bedi-specs__toggle::before {
	content: none;
}

/*
 * A CHEVRON, not a border-triangle. Every other disclosure in this theme — the
 * instalment panel, the FAQ, the contact rows, the sort listbox — uses a
 * stroked chevron, and a solid triangle here was the last piece of pre-system
 * iconography on the product page. Masked so it takes `currentColor` and
 * follows the label into navy on hover.
 */
.bedi-specs__toggle::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 16px;
	block-size: 16px;
	background-color: currentColor;
	-webkit-mask: var(--bedi-chevron-mask) center / contain no-repeat;
	mask: var(--bedi-chevron-mask) center / contain no-repeat;
	transition: transform var(--bedi-dur) var(--bedi-ease-in);
}

.bedi-specs__fold[open] > .bedi-specs__toggle::after {
	transform: rotate(180deg);
}

/* Label swap. Both spans are in the markup; CSS decides which one is shown. */
.bedi-specs__less {
	display: none;
}

.bedi-specs__fold[open] > .bedi-specs__toggle .bedi-specs__more {
	display: none;
}

.bedi-specs__fold[open] > .bedi-specs__toggle .bedi-specs__less {
	display: inline;
}

.bedi-specs__rest {
	order: 1;
	padding-block-start: 0.5rem;
}

/*
 * THE REVEAL, IN TWO LAYERS.
 *
 * LAYER ONE, no script required: the disclosed groups fade and rise as they
 * arrive. This is the same gesture the FAQ uses (product.css, `bedi-faq-in`)
 * and for the same stated reason — a <details>' content is display-toggled, so
 * it cannot be transitioned, only animated once it is laid out.
 *
 * LAYER TWO, added by assets/js/specs.js: a real height transition, so the
 * page does not jump by six hundred pixels in one frame. That one needs a
 * measurement, which needs a script — hence `.is-animating`, which the script
 * adds for the duration and removes afterwards so the panel goes back to being
 * `height: auto` and can reflow when the viewport changes.
 *
 * The two do not fight: while `.is-animating` is set the keyframe is
 * suppressed, because a fade-and-rise on top of a height transition reads as
 * two separate things happening to one panel.
 */
.bedi-specs__fold[open] > .bedi-specs__rest {
	animation: bedi-specs-in var(--bedi-dur-lg, 420ms) var(--bedi-ease-out, cubic-bezier(0.4, 0, 0.2, 1)) both;
}

.bedi-specs__rest.is-animating {
	animation: none;
	overflow: hidden;
	transition:
		block-size var(--bedi-dur-lg, 420ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1)),
		padding-block-start var(--bedi-dur-lg, 420ms) var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1));
}

@keyframes bedi-specs-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------- *
 * Narrow viewports
 *
 * The 50/50 split stops working once the value needs more than half a phone. Below
 * 768px the row becomes a stacked block: name, then value under it, height driven by
 * the content instead of the 42px desktop rhythm.
 * -------------------------------------------------------------------------- */

@media (max-width: 768px) {

	.bedi-specs__row {
		display: block;
		min-block-size: 0;
		padding-block: 0.5rem;
	}

	.bedi-specs__value {
		padding-block-start: 0.125rem;
	}
}

/* -------------------------------------------------------------------------- *
 * Reduced motion
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.bedi-specs__toggle,
	.bedi-specs__toggle::after,
	.bedi-specs__rest.is-animating {
		transition: none;
	}

	/*
	 * The disclosure still works and still moves the toggle to the bottom —
	 * that is placement, not decoration. Only the travel is removed.
	 * specs.js checks the same preference and skips its measurement entirely,
	 * so the panel simply appears.
	 */
	.bedi-specs__fold[open] > .bedi-specs__rest {
		animation: none;
	}
}