/**
 * NB NOW — Design tokens (homepage + shared variable source)
 * Variables are global; layout/reset rules stay inside .nbnow-homepage to avoid breaking legacy theme pages.
 */

:root {
    --nbnow-navy: #12163d;
    --nbnow-red: #f05144;
    --nbnow-purple: #472e8c;
    --nbnow-offwhite: #f8f9fa;
    --nbnow-gray: #e5e7eb;
    --nbnow-gray-400: #9ca3af;
    --nbnow-gray-500: #6b7280;
    --nbnow-gray-600: #4b5563;
    --nbnow-gray-700: #374151;
    --nbnow-white: #ffffff;

    /* Headlines: Nickel Gothic Variable Wide Oblique → Poppins Black Italic */
    --nbnow-font-heading: "Nickel Gothic Variable Wide Oblique", "Poppins", sans-serif;
    /* Body/UI: Neue Haas Grotesk Display Pro (Typekit) → Inter */
    --nbnow-font-body: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter", sans-serif;

    --nbnow-space-1: 0.25rem;
    --nbnow-space-2: 0.5rem;
    --nbnow-space-3: 0.75rem;
    --nbnow-space-4: 1rem;
    --nbnow-space-6: 1.5rem;
    --nbnow-space-8: 2rem;
    --nbnow-space-10: 2.5rem;
    --nbnow-space-12: 3rem;
    --nbnow-space-16: 4rem;
    --nbnow-space-24: 6rem;

    /* Align with `.nbnow-header__inner` max-width (1200px) so rails match the nav bar */
    --nbnow-container-max: 75rem;
    --nbnow-container-px: 1rem;

    --nbnow-transition-fast: 200ms ease;
    --nbnow-transition-base: 300ms ease;
    --nbnow-transition-slow: 700ms ease-out;

    --nbnow-byline-font: 10px;
    --nbnow-byline-avatar: 1.5rem;
}

/* Homepage shell only — avoids sitewide reset collisions with legacy CSS */
.nbnow-homepage {
    box-sizing: border-box;
    font-family: var(--nbnow-font-body);
    color: var(--nbnow-navy);
    background-color: var(--nbnow-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    /* Isolate from global Bootstrap / legacy `style.css` body color (#404040) */
    isolation: isolate;
}

body.nbnow-home-assembler #content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none;
}

body.nbnow-home-assembler .nbnow-site-main {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.nbnow-homepage *,
.nbnow-homepage *::before,
.nbnow-homepage *::after {
    box-sizing: border-box;
}

.nbnow-homepage h1,
.nbnow-homepage h2,
.nbnow-homepage h3,
.nbnow-homepage h4,
.nbnow-homepage h5,
.nbnow-homepage h6 {
    font-family: var(--nbnow-font-heading);
    letter-spacing: -0.02em;
}

.nbnow-homepage a {
    color: inherit;
    text-decoration: none;
}

.nbnow-homepage img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Cards that use fixed media boxes must fill those boxes completely. */
.nbnow-homepage img.nbnow-img--cover {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.font-body {
    font-family: var(--nbnow-font-body);
}
.font-heading {
    font-family: var(--nbnow-font-heading);
}

.nbnow-img--cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nbnow-img--grayscale {
    filter: grayscale(100%);
    opacity: 0.9;
    transition: filter var(--nbnow-transition-base), opacity var(--nbnow-transition-base);
}
.nbnow-img--grayscale:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.nbnow-pulse {
    position: relative;
    display: inline-flex;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
}
.nbnow-pulse::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: inherit;
    animation: nbnow-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    opacity: 0.75;
}
@keyframes nbnow-ping {
    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.nbnow-hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.nbnow-hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}