/*
 * Cassiopeia Luzi – custom color & font overrides
 * Primary brand colour: #6e5049 (warm brown), matching the J3 template.
 */

:root {
  --cassiopeia-color-primary: #6e5049;
  --cassiopeia-color-link: #6e5049;
  --link-color: #6e5049;
  --link-color-rgb: 110, 80, 73;
  --cassiopeia-color-hover: #4d3835;
  --link-hover-color: #4d3835;
  --link-hover-color-rgb: 77, 56, 53;
}

/* Logo size */
.navbar-brand img {
  max-height: 60px;
  width: auto;
  height: auto;
}

/* ============================================================
   Header layout: logo left (content-aligned), menu right — same row
   ============================================================ */

/* Side-by-side row; left padding mirrors the page content's main-start
   column (grid uses max-width 82.5rem centred, so left offset =
   max(0.5rem, (100% - 82.5rem) / 2)). The grid-child's own 0.5em
   padding is zeroed on the logo so the padding comes from here only. */
.container-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 2rem;
  padding-left: max(0.5rem, calc((100% - 82.5rem) / 2));
}

/* Logo: natural width, no extra left padding (header provides it) */
.container-header .grid-child:has(.navbar-brand) {
  flex: 0 0 auto;
  width: auto;
  padding-left: 0;
}

/* Nav fills the remaining space to the right */
.container-header .grid-child.container-nav {
  flex: 1 1 auto;
  width: auto;
}

/* ============================================================
   Dropdown navigation
   navigation.js adds .show (level 1) and .luzi-open (level 2+)
   ============================================================ */

/* ── Level 1: mobile — show inline below the trigger ──────── */
.mod-menu_dropdown.navbar-nav > .dropdown > .dropdown-menu.show {
  display: block;
}

/* ── Level 1: desktop — float over page content ───────────── */
@media (min-width: 992px) {
  .mod-menu_dropdown.navbar-nav > .dropdown {
    position: relative;
  }

  .mod-menu_dropdown.navbar-nav > .dropdown > .dropdown-menu.show {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
  }
}

/* ── Level 2+: base — hidden by default ───────────────────── */
.dropdown-menu .dropdown {
  position: relative;
}

.dropdown-menu .dropdown > .dropdown-menu {
  display: none;
}

/* Show when JS adds .luzi-open (all sizes) */
.dropdown-menu .dropdown.luzi-open > .dropdown-menu {
  display: block;
}

/* ── Level 2+: desktop — slide out to the right ──────────── */
@media (min-width: 992px) {
  .dropdown-menu .dropdown > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: -4px;
    min-width: 12rem;
    z-index: 1001;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
}

/* ── Level 2+: mobile — accordion expand downward ─────────── */
@media (max-width: 991.98px) {
  .dropdown-menu .dropdown.luzi-open > .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding-left: 1rem;
    min-width: unset;
  }
}

/* ── Chevrons ─────────────────────────────────────────────── */

/* Desktop: down-facing chevrons */
@media (min-width: 992px) {
  .dropdown-menu .dropdown > .dropdown-item::after,
  .mod-menu_dropdown.navbar-nav > .dropdown > .dropdown-toggle::after {
    content: "";
    display: inline-block;
    float: right;
    margin-top: 0.45em;
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-top: 0.3em solid currentColor;
    border-bottom: 0;
  }
}

/* Mobile: down-facing → indicates expand */
@media (max-width: 991.98px) {
  .dropdown-menu .dropdown > .dropdown-item::after,
  .mod-menu_dropdown.navbar-nav > .dropdown > .dropdown-toggle::after {
    content: "";
    display: inline-block;
    float: right;
    margin-top: 0.55em;
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-top: 0.3em solid currentColor;
    border-bottom: 0;
  }

  /* Flip chevron up when expanded */
  .dropdown-menu .dropdown.luzi-open > .dropdown-item::after,
  .mod-menu_dropdown.navbar-nav > .dropdown.show > .dropdown-toggle::after {
    border-top: 0;
    border-bottom: 0.3em solid currentColor;
    margin-top: 0.45em;
  }
}

/* Highlight active submenu parent */
.dropdown-menu .dropdown.luzi-open > .dropdown-item {
  background-color: var(--bs-dropdown-link-hover-bg, #f8f9fa);
  color: var(--cassiopeia-color-primary);
}