/* ============================================================
   GLOBACOM — Shared Chrome stylesheet (navbar, mega-menu, footer)
   ============================================================

   This file defines ZERO :root custom-property tokens itself — it
   assumes --color-*/--font-*/--radius-*/--shadow-*/--transition-*/
   --space-*/--tracking-* are already defined by the page's own theme
   stylesheet, loaded BEFORE this file. Every consuming page must load
   its own token-defining stylesheet first, then this file.

   Sections below marked "ported verbatim" are copied unchanged from
   redesign/03-cool-blue-minimal/style.css (the v1.0 pilot) — same
   selectors, same declarations, same token references. Sections marked
   "new" are Phase 6 additions (mega-menu).
   ============================================================ */

/* ============================================================
   Nav (ported verbatim from redesign/03-cool-blue-minimal/style.css
   lines 110-177)
   ============================================================ */

.navbar {
  background-color: transparent;
  box-shadow: none;
  padding: 1rem 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}

.navbar-brand img {
  height: 32px;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar:not(.scrolled) .navbar-brand img {
  filter: brightness(0) invert(1);
}

.navbar .nav-link {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 0.5rem 0.75rem;
}

.navbar.scrolled .nav-link {
  color: var(--color-text);
}

.navbar:not(.scrolled) .nav-link {
  color: var(--color-text-on-dark);
}

.navbar-toggler {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* WR-03: Bootstrap's default toggler icon SVG uses a fixed dark stroke
   color; on the transparent/unscrolled navbar over a dark hero it would
   otherwise be effectively invisible, matching the same legibility
   treatment already applied to .navbar-brand img and .nav-link above. */
.navbar:not(.scrolled) .navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

.navbar.scrolled {
  background: var(--color-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 0 rgba(0,0,0,0.03);
  border-bottom: none;
  padding: 0.6rem 0;
}

.navbar.scrolled .navbar-brand img {
  height: 26px;
}

.navbar.scrolled .nav-link:hover {
  color: var(--color-blue-deep);
}

.navbar:not(.scrolled) .nav-link:hover {
  color: #fff;
}

.navbar:focus-visible,
.navbar a:focus-visible,
.navbar button:focus-visible {
  outline: 2px solid var(--color-blue-deep);
  outline-offset: 2px;
}

.navbar:not(.scrolled) *:focus-visible {
  outline-color: var(--color-text-on-dark);
}

/* ============================================================
   CTA button — the ONE canonical CTA button style (blue background,
   white text) that every CTA site-wide references: the navbar's
   Contact Us button, the Contact-Us-modal's Send Message button, and
   every Phase 9 page's hero/closing-section CTA. Per G-09-36
   (09-UAT.md), no other stylesheet may redefine its background, text
   color, or hover treatment.
   ============================================================ */

.btn-cta {
  display: inline-block;
  background: var(--color-blue-deep);
  color: var(--color-text-on-dark);
  font-family: var(--font-bold);
  font-size: 14px;
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius-md);
  border: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-cta:hover,
.btn-cta:focus-visible {
  color: var(--color-text-on-dark);
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(46,87,122,0.35), 0 2px 6px rgba(0,0,0,0.18);
  filter: brightness(1.08);
}

.btn-cta:focus-visible {
  outline: 2px solid var(--color-blue-deep);
  outline-offset: 2px;
}

.hero-section .btn-cta {
  align-self: flex-start;
}

/* ============================================================
   Contact Us modal (new, D-80/D-81) — Bootstrap's own .modal/
   .modal-dialog/.form-control component CSS (loaded via the CDN
   bootstrap.min.css link) already handles layout/borders/focus states;
   these two rules only apply Cool-Blue typography/color tokens.
   ============================================================ */

.modal-title {
  font-family: var(--font-bold);
  color: var(--color-text);
}

.modal-body .form-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
}

.modal-contact-info {
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
}

.modal-contact-info p {
  margin: 0 0 var(--space-xs, 4px);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

/* ============================================================
   Footer (ported verbatim from
   redesign/03-cool-blue-minimal/style.css lines 525-543)
   ============================================================ */

.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-text-on-dark);
  padding: var(--space-3xl) 0;
  margin-top: var(--space-3xl);
}

.site-footer .footer-logo {
  height: 28px;
  margin-bottom: var(--space-lg);
  filter: brightness(0) invert(1);
}

.footer-contact p {
  margin: 0 0 var(--space-sm);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-on-dark);
}

/* ============================================================
   Mega-menu (new, D-72 desktop full-width panel) — #mega-menu-panel
   is nested inside #navbarNav (a DOM descendant of .navbar), so its
   position:absolute;top:100% resolves against .navbar's own
   fixed-positioning containing block regardless of nesting depth.
   ============================================================ */

/* Note (WR-02): #mega-menu-panel is a sibling of .navbar-nav at the
   #navbarNav level, not a descendant of .mega-menu-item, so a
   `.mega-menu-item { position: relative; }` rule here would have zero
   effect on the panel's positioning (see the containing-block comment
   above) — intentionally omitted rather than left as dead CSS. */

.mega-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
}

.mega-menu-chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.mega-menu-trigger[aria-expanded="true"] .mega-menu-chevron {
  transform: rotate(180deg);
}

.mega-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border-top: var(--border-subtle);
  z-index: 90;
}

.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-xl);
  padding-block: var(--space-xl);
}

.mega-menu-group-label {
  font-family: var(--font-bold);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
}

.mega-menu-icon {
  width: 20px;
  height: 20px;
  color: var(--color-blue-deep);
  grid-column: 1;
  grid-row: 1 / -1;
}

.mega-menu-item-desc {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* G-06-2 cause A fix: .mega-menu-group a is now a 2-column grid (icon in
   column 1, spanning every row via .mega-menu-icon's grid-row: 1 / -1
   above); label/badge/description are all placed in column 2, where the
   lack of an explicit grid-row on any of the three lets them auto-place
   into successive rows in DOM order (label, then badge on Coming Soon
   items only, then description) — the description always renders under
   the label on every viewport, not gated behind the mobile media query. */
.mega-menu-item-label,
.mega-menu-item-desc,
.mega-menu-group a .badge-coming-soon {
  grid-column: 2;
}

/* List/link layout reset (WR-01) — every <ul> inside a .mega-menu-group
   is a plain, unclassed list in the injected markup; without this reset
   the browser's default bullet markers/indentation render, the
   icon+label+description row has no flex alignment, and the link falls
   back to Bootstrap's default link color/underline instead of an
   explicit token. */

.mega-menu-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu-group li + li {
  margin-top: var(--space-sm);
}

.mega-menu-group a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--space-sm);
  row-gap: 2px;
  color: var(--color-text);
  text-decoration: none;
}

.mega-menu-item-label {
  font-family: var(--font-bold);
  color: var(--color-text);
}

/* ============================================================
   Coming Soon badge + disabled-link treatment (new, D-71) — the 3
   placeholder products are real <a href="#"> tags with
   aria-disabled="true"/tabindex="-1" (CHROME-04) plus this muted/badge
   treatment, never a JS-fake-disabled-but-clickable state.
   ============================================================ */

.badge-coming-soon {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 2px 8px;
  font-size: 11px;
  font-family: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  background: var(--color-border);
  border-radius: var(--radius-sm);
}

/* WR-02 fix: under the new grid layout (G-06-2 cause A) the badge sits on
   its own row in column 2, where the base rule's margin-left: var(--space-xs)
   (4px, left over from the old inline layout) misaligns it relative to the
   label/description above/below. Scoped to the mega-menu context only —
   .site-footer .badge-coming-soon (below) still uses plain inline flow,
   where the base rule's margin-left remains correct. */
.mega-menu-group a .badge-coming-soon {
  margin-left: 0;
}

.mega-menu-group--coming-soon a[aria-disabled="true"] {
  color: var(--color-text-muted);
  cursor: default;
}

.mega-menu-group--coming-soon a[aria-disabled="true"] .mega-menu-icon {
  color: var(--color-text-muted);
}

/* WR-01 fix: .mega-menu-item-label's own explicit `color: var(--color-text)`
   declaration (above) wins over this ancestor's inherited --color-text-muted
   per normal cascade rules (an element's own declaration always beats an
   inherited value). This sibling override — mirroring the .mega-menu-icon
   override above — restores D-71's muted label treatment on the 3 disabled
   Coming Soon items without touching the base .mega-menu-item-label rule,
   which must keep rendering full-strength text on the 6 live products. */
.mega-menu-group--coming-soon a[aria-disabled="true"] .mega-menu-item-label {
  color: var(--color-text-muted);
}

/* ============================================================
   Mobile (below 992px) — CHROME-03: reuse the existing
   navbar-toggler/.navbar-collapse pattern, no second independently-
   toggled mobile widget. Forces dark, legible text inside the opaque
   mobile .navbar-collapse panel regardless of .navbar.scrolled state,
   to avoid reintroducing the STATE.md-flagged G-02-4/CR-01
   mobile-legibility regression (RESEARCH.md Pitfall 6) in this fresh
   build.
   ============================================================ */

@media (max-width: 991.98px) {
  .mega-menu-panel {
    position: static;
    width: auto;
    box-shadow: none;
    border-top: none;
    z-index: auto;
  }

  /* removed: a <div> is display:block by default when shown; the
     previous `.mega-menu-panel[hidden] { display: block; }` rule
     unconditionally overrode the UA [hidden] -> display:none behavior,
     so the panel could never actually collapse on mobile (CR-01). */

  .mega-menu-panel .nav-link,
  .mega-menu-group-label,
  .mega-menu-item-desc {
    color: var(--color-text) !important;
  }

  /* G-06-2 cause B fix: once expanded, #navbarNav nests the full
     4-group/9-item mega-menu panel (which becomes position: static
     above), and Bootstrap's .navbar-collapse has no built-in max-height
     or scroll cap. Without this rule the expanded nav can grow taller
     than the viewport with nothing to scroll it into view, and
     touch-drags over it fall through to hijack page scroll instead.
     5rem approximates the collapsed navbar's own row height (no
     --navbar-height token exists in this codebase to reference
     exactly) — err generous rather than clipping content. Mobile-only:
     unscoped, this would clip the desktop .mega-menu-panel dropdown,
     whose position: absolute resolves against .navbar's containing
     block, not #navbarNav's. */
  #navbarNav {
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* WR-03 fix: without this, a touch-drag that reaches the top/bottom of
       this scroll container's own internal scroll still chains through to
       move the page behind the open mobile mega-menu — a smaller-scale
       recurrence of the "scrolls the page behind it" symptom G-06-2
       already fixed for the primary overflow case. No effect on desktop's
       .mega-menu-panel, which uses position: absolute, not an internally
       scrolling container. */
    overscroll-behavior: contain;
  }

  /* D-83 root-cause fix (Phase 7, re-diagnosed from the never-executed
     .planning/milestones/v1.0-phases/02-cool-blue-minimalist/02-06-PLAN.md
     Task 1 pattern, migrated from redesign/03-cool-blue-minimal/style.css
     lines 550-557, dropped without replacement when Phase 6 built the
     mega-menu). The collapsed .navbar-collapse panel previously had no
     opaque background of its own — Bootstrap's class provides none — so
     legibility depended on whatever happened to be behind the transparent
     panel at scroll position zero. This restores the panel's own solid
     background and forces its top-level .nav-link text/hover/focus colors
     independent of .navbar.scrolled, since the panel's background never
     changes with that state either. */
  .navbar-collapse {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    margin-top: var(--space-sm);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
  }

  /* !important required: .navbar:not(.scrolled) .nav-link (2 classes +
     :not()) out-specifies .navbar-collapse .nav-link (2 plain classes)
     without it — the pre-scroll dark-on-dark rule would keep winning. */
  .navbar-collapse .nav-link {
    color: var(--color-text) !important;
  }

  .navbar-collapse .nav-link:hover {
    color: var(--color-blue-deep) !important;
  }

  .navbar-collapse *:focus-visible {
    outline-color: var(--color-blue-deep) !important;
  }
}

/* Contact Us modal: result message shown by new-blue-design/contact-form.js */
.contact-status {
  margin: 0 0 var(--space-md, 16px);
  padding: 10px 14px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

.contact-status--success {
  background: #e7f5ee;
  color: #14613a;
}

.contact-status--error {
  background: #fdecea;
  color: #8a1c14;
}