/* robotpaper: "Sites by Roy" (partials/rp-sites-by-roy.hbs, theme 1.9.0). Same sbr-* markup as the Astro sites
   (ai-reader ui/SitesByRoy.astro); styled here with Source's own navigation, dropdown and footer values. */

/* The menu: a <details> right after the nav items, styled like them */
.sbr-menu {
    position: relative;
    flex: none;
}

.sbr-menu > .sbr-summary {
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.sbr-menu > .sbr-summary::-webkit-details-marker {
    display: none;
}

.sbr-menu > .sbr-summary:hover {
    opacity: 0.8;
}

.sbr-menu > .sbr-summary::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-inline-start: 0.45em;
    border: solid currentColor;
    border-width: 0 0.12em 0.12em 0;
    transform: translateY(-0.2em) rotate(45deg);
    transition: transform 0.15s;
}

.sbr-menu[open] > .sbr-summary::after {
    transform: translateY(0.05em) rotate(-135deg);
}

.sbr-menu > .sbr-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Desktop: a panel like Source's "more" dropdown (.gh-dropdown) */
@media (min-width: 768px) {
    /* Source's dropdown.js moves nav items into its "more" (...) button while the item list (.nav) plus 64px is wider
       than the menu area. It only measures .nav, and its 64px is not spare room: the "more" button it then appends
       takes 48px of it (32px button, -6px margins, 28px gap). So .nav reserves this menu's full room as padding (28px
       gap + --sbr-w) and the menu, exactly --sbr-w wide, is pulled back into that padding: 28px after the last item.
       --sbr-w is a little wider than "Sites by Roy" and its arrow (about 6.8em in Inter); with a wider font the text can
       spill out of it by up to 16px before it reaches the menu edge (and the logo column starts further on). */
    .gh-navigation-menu {
        --sbr-w: 7.5em;
    }

    .gh-navigation-menu > .nav:has(+ .sbr-menu) {
        padding-inline-end: calc(28px + var(--sbr-w));
    }

    .gh-navigation-menu > .nav + .sbr-menu {
        width: var(--sbr-w);
        margin-inline-start: calc(-24px - var(--sbr-w));
    }

    /* Visible by default. The script in rp-sites-by-roy.hbs adds .sbr-wait only when there is a .nav for dropdown.js
       to lay out, and removes it at window load, so the menu does not jump while Source's own items are still hidden
       (Source shows them once dropdown.js sets .is-dropdown-loaded). */
    .gh-navigation:not(.is-dropdown-loaded) .sbr-menu.sbr-wait {
        opacity: 0;
    }

    .sbr-menu > .sbr-list {
        position: absolute;
        top: 100%;
        inset-inline-start: -16px;
        z-index: 90;
        width: max-content;
        min-width: 200px;
        max-width: calc(100vw - 40px);
        margin-top: 24px;
        padding: 12px 0;
        text-align: start;
        white-space: normal;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04), 0 7px 20px -5px rgb(0 0 0 / 0.15);
    }

    .gh-navigation .sbr-menu .sbr-link {
        display: block;
        padding: 7px 20px;
        line-height: 1.5;
        color: #15171a;
    }
}

/* Mobile: inside Source's full-screen menu (burger), under the other items; the disclosure opens inline (no panel) */
@media (max-width: 767px) {
    #gh-navigation .gh-navigation-menu:has(> .sbr-menu) {
        flex-direction: column;
        gap: 20px;
    }

    #gh-navigation .sbr-menu {
        line-height: 1.4;
        text-align: center;
    }

    #gh-navigation .sbr-menu > .sbr-summary {
        font-size: 1.75rem;
        font-weight: 600;
    }

    #gh-navigation .sbr-menu > .sbr-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: 12px;
    }

    #gh-navigation .sbr-menu .sbr-link {
        display: inline-block;
        padding: 6px 0;
        font-size: 1.6rem;
        font-weight: 500;
    }
}

/* Footer: a centred list like the footer menu (.gh-footer-menu .nav) */
.sbr-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 40px;
    text-align: center;
}

.sbr-footer .sbr-heading {
    font-size: 1.2rem;
    font-weight: 550;
    line-height: 1.6;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.sbr-footer > .sbr-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 550;
}

@media (prefers-reduced-motion: reduce) {
    .sbr-menu > .sbr-summary::after {
        transition: none;
    }
}