/* ============================================================
   seo-samples.css — Static, pre-rendered "Preview in popular
   styles" section (machine-visible style samples).

   The HTML is present at parse time (baked by generate-pages.js),
   so this stylesheet only enhances spacing/colour — ZERO CLS.
   Uses the site's canonical design tokens (with safe fallbacks)
   so it inherits both the dark and light themes automatically.
   ============================================================ */

.seo-samples {
    width: 100%;
    padding: var(--s-3xl, 4rem) var(--s-md, 1rem);
    /* Match the section rhythm of .content-section (How It Works sits directly
       below with the same top border) and visually separate this static
       preview band from the live generator zone above it. */
    border-top: 1px solid var(--c-border, rgba(255, 255, 255, 0.06));
}

.seo-samples__inner {
    max-width: 980px;
    margin: 0 auto;
}

.seo-samples__title {
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 var(--s-md, 1rem);
    /* One restrained brand-gradient accent so the section reads as part of the
       product, not a generic table. Falls back to solid text where unsupported. */
    color: var(--c-text, #f0f0f5);
    background: var(--grad-brand, none);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* If background-clip:text is unsupported the gradient would hide the text; the
   @supports guard restores a solid colour fill in that case. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .seo-samples__title {
        -webkit-text-fill-color: currentColor;
        color: var(--c-text, #f0f0f5);
    }
}

.seo-samples__intro {
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    line-height: 1.65;
    text-align: center;
    max-width: 62ch;
    margin: 0 auto var(--s-xl, 2rem);
    color: var(--c-text-secondary, #8888a0);
}

.seo-samples__intro strong {
    color: var(--c-text, #f0f0f5);
    font-weight: 700;
}

.seo-samples__subhead {
    font-size: 1.1rem;
    font-weight: 700;
    margin: var(--s-xl, 2rem) 0 var(--s-xs, 0.25rem);
    color: var(--c-text, #f0f0f5);
}

/* Short lead-in under each subhead: clarifies the previews are static and
   points users to the live generator (distinctness affordance). Uses
   --c-text-secondary (passes WCAG AA in both themes), never --c-text-muted. */
.seo-samples__hint {
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 var(--s-md, 1rem);
    color: var(--c-text-secondary, #8888a0);
}

.seo-samples__hint strong {
    color: var(--c-text, #f0f0f5);
    font-weight: 700;
}

/* ── "Preview in popular styles" list ── */
.seo-samples__list {
    list-style: none;
    margin: 0 0 var(--s-md, 1rem);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--s-sm, 0.5rem);
}

/* Deliberately NOT styled like the live generator's .font-card (no full 1px
   box, no hover-lift, no glow) so users read these as flat reference previews,
   not a second interactive/broken generator. A left brand-accent rail + a
   faint surface wash signals "informational", not "clickable". */
.seo-samples__item {
    display: flex;
    flex-direction: column;
    gap: var(--s-sm, 0.5rem);
    padding: 0.7rem 1rem;
    background: var(--c-surface, rgba(18, 18, 32, 0.65));
    border-left: 3px solid var(--c-pink, #ff2d78);
    border-radius: 0 var(--r-sm, 10px) var(--r-sm, 10px) 0;
}

/* The styled sample is the indexable content. Keep it readable,
   let wide glyphs (fullwidth / squared) wrap instead of overflow. */
.seo-samples__sample {
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--c-text, #f0f0f5);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.seo-samples__meta {
    display: flex;
    align-items: center;
    gap: var(--s-sm, 0.5rem);
    flex-wrap: wrap;
}

.seo-samples__name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--c-text, #f0f0f5);
}

/* Category tag. The label uses --c-text-secondary (passes WCAG AA in both
   themes at this small size); the pink is kept as the tinted fill + border so
   it still reads on-brand without the sub-AA pink-text-on-bg contrast. The
   category is ALSO printed as normal text in the table's third column, so this
   pill is a secondary visual cue and can safely be de-emphasised. */
.seo-samples__cat {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: var(--r-full, 999px);
    color: var(--c-text-secondary, #8888a0);
    background: rgba(255, 45, 120, 0.10);
    border: 1px solid var(--c-border-hover, rgba(255, 255, 255, 0.12));
}

/* ── Style comparison table ── */
.seo-samples__table-wrap {
    overflow-x: auto;           /* horizontal scroll on small screens, no shift */
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.06));
    border-radius: var(--r-md, 16px);
}

/* The wrapper is keyboard-focusable (tabindex=0) so keyboard-only users can
   reach the horizontal scroll on narrow viewports; give it a visible ring. */
.seo-samples__table-wrap:focus-visible {
    outline: 2px solid var(--c-pink, #ff2d78);
    outline-offset: 2px;
}

.seo-samples__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    min-width: 380px;           /* keeps 3 columns legible while wrapper scrolls */
}

.seo-samples__table caption {
    text-align: left;
    padding: 0.85rem 1rem;
    font-size: 0.8rem;
    /* --c-text-secondary, NOT --c-text-muted: muted (#94a3b8) on the light-theme
       background (#F8FAFC) is ~2.3:1 and fails WCAG AA; secondary passes both. */
    color: var(--c-text-secondary, #8888a0);
}

.seo-samples__table th[scope="col"] {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-secondary, #8888a0);
    padding: 0.75rem 1rem;
    background: var(--c-surface, rgba(18, 18, 32, 0.65));
    border-bottom: 1px solid var(--c-border, rgba(255, 255, 255, 0.06));
}

.seo-samples__table th[scope="row"] {
    text-align: left;
    font-weight: 700;
    white-space: nowrap;
    padding: 0.7rem 1rem;
    color: var(--c-text, #f0f0f5);
}

.seo-samples__table td {
    padding: 0.7rem 1rem;
    vertical-align: middle;
    color: var(--c-text-secondary, #8888a0);
}

.seo-samples__table td.seo-samples__sample {
    font-size: 1.15rem;
    color: var(--c-text, #f0f0f5);
}

.seo-samples__table tbody tr + tr th,
.seo-samples__table tbody tr + tr td {
    border-top: 1px solid var(--c-border, rgba(255, 255, 255, 0.06));
}

.seo-samples__table tbody tr:nth-child(even) td,
.seo-samples__table tbody tr:nth-child(even) th[scope="row"] {
    background: var(--c-surface, rgba(18, 18, 32, 0.65));
}

.seo-samples__note {
    font-size: 0.85rem;
    line-height: 1.6;
    text-align: center;
    max-width: 62ch;
    margin: var(--s-lg, 1.5rem) auto 0;
    /* Load-bearing "200+ styles / 7 categories" claim — must pass WCAG AA for
       low-vision users AND be readable by crawlers. --c-text-muted fails AA in
       light mode (~2.3:1); --c-text-secondary passes both themes (~7:1 / 6.9:1). */
    color: var(--c-text-secondary, #8888a0);
}

.seo-samples__note strong {
    color: var(--c-text, #f0f0f5);
    font-weight: 700;
}

@media (max-width: 600px) {
    .seo-samples__list {
        grid-template-columns: 1fr;
    }
    .seo-samples__sample {
        font-size: 1.15rem;
    }
}