/*
 * Live hotfix overrides (2026-10-27). Loaded after the Vite bundle in layouts/site.blade.php.
 * TODO: move these into resources/css (navbar + hero partials) and drop this file.
 */

/* Hamburger: the navbar is white (--bg), so the icon must be navy, not white.
   Hover/focus only tints the background; the icon stays visible on touch. */
.hamburger {
  color: var(--navy, #101D35);
  border-color: var(--border, #E5E7EB);
  background: transparent;
}
.hamburger:hover,
.hamburger:focus-visible {
  color: var(--navy, #101D35);
  border-color: var(--border, #E5E7EB);
  background: var(--bg-alt, #F2F4F7);
}
.hamburger svg {
  color: inherit;
  stroke: currentColor;
}

/* Close button sits on the navy .m-menu-head, so it stays white. */
.m-close {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  background: transparent;
}
.m-close:hover,
.m-close:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}
.m-close svg {
  color: inherit;
  stroke: currentColor;
}

/* Hero: centre eyebrow, title, description and buttons on mobile (desktop stays left). */
@media (max-width: 768px) {
  .slide-inner {
    justify-content: center;
  }
  .hero-content {
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    text-align: center;
  }
  .hero-eyebrow {
    justify-content: center;
  }
  .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-btns {
    align-items: stretch;
  }
  .hero-btns .btn {
    justify-content: center;
  }
}

/* Header logo (2026-10-28): the bundle hard-codes .logo-img { height: 70px }, which squeezes
   the menu so items wrap. Back to the Branding setting (--logo-h), capped per breakpoint. */
.navbar .logo-img {
  height: var(--logo-h, 50px);
  width: auto;
  max-width: 220px;
}
.menu-link,
.has-dd > .menu-link,
.dd a {
  white-space: nowrap;
}
.menu-link svg {
  flex-shrink: 0;
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .navbar .logo-img {
    height: 44px;
  }
  .menu {
    gap: 16px;
  }
}
@media (max-width: 1024px) {
  .navbar .logo-img,
  .m-menu-head .logo-img {
    height: var(--logo-h-mobile, 40px);
    max-width: 170px;
  }
}

/* Header style (2026-10-28), from Settings → Branding → Header style: .navbar.header--light / --dark.
   Menu text and the hamburger follow the background; orange active/hover in both. */
.navbar.header--light {
  background: var(--bg, #fff);
  border-bottom-color: var(--border, #E5E7EB);
}
.navbar.header--light .menu-link {
  color: #000;
}
.navbar.header--dark {
  background: var(--navy, #101D35);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.navbar.header--dark .menu-link {
  color: #fff;
}
.navbar.header--light .menu-link:hover,
.navbar.header--light .menu-link.is-active,
.navbar.header--light .has-dd:hover > .menu-link,
.navbar.header--dark .menu-link:hover,
.navbar.header--dark .menu-link.is-active,
.navbar.header--dark .has-dd:hover > .menu-link {
  color: var(--accent, #FF6B1A);
}
.navbar.header--dark .hamburger,
.navbar.header--dark .hamburger:hover,
.navbar.header--dark .hamburger:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.navbar.header--dark .hamburger:hover,
.navbar.header--dark .hamburger:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}