:root {
    --nsdc-header-width: 100%; /* Set this to whatever width is required, auto 100% 800px etc */
    --nsdc-header-padding: 0px; /* Set this to zero (0) if you want it flush to the edge (left and right) in case of your framework already has side padding or you want the infinity edge*/
    --nsdc-header-height: 80px;
    --nsdc-green: #1c3b2c;
    --nsdc-breadcrumb-min-height: 53px;
    --nsdc-crumb-bg: #F0EDE7;
    --nsdc-highlight-color: #fdee6e;
    /* nsdc drupal */
    --breadcrumbs-link-color: #086c3c;
}

/* Scoped to avoid host framework clashes */
.nsdc-header,
.nsdc-breadcrumbs {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* HEADER */
.nsdc-header {
    background: var(--nsdc-green);
    color: #fff;
    width: 100%;
    padding: 0 0;
}

.nsdc-header__inner {
    min-height: var(--nsdc-header-height);
    max-width: var(--nsdc-header-width);
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
}

/* Left group: logo + menu sit together */
.nsdc-header__left {
    display: inline-flex;
    align-items: center;
    gap: 6em; /* basic spacing between logo and links */
    padding-left: var(--nsdc-header-padding);
}

/* Logo link */
.nsdc-header__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #fff; /* drives SVG via currentColor */
    border-bottom: 2px solid var(--nsdc-green);
}

    .nsdc-header__brand:visited {
        color: #FFFFFF;
    }

    .nsdc-header__brand:hover {
        border-bottom: 2px solid white;
    }

    .nsdc-header__brand:focus {
        text-decoration: underline;
        text-decoration-thickness: 4px;
        text-underline-offset: 20px;
        color: black;
        background-color: var(--nsdc-highlight-color);
    }

    /* Keep SVG inside the 80px header comfortably */
    .nsdc-header__brand svg {
        display: block;
        height: calc(var(--nsdc-header-height) - 18px);
        width: auto;
    }

        /* Ensure SVG doesn’t default to black when theme CSS isn’t present */
        .nsdc-header__brand svg,
        .nsdc-header__brand svg * {
            fill: currentColor;
        }

/* Header nav + link styling (closer to “menu” feel) */
.nsdc-header__nav {
    display: inline-flex;
    align-items: center;
    gap: 1em;
}

/* Match typical header menu behaviour */
.nsdc-header__link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    margin-right: 0.75em;
    padding: 1em 0;
    font-size: 1em;
}

    .nsdc-header__link:visited {
        color: #fff;
    }

    .nsdc-header__link:hover {
        text-decoration: underline;
        text-decoration-thickness: 4px;
        text-underline-offset: 20px;
    }

    .nsdc-header__link:focus {
        text-decoration: underline;
        text-decoration-thickness: 4px;
        text-underline-offset: 20px;
        color: black;
        background-color: var(--nsdc-highlight-color);
    }

/* BREADCRUMBS (if needed) */
.nsdc-breadcrumbs {
    background: var(--nsdc-crumb-bg);
    width: 100%;
    padding: 0 0;
}

.nsdc-breadcrumbs-inner__left {
    padding-left: var(--nsdc-header-padding);
}

.nsdc-breadcrumbs-inner {
    min-height: var(--nsdc-breadcrumb-min-height);
    max-width: var(--nsdc-header-width);
    margin: 0 auto;
    padding: 0.5em 0em;
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: 1em;
    color: #b1b4b6;
    border-block-end: 0.0625em solid var(--nsdc-green);
}

.nsdc-breadcrumbs-inner__line {
    background-color: aqua;
}

.nsdc-breadcrumbs-inner__link {
    color: var(--breadcrumbs-link-color);
    text-decoration: underline;
    font-weight: 400;
}

    .nsdc-breadcrumbs-inner__link:hover {
        text-decoration: underline;
        text-decoration-thickness: 3px;
    }

    .nsdc-breadcrumbs-inner__link:focus {
        text-decoration: underline;
        text-decoration-thickness: 3px;
        background-color: var(--nsdc-highlight-color);
    }

.nsdc-breadcrumbs-inner__sep {
    color: var(--breadcrumbs-link-color);
    margin: 0 0.4em 0 0.2em;
}

.nsdc-breadcrumbs-inner__current {
    color: var(--breadcrumbs-link-color);
}

/* the following content is only required if you have the nsdc content tags in the markup */
.nsdc-content {
    width: 100%;
    padding: 0 0;
}

.nsdc-content-inner {
    max-width: var(--nsdc-header-width);
    margin: 0 auto;
    padding: 0 var(--nsdc-header-padding);
    align-items: center;
}