/**
 * ja_nexora — Landing page pixel-parity overlay
 * Scope: body.layout-landing (tsid=35, item-151 /landing-demo)
 * Loaded via addCustomTag from html/com_content/article/default.php
 * when a featured view's item text is NOT a canvas page AND layout=landing
 * (or detected by body.layout-landing in the featured view context).
 *
 * NOTE: This CSS is also injected via index.php for the featured view
 * (see detection below). All rules are scoped to body.layout-landing.
 *
 * Design ref: /Users/lucas/code/joomlart/pencil/nexora.pen
 * .pen frames: X9yTTB (dark/1440), QvQB2 (light/1440), FrOM0 (mobile/390)
 * Review findings: 2026-06-20
 */

/* ============================================================
   L1  [DARK-HEX-IN-LIGHT] .hl-meta hardcoded #6B7196
   .pen: Meta = $text-dim → light #888EA6 / dark #6B7196
   _nexora.scss:1927: .hl-meta { color: #6B7196; }
   ============================================================ */
body.layout-landing .hl-meta {
  color: var(--color-text-dim);
}

/* ============================================================
   L2  [DARK-HEX-IN-LIGHT] .hl-input::placeholder hardcoded #6B7196
   .pen: Input placeholder = $text-dim → light #888EA6 / dark #6B7196
   _nexora.scss:1918: .hl-input::placeholder { color: #6B7196; }
   ============================================================ */
body.layout-landing .hl-input::placeholder {
  color: var(--color-text-dim);
}

/* ============================================================
   L3  [DARK-HEX-IN-LIGHT] .quote-role uses var(--color-text-meta, #6B7196)
   --color-text-meta is undefined → always falls back to #6B7196 (dark $text-dim).
   .pen: role = $text-dim → light #888EA6 / dark #6B7196
   _nexora.scss:3300: .quote-role { color: var(--color-text-meta, #6B7196); }
   Fix: override with the defined token inside landing scope.
   ============================================================ */
body.layout-landing .acm-quote .quote-role {
  color: var(--color-text-dim);
}

/* ============================================================
   L4  [DARK-HEX-IN-LIGHT] Mini-footer copyright + legal links hardcoded #6B7196
   .pen: © text + links = $text-dim → light #888EA6 / dark #6B7196
   _nexora.scss:2082: .nexora-footer.is-mini .copyright { color: #6B7196; }
   _nexora.scss:2084: .nexora-footer.is-mini .mini-legal-links a { color: #6B7196; }
   Also catches .footer-menu links (line 1484) used by footnav-4 mod_menu output.
   ============================================================ */
body.layout-landing .nexora-footer.is-mini .copyright,
body.layout-landing .nexora-footer.is-mini .mini-legal-links a,
body.layout-landing .nexora-footer.is-mini .footer-menu a {
  color: var(--color-text-dim);
}

/* ============================================================
   L5  [OFF-BY-PX] Mini-footer inner horizontal padding 32px → 48px
   .pen: MiniFooter padding [28,48] — inner .mini-footer-inner pad-inline=48
   _nexora.scss:2078: .nexora-footer.is-mini .mini-footer-inner { padding-block: 28px; }
   Container adds 32px padding; replace with explicit 28px 48px.
   ============================================================ */
body.layout-landing .nexora-footer.is-mini .mini-footer-inner {
  padding: 28px 48px;
}

/* ============================================================
   L7  [OFF-BY-PX] Benefits/Why eyebrow letter-spacing 1.44px → 1.2px, font-size 12px → 12.5px
   .pen TsNK7.e: letterSpacing 1.2, fontSize 12.5, fontFamily $font-mono, fill $accent
   Base .eyebrow (_nexora.scss:1643): font-size: var(--fs-xs)≈12px, letter-spacing: 0.12em≈1.44px
   ============================================================ */
body.layout-landing .sec-feature-grid .eyebrow {
  font-size: 12.5px;
  letter-spacing: 1.2px;
}

/* ============================================================
   L9  MiniHeader chrome-light — NO bottom border
   .pen J2JW6d MiniHeader: $bg, padding [20,48], NO border (full header has a
   1px $border-soft bottom; landing must not). Nav/sign-in/burger are already
   hidden on body.layout-landing; only logo + theme toggle + one CTA remain.
   ============================================================ */
body.layout-landing .nexora-header {
  border-bottom: 0 !important;
}

/* ============================================================
   L10  Swappable hero VISUAL — media-field <img> (.pen AL8Ud Visual)
   The old hand-CSS .hl-visual (accent panel + inline play SVG) is replaced
   by an owner-editable media field (acm/hero style-3). The exported webp
   already carries its OWN frame/border/radius/glow inside the image, so the
   .has-img wrapper must drop the CSS panel art + border + play badge and let
   the <img> render bare (no double frame/shadow). Reads on light AND dark —
   the dark export sits on white as an intentional framed product shot.
   ============================================================ */
body.layout-landing .hl-visual.has-img {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible;
  height: auto;
  width: 920px;
  max-width: 100%;
}
body.layout-landing .hl-visual.has-img img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}