/* Sitemap page (サイトマップ, Figma OT_08). */

.sm-title-band-wrap,
.sn-breadcrumb-wrap {
    max-width: 1280px;
    padding-right: 40px;
    padding-left: 40px;
    box-sizing: border-box;
}
.sm-title-band-wrap {
    margin: 24px auto 0;
}
.sm-title-band {
    display: inline-block;
    background: #38908E; /* darkened from #4DB1AF for WCAG AA large-text 3:1 contrast */
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    padding: 18px 48px 18px 28px;
    margin: 0;
}

.sm-wrap {
    max-width: 1280px;
    margin: 30px auto 60px;
    padding-right: 40px;
    padding-left: 40px;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    color: #061C3D;
}

.sm-container {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.sm-group-heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #061C3D;
    line-height: 24px;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    padding: 0 0 2px 13px; /* 7px accent bar + 6px gap */
    border-bottom: 1px solid #CCCCCC;
    position: relative;
    /* min-height, not height: long headings (e.g. "FQS（Food Quality Solution）")
       wrap to two lines on narrow viewports and must grow instead of spilling
       past the border and the accent bar. */
    min-height: 26px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow-wrap: anywhere;
}

.sm-group-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 7px;
    /* Span the full text height so the bar tracks a wrapped 2-line heading. */
    bottom: 4px;
    background: #008F8D;
}

.sm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 16px;
    column-gap: 24px;
}

.sm-link {
    display: inline-flex;
    /* flex-start, not center: keeps the icon aligned to the first line when the
       label wraps to two lines instead of floating to the vertical middle. */
    align-items: flex-start;
    text-decoration: none;
    color: #061C3D;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    transition: color 0.2s ease;
    /* Grid items default to min-width:auto, so a long unbreakable label would
       widen the track and scroll the whole page sideways. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.sm-link:hover {
    color: #2778E2;
}

.sm-link:hover .sm-link-text {
    text-decoration: underline;
}

/* Every link is bullet-prefixed. Uses "・" (U+30FB) to match the Japanese
   bullet convention already used elsewhere in the theme, per the design.
   (The chain-link icon variant was retired — see sm-groups-render.php.)

   The bullet is a list marker, not part of the label, so it must never pick up
   the hover underline. text-decoration propagates from the underlined ancestor
   to its ::before box and cannot be cancelled from inside, so the marker is
   emitted on .sm-link (outside .sm-link-text) and reset to `none` here. */
.sm-link-dash::before {
    content: "・";
    text-decoration: none;
    flex-shrink: 0;
}

/* Breakpoints run strictly largest → smallest: these are all equal-specificity
   max-width queries, so a smaller one placed above a larger one would lose the
   cascade. Keep this order when adding rules. */

@media (max-width: 991px) {
    .sm-title-band-wrap,
    .sn-breadcrumb-wrap,
    .sm-wrap {
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media (max-width: 900px) {
    .sm-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 14px;
        column-gap: 16px;
    }
}

@media (max-width: 768px) {
    .sm-title-band {
        font-size: 20px;
        padding: 14px 28px 14px 18px;
    }
    .sm-wrap {
        margin-top: 20px;
        margin-bottom: 40px;
    }
    .sm-container {
        gap: 22px;
    }
    .sm-group-heading {
        font-size: 15px;
        line-height: 22px;
        min-height: 22px;
        margin-bottom: 14px;
    }
    .sm-link {
        font-size: 15px;
        line-height: 22px;
    }
}

@media (max-width: 600px) {
    .sm-grid {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
}

@media (max-width: 480px) {
    .sm-title-band-wrap,
    .sn-breadcrumb-wrap,
    .sm-wrap {
        padding-right: 16px;
        padding-left: 16px;
    }
    .sm-title-band {
        font-size: 18px;
        padding: 12px 20px 12px 16px;
        /* Long titles must wrap inside the band rather than push it off-screen. */
        display: block;
        overflow-wrap: anywhere;
    }
    .sm-container {
        gap: 20px;
    }
    .sm-group-heading {
        font-size: 14px;
        line-height: 20px;
        min-height: 20px;
        padding-left: 10px;
    }
    .sm-group-heading::before {
        width: 5px;
    }
    /* Larger tap targets — WCAG 2.5.8 asks for ~24px minimum. */
    .sm-link {
        font-size: 14px;
        line-height: 20px;
        padding: 3px 0;
    }
}