/* header.css */
/*=====================================
  Header & Slide-out Navigation
=====================================*/

.site-header {
  position: relative;
  z-index: 1002;
  display: flex;
  flex-direction: row;                 /* row instead of column */
  align-items: center;                 /* vertically center everything */
  justify-content: space-between;      /* logo/title left, toggle right */
  padding: 0.75em 0em;               /* tightened top/bottom */

}

.header-inner {
  max-width: 960px;           /* match footer look */
  margin: 0 auto;
  padding: 0.75em 1.5em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  
  background: var(--header-bg);                    /* moved here */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);        /* moved here */
  border-radius: 0.5em;   
}

.site-logo {
  max-height: clamp(60px, 8vw, 90px); /* cap logo height */
  width: auto;
  display: block;
  margin-bottom: 0;              /* no extra bottom margin */
  flex: 0 0 auto;                /* don’t stretch or shrink */
}

.site-header .logo {
  margin-right: 1rem;
  flex: 0 0 auto;
}

@keyframes taglineIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.header-tagline {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
   /* solid accent color */
  color: var(--accent);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.5rem, 3vw, 1.5rem);
  font-weight: 700;
  text-align: center;   /* center between logo & toggle */
  margin: 0 1rem;       /* equal space either side */
  letter-spacing: 0em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.30);
  line-height: 1.22;
  flex: 1 1 auto;                /* fill the space between logo & toggle */
  position: relative;
  animation: taglineIn 0.7s ease-out both;
}

/*hamburger*/
.nav-toggle {
  background: none;
  border: none;
  font-size: 2.2rem;
  color: var(--accent);
  cursor: pointer;
  z-index: 1005;
  position: static;              /* drop absolute positioning */
  top: 0.5em;
  margin-left: auto;             /* push to far right */
}

/*=====================================
  Slide-out Navigation Panel
=====================================*/
.site-nav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 75vw;
  max-width: 340px;
  background-color: #fff;        /* solid white panel */
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(.6,0,.4,1);
  padding: 2em 1em;
  box-shadow: -2px 0 5px rgba(0,0,0,0.55);
  z-index: 1006;
  align-items: flex-start;
  max-height: 100vh; /* ensure it never overflows the screen */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}
.site-nav.open {
  transform: translateX(0);
}

/*font-size for all of your slide-out nav links */
.site-nav a {
  display: block;
  text-decoration: none;
  color: var(--text-main);
  padding: 0.5em 0 0.5em 1.8em;
  font-size: 1rem;
}

.site-nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.nav-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--accent);
  position: absolute;
  top: 1em;
  right: 1em;
  cursor: pointer;
  z-index: 1010;
}

/*=====================================
  Links within Hamburger
=====================================*/
.site-nav .nav-section {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--accent);
  margin: 1em 0 0.3em 0;
  padding-left: 0em;
  text-transform: uppercase;
  border-bottom: 2px solid #eee;
  width: 100%;
}

/*=====================================
  Overlay & Blur Behavior
=====================================*/
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.40);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms cubic-bezier(.6,0,.4,1);
  z-index: 1001;
}
.nav-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Blur & dim header, main, footer when nav is open */
body.nav-open .site-header,
body.nav-open .page-header,
body.nav-open main,
body.nav-open .site-footer {
  filter: blur(4px) brightness(0.75);
  transition: filter 300ms cubic-bezier(.6,0,.4,1);
}

/*=====================================
  Mobile Adjustments
=====================================*/
@media (max-width: 600px) {
  .header-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.7em 1em;
  }

  .site-logo {
    order: 1;
    max-height: 80px;
    width: auto;
  }

  .logo {
    margin-right: 0;
    margin-bottom: -3em;
  }

  .nav-toggle {
    order: 2;
    align-self: flex-end;
    margin: 0;
  }

  .header-tagline {
    order: 3;
    font-weight: 700;
    color: var(--accent);
    font-size: 1rem;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.30);
    line-height: 1.3;
    margin: 0;
    text-align: center;
    flex: 1 1 auto;
  }

  .site-nav {
    max-width: 80vw;
  }
}

/*=====================================
  Page Header
=====================================*/
.page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 1.5em;
}

/* Page title styling (big!) */
.page-header .page-title {
  order: 2;
  font-size: clamp(2rem,5vw,3rem);
  font-weight: 900;
  color: var(--heading-color);
  margin: 0;
}

.page-header {
  position: relative;
  z-index: 1003;
}

.page-header .zone-label {
  order: 1;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: var(--accent);
  padding: 0.2em 0.6em;
  border-radius: 4px;
  display: inline-block;
  transform: translateY(-1.8em); /* moves it UP */
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1004;
}

/* --- Consolidated Nav-Group Styling --- */

/* 1. Full-width nav groups */
.nav-group {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 6px;
}

/* 2. Soft background tint per zone */
.nav-group.zone-health { background-color: color-mix(in srgb, var(--accent-healthzone) 15%, white); }
.nav-group.zone-plants { background-color: color-mix(in srgb, var(--accent-plantzone) 15%, white); }
.nav-group.zone-tools  { background-color: color-mix(in srgb, var(--accent-toolzone) 15%, white); }

/* 3. Section heading bars */
.nav-group .nav-section {
  display: block;
  padding: 0.6em 1em;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  margin: 0;
  background-color: var(--accent);
  color: #fff;
}

/* 4. Darker bar variants per zone */
.nav-group.zone-health .nav-section { background-color: color-mix(in srgb, var(--accent-healthzone) 80%, black); }
.nav-group.zone-plants .nav-section { background-color: color-mix(in srgb, var(--accent-plantzone) 80%, black); }
.nav-group.zone-tools  .nav-section { background-color: color-mix(in srgb, var(--accent-toolzone) 80%, black); }

/* 5. Breathing room before links */
.nav-group .nav-section + a {
  margin-top: 0.5em;
}

/* 6. Link basics (block, padding, size) */
.site-nav a {
  display: block;
  padding: 0.5em 0.5em 0.5em 1.8em;
  font-size: 1rem;
  color: var(--text-main);
  text-decoration: none;
}
.site-nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* --- Nav Groups: Full-Width & Spacing --- */
.nav-group {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 6px;
}

/* --- Zone Blocks: Soft Tint + Dark Heading Bar + 2px Separators --- */
/* Soft background tint */
.nav-group.zone-health { background-color: color-mix(in srgb, var(--accent-healthzone) 15%, white); }
.nav-group.zone-plants { background-color: color-mix(in srgb, var(--accent-plantzone) 15%, white); }
.nav-group.zone-tools  { background-color: color-mix(in srgb, var(--accent-toolzone) 15%, white); }

/* Darker full-strength heading bar */
.nav-group .nav-section {
  display: block;
  padding: 0.6em 1em;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  margin: 0;
  background-color: var(--accent);
  color: #fff;
}
.nav-group.zone-health .nav-section { background-color: color-mix(in srgb, var(--accent-healthzone) 80%, black); }
.nav-group.zone-plants .nav-section { background-color: color-mix(in srgb, var(--accent-plantzone) 80%, black); }
.nav-group.zone-tools  .nav-section { background-color: color-mix(in srgb, var(--accent-toolzone) 80%, black); }

/* Breathing room before links */
.nav-group .nav-section + a {
  margin-top: 0.5em;
}

/* Link basics */
.site-nav a {
  display: block;
  padding: 0.5em 0.5em 0.5em 1.8em;
  font-size: 1rem;
  color: var(--text-main);
  text-decoration: none;
}
.site-nav a:hover {
  text-decoration: underline;
}

/* Zone-specific hover colors */
.nav-group.zone-health a:hover { color: var(--accent-healthzone); }
.nav-group.zone-plants a:hover { color: var(--accent-plantzone); }
.nav-group.zone-tools  a:hover { color: var(--accent-toolzone); }

/* 2px separators between zone links */
.nav-group.zone-health > a:not(:last-child) { 
  border-bottom: 2px solid var(--accent-healthzone);
  padding-bottom: 0.5em; margin-bottom: 0.5em;
}
.nav-group.zone-plants > a:not(:last-child) {
  border-bottom: 2px solid var(--accent-plantzone);
  padding-bottom: 0.5em; margin-bottom: 0.5em;
}
.nav-group.zone-tools  > a:not(:last-child) {
  border-bottom: 2px solid var(--accent-toolzone);
  padding-bottom: 0.5em; margin-bottom: 0.5em;
}

/* --- Site-Links Block: Static Black/White Styling --- */

/* Container background (black) */
.nav-group.site-links {
  background-color: #000;    /* Entire block’s backdrop */
}

/* Section heading bar */
.nav-group.site-links .nav-section {
  display: flex;             /* enable flex centering */
  align-items: center;       /* vertical center */
  background-color: #000;    /* Match container */
  color: #fff;               /* White text for the “Site Links” title */ 
  border-bottom: none;       /* Remove the white divider under this bar */
  padding: 0 1em;            /* horizontal padding only */
  height: 2.4em;             /* match the height of other zone headers */
}

/* Individual link panels */
.nav-group.site-links > a {
  display: block;            /* Full-width clickable area */
  background-color: #fff;    /* White behind each link */
  color: #000;               /* Black link text */
  padding: 0.5em 1em;        /* Vertical & horizontal padding */
  text-decoration: none;     /* Remove default underline */
}

/* 1px black separator below each link except the last */
.nav-group.site-links > a:not(:last-child) {
  border-bottom: 1px solid #000;  /* Divider line */
  padding-bottom: 0.8em;          /* Space above the line */
  margin-bottom: 0em;           /* Space below the line */
}

/* Hover state for links */
.nav-group.site-links > a:hover {
  color: #000;               /* Keep text black on hover */
  text-decoration: underline;/* Add underline for feedback */
}
/* Remove the gap under the Site Links header */
.nav-group.site-links .nav-section + a {
  margin-top: 0;  /* pull the first link flush under the header bar */
}
/* Nav-specific font */
.site-nav,
.site-nav .nav-section,
.site-nav a {
  font-family: 'Roboto Slab', serif;
}
/* 1. Define a pulsing glow animation */
@keyframes navGlow {
  0%, 100% {
    text-shadow: 
      0 0 4px #ff0000, 
      0 0 8px #ff0000;
  }
  50% {
    text-shadow: 
      0 0 12px #ff0000, 
      0 0 20px #ff0000;
  }
}

/* 2. Apply it to your active link */
.site-nav a[aria-current="page"] {
  animation: navGlow 2s infinite ease-in-out;
  /* if you prefer a static glow instead of pulsing, replace the above with: */
  /* text-shadow: 0 0 8px var(--accent), 0 0 12px var(--accent); */
}
.header-inner {
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05),
              0 0 12px rgba(0,0,0,0.03);
}

.header-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--container-max-width, 960px);
  height: 4px;
  background: var(--accent);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}