/*
 * FAQ / Salon Guide (page-faq.php). Dark-editorial: search, category nav +
 * accordion, gold-line quick cards, dark CTA, location band. Mobile-first,
 * base-specificity, fsr-* tokens, no !important.
 */

/* ---- Hero image tint ---- */
.faq-hero .faq-hero__img { filter: saturate(1.02); }

/* ---- Search ---- */
.faq-body .faq-search {
	position: relative;
	max-width: 820px;
	margin: 0 auto 44px;
	display: flex;
	align-items: center;
}
.faq-search__ic {
	position: absolute;
	left: 20px;
	width: 22px;
	height: 22px;
	color: var(--fsr-gold-ink);
	pointer-events: none;
}
.faq-search__ic svg { width: 100%; height: 100%; }
.faq-search__in {
	width: 100%;
	font-family: var(--fsr-sans);
	font-size: 15px;
	color: var(--fsr-black);
	background: #fff;
	border: 1px solid rgba(20, 17, 14, 0.16);
	border-radius: 3px;
	padding: 17px 20px 17px 54px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-search__in::placeholder { color: #9c9184; }
.faq-search__in:focus {
	outline: none;
	border-color: var(--fsr-gold);
	box-shadow: 0 0 0 3px rgba(198, 161, 91, 0.16);
}

/* ---- Layout: nav + accordion ---- */
.faq-layout { display: grid; grid-template-columns: 1fr; gap: 30px; }

.faq-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-nav__label {
	display: none;
	font-family: var(--fsr-sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8a7f70;
	margin-bottom: 6px;
}
.faq-cat {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--fsr-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6a6157;
	background: #fff;
	border: 1px solid rgba(20, 17, 14, 0.12);
	border-radius: 3px;
	padding: 12px 16px;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.faq-cat__ic { width: 18px; height: 18px; color: var(--fsr-gold); display: inline-flex; }
.faq-cat__ic svg { width: 100%; height: 100%; }
.faq-cat:hover { border-color: var(--fsr-gold); color: var(--fsr-black); }
.faq-cat.is-active {
	color: var(--fsr-gold-ink);
	border-color: var(--fsr-gold);
	background: rgba(198, 161, 91, 0.08);
}

/* ---- Accordion ---- */
.faq-acc { border-top: 1px solid rgba(20, 17, 14, 0.12); }
.faq-item { border-bottom: 1px solid rgba(20, 17, 14, 0.12); background: #fff; }
.faq-item__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	list-style: none;
	cursor: pointer;
	padding: 20px 22px;
	font-family: var(--fsr-serif);
	font-size: clamp(18px, 2vw, 21px);
	color: var(--fsr-black);
	transition: color 0.2s ease;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { color: var(--fsr-gold-ink); }
.faq-item[open] > .faq-item__q { color: var(--fsr-gold-ink); }
.faq-item__sign {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	position: relative;
	color: var(--fsr-gold);
}
.faq-item__sign::before,
.faq-item__sign::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq-item__sign::before { top: 9px; left: 2px; width: 16px; height: 2px; }
.faq-item__sign::after { left: 9px; top: 2px; width: 2px; height: 16px; }
.faq-item[open] > .faq-item__q .faq-item__sign::after { opacity: 0; transform: scaleY(0); }
.faq-item__a {
	padding: 0 22px 22px;
	font-family: var(--fsr-sans);
	font-size: 15px;
	line-height: 1.7;
	color: #5a5148;
}
.faq-item__a p { margin: 0 0 12px; }
.faq-item__a p:last-child { margin-bottom: 0; }
.faq-item__a a { color: var(--fsr-gold-ink); border-bottom: 1px solid var(--fsr-gold); }

.faq-noresult,
.faq-empty { font-family: var(--fsr-sans); color: #6a6157; padding: 22px 0; }

/* ---- Quick-guide cards (dark) ---- */
.faq-guide__grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 40px; }
.guide-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 30px 26px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(198, 161, 91, 0.28);
	border-radius: 3px;
	text-decoration: none;
	transition: border-color 0.22s ease, transform 0.22s ease, background 0.22s ease;
}
.guide-card:hover { border-color: var(--fsr-gold); transform: translateY(-3px); background: rgba(198, 161, 91, 0.06); }
.guide-card__ic {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(198, 161, 91, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fsr-gold);
	margin-bottom: 4px;
}
.guide-card__ic svg { width: 24px; height: 24px; }
.guide-card__t { font-family: var(--fsr-serif); font-size: 22px; color: #f6f0e6; margin: 0; }
.guide-card__d { font-family: var(--fsr-sans); font-size: 14px; line-height: 1.6; color: rgba(243, 237, 227, 0.68); margin: 0; }
.guide-card__more { font-family: var(--fsr-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fsr-gold); margin-top: auto; }

/* ---- Dark CTA band ---- */
.faq-cta__in { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.faq-cta__text { display: flex; align-items: center; gap: 20px; }
.faq-cta__ic {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 1px solid rgba(198, 161, 91, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fsr-gold);
}
.faq-cta__ic svg { width: 26px; height: 26px; }
.faq-cta__text h2 { color: #f6f0e6; }
.faq-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- Location band ---- */
.faq-loc { padding: 0; }
.faq-loc__in { display: grid; grid-template-columns: 1fr; }
/* Vertical rhythm only — horizontal (left rail + inner gutter) owned by salon.css round-4. */
.faq-loc__text { padding-block: clamp(48px, 6vw, 84px); }
.faq-loc__text h2 { color: var(--fsr-black); margin: 6px 0 22px; }
.faq-loc__addr {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-family: var(--fsr-sans);
	font-size: 16px;
	line-height: 1.6;
	color: #4c453d;
	margin: 0 0 22px;
}
.faq-loc__pin { flex: 0 0 auto; width: 26px; height: 26px; color: var(--fsr-gold-ink); margin-top: 2px; }
.faq-loc__pin svg { width: 100%; height: 100%; }
.faq-loc__media { position: relative; min-height: 280px; }
.faq-loc__media .faq-loc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ================= RESPONSIVE ================= */
@media (min-width: 861px) {
	.faq-layout { grid-template-columns: 244px 1fr; gap: 44px; align-items: start; }
	.faq-nav { flex-direction: column; flex-wrap: nowrap; position: sticky; top: calc(var(--fsr-headh) + 20px); }
	.faq-nav__label { display: block; }
	.faq-cat { width: 100%; justify-content: flex-start; }
	.faq-guide__grid { grid-template-columns: repeat(4, 1fr); }
	.faq-cta__in { flex-direction: row; align-items: center; justify-content: space-between; }
	.faq-cta__text { max-width: 620px; }
	.faq-loc__in { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
	.faq-loc__media { min-height: 420px; }
}
@media (min-width: 641px) and (max-width: 860px) {
	.faq-guide__grid { grid-template-columns: repeat(2, 1fr); }
}