/* Header + nav */
header{
  position:sticky; top:0; z-index:70; backdrop-filter:saturate(1.1) blur(8px);
  background:color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid var(--border);
}
:root{ --header-h:64px; }
@media (prefers-color-scheme: dark){
  header{ background:color-mix(in oklab, var(--bg) 70%, transparent); }
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; }
.brand{ display:flex; align-items:center; gap:.65rem; font-weight:700; letter-spacing:.2px; }
.logo{ width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, var(--accent-1), var(--accent-2)); box-shadow:var(--shadow); }

nav.desktop-nav ul{ list-style:none; display:flex; gap:.9rem; padding:0; margin:0; }
nav a{ padding:.4rem .65rem; border-radius:.6rem; }
nav a:hover, nav a[aria-current="page"]{ background:var(--bg-soft); text-decoration:none; }

/* Dropdown Blog */
.nav .has-sub{ position:relative; z-index:100; }
.nav .submenu{ position:absolute; top:100%; left:0; margin-top:.25rem; min-width:180px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:.4rem; display:none; box-shadow:var(--shadow); z-index:1000; }
.nav .has-sub:focus-within .submenu, .nav .has-sub:hover .submenu{ display:block; }
.nav .submenu a{ display:block; white-space:nowrap; padding:.35rem .6rem; border-radius:.5rem; }

.theme-toggle{ border:1px solid var(--border); background:var(--card); border-radius:.65rem; padding:.4rem .6rem; display:inline-flex; align-items:center; gap:.5rem; box-shadow:var(--shadow); }
.theme-toggle button{ border:0; background:transparent; cursor:pointer; padding:.25rem .4rem; color:var(--text); }
.lang-switch{ margin-left:.6rem; display:none; align-items:center; gap:.35rem; }
.lang-switch a{ padding:.3rem .55rem; border:1px solid var(--border); border-radius:.6rem; text-decoration:none; }

.skip-link{ position:absolute; left:-9999px; top:auto; }
.skip-link:focus{ left:12px; top:12px; z-index:1000; background:var(--accent-2); color:#00100d; padding:.5rem .75rem; border-radius:.5rem; text-decoration:none; }

/* Drawer mobile + hamburger */
.hamburger{ display:none; border:1px solid var(--border); background:var(--card); border-radius:.6rem; padding:.35rem; box-shadow:var(--shadow); align-items:center; justify-content:center; }
.hamburger svg{ display:block; }
.hamburger .line{ fill: currentColor; transition: transform .25s ease, opacity .18s ease; transform-origin: 50% 50%; transform-box: fill-box; }
.hamburger.is-open .line1{ transform: translateY(5px) rotate(45deg); }
.hamburger.is-open .line2{ opacity: 0; }
.hamburger.is-open .line3{ transform: translateY(-5px) rotate(-45deg); }

.drawer-backdrop{ position:fixed; left:0; right:0; top:var(--header-h); bottom:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:59; }
.drawer-backdrop.show{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:var(--header-h); right:0; height:calc(100dvh - var(--header-h)); width:min(80vw, 320px); background:var(--card); border-left:1px solid var(--border); box-shadow:var(--shadow);
  transform:translateX(100%); transition:transform .25s ease; z-index:60; display:flex; flex-direction:column; padding:1rem; }
.drawer.open{ transform:translateX(0); }
/* Safe-area padding for iOS to avoid clipping near notches/edges */
@supports (padding: max(0px)){
  .drawer{
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}
.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.close-btn{ border:1px solid var(--border); background:var(--bg-soft); border-radius:.6rem; padding:.3rem .5rem; cursor:pointer; }
.drawer .close-btn{ display:none; }
.drawer .drawer-head > strong{ display:none; }
.drawer nav ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.25rem; }
.drawer nav a{ padding:.7rem .6rem; border-radius:.6rem; display:block; }
.drawer .submenu{ padding-left:1rem; }
.drawer nav a:hover{ background:var(--bg-soft); text-decoration:none; }
body.no-scroll{ overflow:hidden; }

@media (max-width: 900px){
  nav.desktop-nav{ display:none; }
  .hamburger{ display:inline-flex; }
}

/* Keep header on a single line on small screens (as requested) */
@media (max-width: 560px){
  .nav{ flex-wrap: nowrap; gap:.5rem; justify-content:flex-start; }
  .hamburger{ margin-left: 0; }
  .theme-toggle{ padding:.25rem .45rem; gap:.35rem; }
  .theme-toggle button{ padding:.2rem .35rem; font-size:.9rem; }
  .lang-switch{ margin-left:.4rem; gap:.3rem; }
  /* center theme toggle between brand (left) and hamburger (right) with equal spacing */
  .theme-toggle{ margin-left:auto; margin-right:auto; }
}

/* Show language switch only on Curriculum pages */
body[data-page="curriculum"] .lang-switch{ display:inline-flex; }

/* Breadcrumb */
.breadcrumb{display:none !important;}
.breadcrumb a{color:inherit; text-decoration:none;}
.breadcrumb a:hover{ text-decoration: underline; }
.breadcrumb .sep{opacity:.6; margin:0 .25rem;}
@media (max-width:420px){ .breadcrumb{font-size:.85rem;} }

/* Small device polish */
@media (max-width:420px){ .btn{ width:100%; justify-content:center; } .logo{ width:28px; height:28px; } .nav{ gap:.5rem; } }

/* Rimuovi la cornice verde (focus outline) dentro il menu/drawer su mobile */
.drawer a:focus,
.drawer a:focus-visible,
.drawer button:focus,
.drawer button:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}