/*
 * Components: the small number of reusable pieces this phase actually has.
 *
 * Skip link, navigation, language switcher, buttons, form fields, flash
 * messages. That is the list, and it is short on purpose — Phase 0 needs a
 * clean foundation, not a framework. There is no utility class system here, no
 * theme switcher and no dark mode: each of those is a commitment that would
 * have to be honoured by every component added for the next five years.
 *
 * Every value resolves to a token. No hex codes, no magic pixel sizes.
 */

/* ---- skip link ---------------------------------------------------------- */

/*
 * Off-screen until focused, rather than display:none. A hidden element is not
 * focusable, so display:none would remove the very thing this exists for.
 */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10;
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* ---- header brand ------------------------------------------------------- */

.site-header__brand {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

/* ---- navigation --------------------------------------------------------- */

.site-nav__list,
.locale-switch__list {
    display: flex;
    flex-wrap: wrap;          /* wraps to a second line rather than overflowing */
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav a,
.locale-switch a {
    display: inline-block;
    /* A comfortable tap target on a phone without making the header tall. */
    padding-block: var(--space-1);
    color: var(--color-text);
}

.locale-switch {
    font-size: var(--font-size-sm);
}

/* The logout control is a POST form, never a link — a GET logout can be fired
   by an <img> tag on any page on the internet. This makes the submit button
   read as the navigation item it is, without pretending to be a link to
   assistive technology: it is still a button, and it still posts. */
.site-nav__logout {
    display: inline;
    margin: 0;
}

/* ---- buttons ------------------------------------------------------------ */

.button {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: var(--font-weight-medium);
    text-align: center;
    text-decoration: none;

    /* No fixed width. "Iniciar sesión" is half again as long as "Sign in", and
       a button sized for English clips it. */
    max-width: 100%;
}

.button:hover {
    background: var(--color-primary-hover);
    color: var(--color-primary-contrast);
}

/* Full width on a phone, natural width once there is room. A stretched button
   is easier to hit with a thumb; a stretched button on a wide screen looks
   broken. */
.button--block {
    display: block;
    width: 100%;
}

@media (min-width: 40em) {
    .button--block {
        display: inline-block;
        width: auto;
    }
}

/* A button that must read as navigation, for the logout form. */
.button--link {
    padding: var(--space-1) 0;
    border: 0;
    background: none;
    color: var(--color-text);
    font-weight: var(--font-weight-normal);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.button--link:hover {
    background: none;
    color: var(--color-primary-hover);
}

/* ---- form fields -------------------------------------------------------- */

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

.field__label {
    margin-bottom: var(--space-1);
}

.field__hint,
.field__error {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-sm);
}

.field__hint {
    color: var(--color-text-muted);
}

.field__error {
    color: var(--color-danger);
    font-weight: var(--font-weight-medium);
}

/* Colour is not the only signal: a red border alone excludes anyone who cannot
   distinguish it, so the error text carries the meaning and the border
   reinforces it. */
.field--invalid .field__input {
    border-color: var(--color-danger);
    border-width: 2px;
}

/* ---- flash messages ----------------------------------------------------- */

.flash-list {
    margin-bottom: var(--space-5);
}

.flash {
    max-width: var(--measure);
    margin: 0 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.flash--success {
    border-left-color: var(--color-success);
    background: var(--color-success-surface);
}

.flash--error {
    border-left-color: var(--color-danger);
    background: var(--color-danger-surface);
}

.flash--notice {
    border-left-color: var(--color-border-strong);
    background: var(--color-notice-surface);
}

/* ---- supporting text ---------------------------------------------------- */

.lead {
    font-size: var(--font-size-lg);
}

.note {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ---- simple lists used by the account page ------------------------------ */

.stack {
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.stack > li {
    margin-bottom: var(--space-2);
}

/* ---- employer workspace and company profile (Phase 1, Block 3) ----------- */

/*
 * A CARD IS A GROUPING, NOT A LAYOUT SYSTEM. The workspace shows four or five
 * unrelated things — identity, trust, next steps, colleagues — and a person
 * scanning on a phone needs to see where one ends and the next begins. It is a
 * border and a background; nothing here positions anything, which is layout.css's
 * job.
 */
.card {
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
}

.card > :first-child {
    margin-top: 0;
}

.card > :last-child {
    margin-bottom: 0;
}

.company-name {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

/*
 * A FIXED BOX WITH `object-fit: contain`, so a wide logo and a tall one both fit
 * without being distorted. The width and height attributes are also on the
 * element itself: the space is reserved before the image loads, which stops the
 * page jumping under someone's thumb on a slow connection.
 */
.company-logo {
    display: block;
    /*
     * NO FIXED WIDTH OR HEIGHT. Phase 0's Spanish-expansion rule forbids them in
     * this stylesheet and it is right to: a box measured in pixels is a box that
     * stops fitting the moment someone raises their text size. `max-width` in
     * rem scales with the reader's own setting, and `aspect-ratio` keeps the
     * square without nailing either dimension down.
     */
    max-width: 7.5rem;
    aspect-ratio: 1 / 1;
    margin: 0 0 var(--space-3);
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

/*
 * THE BADGE CARRIES NO MEANING ON ITS OWN. It is neutral until verification is
 * actually held, and the words inside it say which tier — colour is never the
 * only signal, because a colour-blind reader and a screen-reader user both get
 * nothing from it.
 */
.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.badge--verified {
    border-color: var(--color-success);
    background: var(--color-success-surface);
}

.trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin: 0 0 var(--space-3);
}

/*
 * WRAPS BY DEFAULT. Spanish button text is reliably longer than English, and a
 * row of actions that only fits because the English labels are short is a layout
 * that breaks in the product's source language.
 */
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin: 0;
}

.checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist__item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.checklist__item:last-child {
    border-bottom: 0;
}

/* The state is a WORD, not a tick: a symbol alone is not a label. */
.checklist__state {
    min-width: 5.5rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.checklist__item--done .checklist__state {
    color: var(--color-success);
}

textarea.field__input {
    min-height: 10rem;
    font-family: inherit;
    resize: vertical;
}