/* SEO content sections, breadcrumbs and accessibility helpers.
   Mobile-first; scales up via min-width queries. */

/* ---------- Skip link ---------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    background: #0d6efd;
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 6px 0;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* ---------- Visible focus for keyboard users ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Breadcrumbs ---------- */
.seo-breadcrumbs {
    margin: 0.75rem auto 0;
    font-size: 0.875rem;
}

.seo-breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
}

.seo-breadcrumbs li + li::before {
    content: "\203A";
    margin: 0 0.4rem;
    color: #6c757d;
}

.seo-breadcrumbs a {
    color: #0d6efd;
    text-decoration: none;
}

.seo-breadcrumbs a:hover {
    text-decoration: underline;
}

.seo-breadcrumbs [aria-current="page"] {
    color: #6c757d;
}

/* ---------- Content sections ---------- */
.seo-content {
    margin: 2rem auto 3rem;
    max-width: 60rem; /* readable line length */
    padding-left: 1rem;
    padding-right: 1rem;
}

.seo-content .seo-h2 {
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    margin: 1.75rem 0 0.75rem;
    line-height: 1.3;
}

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

.seo-direct-answer {
    background: rgba(13, 110, 253, 0.07);
    border-left: 4px solid #0d6efd;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
}

.seo-direct-answer .seo-h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

.seo-keyfacts ul {
    padding-left: 1.25rem;
}

.seo-steps {
    padding-left: 1.25rem;
}

.seo-steps li {
    margin-bottom: 0.4rem;
}

/* ---------- FAQ ---------- */
.seo-faq-item {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 0.6rem;
    background: rgba(0, 0, 0, 0.015);
}

.seo-faq-item summary {
    cursor: pointer;
    padding: 0.85rem 1rem;
    font-weight: 600;
    list-style-position: inside;
    min-height: 44px; /* touch target */
}

.seo-faq-item[open] summary {
    border-bottom: 1px solid #dee2e6;
}

.seo-faq-answer {
    padding: 0.85rem 1rem;
}

.seo-reviewed {
    margin-top: 2rem;
    font-size: 0.85rem;
    color: #6c757d;
}

/* ---------- Dark theme ---------- */
.theme-dark .seo-direct-answer {
    background: rgba(13, 110, 253, 0.18);
}

.theme-dark .seo-faq-item {
    border-color: #343a40;
    background: rgba(255, 255, 255, 0.03);
}

.theme-dark .seo-faq-item[open] summary {
    border-bottom-color: #343a40;
}

.theme-dark .seo-breadcrumbs a {
    color: #6ea8fe;
}

/* ---------- Larger screens ---------- */
@media (min-width: 768px) {
    .seo-content {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---------- Prevent horizontal overflow from tool content ---------- */
.seo-content img {
    max-width: 100%;
    height: auto;
}

.seo-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}