/* ==========================================================================
   Mobile navigation — hamburger + slide-in drawer
   Scoped to <= 991px so the existing desktop nav is untouched.
   Matches the site palette (#1f1f1f bar, #002d7e accent, #ff8400 highlight).
   ========================================================================== */

/* ---------- Brand logo ----------
   Source image is a 612x408 landscape PNG (1.5:1) with a transparent
   background. The site header is a fixed 50px bar, so the logo is constrained
   on HEIGHT and width follows from the aspect ratio — that way it can neither
   distort nor overflow the bar.

   These rules live here (rather than only in catalogue.css) because
   index.html loads this file but NOT catalogue.css, and index.html is where
   the desktop header logo renders. The <=991px block further down overrides
   the height for phones. */
.site-logo {
  display: block;
  height: 38px;
  width: auto;
  max-width: 100%;
  max-height: 38px;
  object-fit: contain;
}

/* The footer reuses the same artwork on its dark panel, slightly smaller. */
footer .site-logo {
  height: 34px;
  max-height: 34px;
}

/* Align the header logo with the page content edge instead of the skin's
   5em default. !important is required to beat the skin's own header .logo
   rule, which sets margin-left: 5em. */
header .logo {
  margin-left: 2.5em !important;
  margin-top: 0 !important;
  display: flex;
  align-items: center;
  height: 50px;
}

/* ---------- Hamburger button ---------- */
.nav-toggle {
  display: none;                 /* desktop: hidden */
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 44px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1600;                 /* above the drawer */
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle:focus-visible {
  outline: 2px solid #ff8400;
  outline-offset: 2px;
  border-radius: 4px;
}

/* The three bars, animated into an X when open */
.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 2px;
  margin-left: -12px;
  background: #fff;
  border-radius: 2px;
  transition: transform .28s ease, opacity .18s ease, top .28s ease;
  display: block;
}
.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 26px; }

.nav-toggle.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* Dark bars when the header is in its light ("mouseon"/scrolled) state */
header.mouseon .nav-toggle span { background: #1f1f1f; }

/* ---------- Drawer ---------- */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 84%;
  max-width: 340px;
  height: 100%;
  background: #1f1f1f;
  z-index: 1550;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 66px 0 40px;
  box-shadow: -8px 0 26px rgba(0, 0, 0, .35);
}

.nav-drawer.is-open { transform: translateX(0); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 1540;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* ---------- Drawer contents ---------- */
.nav-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-drawer a {
  display: block;
  color: #e6e6e6;
  text-decoration: none;
  font-size: 16px;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: background .18s ease, color .18s ease;
}
.nav-drawer a:hover,
.nav-drawer a:focus {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

/* Top-level rows that carry a submenu get a chevron button */
.nav-drawer .has-children > a { padding-right: 62px; }

.nav-drawer .submenu-toggle {
  position: absolute;
  right: 0;
  top: 0;
  width: 58px;
  height: 53px;
  border: 0;
  background: transparent;
  color: #ff8400;
  font-size: 20px;
  line-height: 53px;
  cursor: pointer;
  border-left: 1px solid rgba(255, 255, 255, .08);
}
.nav-drawer .submenu-toggle:after {
  content: "\25BE";              /* ▾ */
  display: inline-block;
  transition: transform .25s ease;
}
.nav-drawer .has-children.is-expanded .submenu-toggle:after { transform: rotate(180deg); }

.nav-drawer .has-children { position: relative; }

.nav-drawer .submenu {
  display: none;
  background: #171717;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav-drawer .has-children.is-expanded .submenu { display: block; }

.nav-drawer .submenu a {
  font-size: 14.5px;
  padding: 12px 22px 12px 34px;
  color: #b9b9b9;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.nav-drawer .submenu a:hover { color: #fff; background: rgba(255, 255, 255, .05); }

.nav-drawer .submenu a.heading {
  color: #ff8400;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding-top: 16px;
}

.nav-drawer .drawer-foot {
  margin-top: 22px;
  padding: 0 22px;
}
.nav-drawer .drawer-foot a {
  border: 0;
  padding: 8px 0;
  color: #9a9a9a;
  font-size: 14px;
}
.nav-drawer .drawer-foot a:hover { background: none; color: #fff; }

/* ---------- Mobile layout ---------- */
@media (max-width: 991px) {
  .nav-toggle { display: block; }

  /* The original horizontal nav is replaced by the drawer */
  header .header > nav { display: none; }

  header { height: 50px; }

  header .logo {
    margin-left: 14px !important;
    margin-top: 0 !important;
    max-width: 62%;
  }
  header .logo img { width: auto !important; max-height: 34px; }
  .site-logo { height: 34px; max-height: 34px; }

  /* The floating social/language widgets do not fit — hide them on phones */
  .site-assistant { display: none !important; }

  /*
   * The header is fixed, so page content needs a small offset to clear it.
   * Previously this was a full 50px, which pushed the hero down and left a
   * visible gap under the navbar. A small breathing space is enough, and each
   * hero section supplies its own top spacing.
   *
   * Scoped with :not(.catalogue-body) so it does not override catalogue.css,
   * whose pages have no hero and do need the full header clearance — that file
   * loads before this one, so an unscoped rule here would win and let the
   * fixed header overlap the page heading.
   */


  .docker-container { display: none !important; }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
  .nav-drawer { width: 88%; }
  header .logo { max-width: 58%; }
}