/* 
 * FAQ Page Specific Styles
 * Theme: VarneStudio
 */

/* Details Element Overrides */
details > summary::-webkit-details-marker {
    display: none;
}

details > summary {
    list-style: none;
}

/* Base FAQ Page Layout */
.varne-faq-page {
    padding-top: 64px;
    padding-bottom: 80px;
}

/* Hero Section */
.varne-faq-hero {
    max-width: var(--container-max, 1440px);
    margin: 0 auto;
    padding: 0 var(--margin-desktop, 64px);
    text-align: center;
    margin-bottom: 80px;
}

@media (max-width: 768px) {
    .varne-faq-hero {
        padding: 0 var(--margin-mobile, 20px);
    }
}

.varne-faq-hero__title {
    color: #330a05; /* charcoal-brown */
    margin-bottom: 16px; /* mb-4 */
}

.varne-faq-hero__desc {
    color: #534341; /* on-surface-variant */
    max-width: 672px; /* max-w-2xl */
    margin: 0 auto;
}

/* FAQ Content Section */
.varne-faq-content {
    max-width: 896px; /* max-w-4xl */
    margin: 0 auto;
    padding: 0 var(--margin-desktop, 64px);
    margin-bottom: 80px;
}

@media (max-width: 768px) {
    .varne-faq-content {
        padding: 0 var(--margin-mobile, 20px);
    }
}

.varne-faq-category-group:not(:last-child) {
    margin-bottom: 48px; /* space-y-stack-md */
}

.varne-faq-category-title {
    color: #330a05; /* charcoal-brown */
    margin-bottom: 24px; /* mb-6 */
    padding-bottom: 8px; /* pb-2 */
    border-bottom: 1px solid #d7c2be; /* border-outline-variant */
}

.varne-faq-items {
    display: flex;
    flex-direction: column;
}

/* Accordion Item Styles */
.varne-faq-item {
    border-bottom: 1px solid #e2e2e2; /* border-surface-variant */
    padding-bottom: 16px; /* pb-4 */
    margin-bottom: 16px; /* space-y-4 */
}

.varne-faq-item:last-child {
    margin-bottom: 0;
}

.varne-faq-item__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s;
    color: #1a1c1c; /* on-surface */
    padding: 2px 0;
}

.varne-faq-item__summary:hover {
    color: #974b3e; /* terracotta */
}

.varne-faq-item__icon {
    transition: transform 0.3s ease;
}

details[open] .varne-faq-item__icon {
    transform: rotate(180deg);
}

.varne-faq-item__answer {
    padding-top: 16px; /* pt-4 */
    padding-right: 48px; /* pr-12 */
    padding-bottom: 0;
    color: #534341; /* on-surface-variant */
    line-height: 1.5; /* leading-relaxed (1.5 in tailwind usually or 1.625) stitch has line-height: 24px for body-md which is 1.5 for 16px font */
    font-size: 14px;
    letter-spacing: 0.02em;
    font-family: var(--font-body);
}

.varne-faq-item__answer p {
    font-size: 14px;
}

/* Support CTA Section */
.varne-faq-cta {
    max-width: var(--container-max, 1440px);
    margin: 80px auto 0; /* mt-stack-lg */
    padding: 80px var(--margin-desktop, 64px); /* py-stack-lg */
    text-align: center;
    background-color: rgba(243, 243, 244, 0.5); /* bg-surface-container-low/50 */
}

@media (max-width: 768px) {
    .varne-faq-cta {
        padding: 48px var(--margin-mobile, 20px);
    }
}

.varne-faq-cta__title {
    color: #330a05; /* charcoal-brown */
    margin-bottom: 24px; /* mb-6 */
}

.varne-faq-cta__desc {
    color: #534341; /* on-surface-variant */
    margin-bottom: 32px; /* mb-8 */
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 24px;
    font-family: var(--font-body);
}

.varne-faq-cta__btn {
    display: inline-block;
    padding: 16px 48px; /* py-4 px-12 */
    background-color: #974b3e; /* terracotta */
    color: #ffffff; /* white */
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transition: background-color 0.3s, transform 0.3s;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    font-family: var(--font-body);
}

.varne-faq-cta__btn:hover {
    background-color: #330a05; /* charcoal-brown */
}

/* -----------------------------
 * Responsive Overrides
 * ----------------------------- */

@media (max-width: 991px) {
    .varne-faq-page { padding-top: 48px; padding-bottom: 64px; }
    .varne-faq-hero { margin-bottom: 64px; }
    .varne-faq-content { margin-bottom: 64px; }
    .varne-faq-cta { margin-top: 64px; padding-top: 64px; padding-bottom: 64px; }
}

@media (max-width: 768px) {
    .varne-faq-page { padding-top: 40px; padding-bottom: 48px; }
    .varne-faq-hero { margin-bottom: 48px; }
    .varne-faq-content { margin-bottom: 48px; }
    .varne-faq-category-group:not(:last-child) { margin-bottom: 32px; }
    .varne-faq-cta { margin-top: 48px; padding: 48px var(--margin-mobile, 20px); }
    .varne-faq-item__summary { padding: 2px 0; }
    .varne-faq-item__answer { padding-top: 8px; padding-bottom: 0; padding-right: 24px; }
}

@media (max-width: 480px) {
    .varne-faq-hero { margin-bottom: 32px; }
    .varne-faq-content { margin-bottom: 32px; }
    .varne-faq-item__summary span.font-body-lg { font-size: 16px !important; line-height: 24px !important; }
    .varne-faq-item__answer { padding-right: 0; }
}