/* ── Typography — Montserrat (self-hosted) ────────────────────────────────
   Brings the UI typeface in line with the logo (respondere_logo.svg, exported
   with Montserrat outlines) and with pulsuus.com. Weights below cover
   Bootstrap's normal/medium/semibold/bold usage across buttons, headings,
   badges, and form controls. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-latin-300-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-latin-700-normal.woff2') format('woff2');
}

:root {
    /* Typography */
    --bs-font-sans-serif: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Color palette — editorial neutrals matching pulsuus.com */
    --bs-primary: #2a2829;
    --bs-primary-rgb: 42, 40, 41;
}

/* Tabular figures keep dense numeric tables (Measurements, Results,
   Statistics) cleanly aligned under Montserrat's proportional digits. */
table {
    font-variant-numeric: tabular-nums;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    background: #e0e0da;
}

/* ── Fixed navbar/footer, scrollable content ──────────────────────────────
   #app (Blazor's root) is the three rows of MainLayout stacked vertically:
   <nav>, <main>, <footer>, in that order — plus <Tour /> and the blazor
   error banner, both position:fixed and out of flow. Making #app a
   100vh flex column with the nav/footer pinned (flex: 0 0 auto) and only
   <main> scrolling (flex: 1 1 auto; overflow-y: auto) keeps the navbar and
   footer fully visible at all times, like a fixed app header/footer —
   regardless of viewport height, zoom level, or whether the navbar has
   wrapped to two lines. */
#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

#app > nav.navbar,
#app > footer {
    flex: 0 0 auto;
}

#app > main {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0; /* allow shrinking below content height so overflow-y works */
}

/* ── Responsive header-row alignment ──────────────────────────────────────
   Toggled by wwwroot/js/navbar-layout.js when the right-hand group of a
   two-group header row (MainLayout navbar, Workspace title row) wraps onto
   its own line. That group sits at the right edge of the row before
   wrapping (via me-auto/ms-auto on the adjacent group); margin-left: auto
   keeps it pinned to the right edge of its own line after wrapping too,
   instead of snapping to the left or centering. */
.row-wrapped {
    margin-left: auto;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: flex;
    justify-content: space-between;
    opacity: 1;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
}