/* FAQ page (faq.ejs + /js/faq.js). Mobile-first: base rules are the phone
   layout, min-width queries add tablet/desktop. One dark surface per section,
   gold accents, no boxes inside boxes. The accordion rules (.faq-section,
   .faq-item) are also used by the FAQ block on the service page, and the
   closing band reuses .svc-cta from city-page.css.
   Text colours: body #d9dde3, muted #aab1bb (AA on the dark surfaces). */
.faq-page { --faq-text: #d9dde3; --faq-muted: #aab1bb; --faq-surface: rgba(10,14,19,.93); gap: 16px; padding-top: 1.25rem; padding-bottom: 2.5rem; interpolate-size: allow-keywords; }
.faq-page.page-enter { opacity: 1; transition: none; } /* hero is visible immediately */
.faq-page [hidden] { display: none !important; }
.faq-page svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.faq-page :is(a, button, summary, input):focus-visible, .faq-item summary:focus-visible { outline: 2px solid var(--accent, #d4af37); outline-offset: 2px; }
.faq-page .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.faq-page .city-cta-row { gap: 10px; }
.faq-page .city-cta-row .btn { flex: 1 1 100%; }

/* Hero: title, search, quick contact */
.faq-hero {
  display: grid; gap: 14px; padding: 18px 16px; border-radius: 16px;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(212,175,55,.16), transparent 60%),
    linear-gradient(135deg, rgba(10,14,19,.97), rgba(22,27,35,.97));
  border: 1px solid rgba(212,175,55,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 50px rgba(0,0,0,.4);
}
.faq-hero-copy { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.faq-hero .eyebrow { align-self: flex-start; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(212,175,55,.45); background: rgba(212,175,55,.08); color: var(--accent, #d4af37); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.faq-hero h1 { margin: 0; font-size: 1.75rem; line-height: 1.12; letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.faq-hero .info-lead { order: 3; margin: 0; max-width: 62ch; font-size: 1rem; line-height: 1.6; color: var(--faq-text); }

.faq-search { position: relative; display: flex; align-items: center; }
.faq-search > svg { position: absolute; left: 14px; width: 20px; height: 20px; stroke: var(--accent, #d4af37); stroke-width: 2; pointer-events: none; }
.faq-search input {
  width: 100%; min-height: 52px; padding: 0 52px 0 44px; border-radius: 14px; font: inherit; font-size: 1rem; /* 16px: no zoom on iOS */
  color: #fff; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.22); -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.faq-search input::placeholder { color: var(--faq-muted); opacity: 1; }
.faq-search input:focus { border-color: var(--accent, #d4af37); background: rgba(255,255,255,.1); outline: none; }
.faq-search input::-webkit-search-cancel-button { display: none; }
.faq-search-clear { position: absolute; right: 4px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; display: grid; place-items: center; background: none; color: var(--faq-text); cursor: pointer; }
.faq-search-clear svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; }

.faq-contact { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.faq-contact a {
  height: 100%; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border-radius: 14px; text-align: center; text-decoration: none;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: #fff; transition: border-color .2s ease, background-color .2s ease;
}
.faq-contact-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(212,175,55,.14); border: 1px solid rgba(212,175,55,.4); }
.faq-contact-icon svg { width: 19px; height: 19px; stroke: var(--accent, #d4af37); stroke-width: 1.9; }
.faq-contact small { display: block; font-size: .9rem; font-weight: 600; line-height: 1.25; color: var(--faq-text); }
.faq-contact strong { display: none; font-family: inherit; letter-spacing: 0; }

/* Category chips: sticky under the header, scroll sideways on phones */
.faq-layout { display: grid; gap: 14px; min-width: 0; }
.faq-nav {
  position: sticky; top: var(--site-header-height, 0px); z-index: 20; margin: 0 -4vw; padding: 8px 4vw; scroll-padding-left: 4vw;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  background: rgba(10,14,19,.97); border-block: 1px solid var(--glass-border, rgba(255,255,255,.1)); box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.faq-nav::-webkit-scrollbar { display: none; }
.faq-chip {
  flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; scroll-snap-align: start;
  font-size: .95rem; font-weight: 700; text-decoration: none; white-space: nowrap; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.faq-chip span { min-width: 22px; padding: 1px 6px; border-radius: 999px; text-align: center; font-size: .8rem; background: rgba(255,255,255,.12); color: var(--faq-text); }
.faq-chip.is-active { background: var(--accent, #d4af37); border-color: var(--accent, #d4af37); color: #111; }
.faq-chip.is-active span { background: rgba(0,0,0,.18); color: #111; }

.faq-main { display: grid; gap: 14px; min-width: 0; }
.faq-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.faq-status { margin: 0; color: #fff; font-size: 1rem; font-weight: 600; }
.faq-status:not(:empty) { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: rgba(10,14,19,.93); border: 1px solid var(--glass-border, rgba(255,255,255,.1)); }
.faq-toggle-all { flex: none; margin-left: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: .95rem; font-weight: 700; color: var(--accent, #d4af37); background: rgba(10,14,19,.93); border: 1.5px solid rgba(212,175,55,.55); cursor: pointer; }
.faq-empty { display: grid; gap: 14px; justify-items: start; padding: 20px 16px; border-radius: 16px; background: var(--faq-surface); border: 1px solid rgba(212,175,55,.35); }
.faq-empty p { margin: 0; color: #fff; font-size: 1.05rem; font-weight: 600; line-height: 1.5; }

/* One surface per category (also used on the service page) */
.faq-section { padding: 14px 16px; border-radius: 16px; background: var(--faq-surface, rgba(10,14,19,.93)); border: 1px solid var(--glass-border, rgba(255,255,255,.1)); box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.faq-section-title { scroll-margin-top: calc(var(--site-header-height, 0px) + 76px); margin: 0 0 4px; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 1.3rem; line-height: 1.2; }
.faq-section-title::before { content: ""; flex: none; width: 22px; height: 3px; border-radius: 2px; background: var(--accent, #d4af37); }

.faq-item { scroll-margin-top: calc(var(--site-header-height, 0px) + 76px); border-top: 1px solid rgba(255,255,255,.09); }
.faq-item:first-child { border-top: 0; }
.faq-item summary {
  list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-radius: 8px; color: #fff; font-family: var(--font-heading, "Outfit", sans-serif); font-weight: 700; font-size: 1.06rem; line-height: 1.35;
  transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--accent, #d4af37); }
.faq-item summary svg {
  flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; stroke: var(--accent, #d4af37); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round;
  background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.35); transition: rotate .3s cubic-bezier(.22,1,.36,1), background-color .2s ease;
}
.faq-item[open] summary svg { rotate: 180deg; background: rgba(212,175,55,.22); }
.faq-item p, .faq-answer ul { margin: 0; max-width: 70ch; color: var(--faq-text, #d9dde3); font-size: 1rem; line-height: 1.65; }
.faq-item > p { padding: 0 0 16px; } /* service page: answer is a bare <p> */
.faq-answer { display: grid; gap: 12px; justify-items: start; padding: 0 0 16px; }
.faq-answer ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.faq-answer li { position: relative; padding-left: 20px; }
.faq-answer li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #d4af37); }
.faq-page mark { padding: 0 2px; border-radius: 3px; background: #f1d77a; color: #111; }
.faq-copy { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 10px; border-radius: 999px; font: inherit; font-size: .92rem; font-weight: 600; color: var(--faq-text, #d9dde3); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); cursor: pointer; }
.faq-copy svg { width: 18px; height: 18px; stroke: var(--accent, #d4af37); stroke-width: 2; }
.faq-copy.is-copied { color: #111; background: var(--accent, #d4af37); border-color: var(--accent, #d4af37); }
.faq-copy.is-copied svg { stroke: #111; }
/* Smooth open/close where the browser can animate to height:auto; instant elsewhere. */
.faq-item::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .32s cubic-bezier(.22,1,.36,1), opacity .25s ease, content-visibility .32s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; opacity: 1; }

/* Closing CTA band */
.faq-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 18px 16px; border-radius: 16px;
  background: radial-gradient(70% 140% at 0% 50%, rgba(212,175,55,.2), transparent 65%), linear-gradient(135deg, rgba(22,27,35,.97), rgba(10,14,19,.97));
  border: 1px solid rgba(212,175,55,.45); box-shadow: 0 18px 44px rgba(0,0,0,.4);
}
.faq-cta .city-cta-row { margin: 0; flex: 1 1 280px; }
.faq-cta-copy { flex: 1 1 280px; display: grid; gap: 8px; justify-items: start; }
.faq-cta-copy h2 { margin: 0; color: #fff; font-size: 1.35rem; line-height: 1.2; }
.faq-cta-copy p { margin: 0; color: var(--faq-text); font-size: 1rem; line-height: 1.6; }
.faq-cta-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent, #d4af37); font-weight: 700; text-underline-offset: 3px; }

@media (hover: hover) {
  .faq-item summary:hover { color: var(--accent, #d4af37); }
  .faq-chip:hover { border-color: rgba(212,175,55,.6); }
  .faq-contact a:hover { border-color: rgba(212,175,55,.6); background: rgba(212,175,55,.08); }
  .faq-toggle-all:hover, .faq-copy:hover { border-color: var(--accent, #d4af37); }
}

/* ── Large phones / tablets ── */
@media (min-width: 600px) {
  .faq-page .city-cta-row .btn { flex: 0 1 auto; }
  .faq-hero { padding: 24px; }
  .faq-contact a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 14px; text-align: left; }
  .faq-section { padding: 18px 22px; }
}

/* ── Desktop: hero in two columns, sticky category list on the left ── */
@media (min-width: 1024px) {
  .faq-page { gap: 24px; padding-top: 2.25rem; padding-bottom: 4rem; }
  .faq-hero { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 36px; align-items: center; padding: 28px 36px; border-radius: 20px; }
  .faq-hero h1 { font-size: clamp(2rem, 3.2vw, 2.6rem); }
  .faq-hero .info-lead { order: 0; font-size: 1.05rem; }
  .faq-search { max-width: 560px; }
  .faq-contact { grid-template-columns: 1fr; gap: 10px; }
  .faq-contact a { min-height: 64px; padding: 10px 16px; }
  .faq-contact-icon { width: 42px; height: 42px; }
  .faq-contact small { font-size: .9rem; font-weight: 500; color: var(--faq-muted); }
  .faq-contact strong { display: block; font-size: 1.05rem; font-weight: 700; color: #fff; overflow-wrap: anywhere; }

  .faq-layout { grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; }
  .faq-nav {
    top: calc(var(--site-header-height, 0px) + 16px); margin: 0; padding: 12px; flex-direction: column; gap: 6px; overflow: visible;
    border-radius: 18px; border: 1px solid var(--glass-border, rgba(255,255,255,.1)); background: var(--faq-surface);
  }
  .faq-chip { justify-content: space-between; min-height: 48px; padding: 0 14px; border-radius: 12px; white-space: normal; background: none; border-color: transparent; font-size: 1rem; }
  .faq-main { gap: 18px; }
  .faq-toolbar { margin-top: -4px; }
  .faq-section { padding: 22px 28px; border-radius: 20px; }
  .faq-section-title { font-size: 1.5rem; scroll-margin-top: calc(var(--site-header-height, 0px) + 24px); }
  .faq-item { scroll-margin-top: calc(var(--site-header-height, 0px) + 24px); }
  .faq-item summary { min-height: 60px; padding: 14px 4px; font-size: 1.1rem; }
  .faq-answer, .faq-item > p { padding: 0 44px 20px 4px; }
  .faq-cta { padding: 28px 36px; border-radius: 20px; }
  .faq-cta .city-cta-row { flex: 0 1 auto; }
  .faq-cta-copy h2 { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content, .faq-item summary svg { transition: none; }
}