/* Page-specific styles: faq.css */

body {
    width: 100%;
    font-family: 'NotoSansHans', sans-serif;
    color: var(--dark-color);
    background-color: var(--white);
    overflow-x: hidden;
}

/* Typography Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'MiSans-Bold', sans-serif;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--medium-green), var(--teal-green));
    padding: 10px 120px;
    text-align: center;
    position: relative;
}

.breadcrumb {
    display: none !important;
}

.hero h1 {
    font-size: 56px;
    color: var(--dark-color);
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.hero p {
    font-size: 20px;
    color: var(--dark-color);
    opacity: 0.9;
    margin-bottom: 50px;
    font-weight: 500;
}

.search-container {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 50;
}

.search-input {
    width: 100%;
    padding: 22px 60px 22px 30px;
    border-radius: 60px;
    border: 4px solid var(--teal-green);
    font-size: 18px;
    outline: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    font-family: 'MiSans', sans-serif;
    background-color: var(--white);
}

.search-icon {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--teal-green);
    pointer-events: none;
}

.search-results-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.06);
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    padding: 0;
}

.search-result-item {
    display: flex;
    padding: 10px 20px;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.3s;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.search-result-item:hover,
.search-result-item.search-result-active {
    cursor: pointer;
    background-color: var(--light-cream);
}

.search-result-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background-color: var(--teal-green);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 16px;
    margin-top: 2px;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-family: 'MiSans-Bold', sans-serif;
    font-size: 16px;
    color: var(--dark-color);
    margin-bottom: 6px;
    line-height: 1.4;
}

.search-result-title strong {
    color: var(--teal-green);
    font-weight: 700;
}

.search-result-meta {
    font-size: 11px;
    color: var(--teal-green);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.search-result-snippet {
    font-size: 14px;
    color: #5a6b7c;
    line-height: 1.5;
}

.search-result-snippet strong {
    color: var(--dark-color);
    font-weight: 700;
    background-color: rgba(90, 165, 138, 0.12);
    padding: 0 2px;
    border-radius: 2px;
}

.search-result-empty {
    padding: 24px 28px;
    text-align: center;
    color: #5a6b7c;
    font-size: 15px;
    font-style: italic;
}

/* Quick Links */
.quick-links {
    background-color: var(--light-cream);
    padding: 40px 120px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.quick-label {
    font-weight: 700;
    margin-right: 10px;
    color: var(--dark-color);
    font-size: 18px;
}

.quick-btn {
    background-color: var(--white);
    color: var(--teal-green);
    border: 1px solid var(--teal-green);
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.quick-btn:hover {
    background-color: var(--teal-green);
    color: var(--white);
}

/* FAQ Categories */
.faq-section {
    padding: 100px 120px;
}

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 50px;
}

.section-icon {
    width: 50px;
    height: 50px;
    background-color: var(--teal-green);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 24px;
}

.section-title {
    font-size: 32px;
    color: var(--dark-color);
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Accordion Styles */
.accordion-item {
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
}

/* Simulate specific backgrounds for accordion items within sections if needed, 
           but prompt says Section Background handles the main color. 
           The items themselves usually are white or blend in. 
           Let's keep items white or slightly off-white for contrast. */

.section-bg-cream .accordion-item {
    background-color: var(--white);
    border-color: rgba(0, 0, 0, 0.05);
}

.section-bg-pale-green .accordion-item {
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.05);
}

.accordion-header {
    padding: 25px 30px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.accordion-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-color);
    font-family: 'MiSans-Bold', sans-serif;
}

.accordion-icon {
    color: var(--teal-green);
    font-size: 24px;
    transition: transform 0.3s;
}

.accordion-content {
    padding: 0 30px 25px;
    font-size: 16px;
    line-height: 1.6;
    color: #5a6b7c;
    display: none;
}

/* Expanded State Simulation */
.accordion-item.expanded {
    border-left: 5px solid var(--teal-green);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.accordion-item.expanded .accordion-content {
    display: block;
}

.accordion-item.expanded .accordion-icon {
    transform: rotate(180deg);
}

/* Background Classes */
.bg-white {
    background-color: var(--white);
}

.bg-cream {
    background-color: var(--light-cream);
}

.bg-pale-green {
    background-color: var(--pale-green);
}

/* Still Have Questions */
.still-questions {
    background-color: var(--teal-green);
    padding: 100px 120px;
    text-align: center;
    color: var(--white);
}

.still-questions h2 {
    font-size: 42px;
    margin-bottom: 15px;
}

.still-questions p {
    font-size: 20px;
    margin-bottom: 50px;
    opacity: 0.9;
}

.cta-group {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-cta-cream {
    background-color: var(--light-cream);
    color: var(--dark-color);
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    border: none;
}

.btn-cta-medium {
    background-color: var(--medium-green);
    color: var(--dark-color);
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    border: none;
}

.btn-cta-outline {
    background-color: var(--white);
    color: var(--teal-green);
    border: 2px solid var(--teal-green);
    /* Visual trick: white bg inside */
    /* The prompt says "white with teal border" */
    border: 2px solid #5aa58a;
    /* slightly darker teal for border visibility on white */
    padding: 14px 38px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
}

/* Footer */
footer {
    background-color: var(--dark-color);
    color: var(--white);
    padding: 80px 120px 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-brand h3 {
    font-size: 24px;
    color: var(--teal-green);
    margin-bottom: 20px;
}

.footer-brand p {
    line-height: 1.6;
    opacity: 0.7;
    max-width: 300px;
}

.footer-col h4 {
    font-size: 18px;
    margin-bottom: 25px;
    color: var(--pale-green);
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    opacity: 0.8;
    transition: opacity 0.3s;
}

.footer-links a:hover {
    opacity: 1;
    color: var(--teal-green);
}

.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    text-align: center;
    opacity: 0.5;
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 1200px) {

    .hero,
    .quick-links,
    .faq-section,
    .still-questions,
    footer {
        padding-left: 40px;
        padding-right: 40px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 992px) {

    .nav-links,
    .header-actions {
        display: none;
    }

    .hero h1 {
        font-size: 42px;
    }

    .quick-links {
        padding: 30px 20px;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 60px 20px;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero p {
        font-size: 18px;
    }

    .search-input {
        padding: 15px 50px 15px 20px;
        font-size: 16px;
    }

    .search-results-dropdown {
        max-height: 300px;
        border-radius: 16px;
    }

    .search-result-item {
        display: flex;
        padding: 14px 20px;
        gap: 12px;
    }

    .search-result-icon {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .search-result-title {
        font-size: 15px;
    }

    .search-result-snippet {
        font-size: 13px;
    }

    .faq-section {
        padding: 60px 20px;
    }

    .section-title {
        font-size: 24px;
    }

    .still-questions {
        padding: 60px 20px;
    }

    .still-questions h2 {
        font-size: 28px;
    }

    .cta-group {
        flex-direction: column;
        align-items: center;
    }

    .cta-group button {
        width: 100%;
        max-width: 300px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-brand p {
        max-width: 100%;
    }

    .accordion-title {
        font-size: 16px;
    }
}