/* ============================================================
   FAQ — "Perguntas frequentes" da pagina de hotel
   Bloco #faq de single-hotel.php (parts/faq.php)
   Carregado no header.php logo apos style.min.css
   ============================================================ */

.block-faq { padding: 60px 0px 70px 0px; background-color: #fff; }
.block-faq .container { position: relative; }
.block-faq header.head { margin-bottom: 34px; }
.block-faq header.head strong { display: block; margin-bottom: 14px; font-size: 36px; font-weight: 900; }
.block-faq header.head p { display: block; color: #555; font-size: 15px; line-height: 1.6; }

/* ---------- acordeao (details/summary nativos, sem JS) ---------- */
.block-faq .faq-list { display: block; border-top: 1px solid #E2E6EA; }
.block-faq .faq-item { display: block; border-bottom: 1px solid #E2E6EA; }

.block-faq .faq-item summary {
  position: relative; display: block; padding: 21px 46px 21px 0px; cursor: pointer;
  font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--blue);
  transition: color .2s ease; list-style: none;
}
/* remove o triangulo padrao do <details> nos varios engines */
.block-faq .faq-item summary::-webkit-details-marker { display: none; }
.block-faq .faq-item summary::marker { content: ''; }
.block-faq .faq-item summary:hover { color: var(--darkblue); }
.block-faq .faq-item summary i {
  position: absolute; top: 50%; right: 8px; font-size: 22px; color: var(--blue);
  transform: translateY(-50%); transition: transform .3s ease;
}
.block-faq .faq-item[open] summary i { transform: translateY(-50%) rotate(180deg); }

.block-faq .faq-a { padding: 0px 46px 26px 0px; animation: qsFaqIn .25s ease; }
.block-faq .faq-a p { display: block; font-size: 15px; line-height: 1.7; color: #333; }
.block-faq .faq-a p + p { margin-top: 12px; }
.block-faq .faq-a a { color: var(--blue); font-weight: 600; text-decoration: underline; }

@keyframes qsFaqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- rodape: "ainda tem duvidas?" ---------- */
.block-faq .faq-help { display: block; margin-top: 30px; padding: 22px 26px; background-color: #F6F6F6; border-radius: 8px; }
.block-faq .faq-help strong { display: block; margin-bottom: 8px; font-weight: 700; font-size: 16px; color: var(--blue); }
.block-faq .faq-help p { display: block; font-size: 15px; line-height: 1.6; color: #333; }
.block-faq .faq-help a { color: var(--blue); font-weight: 600; text-decoration: underline; }

/* ============================================================
   RESPONSIVO — breakpoints alinhados aos do tema (1220 / 970 / 680)
   ============================================================ */

/* o box #reserva fica pinado a direita do container ate 1220px */
@media (min-width: 1221px) {
  .block-faq .container { padding-right: 340px; }
}

@media (max-width: 970px) {
  .block-faq { padding: 45px 0px 50px 0px; }
  .block-faq header.head strong { font-size: 28px; }
}

@media (max-width: 680px) {
  .block-faq { padding: 35px 0px 40px 0px; }
  .block-faq header.head { margin-bottom: 24px; }
  .block-faq header.head strong { font-size: 24px; }
  .block-faq .faq-item summary { padding: 17px 34px 17px 0px; font-size: 15px; }
  .block-faq .faq-item summary i { right: 2px; font-size: 18px; }
  .block-faq .faq-a { padding: 0px 34px 20px 0px; }
  .block-faq .faq-a p { font-size: 14px; }
  .block-faq .faq-help { padding: 18px 20px; }
}