/* ----------------------------------------------------
   Global design tokens
-----------------------------------------------------*/
:root{
  --primary-color:#325A73;
  --primary-hover-color:#28485c;
  --secondary-color:#6c757d;
  --secondary-hover-color:#5a6268;
  --nav-link-color:#333;

  --light-gray-color:#f8f9fa;
  --border-color:#dee2e6;
  --text-color:#325A73;
  --text-muted-color:#495057;
  --background-color:#f4f7f9;
  --white-color:#fff;

  --border-radius:.375rem;
  --border-radius-lg:.5rem;
  --box-shadow:0 0.125rem 0.25rem rgba(0,0,0,.075);
  --box-shadow-lg:0 0.5rem 1rem rgba(0,0,0,.15);
}

/* import font once so Pico + our styles share it */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&display=swap");

body,h1,h2,h3,h4,h5,h6,button,input,select,textarea,a{
  font-family:"Lato",sans-serif;
}

/* ----------------------------------------------------
   Layout & utility
-----------------------------------------------------*/
body{
  background:var(--background-color);
  color:var(--text-color);
  margin:0;
  line-height:1.6;
}
.container{max-width:1200px;padding:2rem 1rem;margin:auto}

h1,h2,h3,h4{font-weight:600}

/* ----------------------------------------------------
   (OLD) details-based nav rules — keep if you still use them on mobile.
   They no longer affect desktop since we hide that menu ≥769px.
-----------------------------------------------------*/
nav.container-fluid{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.nav-logo{flex-shrink:0;margin-right:auto}

nav ul{display:flex;align-items:center;gap:1rem;margin:0;padding:0;list-style:none}
nav li a{font-weight:600;color:var(--nav-link-color);text-decoration:none}
nav li a:hover{color:#31649b}

#desktop-nav-ul{display:none}
#mobile-nav-details{display:block;position:relative;margin-left:1rem}

#mobile-nav-details summary{
  list-style:none;cursor:pointer;background:none;border:none;padding:.5rem;color:var(--nav-link-color);
}
#mobile-nav-details summary::-webkit-details-marker{display:none}
#mobile-nav-icon{font-size:1.5rem}

#mobile-nav-details ul[role="listbox"]{
  position:absolute;top:calc(100% + .5rem);right:0;
  background:var(--white-color);border:1px solid var(--border-color);
  border-radius:var(--border-radius);box-shadow:var(--box-shadow);
  list-style:none;margin:0;padding:.5rem 0;min-width:200px;z-index:100;
}
#mobile-nav-details ul[role="listbox"] a{
  display:block;padding:.75rem 1.5rem;color:var(--nav-link-color);white-space:nowrap;
}
#mobile-nav-details ul[role="listbox"] a:hover{background:var(--light-gray-color)}

details[role="list"]{position:relative}
details[role="list"] summary{
  cursor:pointer;border:none;background:none;padding:.5rem;color:var(--nav-link-color);
}
details[role="list"] summary::-webkit-details-marker{display:none}
details[role="list"] ul[role="listbox"]{
  position:absolute;top:calc(100% + .5rem);left:0;
  background:var(--white-color);border:1px solid var(--border-color);
  border-radius:var(--border-radius);box-shadow:var(--box-shadow);
  list-style:none;margin:0;padding:.5rem 0;min-width:200px;z-index:100;
}
details[role="list"] ul[role="listbox"] a{
  display:block;padding:.75rem 1.5rem;color:var(--nav-link-color);white-space:nowrap;
}
details[role="list"] ul[role="listbox"] a:hover{background:var(--light-gray-color)}

/* ================== NAV REWRITE (desktop & mobile burger) ============= */
.navbar{
  display:flex;align-items:center;justify-content:space-between;padding:1rem 0;
}
.nav-logo{flex-shrink:0;margin-right:auto}

.nav-desktop{
  display:none;
  gap:1rem;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-desktop a{
  font-weight:600;
  color:var(--nav-link-color);
  text-decoration:none;
}
.nav-desktop a:hover{color:#31649b}

/* Desktop dropdowns — CLICK ONLY, no JS needed */
@media (min-width:769px){
  .has-dropdown{ position:relative; padding-bottom:.25rem; } /* buffer to close gap */
  .dropdown-toggle{
    background:none;border:none;padding:.5rem;
    color:var(--nav-link-color);font-weight:600;cursor:pointer;
  }
  .dropdown{
    position:absolute;top:calc(100% + .25rem);left:0;
    min-width:220px;
    background:var(--white-color);
    border:1px solid var(--border-color);
    border-radius:var(--border-radius);
    box-shadow:var(--box-shadow);
    list-style:none;
    margin:0;
    padding:.5rem 0;
    display:none;
    z-index:100;
  }
  /* Show while item (or anything inside) has focus */
  .has-dropdown:focus-within > .dropdown{ display:block; }

  /* Remove hover open so it's truly click-based */
  .has-dropdown:hover > .dropdown{ display:none; }
}

.dropdown a{
  display:block;padding:.6rem 1.2rem;color:var(--nav-link-color);white-space:nowrap;
}
.dropdown a:hover{background:var(--light-gray-color)}

/* Burger for mobile */
.burger{
  background:none;border:none;color:var(--nav-link-color);
  font-size:1.8rem;cursor:pointer;padding:.5rem;
}

/* Off-canvas */
.nav-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(1px);z-index:998;
}
.nav-drawer{
  position:fixed;top:0;right:0;height:100vh;width:80%;max-width:320px;
  background:var(--white-color);box-shadow:var(--box-shadow-lg);z-index:999;
  transform:translateX(100%);transition:transform .25s ease-out;
  padding:1rem 0 2rem 0;overflow-y:auto;
}
.nav-drawer[aria-hidden="false"]{transform:translateX(0)}

.drawer-close{
  background:none;border:none;font-size:1.6rem;color:var(--nav-link-color);
  position:absolute;top:.75rem;right:.75rem;cursor:pointer;
}

.drawer-list{list-style:none;margin:3rem 0 0 0;padding:0}
.drawer-list > li > a{
  display:block;padding:.9rem 1.5rem;font-weight:600;color:var(--nav-link-color);text-decoration:none;
}
.drawer-list > li > a:hover{background:var(--light-gray-color)}

.drawer-parent{}
.drawer-parent-toggle{
  width:100%;text-align:left;background:none;border:none;padding:.9rem 1.5rem;
  font-weight:600;color:var(--nav-link-color);cursor:pointer;
}
.drawer-parent.open > .drawer-parent-toggle{background:var(--light-gray-color)}
.drawer-sub{
  list-style:none;margin:0;padding:0;display:none;
}
.drawer-parent.open > .drawer-sub{display:block}
.drawer-sub li a{
  display:block;padding:.7rem 2.4rem;color:var(--nav-link-color);
}
.drawer-sub li a:hover{background:var(--light-gray-color)}
/* === Navbar: 3 columns (logo | spacer | burger) ====================== */
nav.container-fluid.navbar{
  display: grid !important;                /* beat earlier flex rule   */
  grid-template-columns: auto 1fr auto;    /* L  |  middle  |  R       */
  align-items: center;
  padding: 1rem 1.25rem;                   /* pull logo off the edge   */
}

.nav-logo{ margin: 0 !important; }         /* stop pushing others away */

.nav-desktop{ display: none !important; }  /* if you're burger-only    */

.burger{
  justify-self: end;                       /* stick to the right       */
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.8rem;
}