/*
 * Ancient Mother R5: de schil (Fase 1). Venster, vaste menukolom links (desktop), menubalk bovenaan (telefoon), voet en de
 * knop "terug naar boven". Visuele bron: docs/mockups/redesign-r5/r5.css (schil, telefoon, voet). Alle klassen beginnen met
 * am-; de oude schilregels zijn uit legacy.css gehaald. De container "site" blijft, want de pagina's (oud en nieuw) meten
 * hun breedte daarmee.
 */
.am-view{container:site/inline-size;margin:0 auto;width:100%;min-height:100vh;background:var(--am-cream);position:relative}
.am-shell{display:grid;grid-template-columns:var(--am-rail) minmax(0,1fr);min-height:100%}

/* ---------- menukolom ---------- */
.am-rail{position:sticky;top:var(--am-top);align-self:start;height:calc(100vh - var(--am-top));overflow:auto;padding:2rem 1.1rem 2rem 1.7rem;border-right:1px solid var(--am-rule);display:flex;flex-direction:column;gap:1.9rem;font-family:var(--am-sans);color:var(--am-ink)}
.am-brand{display:flex;flex-direction:column;gap:.6rem;text-decoration:none;color:var(--am-forest)}
.am-logo{display:block;width:40px;height:auto;aspect-ratio:87/119}
.am-brand b{font:600 1.42rem/1 var(--am-serif);letter-spacing:-.005em}
.am-brand small{display:block;font:400 .8rem/1.3 var(--am-sans);color:var(--am-soft);margin-top:.3rem}
.am-menu>summary{display:none;list-style:none;cursor:pointer}
.am-menu>summary::-webkit-details-marker{display:none}
.am-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:.18rem;font:500 .88rem/1.35 var(--am-sans)}
.am-menu a{display:block;position:relative;padding:.2rem 0 .2rem 1rem;color:inherit;text-decoration:none}
.am-menu a:hover{color:var(--am-forest);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.am-menu a[aria-current]{color:var(--am-forest);font-weight:600}
.am-menu>ul>li>a[aria-current]::before{content:"";position:absolute;left:0;top:.86em;width:.55rem;border-top:2px solid var(--am-forest)}
.am-menu li.has-sub>ul{display:none;padding:.15rem 0 .5rem 1rem;gap:.1rem;font:400 .8rem/1.3 var(--am-sans)}
.am-menu li.has-sub>ul a{padding:.1rem 0}
.am-menu li.has-sub:hover>ul,.am-menu li.has-sub:focus-within>ul,.am-menu li.has-sub.open>ul{display:grid}
.am-menu ul ul a[aria-current]{font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}

/* ---------- voet ---------- */
.am-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:5rem 0 0;padding:1.5rem 0 2rem;border-top:1px solid var(--am-rule)}
.am-foot-b{display:flex;align-items:center;gap:.7rem;font:600 1.22rem/1 var(--am-serif);color:var(--am-forest);text-decoration:none}
.am-foot-b .am-logo{width:24px}
.am-foot-p{font:500 1rem/1.3 var(--am-serif);color:var(--am-ink);text-align:right}
.am-foot .am-foot-l{display:block;margin-top:.45rem;font:400 .8rem/1.3 var(--am-sans);color:var(--am-soft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.am-foot .am-foot-l:hover{color:var(--am-wine)}

/* ---------- terug naar boven ---------- */
.totop{position:fixed;right:calc(1rem + env(safe-area-inset-right,0px));bottom:calc(1rem + env(safe-area-inset-bottom,0px));width:2.6rem;height:2.6rem;padding:0;background:var(--am-cream);border:1px solid var(--am-rule);border-radius:0;color:var(--am-forest);cursor:pointer;z-index:20;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.totop::before{content:"";position:absolute;left:50%;top:50%;width:.6rem;height:.6rem;margin:-.2rem 0 0 -.3rem;border:solid currentColor;border-width:2px 0 0 2px;transform:rotate(45deg)}
.totop.on{opacity:.92;visibility:visible}
@media (min-width:701px){.totop{width:2.2rem;height:2.2rem}.totop.on{opacity:.5}.totop.on:hover,.totop.on:focus-visible{opacity:1}}

/* ---------- WordPress-adminbalk (alleen ingelogd) ---------- */
.admin-bar{--am-top:var(--wp-admin--admin-bar--height,32px)}
@media (max-width:600px){.admin-bar{--am-top:0px}}

/* ---------- tussenbreedte ---------- */
@container site (min-width:761px) and (max-width:1050px){
.am-shell{grid-template-columns:var(--am-rail-mid) minmax(0,1fr)}
.am-rail{padding:1.6rem 1rem 1.6rem 1.3rem}
}

/* ---------- telefoon: menubalk bovenaan ---------- */
@container site (max-width:760px){
.am-shell{display:block}
.am-rail{position:sticky;top:var(--am-top);z-index:5;height:auto;max-height:calc(100vh - var(--am-top));overflow:auto;border:0;border-bottom:1px solid var(--am-rule);background:var(--am-cream);padding:.65rem 1.1rem;display:block}
.am-brand{flex-direction:row;align-items:center;gap:.65rem;padding-right:5rem}
.am-brand small{display:none}
.am-brand b{font-size:1.3rem}
.am-brand .am-logo{width:24px}
.am-menu>summary{display:block;position:absolute;right:1.1rem;top:.85rem;font:700 .9rem/1.3 var(--am-sans);color:var(--am-forest);padding:.25rem 0;border-bottom:2px solid var(--am-wine)}
.am-menu ul{padding:1rem 0 .6rem;gap:.35rem;font-size:1.1rem}
.am-menu a{padding:.3rem 0}
.am-menu>ul>li>a[aria-current]::before{display:none}
.am-menu a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.am-menu li.has-sub>ul{display:grid;padding:.1rem 0 .4rem 1.2rem;font-size:1rem}
.am-foot{margin-top:3.4rem;align-items:flex-start}
.am-foot-b{font-size:1.05rem}
.am-foot-p{font-size:.85rem;max-width:10.5rem}
}