/*
 * Focused navigation (app/config/service-navigation.php): one white navigation row on the four public service
 * landing pages (Home, current service, its section links) and on the B2B pages (Home, B2B Services, B2B pages).
 * layouts/navigation.php adds .site-nav--service (both modes), .site-nav--b2b and .nav-item--section.
 * Loaded only on those pages; global navigation styles are unchanged.
 */

/* The global .site-nav / .nav-list are right-aligned (justify-content: flex-end) so the full eight-item menu fills
   the row. The service row starts at the normal navigation start, immediately after the logo. */
.site-nav--service,
.site-nav--service .nav-list {
    justify-content: flex-start;
}

/* Desktop: a single row. If the links do not fit, the row scrolls inside the navigation; it never wraps to a
   second row and never widens the page. */
@media (min-width: 1100px) {
    .site-nav--service .nav-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }

    .site-nav--service .nav-list > li {
        flex: none;
    }

    .site-nav--service .nav-list > li > a {
        white-space: nowrap;
    }

    .site-nav--service .nav-item--enquiry > a {
        box-shadow: inset 0 -3px 0 var(--color-gold);
    }

    /* Public service and B2B rows: the list already spans the space between the logo and the header's right
       padding (.nav-list is flex: 1); align its items to the right end of that space. "safe" keeps the first items
       reachable by scrolling if the row ever overflows. */
    .site-nav--service .nav-list {
        justify-content: flex-end;
        justify-content: safe flex-end;
    }
}

/* Mobile / tablet drawer: Home and the current service first, then the section links indented beneath them. */
@media (max-width: 1099px) {
    .site-nav--service .nav-item--section > a {
        padding-left: 1.35rem;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .site-nav--service .nav-item--enquiry > a {
        font-weight: 700;
    }
}

/* B2B mode: "B2B Services" keeps the standard current highlight (the audience); the B2B page being viewed is shown
   with the gold underline so the two states read as section + page rather than competing highlights. */
.site-nav--b2b .nav-item--section > a[aria-current="page"] {
    background: none;
    clip-path: none;
    box-shadow: inset 0 -3px 0 var(--color-gold);
}

@media (max-width: 1099px) {
    .site-nav--b2b .nav-item--section > a[aria-current="page"] {
        box-shadow: inset 4px 0 0 var(--color-gold);
        font-weight: 700;
    }
}

/* Anchor offset for the section links: the sticky header (top bar + white row) is about 122-131px on desktop,
   115-135px on tablets and up to 175px on phones, where the top bar wraps. Specificity beats the page-level
   scroll-padding rules. */
html:has(.site-header .site-nav--service) {
    scroll-padding-top: 9rem;
}

@media (max-width: 1099px) {
    html:has(.site-header .site-nav--service) {
        scroll-padding-top: 8rem;
    }
}

@media (max-width: 768px) {
    html:has(.site-header .site-nav--service) {
        scroll-padding-top: 9rem;
    }
}

@media (max-width: 480px) {
    html:has(.site-header .site-nav--service) {
        scroll-padding-top: 11.5rem;
    }
}