/*
 * Catalog FAQ — inc/faq.php + template-parts/faq.php.
 * Loaded on city pages beside landing.css, so it only carries what the block itself needs.
 */

/*
 * The block sits directly under the PAGER and above .cityseo, so it needs the same
 * separating rule .cityseo carries — otherwise the accordion touches the last row of
 * cards and reads as part of the grid.
 */
.tt-site .tt-faq{ border-top:1px solid var(--line); padding:38px 0 8px; }
.tt-faq__title{
  font-family:var(--disp); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin:0 0 1.1rem;
}
.tt-faq__list{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.tt-faq__item + .tt-faq__item{ border-top:1px solid var(--line-2); }

.tt-faq__q{
  display:flex; align-items:flex-start; gap:1rem; justify-content:space-between;
  padding:1.05rem 1.35rem; cursor:pointer; list-style:none;
  font-family:var(--disp); font-weight:600; line-height:1.35; color:var(--ink);
  font-size:clamp(1rem, .96rem + .2vw, 1.12rem);
}
/* Safari/Chrome draw their own triangle; ours is the +/− on the right. */
.tt-faq__q::-webkit-details-marker{ display:none; }
.tt-faq__q:hover{ color:var(--accent); }
.tt-faq__q:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

.tt-faq__ico{
  flex:0 0 auto; position:relative; width:18px; height:18px; margin-top:.2rem;
}
.tt-faq__ico::before,
.tt-faq__ico::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:2px; border-radius:2px;
  background:var(--accent); transform:translateY(-50%); transition:transform .18s ease, opacity .18s ease;
}
.tt-faq__ico::after{ transform:translateY(-50%) rotate(90deg); }
.tt-faq__item[open] .tt-faq__ico::after{ transform:translateY(-50%) rotate(0deg); opacity:0; }

.tt-faq__a{ padding:0 1.35rem 1.25rem; }
.tt-faq__a p{ margin:0; max-width:78ch; color:var(--ink-2); line-height:1.65; }
.tt-faq__a a{ color:var(--accent); text-underline-offset:.18em; }

@media (max-width:640px){
  .tt-faq__q{ padding:.95rem 1rem; gap:.75rem; }
  .tt-faq__a{ padding:0 1rem 1.05rem; }
}

@media (prefers-reduced-motion:reduce){
  .tt-faq__ico::before, .tt-faq__ico::after{ transition:none; }
}