/* AASHTOWare Project FAQ Hub
 * Values taken directly from the live Divi layout export (FAQs.json):
 *   accent #E47227  ink #181B1A  muted/body #6B6D6C  gray band #F2F3F2  white #ffffff
 *   section padding clamp(60px, 8vw, 120px); inner max-width 1200px; side clamp(20px,5vw,80px)
 *   toggle padding 22px 28px; title 1rem/600; body 0.95rem/1.7; border 1px rgba(0,0,0,.06)
 *   eyebrow 0.8rem/700 uppercase ls .12em; heading 40px/700 lh 1.15 ls -.02em; intro 1.1rem/1.7
 * Sections alternate: odd = gray band + white cards, even = white band + gray cards.
 * Fonts inherit from the theme so the widget adopts the hub typeface.
 */

.awp-faq {
	--awp-accent: #E47227;
	--awp-ink:    #181B1A;
	--awp-muted:  #6B6D6C;
	--awp-gray:   #F2F3F2;
	--awp-white:  #ffffff;
	--awp-cardline: rgba(0, 0, 0, .06);
	--awp-inputline: #d7d8d7;
	--awp-radius: 10px;
	font-family: inherit;
	color: var(--awp-ink);
	text-align: left;
	width: 100%;
	max-width: none;
}
.awp-faq *, .awp-faq *::before, .awp-faq *::after { box-sizing: border-box; }

/* Inner wrapper reproduces the 1200px row with clamp side padding */
.awp-faq__inner {
	max-width: 1200px;
	margin: 0 auto;
	/* padding: 0 clamp(20px, 5vw, 80px); */
	padding: 0;
}

/* ---- Controls (search + filter chips) ---- */
.awp-faq__controls { padding: clamp(28px, 5vw, 48px) 0; }
.awp-faq__search { margin: 0 0 18px; }
.awp-faq__search-label { display: block; font-weight: 600; font-size: 1rem; margin: 0 0 .5rem; }
.awp-faq__search-input {
	width: 100%; font: inherit; font-size: 1rem; color: var(--awp-ink);
	background: var(--awp-white); padding: 15px 18px;
	border: 1px solid var(--awp-inputline); border-radius: var(--awp-radius);
	outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.awp-faq__search-input::placeholder { color: var(--awp-muted); }
.awp-faq__search-input:focus { border-color: var(--awp-accent); box-shadow: 0 0 0 3px rgba(228, 114, 39, .16); }
.awp-faq__count { margin: .6rem 0 0; font-size: .9rem; color: var(--awp-muted); min-height: 1.1em; }

.awp-faq__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.awp-faq__chip {
	font: inherit; font-size: .85rem; color: var(--awp-ink);
	background: var(--awp-white); border: 1px solid var(--awp-inputline);
	border-radius: 999px; padding: 8px 16px; cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.awp-faq__chip:hover { border-color: var(--awp-accent); }
.awp-faq__chip.is-active { background: var(--awp-accent); border-color: var(--awp-accent); color: #fff; }

/* ---- Sections (alternating full-width bands) ---- */
.awp-faq__section { padding: clamp(60px, 8vw, 100px) 0; }
.awp-faq__section:nth-of-type(odd)  { background: var(--awp-gray); }
.awp-faq__section:nth-of-type(even) { background: var(--awp-white); }
.awp-faq__section:nth-of-type(odd)  .awp-faq__item { background: var(--awp-white); }
.awp-faq__section:nth-of-type(even) .awp-faq__item { background: var(--awp-gray); }

.awp-faq__eyebrow {
	font-size: .8rem; font-weight: 700; line-height: 1.7; text-transform: uppercase;
	letter-spacing: .12em; color: var(--awp-accent); margin: 0 0 12px;
}
.awp-faq__section-title {
	font: inherit; font-weight: 700; font-size: clamp(1.9rem, 3.5vw, 40px);
	line-height: 1.15; letter-spacing: -.02em; color: var(--awp-ink); margin: 0 0 20px;
}
.awp-faq__section-intro {
	font-size: 1.1rem; line-height: 1.7; color: var(--awp-muted);
	max-width: 700px; margin: 0 0 40px;
}

/* ---- Accordion items ---- */
.awp-faq__list { display: block; }
.awp-faq__item {
	border: 1px solid var(--awp-cardline); border-radius: var(--awp-radius);
	margin: 0 0 12px; overflow: hidden;
}
.awp-faq__result-tag { display: none; }
.awp-faq__q { margin: 0; font: inherit;padding-bottom:0 }
.awp-faq__trigger {
	width: 100%; display: flex; align-items: center; justify-content: space-between;
	gap: 16px; font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.4;
	color: var(--awp-ink); background: transparent; border: 0; text-align: left;
	padding: 22px 28px; cursor: pointer;
}
.awp-faq__item.is-featured .awp-faq__trigger { color: var(--awp-accent); }
.awp-faq__trigger:focus-visible { outline: 2px solid var(--awp-accent); outline-offset: -2px; }
.awp-faq__q-text { flex: 1; }

/* chevron (matches the dark Divi toggle icon) */
.awp-faq__icon {
	flex: 0 0 auto; width: 11px; height: 11px; margin-left: 20px; margin-top: -5px;
	border-right: 2px solid var(--awp-ink); border-bottom: 2px solid var(--awp-ink);
	transform: rotate(45deg); transition: transform .25s ease;
}
.awp-faq__trigger[aria-expanded="true"] .awp-faq__icon { transform: rotate(-135deg); margin-top: 3px; }

/* ---- Panel ---- */
.awp-faq__panel { padding: 0 28px 22px; }
.awp-faq__panel[hidden] { display: none; }
.awp-faq__answer { font-size: .95rem; line-height: 1.7; color: var(--awp-muted); }
.awp-faq__answer > *:first-child { margin-top: 0; }
.awp-faq__answer > *:last-child  { margin-bottom: 0; }
.awp-faq__answer p { margin: 0 0 1em; }
.awp-faq__answer ul, .awp-faq__answer ol { margin: 0 0 1em; padding-left: 1.4em; }
.awp-faq__answer li { margin: 0 0 .5em; }
.awp-faq__answer strong { color: var(--awp-ink); }
.awp-faq__answer a { color: var(--awp-accent); text-decoration: underline; }

.awp-faq__copy {
	margin-top: 16px; font: inherit; font-size: .8rem; color: var(--awp-muted);
	background: transparent; border: 1px solid var(--awp-inputline); border-radius: 6px;
	padding: 6px 12px; cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.awp-faq__copy:hover { color: var(--awp-ink); border-color: var(--awp-muted); }
.awp-faq__copy.is-copied { color: var(--awp-accent); border-color: var(--awp-accent); }

/* ---- Search state helpers ---- */
.awp-faq mark.awp-faq__hl { background: rgba(228, 114, 39, .26); color: inherit; padding: 0 .1em; border-radius: 2px; }
.awp-faq__item[hidden], .awp-faq__section[hidden] { display: none; }
.awp-faq__empty { color: var(--awp-muted); font-style: italic; padding: 8px 0 0; }

.awp-faq__item.awp-faq__target { animation: awp-faq-flash 1.6s ease; }
@keyframes awp-faq-flash { 0%,100%{ box-shadow: 0 0 0 0 rgba(228,114,39,0);} 25%{ box-shadow: 0 0 0 3px rgba(228,114,39,.45);} }

/* =========================================================
 * SEARCH-RESULTS MODE
 * When the search box has a value, .is-searching is set on the root.
 * The alternating section bands collapse into a single flat results
 * list: band backgrounds, eyebrows, headings, and intros are hidden,
 * every result becomes a uniform white card, and each shows a small
 * section tag so the source stays clear.
 * ========================================================= */
.awp-faq.is-searching .awp-faq__section {
	background: transparent !important;
	padding: 0 !important;
}
.awp-faq.is-searching .awp-faq__eyebrow,
.awp-faq.is-searching .awp-faq__section-title,
.awp-faq.is-searching .awp-faq__section-intro { display: none; }

.awp-faq.is-searching .awp-faq__item {
	background: var(--awp-white) !important;
	margin: 0 0 12px !important;
}
.awp-faq.is-searching .awp-faq__item.is-featured .awp-faq__trigger { color: var(--awp-ink); }

.awp-faq.is-searching .awp-faq__result-tag {
	display: block; padding: 14px 28px 0;
	font-size: .7rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .1em; color: var(--awp-accent);
}
.awp-faq.is-searching .awp-faq__result-tag + .awp-faq__q .awp-faq__trigger { padding-top: 6px; }
/* pull each section's list together so results read as one continuous list */
.awp-faq.is-searching .awp-faq__section + .awp-faq__section .awp-faq__inner { padding-top: 0; }
.awp-faq.is-searching .awp-faq__count { font-size: 1rem; font-weight: 600; color: var(--awp-ink); }

@media (max-width: 640px) {
	.awp-faq__section-title { font-size: 1.7rem; }
	.awp-faq__trigger { padding: 18px 20px; }
	.awp-faq__panel { padding: 0 20px 18px; }
	.awp-faq.is-searching .awp-faq__result-tag { padding: 12px 20px 0; }
}