/*
 * Front-end QA4 — content & final consistency
 * Shared navigation-dropdown and footer-density refinements.
 */

/* Gigs dropdown: keeps the primary navigation concise while exposing the
   upcoming archive and confirmed-booking routes consistently. */
.main-nav .main-nav-group {
  position: relative;
  display: flex;
  align-items: center;
}

.main-nav .main-nav-submenu-toggle {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 700 .78rem/1 Lato, Arial, sans-serif;
  letter-spacing: .085em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s ease;
}

.main-nav .main-nav-submenu-toggle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--gold-light);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.main-nav .main-nav-submenu-toggle:hover,
.main-nav .main-nav-submenu-toggle:focus-visible,
.main-nav .main-nav-submenu-toggle.active {
  color: var(--gold-light);
}

.main-nav .main-nav-submenu-toggle:hover::before,
.main-nav .main-nav-submenu-toggle:focus-visible::before,
.main-nav .main-nav-submenu-toggle.active::before {
  transform: scaleX(1);
}

.main-nav .main-nav-submenu-toggle:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 5px;
}

.main-nav .main-nav-submenu-chevron {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}

.main-nav .main-nav-group.is-open .main-nav-submenu-chevron {
  transform: rotate(180deg);
}

.main-nav .main-nav-submenu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  left: 50%;
  width: max-content;
  min-width: 210px;
  padding: 7px;
  border: 1px solid rgba(210,162,58,.42);
  border-radius: 13px;
  background: rgba(8,8,8,.98);
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -5px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.main-nav .main-nav-group:hover .main-nav-submenu,
.main-nav .main-nav-group:focus-within .main-nav-submenu,
.main-nav .main-nav-group.is-open .main-nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.main-nav .main-nav-submenu a {
  display: block;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.25;
  letter-spacing: .045em;
  text-transform: none;
  white-space: nowrap;
}

.main-nav .main-nav-submenu a::after {
  display: none;
}

.main-nav .main-nav-submenu a:hover,
.main-nav .main-nav-submenu a:focus-visible,
.main-nav .main-nav-submenu a.active {
  background: rgba(210,162,58,.10);
  color: var(--gold-light);
}

/* Footer was intentionally generous during the page-build stage. QA4 tightens
   the desktop footprint while keeping mobile controls at accessible sizes. */
.site-footer.footer-option-b {
  padding: 18px 0 13px;
}

.footer-option-b .footer-b-main {
  grid-template-columns: minmax(205px, 240px) 1fr;
  gap: 22px;
  padding: 17px 22px 15px;
}

.footer-option-b .footer-b-brand {
  min-height: 70px;
  padding-right: 22px;
}

.footer-option-b .footer-b-brand img {
  width: min(100%, 214px);
}

.footer-option-b .footer-b-nav {
  gap: 20px;
}

.footer-option-b .footer-b-nav-toggle {
  margin-bottom: 7px;
}

.footer-option-b .footer-b-links {
  gap: 5px 14px;
}

.footer-option-b .footer-b-contact-row {
  gap: 12px;
  padding: 10px 22px;
}

.footer-option-b .footer-b-contact-actions,
.footer-option-b .footer-b-socials {
  gap: 7px;
}

.footer-option-b .footer-b-contact-pill {
  min-height: 34px;
  padding: 6px 10px;
  font-size: .75rem;
}

.footer-option-b .footer-b-contact-pill svg {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
}

.footer-option-b .footer-b-social {
  width: 34px;
  height: 34px;
}

.footer-option-b .footer-b-bottom {
  min-height: 34px;
  padding: 7px 16px;
}

@media (max-width: 1080px) {
  .main-nav .main-nav-group {
    display: block;
    width: 100%;
  }

  .main-nav .main-nav-submenu-toggle {
    width: 100%;
    min-height: 48px;
    justify-content: space-between;
    padding: 15px 0;
    font-size: .92rem;
    letter-spacing: .095em;
  }

  .main-nav .main-nav-submenu-toggle::before {
    display: none;
  }

  .main-nav .main-nav-submenu-chevron {
    width: 15px;
    height: 15px;
    margin-right: 2px;
  }

  .main-nav .main-nav-submenu,
  .main-nav .main-nav-group:hover .main-nav-submenu,
  .main-nav .main-nav-group:focus-within .main-nav-submenu {
    position: static;
    width: 100%;
    min-width: 0;
    padding: 0 0 7px 13px;
    border: 0;
    border-left: 1px solid rgba(210,162,58,.35);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    display: none;
  }

  .main-nav .main-nav-group.is-open .main-nav-submenu {
    display: grid;
  }

  .main-nav .main-nav-submenu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    font-size: .86rem;
    letter-spacing: .04em;
    white-space: normal;
  }
}

@media (max-width: 700px) {
  .site-footer.footer-option-b {
    padding: 13px 0 10px;
  }

  .footer-option-b .footer-b-main {
    padding: 15px 16px 8px;
  }

  .footer-option-b .footer-b-brand {
    padding-bottom: 12px;
  }

  .footer-option-b .footer-b-brand img {
    width: min(100%, 205px);
  }

  .footer-option-b .footer-b-nav {
    padding-top: 5px;
  }

  .footer-option-b .footer-b-nav-toggle {
    min-height: 44px;
  }

  .footer-option-b .footer-b-links {
    padding-bottom: 9px;
  }

  .footer-option-b .footer-b-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 6px 0;
  }

  .footer-option-b .footer-b-contact-row {
    padding: 11px 16px 12px;
  }

  .footer-option-b .footer-b-contact-pill {
    min-height: 44px;
  }

  .footer-option-b .footer-b-social {
    width: 44px;
    height: 44px;
  }

  .footer-option-b .footer-b-bottom {
    padding: 9px 13px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav .main-nav-submenu,
  .main-nav .main-nav-submenu-chevron,
  .main-nav .main-nav-submenu-toggle::before {
    transition: none;
  }
}

/* User-approved public header behaviour — 2026-08-14.
   The public site header stays in normal document flow. It must not become
   sticky/fixed unless explicitly requested later. */
.site-header {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}

/* Build 050 — public-site main-navigation readability.
   Shorter labels create enough room to increase the desktop type size without
   reintroducing header overflow. The hidden desktop menu-toggle no longer
   reserves an empty grid column, and the logo is slightly narrower. */
@media (min-width: 1081px) {
  .header-inner {
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  .logo-link {
    width: 260px !important;
  }

  .main-nav {
    justify-content: flex-end !important;
    gap: 13px !important;
  }

  .main-nav a {
    font-size: .86rem !important;
    letter-spacing: .06em !important;
  }
}

@media (min-width: 1081px) and (max-width: 1240px) {
  .header-inner {
    grid-template-columns: 230px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .logo-link {
    width: 230px !important;
  }

  .main-nav {
    gap: 8px !important;
  }

  .main-nav a {
    font-size: .80rem !important;
    letter-spacing: .04em !important;
  }
}


/* Build 052 — restore the original JT logo composition and give the public
   desktop header enough logo footprint for crisp legibility. The menu labels
   remain the shorter Build 050 wording and mobile behaviour is unchanged. */