/* Styles for the /faq page only — FaqAccordion.astro, ported from Orisa's
   faqs/sec-3.html (four topic groups, each a title column beside its own
   accordion). FaqHero.astro reuses services-page.css's .sv_hero* classes
   instead of duplicating them — see that file's header comment.

   Class prefix is fq_ (FAQ). Numbers that carry real meaning — the 30px
   number circle, the accordion item padding — are Orisa's own (compiled
   main.css:6915-7010). Palette and px-not-rem: same reasoning as every other
   page-specific stylesheet here. */

/* ===== The stacking deck ===================================================
   Same two fixes as .as_card in about-page.css/
   about-page.css, for the same reasons: background on the full 100vh card,
   not the inner box, or a shrinking card leaves the next one showing through
   at its edges; wrapper for .container, not the grid itself, or its clearfix
   pseudo-elements become real grid items. */
.fq_stack {
	background-color: var(--vv-charcoal);
}
.fq_deck {
	position: relative;
}
.fq_card {
	min-height: 100vh;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	padding: 100px 0;
	background-color: var(--vv-charcoal);
	border-top: 1px solid rgba(184, 154, 107, 0.15);
}
/* min-width: 992px — matching faq-page.js's own matchMedia gate; same bug,
   same fix as services-page.css/about-page.css (see the long version of this
   comment there). */
@media screen and (min-width: 992px) {
	.fq_card:not(:first-child) {
		position: absolute;
	}
}
.fq_card > .container {
	width: 100%;
}
.fq_card_inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
	gap: 3rem;
	max-width: 1320px;
	margin-inline: auto;
}
.fq_card_head {
	position: relative;
}
.fq_number {
	margin-bottom: 12px;
}
/* Title and subtitle at the site-wide card sizes (base.css), revealed
   character by character by the same deck reveal every card deck shares
   (reveal.js's card helpers, wired up in faq-page.js). */
.fq_title {
	margin: 0 0 1rem;
	color: var(--vv-off-white);
	font-family: Jost, Arial, sans-serif;
	font-size: var(--card-title-size);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.04em;
}
.fq_subtitle {
	margin: 0;
	color: var(--vv-off-white);
	font-family: Jost, Arial, sans-serif;
	font-size: var(--card-text-size);
	font-weight: 400;
	line-height: 1.5;
	max-width: 26rem;
}

/* ===== Accordion ===========================================================
   Item surface is a solid, lifted card (#333c4b, matching WhyUs/testimonial/
   pricing cards) rather than Orisa's flat neutral-50 — its own version has no
   real border, this one gets one for definition against the deck's own
   charcoal-on-charcoal card (Orisa's light page has a natural contrast this
   one doesn't). */
.fq_item {
	background-color: #333c4b;
	border: 1px solid rgba(184, 154, 107, 0.2);
	border-radius: 16px;
	padding: 6px 24px;
	margin-bottom: 14px;
}
.fq_item:last-child {
	margin-bottom: 0;
}
.fq_item_header {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 15px 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	appearance: none;
	color: inherit;
	font: inherit;
}
.fq_item_number {
	flex-shrink: 0;
	display: flex;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--vv-gold);
	color: var(--vv-charcoal);
	font-size: 14px;
	font-weight: 700;
}
/* Card text size (base.css); weight is what sets a question apart from its
   answer, not a size of its own. */
.fq_item_question {
	flex: 1 1 auto;
	color: var(--vv-off-white);
	font-size: var(--card-text-size);
	font-weight: 600;
	line-height: 1.4;
}
/* The +/− toggle — two bars forming a plus; the vertical one fades/rotates
   away on open, leaving the horizontal bar as a minus. Orisa's own version is
   a Font Awesome glyph swap (::before/::after content, "\f068"/"\f067");
   every icon elsewhere on this site is an inline SVG or a plain CSS shape,
   never an icon font, so this follows that instead of pulling in Font
   Awesome for one element. */
.fq_item_toggle {
	position: relative;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid rgba(184, 154, 107, 0.4);
}
.fq_item_toggle_bar {
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var(--vv-gold);
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.fq_item_toggle_bar--h {
	width: 12px;
	height: 1.5px;
	transform: translate(-50%, -50%);
}
.fq_item_toggle_bar--v {
	width: 1.5px;
	height: 12px;
	transform: translate(-50%, -50%);
}
.fq_item_header[aria-expanded="true"] .fq_item_toggle_bar--v {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

/* The open/close animation itself: grid-template-rows 0fr → 1fr on a single-
   cell grid, with the actual content in a min-height: 0 child. This is the
   standard CSS-only "height: auto" transition trick — it needs no JS-measured
   pixel height (the way Bootstrap's own .collapsing class does it) and still
   animates smoothly to whatever height the content actually needs. */
.fq_item_panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s ease;
}
.fq_item_panel.is-open {
	grid-template-rows: 1fr;
}
.fq_item_panel_inner {
	overflow: hidden;
	min-height: 0;
}
.fq_item_panel_inner p {
	margin: 0;
	padding: 4px 0 20px 46px;
	color: var(--vv-off-white);
	font-size: var(--card-text-size);
	font-weight: 400;
	line-height: 1.5;
}
/* min(220px, 28vh) cap, own scrollbar past that — ≥992px only (see the
   media query below): this deck is pinned by faq-page.js for the whole time
   a topic is current, with each .fq_card locked to the viewport for that
   stretch. There's no page scroll left to reveal anything a card grows
   past the viewport's own bottom edge with — it doesn't scroll into view
   later, it's just gone until the pin releases. That was fine with Orisa's
   one-line placeholder answers; the real copy runs 2-4 sentences, and on a
   shorter viewport (a laptop's actual innerHeight, browser chrome already
   subtracted) an open item's answer could push the card's content taller
   than the 100vh it has to work with — the cut-off text this fixes. Capping
   the panel's own height and letting IT scroll internally means the card
   itself never exceeds what the pin has room for, regardless of how long a
   given answer is or how short the viewport gets; in the common case the
   cap is taller than the text needs, so nothing looks any different. Not
   applied below 992px: the deck isn't pinned there (faq-page.js's own
   matchMedia gate), the page scrolls normally, and a real answer is short
   enough that this would just add a pointless inner scrollbar. */
@media screen and (min-width: 992px) {
	.fq_item_panel_inner {
		max-height: min(220px, 28vh);
		overflow-y: auto;
	}
}

@media screen and (max-width: 991px) {
	.fq_card_inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
	.fq_card {
		padding: 70px 0;
	}
}
@media screen and (max-width: 767px) {

	.fq_item_panel_inner p {
		padding-left: 0;
	}
}

/* ===== Look: the /services "My Process" palette (on request) ================
   Cream ground with Orisa's gold column lines, each topic a white card with
   a photo under its title, charcoal type, gold only as fill and line — never
   as type on the light ground (base.css). The mechanics above are
   unchanged; these rules only recolour and add the photo. The lines are a
   background on every full-screen card box, since each card is opaque (it
   has to cover the one it slides over). */
.fq_stack {
	background-color: var(--vv-cream);
}
.fq_card {
	border-top: 0;
	background-color: var(--vv-cream);
	background-image: linear-gradient(to right, rgba(184, 154, 107, 0.3) 1px, transparent 1px);
	background-size: calc(100% / 7) 100%;
	background-position: calc(100% / 7) 0;
}
.fq_card_inner {
	padding: 40px;
	border: 1px solid rgba(46, 54, 68, 0.08);
	background-color: var(--vv-cream-card);
}
.fq_number,
.fq_number .sv_eyebrow_text {
	color: var(--vv-gray);
}
.fq_number .sv_eyebrow_icon {
	color: var(--vv-gold);
}
.fq_title {
	color: var(--vv-charcoal);
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(184, 154, 107, 0.45);
}
.fq_subtitle {
	color: var(--vv-gray);
}
.fq_card_media {
	margin-top: 28px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.fq_card_media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fq_item {
	padding: 4px 0;
	margin-bottom: 0;
	border: 0;
	border-bottom: 1px solid rgba(46, 54, 68, 0.1);
	border-radius: 0;
	background-color: transparent;
}
.fq_item:last-child {
	border-bottom: 0;
}
.fq_item_question {
	color: var(--vv-charcoal);
}
.fq_item_toggle {
	border-color: rgba(46, 54, 68, 0.2);
}
.fq_item_panel_inner p {
	color: var(--vv-gray);
}
@media screen and (max-width: 991px) {
	.fq_card_media {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	.fq_card_inner {
		padding: 24px 20px;
	}
}

/* Each card, and the box inside it that shrinks to 0.9, its own compositing
   layer while the deck runs — so the slide and the scale are done by the GPU
   instead of repainting the photo, the column lines and every line of text
   on each frame. That repaint is what showed as a shimmer while scrolling;
   the /services deck had the same and the same fix. */
@media screen and (min-width: 992px) {
	.fq_card,
	.fq_card_inner {
		will-change: transform;
		backface-visibility: hidden;
	}
}