:root{--brand:#0b5394;--accent:#0b6aa1;--ink:#0f172a;--muted:#5b6a7b;--line:#e5e7eb;--bg:#fff;--content:1000px}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.65}

header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.shell{max-width:var(--content);margin:0 auto;padding:12px 16px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px}
.shell>a{grid-column:1}.shell>nav{grid-column:2;justify-self:center}.shell::after{content:"";grid-column:3}
.logo{height:56px;width:auto;display:block}

nav ul{list-style:none;display:flex;gap:24px;margin:0;padding:0}
nav a{text-decoration:none;color:#0b3a5b;font-weight:600;font-size:.95rem;padding:8px 10px;border-radius:10px;display:inline-block}
nav a:hover{background:#eaf7fb}
nav a.active{color:#0b3a5b;position:relative}
nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px;background:var(--accent)}

footer{border-top:1px solid var(--line);background:#fff;margin-top:36px}
footer .inner{max-width:var(--content);margin:0 auto;padding:18px 16px;color:#64748b;font-size:.92rem;text-align:center}

/* Move main navigation to the right (desktop) */
.shell>nav{grid-column:3;justify-self:end}
.shell::after{content:none}

/* Final: logo left, nav right */
.shell{display:grid;grid-template-columns:auto 1fr;align-items:center}
.shell>a{grid-column:1;justify-self:start}
.shell>nav{grid-column:2;justify-self:end}
.shell::after{content:none}

/* ------- Mobile header (keeps same look, just stacks neatly) ------- */
@media (max-width:680px){
  .shell{
    grid-template-columns:1fr;
    grid-template-areas:"logo" "nav";
    gap:8px; padding:10px 12px;
  }
  .shell>a{grid-area:logo}
  .shell>nav{grid-area:nav;justify-self:stretch;width:100%}
  nav ul{flex-wrap:wrap;gap:10px 16px;justify-content:space-between}
  .logo{height:44px}
  nav a{font-size:.95rem;padding:6px 0}
  nav a.active::after{bottom:-4px}
}

/* === Mobile header fix (no HTML changes) === */
@media (max-width: 680px){
  header .shell{
    gap: 10px;
    padding: 10px 12px;
  }
  /* let the nav shrink so its content can scroll */
  header .shell > nav{ min-width: 0; }

  .logo{ height: 44px; }

  nav .menu{
    display: flex;
    flex-wrap: nowrap;            /* keep links on one line */
    overflow-x: auto;             /* allow horizontal scroll */
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    margin: 0;
    padding-bottom: 6px;          /* room for active underline */
    scrollbar-width: none;        /* Firefox: hide scrollbar */
  }
  nav .menu::-webkit-scrollbar{ display: none; } /* WebKit */

  nav .menu li{ flex: 0 0 auto; }
  nav a{
    font-size: .95rem;
    padding: 6px 0;
    white-space: nowrap;          /* prevent wrapping */
  }
  nav a.active::after{ bottom: -4px; } /* keep underline visible */
}