/*
 * luminex-nav.css — Master nav matching digistore-mock-client header pattern.
 *
 * Layout:
 *
 *   [owl 48px gold]  NexaCore         │   [shield] Blue Team
 *                    ─────────        │
 *                    AI Security Labs │
 *
 * Reference: ~/digistore/digistore-mock-client/frontend-v2/src/components/
 *   - Sidebar.tsx — brand block (owl + DigiStore / GRC Labs)
 *   - Layout.tsx — page label "DigiStore Security Assessment" with Shield icon
 *
 * Brand block contains the fictional customer (NexaCore) over the Luminex
 * product (AI Security Labs). The page label on the right names the lab/section.
 *
 * Per brand-identity-enforcer non-negotiables:
 *   NR-1  — owl mark in every authenticated nav (.owl-gold filter, brand gold)
 *   NR-2  — brand name "Luminex Learning" present (alt text on owl image)
 *   NR-10 — owl always brand gold, never product accent
 */

.luminex-nav {
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  gap: var(--space-3);
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 72px;
}

.luminex-nav__owl {
  height: 48px;
  width: auto;
  flex-shrink: 0;
}

.luminex-nav__brand-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.luminex-nav__customer-name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.luminex-nav__hairline {
  height: 1px;
  background: var(--color-border-strong);
  width: 100%;
}

.luminex-nav__product-name {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
}

.luminex-nav__spacer { flex: 1; }

/* Page label — the right-side context indicator (parallels "DigiStore
 * Security Assessment" in digistore Layout.tsx). Shield icon + section name. */
.luminex-nav__page-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
}

.luminex-nav__page-icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent-aisl-highlight);
  flex-shrink: 0;
}

.luminex-nav__page-name {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
}

.luminex-nav__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
  padding-left: var(--space-3);
}

@media (max-width: 768px) {
  .luminex-nav { min-height: 64px; padding: var(--space-2) var(--space-3); }
  .luminex-nav__owl { height: 40px; }
  .luminex-nav__page-name { font-size: var(--text-base); }
  .luminex-nav__page-icon { width: 16px; height: 16px; }
  .luminex-nav__meta { display: none; }
}

/*
 * Hero subdued — the framework's <header class="hero"> becomes a section
 * sub-header below the master nav.
 */
.hero { padding-top: var(--space-6); padding-bottom: var(--space-5); }
.hero__title { font-family: var(--font-sans); letter-spacing: var(--tracking-tight); }
.hero__sub {
  /* "NexaCore Technologies" is the in-product attack target, not a brand. */
  color: var(--color-text-secondary);
  font-weight: var(--font-normal);
}

/*
 * Active tab + primary CTA already pick up AISL violet via the bridge
 * (--blue → --color-accent-aisl-highlight). No extra rules needed here.
 */