/* Shared site chrome: the navbar and footer that bookend every page.
   Both use the same light-grey to dark-grey gradient, mirrored so the page
   opens and closes on the lighter tone. Loaded by every layout, which is why
   these rules live here rather than in a per-layout stylesheet. */

:root {
    --chrome-light: #f5f5f5;
    --chrome-dark: #b8b8b8;
    --chrome-edge: #a6a6a6;
}

/* --- Navbar --- */

.new-navbar {
    background: linear-gradient(to bottom, var(--chrome-light) 0%, var(--chrome-dark) 100%);
    color: var(--tla-ink, #1f2330);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--chrome-edge);
    box-shadow:
        rgba(0, 0, 0, 0.06) 0px 2px 1px,
        rgba(0, 0, 0, 0.07) 0px 4px 2px,
        rgba(0, 0, 0, 0.07) 0px 8px 4px,
        rgba(0, 0, 0, 0.06) 0px 16px 8px;
}

.new-navbar .navbar-brand,
.new-navbar .nav-link,
.new-navbar .navbar-toggler {
    color: var(--tla-ink, #1f2330);
}

.new-navbar .navbar-brand {
    font-weight: 700;
}

.new-navbar .navbar-toggler {
    border: 0;
    font-size: 1.5rem;
}

.new-navbar .nav-link:hover,
.new-navbar .nav-link:focus-visible,
.new-navbar .nav-link.active {
    color: #000;
}

/* --- Footer --- */

.footer-bg {
    /* Mirrored: dark where it meets the page, light at the outer edge. */
    background: linear-gradient(to bottom, var(--chrome-dark) 0%, var(--chrome-light) 100%);
    color: var(--tla-ink, #1f2330);
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--chrome-edge);
    box-shadow:
        rgba(0, 0, 0, 0.06) 0px -2px 1px,
        rgba(0, 0, 0, 0.07) 0px -4px 2px,
        rgba(0, 0, 0, 0.07) 0px -8px 4px,
        rgba(0, 0, 0, 0.06) 0px -16px 8px;
}

.footer-bg a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.footer-bg a:hover,
.footer-bg a:focus-visible {
    color: #000;
    text-decoration: underline;
}

/* The accent reads as a highlight against the grey rather than as body text. */
.footer-bg .fa-envelope {
    color: var(--tla-accent-dark, #d9a800);
}

.footer-copyright {
    font-size: 0.75rem;
    opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
    .footer-bg a {
        transition: none;
    }
}