/* === SHARED (variables + header/footer) === */
:root{
  --bg-deep:#031c14;
  --dark-green:#004e35;
  --bright-green:#63ff6b;
  --bright-green-2:#b3ff84;
  --light-green:#d7ffd0;
  --text:#eaffea;
}

/* Minimal reset for consistency */
*{box-sizing:border-box}
body{font-family:"Lato", Arial, sans-serif; color:var(--text);}

/* ===== NAVBAR (centered pill + portal on right) ===== */
.navbar{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:3;
}
.navbar-inner{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  gap: clamp(12px, 2vw, 24px);
}
.logo{ flex: 0 0 auto; }
.logo img{
  height:22px; width:auto; display:block;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
}

/* Centered pill menu */
.nav-menu{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; gap:1.2rem; align-items:center;
  padding:10px 16px; border-radius:999px;
  background:linear-gradient(90deg,var(--bright-green),var(--bright-green-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 24px rgba(0,0,0,.45);
}
.nav-menu a{
  color:#0b3a28; font-weight:700; text-decoration:none;
  font-size:.98rem; line-height:1; padding:8px 10px; border-radius:999px;
}
.nav-menu a:focus-visible{outline:2px solid #0b3a28; outline-offset:2px;}

/* Right cluster */
.navbar-right{
  margin-left:auto; display:flex; align-items:center; gap:12px;
}

/* Customer Portal button (desktop/tablet only by default) */
.btn-portal{
  background-color: var(--dark-green);
  color: #fff; padding: 0.6rem 1.1rem; border-radius: 999px;
  text-decoration: none; font-weight: 800; white-space: nowrap;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn-portal:hover{ transform: translateY(-2px); }
.btn-portal:active{ transform: translateY(0); }
.btn-portal:focus-visible{ outline:3px solid var(--bright-green); outline-offset:2px; }

/* ===== MOBILE: hamburger + sidebar toggle ===== */
.menu-toggle{ display:none; flex-direction:column; justify-content:space-between;
  width:26px; height:20px; background:transparent; border:0; cursor:pointer; z-index:999; }
.menu-toggle .bar{ height:3px; width:100%; background-color:var(--bright-green); border-radius:2px; }

@media (max-width: 960px){
  .nav-menu{ display:none; }
  .btn-portal{ display:none; }      /* header portal hidden on mobile */
  .menu-toggle{ display:flex; }
}

/* ===== SIDEBAR (consistent across all pages) ===== */
.sidebar{
  position: fixed; top:0; right:-100%;
  width:72%; max-width:320px; height:100vh;
  background:#0b1f16; display:flex; flex-direction:column;
  gap: 1rem; padding:80px 28px 28px;
  box-shadow:-24px 0 60px rgba(0,0,0,.6);
  transition:right .28s cubic-bezier(.22,.61,.36,1);
  z-index:10000; isolation:isolate;
}
.sidebar.active{ right:0; }

.sidebar .close-btn{
  position:absolute; top:18px; right:22px;
  background:none; border:0; font-size:2rem; line-height:1;
  color:var(--bright-green); cursor:pointer;
}

/* Sidebar links – strong, scoped rules to beat page CSS */
.sidebar a,
.sidebar a:link,
.sidebar a:visited{
  display:block;
  text-decoration:none;
  font-weight:700;
  font-size:1.05rem;
  line-height:1.25;
  color:var(--bright-green);
  padding:10px 0;
  margin:0;
  background:none;
  border:none;
}
.sidebar a:hover{ color:var(--bright-green-2); }
.sidebar a + a{ margin-top:8px; }

.sidebar-portal,
.sidebar-home{
  color:#fff !important;
  background: var(--dark-green);
  border-radius:999px;
  text-align:center;
  padding:.85rem 1rem;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  border:1px solid rgba(0,0,0,.25);
  font-weight:800;
}
.sidebar-home{ margin-bottom:12px; }
.sidebar-portal{ margin-top:12px; }

.sidebar-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:9999;
}
.sidebar-overlay.active{ opacity:1; pointer-events:auto; }

/* Desktop plumbing */
@media (min-width: 901px){
  .sidebar, .sidebar-overlay{ display:none !important; }
}

/* Ensure header-portal visible on desktop by default */
.navbar .btn-portal{ display:inline-flex; }
@media (max-width: 960px){
  .navbar .btn-portal{ display:none !important; }
}