/* =========================================================
   Site Map  —  sitemap.php
   ---------------------------------------------------------
   The site's index, set as a reference sheet rather than a
   page of links: each section announces itself in the
   eyebrow-and-rule band the rest of the site uses
   (vfs-specs.css's part heading, models' section bands), each
   group is a titled column, and the links stay quiet until
   they are pointed at.

   This replaces an inline <style> block in the page, which
   had drifted a long way off the brand:

   - links were #06c, the browser's own default blue, the one
     colour on the site that belongs to no palette;
   - each group's heading was set at 0.8125rem against 1.25rem
     links, so every column read upside down — the label
     quieter than the things it labelled;
   - section labels were #e4e4e4 over a full-width 1px rule in
     the same near-white, a band heavier than the headings on
     any other page;
   - the column capped itself at 1200px, its own measure,
     while the header above and the footer below sit on the
     site's 1600px one.

   Colour comes from the theme tokens, so this follows the
   site rather than restating it. Every var() carries its
   token's value as a fallback.
   ========================================================= */

.b-sitemap {
    /* The footer's measure and its gutter ladder (footer.css), which the
       heroes and every other body column reproduce — that shared left edge is
       the point, so these steps must move with footer.css if it ever changes. */
    --sm-measure: 1600px;
    --sm-gutter: 6rem;

    --sm-strong: var(--theme-text-strong, #ffffff);
    --sm-muted: var(--theme-text-muted, #c4c6cc);
    --sm-soft: var(--theme-text-soft, #989ba3);
    --sm-divider: var(--theme-divider, rgba(255, 255, 255, 0.08));
    --sm-accent: var(--theme-accent, #aa0000);
}

@media only screen and (min-width: 1600px) {
    .b-sitemap {
        --sm-gutter: 9rem;
    }
}

@media only screen and (max-width: 1200px) {
    .b-sitemap {
        --sm-gutter: 2rem;
    }
}

@media only screen and (max-width: 700px) {
    .b-sitemap {
        --sm-gutter: 1.25rem;
    }
}

.b-sitemap .sm-wrap {
    width: min(var(--sm-measure), 100% - 2 * var(--sm-gutter));
    margin-inline: auto;
    padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}

.b-sitemap .sm-section {
    margin-bottom: clamp(2.75rem, 5vw, 3.75rem);
}

/* Section band — small caps with a hairline running out to the right. The
   rule stops at the text rather than underlining the full width, so a short
   label reads as a heading and not as a divider with words resting on it. */
.b-sitemap .sm-section__label {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
    padding: 0;
    border: 0;
    color: var(--sm-soft);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.b-sitemap .sm-section__label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--sm-divider);
}

.b-sitemap .sm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2.5rem);
}

/* The group's name is the strong element in its column, and its links are
   the quiet ones — the ranking the old sheet had backwards. */
.b-sitemap .sm-group h3 {
    margin: 0 0 0.7rem;
    color: var(--sm-strong);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-transform: none;
}

.b-sitemap .sm-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.b-sitemap .sm-group li {
    margin-bottom: 0.4rem;
}

/* Two class levels deep to beat m072224.css's global anchor colour, which is
   set ON the element rather than inherited (docs/gotchas.md). */
.b-sitemap .sm-group a {
    color: var(--sm-muted);
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.16s ease;
}

/* Brand red arrives as the underline, not as the text colour: a column of red
   links would fight the page's actual CTAs, and #aa0000 on this ground is a
   poor read at 0.92rem. The word goes white, the mark under it goes Titan. */
.b-sitemap .sm-group a:hover,
.b-sitemap .sm-group a:focus-visible {
    color: var(--sm-strong);
    text-decoration: underline;
    text-decoration-color: var(--sm-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* The footer's link menu is off on this page alone: 41 of its 50 links are
   already on the page, in the very columns above, on a page whose whole job is
   to list them. Only the menu goes — the band below it stays, because that half
   is not navigation and exists nowhere else here: the address and map link, the
   phone and email, the social profiles, the copyright, and the legal row with
   Privacy, Terms, Cookie Policy and the Cookie Preferences control. That last
   one is the reason this is a CSS rule and not footer_context => 'none':
   data-cc-open-preferences lives only in includes/footer.php and
   src/js/cookie-consent.js, so dropping the whole footer would make this the
   one public page where a visitor who has dismissed the banner cannot reopen
   their consent settings. */
.b-sitemap .footer-menu {
    display: none;
}

@media only screen and (max-width: 900px) {
    .b-sitemap .sm-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width: 600px) {
    .b-sitemap .sm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .b-sitemap .sm-group a {
        transition: none;
    }
}