/* The page shell: header, main column and footer.
 *
 * These follow the other Kolekt applications exactly (Epr Wizard's layout.css). A sign-in sends a
 * person from an application to Account and back, and they should not feel they have crossed into a
 * different company: a white sticky header, the Kolekt mark on the left, navy links that go yellow on
 * hover, and a quiet transparent footer rather than a heavy dark bar. */

/* --- Header -------------------------------------------------------------- */
.page-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6);
    background-color: var(--color-surface);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.page-header[hidden] { display: none; }

/* One number drives the whole lockup. --brand-h is local to this block rather than a token: it is
 * a measurement of one component, and tokens.css is the only :root in the project. */
.page-header__brand {
    --brand-h: 2.25rem;
    /* Proportional, not var(--sp-2): the mark and the name have to keep their spacing when the
       lockup steps down, or the gap grows visibly wider than the letters beside it. */
    display: inline-flex; align-items: center; gap: calc(var(--brand-h) * 0.22);
    /* The lockup does not give ground: a truncated brand is not a brand. */
    flex-shrink: 0;
    color: var(--c-navy); font-weight: 600; text-decoration: none;
}
.page-header__brand[hidden] { display: none; }
.page-header__brand:hover { text-decoration: none; }

/* Height fixed to the header; width auto keeps the aspect ratio (264x256, near square). */
.page-header__logo { display: block; flex: 0 0 auto; height: var(--brand-h); width: auto; }

/* The product name is typed in the project's own font, not drawn: the mark carries the brand, and
 * typed words are one font, one size and one baseline by construction rather than by measurement.
 * 0.62 of the lockup height is a cap height that matches the mark's optical weight; line-height:1
 * because the default leading would make the text box taller than the mark and push the header
 * open. */
.page-header__brand-name {
    font-size: calc(var(--brand-h) * 0.62);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--c-navy);
}

/* What stands on the right of the header: for now the one link to signing in. */
.page-header__nav-link {
    font-family: inherit;
    font-size: var(--fs-300);
    font-weight: 500;
    color: var(--c-navy);
    text-decoration: none;
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}
.page-header__nav-link:hover {
    background: var(--c-yellow);
    color: var(--c-navy);
    text-decoration: none;
}

/* --- Main ---------------------------------------------------------------- */
.site-main { flex: 1 0 auto; padding: var(--sp-6) 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-4); }
/* A page is one column, centred, at every width. */
.container--page { max-width: var(--container-page); }
/* A form is one column of short fields; the full container turns it into a ribbon. */
.container--tight { max-width: 26rem; }

/* Things one under the other, each as wide as the column, one gap between them. */
.stack { display: grid; gap: var(--sp-3); }
.stack[hidden] { display: none; }

/* --- Footer --------------------------------------------------------------
 * Quiet by design: the footer carries a line of text, not a slab of colour. */
.footer { background: transparent; }
.footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
}
.footer__text {
    margin: 0;
    font-weight: 500;
    font-size: var(--fs-200);
    color: var(--c-navy);
}

/* --- Narrow screens ------------------------------------------------------
 * 1219px is the family's breakpoint: the width below which the other applications fold their
 * navigation behind a burger. Account has no navigation to fold, but its lockup and padding step
 * down at the same width, so the brand is the same size on both sides of a sign-in. The link gets
 * the padding of a link in the applications' navigation panel: a target a thumb hits (48px). */
@media (max-width: 1219px) {
    .page-header { padding: var(--sp-3) var(--sp-4); }
    .page-header__brand { --brand-h: 1.75rem; }
    .page-header__nav-link { padding: var(--sp-3); font-size: var(--fs-300); }
}
/* On a phone the name may take a second line instead of standing wider than the screen - which
   there widens the whole layout and cuts every page off on the right. Wrapping is not truncating:
   both words stay. */
@media (max-width: 40rem) {
    .page-header__brand { flex-shrink: 1; min-width: 0; }
    .page-header__brand-name { white-space: normal; }
}