/**
 * Project STAIR 2.0 - Header and Nav styles
 * @version 2.0.0
 * @author Curtis Griffin @ MCPER
 */

/*-------------------------skiplinks-------------------*/
/* visually hidden helper */
.sr-only {
  position: absolute !important;
  width: 1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space: nowrap; border:0;
}

/* ----- skip link (hidden until focus) ----- */
.skip-link {
  position:absolute;
  left:-999rem;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:200;
}
.skip-link:focus,
.skip-link:active {
  left:1rem;
  top:1rem;
  width:auto;
  height:auto;
  padding:.45rem .6rem;
  border-radius:6px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  text-decoration:none;
}

/* ------------------------- header ----- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.99));
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(3px);
}

.site-header .wrap{
  display:flex;
  align-items:center;
  gap:var(--gap);
  min-height:var(--nav-height);
  padding-left:1rem;
  padding-right:1rem;
}

/* -------------------------------logo */
.logo{
  flex: 0 0 auto;
}
.logo img {
  display:block;
  height:auto;
  max-height: 70px;
  width:auto;
}

/* ------------------------nav------- */
.site-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* top-level nav */
.nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:1rem;
  font-weight:600;
  font-size:0.95rem;
}

/* nav item basics */
.nav-list > li {
  position:relative;
}

/* top-level links */
.nav-list a{
  display:inline-block;
  padding:.35rem .45rem;
  text-decoration:none;
  color:inherit;
  border-radius:6px;
  transition:background .12s ease, color .12s ease;
}
.nav-list a:hover,
.nav-list a:focus {
	background:rgba(11,92,255,0.06);	
	/*border: 2px solid #ff00ff;*/
}

/* focus outline */
a:focus, button:focus, input:focus, textarea:focus{
  outline:3px solid Highlight;
  outline-offset:3px;
}

/* hamburger (hidden on desktop) */
.nav-toggle{
  display:none;             /* visible only on mobile via media query */
  background:none;
  border:0;
  font-size:1.2rem;
  padding:.25rem .35rem;
  border-radius:6px;
  cursor:pointer;
}

/* ----- dropdowns (desktop) ----- */
.has-submenu { position:relative; }

/* Desktop dropdown */
.submenu {
  list-style:none;
  display:none;
  position:absolute;
  left:0;
  top:100%;
  min-width:220px;
  padding:.5rem;
  margin:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:var(--shadow);
  z-index:80;
}

/* submenu items (desktop) */
.submenu li { 
	white-space: nowrap;
	list-style: none;
}
.submenu a {
	display: block;
	padding:.45rem.6rem;
	border-radius: 6px;
	transition: background 0.2s ease, color 0.2s ease;
}
.submenu a:hover,.submenu a:focus {
	background: rgba(0, 0, 0, 0.04);
}

/* Individual submenu item colors */
.submenu a[href*="assessments"]:hover,.submenu a[href*="assessments"]:focus {
	background: color-mix(in srgb, var(--bucket-assessments) 10%, white);
	color: var(--bucket-assessments);
}
.submenu a[href*="coaching"]:hover,.submenu a[href*="coaching"]:focus {
	background: color-mix(in srgb, var(--bucket-coaching) 10%, white);
	color: var(--bucket-coaching);
}
.submenu a[href*="dbi"]:hover,.submenu a[href*="dbi"]:focus {
	background: color-mix(in srgb, var(--bucket-dbi) 10%, white);
	color: var(--bucket-dbi);
}
.submenu a[href*="mathematics"]:hover,.submenu a[href*="mathematics"]:focus {
	background: color-mix(in srgb, var(--bucket-mathematics) 10%, white);
	color: var(--bucket-mathematics);
}
.submenu a[href*="graphing"]:hover,.submenu a[href*="graphing"]:focus {
	background: color-mix(in srgb, var(--bucket-graphing) 10%, white);
	color: var(--bucket-graphing);
}
.submenu a[href*="instruction"]:hover,.submenu a[href*="instruction"]:focus {
	background: color-mix(in srgb, var(--bucket-instruction) 10%, white);
	color: var(--bucket-instruction);
}
.submenu a[href*="intensification"]:hover,.submenu a[href*="intensification"]:focus {
	background: color-mix(in srgb, var(--bucket-intensification) 10%, white);
	color: var(--bucket-intensification);
}
.submenu a[href*="additional"]:hover,.submenu a[href*="additional"]:focus {
	background: color-mix(in srgb, var(--bucket-additional) 10%, white);
	color: var(--bucket-additional);
}

/* show on hover / focus-within for keyboard and mouse */
.has-submenu:hover >.submenu,.has-submenu:focus-within >.submenu {
	display: block;
}

/* caret indicator for top level items that have submenu (pure CSS, unobtrusive) */
.has-submenu > a::after{
  content: "▾";
  display:inline-block;
  margin-left:.35rem;
  font-size:0.8em;
  vertical-align:baseline;
  opacity:.85;
  transform:translateY(-1px);
  transition:transform .12s ease;
}

/* rotate caret on hover for a tiny affordance */
.has-submenu:hover > a::after,
.has-submenu:focus-within > a::after {
  transform:translateY(-1px) rotate(180deg);
}

/* ----- mobile behavior: stack nav, show hamburger ----- */
/* ---------------- Mobile stacking: logo -> hamburger -> nav ---------------- */
/* ---------------- Mobile: centered top row (logo left, hamburger right) + nav below ---------------- */
@media (max-width:820px){
  /* header wrap: compact top row then nav below */
  .site-header .wrap{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;             /* allows the nav to drop to the next line */
    align-items:center;
    justify-content:space-between;
    gap:0;
    padding-left:0.75rem;
    padding-right:0.75rem;
  }

  /* logo: left-aligned in the top row */
  .logo{
    order:1;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:.5rem 0;
  }
  .logo img{ max-height:44px; width:auto; display:block; }

  /* hamburger: right-aligned in the top row */
  .nav-toggle{
    order:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:center;
    background:none;
    border:0;
    font-size:1.2rem;
    padding:.45rem .6rem;
    margin:0;
    border-radius:6px;
    cursor:pointer;
    min-width:44px;
    min-height:44px;
  }

  /* nav sits on the second row, full-width */
  .site-nav{
    order:2;
    display:block;              /* always present in layout flow, but collapsed by max-height until opened */
    width:100%;
    overflow:hidden;
    max-height:0;               /* collapsed by default */
    transition:max-height .28s cubic-bezier(.2,.9,.2,1);
  }

  /* when open, expand to show nav (set a large enough max-height to cover content) */
  .site-nav.open{
    max-height:1200px;          /* big enough for menu contents; still animates */
    border-top:1px solid var(--border);
    padding:0.5rem 0 1rem 0;
    box-shadow: none;
    background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.995));
  }

  /* stack nav items vertically */
  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0;
    margin:0;
  }

  .nav-list > li {
    border-bottom:1px solid rgba(0,0,0,0.04);
  }

  .nav-list a{
    display:block;
    padding:.9rem 1.25rem;
    width:100%;
    box-sizing:border-box;
    font-weight:600;
  }

/*
  .nav-list a.contact-link,
  .nav-list a[href*="contact"]{
    color:var(--accent);
    padding:.9rem 1.25rem;
  }
*/
  /* submenus inline and indented for clarity */
  .submenu{
    position:static;
    display:block;
    padding:0;
    margin:0;
    border:0;
    box-shadow:none;
    background:transparent;
  }
  .submenu li a{
    padding:.6rem 1.75rem;
    font-weight:500;
  }

  /* hide desktop-only caret indicator on mobile */
  .has-submenu > a::after{ display:none; }

  /* optional: small visual separation between top row and nav when open */
  .site-nav.open + * { /* no-op but reserved for future sibling styling if needed */ }

  /* ensure header doesn't feel cramped */
  .site-header .wrap { min-height: auto; }

  /* keep small-screen spacing tweaks */
  @media (max-width:480px){
    .logo img { max-height:36px; }
    .wrap { padding-left:0.6rem; padding-right:0.6rem; }
  }
}

/* small screens tweak 
@media (max-width:480px){
  .logo img{ max-height:36px; }
  .wrap{ padding:0.75rem; }
  .hero{ padding:1.25rem 0; }
}*/

/* fallback when JS disabled: ensure nav is usable */
.no-js .nav-toggle{ display:none; }
.no-js .site-nav{ display:flex; }
.no-js .nav-list{ display:flex; flex-direction:row; position:static; height:auto; transform:none; box-shadow:none; padding:0; background:transparent; border:none; }