/* site-nav.css — canonical DESKTOP navigation for every page.
 *
 * Loaded after each page's inline <style> and before mobile-nav.css, so it
 * normalises the nav on pages whose inline CSS only ever described a flat
 * menu (blog posts, calculators, legal pages). mobile-nav.css still owns
 * everything at 1100px and below.
 *
 * Pairs with the canonical <nav> markup and the shared nav JS handler.
 */

/* ── Skip link (keyboard users) ── */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:400;
  background:#336600;color:#fff;
  padding:12px 20px;border-radius:0 0 3px 0;
  font-family:'Raleway',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
}
.skip-link:focus{left:0;}

/* ── Bar ── */
nav{
  position:sticky;top:0;z-index:300;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(51,102,0,.11);
  height:76px;display:flex;align-items:center;justify-content:space-between;
  padding:0 56px;
}
.nav-logo{height:72px;width:auto;object-fit:contain;}

/* ── Top-level list ── */
.nav-links{display:flex;gap:28px;list-style:none;align-items:center;margin:0;padding:0;}
.nav-links > li{flex:0 0 auto;}
.nav-links > li > a{
  color:#5a6b52;font-size:12.5px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:color .2s ease;font-family:'Raleway',sans-serif;
}
.nav-links > li > a:hover{color:#336600;}

/* ── Dropdowns ── */
.nav-dropdown{position:relative;}
.nav-dropdown > a::after{
  content:'';display:inline-block;width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);margin-left:7px;vertical-align:middle;
}
.nav-submenu{
  position:absolute;top:calc(100% + 4px);left:0;
  background:#fff;border:1px solid rgba(51,102,0,.11);
  min-width:230px;padding:10px 0;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.08);z-index:100;border-radius:2px;
}
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu{opacity:1;visibility:visible;transform:translateY(0);}
.nav-submenu li{display:block;margin:0;}
.nav-submenu a{
  display:block;padding:10px 22px;font-size:13px;color:#3a4a32;
  white-space:nowrap;text-transform:none;letter-spacing:.04em;
  font-weight:500;text-decoration:none;font-family:'Raleway',sans-serif;
}
.nav-submenu a:hover{background:#eef6e6;color:#336600;}

/* ── Client portal + CTA ── */
.nav-portal{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
  border:2px solid #336600;border-radius:2px;color:#336600!important;
  font-size:12px!important;letter-spacing:.08em;font-weight:700;
  text-transform:uppercase;text-decoration:none;
  transition:background .25s ease,color .25s ease;
}
.nav-portal::before{
  content:'';width:11px;height:11px;border:1.7px solid currentColor;
  border-radius:2px;background:linear-gradient(to bottom,transparent 50%,currentColor 50%);
  background-size:100% 100%;
}
.nav-portal:hover{background:#336600;color:#fff!important;}
.nav-cta-btn{
  background:#336600;color:#fff!important;padding:10px 22px;border-radius:2px;
  font-size:12px!important;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700!important;text-decoration:none;
  transition:background .25s ease;
}
.nav-cta-btn:hover{background:#3d7a00;}

/* ── Hamburger (shown by mobile-nav.css at <=1100px) ── */
.nav-toggle{
  display:none;background:transparent;border:0;cursor:pointer;
  width:44px;height:44px;padding:0;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;z-index:301;margin-left:auto;
}
.nav-toggle span{
  display:block;width:24px;height:2px;background:#336600;border-radius:2px;
  transition:transform .25s ease,opacity .25s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Skip-link target: clear the sticky bar when jumped to */
#main{scroll-margin-top:88px;}
#main:focus{outline:none;}
