/* navbar.css */

/* Reduce the vertical gap between the title header area and the navbar (non-home only) */
.not-home .hero,
.not-home .section.hero,
.not-home header {
    padding-bottom: 0.75rem !important;
}

/* Common Bulma title spacing */
.not-home .title,
.not-home h1 {
    margin-bottom: 0.75rem !important;
}

/* Your nav wrapper: remove extra top space */
.not-home nav.navbar {
    margin-top: 0 !important;
}

/* Bulma hr has a big margin by default */
.not-home hr {
    margin: 0.75rem 0 !important;
}

.not-home #top > .section {
    padding-top: 0rem !important;
    /* try 0, 0.25rem, 0.5rem */
    padding-bottom: 3rem;
    /* keep bottom spacing normal if you want */
}

/* Non-home only: shrink navbar text + tighten spacing */
.not-home nav.navbar .navbar-item {
    font-size: 0.85rem !important;
    /* try 0.8rem–0.9rem */
    padding: 0.25rem 0.5rem !important;
    line-height: 1.2 !important;
}

/* If your theme uses links directly (not always .navbar-item) */
.not-home nav.navbar a {
    font-size: 0.85rem !important;
}
/* Pick ONE gray and use it everywhere involved */
:root {
    --page-gray: #202020;
    /* tweak to match your theme */
}

/* Full-bleed + flush top */
.not-home.has-hero-banner #top.section {
padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
background: var(--page-gray);
}

.not-home.has-hero-banner .hero-banner {
position: relative;
    padding: 5rem 0;
background: var(--page-gray);
    /* this is what the image fades into */
    overflow: hidden;
}

/* Image layer with bottom fade -> pure gray */
.not-home.has-hero-banner .hero-banner::before {
content: "";
    position: absolute;
    inset: 0;
    background: var(--hero-bg) center / cover no-repeat;
        opacity: 0.15;
    /* IMPORTANT: last chunk is fully transparent (no residual image tint) */
        -webkit-mask-image: linear-gradient(to bottom,
                #000 0%,
                #000 55%,
                transparent 99%,
                transparent 100%);
        mask-image: linear-gradient(to bottom,
                #000 0%,
                #000 55%,
                transparent 99%,
                transparent 100%);
        pointer-events: none;
    }

/* If you want extra readability, fade the darkening out BEFORE the bottom */
.not-home.has-hero-banner .hero-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.18) 0%,
            rgba(0, 0, 0, 0.00) 70%);
pointer-events: none;
}

.not-home.has-hero-banner .hero-banner .container {
position: relative;
    z-index: 1;
}