/* ============================================================================
   Binary Bliss V2.2 — SHARED MOBILE CHROME  (menu + footer)

   Why this file exists
     The approved fullscreen mobile menu and the approved dark footer were only
     reachable on routes that happened to load css/bb-ux-20260923.css, and the footer
     additionally required a page-level body class. Result: the mobile menu footer look
     differed route by route (owner issue: "inconsistent mobile header/menu across pages",
     "no page should fall back to a visibly older footer because of missing scope/body class").

   What this file is
     The menu and footer component rules, extracted VERBATIM from
     css/bb-ux-20260923.css, with exactly two changes:
       1. the footer rules were de-scoped from `body.bb-bbs-dark-system .footer-area`
          to `.footer-area`, so the same footer treatment reaches every public route
          without needing a page class;
       2. nothing else was added, removed, re-coloured or re-measured.
     They are component rules only: they match the theme's menu element and the
     `.footer-area` element and nothing else, so loading this on a route cannot alter
     that route's page content, typography, spacing or section layout.

   Self-sufficient: every custom property used here carries its literal fallback, so no
   token layer is required and no production token can be overridden.

   Link on every public route. Load after the theme stylesheets so these win where they
   must (the mobile-menu rules are already !important).
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. FOOTER — the approved dark treatment, component-scoped (was page-scoped)
   --------------------------------------------------------------------------- */

.footer-area {
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    var(--bb-ink-900, #111318);
  background-size: 64px 64px, 64px 64px, auto;
  color: var(--bb-text-secondary-dark, #A8AEB8);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-area .widget-title {
  color: var(--bb-text-primary-dark, #F7F8FA);
}
.footer-area p,
.footer-area .footer-content,
.footer-area .copywrite-text p,
.footer-area .container > .row:last-child {
  color: var(--bb-text-secondary-dark, #A8AEB8);
}
.footer-area .footer-content h3 {
  color: var(--bb-text-primary-dark, #F7F8FA);
}
.footer-area a {
  color: var(--bb-accent-on-dark, #82A9ED);
}
.footer-area .our-link li a {
  color: var(--bb-text-secondary-dark, #A8AEB8);
}
.footer-area .our-link li a:hover,
.footer-area .our-link li a:focus {
  color: var(--bb-accent-on-dark, #82A9ED);
}
.footer-area .our-link li a::after {
  background-color: var(--bb-blue-600, #0F52BA);
}
.footer-area .copywrite-text p a,
.footer-area .container > .row:last-child a {
  color: var(--bb-accent-on-dark, #82A9ED);
}
/* Social chips: unified to the palette instead of five platform colours. */
.footer-area .footer-social-info a {
  background-color: rgba(15, 82, 186, 0.22);
  border: 1px solid rgba(130, 169, 237, 0.35);
  color: var(--bb-accent-on-dark, #82A9ED);
  border-radius: 999px;
  transition: background-color 180ms ease, color 180ms ease;
}
.footer-area .footer-social-info a:hover,
.footer-area .footer-social-info a:focus {
  background-color: var(--bb-blue-600, #0F52BA);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   2. FULLSCREEN MOBILE MENU — verbatim, `@media (max-width: 991px)` only
   --------------------------------------------------------------------------- */

@media (max-width: 991px) {
  body .classy-menu.menu-on {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 2147483000 !important;
    background-color: var(--bb-ink-950, #090B0F) !important;
    background-image:
      radial-gradient(circle at 82% 14%, rgba(15, 82, 186, 0.20) 0 42%, transparent 43%),
      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
    background-size: auto, 56px 56px, 56px 56px !important;
    color: #F7F8FA !important;
    padding: 84px 28px 40px !important;
    overflow-y: auto !important;
    box-shadow: none !important;
  }

  /* One close control only: the legacy decorative X next to the header is hidden;
     the in-menu close button becomes a fixed, labelled control. */
  body .classy-menu.menu-on .classycloseIcon {
    position: fixed !important;
    top: 14px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px;
    border: 1px solid rgba(130, 169, 237, 0.4);
    background: rgba(15, 82, 186, 0.18);
    z-index: 2147483001;
  }
  body .classy-menu.menu-on .classycloseIcon .cross-wrap span {
    background: #F7F8FA;
    width: 20px;
    height: 2px;
  }
  body .classy-menu.menu-on .classycloseIcon .cross-wrap span.top { transform: rotate(45deg) translate(1px, -1px); }
  body .classy-menu.menu-on .classycloseIcon .cross-wrap span.bottom { transform: rotate(-45deg) translate(1px, 1px); }
  /* Hide the header-row duplicate close icon while the menu is open. */
  body .navbarToggler.active { opacity: 0; pointer-events: none; }

  body .classy-menu.menu-on .classynav ul li a,
  body .breakpoint-on .classynav > ul > li > a,
  body .classy-menu.menu-on .classynav > ul > li > .nav-services-row > a {
    display: flex;
    align-items: center;
    color: #F7F8FA !important;
    background: transparent !important;
    border-bottom: none !important;
    font-family: var(--bb-font-display, Aileron, sans-serif);
    font-size: 1.7rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
    min-height: 64px;
    padding: 10px 0 10px 18px;
    border-left: 3px solid transparent;
  }
  body .classy-menu.menu-on .classynav ul li a:hover,
  body .classy-menu.menu-on .classynav ul li a:focus,
  body .classy-menu.menu-on .classynav ul li.current-item > a {
    border-left-color: var(--bb-blue-400, #4A82E3);
    color: #fff;
  }
  body .classy-menu.menu-on .classynav ul li.current-item > a {
    border-left-color: var(--bb-blue-600, #0F52BA);
  }
  /* Submenu items: smaller, muted, clearly secondary. */
  body .classy-menu.menu-on .services-subnav a {
    color: var(--bb-text-secondary-dark, #A8AEB8);
    font-family: var(--bb-font-body, sans-serif);
    font-size: 1.02rem;
    min-height: 52px;
    border-left: 2px solid rgba(130, 169, 237, 0.25);
  }
  body .classy-menu.menu-on .services-subnav a:hover,
  body .classy-menu.menu-on .services-subnav a:focus {
    color: #fff;
    border-left-color: var(--bb-blue-400, #4A82E3);
  }
  /* Quote CTA: strong blue block, full-width, clearly separated. */
  /* The quote pill is the ONE CTA in the menu, so it must be the same box on every route: one
     route-specific stylesheet was stretching it to 70px against 56px elsewhere. Normalised here
     with the highest-specificity variant of the same component selector - no colour or copy change. */
  body .classy-menu.menu-on .get-a-quote,
  body[class*="bb-v22"] .classy-menu.menu-on .get-a-quote {
    margin: 28px 0 0 !important;
    min-height: 0 !important;
  }
  body .classy-menu.menu-on .get-a-quote a,
  body[class*="bb-v22"] .classy-menu.menu-on .get-a-quote a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px !important;
    height: 56px !important;
    max-height: 56px !important;
    border-radius: 12px;
    background: var(--bb-blue-600, #0F52BA) !important;
    color: #fff !important;
    font-size: 1.15rem;
    font-weight: 600;
  }
  body .classy-menu.menu-on .get-a-quote a:hover,
  body .classy-menu.menu-on .get-a-quote a:focus {
    background: var(--bb-accent-hover, #0B3F91);
  }
  /* Services row toggle visible against dark. */
  body .classy-menu.menu-on .nav-services-toggle {
    color: var(--bb-accent-on-dark, #82A9ED);
    min-height: 64px;
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  body .classy-menu.menu-on { transition: none; }
}