/*
 * Public law firm site renderer base styles.
 *
 * Static SSR only (ADR-0002): no Blazor circuit, no WASM payload. These styles are the
 * default theme; a per-tenant theme overrides the --semantic-* layer at render time so
 * one partner's branding cannot alter another's.
 *
 * Long-form legal content uses the serif family, because readability at length matters
 * more than neutrality on pages a prospective client actually reads.
 */

@import url('css/tokens.css');

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-md);
    line-height: var(--font-lineHeight-normal);
    color: var(--semantic-text);
    background-color: var(--semantic-surface);
}

h1, h2, h3 {
    margin: 0 0 var(--space-4) 0;
    font-family: var(--semantic-font-heading);
    line-height: var(--font-lineHeight-tight);
    font-weight: var(--font-weight-semibold);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }

a {
    color: var(--semantic-primary);
}

a:hover {
    color: var(--semantic-primary-hover);
}

:focus-visible {
    outline: var(--border-focus) solid var(--semantic-focus-ring);
    outline-offset: var(--border-focus);
}

/* THE HEADING BLAZOR FOCUSES IS NOT A CONTROL (owner report, 2026-09-25).
   FocusOnNavigate in Routes.razor moves focus to the page's h1 after every navigation, the first
   load included, so a screen reader announces the new page. Focus set by script with no pointer
   behind it counts as :focus-visible, so the rule above drew a ring round the first block of every
   page until the visitor clicked elsewhere. The template's own stylesheet cancels it for the same
   reason; ours had dropped that line. Focus still moves, only the ring on a non-interactive
   heading goes; every real control keeps its ring (WCAG 2.4.7 concerns operable components). */
h1:focus {
    outline: none;
}


.site-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--measure-site);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5);
}

/* Long-form article body. The reading face is a semantic role (E1-F3-S10), serif by default,
   so a skin can choose the type a firm's articles are read in without a stylesheet of its own. */
.prose {
    font-family: var(--semantic-font-reading);
    font-size: var(--font-size-lg);
    line-height: var(--font-lineHeight-relaxed);
}

.prose p {
    margin: 0 0 var(--space-5) 0;
}

/*
 * Jurisdiction-derived disclaimers injected by the compliance engine at publish time.
 * Visually quiet but never hidden: several jurisdictions require these to be
 * conspicuous, so they must not be collapsed, truncated, or rendered below the fold
 * by a theme.
 */
.legal-disclaimer {
    margin-top: var(--space-6);
    padding: var(--space-4);
    border-top: var(--border-hairline) solid var(--semantic-border);
    font-size: var(--font-size-sm);
    line-height: var(--font-lineHeight-snug);
    color: var(--semantic-text-muted);
}

.site-footer {
    padding: var(--space-5);
    background-color: var(--semantic-surface-sunken);
    border-top: var(--border-hairline) solid var(--semantic-border);
    font-size: var(--font-size-sm);
    color: var(--semantic-text-muted);
}

/* Shown beside the outcome it qualifies, not in the page footer. A qualification a reader
   has to scroll to find is one they will not read, and this is the wording that stops a
   past outcome reading as a promise of a similar one. */
.case-result-disclaimer {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border-left: var(--border-marker) solid var(--semantic-border-strong);
    background-color: var(--semantic-surface-sunken);
    color: var(--semantic-text);
    font-size: var(--font-size-sm);
}

/* Required disclosures. Rendered by the layout so no page can omit them, and styled here
   rather than by a theme so nothing later collapses or hides what a regulator requires.
   Every value resolves through a design token (contract item 11). */
.site-regulator {
    font-size: var(--font-size-sm);
    color: var(--semantic-text-muted);
    margin-bottom: var(--space-2);
}

.site-complaints {
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
}

.site-complaints h2 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
}

/* The enquiry form. Every value resolves through a design token (contract item 11). */
.contact-intro {
    margin-bottom: var(--space-5);
    color: var(--semantic-text-muted);
}

.contact-sent {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--semantic-success-subtle);
    color: var(--semantic-success);
}

.contact-problem {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--semantic-danger-subtle);
    color: var(--semantic-danger);
}

.contact .field {
    display: block;
    margin-bottom: var(--space-4);
}

.contact .field span,
.contact .field label {
    display: block;
    margin-bottom: var(--space-1);
    font-weight: var(--font-weight-medium);
}

.contact .field input,
.contact .field textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    /* The same edge as .field input, for the same reason: at --semantic-border it measured
       1.30:1, so the message box a prospective client types into was nearly invisible. */
    border: var(--border-hairline) solid var(--semantic-border-control);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-family: var(--font-family-sans);
}

/*
 * A refused enquiry, said in a way somebody can act on (E3-F3-S9).
 *
 * The summary is a list of links, each one pointing at the field that failed, because a person
 * re-reading their own form should not have to work out which sentence belongs to which box.
 * Not hidden, not collapsed and not below the button: several jurisdictions require the enquiry
 * route to be usable, and a refusal nobody can find is a route that is not.
 */
.contact .validation-errors {
    margin: 0 0 var(--space-5) 0;
    padding: var(--space-4);
    border-left: var(--border-marker) solid var(--semantic-danger);
    border-radius: var(--radius-md);
    background: var(--semantic-danger-subtle);
    color: var(--semantic-danger);
    list-style: none;
}

.contact .validation-errors li + li {
    margin-top: var(--space-2);
}

/* The message beside the field itself, for somebody working through the form in order. */
.contact .validation-message {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--semantic-danger);
}

/* Practice areas. Every value resolves through a design token (contract item 11). */
.practice-area-list {
    list-style: none;
    padding: 0;
    margin: var(--space-5) 0 0;
}

.practice-area {
    padding: var(--space-3) 0;
    border-bottom: var(--border-hairline) solid var(--semantic-border);
}

/* Indented so the hierarchy is visible without a nested list, which a screen reader
   announces as a second list rather than as a narrowing of the first. */
.practice-area.depth-2 {
    padding-left: var(--space-5);
}

.practice-area-jurisdictions {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--semantic-text-muted);
}

/* Who does the work on a practice area. Every value resolves through a design token. */
.practice-area-people {
    margin-top: var(--space-5);
}

.practice-area-people ul {
    list-style: none;
    padding: 0;
}

.practice-area-people li {
    padding: var(--space-2) 0;
}

.practice-area-person-title {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--semantic-text-muted);
}

/* What the firm has written on an area of law, and the link back from an article to it.
   A visitor navigates by subject; publication date is how a reader judges currency, not how
   they find the thing. */
.practice-area-reading {
    margin-top: var(--space-6);
}

.practice-area-article-date {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
}

.article-area {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
}