/* =============================================================
   "THE WORK" LAYERED NAV
   Upload to: wp-content/themes/alex-morse-theme/assets/work-megamenu.css

   Click-driven, no hover. Each layer only renders when the page you're
   on calls for it, so there's nothing to show/hide in CSS.
============================================================= */

.am-worknav {
  background: var(--color-dark-nav, #3a3a3a);
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.am-worknav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

/* every layer is a plain list — no bullets, no indent */
.am-worknav-row {
  list-style: none;          /* bullets removed */
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.am-worknav-row > li { margin: 0; padding: 0; }

.am-worknav-row a {
  display: inline-block;
  font-family: var(--font-ui, sans-serif);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}

/* ---------- layer 2 : the three hubs ---------- */
.am-worknav-hubs {
  gap: 34px;
  padding: 16px 0 14px;
}
.am-worknav-hub {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-light-blue, #8aa5ff);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.am-worknav-hub:hover,
.am-worknav-hub:focus-visible { color: #fff; }
.am-worknav-hub.is-current {
  color: #fff;
  border-bottom-color: #fff;
}

/* ---------- layer 3 : landing pages ---------- */
.am-worknav-subs {
  gap: 8px 10px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.am-worknav-sub {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-light-blue, #8aa5ff);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 7px 15px;
}
.am-worknav-sub:hover,
.am-worknav-sub:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
/* the clicked item stays highlighted */
.am-worknav-sub.is-current {
  background: #fff;
  border-color: #fff;
  color: var(--color-dark-nav, #3a3a3a);
}

/* ---------- layer 4 : that page's projects ---------- */
.am-worknav-projects {
  gap: 6px 26px;
  padding: 14px 0 18px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  columns: 4;
  column-gap: 32px;
  display: block;            /* columns need block flow, not flex */
}
.am-worknav-projects > li {
  break-inside: avoid;
  margin-bottom: 9px;
}
.am-worknav-project {
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, .72);
}
.am-worknav-project:hover,
.am-worknav-project:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .am-worknav-projects { columns: 3; }
}

@media (max-width: 991px) {
  .am-worknav-projects { columns: 2; }
  .am-worknav-hubs { gap: 22px; }
  .am-worknav-hub  { font-size: .95rem; }
}

@media (max-width: 767px) {
  .am-worknav-inner   { padding: 0 16px; }
  .am-worknav-projects { columns: 1; padding-bottom: 14px; }
  .am-worknav-hubs    { gap: 16px; padding: 12px 0 10px; }
  .am-worknav-subs    { gap: 6px 8px; padding: 10px 0; }
  .am-worknav-sub     { font-size: .82rem; padding: 6px 12px; }
}