/*
 * C-Sky Photonic — shared SEO content presentation
 * Styled to match the established Binocular Glossary / FAQ cards.
 * This file contains only presentation rules for visible, visitor-facing
 * SEO content sections; no SEO text is hidden from users.
 */

.seo-content {
    width: min(1500px, 100%);
    box-sizing: border-box;
    margin: 0 auto 0.7rem;
    padding: clamp(1rem, 1vw, 1rem);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    color: #334155;
}

.seo-content h1 {
    margin: 0 0 1rem;
    /* color: #0f172a; */
    color:black;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    font-weight: 800;
    text-align: center;
    text-wrap: balance;
}

.seo-content h2 {
    margin: 1.25rem 0 0.75rem;
    color: black;
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    line-height: 1.35;
    font-weight: 750;
    text-align: center;
    text-justify: inter-word;
}

.seo-content p {
    max-width: none;
    margin: 0 0 0.50rem;
    color: #475569;
    font-size: 1rem;
    line-height: 1.50;
    text-align: center;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.seo-content p:last-child {
    margin-bottom: 0;
}

.seo-content ul,
.seo-content ol {
    margin: 0.75rem 0 1rem;
    padding-left: 1.4rem;
    color: #475569;
    line-height: 1.7;
}

.seo-content li {
    margin-bottom: 0.35rem;
    text-align: justify;
    text-justify: inter-word;
}

.seo-content a {
    color: var(--theme-teal, #008080);
    font-weight: 650;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.seo-content a:hover,
.seo-content a:focus-visible {
    color: var(--theme-teal-hover, #006666);
}

.seo-content strong {
    color: #334155;
}

@media (max-width: 768px) {
    .seo-content {
        margin: 0.75rem auto 1rem;
        padding: 1rem;
        border-radius: 10px;
    }

    .seo-content h1 {
        margin-bottom: 0.8rem;
        font-size: clamp(1.55rem, 7vw, 2rem);
    }

    .seo-content h2 {
        margin-top: 1rem;
        font-size: clamp(1.1rem, 5.5vw, 1.35rem);
    }

    .seo-content p,
    .seo-content li {
        font-size: 0.96rem;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .seo-content {
        padding: 0.9rem;
    }
}