/* ==========================================================================
   Togo Paws — FAQ frontend (extends styles.css, blog.css, page.css)
   ========================================================================== */

/* Hero search */
.faq-search{display:flex;gap:.6rem;max-width:520px;margin-top:1.4rem}
.faq-search input{
  flex:1;min-width:0;font:inherit;font-size:1rem;padding:.8rem 1rem;
  border:1.5px solid var(--sand-line);border-radius:999px;background:#fff;
}
.faq-search input:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,107,74,.14)}
.faq-search .btn{flex:none}

.faq-section{padding-top:clamp(1.6rem,3vw,2.4rem)}

/* Question list */
.faq-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.faq-item-link{
  display:block;background:#fff;border:1px solid var(--sand-line);border-radius:var(--radius-lg);
  padding:1.5rem 1.7rem;box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.faq-item-link:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(255,107,74,.4)}
.faq-item-link h2,.faq-item-link h3{
  font-family:var(--font-display);font-size:1.24rem;line-height:1.32;margin:0 0 .5rem;color:var(--ink);
}
.faq-item-link:hover h2,.faq-item-link:hover h3{color:var(--coral-dark)}
.faq-item-link p{color:var(--ink-soft);font-size:.97rem;margin:0 0 .8rem}
.faq-item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:.84rem;color:var(--ink-soft);margin:0 !important}
.faq-cat-tag{
  font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--teal-700);
  background:var(--teal-100);padding:.2rem .6rem;border-radius:999px;
}
.faq-go{margin-left:auto;font-weight:600;color:var(--coral-dark)}

/* Single FAQ */
.faq-single .pc-cat{display:inline-block;margin-bottom:.8rem}

.faq-short{
  background:var(--teal-100);border-left:4px solid var(--teal-700);
  border-radius:0 var(--radius) var(--radius) 0;padding:1.2rem 1.4rem;margin:0 0 2rem;
}
.faq-short-label{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-700);margin-bottom:.4rem;
}
.faq-short p{margin:0;font-size:1.12rem;line-height:1.6;color:var(--teal-900);font-weight:500}

/* Responsive video embeds inside answers */
.faq-answer .video-embed{margin:1.8rem 0;padding:0}
.faq-answer .video-embed iframe,
.prose .video-embed iframe{
  display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--radius);
}

/* Tags */
.faq-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:2rem 0 0;font-size:.92rem}
.faq-tags > span{font-weight:600;color:var(--teal-800)}
.faq-tags a{
  background:var(--sand);color:var(--teal-700);padding:.28rem .7rem;border-radius:999px;font-weight:500;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.faq-tags a:hover{background:var(--coral);color:#fff}

/* Related list uses two columns on wider screens */
@media (min-width:720px){
  .faq-list-related{grid-template-columns:1fr 1fr}
}