/*
=========================================================
FAQ STYLESHEET - Joshua Dalton Media
=========================================================

Purpose
-------
This file contains the shared FAQ styles used across joshuadaltonmedia.com. It is designed to support reusable FAQ sections built with semantic details/summary markup, along with supporting chips, grouped layouts, CTA rows, and richer answer content for landing pages, service pages, blog support sections, and enquiry funnels.

What belongs in this file
-------------------------
- Shared FAQ section wrappers and layout helpers
- Shared FAQ-specific container widths
- Shared FAQ chip / topic tag styling
- Shared FAQ grid and stacking patterns
- Shared FAQ item shell styling
- Shared details / summary interaction styling
- Shared FAQ answer typography and spacing
- Shared FAQ CTA block styling
- Shared responsive FAQ breakpoint rules
- Shared optional FAQ variants for compact, rich, and multi-column setups

Asset path usage
----------------
This stylesheet is intended to be referenced from pages with:

<link rel="stylesheet" href="/assets/css/faq.css">

Relationship to page files
--------------------------
Page files should:
1. load this stylesheet in the head
2. use the shared FAQ class system where possible
3. keep truly page-specific FAQ tweaks inside their page skin stylesheet

Maintenance rule
----------------
If a selector is not genuinely reusable across multiple FAQ implementations or templates, it should not be added here. Keep this file shared, stable, and predictable.
*/

/* ================= FAQ WRAPPERS ================= */
.faq-wrap{display:grid;gap:14px;margin-top:clamp(10px,3vw,24px)}
.faq-wrap.compact{gap:10px}
.faq-wrap.loose{gap:18px}
.faq-wrap.flush{margin-top:0}
.faq-wrap.center{justify-items:center}

/* ================= FAQ HEAD / SUPPORTING UI ================= */
.faq-head{display:grid;gap:10px}

/* ================= FAQ GRID / GROUPING ================= */
.faq-grid{display:grid;gap:10px}
.faq-grid.one{grid-template-columns:1fr}
.faq-grid.two{grid-template-columns:1fr}
.faq-grid.three{grid-template-columns:1fr}

/* ================= FAQ ITEM ================= */
.faq-item{padding:14px;border-radius:var(--radius);transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .2s ease;background:linear-gradient(180deg,rgba(20,20,20,.84),rgba(20,20,20,.68));backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 40px rgba(0,0,0,.45);overflow:hidden}
.faq-item[open]{background:linear-gradient(180deg,rgba(26,26,26,.94),rgba(20,20,20,.82));border-color:rgba(255,77,77,.22)}
.faq-item:hover{border-color:rgba(255,255,255,.12)}
.faq-item.panel{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));box-shadow:0 12px 36px rgba(0,0,0,.28);backdrop-filter:none;-webkit-backdrop-filter:none}
.faq-item.flat{background:rgba(255,255,255,.03);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.faq-item.compact{padding:12px;border-radius:12px}
.faq-item.highlight{border-color:rgba(255,77,77,.2);background:linear-gradient(180deg,rgba(255,77,77,.08),rgba(20,20,20,.8))}
.faq-item.muted{opacity:.92}

/* ================= SUMMARY / TOGGLE ================= */
.faq-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;font-size:clamp(.88rem,3.6vw,1rem);line-height:1.35;font-weight:700;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:16px;line-height:1;color:var(--accent);flex:0 0 auto}
.faq-item[open] summary::after{content:"–"}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.faq-item summary .faq-q{display:block}
.faq-item summary.lg{font-size:clamp(.94rem,3.8vw,1.06rem)}
.faq-item summary.sm{font-size:clamp(.82rem,3.1vw,.92rem)}

/* ================= ANSWER BODY ================= */
.faq-item>p{font-size:clamp(.82rem,2.8vw,.95rem);line-height:1.55;margin:12px 0 0;color:var(--muted);max-width:70ch}
.faq-answer{display:grid;gap:10px;padding-top:12px}
.faq-answer>*{margin:0}
.faq-answer p{font-size:clamp(.82rem,2.8vw,.95rem);line-height:1.6;color:var(--muted);max-width:72ch}
.faq-answer strong{color:var(--ink)}
.faq-answer a{color:var(--accent);font-weight:700;text-decoration:none}
.faq-answer a:hover{text-decoration:underline}
.faq-answer ul,.faq-answer ol{display:grid;gap:8px;margin:0;padding-left:18px}
.faq-answer li{font-size:clamp(.8rem,2.7vw,.92rem);line-height:1.55;color:var(--muted)}
.faq-answer .faq-points{--accent-list-gap:8px;--accent-list-font-size:clamp(.8rem,2.7vw,.92rem);--accent-list-line-height:1.55;--accent-list-color:var(--muted)}

/* ================= FAQ META / AUXILIARY ROWS ================= */
.faq-meta{display:flex;flex-wrap:wrap;gap:8px 10px;padding-top:2px}

/* ================= FAQ CTA ================= */
.faq-cta{display:grid;gap:10px;padding:16px;border-radius:var(--radius);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.faq-cta>*{margin:0}
.faq-cta p{font-size:clamp(.8rem,2.7vw,.9rem);line-height:1.5;color:var(--muted)}
.faq-cta strong{color:var(--ink)}
.faq-cta .faq-cta-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.faq-cta.compact{padding:12px;border-radius:12px}
.faq-cta.center{text-align:center;justify-items:center}
.faq-cta.panel{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));box-shadow:0 12px 36px rgba(0,0,0,.28)}
.faq-cta.highlight{background:linear-gradient(180deg,rgba(255,77,77,.1),rgba(255,255,255,.03));border-color:rgba(255,77,77,.22)}

/* ================= FAQ UTILITIES ================= */
.faq-item.is-hidden{display:none}

/* ================= RESPONSIVE BREAKPOINTS ================= */

@media(min-width:360px){
	/* ================= FAQ WRAPPERS ================= */
	.faq-wrap{gap:15px}
	/* ================= FAQ ITEM ================= */
	.faq-item{padding:15px}
	.faq-item>p{margin-top:10px}
	/* ================= ANSWER BODY ================= */
	.faq-answer{padding-top:10px}
	/* ================= FAQ CTA ================= */
	.faq-cta{padding:16px}
}

@media(min-width:700px){
	/* ================= FAQ WRAPPERS ================= */
	.faq-wrap{gap:16px}
	/* ================= FAQ GRID / GROUPING ================= */
	.faq-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
	.faq-grid.three{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
	/* ================= FAQ ITEM ================= */
	.faq-item{padding:16px}
	.faq-item summary{font-size:clamp(.92rem,1.45vw,1rem)}
	.faq-item>p{font-size:clamp(.84rem,1.25vw,.94rem)}
	/* ================= ANSWER BODY ================= */
	.faq-answer p{font-size:clamp(.84rem,1.25vw,.94rem)}
	.faq-answer li{font-size:clamp(.82rem,1.2vw,.9rem)}
	/* ================= FAQ CTA ================= */
	.faq-cta{padding:18px}
}

@media(min-width:1024px){
	/* ================= FAQ WRAPPERS ================= */
	.faq-wrap{gap:16px}
	/* ================= FAQ GRID / GROUPING ================= */
	.faq-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
	/* ================= FAQ ITEM ================= */
	.faq-item{padding:16px}
	.faq-item summary{font-size:.95rem;line-height:1.28}
	.faq-item>p{font-size:.9rem;line-height:1.5}
	/* ================= ANSWER BODY ================= */
	.faq-answer p{font-size:.9rem;line-height:1.5}
	.faq-answer li{font-size:.88rem}
	/* ================= FAQ CTA ================= */
	.faq-cta{padding:18px}
}

@media(hover:hover){
	/* ================= FAQ ITEM ================= */
	.faq-item:hover{transform:translateY(-1px);box-shadow:0 16px 44px rgba(0,0,0,.5)}
}