/**
 * Sitemap styles — the index and its five sub-pages.
 * ============================================================================
 *
 * DS-01 — design-system alignment. No route, link, heading or query changed;
 * these are crawl-surface pages and their structure is load-bearing for SEO.
 *
 * WHAT MOVED
 * ---------------------------------------------------------------------------
 * 1. THREE BRAND FILLS CARRIED `--color-text-primary`. `.sitemap-index-card__btn`,
 *    the index card's hover icon and `.sitemap-az-bar a.active` all painted
 *    `--color-text-primary` on a `--color-primary` fill. That token FLIPS with
 *    the theme (#0B0F17 light / near-white dark); the fill does not flip the
 *    same way. In dark that is near-white on lime — **1.42:1**. The theme has
 *    a token for exactly this, `--color-text-on-brand`, and `buttons.css`
 *    carries the note explaining why it must never chain to
 *    `--color-text-primary`. The button is now `.btn .btn--primary`, so it
 *    inherits the fix rather than restating it.
 *
 * 2. GRADIENT TEXT ON THE H1, plus `text-shadow: 0 0 40px rgba(0,0,0,0.25)`
 *    behind it. Solid ink now, matching `.tr-archive__title`,
 *    `.tr-altpage__title` and `.tr-home .hero-title`.
 *
 * 3. A FULL-BLEED `100vw` GLOW behind every sitemap header — a two-layer
 *    radial + linear gradient on a `left: calc(-50vw + 50%)` pseudo-element.
 *    Removed. `100vw` includes the scrollbar gutter, so it was also a latent
 *    horizontal-overflow source on Windows.
 *
 * 4. OFF-PALETTE COLOURS: `#0096c7` (the pre-lime cyan) as the
 *    `--color-primary-dark` fallback, `rgba(79, 70, 229, 0.3)` (indigo) on
 *    link hover, and `#333` / `#f8fafc` / `#e2e8f0` / `#999` / `#888` /
 *    `#666` / `#f0f0f0` / `#f5f5f5` as hardcoded neutrals. All read tokens now.
 *
 * 5. `font-family` was declared twice — `'Inter'` hardcoded on the page root
 *    (bypassing `--font-family-body`) and `monospace` on the A–Z bar, for a
 *    "technical feel". The theme ships no mono face, so that resolved to
 *    whatever the OS had. Both removed; the A–Z bar keeps its alignment with
 *    `font-variant-numeric: tabular-nums` instead.
 *
 * 6. `.sitemap-index-card` needed a `[data-theme="dark"]` block only because
 *    its light values were hardcoded. On `--surface-card` / `--border-default`
 *    it needs neither, so the override block is gone.
 *
 * @package TiorAI
 */

.sitemap-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 24px) var(--space-12);
    color: var(--color-text-primary);
}

/* Page header — the same centred block the rest of the theme opens with.
   The full-bleed glow pseudo-element that used to sit here is gone; see note 3
   in the file header. */
.sitemap-header {
    position: relative;
    margin-bottom: var(--space-8);
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
}

/* Solid ink, no clipped gradient, no glow shadow — see note 2. The size is the
   fluid step `.tr-page-header__title` resolves to, so a sitemap H1 and an
   archive H1 are the same rank at every viewport. */
.sitemap-header h1 {
    font-size: clamp(1.875rem, 1.574rem + 1.235vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin: 0 auto var(--space-5);
    max-width: 24ch;
    color: var(--color-text-primary);
    text-wrap: balance;
}

.sitemap-header p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
    margin: 0 auto var(--space-4);
    max-width: 62ch;
    text-wrap: pretty;
}

.sitemap-nav {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: 0.9rem;
    margin-top: var(--space-4);
    justify-content: center;
}

.sitemap-nav a {
    text-decoration: none;
    color: var(--color-text-link);
    font-weight: var(--font-weight-medium);
}

.sitemap-nav a:hover {
    text-decoration: underline;
}

.sitemap-nav span {
    color: var(--color-text-tertiary);
}

/* A-Z Bar - Compact */
/* A–Z jump bar. Left-aligned so the letters scan as a sequence rather than a
   centred decoration. `tabular-nums` keeps the cells even without reaching for
   a monospace face the theme does not ship — see note 5 in the file header. */
.sitemap-az-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-8);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-default);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    justify-content: flex-start;
}

.sitemap-az-bar a {
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-base);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.sitemap-az-bar a:hover {
    background: var(--surface-interactive);
    color: var(--color-text-link);
    text-decoration: none;
}

/* DS-01: the label was `--color-text-primary` on a brand fill — see note 1 in
   the file header. `--color-text-on-brand` is the token that pairs with this
   fill in both themes. */
.sitemap-az-bar a.active {
    background: var(--color-primary);
    color: var(--color-text-on-brand);
    font-weight: var(--font-weight-bold);
}

/* List Style (No Cards) */
.sitemap-list {
    margin-bottom: var(--space-12);
}

.sitemap-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-item {
    margin: 0;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-default);
    display: block;
}

.sitemap-link {
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    display: block;
    transition: color var(--transition-fast);
    line-height: var(--line-height-snug);
}

/* The underline colour was `rgba(79, 70, 229, 0.3)` — indigo, from no palette
   this theme has ever had. `currentColor` ties it to the link colour so it can
   never drift again. */
.sitemap-link:hover {
    color: var(--color-text-link);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 2px;
}

/* Free Tools sitemap: capitalize tool titles + inline verified badge */
.sitemap-page--free-tools .sitemap-link__title {
    text-transform: capitalize;
}

.sitemap-link__badge {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-inline-start: 4px;
    vertical-align: -3px;
}

.sitemap-label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-4);
    font-weight: var(--font-weight-semibold);
}

/* Pagination — A-12.
   The sitemaps now render `template-parts/shared/pagination.php`, so only the
   wrapper's own spacing stays here; every item rule is owned by
   `unified/pagination.css`.

   The deleted `.page-numbers` block was not merely redundant. Being a
   descendant selector (0,2,0) it outranked `.ui-pagination__link` (0,1,0) and
   would have reinstated exactly what A-12a fixed: `.current` set a brand fill
   with `--color-text-primary` on top, which is 2.28:1 in dark, and the items
   were 2rem (32px) rather than the theme's 44px tap target. It also had no
   `:focus-visible` state and keyed its dark mode off `prefers-color-scheme`,
   which this theme does not use — it switches on `data-theme`, so those
   overrides fired against the user's OS setting rather than the site's. */
.sitemap-pagination {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
}

/* DS-01: the `[data-theme="dark"] .sitemap-page` block that used to sit here
   redefined four LOCAL variables — `--text-color`, `--text-muted`,
   `--border-color`, `--bg-secondary` — that every rule above consumed through
   `var(--token, #hardcoded-light-fallback)`. That pattern is what made the
   file need a dark block at all: the light values were literals, so dark had
   to be patched on top.

   Every one of those consumers now reads a canonical theme-aware token
   directly (`--color-text-primary`, `--color-text-tertiary`,
   `--border-default`, `--surface-interactive`), which already flips. Nothing
   is left to override, so the block and the `.sitemap-item` border patch that
   followed it are both deleted. The rendered values in dark are unchanged or
   better; in light they stop being frozen literals.

   The earlier fix this replaces is still worth reading in git history: this
   block was originally `@media (prefers-color-scheme: dark)`, which let the OS
   decide the text colour while the site decided the background, and measured
   1.24:1 and 1.52:1 in the two mismatched combinations. Switching the gate to
   `[data-theme]` fixed that; removing the need for a gate finishes it. */

/* ── Sitemap Index Page ─────────────────────────────────────── */
/* The index is the one wide sitemap route — its five cards need the full
   measure, the list routes do not. Same clamp as `.container`, so it lines up
   with the site header and footer above and below it rather than sitting in
   its own 1200px box. */
.sitemap-page--index {
    max-width: clamp(1024px, 96vw, 1280px);
    padding: 0 clamp(16px, 4vw, 24px) var(--space-16);
}

/* Index header sits slightly roomier; base styling inherited from .sitemap-header */
.sitemap-page--index .sitemap-header {
    margin-bottom: var(--space-4);
}

/* Breakpoint-free: the cards reflow on their own measure instead of stepping
   3 -> 2 -> 1 at two media queries.

   The 340px floor is SOLVED, not guessed, so the five cards keep the 3+2 shape
   the fixed `repeat(3, 1fr)` produced. With a 24px gap inside the container's
   ~1232px content box: 3 columns need 3(340) + 2(24) = 1068, which fits;
   4 need 4(340) + 3(24) = 1432, which does not. At a 900px viewport it
   resolves to 2, and below ~730px to 1 — the same 3/2/1 ladder, without the
   media queries.

   A 280px floor was tried first and is wrong here: it fits FOUR columns at
   desktop, which leaves the fifth card alone on its own row. */
.sitemap-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--space-6);
    margin-top: var(--space-8);
}

/* Card surface, card radius, card border — the same three tokens `.tiorai-card`
   paints, so an index card and a changelog entry read as one component family.
   `--radius-2xl` (20px) was one rung above the theme's card radius. */
.sitemap-index-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-default);
    padding: clamp(1.5rem, 3vw, 2rem);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* Matches `.tiorai-card:hover` exactly: 2px, the elevation token, the stronger
   border. Was a 4px lift with a hand-rolled shadow and a full brand border. */
.sitemap-index-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-border-hover);
}

.sitemap-index-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--tiorai-badge-bg-brand);
    color: var(--color-primary);
    margin-bottom: var(--space-5);
    flex-shrink: 0;
    transition: background-color var(--transition-fast);
}

/* DS-01: was a brand fill carrying `--color-text-primary` — near-white on lime
   in dark, 1.42:1. See note 1 in the file header. The tint deepens instead, so
   the glyph colour never moves and the state cannot fail contrast. */
.sitemap-index-card:hover .sitemap-index-card__icon {
    background: var(--surface-selected);
}

.sitemap-index-card h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-3);
    color: var(--color-text-primary);
    line-height: 1.3;
}

.sitemap-index-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
    flex-grow: 1;
    margin: 0 0 var(--space-6);
}

/* DS-01: `.sitemap-index-card__btn` re-implemented `.btn .btn--primary` with a
   different padding, a different font-size, a `translateX(3px)` hover the
   shared button does not have, and — the reason it had to go — a
   `--color-text-primary` label on a `--color-primary` fill, which measures
   1.42:1 in dark. The markup uses the shared button now; only the arrow's
   nudge is page-local, because it is the one thing the shared button has no
   opinion about. */
.sitemap-index-card__btn {
    align-self: flex-start;
    margin-top: auto;
}

.sitemap-index-card__btn svg {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.sitemap-index-card__btn:hover svg {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {

    .sitemap-index-card,
    .sitemap-index-card__btn svg {
        transition: none;
    }

    .sitemap-index-card:hover {
        transform: none;
    }

    .sitemap-index-card__btn:hover svg {
        transform: none;
    }
}

.sitemap-footer {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-default);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* Responsive
   The two `grid-template-columns` steps that used to live here are gone — the
   grid is `auto-fit`/`minmax` now and reflows continuously, so a fixed 900px
   and 580px pair could only disagree with it. */
@media (max-width: 580px) {
    .sitemap-page--index {
        padding: 0 var(--space-4) var(--space-12);
    }
}

/* DS-01: two `[data-theme="dark"] .sitemap-index-card` overrides were deleted
   here. They existed only to swap the hardcoded light values for
   `--surface-card` / `--border-default`; the base rule reads those tokens
   directly now, so there is nothing left to override. The dark shadow override
   went with them — `--shadow-lg` is already theme-paired. */