/* =========================================================
   PAGE FAQ SECTION
   Same card look as the FAQs on the region pages (.city-faq),
   for pages that don't have their own FAQ styling.
   Questions use <details>/<summary>, so no JS is needed.
   ========================================================= */

.hm-faq { padding: 70px 0; background: #fff; }
.hm-faq-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.hm-faq-kicker { display: inline-block; color: #bf3385; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: 13px; margin-bottom: 8px; }
.hm-faq-head h2 { font-size: 40px; margin: 0 0 12px; }
.hm-faq-bar { width: 70px; height: 4px; border-radius: 4px; background: linear-gradient(to right, #bf3385, #c8b18c); margin: 0 auto; }

.hm-faq-list { max-width: 860px; margin: 0 auto; }
.hm-faq-list details { background: #fff; border-radius: 16px; box-shadow: 0 6px 20px rgba(90, 7, 76, .07); margin-bottom: 14px; }
.hm-faq-list summary { display: block; list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; position: relative; }
.hm-faq-list summary::-webkit-details-marker { display: none; }
.hm-faq-list summary:after { content: "\f067"; font-family: FontAwesome; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: #bf3385; }
.hm-faq-list details[open] summary:after { content: "\f068"; }
.hm-faq-list summary h3 { display: inline; font-weight: 600; font-size: 22px; line-height: 1.3; color: #222; margin: 0; }
.hm-faq-list details p { color: #555; margin: 0; padding: 0 24px 20px; }

@media (max-width: 767px) {
    .hm-faq { padding: 46px 0; }
    .hm-faq-head h2 { font-size: 28px; }
    .hm-faq-list summary { padding: 16px 48px 16px 18px; }
    .hm-faq-list summary:after { right: 18px; }
    .hm-faq-list summary h3 { font-size: 20px; }
    .hm-faq-list details p { padding: 0 18px 16px; }
}