/* menu: the phone's way round the site, as america.gov's (Tommi, 2026-10-13: "nella versione per telefono di
   starbuilders.ai, di mettere un menu con le tre linee molto simile a quello che c'è in america.gov per navigare meglio,
   perché adesso non c'è"). Up to 760px wide, where the bar hides its links, a round button with three lines sits at the end
   of the bar; it opens a white card that grows from the top right over the blurred page: a close button, the pages in
   large centred type (the one you are on underlined) coming in one after another, and a grey note at the foot. Its
   look is the day's (white card, black type) whatever is under it. Escape, the
   close button, a tap outside or a link closes it; focus stays inside while it is open. Reduced motion: it only fades.
   Wider screens are unchanged: the button is not drawn there. menu.js builds it; needs ../base/base.css. */

.mn-open{display:none}
@media (max-width:760px){
  .mn-open{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;margin-left:4px;padding:0;border:0;border-radius:999px;background:oklch(100% 0 0/.12);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1px oklch(100% 0 0/.16);transition:background-color .2s var(--e-ui),scale .2s var(--e-ui)}
  .sul-giorno .mn-open{background:oklch(0% 0 0/.06);box-shadow:inset 0 0 0 1px oklch(0% 0 0/.12)}
  .mn-open:active{scale:.94}
  .mn-open svg{width:18px;height:14px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;fill:none}
}

.mn{position:fixed;inset:0;z-index:300}
.mn[hidden]{display:none}
/* america.gov blurs the page behind; this site draws no frosted glass anywhere (base.css, landing-kit rule 3), so the page
   recedes under a deeper tint instead */
.mn-veil{position:absolute;inset:0;background:oklch(0% 0 0/.62);opacity:0;transition:opacity .3s var(--e-ui)}
.mn-card{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:12px;right:12px;max-height:calc(100% - 24px);overflow:auto;display:flex;flex-direction:column;padding:12px 12px 12px;border-radius:36px;box-shadow:0 30px 80px -30px oklch(0% 0 0/.6);transform-origin:calc(100% - 40px) 30px;opacity:0;transform:scale(.86);transition:opacity .22s var(--e-ui),transform .45s var(--e-esce)}
.mn-card:focus{outline:none}
.mn-top{display:flex;justify-content:flex-end}
.mn-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mn-x{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--piano);color:var(--ink);cursor:pointer;transition:background-color .2s var(--e-ui)}
.mn-x svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
@media (hover:hover){.mn-x:hover{background:var(--piano-2)}}
.mn-list{list-style:none;margin:8px 0 28px;padding:0;text-align:center}
.mn-list li{opacity:0;transform:translateY(10px);transition:opacity .35s var(--e-ui),transform .5s var(--e-esce);transition-delay:calc(60ms + var(--i) * 35ms)}
.mn-list a{display:inline-block;padding:4px 12px;font-family:var(--serif);font-weight:300;font-size:calc(30 * var(--px));line-height:1.12;letter-spacing:-.02em;color:var(--ink);text-underline-offset:.16em;text-decoration-thickness:1px}
.mn-list a[aria-current]{text-decoration-line:underline}
@media (hover:hover){.mn-list a:hover{color:var(--ink-2)}}
.mn-foot{display:flex;flex-direction:column;align-items:center;gap:10px;margin:auto 0 0;padding:20px 16px;border-radius:24px;background:var(--piano);font-size:13px;line-height:1.4;color:var(--ink-3);text-align:center;opacity:0;transition:opacity .35s var(--e-ui) .25s}
.mn-foot svg{width:18px;height:18px;stroke:var(--ink-2);stroke-width:2.4;stroke-linecap:round}

.mn.on .mn-veil,.mn.on .mn-card,.mn.on .mn-foot{opacity:1}
.mn.on .mn-card{transform:none}
.mn.on .mn-list li{opacity:1;transform:none}
/* closing is quicker than opening, all at once */
.mn.off .mn-card{transition:opacity .18s var(--e-ui),transform .25s var(--e-ui)}
.mn.off .mn-list li,.mn.off .mn-foot{transition:opacity .15s var(--e-ui);transition-delay:0s}

@media (prefers-reduced-motion:reduce){
  .mn-card,.mn.on .mn-card,.mn-list li,.mn.on .mn-list li{transform:none}
  .mn-list li{transition:opacity .2s linear;transition-delay:0s}
  .mn-open{transition:none}.mn-open:active{scale:1}
}
