/* /////////////////////////////////////
   NAV FRAMEWORK
   Single reusable vertical mega-nav system
///////////////////////////////////// */

/* /////////////////////////////////////
   DESKTOP MAIN NAV
///////////////////////////////////// */

.desktop-dropdown-bar {
  position: relative;
  z-index: 800;
  inline-size: 100%;
  background: var(--cc-nav-bg);
  border-block-end: 0.0625rem solid var(--cc-nav-line);
}

.desktop-main-nav {
  display: flex;
  align-items: stretch;
  min-block-size: clamp(3rem, 5vw, 3.6rem);
}

.desktop-main-link {
  border: 0;
  border-inline-end: 0.0625rem solid var(--cc-nav-line);
  border-radius: 0;
  background: transparent;
  color: var(--cc-nav-ink);
  text-decoration: none;
  padding-inline: clamp(1rem, 2vw, 1.55rem);
  min-block-size: clamp(3rem, 5vw, 3.6rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: clamp(0.75rem, 0.68rem + 0.25vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 180ms ease,
    color 180ms ease;
}

.desktop-main-link:hover,
.desktop-main-link.is-active {
  background: var(--cc-colour-primary);
  color: var(--cc-colour-white);
}

.desktop-main-link.is-current {
  background: var(--cc-nav-muted-bg);
  color: var(--cc-nav-ink-strong);
}

/* /////////////////////////////////////
   DESKTOP VERTICAL MEGA DROPDOWN
///////////////////////////////////// */

.desktop-subnav-shell {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: var(--subnav-left, var(--page-pad));
  z-index: 850;
  inline-size: min(16rem, calc(100vw - 2rem));
  max-inline-size: calc(100vw - 2rem);
  background: var(--cc-nav-dropdown-bg);
  border: 0.0625rem solid var(--cc-nav-line);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: var(--cc-radius-md);
  border-end-end-radius: var(--cc-radius-md);
  box-shadow: var(--cc-shadow-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  pointer-events: none;
  transition:
    opacity 170ms ease,
    visibility 170ms ease,
    transform 190ms ease;
}

.desktop-dropdown-bar.has-subnav .desktop-subnav-shell {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.desktop-dropdown-bar.has-subnav:has([data-subnav-panel="admin"].is-active) .desktop-subnav-shell {
  inline-size: max-content;
  max-inline-size: calc(100vw - 2rem);
}

.desktop-subnav-track {
  display: block;
  padding: clamp(0.45rem, 1vw, 0.6rem);
}

.desktop-subnav-panel {
  display: none;
}

.desktop-subnav-panel.is-active {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.45rem, 1vw, 0.65rem);
  align-items: start;
}

.desktop-subnav-panel[data-subnav-panel="admin"].is-active {
  grid-template-columns: repeat(3, max-content);
  column-gap: clamp(1.1rem, 2vw, 1.6rem);
  row-gap: clamp(0.35rem, 0.8vw, 0.6rem);
}

.desktop-nav-group {
  display: grid;
  align-self: start;
  align-content: start;
  gap: clamp(0.08rem, 0.35vw, 0.18rem);
  min-inline-size: 0;
}

.desktop-nav-group-title {
  margin-block-end: clamp(0.08rem, 0.35vw, 0.16rem);
  padding-inline: clamp(0.5rem, 0.9vw, 0.65rem);
  padding-block-end: clamp(0.22rem, 0.55vw, 0.3rem);
  border-block-end: 0.0625rem solid var(--cc-nav-line);
  color: var(--cc-colour-text);
  font-size: clamp(0.72rem, 0.85vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.desktop-subnav-panel a {
  min-block-size: clamp(1.35rem, 1.8vw, 1.6rem);
  padding-inline: clamp(0.5rem, 0.9vw, 0.65rem);
  padding-block: clamp(0.1rem, 0.3vw, 0.18rem);
  border-radius: var(--cc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--cc-nav-ink-muted);
  text-decoration: none;
  font-size: clamp(0.65rem, 0.61rem + 0.14vw, 0.75rem);
  font-weight: 400;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 160ms ease;
}

.desktop-subnav-panel a:hover,
.desktop-subnav-panel a.active {
  background: var(--cc-nav-muted-bg-strong);
  color: var(--cc-nav-ink-strong);
}

.desktop-subnav-panel a:hover {
  transform: translateY(0.08rem);
}

/* /////////////////////////////////////
   HEADER TITLE / ACTION ROW
///////////////////////////////////// */

.app-shell-inner {
  min-block-size: clamp(4.25rem, 5vw, 5rem);
  padding-block: clamp(0.5rem, 1vw, 0.85rem);
  padding-inline: var(--page-pad);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.app-brand {
  min-inline-size: 0;
}


.app-brand-module {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cc-space-2, 0.5rem);
  margin-block-start: 0.25rem;
}

.app-brand-title {
  font-family: var(--cc-font-heading);
  color: var(--cc-nav-ink-strong);
  font-size: clamp(1rem, 0.7vw + 0.95rem, 1.35rem);
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
}

.app-brand-site {
  font-family: var(--cc-font-heading);
  color: var(--cc-nav-ink-strong);
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
  font-weight: 500;
  line-height: 1.05;
  text-transform: capitalize;
  letter-spacing: 0.01em;
}

.app-brand-subtitle {
  color: var(--cc-colour-muted);
  font-size: clamp(0.95rem, 0.35vw + 0.9rem, 1.15rem);
  font-weight: 300;
  line-height: 1.35;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.5rem, 1vw, 0.75rem);
}

.header-control {
  min-inline-size: 0;
  margin: 0;
  font-family: inherit;
}

.header-search {
  inline-size: clamp(10rem, 18vw, 15rem);
}

/* /////////////////////////////////////
   SITE SWITCHER
///////////////////////////////////// */

.topbar-site-switcher {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2, 0.5rem);
  min-inline-size: min(100%, 14rem);
}

.topbar-site-switcher label {
  margin: 0;
  font-weight: 400;
  white-space: nowrap;
}

.topbar-site-switcher select {
  min-inline-size: 9rem;
  max-inline-size: 100%;
}

/* /////////////////////////////////////
   MOBILE MENU BUTTON
///////////////////////////////////// */

.mobile-menu-button {
  inline-size: 2.45rem;
  block-size: 2.45rem;
  border: 0.0625rem solid var(--cc-nav-line);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-colour-white);
  display: none;
  place-items: center;
  gap: 0.24rem;
  padding: 0.55rem;
  cursor: pointer;
}

.mobile-menu-button span {
  inline-size: 100%;
  block-size: 0.125rem;
  border-radius: 999px;
  background: var(--cc-nav-ink);
}

/* /////////////////////////////////////
   MOBILE SLIDE NAV
///////////////////////////////////// */

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 880;
  background: var(--cc-overlay);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.mobile-slide-menu {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 900;
  inline-size: min(22rem, 88vw);
  background: var(--cc-colour-white);
  border-inline-end: 0.0625rem solid var(--cc-nav-line);
  box-shadow: var(--cc-shadow-lg);
  transform: translateX(-100%);
  transition: transform 220ms ease;
  overflow-y: auto;
}

.mobile-menu-open .mobile-menu-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu-open .mobile-slide-menu {
  transform: translateX(0);
}

.mobile-slide-head {
  min-block-size: clamp(4rem, 12vw, 5rem);
  padding: clamp(1rem, 4vw, 1.25rem);
  border-block-end: 0.0625rem solid var(--cc-nav-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mobile-slide-title {
  color: var(--cc-nav-ink-strong);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mobile-slide-subtitle {
  margin-block-start: 0.2rem;
  color: var(--cc-colour-muted);
  font-size: 0.82rem;
}

.mobile-menu-close {
  border: 0;
  background: transparent;
  color: var(--cc-nav-ink);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.mobile-slide-links {
  padding-block: 0.5rem;
}

.mobile-nav-section {
  border-block-end: 0.0625rem solid var(--cc-nav-line);
}

.mobile-nav-parent {
  inline-size: 100%;
  min-block-size: 3rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-inline: clamp(1rem, 4vw, 1.25rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cc-nav-ink);
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  cursor: pointer;
}

.mobile-nav-parent:hover,
.mobile-nav-parent[aria-expanded="true"] {
  background: var(--cc-colour-primary);
  color: var(--cc-colour-white);
}

.mobile-nav-chevron {
  transition: transform 180ms ease;
}

.mobile-nav-parent[aria-expanded="true"] .mobile-nav-chevron {
  transform: rotate(90deg);
}

.mobile-nav-children {
  overflow: hidden;
  background: var(--cc-nav-muted-bg);
}

.mobile-nav-children.is-collapsed {
  display: none;
}

.mobile-nav-children.is-collapsing {
  display: block;
  transition: height 360ms ease;
}

.mobile-nav-children.is-expanded {
  display: block;
}

.mobile-nav-group {
  padding-block: 0.35rem 0.55rem;
}

.mobile-nav-group-title {
  padding-inline: clamp(1.25rem, 5vw, 1.6rem);
  padding-block: clamp(0.75rem, 3vw, 0.9rem) 0.35rem;
  color: var(--cc-colour-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mobile-nav-children a {
  min-block-size: 2.75rem;
  padding-inline: clamp(1.25rem, 5vw, 1.6rem);
  padding-block: 0.5rem;
  border-block-start: 0.0625rem solid var(--cc-nav-line);
  display: flex;
  align-items: center;
  color: var(--cc-nav-ink-muted);
  text-decoration: none;
  font-size: 0.82rem;
}

.mobile-nav-children a:hover,
.mobile-nav-children a.active {
  background: var(--cc-colour-primary);
  color: var(--cc-colour-white);
}

.mobile-logout {
  min-block-size: 3rem;
  padding-inline: clamp(1rem, 4vw, 1.25rem);
  border-radius: 0;
  display: flex;
  align-items: center;
  color: var(--cc-colour-danger);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

/* /////////////////////////////////////
   RESPONSIVE NAV
///////////////////////////////////// */

@media (max-width: 47.99rem) {
  .app-brand-module {
    display: grid;
    gap: 0.1rem;
  }

  .app-brand-title,
  .app-brand-subtitle {
    display: block;
  }

  .mobile-slide-menu .topbar-site-switcher {
    inline-size: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--cc-space-1, 0.25rem);
    margin-block-start: var(--cc-space-2, 0.5rem);
  }

  .mobile-slide-menu .topbar-site-switcher select {
    inline-size: 100%;
    min-inline-size: 0;
  }


  .desktop-dropdown-bar {
    display: none;
  }

  .mobile-menu-button {
    display: grid;
  }

  .app-shell-inner {
    grid-template-columns: auto 1fr;
  }

  .header-actions {
    display: none;
  }

  .app-brand-title {
    font-size: clamp(1.05rem, 5vw, 1.35rem);
  }
}

@media (min-width: 48rem) {
  .mobile-menu-overlay,
  .mobile-slide-menu {
    display: none;
  }
}

/* /////////////////////////////////////
   MOBILE BURGER BUTTON
   Shared nav toggle button
///////////////////////////////////// */

.mobile-menu-button {
  inline-size: 2.45rem;
  block-size: 2.45rem;
  border: 0.0625rem solid var(--cc-nav-line);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-colour-white);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.24rem;
  padding: 0.55rem;
  cursor: pointer;
}

.mobile-menu-button:hover,
.mobile-menu-button:focus-visible {
  background: var(--cc-colour-primary);
  border-color: var(--cc-colour-primary);
}

.mobile-menu-button span {
  inline-size: 100%;
  block-size: 0.125rem;
  border-radius: 999px;
  background: var(--cc-nav-ink);
}

.mobile-menu-button:hover span,
.mobile-menu-button:focus-visible span {
  background: var(--cc-colour-white);
}

@media (max-width: 47.99rem) {
  .mobile-menu-button {
    display: flex;
  }
}

/* /////////////////////////////////////
   MOBILE NAV LAYOUT
///////////////////////////////////// */

@media (max-width: 47.99rem) {
  .mobile-slide-menu {
    inline-size: 100vw;
    max-inline-size: 100vw;
  }

  .mobile-slide-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--cc-space-3, 0.75rem);
  }

  .mobile-menu-close {
    justify-self: end;
  }

  .mobile-slide-links > .topbar-site-switcher {
    inline-size: 100%;
    min-inline-size: 0;
    display: grid;
    gap: var(--cc-space-1, 0.25rem);
    padding: var(--cc-space-3, 0.75rem);
    border-bottom: 1px solid var(--cc-colour-border-soft);
  }

  .mobile-slide-links > .topbar-site-switcher select {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .mobile-slide-links,
  .mobile-nav-section,
  .mobile-nav-parent,
  .mobile-nav-children,
  .mobile-nav-group,
  .mobile-nav-group a,
  .mobile-logout {
    inline-size: 100%;
  }
}






/* /////////////////////////////////////
   STICKY DESKTOP NAV
///////////////////////////////////// */

.desktop-dropdown-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 880;
}

.desktop-subnav-shell {
  z-index: 890;
}