/* =============================================================
   SHARED FAQ STYLES
   Path: wwwroot/css/shared/faq.css
   Usage: Add to any page that uses a Bootstrap accordion FAQ
   <link href="~/css/shared/faq.css" rel="stylesheet" />
   ============================================================= */

/* ── Section wrapper ── */
.faq-section {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    margin-top: 2rem;
    box-shadow: var(--shadow-lg);
}

/* ── Section header ── */
.faq-header {
    text-align: center;
    margin-bottom: 2rem;
}

.faq-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-bottom: .5rem;
}

.faq-header h2 i {
    color: var(--comp-primary, #6366f1);
    font-size: 1.5rem;
}

.faq-subheading {
    color: var(--text-secondary);
    font-size: .975rem;
    margin: 0;
}

/* ── Accordion wrapper ── */
.faq-accordion {
    max-width: 860px;
    margin: 0 auto;
}

/* ── Individual item ── */
.faq-accordion .accordion-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg) !important;
    margin-bottom: .875rem;
    overflow: hidden;
    background: var(--bg-card);
    transition: box-shadow .2s ease;
}

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

.faq-accordion .accordion-item:hover {
    box-shadow: 0 2px 12px rgba(99, 102, 241, .1);
}

/* ── Button (collapsed state) ── */
.faq-accordion .accordion-button {
    padding: 1.1rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--bg-card);
    color: var(--text-primary);       /* ← prevents Bootstrap's dark default */
    box-shadow: none;
    border: none;
    transition: background .2s ease, color .2s ease;
}

.faq-accordion .accordion-button:focus {
    box-shadow: none;
    outline: 2px solid var(--comp-primary, #6366f1);
    outline-offset: -2px;
}

/* ── Button (expanded state) ── */
.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--comp-primary, #6366f1);
    background: var(--comp-gradient-soft, rgba(99, 102, 241, .08));
    box-shadow: none;
}

/* ── Chevron arrow ── */
.faq-accordion .accordion-button::after {
    flex-shrink: 0;
    transition: transform .25s ease;
}

/* ── Body ── */
.faq-accordion .accordion-body {
    padding: 0 1.25rem 1.25rem;
    color: var(--text-secondary);
    line-height: 1.75;
    font-size: .95rem;
}

.faq-accordion .accordion-body ul {
    margin: .625rem 0 0;
    padding-left: 1.4rem;
}

.faq-accordion .accordion-body li {
    margin-bottom: .4rem;
}

.faq-accordion .accordion-body strong {
    color: var(--text-primary);
}

/* =============================================================
   DARK MODE
   ============================================================= */
[data-theme="dark"] .faq-section {
    background: var(--bg-card);
}

[data-theme="dark"] .faq-accordion .accordion-item {
    background: var(--bg-card);
    border-color: var(--border-color);
}

/* collapsed button — force readable text */
[data-theme="dark"] .faq-accordion .accordion-button {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* expanded button */
[data-theme="dark"] .faq-accordion .accordion-button:not(.collapsed) {
    background: rgba(99, 102, 241, .12);
    color: var(--comp-primary, #818cf8);
}

/* fix Bootstrap's dark SVG chevron on dark backgrounds */
[data-theme="dark"] .faq-accordion .accordion-button::after {
    filter: invert(1);
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 768px) {
    .faq-section {
        padding: 1.75rem 1.25rem;
    }

    .faq-header h2 {
        font-size: 1.4rem;
    }

    .faq-accordion .accordion-button {
        font-size: .9375rem;
        padding: 1rem;
    }

    .faq-accordion .accordion-body {
        padding: 0 1rem 1rem;
        font-size: .9rem;
    }
}






/* =============================================================
   SHARED SEO CONTENT STYLES
   Path: wwwroot/css/shared/seo-content.css
   Usage: <link href="~/css/shared/seo-content.css" rel="stylesheet" />
   Compatible with: ImageCompressor, ImageResizer, ImageType,
                    and any future tool page.
   ============================================================= */


/* =============================================================
   SECTION WRAPPER
   ============================================================= */
.seo-content-section {
    padding: 3rem 0;
}

.seo-content {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
}


/* =============================================================
   HEADINGS
   ============================================================= */
.seo-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.75rem !important;
}

.seo-subtitle {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.seo-subtitle::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 1.1em;
    background: var(--comp-primary, #6366f1);
    border-radius: 2px;
    flex-shrink: 0;
}


/* =============================================================
   BODY TEXT
   ============================================================= */
.seo-text {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: .95rem;
    margin-bottom: .75rem;
}

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


/* =============================================================
   LISTS
   ============================================================= */
.seo-list {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
}

.seo-list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: .55rem;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: .95rem;
}

.seo-list li::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--comp-primary, #6366f1);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.6;
}

.seo-list li strong {
    color: var(--text-primary);
}


/* =============================================================
   TABLE
   ============================================================= */
.seo-table {
    font-size: .9rem;
    color: var(--text-secondary);
    border-color: var(--border-color);
    margin-bottom: 0;
}

.seo-table thead tr {
    background: var(--comp-gradient-soft, rgba(99, 102, 241, .08));
}

.seo-table thead th {
    font-weight: 600;
    color: var(--text-primary);
    border-color: var(--border-color);
    padding: .75rem 1rem;
    white-space: nowrap;
}

.seo-table tbody td {
    border-color: var(--border-color);
    padding: .7rem 1rem;
    vertical-align: middle;
}

.seo-table tbody tr:hover {
    background: var(--comp-gradient-soft, rgba(99, 102, 241, .04));
}

.seo-table tbody td strong {
    color: var(--text-primary);
}


/* =============================================================
   PRO TIPS BOX
   ============================================================= */
.pro-tips-box {
    background: var(--comp-gradient-soft, rgba(99, 102, 241, .07));
    border: 1px solid rgba(99, 102, 241, .2);
    border-left: 4px solid var(--comp-primary, #6366f1);
    border-radius: var(--radius-lg);
}

.pro-tips-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: .875rem !important;
}

.pro-tips-list {
    padding-left: 1.25rem;
    margin: 0;
}

.pro-tips-list li {
    color: var(--text-secondary);
    line-height: 1.75;
    font-size: .95rem;
    margin-bottom: .45rem;
    padding-left: .25rem;
}

.pro-tips-list li:last-child {
    margin-bottom: 0;
}

.pro-tips-list li strong {
    color: var(--text-primary);
}


/* =============================================================
   INLINE FAQ ITEMS  (non-accordion style, used in ImageResizer)
   ============================================================= */
.faq-item {
    padding: 1.1rem 1.25rem;
    background: var(--bg-secondary, rgba(0,0,0,.02));
    border-radius: var(--radius-md);
    border-left: 3px solid var(--comp-primary, #6366f1);
}

.faq-question {
    font-size: .975rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: .5rem !important;
}

.faq-question strong {
    color: inherit;
}


/* =============================================================
   SECTION HEADER  (shared by Features, HowTo, FAQ wrappers)
   ============================================================= */
.section-header {
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: .5rem;
}

.section-desc,
.section-subheading {
    color: var(--text-secondary);
    font-size: .975rem;
    margin: 0;
}


/* =============================================================
   DARK MODE
   ============================================================= */
[data-theme="dark"] .seo-content {
    background: var(--bg-card);
}

[data-theme="dark"] .seo-title {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .seo-table {
    color: var(--text-secondary);
    border-color: var(--border-color);
    --bs-table-hover-bg: rgba(99, 102, 241, .06);
    --bs-table-striped-bg: rgba(255, 255, 255, .02);
}

[data-theme="dark"] .seo-table thead tr {
    background: rgba(99, 102, 241, .12);
}

[data-theme="dark"] .seo-table thead th,
[data-theme="dark"] .seo-table tbody td {
    border-color: var(--border-color);
}

[data-theme="dark"] .seo-table tbody tr:hover {
    background: rgba(99, 102, 241, .08);
}

[data-theme="dark"] .pro-tips-box {
    background: rgba(99, 102, 241, .1);
    border-color: rgba(99, 102, 241, .3);
}

[data-theme="dark"] .faq-item {
    background: rgba(255, 255, 255, .03);
}


/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 768px) {
    .seo-content {
        padding: 1.5rem 1.25rem;
    }

    .seo-title {
        font-size: 1.3rem;
    }

    .seo-subtitle {
        font-size: 1rem;
    }

    .seo-text,
    .seo-list li,
    .pro-tips-list li {
        font-size: .9rem;
    }

    .seo-table {
        font-size: .825rem;
    }

    .seo-table thead th,
    .seo-table tbody td {
        padding: .55rem .75rem;
    }

    .section-title {
        font-size: 1.3rem;
    }

    .pro-tips-box {
        padding: 1.25rem !important;
    }
}

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

    .seo-title {
        font-size: 1.15rem;
    }
}




/* =============================================================
   SEO TABLE — FULL DARK MODE FIX
   Covers: header text, body text, first column, borders,
           hover state, and Bootstrap's internal CSS variables
   ============================================================= */

[data-theme="dark"] .seo-table {
    /* Override Bootstrap's table CSS variables for dark mode */
    --bs-table-color:           var(--text-secondary);
    --bs-table-bg:              transparent;
    --bs-table-border-color:    var(--border-color);
    --bs-table-striped-color:   var(--text-secondary);
    --bs-table-striped-bg:      rgba(255, 255, 255, .02);
    --bs-table-hover-color:     var(--text-primary);
    --bs-table-hover-bg:        rgba(99, 102, 241, .08);

    color:        var(--text-secondary);
    border-color: var(--border-color);
}

/* Header row background + text */
[data-theme="dark"] .seo-table thead tr {
    background: rgba(99, 102, 241, .15);
}

[data-theme="dark"] .seo-table thead th {
    color:            var(--text-primary);
    border-color:     var(--border-color);
    background-color: transparent;
}

/* Body cells */
[data-theme="dark"] .seo-table tbody td {
    color:        var(--text-secondary);
    border-color: var(--border-color);
    background-color: transparent;
}

/* First column (Format labels) — was fading out */
[data-theme="dark"] .seo-table tbody td:first-child,
[data-theme="dark"] .seo-table tbody td:first-child strong {
    color: var(--text-primary);
}

/* Strong tags inside body */
[data-theme="dark"] .seo-table tbody td strong {
    color: var(--text-primary);
}

/* Row hover */
[data-theme="dark"] .seo-table tbody tr:hover td {
    color:      var(--text-primary);
    background: rgba(99, 102, 241, .08);
}

/* Table outer border */
[data-theme="dark"] .seo-table.table-bordered {
    border-color: var(--border-color);
}

[data-theme="dark"] .seo-table.table-bordered > :not(caption) > * > * {
    border-color: var(--border-color);
}

/* table-responsive wrapper — remove any white bleed */
[data-theme="dark"] .table-responsive {
    border-color: var(--border-color);
}