/*
 * App shell styles on top of Bootstrap + tokens (see tokens.css).
 * Keep this file thin — reusable patterns belong in templates/components/.
 */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    background: var(--nx-bg);
    color: var(--nx-text-900);
    font-family: var(--nx-font-body);
}

.nx-header {
    background: var(--nx-navy-900);
    color: #fff;
    padding: .75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--nx-shadow-2);
}

.nx-brand {
    font-family: var(--nx-font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .02em;
    color: #fff;
    text-decoration: none;
}

.nx-brand:hover {
    color: var(--nx-primary-tint);
}

.nx-content {
    flex: 1;
    padding: 2.5rem 1.25rem;
}

.nx-footer {
    border-top: 1px solid var(--nx-border);
    color: var(--nx-text-500);
    font-size: .85rem;
    padding: 1rem 1.25rem;
    text-align: center;
}

.btn-primary {
    --bs-btn-bg: var(--nx-primary);
    --bs-btn-border-color: var(--nx-primary);
    --bs-btn-hover-bg: var(--nx-primary-hover);
    --bs-btn-hover-border-color: var(--nx-primary-hover);
    transition: background-color var(--nx-ease), border-color var(--nx-ease);
}

/* Bootstrap stills every .btn for someone who has asked for less motion; the
   transition above is later in the cascade and would undo that (round 1015). */
@media (prefers-reduced-motion: reduce) {
    .btn-primary {
        transition: none;
    }
}

/* Accessible focus per §7A.2 rule 4 — visible on every interactive element. */
a:focus-visible, button:focus-visible, input:focus-visible, .btn:focus-visible {
    outline: 3px solid var(--nx-primary);
    outline-offset: 2px;
}

/* The secondary outline button's grey (#6C757D) reads at 4.48:1 on the page
   background, just under WCAG 1.4.3's 4.5:1 (round 974, the rendered-page
   checker). The body text scale's #334155 reads at 9.9:1. */
.btn-outline-secondary {
    --bs-btn-color: var(--nx-text-700);
    --bs-btn-border-color: var(--nx-text-500);
}

/* Bootstrap's outline primary keeps its own blue (#0D6EFD), which reads at
   4.30:1 on the page background (round 974). */
.btn-outline-primary {
    --bs-btn-color: var(--nx-primary-hover);
    --bs-btn-border-color: var(--nx-primary-hover);
    --bs-btn-hover-bg: var(--nx-primary-hover);
    --bs-btn-hover-border-color: var(--nx-primary-hover);
    --bs-btn-active-bg: var(--nx-primary-hover);
    --bs-btn-active-border-color: var(--nx-primary-hover);
}

/* The outline danger and warning buttons keep Bootstrap's own red (#DC3545,
   4.33:1 on the page background) and yellow (#FFC107, 1.56:1); both are
   under WCAG 1.4.3's 4.5:1 (round 975, the rendered-page checker on staff
   pages). They take the semantic text shades instead, 6.18:1 and 4.80:1, and
   fill with the same shade, under white text, when pressed. */
.btn-outline-danger {
    --bs-btn-color: var(--nx-red-text);
    --bs-btn-border-color: var(--nx-red-text);
    --bs-btn-hover-bg: var(--nx-red-text);
    --bs-btn-hover-border-color: var(--nx-red-text);
    --bs-btn-active-bg: var(--nx-red-text);
    --bs-btn-active-border-color: var(--nx-red-text);
}

.btn-outline-warning {
    --bs-btn-color: var(--nx-amber-text);
    --bs-btn-border-color: var(--nx-amber-text);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--nx-amber-text);
    --bs-btn-hover-border-color: var(--nx-amber-text);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--nx-amber-text);
    --bs-btn-active-border-color: var(--nx-amber-text);
}