/* ============================================================
   cerc.cd – Navigation / Menu styles
   Config source: integrityaction.org
   Font: Barlow 400 / 400i / 600 / 600i / 700
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

/* ─── CSS Custom Properties ─────────────────────────────── */
:root {
  --font-family-base:   'Barlow', sans-serif;

  /* font sizes (matching source file proportions) */
  --fs-nav-primary:     15px;   /* top-level nav links        */
  --fs-nav-secondary:   14px;   /* first-level dropdown items */
  --fs-nav-tertiary:    13px;   /* nested (tertiary) items    */
  --fs-nav-btn:         13px;   /* CTA button inside nav      */

  /* font weights */
  --fw-regular:         400;
  --fw-semibold:        600;
  --fw-bold:            700;

  /* brand palette */
  --color-primary:      #eca327;   /* orange accent / "primary" btn  */
  --color-red:          #e03e3e;   /* red accent                     */
  --color-blue:         #2b6cb0;   /* blue accent                    */
  --color-dark:         #1a1a2e;   /* dark nav background            */
  --color-dark-alt:     #16213e;   /* slightly lighter dark shade    */
  --color-mid:          #f5f3ee;   /* mid / light-gray surface       */
  --color-light:        #ffffff;
  --color-text-light:   #ffffff;
  --color-text-dark:    #1a1a2e;
  --color-text-muted:   #6b7280;

  /* spacing */
  --nav-height:         64px;
  --dropdown-shadow:    0 8px 24px rgba(0, 0, 0, 0.12);
  --transition-fast:    0.18s ease;
  --transition-base:    0.25s ease;
}

/* ─── Base Reset ─────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Header / Nav Wrapper ───────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.header .container-fluid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

.header .row {
  display: flex;
  align-items: center;
  min-height: var(--nav-height);
}

/* ─── Logo ───────────────────────────────────────────────── */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  max-height: 36px;
  width: auto;
  display: block;
}

/* ─── Primary Navigation ─────────────────────────────────── */
.nav-primary {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-primary .nav {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 0;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
}

/* top-level links */
.nav-link {
  font-family:    var(--font-family-base);
  font-size:      var(--fs-nav-primary);
  font-weight:    var(--fw-semibold);
  letter-spacing: 0.01em;
  color:          var(--color-text-light);
  text-decoration: none;
  display:        flex;
  align-items:    center;
  gap:            5px;
  padding:        0 16px;
  height:         var(--nav-height);
  border-bottom:  3px solid transparent;
  transition:     color var(--transition-fast),
                  border-color var(--transition-fast),
                  background-color var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover,
.nav-item:hover > .nav-link,
.nav-link.is-active {
  color:             var(--color-primary);
  border-bottom-color: var(--color-primary);
  background-color:  rgba(255, 255, 255, 0.04);
}

/* chevron icon inside nav-link */
.nav-link .icon {
  width:      10px;
  height:     10px;
  fill:       currentColor;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.nav-item:hover > .nav-link .icon {
  transform: rotate(180deg);
}

/* ─── Secondary Dropdown ─────────────────────────────────── */
.nav-secondary {
  display:          none;
  position:         absolute;
  top:              100%;
  left:             0;
  min-width:        210px;
  background-color: var(--color-dark-alt);
  border-top:       3px solid var(--color-primary);
  box-shadow:       var(--dropdown-shadow);
  z-index:          200;
  border-radius:    0 0 6px 6px;
  overflow:         hidden;
}

.nav-item:hover > .nav-secondary,
.nav-secondary:hover {
  display: block;
}

.nav-secondary__nav {
  list-style: none;
  padding: 8px 0;
  margin:  0;
}

.nav-secondary__nav li {
  position: relative;
}

.nav-secondary__nav a {
  font-family:  var(--font-family-base);
  font-size:    var(--fs-nav-secondary);
  font-weight:  var(--fw-semibold);
  color:        var(--color-text-light);
  text-decoration: none;
  display:      flex;
  align-items:  center;
  justify-content: space-between;
  padding:      10px 20px;
  transition:   background-color var(--transition-fast),
                color var(--transition-fast),
                padding-left var(--transition-fast);
}

.nav-secondary__nav a:hover {
  background-color: rgba(236, 163, 39, 0.12);
  color:            var(--color-primary);
  padding-left:     26px;
}

.nav-secondary__nav a .icon {
  width:  8px;
  height: 8px;
  fill:   currentColor;
  transform: rotate(-90deg);
}

/* ─── Tertiary Dropdown (nested) ─────────────────────────── */
.nav-tertiary {
  display:          none;
  position:         absolute;
  top:              0;
  left:             100%;
  min-width:        210px;
  background-color: var(--color-dark);
  border-top:       3px solid var(--color-blue);
  box-shadow:       var(--dropdown-shadow);
  z-index:          300;
  border-radius:    0 6px 6px 0;
  overflow:         hidden;
}

.nav-secondary__nav li:hover > .nav-tertiary {
  display: block;
}

.nav-tertiary__nav {
  list-style: none;
  padding: 8px 0;
  margin:  0;
}

.nav-tertiary__nav a {
  font-family:  var(--font-family-base);
  font-size:    var(--fs-nav-tertiary);
  font-weight:  var(--fw-regular);
  color:        rgba(255, 255, 255, 0.85);
  text-decoration: none;
  display:      block;
  padding:      9px 20px;
  transition:   background-color var(--transition-fast),
                color var(--transition-fast),
                padding-left var(--transition-fast);
}

.nav-tertiary__nav a:hover {
  background-color: rgba(43, 108, 176, 0.15);
  color:            var(--color-light);
  padding-left:     26px;
}

/* ─── CTA Button inside nav ──────────────────────────────── */
.nav-primary__devcheck {
  font-family:     var(--font-family-base);
  font-size:       var(--fs-nav-btn);
  font-weight:     var(--fw-bold);
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  padding:         8px 18px;
  margin-left:     12px;
  background-color: var(--color-primary);
  color:           var(--color-text-dark);
  border:          none;
  border-radius:   4px;
  text-decoration: none;
  cursor:          pointer;
  transition:      background-color var(--transition-fast),
                   transform var(--transition-fast);
  white-space: nowrap;
}

.nav-primary__devcheck:hover {
  background-color: #d4911f;
  transform:        translateY(-1px);
}

.nav-primary__devcheck .icon {
  width:  12px;
  height: 12px;
  fill:   currentColor;
}

/* ─── Search button ──────────────────────────────────────── */
.nav-primary__search {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            38px;
  height:           38px;
  margin-left:      8px;
  background-color: transparent;
  border:           1px solid rgba(255, 255, 255, 0.25);
  border-radius:    50%;
  color:            var(--color-text-light);
  cursor:           pointer;
  transition:       border-color var(--transition-fast),
                    background-color var(--transition-fast);
  flex-shrink:      0;
}

.nav-primary__search:hover {
  border-color:     var(--color-primary);
  background-color: rgba(236, 163, 39, 0.1);
  color:            var(--color-primary);
}

.nav-primary__search .icon {
  width:  14px;
  height: 14px;
  fill:   currentColor;
  pointer-events: none;
}

/* ─── Mobile hamburger ───────────────────────────────────── */
.nav-handler {
  display:         none;
  align-items:     center;
  gap:             8px;
  background:      none;
  border:          none;
  cursor:          pointer;
  color:           var(--color-text-light);
  font-family:     var(--font-family-base);
  font-size:       var(--fs-nav-btn);
  font-weight:     var(--fw-semibold);
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  padding:         0;
}

.nav-handler-text span { display: none; }   /* "Close" text hidden by default */
.nav-handler.is-open .nav-handler-text > span { display: none; }
.nav-handler.is-open .nav-handler-text span   { display: inline; }

/* three-bar icon */
.nav-handler-icon {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            5px;
  width:          24px;
  height:         20px;
}

.nav-handler-icon span {
  display:          block;
  height:           2px;
  background-color: currentColor;
  border-radius:    2px;
  transition:       transform var(--transition-base),
                    opacity   var(--transition-base);
  transform-origin: center;
}

.nav-handler.is-open .nav-handler-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg);  }
.nav-handler.is-open .nav-handler-icon span:nth-child(2) { opacity: 0; transform: scaleX(0);           }
.nav-handler.is-open .nav-handler-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-handler.is-open .nav-handler-icon span:nth-child(4) { opacity: 0;                                  }

/* ─── Responsive breakpoints ─────────────────────────────── */

/* Tablet: collapse nav */
@media (max-width: 991px) {

  .nav-handler { display: flex; }

  #nav-primary {
    display:          none;
    position:         fixed;
    top:              var(--nav-height);
    left:             0;
    right:            0;
    bottom:           0;
    background-color: var(--color-dark);
    overflow-y:       auto;
    flex-direction:   column;
    align-items:      stretch;
    padding:          16px 0 32px;
    gap:              0;
  }

  #nav-primary.is-open { display: flex; }

  /* Stack nav items vertically */
  .nav-primary .nav {
    flex-direction: column;
    align-items:    stretch;
    width:          100%;
  }

  .nav-link {
    height:       auto;
    padding:      14px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    border-left:   3px solid transparent;
  }

  .nav-link:hover,
  .nav-item:hover > .nav-link {
    border-left-color:   var(--color-primary);
    border-bottom-color: transparent;
  }

  /* Inline dropdowns on mobile */
  .nav-secondary,
  .nav-tertiary {
    position:  static;
    display:   none;
    box-shadow: none;
    border:    none;
    background-color: rgba(255, 255, 255, 0.04);
    border-left: 3px solid rgba(236, 163, 39, 0.4);
    margin-left: 24px;
    border-radius: 0;
  }

  .nav-item.is-open > .nav-secondary { display: block; }
  .nav-secondary__nav li.is-open > .nav-tertiary { display: block; }

  .nav-secondary__nav a,
  .nav-tertiary__nav  a {
    padding: 10px 20px;
    font-size: var(--fs-nav-secondary);
  }

  .nav-secondary__nav a:hover { padding-left: 20px; }

  /* CTA at bottom of mobile nav */
  .nav-primary__devcheck {
    margin: 20px 24px 0;
    justify-content: center;
  }

  .nav-primary__search { display: none; }
}

/* Large desktop: ensure tertiary opens to the side */
@media (min-width: 1200px) {
  .nav-link { padding: 0 18px; }
}