/* lexomatic site.css — per-site child layer (ENG-188 D1/D4).
   Cascade: theme tokens -> framework content.css -> this file.
   Scope: hook vocabulary only (c-{component} roots, variant-{value},
   body site-/page-type-/page- hooks). No framework-internal classnames.
   Delivered 2026-08-04, design-handoffs/2026-08-04-splash-restyle.

   This file's only job today is the splash treatment on `/`
   (body hook `page-home`): full-viewport dark page, header reduced to a
   quiet Sign in, large stacked logo, single-line footer. Everything is
   scoped to .page-home; other pages of this site render unchanged. */

/* ---------------------------------------------------------------- page frame
   The splash fills the viewport: header and footer at their intrinsic
   height, hero taking the rest. */
body.page-home {
    background: var(--dark-hero);
    color: var(--dark-section-foreground);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    text-rendering: optimizeLegibility;
}
body.page-home > main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------- header
   Transparent over the dark page, no border, not sticky, no logo.
   The chrome logo image cannot be suppressed by prop (see findings F1),
   so the logo link is hidden here and the header keeps only its actions. */
.page-home .c-header-nav {
    background: transparent;
    border-bottom: 0;
    position: static;
    flex: 0 0 auto;
}
.page-home .c-header-nav > div {
    max-width: none;
    padding: 0 clamp(1rem, 4vw, 2.5rem);
    justify-content: flex-end;
}
.page-home .c-header-nav > div > a {
    display: none; /* brand lockup: absent from the splash by design */
}

/* Sign in: the only header element. Quiet by default, azure focus ring. */
.page-home .c-header-nav > div > div > a {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--dark-section-muted);
    transition: color 0.15s ease;
}
.page-home .c-header-nav > div > div > a:hover {
    background: transparent;
    color: var(--dark-section-foreground);
}
.page-home .c-header-nav > div > div > a:focus-visible {
    outline: 2px solid var(--accent-brand);
    outline-offset: 3px;
    color: var(--dark-section-foreground);
}

/* ---------------------------------------------------------------- hero
   `hero` emits no variant hook (dark is the absence of `light`), so the
   whole treatment is scoped by .page-home instead. See findings F3. */
.page-home .c-hero {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 0 4rem;
    background: var(--dark-hero);
    color: var(--dark-section-foreground);
}
.page-home .c-hero > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.75rem, 4vw, 2.75rem);
    padding: 0 clamp(1rem, 5vw, 2rem);
}
.page-home .c-hero img {
    width: clamp(180px, 34vw, 340px);
    max-width: 100%;
    height: auto;
    margin: 0;
}
.page-home .c-hero h1 {
    margin: 0;
    max-width: 22ch;
    font-weight: 500;
    font-size: clamp(1.375rem, 4.2vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* ---------------------------------------------------------------- footer
   One centred line: brand + copyright, hairline above.
   The framework renders a 4-column grid plus a legal bar; both are
   dissolved with display: contents so their contents land in one row. */
.page-home .c-footer {
    flex: 0 0 auto;
    background: transparent;
    border-top: 1px solid var(--border-contrast);
    padding: 1.75rem 0;
    font-size: 0.8125rem;
    color: var(--dark-section-muted);
}
.page-home .c-footer > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.page-home .c-footer > div > div:first-child,
.page-home .c-footer > div > div:first-child > div {
    display: contents;
}
.page-home .c-footer > div > div:last-child {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    font-size: inherit;
    color: inherit;
}
.page-home .c-footer a {
    height: auto;
    gap: 0;
}
.page-home .c-footer a b {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--dark-section-foreground);
}
/* Chrome blurb: suppressed by prop in home.json ("blurb": ""), and the
   empty paragraph the template still emits is removed here. */
.page-home .c-footer p {
    display: none;
}

@media (max-width: 480px) {
    .page-home .c-footer > div {
        flex-direction: column;
        gap: 0.25rem;
        text-align: center;
    }
}