/* Stage C: the grouped site menu. Loaded ONLY by header_menu.blade.php, after public.css (same tokens). No JavaScript: every drop-down is a <details>. */

/* ---- desktop bar: groups are drop-downs from 1280px; below that the phone panel (hamburger) serves ---- */
.site-head--menu .wrap { gap: 16px; }
@media (min-width: 1000px) { .site-head--menu .wrap { padding-left: clamp(24px, 3vw, 48px); padding-right: clamp(24px, 3vw, 46px); } }
.site-head--menu .head-tools .btn { padding: 0 18px; }
.nav--groups { gap: 2px; align-items: center; }
.nav--groups > a, .nav-group > summary { padding: 0 8px; border-radius: 10px; font: 500 16px/1 var(--sans); white-space: nowrap; color: var(--ink); text-decoration: none; }
@media (min-width: 1600px) { .nav--groups > a, .nav-group > summary { padding: 0 11px; font-size: 17px; } }
.nav--groups > a:hover, .nav-group > summary:hover, .nav-group[open] > summary { background: var(--sage); }
.nav-group { position: relative; }
.nav-group > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; cursor: pointer; list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary svg { flex: none; transition: transform .15s ease; }
.nav-group[open] > summary svg { transform: rotate(180deg); }
.nav-group[data-current] > summary, .nav--groups [aria-current] { color: var(--terra-ink); }
.nav-group__panel { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; min-width: 250px; display: grid; padding: 8px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: 0 16px 40px rgba(18, 52, 43, .18); }
.nav-group:nth-last-child(-n+2) .nav-group__panel { left: auto; right: 0; }
.nav .nav-group__panel a { min-height: 46px; padding: 0 14px; border-radius: 10px; font: 500 17px/1.25 var(--sans); white-space: normal; color: var(--ink); }
.nav .nav-group__panel a:hover { background: var(--sage); }
.nav .nav-group__panel [aria-current] { color: var(--terra-ink); }

@media (min-width: 1400px) { .nav--groups { margin-left: auto; margin-right: auto; } }

/* between 1000 and 1279px the bar would not fit: keep the hamburger */
@media (min-width: 1000px) and (max-width: 1279.98px) {
    .nav--groups { display: none; }
    .menu { display: block; }
    .menu-btn { display: inline-grid; }
}

/* ---- phone panel: the groups are an accordion, the plain links stay plain ---- */
.menu__panel--groups { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; }
.menu__group > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 10px; font: 500 18px/1 var(--sans); color: var(--ink); cursor: pointer; list-style: none; }
.menu__group > summary::-webkit-details-marker { display: none; }
.menu__group > summary:hover { background: var(--sage); }
.menu__group > summary svg { flex: none; transition: transform .15s ease; }
.menu__group[open] > summary svg { transform: rotate(180deg); }
.menu__group[data-current] > summary, .menu__panel--groups [aria-current] { color: var(--terra-ink); }
.menu__group__items { display: grid; margin: 0 0 6px 14px; padding: 0 0 2px 10px; border-left: 3px solid var(--sage-2); }
.menu__panel .menu__group__items a { min-height: 46px; font-size: 17px; }

/* ---- footer: one list per group, as many columns as fit (two on a phone of 360px and more) ---- */
.foot .cols4.cols4--menu { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 28px 20px; }
.foot .cols4--menu > div:first-child { grid-column: 1 / -1; }
.foot .cols4--menu a { min-height: 44px; }