/**
 * FAQ - Figma 14:3752
 *
 * Canvas (card origin 1013,1707, size 217x170 -> the rail is 234 wide, height is
 * content-driven):
 *   box       white, radius 13, shadow -2px 8px 24px -8px rgba(0,0,0,.3)
 *   title     1030,1724  -> inset 17;  Reckless Neue 16px / 21.047, -0.48px (-0.03em)
 *   rule      1030,1750  -> 28x2 #E60000, 26px below the title's box top
 *   items     1030,1757 / 1777 / 1797 / 1817, each 20 tall;  10px / 20, #000
 *   dividers  1030,1777 / 1797 / 1817 / 1837, 183 wide, 0.5px #B3B3B3 - one under EVERY
 *             item, including the last
 *   glyphs    1209, 1765 / 1785 / 1805 / 1825, 4x4 - right-aligned to the item's own right
 *             edge (1213 = the card's 17px inset) and centred on the 20px row
 *   view all  1030,1849  9px / 14, -0.25px (-0.028em), #333, + a 17.5945 red disc
 *   (measured against Figma's own render of 14:3741: the disc is 17x17 at x=60..76, the
 *   label 52 wide, 7px between them)
 *
 * The divider colour is read from Figma's own exported asset (stroke #B3B3B3, which is also
 * the file's "Miscellaneous/Keyboards/Glyphs - Secondary" variable), not assumed.
 *
 * DEVIATIONS:
 *   - Questions and "View all FAQs" at 13px, not the canvas's 10px/9px - decisions D6/D7.
 *   - ROWS 26px, not 20. The canvas's 20px row holds 10px type with 5px of air above and
 *     below it. Keeping 20 while the type goes to 13 leaves 3.5px and the questions sit on
 *     the dividers. 20 x 13/10 = 26 keeps the design's proportion at the new size - the
 *     same adjustment the operating model made to its title inset for the same reason.
 *   - DIVIDERS 1px, not 0.5. A 0.5px border is a coin-flip: it rounds to a hairline on a 2x
 *     screen and to nothing at all on some 1x ones. A divider that is sometimes absent is a
 *     worse miss than one that is 0.5px heavy.
 *   - The red disc is 18px (the canvas's 17.5945 read at 1:1) rather than scaled up with the
 *     label. It is geometry, and the rest of the rail's geometry is read at 1:1 too.
 *
 * Specificity: two classes throughout - see iron-extensions/README.md.
 */

.iron-faq {
	padding: 17px;
	background: #fff;
	border-radius: 13px;
	box-shadow: -2px 8px 24px -8px rgba(0, 0, 0, 0.3);
}

/*--------------------------------------------------------------
# Title + rule
--------------------------------------------------------------*/

/* margin:0 is load-bearing - `.site-iron-main-generic p` (0,1,1) puts 1.5rem under it. */
.iron-faq .iron-faq__title {
	margin: 0;
	font-family: 'Reckless Neue', Georgia, serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.315; /* 21.047 / 16 */
	letter-spacing: -0.03em;
	color: #000;
}

/* The 28x2 red rule, drawn the same way as every other card in the rail. */
.iron-faq .iron-faq__title::after {
	content: '';
	display: block;
	width: 28px;
	height: 2px;
	margin-top: 5px;
	background: var(--iron-red, #e60000);
}

/*--------------------------------------------------------------
# The questions
#
# This is a <ul> inside post content, which is the worst case the README describes. Read out
# of dist/assets/css/build.css, the theme is already setting:
#   .site-iron-main-generic ul          (0,1,1)  padding-left: 1em; margin: 0 0 1.5rem
#   .site-iron-main-generic ul li       (0,1,2)  position: relative; letter-spacing: -0.03em
#   .site-iron-main-generic ul li::before (0,1,3) a 10x10 PNG bullet, absolutely positioned
# and posts.css re-positions that same ::before at (0,1,3) for the smaller type.
#
# The bullet is the nasty one: it is a background-image on a ::before with empty content, so
# `list-style: none` does not touch it and there is no bullet character anywhere in the CSS
# to grep for. It is killed at (0,2,1), which beats both (0,1,3) rules because class count
# decides before element count does. Key Takeaways does the same.
#
# margin:0 on the item is belt-and-braces rather than a fix for a known rule: the 1.5rem
# lives on the ul itself and on `ol li`, not on `ul li` - but this card's rows are defined
# by their padding and their divider, and an inherited margin would put daylight between the
# two. Stated so it cannot drift.
--------------------------------------------------------------*/
.iron-faq .iron-faq__list {
	/* Canvas: rule ends 1750, the first item's box starts 1757 -> 7. The item's own 3px of
	   top padding is part of that 7, so 4 here. */
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.iron-faq .iron-faq__item {
	/* Block, not flex: the item now holds a row AND (when the question has an answer) the
	   panel beneath it. The flex row moved to __row. The divider stays here, so it sits
	   under the whole item and an open answer pushes it down rather than spilling past it. */
	display: block;
	/* The row is its padding plus its divider, nothing else - see the note above. */
	margin: 0;
	/* 3px + a 20px line + 3px = the 26px row. */
	padding: 3px 0;
	border-bottom: 1px solid #b3b3b3;
	list-style: none;
}

/* The row: the question and its glyph. A <button> when the question expands, an <a> when it
   links out, a <span> when it does neither - identical either way, which is the point. */
.iron-faq .iron-faq__row {
	display: flex;
	/* flex-start, not center: the glyph must centre on the question's FIRST line, not on the
	   whole item, or it drifts to the middle of a question that wraps to two lines. */
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	text-decoration: none;
}

/* A <button> inherits none of the page's type and brings its own chrome, so all of it has to
   be undone by hand - otherwise the toggle rows render in the UA's 13.333px Arial with a
   grey bevel while the link rows next to them are correct. text-align:left because buttons
   centre by default; cursor:pointer because they don't get one. */
.iron-faq .iron-faq__toggle {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.iron-faq .iron-faq__toggle:focus-visible {
	outline: 2px solid var(--iron-red, #e60000);
	outline-offset: 2px;
}

/* The theme's PNG bullet. `content: none` at (0,2,1) is what removes it - `list-style: none`
   above cannot, because it is a background-image on a ::before with empty content. */
.iron-faq__list .iron-faq__item::before {
	content: none;
}

.iron-faq .iron-faq__question {
	/* min-width:0 lets a long question wrap instead of forcing the row wider than the card:
	   a flex item defaults to min-width:auto and refuses to shrink below its content. */
	min-width: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px; /* the canvas's literal 20, bound to --static/body-medium/line-height */
	letter-spacing: 0;
	color: #000;
	text-decoration: none;
}

.iron-faq .iron-faq__row:hover .iron-faq__question,
.iron-faq .iron-faq__row:focus-visible .iron-faq__question {
	text-decoration: underline;
}

/* A question with no link yet is text, not a link - so it must not offer a link's hover.
   Two classes, so it beats the rule above whatever the source order. */
.iron-faq .iron-faq__question.o-plain:hover {
	text-decoration: none;
}

/* Right-aligned to the row's own edge (canvas 1213 = the card's 17px inset) and centred on
   the first 20px line: (20 - 4) / 2 = 8. */
.iron-faq .iron-faq__glyph {
	display: block;
	flex: none;
	width: 4px;
	height: 4px;
	margin-top: 8px;
	margin-left: auto;
}

/*--------------------------------------------------------------
# The answer panel
#
# `hidden` does the hiding (the view ships it on the panel), so the closed state is correct
# before any CSS or JS loads. This only styles the open state.
#
# No height animation: the panel's height is unknown, so animating it means either a JS
# height measurement on every toggle or a max-height guess that clips a long answer. A card
# this small does not need it, and a clipped answer is a real bug where a missing transition
# is not.
--------------------------------------------------------------*/
.iron-faq .iron-faq__answer {
	/* Clears the 20px question line + the row's 3px padding. */
	padding: 4px 12px 6px 0;
}

.iron-faq .iron-faq__answer-text {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: #333;
}

/* The answer arrives through wpautop, so it is <p>s - and the theme's
   `.site-iron-main-generic p` (0,1,1) would give each one 24px of bottom margin and pull the
   card apart. Two classes to beat it. */
.iron-faq .iron-faq__answer-text p {
	margin: 0 0 6px;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.iron-faq .iron-faq__answer-text p:last-child {
	margin-bottom: 0;
}

.iron-faq .iron-faq__more {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.45;
}

.iron-faq .iron-faq__more-link {
	color: var(--iron-red, #e60000);
	text-decoration: none;
}

.iron-faq .iron-faq__more-link:hover,
.iron-faq .iron-faq__more-link:focus-visible {
	text-decoration: underline;
}

/* The plus turns into an x. The glyph is a plus in the file, so this is the whole open
   state - and it is driven off aria-expanded rather than a class, so the thing screen
   readers read and the thing sighted users see cannot disagree. */
.iron-faq .iron-faq__toggle .iron-faq__glyph {
	transition: transform 0.2s ease;
}

.iron-faq .iron-faq__toggle[aria-expanded='true'] .iron-faq__glyph {
	transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
	.iron-faq .iron-faq__toggle .iron-faq__glyph {
		transition: none;
	}
}

/*--------------------------------------------------------------
# View all FAQs
--------------------------------------------------------------*/
.iron-faq .iron-faq__all {
	/* Canvas: the last divider is at 1837, the row starts at 1844 -> 7. Spelled out on all
	   four sides - the theme's <p> rule is otherwise adding 1.5rem inside the card's foot. */
	margin: 7px 0 0;
}

.iron-faq .iron-faq__all-link {
	display: inline-flex;
	align-items: center;
	gap: 7px; /* canvas: label ends x=53, disc starts x=60 */
	max-width: 100%;
	color: #333;
	text-decoration: none;
}

.iron-faq .iron-faq__all-label {
	min-width: 0;
	font-size: 13px;
	font-weight: 500; /* Graphik Medium, per canvas */
	line-height: 1.4;
	letter-spacing: -0.028em; /* canvas -0.25 on 9px */
}

.iron-faq .iron-faq__all-link:hover .iron-faq__all-label,
.iron-faq .iron-faq__all-link:focus-visible .iron-faq__all-label {
	text-decoration: underline;
}

/* rotate(-45deg): the arrow is knocked OUT of the red disc (the export is a luminance mask,
   so the arrow is transparent and the white card shows through it), and the canvas rotates
   the whole thing -45 to point it right. Rotating in CSS keeps the icon file the untouched
   Figma export. flex:none so a long label never squeezes it out of round. */
.iron-faq .iron-faq__all-arrow {
	display: block;
	flex: none;
	width: 18px;
	height: 18px;
	transform: rotate(-45deg);
}