/* ==========================================================================
   FAQ Accordion - CSS-Only Reveal
   
   The answer content is always present in the DOM for SEO crawlers.
   An overlay covers the answer by default. When the hidden checkbox is
   checked (via clicking the label/button), the overlay slides down
   using max-height transition to reveal the answer.
   ========================================================================== */

/* Hide the checkbox visually but keep it in the DOM for accessibility */
.faq-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Answer wrapper - uses max-height for smooth CSS transition */
.faq-answer-wrapper {
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 
   The answer content itself - always rendered in the DOM.
   The wrapper's max-height:0 + overflow:hidden acts as the "overlay"
   that hides it visually, but crawlers still see the full HTML content.
*/
.faq-answer-content {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

/* ---- OPEN STATE (when checkbox is checked) ---- */

/* Reveal the answer by expanding max-height */
.faq-toggle:checked ~ .faq-answer-wrapper {
    max-height: 2000px; /* Large enough for any answer */
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fade in the content */
.faq-toggle:checked ~ .faq-answer-wrapper .faq-answer-content {
    opacity: 1;
    transform: translateY(0);
}

/* Rotate the chevron icon */
.faq-toggle:checked ~ .faq-question .faq-icon {
    transform: rotate(180deg);
}

/* Change button text color when open */
.faq-toggle:checked ~ .faq-question .faq-toggle-btn {
    color: #0A2647 !important;
}

/* Change "View Answer" text to "Hide Answer" using CSS content */
.faq-toggle:checked ~ .faq-question .faq-btn-text {
    font-size: 0;
    line-height: 0;
}

.faq-toggle:checked ~ .faq-question .faq-btn-text::after {
    content: "Hide";
    font-size: 0.8rem;
    line-height: normal;
}

/* Add a left accent border when open */
.faq-toggle:checked ~ .faq-question {
    border-left: 3px solid #16A085;
    background-color: rgba(22, 160, 133, 0.03) !important;
}

/* ---- Toggle button: simple inline link style ---- */
.faq-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #16A085;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.faq-question:hover .faq-toggle-btn {
    color: #0A2647;
    background: none !important;
    transform: none;
}

.faq-toggle:focus-visible ~ .faq-question {
    outline: 2px solid #16A085;
    outline-offset: -2px;
}

/* ---- FAQ Item animation on scroll ---- */
.faq-item {
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.faq-item:hover {
    transform: translateY(-1px);
}

/* ---- Responsive adjustments ---- */
@media (max-width: 640px) {
    .faq-question {
        padding: 1rem !important;
    }

    .faq-answer {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .faq-toggle:checked ~ .faq-question .faq-btn-text::after {
        content: "Hide";
    }

    /* Smaller question heading */
    .faq-question h2,
    .faq-question h3 {
        font-size: 0.875rem !important;   /* 14px */
        line-height: 1.45 !important;
    }

    /* Smaller answer body — wildcard covers CKEditor inline styles too */
    .faq-answer-content,
    .faq-answer-content *,
    .faq-answer,
    .faq-answer * {
        font-size: 0.8125rem !important;  /* 13px */
        line-height: 1.6 !important;
    }

    /* Smaller toggle button text */
    .faq-toggle-btn {
        font-size: 0.72rem !important;
    }
}

/* ---- Schema.org FAQ structured data support ---- */
/* The answer content uses semantic HTML that search engines can parse */
.faq-answer-content p,
.faq-answer-content ul,
.faq-answer-content ol {
    margin-bottom: 0.75rem;
}

.faq-answer-content p:last-child,
.faq-answer-content ul:last-child,
.faq-answer-content ol:last-child {
    margin-bottom: 0;
}

.faq-answer-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
}

.faq-answer-content ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
}

.faq-answer-content li {
    margin-bottom: 0.25rem;
}

.faq-answer-content strong {
    font-weight: 600;
    color: #374151;
}

.faq-answer-content a {
    color: #16A085;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq-answer-content a:hover {
    color: #0A2647;
}

/* ---- Always left-align answer text ---- */
.faq-answer,
.faq-answer * {
    text-align: left !important;
}