/* ==========================================================================
   Bluefort Accordion — Figma 6498:2964

   White cards, one open at a time, built on <details>/<summary> so the whole
   thing works with no JavaScript at all: the browser opens and closes it, the
   keyboard works, and the `name` attribute gives one-at-a-time for free where
   it is supported. The script only adds the slide.

   Every rule that names a package class is written TWICE in one selector list:
   the bare form and the `#top #wrap_all` form. No !important. No margin or
   padding shorthand, `margin-block` included.

   1. Registered properties
   2. Tokens
   3. Cap-height trimming
   4. The stack
   5. The head
   6. The plus / minus
   7. The panel
   8. Chips
   9. Responsive
   ========================================================================== */

/* 1. Registered properties ================================================= */

@property --bf-fb {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --bf-acc-tt {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@property --bf-acc-tb {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

/* 2. Tokens ================================================================
   Colour, margin and duration tokens are re-emitted INLINE by the render. The
   values below are their fallbacks and must match it value for value.
   ========================================================================== */

.bf-acc,
#top #wrap_all .bf-acc {
	--bf-fb: 0;

	/* Re-emitted inline by the render. */
	--bf-acc-mt: 0px;
	--bf-acc-mb: 0px;
	--bf-acc-card-bg: #FFFFFF;
	--bf-acc-title-c: #1C1C1C;
	--bf-acc-highlight-bg: #E6EDF6;
	--bf-acc-body-c: #595959;
	--bf-acc-rule-c: #E8E8E8;
	--bf-acc-chip-bg: #024EA3;
	--bf-acc-chip-c: #FFFFFF;
	--bf-acc-icon-c: #024EA3;
	--bf-acc-dur: 300ms;

	/* The ramp reads an inline token into a -now token and never re-declares
	   the token itself. That is not only about preserving the panel value: an
	   inline style BEATS a media query, so a @media block that re-declares
	   --bf-acc-dur does nothing whatsoever. The reduced-motion block below sets
	   the -now copy, which is what everything actually reads. */
	--bf-acc-mt-now: var(--bf-acc-mt);
	--bf-acc-dur-now: var(--bf-acc-dur);

	--bf-acc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--bf-acc-gap: 8px;
	--bf-acc-radius: 8px;
	--bf-acc-chip-radius: 4px;

	/* 40 and 32 across the design's 1170px frame. Proportions of the
	   CONTAINER, not the viewport. */
	--bf-acc-pad-x: clamp(20px, 3.4188cqi, 40px);
	--bf-acc-pad-y-closed: clamp(16px, 2.735cqi, 32px);
	--bf-acc-pad-y-open: var(--bf-acc-pad-x);

	--bf-acc-title-fs: 1.25rem;          /* 20 */
	--bf-acc-title-lh-ratio: 1.2;        /* 24 / 20 */
	--bf-acc-title-ls: -0.01em;          /* −0.2px at 20px */

	--bf-acc-body-fs: 1rem;
	--bf-acc-body-lh-ratio: 1.5;         /* 24 / 16 */

	--bf-acc-highlight-pad: 8px;
	--bf-acc-block: 28px;                /* head → body → rule → proof */
	--bf-acc-proof-gap: 20px;            /* label → chips */
	--bf-acc-chip-gap: 8px;
	--bf-acc-chip-pad-x: 10px;
	--bf-acc-chip-pad-y: 6px;
	--bf-acc-para-gap: 24px;             /* one blank line between paragraphs */
	--bf-acc-head-gap: 24px;             /* title → plus/minus */

	/* Lucide's minus and plus at 20px: a 24-unit box, a 2-unit stroke with
	   round caps, and a line from 5 to 19. */
	--bf-acc-icon-size: 20px;
	--bf-acc-icon-bar: 1.6667px;
	--bf-acc-icon-len: 11.6667px;

	/* Inter, read from the variable font: upem 2048, hhea ascender 1984,
	   descender −494, cap height 1490, USE_TYPO_METRICS set. */
	--bf-acc-asc: 0.96875;
	--bf-acc-desc: 0.2412109375;
	--bf-acc-cap: 0.7275390625;

	/* Unregistered copies the trim reads; a harness overrides THESE. */
	--bf-acc-asc-t: var(--bf-acc-asc);
	--bf-acc-desc-t: var(--bf-acc-desc);
	--bf-acc-cap-t: var(--bf-acc-cap);
}

/* 3. Cap-height trimming ===================================================
   The design's gaps are cap box to cap box: the head's 20/24 title is 15 tall,
   the body's lines are 24 apart and the block is 84 for four of them, and the
   28px gaps are measured from those edges.

     half-leading = (line box − (asc + desc) × font-size) ÷ 2
     trim-top     = half-leading + (asc − cap) × font-size
     trim-bottom  = half-leading + desc × font-size

   The BODY's paragraphs are trimmed rather than the body itself: a container
   of block boxes has no inline formatting context of its own, so `text-box`
   would be a silent no-op there while the fallback's negative margins still
   applied.
   ========================================================================== */

.bf-acc .bf-acc-t,
#top #wrap_all .bf-acc .bf-acc-t,
.bf-acc .bf-acc__body > p,
#top #wrap_all .bf-acc .bf-acc__body > p {
	/* Never an element carrying padding, a background or a border: the title
	   chip and the coloured chips are padded, so the trim sits on the span
	   inside each of them. */
	display: block;

	--bf-acc-lead: calc((var(--bf-acc-lh) - (var(--bf-acc-asc-t) + var(--bf-acc-desc-t)) * var(--bf-acc-fs)) / 2);
	--bf-acc-tt: calc(var(--bf-fb) * (var(--bf-acc-lead) + (var(--bf-acc-asc-t) - var(--bf-acc-cap-t)) * var(--bf-acc-fs)));
	--bf-acc-tb: calc(var(--bf-fb) * (var(--bf-acc-lead) + var(--bf-acc-desc-t) * var(--bf-acc-fs)));

	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-box: trim-both cap alphabetic;

	margin-block-start: calc(-1 * var(--bf-acc-tt));
	margin-block-end: calc(-1 * var(--bf-acc-tb));
}

@supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) {

	.bf-acc,
	#top #wrap_all .bf-acc {
		--bf-fb: 1;
	}
}

/* 4. The stack ============================================================= */

.bf-acc,
#top #wrap_all .bf-acc {
	display: flex;
	flex-direction: column;

	/* So the paddings above can size themselves against THIS box rather than
	   the viewport. */
	container-type: inline-size;

	row-gap: var(--bf-acc-gap);
	margin-top: var(--bf-acc-mt-now);
	margin-bottom: var(--bf-acc-mb);
	font-family: var(--bf-acc-font);
}

.bf-acc .bf-acc__item,
#top #wrap_all .bf-acc .bf-acc__item {
	display: block;
	padding-block-start: var(--bf-acc-pad-y-closed);
	padding-block-end: var(--bf-acc-pad-y-closed);
	padding-inline-start: var(--bf-acc-pad-x);
	padding-inline-end: var(--bf-acc-pad-x);
	background-color: var(--bf-acc-card-bg);
	border-radius: var(--bf-acc-radius);
	transition-property: padding-block-start, padding-block-end;
	transition-duration: var(--bf-acc-dur-now);
	transition-timing-function: ease;
}

.bf-acc .bf-acc__item[open],
#top #wrap_all .bf-acc .bf-acc__item[open] {
	padding-block-start: var(--bf-acc-pad-y-open);
	padding-block-end: var(--bf-acc-pad-y-open);
}

/* An item with nothing to reveal never grows, so it never changes padding. */
.bf-acc .bf-acc__item--bare[open],
#top #wrap_all .bf-acc .bf-acc__item--bare[open] {
	padding-block-start: var(--bf-acc-pad-y-closed);
	padding-block-end: var(--bf-acc-pad-y-closed);
}

/* 5. The head ==============================================================
   `summary` is display: list-item in the UA stylesheet and draws a marker.
   Both have to go, and `display` is the one property that must be set here.
   ========================================================================== */

.bf-acc .bf-acc__head,
#top #wrap_all .bf-acc .bf-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: var(--bf-acc-head-gap);
	list-style: none;
	cursor: pointer;

	/* The UA gives no padding to a summary, but Enfold gives one to almost
	   everything. */
	padding-block-start: 0;
	padding-block-end: 0;
	padding-inline-start: 0;
	padding-inline-end: 0;
}

.bf-acc .bf-acc__head::-webkit-details-marker,
#top #wrap_all .bf-acc .bf-acc__head::-webkit-details-marker {
	display: none;
}

/* :focus-visible, never :focus — a mouse click leaves the summary focused, and
   a permanent ring on a clicked heading reads as a bug. */
.bf-acc .bf-acc__head:focus,
#top #wrap_all .bf-acc .bf-acc__head:focus {
	outline-width: 0;
	outline-style: none;
}

.bf-acc .bf-acc__head:focus-visible,
#top #wrap_all .bf-acc .bf-acc__head:focus-visible {
	outline-width: 2px;
	outline-style: solid;
	outline-color: var(--bf-acc-icon-c);
	outline-offset: 4px;
}

/* The chip that appears behind the heading while the item is open. Padded and
   painted, so the trim lives on the span inside it. */
.bf-acc .bf-acc__title-wrap,
#top #wrap_all .bf-acc .bf-acc__title-wrap {
	display: block;
	min-width: 0;
	padding-block-start: 0;
	padding-block-end: 0;
	padding-inline-start: 0;
	padding-inline-end: 0;
	background-color: transparent;
	border-radius: var(--bf-acc-chip-radius);
	transition-property: padding-block-start, padding-block-end, padding-inline-start, padding-inline-end, background-color;
	transition-duration: var(--bf-acc-dur-now);
	transition-timing-function: ease;
}

.bf-acc .bf-acc__item[open] .bf-acc__title-wrap,
#top #wrap_all .bf-acc .bf-acc__item[open] .bf-acc__title-wrap {
	padding-block-start: var(--bf-acc-highlight-pad);
	padding-block-end: var(--bf-acc-highlight-pad);
	padding-inline-start: var(--bf-acc-highlight-pad);
	padding-inline-end: var(--bf-acc-highlight-pad);
	background-color: var(--bf-acc-highlight-bg);
}

.bf-acc .bf-acc__title,
#top #wrap_all .bf-acc .bf-acc__title {
	--bf-acc-fs: var(--bf-acc-title-fs);
	--bf-acc-lh: calc(var(--bf-acc-title-lh-ratio) * var(--bf-acc-fs));

	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-block-start: 0;
	padding-block-end: 0;
	padding-inline-start: 0;
	padding-inline-end: 0;
	font-family: var(--bf-acc-font);
	font-size: var(--bf-acc-fs);
	font-weight: 500;
	font-style: normal;
	line-height: var(--bf-acc-lh);
	letter-spacing: var(--bf-acc-title-ls);
	color: var(--bf-acc-title-c);
	text-align: start;
}

/* 6. The plus / minus ======================================================
   Two bars rather than an icon file: this package could not reach the exported
   asset, and a plus is a geometric primitive rather than artwork. The
   proportions are lucide's, in the tokens above. The vertical bar collapses
   when the item opens, which is also the transition.
   ========================================================================== */

.bf-acc .bf-acc__icon,
#top #wrap_all .bf-acc .bf-acc__icon {
	position: relative;
	display: block;
	flex-grow: 0;
	flex-shrink: 0;
	width: var(--bf-acc-icon-size);
	height: var(--bf-acc-icon-size);
}

.bf-acc .bf-acc__bar,
#top #wrap_all .bf-acc .bf-acc__bar {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	background-color: var(--bf-acc-icon-c);
	border-radius: var(--bf-acc-icon-bar);
	transition-property: transform, opacity;
	transition-duration: var(--bf-acc-dur-now);
	transition-timing-function: ease;
}

.bf-acc .bf-acc__bar--h,
#top #wrap_all .bf-acc .bf-acc__bar--h {
	width: var(--bf-acc-icon-len);
	height: 2px;
	transform: translate(-50%, -50%);
}

.bf-acc .bf-acc__bar--v,
#top #wrap_all .bf-acc .bf-acc__bar--v {
	width: 2px;
	height: var(--bf-acc-icon-len);
	transform: translate(-50%, -50%) scaleY(1);
	opacity: 1;
}

.bf-acc .bf-acc__item[open] .bf-acc__bar--v,
#top #wrap_all .bf-acc .bf-acc__item[open] .bf-acc__bar--v {
	transform: translate(-50%, -50%) scaleY(0);
	opacity: 0;
}

/* 7. The panel =============================================================
   The 0fr → 1fr grid row is what slides. The inner wrapper must carry NO
   padding: a padded box in a 0fr row gets a zero content box and a border box
   the size of its own padding, so the "collapsed" row stays as tall as the
   padding for ever. The 28px above the body is a margin on the first child,
   which is clipped along with everything else.
   ========================================================================== */

.bf-acc .bf-acc__panel,
#top #wrap_all .bf-acc .bf-acc__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition-property: grid-template-rows;
	transition-duration: var(--bf-acc-dur-now);
	transition-timing-function: ease;
}

.bf-acc .bf-acc__item[open] .bf-acc__panel,
#top #wrap_all .bf-acc .bf-acc__item[open] .bf-acc__panel {
	grid-template-rows: 1fr;
}

/* The script keeps the item open while it animates shut, so the closing state
   has to beat the rule above: same shape, one more class, later in the file. */
.bf-acc .bf-acc__item[open].bf-acc__item--closing .bf-acc__panel,
#top #wrap_all .bf-acc .bf-acc__item[open].bf-acc__item--closing .bf-acc__panel {
	grid-template-rows: 0fr;
}

.bf-acc .bf-acc__panel-inner,
#top #wrap_all .bf-acc .bf-acc__panel-inner {
	overflow: hidden;
	min-height: 0;
}

.bf-acc .bf-acc__panel-inner > :first-child,
#top #wrap_all .bf-acc .bf-acc__panel-inner > :first-child {
	margin-block-start: var(--bf-acc-block);
}

.bf-acc .bf-acc__body,
#top #wrap_all .bf-acc .bf-acc__body {
	/*
	 * A FLEX column, not a block.
	 *
	 * As a block, the trimmed paragraphs' negative bottom margins COLLAPSE with
	 * the next sibling's positive top margin — so a 24px rhythm margin became
	 * 24 − tb in the fallback branch and 24 in the native one, and the two
	 * branches disagreed by 6.25px on any body with more than one block in it.
	 * Nothing looked wrong in either branch on its own.
	 *
	 * Flex containers do not collapse margins, the children's own negative
	 * margins are respected, and a design gap between trimmed children is then
	 * just row-gap — cap box to cap box, identical in both branches. It also
	 * makes the body itself cap-box-aligned, which is what the 28px above and
	 * below it are measured from.
	 */
	display: flex;
	flex-direction: column;
	row-gap: var(--bf-acc-para-gap);
	color: var(--bf-acc-body-c);
}

.bf-acc .bf-acc__body > p,
#top #wrap_all .bf-acc .bf-acc__body > p {
	--bf-acc-fs: var(--bf-acc-body-fs);
	--bf-acc-lh: calc(var(--bf-acc-body-lh-ratio) * var(--bf-acc-fs));

	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-block-start: 0;
	padding-block-end: 0;
	padding-inline-start: 0;
	padding-inline-end: 0;
	font-family: var(--bf-acc-font);
	font-size: var(--bf-acc-fs);
	font-weight: 400;
	font-style: normal;
	line-height: var(--bf-acc-lh);
	letter-spacing: normal;
	color: inherit;
}

/* Enfold indents every list inside #top #wrap_all by 25px. */
.bf-acc .bf-acc__body ul,
#top #wrap_all .bf-acc .bf-acc__body ul,
.bf-acc .bf-acc__body ol,
#top #wrap_all .bf-acc .bf-acc__body ol {
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 1.25em;
	margin-inline-end: 0;
	padding-inline-start: 0;
	font-size: var(--bf-acc-body-fs);
	line-height: calc(var(--bf-acc-body-lh-ratio) * var(--bf-acc-body-fs));
	color: inherit;
}

.bf-acc .bf-acc__rule,
#top #wrap_all .bf-acc .bf-acc__rule {
	display: block;
	height: 1px;
	margin-block-start: var(--bf-acc-block);
	background-color: var(--bf-acc-rule-c);
}

.bf-acc .bf-acc__proof,
#top #wrap_all .bf-acc .bf-acc__proof {
	display: block;
	margin-block-start: var(--bf-acc-block);
}

.bf-acc .bf-acc__proof-label,
#top #wrap_all .bf-acc .bf-acc__proof-label {
	--bf-acc-fs: var(--bf-acc-body-fs);
	--bf-acc-lh: calc(var(--bf-acc-body-lh-ratio) * var(--bf-acc-fs));

	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-block-start: 0;
	padding-block-end: 0;
	padding-inline-start: 0;
	padding-inline-end: 0;
	font-family: var(--bf-acc-font);
	font-size: var(--bf-acc-fs);
	font-weight: 500;
	font-style: normal;
	line-height: var(--bf-acc-lh);
	letter-spacing: normal;
	color: var(--bf-acc-title-c);
}

/* 8. Chips =================================================================
   A real list, so it reads as one. Normalising a <ul> needs margin, padding
   and list-style — NOT display, which would be a conflict waiting for a
   library. Here there is no library, but the habit is worth keeping.
   ========================================================================== */

.bf-acc .bf-acc__chips,
#top #wrap_all .bf-acc .bf-acc__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bf-acc-chip-gap);
	margin-block-start: var(--bf-acc-proof-gap);
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-block-start: 0;
	padding-block-end: 0;
	padding-inline-start: 0;
	padding-inline-end: 0;
	list-style: none;
}

.bf-acc .bf-acc__chip,
#top #wrap_all .bf-acc .bf-acc__chip {
	display: block;
	margin-inline-start: 0;
	padding-block-start: var(--bf-acc-chip-pad-y);
	padding-block-end: var(--bf-acc-chip-pad-y);
	padding-inline-start: var(--bf-acc-chip-pad-x);
	padding-inline-end: var(--bf-acc-chip-pad-x);
	background-color: var(--bf-acc-chip-bg);
	border-radius: var(--bf-acc-chip-radius);
	list-style: none;
}

.bf-acc .bf-acc__chip-text,
#top #wrap_all .bf-acc .bf-acc__chip-text {
	--bf-acc-fs: var(--bf-acc-body-fs);
	--bf-acc-lh: calc(var(--bf-acc-body-lh-ratio) * var(--bf-acc-fs));

	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-block-start: 0;
	padding-block-end: 0;
	padding-inline-start: 0;
	padding-inline-end: 0;
	font-family: var(--bf-acc-font);
	font-size: var(--bf-acc-fs);
	font-weight: 400;
	font-style: normal;
	line-height: var(--bf-acc-lh);
	letter-spacing: normal;
	color: var(--bf-acc-chip-c);
}

/* Enfold underlines and border-bottoms every link inside #top #wrap_all. */
.bf-acc .bf-acc__body a,
#top #wrap_all .bf-acc .bf-acc__body a {
	color: inherit;
	text-decoration: underline;
	border-bottom-width: 0;
	border-bottom-style: none;
}

/* 9. Responsive ============================================================ */

@media (max-width: 1199px) {

	.bf-acc--scale,
	#top #wrap_all .bf-acc--scale {
		--bf-acc-mt-now: calc(var(--bf-acc-mt) * 0.75);
	}
}

@media (max-width: 899px) {

	.bf-acc--scale,
	#top #wrap_all .bf-acc--scale {
		--bf-acc-mt-now: calc(var(--bf-acc-mt) * 0.6);
	}
}

/* Nobody who asked for less motion gets the slide, the padding change or the
   plus turning into a minus. The panel still opens; it just arrives. */
@media (prefers-reduced-motion: reduce) {

	.bf-acc,
	#top #wrap_all .bf-acc {
		--bf-acc-dur-now: 0ms;
	}
}