/**
 * Shared navbar + footer, apex + blog
 * (docs/planning/2026-09-16-blog-shared-site-chrome.md).
 *
 * Moved out of marketing/css/landing.css, not duplicated -- landing.css
 * loses these rules in the same change. This is a structural-chrome
 * extraction (a fixed navbar, a full-width footer), not a component like
 * core/css/brand_button.css or core/css/page_chrome.css, but the same
 * "narrow, only what a non-apex page needs" principle applies.
 *
 * --brand-primary/--brand-accent/--brand-accent-lt are duplicated from
 * landing.css's own :root (a third copy, alongside brand_button.css's
 * second -- Sec.2.6 of the spec above: still cheaper than a load-order
 * dependency between structural chrome and whichever file happens to
 * declare the tokens).
 */
:root {
    --brand-primary:   #1A1A2E;
    --brand-accent:    #C5A059;
    --brand-accent-lt: #d4b577;
}

/**
 * Sticky footer. On a short page (e.g. a blog index or tag page with
 * only a couple of posts) .site-footer would otherwise end above the
 * viewport's bottom edge, leaving a visible gap of the page's own
 * background beneath it -- measured on /blog/ at a 900px viewport:
 * footer bottom at 802px, a 98px gap before the real 900px edge.
 *
 * `html`/`body` are bare element selectors, so they apply to every page
 * loading this file, the apex included -- unlike `main` below, they are
 * NOT self-scoping by markup shape. Measured rather than assumed safe,
 * the same discipline this file's own header comment on --brand-* and
 * the footer.site-footer rescope (further down) both apply: on the apex,
 * `<body>` becomes a flex container but not one of its 13 direct
 * children moves in y or height, and total document height is unchanged
 * (3505px both ways) -- .hero-section's own `min-height: 100vh` already
 * did the work a block-flow body did for free.
 *
 * `main` only exists on the blog templates (the apex has no <main>
 * element at all), so `flex: 1 0 auto` on it cannot affect the apex --
 * this one rule genuinely is self-scoping by markup shape, the same
 * pattern `.navbar + main` below already established.
 */
html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 1.5rem 0;
    background: transparent;
    transition: background 0.4s ease, padding 0.4s ease, backdrop-filter 0.4s ease;
}

.navbar.scrolled {
    background: rgba(26, 26, 46, 0.96);
    backdrop-filter: blur(20px);
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(197, 160, 89, 0.15);
}

/**
 * Clears the fixed navbar above so it does not paint over the first
 * in-flow content -- on the blog, the breadcrumb (Sec.2.9 of the spec:
 * measured 65px navbar height + a small safety margin against
 * font-metric variance). `margin`, not `padding`, so it adds to
 * <main>'s own `py-5` instead of replacing it. Self-scoping: the apex
 * has no <main> element at all (the navbar's next sibling there is
 * .hero-section), so this rule never applies there without an is_apex
 * branch.
 */
.navbar + main {
    margin-top: 72px;
}

.brand-logo {
    font-size: 1.45rem;
    color: white;
    letter-spacing: 0.04em;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

.brand-logo span { color: var(--brand-accent); }

.nav-link {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.2s;
    padding: 0.5rem 0.9rem !important;
}

.nav-link:hover { color: var(--brand-accent) !important; }

.btn-nav-primary {
    background: var(--brand-accent);
    color: var(--brand-primary) !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.6rem 1.4rem;
    border-radius: 12px;
    border: none;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-nav-primary:hover {
    background: var(--brand-accent-lt);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(197,160,89,0.35);
}

.btn-nav-outline {
    color: rgba(255,255,255,0.8) !important;
    border: 1px solid rgba(255,255,255,0.25);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.6rem 1.4rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-nav-outline:hover {
    border-color: var(--brand-accent);
    color: var(--brand-accent) !important;
}

/**
 * Rescoped from landing.css's bare `footer { ... }` -- a bare element
 * selector collided with blog_page.html's own
 * <footer class="blockquote-footer"> inside a quote block (BLOG-05
 * round 2, F2-1's precedent for core/css/brand_button.css). Scoping to
 * `.site-footer` lets a real site-wide footer coexist with that markup
 * on the same page.
 */
footer.site-footer {
    background: var(--brand-primary);
    color: white;
    padding: 4.5rem 0 2rem;
    border-top: 1px solid rgba(197,160,89,0.13);
}

.footer-logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.55rem;
    color: white;
    text-decoration: none;
    letter-spacing: 0.04em;
    display: inline-block;
    margin-bottom: 0.9rem;
}

.footer-logo span { color: var(--brand-accent); }

.footer-tagline {
    color: rgba(255,255,255,0.42);
    font-size: 0.88rem;
    line-height: 1.65;
    max-width: 255px;
}

.footer-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: 1.2rem;
}

.footer-link {
    color: rgba(255,255,255,0.46);
    text-decoration: none;
    font-size: 0.86rem;
    display: block;
    margin-bottom: 0.55rem;
    transition: color 0.2s;
}

.footer-link:hover { color: white; }

.footer-hr { border-color: rgba(255,255,255,0.07); margin: 3rem 0 1.5rem; }
.footer-copy { font-size: 0.78rem; color: rgba(255,255,255,0.28); }

#d2clic-link {
    text-decoration: none;
    color: var(--brand-accent);
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}