@import url('/css/hero.css');

.faq-page { margin-top: 100px; }

.hero-faq .hero-content { grid-column: 2; justify-self: end; text-align: right; margin-right: 30%; }
.hero-faq .hero-content h1 { font-size: 56px; letter-spacing: 8px; font-weight: 400; }
.hero-faq .hero-content p { color: #c4122f; font-style: italic; letter-spacing: 2px; font-weight: 400; }
.hero-faq .hero-container { gap: 24px; padding: 0 40px; height: 500px; }

/* Reuse existing FAQ styles baseline from style.css additions */
.faq-page-section { background: linear-gradient(135deg, #ffffff 0%, #f3f3f3 100%); position: relative; overflow: hidden; }
.faq-container { max-width: 900px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; }
.faq-header { margin: 24px 0; }
.faq-title { font-size: 40px; letter-spacing: 6px; color: #b4001b; text-align: center; }
.faq-underline { height: 3px; background: #b4001b; width: 100%; margin: 8px auto 0; }
.accordion { max-width: 800px; margin: 20px auto 60px; }
.accordion details { border: 1px solid #b4001b; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin-bottom: 16px; overflow: hidden; }
.accordion summary { cursor: pointer; font-weight: 800; list-style: none; position: relative; padding: 20px 24px; background: linear-gradient(135deg, #fff 0%, #fafafa 100%); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion p { margin: 0; padding: 0 24px 20px; line-height: 1.7; color: #444; }
.accordion ul,
.accordion ol { margin: 0; padding: 0 24px 20px 48px; line-height: 1.7; color: #444; }
.accordion ul li,
.accordion ol li { margin-bottom: 8px; }

@media (max-width: 768px) {
    .hero-faq .hero-content { margin-right: 0; text-align: left; grid-column: 1; }
    .hero-faq .hero-container { height: 380px; }
    .faq-container { padding: 0 20px; }
}