/* ── Website Studio product chrome ──────────────────────────────────
   Site-wide (not homepage-only) presentation for website-studio.dev -
   loaded on every public Website Studio page via templates/base.html's
   `{% if site.key == 'website-studio' %}` conditional `extra_css` fill,
   because the nav/footer markup these classes style (.nav-brand,
   .nav-links) is shared, structural chrome rendered by every Website
   Studio public page (Use Cases, Articles, Pricing/offering detail),
   not just the homepage - see products/website_studio/static/website_studio/
   homepage.css for the homepage-only composition.

   This file previously lived at shared/design-system/static/design-system/
   components/product-narrative.css - filed under the *shared* design
   system despite being consumed nowhere except this product's own
   templates. Relocated here as an ownership fix: a component exists
   only because Website Studio needs it, so Website Studio owns it. The
   shared design-system keeps only genuinely cross-product primitives
   (tokens, .card, .btn-primary/-secondary, .hero/.section, ...). */

/* ── Product wordmark (nav-brand modifier) ──────────────────────
   A small, deliberately restrained mark - not a logo asset. */
.nav-brand--product {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.nav-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--color-primary);
    padding: 0.2em 0.45em;
    border-radius: var(--radius-sm);
    line-height: 1;
}

/* Product wordmark label - the same restrained red mono/technical
   treatment the homepage hero used to repeat as its own eyebrow (now
   removed from the hero, since the nav already carries this identity -
   see home.html's comment). Plain text at this size otherwise reads as
   a personal-site name, not a product wordmark. */
.nav-brand-label {
    font-family: var(--font-mono);
    font-size: var(--type-small-size);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* ── Product nav - "Get Started" reads as a compact CTA pill, not
   plain bold text (personal's .nav-emphasis stays a text-weight-only
   treatment; this modifier only applies inside .nav-links--product,
   the class templates/base.html adds only for site.key ==
   'website-studio'). A software-product nav puts its primary action
   in a filled control, not a heavier link among peers. ─────────────── */
.nav-links--product a.nav-emphasis {
    font-weight: var(--type-label-weight);
    color: #fff;
    background: var(--color-primary);
    padding: 0.4rem 1rem;
    border-radius: var(--radius-sm);
    border-bottom-color: transparent;
}

.nav-links--product a.nav-emphasis:hover {
    background: var(--color-primary-hover);
    color: #fff;
}

.nav-links--product a.nav-emphasis.is-active {
    color: #fff;
    border-bottom-color: transparent;
}

/* ── Disabled / placeholder CTA ──────────────────────────────────
   A CTA slot that isn't wired to anything yet ("View Demo" - the real
   demo is Issue #50, deliberately deferred). A <span>, never an
   <a>/<button> - there is genuinely nothing to activate. Muted, not a
   dimmed copy of .btn-secondary, so it doesn't read as "broken button". */
.btn-disabled {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--type-label-weight) var(--type-small-size) / var(--type-small-line-height) var(--font-sans);
    padding: 0.6rem 1.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    cursor: not-allowed;
}