/* =========================================
   MAIN WRAPPER (fixed at very top)
   ========================================= */
#nb-toolbar.nb-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    font-family: inherit;

    /* smooth show/hide when scrolling */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hidden state – used when scrolling DOWN */
#nb-toolbar.nb-toolbar.nb-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* =========================================
   OUTER BAR
   ========================================= */
.nb-toolbar-inner {
    height: auto;
    width: 100%;
    color: #fff;
    background: #2a394e; /* overridden by inline style from PHP */
}

/* Content layout – countdown + text + button in one row */
.nb-toolbar-content {
    width: 100%;
    padding: 10px 20px;
    font-weight: 400;
    font-size: 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.nb-toolbar-content * {
    margin: 0;
    padding: 0;
}

/* HIDE ON PRINT */
@media print {
    #nb-toolbar,
    #nb-toolbar * {
        display: none !important;
    }
}

/* =========================================
   TEXT BLOCK (HEADLINE + SUBLINE)
   ========================================= */

.nb-main-text {
    font-weight: 400;
}

/* Block that sits beside the countdown */
.nb-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;   /* center the group horizontally */
    text-align: center;    /* center the text itself */
    width: auto;           /* keep it sized to content so it can sit side-by-side */
}

/* Headline (top line) */
.nb-headline {
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
}

/* Subline (second line, smaller) */
.nb-subline {
    font-weight: 400;
    font-size: 14px;
    opacity: 0.9;
    margin-top: 2px;
}

/* =========================================
   COUNTDOWN AREA
   ========================================= */
.nb-countdown-wrapper {
    display: inline-flex;
    align-items: center;
}

/* Container holding the 4 boxes */
.nb-countdown-timer {
    display: inline-flex;
}

/* Individual box style – NUMBER + LABEL stacked */
.nb-countdown-days,
.nb-countdown-hours,
.nb-countdown-minutes,
.nb-countdown-seconds {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 70px;
    padding: 10px 12px;
    margin-right: 8px;

    border-radius: 4px;
    background-color: #245bbf; /* overridden by inline style */
    border: 1px solid #ffffff; /* overridden by inline style */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.nb-countdown-seconds {
    margin-right: 0;
}

/* Label under the number */
.nb-countdown-days .txt,
.nb-countdown-hours .txt,
.nb-countdown-minutes .txt,
.nb-countdown-seconds .txt {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* =========================================
   BUTTON
   ========================================= */
.nb-button,
.nb-button:hover {
    background: rgb(189 214 120 / 74%);
    color: #000;
    padding: 7px 18px;
    margin-left: 10px;
    text-decoration: none;
    border: none;
    transition-duration: 0.2s;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),
                0 6px 20px 0 rgba(0,0,0,0.19);
    border-radius: 5px;
    font-size: 18px;
    font-weight: 700;
}

.nb-button:active {
    background: rgb(189 214 120 / 55%);
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),
                0 17px 50px 0 rgba(0,0,0,0.19);
}

/* BUTTON WRAPPER */
.nb-button-wrapper {
    display: inline-flex;
    align-items: center;
}

/* =========================================
   CLOSE BUTTON (X) – HIDDEN
   ========================================= */
.nb-close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 18px;
    margin-left: 15px;
    cursor: pointer;
    vertical-align: middle;

    /* Hide it (Option B) */
    display: none !important;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media only screen-width: 700px) {
    .nb-toolbar-content {
        justify-content: center;
        text-align: center;
    }

    .nb-text-wrapper,
    .nb-button-wrapper {
        justify-content: center;
    }
}

@media only screen and (max-width: 700px) {
    /* On smaller screens, allow text to wrap but remain centered */
    .nb-text-wrapper {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .nb-headline,
    .nb-subline {
        width: 100%;
        text-align: center;
    }

    .nb-countdown-days,
    .nb-countdown-hours,
    .nb-countdown-minutes,
    .nb-countdown-seconds {
        width: 60px;
        font-size: 18px;
    }

    .nb-toolbar-content {
        gap: 16px;
        padding: 8px 10px;
    }
}

/* =========================================
   BODY OFFSET / HEADER OFFSET
   ========================================= */

/* When the bar is visible, push everything down a bit */
body.nb-has-nb-bar {
    padding-top: 80px; /* adjust this number if your bar is taller/shorter */
}

/* Specifically push the Salient header (logo + menu) down */
body.nb-has-nb-bar #header-outer {
    top: 80px !important; /* must match padding-top above */
}

/* When the bar is hidden (after scroll), remove offsets */
body.nb-bar-hidden {
    padding-top: 0 !important;
}

body.nb-bar-hidden #header-outer {
    top: 0 !important;
}

/* MOBILE FIX — push Salient header lower so logo/menu are visible */
@media only screen and (max-width: 768px) {

    /* Add more padding for the whole page */
    body.nb-has-nb-bar {
        padding-top: 120px !important;  /* was 80px — increase so header is fully visible */
    }

    /* Push Salient header down */
    body.nb-has-nb-bar #header-outer {
        top: 130px !important;  /* match padding-top above */
    }
}