/* ---------- BRAND CONTAINER (default = UNSCROLLED) ---------- */
/* Default: top of page -> icon above text (vertical, centered) */
.brand-sadb {
    display: flex;
    flex-direction: column; /* icon above text */
    align-items: center; /* center horizontally */
    gap: 10px; /* spacing between icon and stacked text */
    text-decoration: none;
    color: inherit;
    padding: 6px 8px;
    transition: all 0.28s ease;
    min-height: 72px; /* keep navbar height stable */
}

/* SVG icon default size (unscrolled / large hero) */
.sadb-icon {
    width: 120px; /* larger icon for the hero / top-of-page */
    height: auto;
    flex-shrink: 0;
    transition: width 0.28s ease, transform 0.28s ease;
}

/* Wordmark stacked appearance (under the icon) */
.brand-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.brand-text .line-1 {
    font-family: 'Poppins', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .02em;
}

.brand-text .line-2 {
    font-family: 'Poppins', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .12em;
    opacity: 0.95;
}

/* ---------- SCROLLED STATE (site.js removes .navbar-transparent once you scroll) ---------- */
/* When navbar is NOT .navbar-transparent, switch to compact horizontal layout */
.navbar:not(.navbar-transparent) .brand-sadb {
    flex-direction: row; /* icon left, text right */
    align-items: center;
    gap: 12px;
}

/* shrink the icon for the compact navbar */
.navbar:not(.navbar-transparent) .sadb-icon {
    width: 56px; /* smaller in compact header */
}

/* Make the wordmark horizontal and aligned baseline */
.navbar:not(.navbar-transparent) .brand-text {
    display: flex;
    flex-direction: row;
    align-items: baseline;
/*    gap: 10px;*/
}

/* single-line sizing when compact */
.navbar:not(.navbar-transparent) .brand-text .line-1,
.navbar:not(.navbar-transparent) .brand-text .line-2 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .03em;
}

/* ---------- Logo color behaviour (unchanged) ---------- */
.sadb-fill {
    transition: fill .45s ease;
}

/* white on hero */
.navbar.navbar-transparent .sadb-fill {
    fill: #fff;
}

/* gradient on scrolled */
.navbar:not(.navbar-transparent) .sadb-fill {
    fill: url(#sadbGrad);
}

/* ---------- Collapsed navbar (below 992px) or a short window -> compact logo ---------- */
/* The large stacked logo is about 195px tall, which runs into the page headline when the navbar has collapsed
   to the burger menu or the window is short. Use the same compact side-by-side layout as the scrolled navbar
   (it stays white over the header). */
@media (max-width: 991.98px), (max-height: 640px) {
    .navbar .brand-sadb {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        min-height: 0;
    }

    .navbar .sadb-icon {
        width: 56px;
    }

    .navbar .brand-text {
        flex-direction: row;
        align-items: baseline;
    }

    .navbar .brand-text .line-1,
    .navbar .brand-text .line-2 {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .03em;
    }
}

/* ---------- Responsive tweak: very small screens -> icon only ---------- */
@media (max-width: 576px) {
    .navbar .brand-text {
        display: none;
    }

    .navbar .brand-sadb {
        gap: 8px;
    }

    .navbar .sadb-icon {
        width: 44px;
    }
}

/* ---------- selector notes ----------
Adjust .brand-sadb and .brand-text to whatever classes you're using.
Common names you've used in this thread: .brand-sadb, .brand-text, .sadb-brand.
If your markup uses different class names, replace them accordingly.
--------------------------------------*/

/* Smooth transition for color/look */
.brand-text,
.brand-text * {
    transition: color .35s ease, background .35s ease, -webkit-background-clip .35s ease;
}

/* 1) Unscrolled: navbar is transparent (it has .navbar-transparent) */
/* Make text plain white to match the white logo */
.navbar.navbar-transparent .brand-text,
.navbar.navbar-transparent .brand-text * {
    color: #ffffff; /* plain white */
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
}

/* small fallback for older browsers that don't support background-clip:text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .navbar:not(.navbar-transparent) .brand-text,
    .navbar:not(.navbar-transparent) .brand-text * {
        color: #000; /* a readable fallback (or choose #002 to match dark blue) */
        background: none;
    }
}

.navbar:not(.navbar-transparent) .brand-text {
    text-shadow: 0 1px 0 rgba(0,0,0,0.05);
}