/* One masthead for public and private pages. Live is the visual reference.
   Loaded after page CSS; presentation only, no status or operational logic. */
:root{--app-header-height:100px;--app-logo-width:320px;--app-private-nav-height:0px;--app-header-total:calc(var(--app-header-height) + env(safe-area-inset-top,0px))}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body header.app-header{
  box-sizing:border-box;position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;gap:0;
  width:100%;height:var(--app-header-total);min-height:0;
  margin:0;padding:0 max(24px,calc((100% - 1180px)/2));
  padding-top:env(safe-area-inset-top,0px);
  padding-left:max(24px,calc((100% - 1180px)/2),env(safe-area-inset-left,0px));
  padding-right:max(24px,calc((100% - 1180px)/2),env(safe-area-inset-right,0px));
  border:0;border-bottom:1px solid #dce8ec;box-shadow:none;
  color:#17364a;background:#fff;font:16px Arial,sans-serif;color-scheme:light;
}
body header.app-header>.brand-link{display:flex;align-items:center;flex:0 1 auto;min-width:0;line-height:0}
body header.app-header img[alt="meteotower.it"]{
  display:block;width:var(--app-logo-width);max-width:100%;max-height:none;
  height:auto;aspect-ratio:444 / 85;object-fit:contain;object-position:center;
  flex:0 1 auto;min-width:0;
}
/* Native outlines reserve the original 444:85 window without bitmap resampling,
   font substitution, cropping or a change to the shared masthead geometry. */
img.meteotower-wordmark{aspect-ratio:444 / 85;object-fit:contain;object-position:center;height:auto}
body header.app-header nav.desktop-nav{display:flex;gap:4px;margin:0 18px;flex:0 0 auto}
body header.app-header nav.desktop-nav a{padding:10px 11px;font:700 12px Arial,sans-serif}
body header.app-header #refreshButton{padding:10px 16px;font:700 13px Arial,sans-serif}
body header.app-header .header-actions{flex:0 0 auto}
body header.app-header #refreshButton{white-space:nowrap}
body header.app-header #refreshButton span{display:inline}
body .forecast-sections,body .analysis-sections,body .lake-sections,body .insights-sections{top:var(--app-header-total)}
body .forecast-panel{scroll-margin-top:calc(var(--app-header-total) + 84px)}

/* Private commands stay private and keep their original actions/CSRF forms. */
body header.app-header.control-header{gap:18px;margin-bottom:var(--app-private-nav-height)}
body header.app-header .control-page-nav{display:flex;align-items:center;justify-content:center;gap:4px;margin:0;min-width:0}
body header.app-header .control-page-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 11px;border-radius:999px;color:#526f7c;font:700 12px Arial,sans-serif;text-decoration:none;white-space:nowrap}
body header.app-header .control-page-nav a[aria-current="page"]{background:#e3f2f5;color:#216581}
body header.app-header .control-page-nav a.model-menu-link{background:transparent;border:0;box-shadow:none;color:#857500}
body header.app-header .control-page-nav .model-menu-link.status-green{color:#236548}
body header.app-header .control-page-nav .model-menu-link.status-yellow{color:#857500}
body header.app-header .control-page-nav .model-menu-link.status-red{color:#963535}
body header.app-header .control-actions{display:flex;align-items:center;flex:0 0 auto;gap:10px}
body header.app-header .control-actions form{margin:0}
body header.app-header .control-actions .secondary-button,
body header.app-header .control-actions .logout-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid #c9dce3;border-radius:999px;background:#f4fafb;color:#17364a;font:700 13px Arial,sans-serif;text-decoration:none;cursor:pointer}
body header.app-header .control-actions .logout-button{border-color:#e4c7c7;color:#8e3d3d;background:#fff7f7}
body header.app-header a:focus-visible,body header.app-header button:focus-visible{outline:3px solid #287fa5;outline-offset:3px}
body .control-section-nav{top:calc(var(--app-header-total) + var(--app-private-nav-height) + 8px)}
body .control-main [id]{scroll-margin-top:calc(var(--app-header-total) + var(--app-private-nav-height) + 110px)}
.shadow-page main>.shadow-page-heading{padding:24px 0}
@media(min-width:901px) and (max-width:1180px){
  :root{--app-logo-width:255px}
  body header.app-header nav.desktop-nav{gap:1px;margin:0 8px}
  body header.app-header nav.desktop-nav a{padding:9px 7px;font-size:11px}
  body header.app-header #refreshButton{padding-inline:12px}
}
@media(min-width:901px) and (max-width:1080px){
  :root{--app-logo-width:205px}
  body header.app-header nav.desktop-nav[aria-label="Navigazione principale"]{gap:0;margin:0 8px}
  body header.app-header nav.desktop-nav[aria-label="Navigazione principale"] a{padding-inline:6px;font-size:11px}
}
@media(max-width:1120px){
  :root{--app-private-nav-height:45px}
  body header.app-header .control-page-nav{position:absolute;top:100%;left:0;right:0;width:100%;height:45px;background:#fff;border-bottom:1px solid #dce8ec}
}
@media(max-width:900px){
  :root{--app-logo-width:320px}
  body header.app-header{gap:12px}
  body header.app-header nav.desktop-nav{display:none}
  body header.app-header .header-actions{gap:8px;flex-shrink:0}
}
@media(max-width:760px){
  :root{--app-header-height:84px;--app-logo-width:220px}
  /* Reserve the same logo space even though private actions have other labels. */
  body header.app-header img[alt="meteotower.it"]{width:min(var(--app-logo-width),calc(100vw - 195.33px))}
  body header.app-header #refreshButton{width:42px;min-height:44px;padding:8px;font-size:20px}
  body header.app-header #refreshButton span{display:none}
  body header.app-header .control-actions{gap:8px}
  body header.app-header .control-actions .secondary-button{width:42px;min-height:44px;padding:8px;font-size:0}
  body header.app-header .control-actions .secondary-button::after{content:'↻';font-size:20px}
  body header.app-header .control-actions .logout-button{min-height:44px;padding:8px 10px;font-size:12px}
  body .control-section-nav{position:static;top:auto}
}
@media(max-width:600px){
  :root{--app-private-nav-height:89px}
  body header.app-header .control-page-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:89px;gap:0 6px;padding:0 12px}
  body header.app-header .control-page-nav a{font-size:13px;padding:6px 4px;white-space:normal;text-align:center;line-height:1.25}
}