/* ══════════════════════════════════════════════════════════════════════
   LOMAinsights shared public navigation
   ----------------------------------------------------------------------
   One stylesheet owns the public header and footer on every marketing
   surface (home, assessment, gallery, vertical pages, data layer, 404,
   industry demo). The homepage dark header is the standard.

   Contract: markup uses the .ln-* classes only. Legacy .hm-/.rb-/.in-
   container classes stay on <header>/<footer> so existing print and
   layout rules keep working; this file is loaded last so it wins ties.
   Selectors are compound (.ln-header .ln-brand) so they also beat the
   .ribbon-public a link colour, which otherwise turns the brand teal.

   No JavaScript. Static markup, repeated per page, guarded by
   tests/navigation.test.mjs.
   ══════════════════════════════════════════════════════════════════════ */

/* Keep both scroll canvases dark; the content wrapper retains light gutters.
   Flow-root prevents child margins from collapsing outside that wrapper. */
.ln-page { background: var(--hm-ink); }
.ln-page > body { background: var(--hm-ink); }

.ln-content {
    display: flow-root;
    width: 100%;
    background: var(--hm-paper);
}

.ln-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--hm-ink);
    border-bottom: 1px solid var(--hm-line-ink);
    color: var(--hm-on-ink);
}

.ln-header .ln-header-inner {
    width: 100%; max-width: var(--hm-max); margin: 0 auto;
    padding-inline: clamp(20px, 5vw, 56px);
    display: flex; align-items: center; gap: var(--hm-5);
    min-height: 68px;
}

.ln-header .ln-brand {
    display: inline-flex; align-items: center; gap: var(--hm-3);
    text-decoration: none; color: var(--hm-on-ink);
    font-weight: 600; letter-spacing: -0.02em;
    min-height: 44px;
}
.ln-header .ln-brand img { width: 30px; height: 30px; flex: none; }
.ln-header .ln-brand span { white-space: nowrap; }

.ln-header .ln-nav { margin-left: auto; display: flex; align-items: center; gap: var(--hm-5); }
.ln-header .ln-nav a {
    color: var(--hm-on-ink-muted); text-decoration: none; font-size: var(--hm-small);
    display: inline-flex; align-items: center; min-height: 44px;
    padding: var(--hm-2) 0; border-bottom: 1px solid transparent;
    white-space: nowrap;
    transition: color var(--hm-dur-hover) var(--hm-ease), border-color var(--hm-dur-hover) var(--hm-ease);
}
.ln-header .ln-nav a:hover { color: var(--hm-on-ink); border-bottom-color: var(--hm-teal); }
.ln-header .ln-nav a[aria-current="page"] { color: var(--hm-on-ink); border-bottom-color: var(--hm-lavender); }

.ln-header .ln-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--hm-2);
    margin-left: var(--hm-2); min-height: 44px; padding: var(--hm-2) var(--hm-5);
    border-radius: var(--hm-radius-pill); border: 1px solid transparent;
    background: linear-gradient(105deg, var(--hm-teal-deep) 0%, var(--hm-indigo) 100%);
    color: #fff; text-decoration: none; white-space: nowrap;
    font: inherit; font-size: var(--hm-micro); font-weight: 600; letter-spacing: 0.01em;
    transition: transform var(--hm-dur-hover) var(--hm-ease);
}
.ln-header .ln-cta:hover { transform: translateY(-2px); color: #fff; }

.ln-header :where(a):focus-visible {
    outline: 2px solid var(--hm-lavender); outline-offset: 3px; border-radius: var(--hm-radius-sm);
}

/* ── Footer ───────────────────────────────────────────────────────── */
.ln-footer {
    background: var(--hm-ink); color: var(--hm-on-ink-muted);
    padding-block: var(--hm-6); border-top: 1px solid var(--hm-line-ink);
    font-size: var(--hm-small);
}
.ln-footer .ln-footer-inner {
    width: 100%; max-width: var(--hm-max); margin: 0 auto;
    padding-inline: clamp(20px, 5vw, 56px);
    display: flex; flex-wrap: wrap; gap: var(--hm-4) var(--hm-5);
    align-items: center; justify-content: space-between;
}
.ln-footer .ln-footer-nav { display: flex; flex-wrap: wrap; gap: var(--hm-4) var(--hm-5); }
.ln-footer .ln-footer-nav a {
    color: var(--hm-on-ink-muted); text-decoration: none;
    display: inline-flex; align-items: center; min-height: 44px;
}
.ln-footer .ln-footer-nav a:hover { color: var(--hm-on-ink); text-decoration: underline; }
.ln-footer .ln-footer-nav a[aria-current="page"] { color: var(--hm-on-ink); }
.ln-footer :where(a):focus-visible {
    outline: 2px solid var(--hm-lavender); outline-offset: 3px; border-radius: var(--hm-radius-sm);
}

/* ── Mobile: row 1 logo + CTA, row 2 primary nav ──────────────────── */
@media (max-width: 760px) {
    .home, .ribbon-public { --hm-anchor-offset: 137px; }

    .ln-header .ln-header-inner { flex-wrap: wrap; gap: var(--hm-3); padding-block: var(--hm-3); }
    .ln-header .ln-nav {
        order: 3; width: 100%; margin-left: 0; gap: var(--hm-4);
        font-size: var(--hm-micro);
    }
    .ln-header .ln-nav a { font-size: var(--hm-micro); }
    .ln-header .ln-cta { margin-left: auto; order: 2; }
}

@media (max-width: 380px) {
    .ln-header .ln-header-inner { column-gap: var(--hm-2); }
    .ln-header .ln-brand { font-size: var(--hm-small); }
    .ln-header .ln-brand img { width: 26px; height: 26px; }
    .ln-header .ln-cta { padding-inline: var(--hm-4); }
    .ln-header .ln-nav { justify-content: space-between; gap: var(--hm-3); }
}

/* ── Print: paper canvas, never the ink one ───────────────────────── */
@media print {
    .ln-page, .ln-page > body, .ln-content { background: #fff; }
}