/**
 * ProCommerce Core — Sitemap Section
 *
 * The JavaScript-free second route to every page that the Estonian accessibility
 * checklist rule 3.4 (WCAG 2.4.5) requires alongside the menu.
 *
 * Its own file rather than a block in ecommerce-sections.css: this is a Content
 * section, it renders on sites with no catalogue at all, and a shop that restyles
 * its product cards has no reason to inherit sitemap rules in the same override.
 *
 * Minimal CSS with CSS variables for complete customization.
 * Override any variable in your frontend CSS to match your brand.
 *
 * Variable naming: --pcs-* (ProCommerce Sections), shared with the other core
 * sections so a project sets --pcs-link-color once.
 *
 * Everything here is layout only. No rule may hide a link at any width — a link
 * the stylesheet removes is a link the sitemap does not provide.
 */

:root {
    --pcs-sitemap-padding: 4rem 0;
    --pcs-sitemap-padding-mobile: 2rem 0;
    --pcs-sitemap-max-width: 1200px;
    --pcs-sitemap-columns: 3;
    --pcs-sitemap-column-gap: 2rem;
    --pcs-sitemap-group-gap: 2.5rem;
    --pcs-sitemap-title-size: 2rem;
    --pcs-sitemap-title-size-mobile: 1.5rem;
    --pcs-sitemap-group-title-size: 1.25rem;
    --pcs-sitemap-heading-weight: 600;
    --pcs-sitemap-indent: 1.25rem;
    --pcs-sitemap-item-gap: 0.5rem;
    --pcs-sitemap-text-size: 1rem;
    --pcs-sitemap-line-height: 1.6;
    --pcs-sitemap-border-color: #e0e0e0;
    --pcs-sitemap-link-color: inherit;
    --pcs-sitemap-link-hover-color: inherit;
    --pcs-sitemap-focus-outline: 2px solid currentColor;
    --pcs-sitemap-focus-offset: 2px;
}

.pcs-sitemap {
    padding: var(--pcs-sitemap-padding);
}

.pcs-sitemap .container {
    max-width: var(--pcs-sitemap-max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

.pcs-sitemap__title {
    font-size: var(--pcs-sitemap-title-size);
    font-weight: var(--pcs-sitemap-heading-weight);
    line-height: 1.3;
    margin: 0 0 1.5rem;
}

.pcs-sitemap__group + .pcs-sitemap__group {
    margin-top: var(--pcs-sitemap-group-gap);
}

.pcs-sitemap__group-title {
    font-size: var(--pcs-sitemap-group-title-size);
    font-weight: var(--pcs-sitemap-heading-weight);
    line-height: 1.3;
    margin: 0 0 0.75rem;
}

.pcs-sitemap__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--pcs-sitemap-text-size);
    line-height: var(--pcs-sitemap-line-height);
}

/* Multi-column only on the top level of a group. `break-inside: avoid` keeps a
   parent and its nested children in one column — split across a column break
   they read as two unrelated lists. */
.pcs-sitemap__group > .pcs-sitemap__list {
    columns: var(--pcs-sitemap-columns);
    column-gap: var(--pcs-sitemap-column-gap);
}

.pcs-sitemap__group > .pcs-sitemap__list > .pcs-sitemap__item {
    break-inside: avoid;
}

.pcs-sitemap__item + .pcs-sitemap__item {
    margin-top: var(--pcs-sitemap-item-gap);
}

.pcs-sitemap__list--nested {
    columns: initial;
    margin: var(--pcs-sitemap-item-gap) 0 0 var(--pcs-sitemap-indent);
    padding-left: var(--pcs-sitemap-indent);
    border-left: 1px solid var(--pcs-sitemap-border-color);
}

.pcs-sitemap__link {
    color: var(--pcs-sitemap-link-color);
    text-decoration: underline;
}

.pcs-sitemap__link:hover {
    color: var(--pcs-sitemap-link-hover-color);
}

/* Replaced, never removed: a link the keyboard cannot be seen to be on is a link
   a keyboard user cannot use (checklist 8.2, WCAG 2.4.7). */
.pcs-sitemap__link:focus-visible {
    outline: var(--pcs-sitemap-focus-outline);
    outline-offset: var(--pcs-sitemap-focus-offset);
}

/* Columns collapse before they can force horizontal scrolling at 320px or at
   200% zoom (checklist 1.2, 1.8). */
@media (max-width: 1024px) {
    :root {
        --pcs-sitemap-columns: 2;
    }
}

@media (max-width: 640px) {
    :root {
        --pcs-sitemap-columns: 1;
    }

    .pcs-sitemap {
        padding: var(--pcs-sitemap-padding-mobile);
    }

    .pcs-sitemap__title {
        font-size: var(--pcs-sitemap-title-size-mobile);
    }
}