/**
	 * FAQ — Figma section 10 (node 1092:19243)
	 * 1920x766, padding 120 240, full-bleed background image (faq.jpg, FILL).
	 * Two columns: heading on the left over the artwork, accordion column
	 * 827px wide on the right (613 + 827 = the 1440 container).
	 */
	
	.faq-section {
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.faq-section__inner {
		display: grid;
		/* 613 + 827 = the 1440 container, kept as a ratio. */
		/* 583 + 30 gap + 827 = the 1440 container, so the accordion keeps its 827. */
		grid-template-columns: minmax(0, 583fr) minmax(0, 827fr);
		align-items: start;
		gap: var(--space-30);
	}
	
	.faq-section__heading {
		max-width: 520px;
	}
	
	/* base.css paints any bare <span> inside an h1-h3 green, so an editor can
	 * accent a word without remembering a class. The question's span is
	 * STRUCTURAL — it pairs the label with the chevron inside the button — so it
	 * has to opt out. Figma draws every question #010101 on every page; the only
	 * green in this block is the heading accent and the open row's chevron.
	 * `inherit` rather than a literal, so the toggle's green :hover still reaches
	 * the label. */
	.faq-section__question .faq-section__question-text {
		color: inherit;
		font-family: var(--font-body);
		font-size: var(--fs-22);
		font-weight: 600;
		line-height: var(--lh-22-34);
		text-align: left;
		transition: var(--transition);
	}
	
	/* --- accordion ------------------------------------------------------ */
	/* Measured on the 1:1 export: closed items occupy 120-204, 466-550 and
	 * 561-645 — 85px each with 10px between them, and the open item runs
	 * 215-455. The section's own auto-layout gap is 10px, same value. */
	.faq-section__list {
		display: flex;
		flex-direction: column;
		gap: var(--space-10);
	}
	
	.faq-section__item {
		border: 1px solid var(--border-grey);
		background-color: var(--white);
	}
	
	.faq-section__question {
		margin: 0;
	}
	
	.faq-section__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-20);
		width: 100%;
		/* 28 + 27 (the 22px/27 question line) + 28 = the 83px interior that puts
		 * the bordered row at the designed 85px. */
		/* One padding for every variant, at the developer's instruction: the aside
		 * treatments used to restate their own padding-block and no longer do, so
		 * this is the single place the row's interior is set. */
		padding: 32px var(--space-40);
		border: 0;
		background: transparent;
		color: var(--primary-black);
		/* Roboto at the developer's instruction. Deliberate departure: the design
		 * sets the question in Anek Devanagari, the same display face as the
		 * headings. Roboto's metrics differ, so the 22/27 line box is what holds the
		 * closed row at its measured height, not the face. */
		font-family: var(--font-body);
		font-size: var(--fs-22);
		font-weight: 600;
		line-height: var(--lh-22);
		text-align: left;
		transition: var(--transition);
		cursor: pointer;
	}
	
	.faq-section__toggle:hover {
		color: var(--primary-green);
	}
	
	.faq-section__chevron {
		display: inline-flex;
		flex: 0 0 auto;
		color: var(--primary-black);
		transition: var(--transition);
	}
	
	.faq-section__chevron svg {
		width: 20px;
		height: auto;
	}
	
	.faq-section__item.is-open .faq-section__chevron {
		transform: rotate(180deg);
		color: var(--primary-green);
	}
	
	/* The panel animates open on a 0fr -> 1fr grid row rather than max-height,
	 * so it always travels exactly the content's height — no guessed ceiling that
	 * clips a long answer or adds dead time to a short one.
	 *
	 * `visibility` is what keeps a collapsed answer out of the accessibility tree
	 * and out of tab order; it is switched instantly on open and delayed to the
	 * end of the transition on close, so the text never disappears mid-collapse.
	 *
	 * The border is transparent rather than absent while closed: removing it would
	 * shift the row by 1px on every toggle. */
	/* Height is animated in pixels and driven from JavaScript, which measures the
	 * panel and sets an explicit target. A `grid-template-rows: 0fr -> 1fr`
	 * transition was tried first and does not work here: the row never collapsed
	 * (the inner padding kept it at 61px) and Chromium did not interpolate the
	 * `fr` value, so it snapped open. Pixel heights are exact and observable. */
	.faq-section__answer {
		height: 0;
		overflow: hidden;
		visibility: hidden;
		border-top: 1px solid transparent;
		transition:
			height 0.35s ease,
			border-top-color 0.35s ease,
			visibility 0s linear 0.35s;
	}
	
	.faq-section__item.is-open .faq-section__answer {
		visibility: visible;
		border-top-color: var(--mid-green);
		transition:
			height 0.35s ease,
			border-top-color 0.35s ease,
			visibility 0s;
	}
	
	/* Without JavaScript the panel keeps its `hidden` attribute and stays closed;
	 * the script strips that on init and hands control to the class above. */
	.faq-section__answer[hidden] {
		display: none;
	}
	
	@media (prefers-reduced-motion: reduce) {
	
		.faq-section__answer,
		.faq-section__item.is-open .faq-section__answer {
			transition: none;
		}
	}
	
	.faq-section__answer-inner {
		padding: var(--space-30) var(--space-40);
		color: var(--body-grey);
		font-family: var(--font-body);
		font-size: var(--fs-20);
		font-weight: 400;
		line-height: var(--lh-body);
	}
	
	/* The 827px accordion column is a fixed Figma measurement and only fits while
	 * the container is at full width. */
	@media (max-width: 1440px) {
	
		.faq-section__inner {
			grid-template-columns: 1fr 1.2fr;
		}
	
		/* The 763px photo is a 1920-canvas measurement; below the container width it
		 * has to give way or it runs under the accordion. */
		.faq-section--aside-image .faq-section__figure {
			max-width: 45%;
		}
	}
	
	/* -------------------------------------------------------------------
	 * Two photo treatments, and they are genuinely different sections.
	 *
	 * --aside-image  the closing FAQ on every service page. The photo is
	 *                decorative: it bleeds off the left of the viewport and runs
	 *                to the section's bottom edge behind a faint green wash,
	 *                while the accordion keeps its 827px column.
	 *
	 * --aside-photo  the mid-page FAQ on Storm Damage and Wood Shake. Here the
	 *                photo is content: it sits inside the grid at 705px with a
	 *                665px accordion beside it, and matches its height.
	 *
	 * Both draw a real <img> rather than a pseudo-element, so the photo carries
	 * alt text and scales with its column.
	 *
	 * Opt in per row with the Extra CSS classes field.
	 * ------------------------------------------------------------------- */
	/* `--aside-photo` draws the artwork as an <img> in its own grid column, so its
	 * inline background-image has to go. `--aside-image` no longer does: it paints
	 * faq.jpg as a full-bleed section background, exactly as the homepage does. */
	.faq-section--aside-photo {
		background-image: none !important;
	}
	
	/* The green wash belongs to the CLOSING FAQ only. Checked every faq/why section
	 * in the file: the 836-tall "FAQ Section" is GRADIENT_LINEAR #557B4A 0%->10%
	 * alpha, and every mid-page "Why ..." / "High-Quality ..." section — all
	 * seventeen location pages, Storm Damage, Wood Shake — is a flat SOLID #F2FAF5.
	 * The wash and the transparent background were being applied to both, so the
	 * flat sections were painting a gradient the design does not have. */
	/* faq.jpg is the whole background: the photograph, the diagonal lattice and the
	 * pale wash are all baked into that one 1920x815 asset, which is how the
	 * homepage's FAQ is built and what the design intends here too. The gradient
	 * and the CSS lattice that used to live on ::before are gone with it — they
	 * were rebuilding in CSS what the image already carries. */
	.faq-section--aside-image {
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.faq-section--aside-image .faq-section__inner,
	.faq-section--aside-photo .faq-section__inner {
		position: relative;
		z-index: 1;
	}
	
	/* The closing FAQ is drawn on a different scale from the homepage's: rows are
	 * 100 tall on a 120 pitch (border 120, 219 / 240, 339 / gap 220..239 sampled on
	 * the export) with a 22/34 question, against 85 on a 95 pitch and 22/27 at the
	 * top of the site. Its open-item divider is #DBDBDB — the same grey as the item
	 * borders — not the near-black rule the homepage uses. */
	.faq-section--aside-image .faq-section__list,
	.faq-section--aside-photo .faq-section__list {
		gap: var(--space-20);
	}
	
	/* Padding-driven, at the developer's instruction (2026-08-21). 32 + 34 (the
	 * 22/34 question line) + 32 = the 98px interior that puts the bordered row at
	 * the designed 100.
	 *
	 * This replaced `min-height: 98px; padding-block: 0`, which held the row at 100
	 * whether the question ran to one line or two. Padding cannot do both: a
	 * two-line question now measures 132 rather than 100. That is deliberate here —
	 * a long question gets breathing room instead of sitting tight against the row
	 * edge — but it does mean the pages whose questions wrap grow. See the note in
	 * project-config.json open_items for the measured cost. */
	.faq-section--aside-image .faq-section__toggle,
	.faq-section--aside-photo .faq-section__toggle {
		line-height: var(--lh-22-34);
	}
	
	.faq-section--aside-image .faq-section__item.is-open .faq-section__answer,
	.faq-section--aside-photo .faq-section__item.is-open .faq-section__answer {
		border-top-color: var(--border-grey);
	}
	
	.faq-section--aside-image .faq-section__answer-inner,
	.faq-section--aside-photo .faq-section__answer-inner {
		padding: 32px var(--space-40) 31px;
	}
	
	/* --- decorative, bleeding left ----------------------------------------
	 * Positioned against .faq-section__inner, whose box is the container's
	 * content area: `bottom: -120` therefore lands on the section's own bottom
	 * edge, and `50% - 50vw` reaches the viewport edge rather than stopping at
	 * the container. The aside must stay unpositioned for that to resolve. */
	.faq-section--aside-image .faq-section__figure {
		position: absolute;
		z-index: -1;
		left: calc(50% - 50vw);
		bottom: calc(var(--section-rhythm) * -1);
		width: var(--faq-aside-w, 763px);
		/* Was a per-row ACF number; every one of the twelve rows stored the same
		 * 544, so it is a constant of this variant, not page data. The field is
		 * gone. Note this is the ONE place a height is stated: `--aside-photo`
		 * stretches its figure to the accordion column and always did. */
		height: 544px;
		margin: 0;
	}
	
	.faq-section--aside-image .faq-section__image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: left bottom;
	}
	
	/* --- in-column photo --------------------------------------------------- */
	.faq-section--aside-photo .faq-section__inner {
		/* Figma: 705 photo, 72 gutter, 663 accordion (photo 240..945, details
		 * 1017..1680). */
		grid-template-columns: 705fr 663fr;
		gap: 72px;
		align-items: stretch;
	}
	
	.faq-section--aside-photo .faq-section__aside {
		display: flex;
		flex-direction: column;
	}
	
	.faq-section--aside-photo .faq-section__figure {
		margin: 0;
		overflow: hidden;
		position: sticky;
		top: var(--media-sticky-top, calc(var(--header-height) + 10px));
	}
	
	.faq-section--aside-photo .faq-section__image {
		width: 100%;
	}
	
	/* --- the mirrored composition ------------------------------------------
	 * Set per row with the "Media position" field. Figma draws the same band both
	 * ways: photo 240..945 with the accordion at 1017..1680 on Storm Damage, Wood
	 * Shake, Vinyl, Hardie and Churches; and the mirror — accordion 240..903,
	 * photo 975..1680 — on all seventeen location pages, Commercial Roofing and
	 * Roof Repair. The 705 / 72 / 663 measurements are identical either way, so
	 * only the track order and the two grid placements change.
	 *
	 * `grid-column` rather than `order`, because the DOM order (aside, then list)
	 * is also the reading order this block wants when it stacks below 992, and
	 * `order` would take that with it. */
	.faq-section--aside-photo.faq-section--media-right .faq-section__inner {
		grid-template-columns: 663fr 705fr;
	}
	
	.faq-section--aside-photo.faq-section--media-right .faq-section__list {
		grid-column: 1;
		grid-row: 1;
	}
	
	.faq-section--aside-photo.faq-section--media-right .faq-section__aside {
		grid-column: 2;
		grid-row: 1;
	}
	
	@media (max-width: 991px) {
	
		.faq-section--aside-image .faq-section__figure {
			display: none;
		}
	
		.faq-section--aside-photo .faq-section__inner,
		/* The mirrored variant needs its own selector here, not just the one
		 * above: `.faq-section--aside-photo.faq-section--media-right` is two
		 * classes against one, so its 663fr/705fr rule out-specifies the stack
		 * and a media query does not change that. Left off, the grid kept both
		 * tracks below 992 while both children sat in track 1 — the photo and the
		 * accordion held ~386 of an 868 container with the rest dead space. */
		.faq-section--aside-photo.faq-section--media-right .faq-section__inner {
			grid-template-columns: 1fr;
		}
	
		/* Stacked, there is only one column to be in. */
		.faq-section--aside-photo.faq-section--media-right .faq-section__list,
		.faq-section--aside-photo.faq-section--media-right .faq-section__aside {
			grid-column: 1;
			grid-row: auto;
		}
	}
	
	/* Answers may carry a list — the Storm Damage ones set their services out as
	 * tick-marked items. Rendered with the same green check the checklist uses,
	 * drawn as a mask so no markup change is needed. */
	.faq-section__answer-inner ul {
		/* Design opens 17 between the answer's last line and the first tick item
		 * (ink 718 -> 748 on Storm Damage section 8, a 52px item pitch). The same 17
		 * below, at the developer's instruction — the list no longer sits hard
		 * against the foot of the panel, or against any copy that follows it. */
		margin: 17px 0;
		padding: 0;
		list-style: none;
	}
	
	.faq-section__answer-inner li {
		position: relative;
		padding-left: 32px;
	}
	
	.faq-section__answer-inner li + li {
		margin-top: var(--space-20);
	}
	
	/* The real mark, replacing the inline circle-and-tick that stood in for it.
	 * The file carries its own #01963A fill, so it is a background image rather than
	 * a tinted mask — which means the mask-* properties and the green
	 * `background-color` both had to go: without a mask-image the former are dead,
	 * and the latter would paint a solid green square behind the glyph.
	 *
	 * Served from the theme, not from wp-content/uploads. The uploads URL is
	 * absolute and domain-specific — hardcoding localhost:8888 into a stylesheet
	 * breaks the mark on staging and production. This path is relative to this
	 * file, so it moves with the theme. */
	.faq-section__answer-inner li::before {
		position: absolute;
		top: 6px;
		left: 0;
		width: 20px;
		height: 20px;
		background-image: url("../../images/kerrigan-checkmark.svg");
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
	}
	
	/* Both the question and the answer step their inline padding here. Placed
	 * after the aside variants deliberately: those set `padding` as a shorthand at
	 * two classes, so a rule earlier in the file is reset by them no matter how it
	 * is written. */
	@media (max-width: 1199px) {
	
		.faq-section__toggle,
		.faq-section__answer-inner,
		.faq-section--aside-image .faq-section__answer-inner,
		.faq-section--aside-photo .faq-section__answer-inner {
			padding-inline: var(--space-25);
		}
	
		/* The aside-image variant hides its figure below 992 and leans on the band's
		 * own background for the photo. `.section-image` centres that, which crops
		 * the subject out from the left as the viewport narrows — anchor it left so
		 * the same part of the image stays in frame. */
		.faq-section--aside-image {
			background-position: left center;
		}
	}
	
	/* The desktop row spends 32/40 on padding, which is most of a 375 screen once
	 * the question wraps to three lines. Stepped down twice, at the developer's
	 * instruction — the interior stays comfortable while the copy gets the width. */
	@media (max-width: 767px) {
	
		.faq-section__toggle {
			padding: 22px var(--space-20);
		}
	
		.faq-section__answer-inner,
		.faq-section--aside-image .faq-section__answer-inner,
		.faq-section--aside-photo .faq-section__answer-inner {
			padding: var(--space-20);
		}
	}
	
	@media (max-width: 567px) {
	
		.faq-section__toggle {
			padding: 18px var(--space-15);
		}
	
		.faq-section__answer-inner,
		.faq-section--aside-image .faq-section__answer-inner,
		.faq-section--aside-photo .faq-section__answer-inner {
			padding: var(--space-15);
		}
	}
	
	@media (max-width: 991px) {
	
		.faq-section__inner {
			grid-template-columns: 1fr;
			gap: var(--space-40);
		}
	
		.faq-section__heading {
			max-width: none;
		}
	}