/* ═══════════════════════════════════════════════════════════════
   landing-overrides.css  (v2)
   Resolves collisions between style.css and the redesigned index.html inline <style>.

   LOAD ORDER in <head> — later wins at equal specificity, so this must be LAST:
     1. <link rel="stylesheet" href="style.css">
     2. <style> …inline CSS from index.html… </style>
     3. <link rel="stylesheet" href="landing-overrides.css">
   landing-patches.js logs a console warning if the order is wrong.
   ═══════════════════════════════════════════════════════════════ */

/* Single source of truth for the fixed app-nav height (inline CSS uses 68px, 64px ≤760px). */
:root { --app-nav-height: 68px; }
@media (max-width: 760px) { :root { --app-nav-height: 64px; } }

/* 1. `hidden` must win over `.sys-status-bar{display:flex}`. The only element using the
      attribute in index.html is the status bar; app.js toggles style.display, not [hidden]. */
[hidden] { display: none !important; }

/* 2. Old centred hero leaking into the dark hero (style.css: padding 140px 40px 80px, centred). */
.landing-hero { padding: 0; text-align: left; border-bottom: 0; }
.landing-hero-media { aspect-ratio: auto; }

/* 3. Old gold pill (background/border/padding) leaking onto the dark-hero eyebrow. */
.landing-tag { background: transparent; border: 0; border-radius: 0; padding: 0; margin-bottom: 0; }

/* 4. Landing nav: strip style.css white bar, border and shadow. */
.landing-nav { background: transparent; border-bottom: 0; box-shadow: none;
               -webkit-backdrop-filter: none; backdrop-filter: none; }

/* 5. Architecture diagram: style.css node text is near-black; panel is dark green. */
.arch-diagram .arch-node-text { color: #eef5ee; font-weight: 500; }
.arch-diagram .arch-node-icon { color: #b8f36b; }
.arch-diagram .arch-node { border-width: 1px; }
.arch-diagram .arch-engine,
.arch-diagram .arch-output-node,
.arch-diagram .arch-input { border-left-width: 1px; }

/* 6. --text-2 is NOT defined globally. Every light-background use is already overridden by the
      inline CSS, and defining it as dark grey would make the only remaining use —
      `.nav-tab:hover .nav-tab-sub` in style.css — near-invisible on the dark app nav.
      Scope an explicit light value to the dark nav instead. */
#app-nav .nav-tab:hover .nav-tab-sub,
#app-nav .nav-tab.active .nav-tab-sub { color: #c7d4c8; opacity: 1; }

/* 7. Tablet gap: style.css hides .nav-center (!important) at ≤900px; show the burger there.
      The desktop nav and burger never appear together (nav-center is hidden at the same width). */
@media (max-width: 900px) {
  #app-nav .nav-burger { display: block; }
  #app-nav .nav-right .nav-badge,
  #app-nav .nav-right .nav-ver { display: none; }       /* free space for the burger */
}

/* 8. Offsets driven by the shared variable. #demo-banner keeps !important only because
      index.html sets `top:56px` in a style attribute — remove that attribute and this
      !important can go. */
#demo-banner { top: var(--app-nav-height) !important; }
.mobile-menu { top: var(--app-nav-height); max-height: calc(100vh - var(--app-nav-height)); }

/* 9. Visible keyboard focus on app-nav controls. */
#app-nav .nav-tab:focus-visible,
#app-nav .nav-burger:focus-visible,
.mobile-menu .nav-tab:focus-visible { outline: 3px solid #93d85d; outline-offset: 2px; }