/* ===================================================================
   CUSTOM.CSS - OVERRIDES ONLY
   Loads AFTER Tailwind output.css
   Keep component-specific styles here (calendar, events, videos, staff)
   =================================================================== */

/* Contact directory accordion */
#contact-directory details > summary {
    list-style: none;
}

#contact-directory a {
    text-decoration: underline;
}

    #contact-directory a:hover {
        color: #084298;
    }

/* Phone chevron/toggle */
.sidebar-phone-toggle {
    padding: 0;
    margin: 0;
    background: transparent;
}

/* LINK STYLING */
/* Universal link style utility (preferred Tulalip palette) */
.link-blue {
    color: #084298; /* preferred blue */
    text-decoration: none;
}

    .link-blue:hover,
    .link-blue:focus {
        color: #052C66; /* hover/focus */
        text-decoration: underline;
    }

    .link-blue:visited {
        color: #593C68; /* visited */
    }

/* Optional: apply to all anchors inside sidebar-info by default */
.sidebar-info a {
    color: #084298;
    text-decoration: none;
}

    .sidebar-info a:hover,
    .sidebar-info a:focus {
        color: #052C66;
        text-decoration: underline;
    }

    .sidebar-info a:visited {
        color: #593C68;
    }

/* Subpages: apply Tulalip link palette to all links inside a scoped container */
.subpage-link-scope a {
    color: #084298;
    text-decoration: none;
}

    .subpage-link-scope a:hover,
    .subpage-link-scope a:focus {
        color: #052C66;
        text-decoration: underline;
    }

    .subpage-link-scope a:visited {
        color: #593C68;
    }
/* === CALENDAR COMPONENTS === */
.calendar-box {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.calendar-label, .calendar-day {
    font-size: 1.125rem;
    font-weight: bold;
    color: #70868C;
}

    .calendar-day:not(.font-bold) {
        font-weight: normal;
        opacity: 0.6;
    }

.daily-events {
    min-height: 300px;
    height: 100%;
}

/* Timeline */
.events-timeline {
    position: absolute;
    left: 32px;
    top: 0;
    width: 6px;
    height: 100%;
    background: white;
    border-radius: 2px;
    z-index: 1;
}

.vertical-line {
    background: white;
    width: 3px;
    border-radius: 2px;
}

.event-row {
    position: relative;
}

.event-info {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-left: 70px;
    height: auto;
    min-height: 5rem;
    flex-wrap: wrap;
    z-index: 2;
}

.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-right: 1.2rem;
    flex: 0 0 70px;
    width: 70px;
    height: auto;
}

.event-description {
    flex: 1 1 0;
    min-width: 0;
    word-break: break-word;
    line-height: 1.25;
}

.event-description-entry {
    margin-bottom: .35rem;
}

.event-dot {
    position: absolute;
    left: 14px;
    top: 45%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background-color: #fff;
    border: none;
    box-shadow: none;
    z-index: 2;
}

.event-month {
    font-size: 1.75rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.50rem;
    text-align: center;
}

.event-day {
    font-size: 3.5rem;
    font-weight: bold;
    color: #fff;
    line-height: 3.70rem;
    text-align: center;
}

.event-title {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 0;
}

.event-time {
    font-size: .95rem;
}

.events-timeline {
    z-index: 1;
}

.eventsBox p {
    font-weight: 600;
}


p#about-heading {
    font-size: 1.3rem;
    position: relative;
    left: unset;
}

h2#about-title {
    font-size: 1.55rem;
    position: relative;
    left: unset;
    letter-spacing: 1px;
}

h2.featured-stories.heading-h2 {
    margin-top: 0;
}

/* ---------------------------------------------------------------
     HEADER Video
  --------------------------------------------------------------- */
/* Force header to allow overflow and full viewport coverage */
.header-background {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
}


/* Clipping wrapper – essential for iframe cover effect */
.video-bg-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

/* The iframe – force it to overflow and center */
#homeVimeo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    min-width: 2560px; /* your original min sizes for cover on large screens */
    min-height: 1440px;
    pointer-events: none;
}

/* Make sure content floats above the video */
.header-background .header-container,
.header-background .navigation-bar,
.header-background .home-header-content {
    position: relative;
    z-index: 10;
}


/* Mobile/tablet adjustments – prevent excessive height */
@media (max-width: 1499px) {
    .navigation.header-nav-width {
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    .home-header-content.mt-6 {
        margin-top: 1rem;
    }

    img.whale-logo {
        margin-top: .5rem;
    }

    h1.site-title {
        margin-top: 1.5rem;
    }

    .back-top-arrow {
        position: relative;
        top: -63px;
        right: 0;
        z-index: 100;
    }
}

@media (max-width: 1399px) {
    .navigation.header-nav-width {
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    .home-header-content.mt-6 {
        margin-top: 1rem;
    }

    img.whale-logo {
        margin-top: .5rem;
    }

    h1.site-title {
        margin-top: 1.5rem;
    }

    .section-bg-quicklinks {
        padding-top: 160px;
    }

    .quicklinks-icon-circle {
        width: 9rem;
        height: 9rem;
    }
}

@media (max-width: 1299px) {
    img.whale-logo {
        width: 12rem;
        margin-top: 0;
    }

    p.site-blurb {
        margin-top: 0;
    }
}

@media (max-width: 1199px) {
    header .bg-cover {
        height: 80vh;
        max-height: 630px;
        min-height: unset;
    }

    #homeVimeo {
        height: 80vh;
        max-height: 630px;
    }

    .header-background {
        height: auto; /* let height adapt to content/video */
        min-height: 50vh; /* prevent collapsing too much – adjust as needed */
        max-height: 630px; /* or remove if you want full natural height */
        overflow: hidden; /* still clip if needed */
    }

    .video-bg-wrapper {
        position: absolute; /* change from absolute if needed – but absolute is fine */
        width: 100%;
        height: 100%;
        overflow: visible; /* allow iframe to be seen fully if scaled */
    }

    #homeVimeo {
        position: relative; /* or static – no absolute positioning needed */
        top: auto;
        left: auto;
        transform: none; /* remove translate */
        width: 100%; /* fit to wrapper width */
        height: 80vh; /* maintain aspect ratio */
        min-width: 0; /* override desktop mins */
        min-height: 0;
        max-width: 100%; /* prevent overflow */
        max-height: auto; /* cap if too tall */
        display: block; /* ensure block-level */
        margin: 0 auto; /* center horizontally if bars appear on sides */
    }

    .navigation.header-nav-width {
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    .navigation-bar.navigation-bar--bg {
        width: 100%;
    }
}

@media (max-width: 1167px) {
    header .bg-cover {
        height: 80vh;
        max-height: 615px;
        min-height: unset;
    }

    #homeVimeo {
        height: 80vh;
        max-height: 615px;
    }

    .header-background {
        height: auto; /* let height adapt to content/video */
        min-height: 50vh; /* prevent collapsing too much – adjust as needed */
        max-height: 615px; /* or remove if you want full natural height */
        overflow: hidden; /* still clip if needed */
    }
}

@media (max-width: 1070px) {
    header .bg-cover {
        height: 75vh;
        max-height: 563px;
        min-height: unset;
    }

    #homeVimeo {
        height: 75vh;
        max-height: 563px;
    }

    .header-background {
        height: auto; /* let height adapt to content/video */
        min-height: 50vh; /* prevent collapsing too much – adjust as needed */
        max-height: 563px; /* or remove if you want full natural height */
        overflow: hidden; /* still clip if needed */
    }
}

@media (max-width: 1099px) {
    div.header-background .md\:mt-8 {
        margin-top: 20px !important;
    }

    img.whale-logo {
        width: 10rem;
    }

    h1.site-title {
        margin-top: 1rem;
        font-size: 2rem;
    }

    p.site-blurb {
        margin-top: 0;
        font-size: 1.1rem;
    }
}

@media (max-width: 1023px) {
    .header-background {
        height: 70vh;
        max-height: 545px;
    }

    header .bg-cover {
        height: 70vh;
        max-height: 545px;
    }

    #homeVimeo {
        height: 70vh;
        max-height: 545px;
    }

    div.header-background .md\:mt-8 {
        margin-top: -30px !important;
    }

    .navigation-bar.pt-4 {
        position: relative;
        z-index: 100;
    }

    #mobileNavPanel.mobile-nav-panel.open {
        padding-bottom: 25px;
    }

    img.whale-logo {
        margin-top: 0;
        width: 11rem;
    }

    h1.site-title {
        margin-top: 1rem;
    }

    p.site-blurb {
        margin-top: .5rem;
        font-size: 1.05rem;
    }

    #main-content {
        background-color: #fff;
        position: relative;
        z-index: 5;
    }
}

@media (max-width: 991px) {
    .header-background {
        height: 65vh;
        max-height: 520px;
    }

    header .bg-cover {
        height: 65vh;
        max-height: 520px;
    }

    #homeVimeo {
        height: 65vh;
        max-height: 520px;
    }

    .header-background .md\:mt-8 {
        margin-top: -55px !important;
    }

    h1.site-title {
        margin-top: .5rem;
    }

    section.subpage-img-wave .background-img-footer-waves {
        margin-top: 10px;
    }
}

@media (max-width: 965px) {
    .header-background {
        height: 65vh;
        max-height: 500px;
    }

    header .bg-cover {
        height: 65vh;
        max-height: 500px;
    }

    #homeVimeo {
        height: 65vh;
        max-height: 500px;
    }
}

@media (max-width: 899px) {
    .header-background {
        height: 65vh;
        max-height: 465px;
    }

    header .bg-cover {
        height: 65vh;
        max-height: 465px;
    }

    #homeVimeo {
        height: 65vh;
        max-height: 465px;
    }
}

@media (max-width: 875px) {
    .header-background {
        height: 65vh;
        max-height: 450px;
    }

    header .bg-cover {
        height: 65vh;
        max-height: 450px;
    }

    #homeVimeo {
        height: 65vh;
        max-height: 450px;
    }
}

@media (max-width: 825px) {
    .header-background {
        height: 65vh;
        max-height: 430px;
    }

    header .bg-cover {
        height: 65vh;
        max-height: 430px;
    }

    #homeVimeo {
        height: 65vh;
        max-height: 430px;
    }
}

@media (max-width: 800px) {
    .header-background {
        height: 60vh;
        max-height: 415px;
    }

    header .bg-cover {
        height: 60vh;
        max-height: 415px;
    }

    #homeVimeo {
        height: 60vh;
        max-height: 415px;
    }

    .navigation.header-nav-width {
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .header-background {
        height: 60vh;
        max-height: 400px;
    }

    header .bg-cover {
        height: 60vh;
        max-height: 400px;
    }

    #homeVimeo {
        height: 60vh;
        max-height: 400px;
    }

    .navigation.header-nav-width {
        margin-bottom: 0;
    }
}

@media (max-width: 730px) {
    .header-background {
        height: 60vh;
        max-height: 380px;
    }

    header .bg-cover {
        height: 60vh;
        max-height: 380px;
    }

    #homeVimeo {
        height: 60vh;
        max-height: 380px;
    }

    div.header-background .md\:mt-8 {
        margin-top: -38px !important;
    }

    img.whale-logo {
        width: 10rem;
    }
}

@media (max-width: 685px) {
    .header-background {
        height: 60vh;
        max-height: 355px;
    }

    header .bg-cover {
        height: 60vh;
        max-height: 355px;
    }

    #homeVimeo {
        height: 60vh;
        max-height: 355px;
    }

    img.whale-logo {
        width: 9rem;
    }

    p.site-blurb {
        margin-top: .5rem;
        font-size: .95rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 630px) {
    .header-background {
        height: 60vh;
        max-height: 330px;
    }

    header .bg-cover {
        height: 60vh;
        max-height: 330px;
    }

    #homeVimeo {
        height: 60vh;
        max-height: 330px;
    }

    .header-background .md\:mt-8 {
        margin-top: -99px !important;
    }

    h1.site-title {
        font-size: 1.50rem !important;
        margin-top: 0;
    }

    p.site-blurb {
        margin-top: .5rem;
        font-size: .90rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    section.section-bg-quicklinks.relative {
        margin-top: -86px;
        padding-top: 85px;
        min-height: 292px;
    }
}

@media (max-width: 615px) {
    .header-background {
        height: 55vh;
        max-height: 320px;
    }

    header .bg-cover {
        height: 55vh;
        max-height: 320px;
    }

    #homeVimeo {
        height: 55vh;
        max-height: 320px;
    }
}

@media (max-width: 567px) {
    .header-background {
        height: 55vh;
        max-height: 300px;
    }

    header .bg-cover {
        height: 55vh;
        max-height: 300px;
    }

    #homeVimeo {
        height: 55vh;
        max-height: 300px;
    }

    div.header-background .md\:mt-8 {
        margin-top: -60px !important;
    }
}

@media (max-width: 520px) {
    .header-background {
        height: 55vh;
        max-height: 270px;
    }

    header .bg-cover {
        height: 55vh;
        max-height: 290px;
    }

    #homeVimeo {
        height: 55vh;
        max-height: 270px;
    }

    div.header-background .md\:mt-8 {
        margin-top: -65px !important;
    }

    .header-container h1.text-h1-mobile {
        margin-top: 0 !important;
    }

    section .site-blurb {
        margin-top: 0;
        padding: 0 10px;
    }
}

@media (max-width: 485px) {
    .header-background {
        height: 55vh;
        max-height: 315px;
    }

    header .bg-cover {
        height: 55vh;
        max-height: 315px;
    }

    #homeVimeo {
        height: 55vh;
        max-height: 253px;
    }

    section.section-bg-quicklinks {
        background-image: url(/images/home-page/Tulalip-Tribes-Background-Tribal-Light-Waves-smMobile-655.png);
    }
}

@media (max-width: 465px) {
    .header-background {
        height: 55vh;
        max-height: 315px;
    }

    header .bg-cover {
        height: 55vh;
        max-height: 321px;
    }

    #homeVimeo {
        height: 55vh;
        max-height: 270px;
    }

    section.section-bg-quicklinks {
        background-image: url(/images/home-page/Tulalip-Tribes-Background-Tribal-Light-Waves-smMobile-655.png);
    }

    div.header-background .md\:mt-8 {
        margin-top: -38px !important;
    }
}

@media (max-width: 460px) {
    .header-background {
        height: 55vh;
        max-height: 295px;
    }

    header .bg-cover {
        height: 55vh;
        max-height: 295px;
    }

    #homeVimeo {
        height: 55vh;
        max-height: 235px;
    }

    div.header-background .md\:mt-8 {
        margin-top: -45px !important;
    }

    section.home-header-content img.whale-logo {
        padding: 6px 0;
        width: 6rem !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 435px) {
    .header-background {
        height: 50vh;
        max-height: 295px;
    }

    header .bg-cover {
        height: 50vh;
        max-height: 295px;
    }

    #homeVimeo {
        height: 50vh;
        max-height: 234px;
    }

    p.site-blurb {
        padding-left: 5px;
        padding-right: 5px;
    }

    div.header-background .md\:mt-8 {
        margin-top: -55px !important;
    }

     
      
}

@media (max-width: 415px) {
    .header-background {
        height: 50vh;
        max-height: 284px;
    }

    header .bg-cover {
        height: 50vh;
        max-height: 284px;
    }

    #homeVimeo {
        height: 70vh;
        max-height: 225px;
    }

    p.site-blurb {
        padding-left: 5px;
        padding-right: 5px;
    }

    section.home-header-content img.whale-logo {
        padding: 0;
        width: 6rem;
        margin-top: 12px;
    }

    .header-container h1.text-h1-mobile {
        font-size: 1.20rem !important;
    }

    p.site-blurb {
        font-size: .80rem !important;
    }

    div.header-background .md\:mt-8 {
        margin-top: -61px !important;
    }
}

@media (max-width: 406px) {
    .header-background {
        height: 50vh;
        max-height: 276px;
    }

    header .bg-cover {
        height: 50vh;
        max-height: 276px;
    }

    #homeVimeo {
        height: 50vh;
        max-height: 215px;
    }

    p.site-blurb {
        padding-left: 5px;
        padding-right: 5px;
    }

    div.header-background .md\:mt-8 {
        margin-top: -60px !important;
    }

    .home-header-content section.home-header-content img.whale-logo {
        padding: 0;
        width: 6rem !important;
        margin-top: 5px !important;
    }
}

@media (max-width: 390px) {
    .header-background {
        height: 50vh;
        max-height: 265px;
    }

    header .bg-cover {
        height: 50vh;
        max-height: 265px;
    }

    #homeVimeo {
        height: 50vh;
        max-height: 207px;
    }

    p.site-blurb {
        display: none;
    }

    div.header-background .md\:mt-8 {
        margin-top: -20px !important;
    }
}

@media (max-width: 370px) {
    .header-background {
        height: 50vh;
        max-height: 260px;
    }

    header .bg-cover {
        height: 50vh;
        max-height: 260px;
    }

    #homeVimeo {
        height: 40vh;
        max-height: 203px;
    }

    section.section-bg-quicklinks.relative {
        margin-top: -98px;
    }
}

@media (max-width: 365px) {
    .header-background {
        height: 50vh;
        max-height: 260px;
    }

    header .bg-cover {
        height: 50vh;
        max-height: 260px;
    }

    #homeVimeo {
        height: 40vh;
        max-height: 199px;
    }

    p.site-blurb {
        padding-left: 5px;
        padding-right: 5px;
    }

    section.section-bg-quicklinks.relative {
        margin-top: -98px;
    }

    .header-container h1.text-h1-mobile.mt-4 {
        font-size: 1.25rem !important;
    }

    p.site-blurb {
        margin-top: 0;
        font-size: .85rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
        line-height: 1.2rem !important;
    }
}

@media (max-width: 360px) {
    section.section-bg-quicklinks.relative {
        margin-top: -99px;
    }
}

@media (max-width: 355px) {
    .header-background {
        height: 60vh;
        max-height: 247px;
    }

    header .bg-cover {
        height: 60vh;
        max-height: 247px;
    }

    #homeVimeo {
        height: 60vh;
        max-height: 187px;
    }
}

@media (max-width: 335px) {
    .header-background {
        height: 60vh;
        max-height: 235px;
    }

    header .bg-cover {
        height: 60vh;
        max-height: 235px;
    }

    #homeVimeo {
        height: 60vh;
        max-height: 185px;
    }
}


/* ---------------------------------------------------------------
     MIN-WIDTH MEDIA QUERIES (Progressive enhancement)
  --------------------------------------------------------------- */

@media (min-width: 1200px) {
    .header-background {
        position: relative;
        width: 100%;
        height: 100vh; /* or min-h-screen, 80vh, 700px – whatever matches your design */
        max-height: 650px; /* fallback */
        overflow: hidden;
        background: #000; /* dark fallback while video loads */
    }
}

@media (min-width: 1400px) {
    .header-background {
        position: relative;
        width: 100%;
        height: 100vh; /* or min-h-screen, 80vh, 700px – whatever matches your design */
        max-height: 650px; /* fallback */
        overflow: hidden;
        background: #000; /* dark fallback while video loads */
    }
}

@media (min-width: 1399px) {
    h2#about-title {
        font-size: 2.30rem;
        width: 700px;
    }
}

@media (min-width: 1500px) {
    .header-background {
        position: relative;
        width: 100%;
        height: 100vh; /* or min-h-screen, 80vh, 700px – whatever matches your design */
        min-height: 700px; /* fallback */
        overflow: hidden;
        background: #000; /* dark fallback while video loads */
    }
}

@media (min-width: 1600px) {
    .header-background {
        position: relative;
        width: 100%;
        height: 100vh; /* or min-h-screen, 80vh, 700px – whatever matches your design */
        min-height: 750px; /* fallback */
        overflow: hidden;
        background: #000; /* dark fallback while video loads */
    }
}

@media (max-width: 610px) {
    section.section-bg-quicklinks.relative {
        margin-top: -85px;
        padding-top: 92px;
        min-height: 299px;
    }
}

@media (max-width: 576px) {
    section.section-bg-quicklinks.relative {
        margin-top: -99px;
        padding-top: 85px;
        min-height: 245px;
    }

    section.home-header-content img.whale-logo {
        padding: 6px 0;
        width: 7rem;
        margin-top: 15px;
    }

    .header-container h1.text-h1-mobile {
        font-size: 1.30rem !important;
        margin-top: .5rem;
    }

    p.site-blurb {
        margin-top: 0;
        font-size: .90rem;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 465px) {
    .header-container h1.text-h1-mobile {
        font-size: 1.2rem !important;
    }

    p.site-blurb {
        font-size: .85rem;
    }

    .header-background .md\:mt-8 {
        margin-top: -103px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #main-content section.section-bg-aboutus {
        padding-top: 12px;
    }

    .section-bg-quicklinks ul.quicklinks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    div.w-10r.h-10r.quicklinks-icon-circle.mb-4 {
        width: 3.25rem;
        height: 3.25rem;
        margin-bottom: 3px;
    }

    img.quicklinks-icon.h-24.w-24 {
        width: 2.35rem;
        height: 2.35rem;
    }
}


/* end video header */


@media (min-width: 767px) {
    h2#about-title {
        font-size: 1.5rem;
        margin-left: 0;
        left: -115px;
        width: 400px;
    }

    p#about-heading {
        font-size: 1.3rem;
        position: relative;
        left: -115px;
        margin-left: 0;
    }
}

@media (min-width: 991px) {
    h2#about-title {
        font-size: 2rem;
        margin-left: 0;
        left: -115px;
        width: 600px;
    }

    p#about-heading {
        font-size: 1.3rem;
        position: relative;
        left: -115px;
        margin-left: 0;
    }
}

@media (min-width: 1300px) {
    h2#about-title {
        font-size: 2.20rem;
        width: 600px;
    }
}

@media (min-width: 1499px) {
    p#about-heading {
        font-size: 1.5rem;
        position: relative;
        left: -165px;
    }

    h2#about-title {
        font-size: 2.50rem;
        position: relative;
        left: -165px;
        letter-spacing: 1px;
        width: 700px;
    }
}

@media (max-width: 1199px) {
    .daily-events {
        padding-left: 0;
    }

    .events-timeline {
        left: 32px;
        top: 0;
        width: 4px;
    }

    .event-row.mb-8 {
        margin-bottom: 1rem;
    }

    .event-dot {
        left: 20px;
        top: 20%;
        width: 30px;
        height: 30px;
    }

    .event-day {
        font-size: 3rem;
        line-height: 3.20rem;
    }

    .event-month {
        font-size: 1.50rem;
        line-height: 1.40rem;
    }
}

@media (max-width: 991px) {
    section.section-bg-aboutus {
        padding-top: 0;
    }

    .eventsBox h2.current-month {
        font-size: 2rem;
        line-height: 2.2rem;
        text-transform: initial;
    }

    section.section-bg-videos {
        background-image: url(../images/home-page/ttt-homepage-aboutus-image-1600px.png);
        max-width: 991px;
    }

        section.section-bg-videos div.container.mx-auto {
            width: 100%;
            padding-left: 3rem;
            padding-right: 3rem;
        }

    div.back-top-arrow {
        position: relative;
        top: -42px;
        right: -2px;
        z-index: 100;
        min-width: 25px;
    }
}

.back-top-arrow {
    position: relative;
    top: -63px;
    right: -12px;
    z-index: 100;
}


@media (max-width: 930px) {
    section.section-bg-quicklinks {
        margin-top: -141px;
        padding-top: 99px;
        min-height: 344px;
    }

    section.section-bg-aboutus {
        padding-top: 22px;
    }
}

@media (max-width: 900px) {
    #departments-mega-menu {
        width: 80% !important;
        max-width: 720px !important;
        z-index: 2000;
    }
}

@media (max-width: 850px) {
    h2#videos-heading.mb-4 {
        margin-bottom: 1.5rem;
    }

    .back-top-arrow.container {
        top: -39px;
        right: 0px;
    }
}

@media (max-width: 750px) {
    .calendar-info h2.current-month {
        margin-top: 0;
    }

    .eventsBox h2.current-month {
        margin-top: 0;
    }
}

@media (max-width: 720px) {
    label.council-label {
        font-size: 14px;
    }
}

/* Council form: responsive single column at ≤620px */
@media (max-width: 620px) {
    .council-actions-row {
        display: flex;
        flex-direction: column; /* stack vertically */
        align-items: stretch; /* full width items */
        justify-content: center;
        gap: 1rem;
        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }

        .council-actions-row .g-recaptcha {
            width: 100%;
            display: flex;
            justify-content: center; /* center the reCAPTCHA widget */
            margin: 0 auto;
        }

    button.council-submit-btn {
        width: 100%; /* full width button */
        max-width: 100%;
        padding: 12px 20px;
        margin-top: 100px;
    }

    button.council-submit-row {
        display: flex;
        flex-direction: column; /* stack vertically */
        align-items: stretch; /* full width items */
        justify-content: center;
        gap: 1rem;
        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }
}


/* Calendar table */
.calendar-box th, .calendar-box td {
    font-size: 2.25rem;
    font-weight: bold;
    color: #70868C;
    text-align: center;
    vertical-align: middle;
    line-height: 1.2;
    padding: .5rem 0;
    text-transform: uppercase;
}

.calendar-box td {
    height: 4rem;
    padding: 0;
    position: relative;
}

.calendar-day.has-event {
    cursor: pointer;
}

.calendar-box td:not(.has-event) {
    line-height: 4rem;
    opacity: 1;
}

.calendar-day-number {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    border: 3px solid #3d2a1a;
    font-weight: 700;
    color: #3d2a1a;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
}

.calendar-day-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.calendar-day.has-event:hover .calendar-day-number {
    background-color: #3d2a1a;
    color: #ffffff;
}

.month-header {
    background-color: #4a5d66;
    color: #fff;
    font-weight: bold;
    padding: 8px 12px;
    margin: 20px 0 10px;
    text-transform: uppercase;
}

.event-item-page {
    display: flex;
    border: 1px solid #ddd;
    margin-bottom: 15px;
    padding: 15px;
    background-color: #f8f9fa;
}

.event-date-page {
    font-weight: bold;
    font-size: 1.25rem;
    color: #4a5d66;
    min-width: 80px;
    margin-right: 15px;
    text-align: center;
}

.event-details-page {
    flex: 1;
}

.event-title-page {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.event-time-page, .event-location-page {
    font-size: 0.95rem;
}

.event-description-page {
    margin-top: 5px;
    font-size: 0.9rem;
}

.calendar-nav-arrow {
    color: #ffffff;
    font-size: 3rem;
    text-decoration: none;
    padding: 0 0.5rem;
    line-height: 1;
}

    .calendar-nav-arrow:hover {
        color: #E0C7AB;
    }

.today-no-event {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background-color: #687d82;
    border-radius: 9999px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 0 6px rgba(0,0,0,0.08);
}

.today-event .calendar-day-number {
    background-color: #3d2a1a;
    color: white;
    border-color: #3d2a1a;
}

/* Paragraph spacing overrides */
.article-content p.pb-0 {
    padding-bottom: 0 !important;
}

.article-content p.mb-0 {
    margin-bottom: 0 !important;
}

/* Sidebar title spacing */
aside h5.bg-brand-blue:not(:first-of-type) {
    margin-top: 30px !important;
}

h2.heading-h2.mt-0 {
    margin-top: 0;
}

/* === SIDEBAR ACCORDION === */
.sidebar-accordion-section {
    margin-bottom: 1rem;
}

.sidebar-info .sidebar-extra-box {
    padding: 0;
    border: none;
    background: transparent;
}

.sidebar-accordion-toggle {
    border: 1px solid #d1d5db;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.3;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 8px;
    font-size: 16.5px;
    font-weight: 100;
    background: #fff; /* white */
    color: #70868C; /* brand blue-gray text */
    border-radius: .375rem;
    margin-bottom: 4px;
    box-shadow: none;
    transition: box-shadow .2s, border-color .2s, background-color .2s;
}

    .sidebar-accordion-toggle > span {
        font-weight: 600;
        color: #000000c2;
        font-size: inherit;
    }

    .sidebar-accordion-toggle .chev {
        width: 20px;
        height: 20px;
        stroke: #000000c2;
        flex-shrink: 0;
        vector-effect: non-scaling-stroke;
        transition: transform .18s ease, stroke .2s;
    }

    .sidebar-accordion-toggle[aria-expanded="true"] .chev {
        transform: rotate(180deg);
        stroke: #000000c2;
    }

    .sidebar-accordion-toggle:hover, .sidebar-accordion-toggle:focus-visible {
        border-color: #b0b7bf;
        background: #70868c3d;
        outline: 0;
    }

        .sidebar-accordion-toggle:focus-visible .chev {
            stroke: #000000c2;
        }
/* Phone toggle (grid layout) */
.sidebar-phone-toggle {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    padding: .25rem .5rem .25rem .125rem;
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    line-height: 1.2;
    font-family: inherit;
    text-align: left;
}

    .sidebar-phone-toggle .label {
        margin: 0;
        padding: 0;
        word-break: break-word;
        transform: none;
    }

    .sidebar-phone-toggle .phone-chevron {
        width: 16px;
        height: 16px;
        stroke-width: 1.6rem;
        transition: transform .18s ease;
        flex-shrink: 0;
        align-self: center;
    }

    .sidebar-phone-toggle[aria-expanded="true"] .phone-chevron {
        transform: rotate(180deg);
    }

    .sidebar-phone-toggle:hover .phone-chevron {
        stroke-width: 1.8rem;
    }

    .sidebar-phone-toggle .label {
        transform: translateX(-2px);
    }

.bg-light-brand-blue {
    background-color: rgba(112, 134, 140, 0.8);
}

/* Alerts */
.alertNotice {
    max-width: 100%;
    text-align: center;
    padding: 10px 0;
}

    .alertNotice .firstLine {
        font-weight: bold;
        font-size: 16pt;
    }

    .alertNotice .secondLine {
        font-size: 9pt;
    }

/* Sidebar Address */
.sidebar-address-title {
    font-family: var(--tw-font-sans, inherit);
    font-weight: 500;
    margin: 0 0 .25rem 0;
    line-height: 1.25;
}


.sidebar-address-lines {
    display: inline-block;
    line-height: 1.25;
    color: #084298;
    text-underline-offset: 2px;
    transition: color .15s ease-in-out;
}

    .sidebar-address-lines:hover, .sidebar-address-lines:focus {
        color: #084298;
        text-decoration: underline;
    }

/* Sidebar Extra Info Box */
.sidebar-extra-box {
    padding: .75rem .875rem;
    background-color: #f8fafc6b;
    border: 1px solid #e2e8f0;
    font-family: var(--tw-font-sans, inherit);
    font-weight: 400;
    line-height: 1.3;
}

    .sidebar-extra-box .font-sans a {
        text-decoration: underline;
    }

        .sidebar-extra-box .font-sans a:hover {
            color: #084298;
        }

/* Subtitle Lite */
.subtitle-lite {
    font-size: inherit;
    font-weight: 400;
    color: #000000c2;
    letter-spacing: .25px;
}

/* Pay Buttons */
.pay-button {
    display: inline-block;
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .75rem 1.75rem;
    border: 2px solid #074080;
    border-radius: 9999px;
    background: #ffffff;
    color: #074080 !important;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

    .pay-button:hover, .pay-button:focus {
        background: #074080;
        color: #ffffff !important;
        box-shadow: 0 4px 14px rgba(7,64,128,.35);
        outline: none;
    }

    .pay-button:active {
        background: #053057;
        border-color: #053057;
        color: #ffffff !important;
    }

    .pay-button:focus-visible {
        outline: 3px solid #a3c4ff;
        outline-offset: 2px;
    }

.pay-button-sidebar {
    display: inline-block;
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .5rem 1rem;
    border: 2px solid #074080;
    border-radius: .375rem;
    background: #ffffff;
    color: #074080;
    text-decoration: none;
    line-height: 1.2;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.25);
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .pay-button-sidebar:hover, .pay-button-sidebar:focus {
        background: #074080;
        color: #ffffff !important;
        box-shadow: 0 6px 14px -2px rgba(7,64,128,.40);
        outline: none;
    }

    .pay-button-sidebar:active {
        background: #053057;
        border-color: #053057;
        color: #ffffff !important;
    }

    .pay-button-sidebar:focus-visible {
        outline: 3px solid #a3c4ff;
        outline-offset: 2px;
    }


/* === Video Gallery Component === */
.video-gallery {
    margin-bottom: 3rem;
}

.video-gallery-container {
    display: flex;
    gap: 1rem;
    padding: 1rem 1rem;
    background: rgba(242, 245, 247, .5);
    border: 2px solid #5e747a;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}


.upper-header .group-items-2.desktop {
    margin-left: 3%;
}

.upper-header .group-items-2.mobile {
    margin-left: 4%;
}

.upper-header .group-items-2 a.phone-number-top {
    margin-right: -1%;
}

.social-icon-layout {
    margin-left: 3%;
    width: 24%;
    right: 0;
}


@media (min-width:768px) {
    .video-gallery-container {
        padding: 1.5rem;
        gap: 1.25rem;
    }
}

.video-main {
    position: relative;
    flex: 0 0 66%;
    min-width: 320px;
    background: #000;
    overflow: hidden;
    border-radius: .375rem;
}

    .video-main iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        border: 0;
    }

    .video-main::before {
        content: "";
        display: block;
        padding-top: 56.25%;
    }

.video-sidebar {
    flex: 1 1 auto;
    position: relative;
    min-width: 0;
}

.video-sidebar-scroll {
    position: absolute;
    inset: 0;
    background: rgba(242, 245, 247, .5);
    overflow-y: auto;
    padding: .25rem;
}

.video-list {
    list-style: none;
    margin: 0;
    padding: .25rem;
}

.video-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2rem;
    padding: .35rem .5rem;
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.15;
    cursor: pointer;
    border: 1px solid #5e747a;
    border-radius: .25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    background: #ffffff;
    color: #5e747a;
    transition: background-color .2s, color .2s;
    user-select: none;
}

    .video-item:not(.video-item--selected):hover, .video-item:not(.video-item--selected):focus-visible {
        background: #5e747a;
        color: #ffffff;
        outline: none;
    }

.video-item--selected {
    background: rgba(94,116,122,0.8);
    color: #ffffff;
}

.video-item:focus-visible {
    outline: 3px solid #a3c4ff;
    outline-offset: 2px;
}

.video-item-icon {
    width: 1.75rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d1d5db;
    border-radius: 2px;
    flex-shrink: 0;
}

    .video-item-icon svg {
        width: .9rem;
        height: .9rem;
        fill: currentColor;
    }

.video-item-title {
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    flex: 1 1 auto;
}

.video-sidebar-scroll::-webkit-scrollbar {
    width: 10px;
}

.video-sidebar-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}

    .video-sidebar-scroll::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

.video-item--selected.video-item--pause,
.video-item--selected.video-item--dim {
    background: #ffffff !important;
    color: #5e747a !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    transition: background-color .2s, color .2s;
}

/* Sidebar Staff Component */
.staff-section {
    margin: 0 0 1.25rem 0;
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
}
/* selected + hovered = dark blue */
.video-item--selected:hover,
.video-item--selected:focus-visible {
    background: #5e747a;
    color: #ffffff;
}
/* Group wrapper unchanged */
.staff-group {
    padding: .3rem 0 .0rem;
    margin: 0;
}

    .staff-group:not(:first-child) {
        border-top: 1px solid #E0C7AB;
        margin-top: .6rem;
        padding-top: .75rem;
    }

.staff-group-title {
    font-family: inherit;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: #4d6166;
    line-height: 1.15;
    margin: 0 0 .20rem;
    display: inline-block;
}

    .staff-group-title + .staff-list {
        margin-top: .15rem;
    }

.staff-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.staff-member {
    font-family: inherit;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.35;
    color: #000;
    padding: 2px 0 0;
    word-break: break-word;
}

.sidebar-info .staff-member a[href^="tel:"] {
    font-size: 0.85rem;
    line-height: 1.2;
}

.staff-name {
    font-weight: 400;
    font-size: .9rem;
}

    .staff-name a:hover, .staff-name a:focus {
        color: #084298;
        text-decoration: underline;
    }

.staff-role {
    font-weight: 400;
    color: #555;
    font-size: .85rem;
}

.staff-contact {
    margin-top: 2px;
    font-size: 0.875rem;
    line-height: 1.2;
}

    .staff-contact a {
        color: #084298;
        text-decoration: underline;
        transition: color .15s ease-in-out;
        font-size: .9rem;
    }

        .staff-contact a:hover, .staff-contact a:focus {
            color: #084298;
            text-decoration: underline;
        }

.staff-contact-sep {
    color: #6b6b6b;
    padding: 0 2px;
}


/* No underline by default; underline linked names on hover/focus */
.sidebar-info a.staff-name {
    text-decoration: none;
    text-underline-offset: 2px;
    color: #084297;
}

    .sidebar-info a.staff-name:hover,
    .sidebar-info a.staff-name:focus {
        text-decoration-line: underline;
        text-underline-offset: 2px;
        color: #084297;
    }

/* underline only for links */
.staff-name[href]:hover {
    text-decoration: underline;
}
/* Only color linked staff names on hover; non-links stay default */
.sidebar-info .staff-member:hover a.staff-name {
    color: #084298;
}

.sidebar-info .staff-member:hover span.staff-name {
    color: inherit;
}

.jury-duty-btn:hover,
.jury-duty-btn:focus {
    background: #074080;
    border-color: #074080;
    box-shadow: 0 6px 16px -2px rgba(7,64,128,.40);
    outline: none;
}

    .jury-duty-btn:hover .jury-duty-label,
    .jury-duty-btn:focus .jury-duty-label,
    .jury-duty-btn:hover .jury-duty-number,
    .jury-duty-btn:focus .jury-duty-number {
        color: #ffffff;
    }

.jury-duty-btn:active {
    background: #053057;
    border-color: #053057;
}

.jury-duty-btn:focus-visible {
    outline: 3px solid #a3c4ff;
    outline-offset: 2px;
}

/* === Trust Steps component === */
.trust-steps {
    max-width: 550px;
    margin: .5rem 0;
}

    .trust-steps details > summary {
        list-style: none;
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .5rem .75rem;
        border: 1px solid #d1d5db;
        background: #f3f4f6;
        cursor: pointer;
        transition: background-color .18s ease, border-color .18s ease;
    }

        .trust-steps details > summary::-webkit-details-marker {
            display: none;
        }

    .trust-steps details[open] > summary {
        background: #e5e7eb;
        border-color: #cbd5e1;
    }

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    font-weight: 900;
    color: #fff;
    background: #70868C;
    flex-shrink: 0;
    line-height: 1;
}

.step-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
}

    .step-titlebar h3 {
        margin: 0;
        color: #000;
        font-size: 1.05rem;
        font-weight: 600;
    }

.chev {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    transition: transform .18s ease;
    flex-shrink: 0;
}

details[open] .chev {
    transform: rotate(180deg);
}

.step-body {
    border: 1px solid #e5e7eb;
    border-top: none;
    padding: .75rem .875rem;
    background: #ffffff;
}

.trust-steps details > summary, .trust-steps .step-body {
    box-sizing: border-box;
}

/* Social icons (footer) */
.social-icon-layout {
    margin-left: 45px;
    width: 23%;
    right: -110px;
    position: relative;
}

.social-icons {
    width: 58%;
    height: auto;
    display: block;
}

/* EVENTS PAGE */
.events-list {
    max-width: 900px;
    margin: 0;
    padding: 0;
}

.events-month-header {
    list-style: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background-color: #70868C;
    color: white;
    padding: 0.3rem 1.25rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border-bottom: 4px solid #f1f1f1;
}

    .events-month-header::-webkit-details-marker {
        display: none;
    }

.events-month-toggle-icon {
    margin-left: 1rem;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 700;
    width: 20px;
    text-align: center;
}

.events-month[open] .events-month-toggle-icon::before {
    content: "–";
}

.events-month:not([open]) .events-month-toggle-icon::before {
    content: "+";
}

.events-month {
    margin-top: 0.9rem;
}

.events-item {
    background-color: #f4f4f4;
    padding: 1.1rem 1.25rem;
    border-bottom: 3px solid #ffffff;
}

.events-item--alt {
    background-color: #e9e9e9;
}

.events-day-header {
    font-family: "Montserrat", sans-serif;
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #70868C;
}

.events-day-date {
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
}

.events-day-separator {
    margin: 0 0.45rem;
    font-size: 1rem;
    opacity: 0.6;
}

.events-day-weekday {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.events-body {
    font-family: "Montserrat", sans-serif;
}

.events-entry:not(:last-child) {
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.events-entry .events-title {
    margin: 0 0 0.1rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.events-entry .events-time {
    font-size: 0.85rem;
    margin: 0 0 0.1rem;
}

.events-entry .events-location {
    font-size: 0.85rem;
    margin: 0 0 0.1rem;
}

.events-entry .events-description {
    font-size: 0.83rem;
    margin: 0.25rem 0 0;
}


/* ============================================================
   EMPTY MONTH MESSAGE
   ============================================================ */

.events-empty {
    background-color: #f9f9f9;
    padding: 1rem 1.25rem;
    font-family: "Montserrat", sans-serif;
}

.events-empty-text {
    margin: 0;
    font-size: 0.9rem;
    font-style: italic;
    color: #555;
}

@media (min-width: 768px) {
    .global-search-input {
        width: 16rem;
    }

        .global-search-input:focus {
            width: 40rem;
        }
}

.global-search-input {
    transition: width 0.25s ease-out;
}

/* Search dropdown look */
#search-suggestions {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
    z-index: 15000 !important;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #e5e7eb;
}

    #search-suggestions button {
        transition: background-color 0.15s ease;
        font-size: 0.9rem;
    }

    #search-suggestions .section-header {
        color: #70868C !important;
        font-weight: 600;
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        padding-top: 1rem;
    }

.tracking-wide {
    letter-spacing: 0.025em;
}

/* Google CSE alignment */
.gsc-control-cse, .gsc-control-cse .gsc-search-box, .gsc-control-cse .gsc-search-box td.gsc-input {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.gsc-search-box {
    margin-left: 0 !important;
}

.gsc-control-wrapper-cse {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.gsc-search-button-v2 {
    height: 36px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .gsc-search-button-v2 svg {
        width: 15px !important;
        height: 15px !important;
    }

.gs-snippet {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.gs-url {
    font-size: 1.2rem !important;
}

.gsc-result-info {
    font-size: 1rem !important;
}

.gs-title {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
}

.gs-webResult div.gs-visibleUrl-breadcrumb {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
}

.gs-webResult .gs-visibleUrl {
    font-size: 1rem !important;
    line-height: 1.2 !important;
}

/* Invite Tribal Council form */
.council-page {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.council-form {
    max-width: 700px;
    font-size: 14px;
}

.council-required {
    color: #dc2626;
    font-weight: 700;
}

.council-required-note {
    color: #70868C;
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 1.75rem;
}

.council-section-title {
    font-size: 18px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 12px;
}

.council-label-heading {
    font-size: 12px;
    margin: 0 0 6px;
    font-weight: 700;
}

.council-field {
    margin-bottom: 15px;
}

.council-label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 16px;
}

.council-help {
    font-size: 16px;
    color: #70868c;
    margin-top: 10px;
    margin-bottom: 4px;
    font-weight: 600;
}

.council-input, .council-textarea, .council-select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #c0c0c0;
    background-color: #ffffff;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 4px;
}

.council-input--mt {
    margin-top: 6px;
}

.council-textarea {
    min-height: 80px;
    resize: vertical;
}

    .council-input:focus, .council-textarea:focus {
        outline: none;
        border-color: #4b6d76;
    }

.council-field--checkbox {
    margin-top: 8px;
    margin-bottom: 14px;
}

.council-check-label {
    font-size: 14px;
    font-weight: 600;
}

.council-checkbox {
    margin-right: 10px;
}

.council-grid {
    display: grid;
    gap: 20px;
}

.council-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.council-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.council-submit-row,
.council-actions-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: -5rem;
    margin-bottom: 3rem;
}

.council-submit-btn {
    min-width: 140px;
    padding: 10px 34px;
    border-radius: 24px;
    border: 1px solid #a0a0a0;
    background: linear-gradient(#f2f2f2, #d9d9d9);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

    .council-submit-btn:hover {
        background: linear-gradient(#ffffff, #cccccc);
    }

.council-form-container {
    max-width: 740px;
    margin-top: 3rem;
    padding: 1rem 1.25rem;
    border: 1px solid #3d2a1a;
    border-radius: 8px;
    background: #ffffff;
}
/* Council form: place reCAPTCHA and submit button on the same row */
.council-actions-row {
    display: flex;
    align-items: center; /* vertically center reCAPTCHA and button */
    justify-content: space-between;
    gap: 1rem; /* spacing between captcha and button */
    margin-top: 0.75rem;
    margin-bottom: 10px;
}


    /* Ensure reCAPTCHA doesn’t shrink oddly */
    .council-actions-row .g-recaptcha {
        flex: 0 0 auto; /* keep its intrinsic width */
    }

@media (max-width: 1199px) {
    /* Social icons (footer) */
    .social-icon-layout {
        margin-left: 45px;
        width: 20%;
        right: -75px;
        position: relative;
    }

    .directions-map > iframe {
        width: 100%;
    }
}

@media (max-width: 1023px) {
    /* Social icons (footer) */
    .social-icon-layout {
        width: 60%;
        right: -39px;
        margin-top: 3px;
        margin-left: 0;
    }

    .upper-header.container .group-items-2.desktop {
        display: none;
    }

    .upper-header .group-items-2.mobile {
        display: flex;
    }

    .upper-header.container.px-0 .group-items-2.mobile .social-icon-layout.gap-14px {
        gap: 1rem !important;
    }

    .upper-header .group-items-2.mobile {
        margin-left: 5%;
    }

    .group-items-2.mobile .phone-number-top.phone-pay-row {
        width: 100%;
    }

    .upper-header.container {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .upper-header .group-items-2 a.phone-number-top {
        margin-right: 55px;
        margin-top: 5px;
        margin-left: 20px;
    }
}

@media (max-width: 991px) {
    .social-icon-layout {
        right: -48px;
    }
}

@media (max-width: 950px) {
    .upper-header .group-items-2.mobile {
        margin-left: 4%;
    }

    .upper-header .group-items-2 a.phone-number-top {
        margin-right: 53px;
        margin-top: 5px;
        margin-left: 15px;
    }
}

@media (max-width: 930px) {
    .upper-header .group-items-2.mobile {
        margin-left: 4%;
    }

    .upper-header .group-items-2 a.phone-number-top {
        margin-right: 35px;
        margin-top: 5px;
        margin-left: 15px;
    }
}

@media (max-width: 900px) {
    .upper-header .group-items-2.mobile {
        margin-left: 3%;
    }

    .social-icon-layout {
        margin-left: 0;
        width: 54%;
        right: -24px;
    }

    .social-icons {
        width: 100%;
    }

    .upper-header .group-items-2 a.phone-number-top {
        margin-right: 15px;
        margin-top: 5px;
        margin-left: 8px;
    }
}

@media (max-width: 823px) {
    .group-items-1.gap-2 .relative.ml-4 {
        margin-left: 3px;
        gap: 1rem;
    }

    #global-search.global-search-input {
        width: 11rem;
    }

    .social-icon-layout.mobile {
        right: -23px;
    }
}

@media (max-width: 811px) {
    .social-icon-layout.mobile {
        margin-left: 0;
        width: 51%;
        right: -5px;
    }
}


@media (max-width: 767px) {
    .social-icon-layout.mobile {
        width: 24%;
        right: -17px;
    }

    .upper-header .group-items-2 a.phone-number-top {
        margin-right: 19px;
        margin-top: 5px;
        margin-left: 0;
    }

    .upper-header .group-items-2.mobile {
        margin-left: 0;
    }

    .navigation-bar.pt-4 {
        margin-top: 0;
        padding-top: 0;
        margin-right: -20px;
    }

    #global-search.global-search-input {
        width: 15rem;
    }

    .pay-online.px-6 {
        margin-left: 30%;
    }

    .group-items-1, .group-items-2 {
        width: 100%;
        justify-content: space-between;
    }

    .iamtulalip {
        text-align: left;
    }

    form.header-search-form {
        text-align: right;
    }

    .rssapp-card .rssapp-card-container_modern .rssapp-card-title a {
        line-height: 30px !important;
    }

    .navigation-bar div#mobileNavPanel.mobile-nav-panel {
        top: 5rem;
    }

    div#mobileNavPanel.mobile-nav-panel {
        top: 5rem !important;
    }

    div.aboutus-fade.pointer-events-none {
        background: none !important;
    }

    .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0;
        margin-top: 0;
    }

    .container.split.py-6 {
        padding-top: 10px;
    }
}

@media (max-width: 640px) {
    .social-icon-layout.mobile {
        width: 29%;
        right: -17px;
    }

    .events-item {
        padding: 0.9rem 1rem;
    }

    .event-date {
        flex-basis: 56px;
        width: 56px;
    }

    .events-day-date {
        font-size: 0.9rem;
    }

    .events-day-weekday {
        font-size: 0.75rem;
    }

    .events-entry .events-title {
        font-size: 0.88rem;
    }

    .council-form-container {
        padding: .75rem;
    }

    .rssapp-card-container_modern .rssapp-card-summary-container {
        padding: 10px 20px;
    }

    .modal-layout.fixed.justify-center {
        width: 90%;
    }

    .modal-layout .body-modal img.mr-8 {
        width: 18%;
    }
}

@media (max-width: 576px) {
    .pay-online.px-6 {
        padding-left: 10px;
        padding-right: 10px;
        margin: 0 auto;
        width: 34%;
        text-align: center;
    }


    .social-icon-layout.mobile {
        width: 33%;
        right: -17px;
    }

    header .subheader-wave {
        top: -16px !important;
    }

    header img.subheader-wave {
        min-height: 25px;
    }
}

.resend-invite-btn {
    display: inline-block;
    margin-top: 1rem;
    padding: .5rem 1.25rem;
    font-size: 1.125rem;
    border-radius: .5rem;
    background-color: #ffffff;
    color: #000000;
    font-weight: 600;
    border: 2px solid #70868C;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .resend-invite-btn:hover, .resend-invite-btn:focus {
        background-color: rgba(11, 94, 215, 0.10);
        color: #000000;
        outline: none;
        box-shadow: 0 4px 12px rgba(0,0,0,.15);
    }

    .resend-invite-btn:active {
        background-color: rgba(11, 94, 215, 0.18);
        border-color: #70868C;
    }

    .resend-invite-btn:focus-visible {
        outline: 3px solid #a3c4ff;
        outline-offset: 2px;
    }

.council-footnote {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin-top: 18px;
}

/* Make recent and suggested search items black */
#search-suggestions button {
    color: #000000 !important;
}

    #search-suggestions button:hover,
    #search-suggestions button:focus {
        color: #000000 !important;
    }


/* Forms & Publications accordion title (match faq-question) */
.forms-accordion-title {
    margin-top: 0.25rem;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    font-size: 1.05rem;
    font-weight: 600; /* semi-bold */
}

/* Subheading with horizontal divider */
.forms-subheading {
    /* existing styles */
    color: #60757b;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 2.5;
    margin: 0 0 .5rem 0;
    /* horizontal line */
    border-bottom: 2px solid #E0C7AB; /* brand brown divider */
    padding-bottom: .25rem; /* space above the line */
}

/* Forms & Publications: document list section background spans full width of the padded container */
.forms-doclist {
    display: block;
    background-color: #f8f8f887;
    padding: .5rem 1rem; /* inner padding for content */
}

.background-grey-waves {
    background-image: url('/images/Tulalip-Tribes-Background-Tribal-Light-Waves-Footer.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 200px;
}

footer {
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    position: relative;
    z-index: 0;
    padding-top: 20px;
}

.arrow-up {
    margin-top: -24px;
    z-index: 50;
}

.sub-footer.bg-brand-blue {
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    position: relative;
    z-index: 20;
    min-height: 300px;
    margin-top: 0;
    background-color: rgb(100 119 125 / var(--tw-bg-opacity, 1));
}

.sub-footer nav {
    background-color: rgb(100 119 125 / var(--tw-bg-opacity, 1));
}

.subfooter-backtotop {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-top: -64px;
    padding-bottom: 0;
}

    .subfooter-backtotop .back-to-top {
        position: relative;
        z-index: 50;
    }

.back-to-top {
    transition: all 0.3s ease;
    cursor: pointer;
}

    .back-to-top:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

.sub-footer a.text-black {
    color: white;
}

.sub-footer a.visited {
    color: white;
    text-decoration: underline
}

.sidebar-info .sidebar-extra-box {
    padding: 0;
    border: none;
    background: transparent;
}


/* ==============================
       Clean 3-column sitemap layout
============================== */

.sitemap-container {
    max-width: 1200px;
    margin: 0 auto;
}

.sitemap-section {
    padding: 2.5rem 0;
    border-top: 1px solid #e5e7eb;
}

    .sitemap-section:first-of-type {
        border-top: none;
        padding-top: 1.5rem;
    }

.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
}

@media (max-width: 1024px) {
    .sitemap-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .sitemap-grid {
        grid-template-columns: 1fr;
    }
}

.sitemap-group h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.sitemap-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

.sitemap-group li {
    margin-bottom: 0.35rem;
}

.sitemap-group a {
    color: #2563eb;
    text-decoration: none;
}

    .sitemap-group a:hover {
        text-decoration: underline;
    }

/* ==============================
       General links (horizontal)
============================== */

.sitemap-general-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.9rem;
}

    .sitemap-general-list a {
        color: #2563eb;
        text-decoration: none;
        white-space: nowrap;
    }

        .sitemap-general-list a:hover {
            text-decoration: underline;
        }

/* Bottom horizontal links divider */
.sitemap-general-section {
    border-top: 1px solid #e5e7eb;
    padding-top: 2rem;
}


/* ============================= */
/* Sitemap Layout */
/* ============================= */

.sitemap-section {
    padding: 2rem 0;
    border-top: 1px solid #e5e7eb;
}

.sitemap-general-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.875rem;
}

    .sitemap-general-list a {
        color: var(--brand-blue);
        text-decoration: none;
    }

        .sitemap-general-list a:hover {
            text-decoration: underline;
        }

/* Section group */
.sitemap-group h3 {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

/* THIS is what makes lists flow together */
.sitemap-list {
    columns: 1;
    column-gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .sitemap-list li {
        break-inside: avoid;
        margin-bottom: 0.35rem;
    }

    .sitemap-list a {
        font-size: 0.875rem;
        color: #7b3fa1; /* your purple link tone */
        text-decoration: none;
    }

        .sitemap-list a:hover {
            text-decoration: underline;
        }


/* Responsive */
@media (max-width: 1024px) {
    .sitemap-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .sitemap-columns {
        grid-template-columns: 1fr;
    }
}


/* ============================= */
/* Apple-style sitemap flow */
/* ============================= */

.sitemap-flow {
    column-count: 3;
    column-gap: 3rem;
}

/* Prevent headers/groups from breaking across columns */
.sitemap-group {
    break-inside: avoid;
    margin-bottom: 2rem;
}

    /* Titles */
    .sitemap-group h3 {
        font-weight: 600;
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }

/* Lists */
.sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .sitemap-list li {
        margin-bottom: 0.35rem;
    }

    .sitemap-list a {
        font-size: 0.875rem;
        color: #7b3fa1;
        text-decoration: none;
    }

        .sitemap-list a:hover {
            text-decoration: underline;
        }


/* Responsive behavior */
@media (max-width: 1024px) {
    .sitemap-flow {
        column-count: 2;
    }
}

@media (max-width: 640px) {
    .sitemap-flow {
        column-count: 1;
    }
}

/* General links divider — spacing matches other sections */
.sitemap-general-section {
    border-top: 1px solid #e5e7eb !important;
    padding-top: 0;
}

.sitemap-footer-links {
    border-top: 1px solid #e5e7eb;
    padding: 2.5rem 0;
}


/* ================================
   RFP – Archive Table Styling
   ================================ */

.rfp-archive-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .rfp-archive-table thead th {
        padding: .75rem .5rem;
        text-align: left;
        font-weight: 700;
        color: #60757b;
        border-bottom: 2px solid #60757b;
    }

    .rfp-archive-table tbody tr {
        border-bottom: 1px solid #E0C7AB;
    }

        .rfp-archive-table tbody tr:last-child {
            border-bottom: none;
        }

    .rfp-archive-table tbody td {
        padding: .85rem .5rem;
        vertical-align: top;
        line-height: 1.35;
    }

    .rfp-archive-table tbody tr:nth-child(even) {
        background-color: rgba(112, 134, 140, 0.05);
    }

    .rfp-archive-table tbody tr:hover {
        background-color: rgba(224, 199, 171, 0.25);
    }

    .rfp-archive-table tbody td:first-child {
        font-weight: 600;
        color: #3d2a1a;
    }

.rfp-archive-description {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}


/* RFP current list */
.rfp-list-item {
    padding: 1.25rem 0;
    border-bottom: 2px solid #E0C7AB;
}

    .rfp-list-item:last-child {
        border-bottom: none;
    }

    .rfp-list-item h3 {
        font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
        font-size: 1.35rem;
        font-weight: 700;
        color: #60757b;
        margin: 0 0 .4rem 0;
    }

    .rfp-list-item ul {
        margin: 0 0 .6rem 0;
        padding: 0;
        list-style: none;
    }

    .rfp-list-item li {
        font-size: 0.95rem;
        line-height: 1.35;
    }

    .rfp-list-item strong {
        color: black;
        font-weight: 600;
    }

    .rfp-list-item .submission, .rfp-list-item > div {
        margin-top: .6rem;
        font-size: .95rem;
        line-height: 1.45;
    }

    .rfp-list-item:hover h3 {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

/* QUICKLINKS RESPONSIVENESS (keep item-specific) */
@media (max-width: 1199px) {
    .section-bg-quicklinks {
        margin-top: -135px;
        padding-top: 124px;
        min-height: 412px;
    }

    .section-bg-quicklink ul.quicklinks-grid {
        padding-left: 7%;
        padding-right: 7%;
    }

    .section-bg-quicklink nav.mt-4 {
        margin-top: 2rem
    }

    .quicklinks-icon-circle {
        width: 8rem;
        height: 8rem;
    }

    img.quicklinks-icon {
        width: 4.5rem;
        height: 4.5rem;
    }

    .quicklinks-grid h3 {
        font-size: 1rem;
    }
}

@media (max-width: 991px) {
    img.subheader-wave {
        min-height: 30px;
    }

    .quicklinks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .eventsBox > .grid {
        grid-template-columns: 1fr !important;
    }

    .daily-events {
        padding-left: 0 !important;
    }

    .w-10r.h-10r.quicklinks-icon-circle.article-content p {
        width: 7rem;
        height: 7rem;
        margin-bottom: 10px;
    }

    .heading-h1 {
        margin-bottom: 0;
    }

    .heading-h2, .heading-h3, .heading-h4, .heading-h5, .heading-h6 {
        margin-top: 1.5rem;
        line-height: 1.5;
    }

    .section-bg-quicklinks .container, .section-bg-aboutus .container {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    div.tulalip-news.container {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .forms-doclist {
        padding: 0;
    }

    .forms-expanded-padding.p-4 {
        padding: .5rem 1rem;
    }

    aside.sidebar-info {
        position: relative;
        top: 15px;
    }

        aside.sidebar-info .sidebar-info {
            border-top: 1pt solid #969696;
            padding-top: 15px;
        }

    .modal-layout .body-modal img.mr-8 {
        width: 95px;
        margin-right: 1rem;
    }

    .modal-layout .body-modal .text-body-mobile {
        margin-top: -4px;
    }
}

@media (max-width: 767px) {
    img.quicklinks-icon {
        width: 4rem;
        height: 4rem;
    }
}

@media (max-width: 640px) {
    .quicklinks-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

/* Quicklinks jump */
.quicklinks-icon-circle {
    transition: transform .2s ease, box-shadow .2s ease;
    will-change: transform;
}

.quicklink-focusless:hover .quicklinks-icon-circle, .quicklink-focusless:focus-visible .quicklinks-icon-circle {
    animation: quicklink-jump 400ms cubic-bezier(.2,.7,.4,1);
}

.quicklink-focusless:active .quicklinks-icon-circle {
    transform: translateY(-5px) scale(.98);
}

@keyframes quicklink-jump {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-18px);
    }

    50% {
        transform: translateY(-22px);
    }

    65% {
        transform: translateY(-10px);
    }

    80% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .quicklinks-icon-circle {
        transition: none;
    }

    .quicklink-focusless:hover .quicklinks-icon-circle, .quicklink-focusless:focus-visible .quicklinks-icon-circle {
        animation: none;
        transform: translateY(-8px);
    }
}

/* Sidebar slim accordion toggle: restore white background and brand text color */
.sidebar-slim .sidebar-accordion-toggle {
    padding: 4px 8px;
    font-size: 16.5px;
    line-height: 1.3;
    font-weight: 100;
    background: #fff;
    color: #657676;
    border: 1px solid #d1d5db;
    border-radius: .375rem;
    margin-bottom: 4px;
    box-shadow: none;
    transition: box-shadow .2s, border-color .2s, background-color .2s;
    cursor: pointer;
}

    .sidebar-slim .sidebar-accordion-toggle > span {
        font-weight: 600;
        color: #657676;
        font-size: inherit;
    }

    /* Optional hover focus for slim variation (keeps white but refines border) */
    .sidebar-slim .sidebar-accordion-toggle:hover,
    .sidebar-slim .sidebar-accordion-toggle:focus-visible {
        border-color: #b0b7bf;
        background: #fff;
        outline: 0;
    }

/* Sidebar list container: set translucent brand background */
.sidebar-list-container {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .375rem;
    padding: .75rem;
}

@media (min-width: 1499px) {
    .back-top-arrow {
        top: -61px;
        right: -54px;
        z-index: 100;
    }
}

@media (min-width: 1600px) {
    .back-top-arrow {
        position: relative;
        top: -64px;
        right: -47px;
    }
}

@media (min-width: 1800px) {
    .back-top-arrow {
        position: relative;
        top: -62px;
        right: -120px;
    }
}

@media (min-width: 992px) {
    .eventsBox > .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .daily-events {
        padding-left: 1rem;
    }

    .article-content {
        margin-right: 25px;
    }
}

/* Quicklinks: 4 columns until 567px, then 2 columns */
.section-bg-quicklinks ul.quicklinks-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

/* Override earlier 2-col rule at ≤991px */
@media (max-width: 991px) {
    .section-bg-quicklinks ul.quicklinks-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        padding-left: 24px;
        padding-right: 24px;
    }

    /* shrink circles a bit on tablets */
    .w-10r.h-10r.quicklinks-icon-circle {
        width: 8rem;
        height: 8rem;
    }
}

/* Keep 4 columns between 568px–640px (override earlier 1-col rule) */
@media (max-width: 640px) and (min-width: 568px) {
    .section-bg-quicklinks ul.quicklinks-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 567px) {
    nav.mt-4 .section-bg-quicklinks ul.quicklinks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        row-gap: .5rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    section.section-bg-aboutus {
        padding-top: 10px;
    }
}

/* Mobile nav: white dropdown, visible when opened */
@media (max-width: 1023px) {
    /* Match your actual panel element – adjust if needed */
    #mobileNavPanel.mobile-nav-panel {
        position: fixed;
        left: 0;
        top: 2.7rem!important; /* sit beneath the header bar; bump if needed */
        width: 100%;
        margin: 0 auto;
        max-height: 100vh;
        overflow-y: auto;
        background: #ffffff; /* white background */
        color: #111111; /* dark text */
        z-index: 9999; /* above page content */
        padding: .75rem 1rem 1rem;
        box-shadow: 0 10px 30px rgba(0,0,0,.2);
    }

    .mobile-nav-list {
        max-width: 100%;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin: 1rem auto 0 auto;
        text-align: center;
    }

    .mobile-sublist {
        padding-left: 0;
    }

    .mobile-link {
        padding: .75rem .75rem;
        font-size: 1.05rem;
    }

    /* Ensure it displays when toggled */
    #mobileNavPanel.mobile-nav-panel.open {
        display: block;
    }

    button.mobile-group-toggle span.chevron {
        font-size: 14px;
    }

    /* Typical default hidden state */
    #mobileNavPanel.mobile-nav-panel.hidden {
        display: none;
    }

    .navigation-bar.pt-4 {
        margin-top: 0;
    }

    /* Link colors inside the panel */
    .mobile-nav-panel .mobile-link,
    .mobile-nav-panel .mobile-group-toggle {
        color: #111111;
        font-weight: 500;
        line-height: 2rem;
    }

        .mobile-nav-panel .mobile-link:hover,
        .mobile-nav-panel .mobile-link:focus,
        .mobile-nav-panel .mobile-group-toggle:hover,
        .mobile-nav-panel .mobile-group-toggle:focus {
            background: #70868C;
            color: #ffffff;
            padding: 2px 20px;
            font-size: 1.1rem;
        }

    ul li ul.mobile-sublist a.mobile-link {
        padding: .75rem .75rem;
        font-size: 1rem;
        font-weight: 400;
    }

    .top-line {
        border-top: 1px solid #787676;
        width: 70%;
        margin: 18px auto 0 auto;
    }

    li.mobile-mega-header {
        color: #000;
    }

        li.mobile-mega-header .mobile-link {
            font-size: 1rem !important;
            line-height: 1rem !important;
            text-transform: uppercase;
            letter-spacing: .5px;
            padding: 0;
            color: #000;
        }

    .text-body-mobile {
        font-size: 1.05rem;
        line-height: 1.7;
    }

        ul li ul.mobile-sublist a.mobile-link {
        font-size: 1.05rem;
    }

    .mobile-department-toggle {
        padding: 0.3rem 1rem!important;
    }
}

#mobileNavPanel.mobile-nav-panel.hidden {
    display: none;
}

#mobileNavPanel.mobile-nav-panel.open {
    display: block;
}

/* footer */
@media (max-width: 991px) {
    footer.homeFooter .container.mx-auto {
        position: relative;
        z-index: 20;
    }

    .homeFooter {
        background-image: none;
        background-size: unset;
        background-position: unset;
        background-repeat: unset;
        width: unset;
        min-width: unset;
        max-width: unset;
        position: unset;
        min-height: unset;
        margin-top: -20px;
    }

    .mobile-footer {
        background-image: url(../images/home-page/tulalip-background-tribal-light-waves-1000x200-footer.png);
        margin-top: -250px;
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        position: relative;
        z-index: 0;
        min-height: 100%;
        height: 250px;
    }
}

@media (max-width: 567px) {
    .homeFooter nav.bg-brand-brown {
        background-image: url('../images/home-page/TTT-Homepage-footer-basketweave-mobile-650x300.png');
        min-height: 200px;
        --tw-bg-opacity: 1;
        background-color: rgb(105 82 63 / var(--tw-bg-opacity, 1));
    }

    .home-subfooter {
        width: 80%;
        margin: 22px auto 0 auto;
    }

        .home-subfooter ul li span.pl-4 {
            display: none;
        }

        .home-subfooter ul.flex {
            display: grid !important; /* override Tailwind .flex */
            grid-template-columns: 1fr;
            margin-top: 0;
            justify-items: center;
            row-gap: 0.5rem !important;
            column-gap: 0 !important;
            line-height: .5rem;
        }

            .home-subfooter ul.flex > li {
                width: 100%;
            }

    footer.sub-footer nav[aria-label="Footer Navigation"] ul.flex {
        display: grid !important; /* override Tailwind .flex */
        grid-template-columns: 1fr;
        border-top: 1px solid #ffffff; /* white line above nav items */
        padding-top: 15px; /* 25px space below the line */
        margin: 0 35px;
        justify-items: center;
        row-gap: 0.5rem !important;
        column-gap: 0 !important;
        line-height: .5rem;
    }

    footer.sub-footer nav[aria-label="Footer Navigation"] {
        width: 80%;
        margin: 22px auto 0 auto;
    }

        footer.sub-footer nav[aria-label="Footer Navigation"] ul.flex > li {
            width: 100%;
        }

            footer.sub-footer nav[aria-label="Footer Navigation"] ul.flex > li > a {
                display: block;
                padding: 0.875rem 0;
                text-align: center;
            }

    .home-subfooter ul.flex > li > a {
        display: block;
        padding: 0.875rem 0;
        text-align: center;
    }

    footer.sub-footer nav[aria-label="Footer Navigation"] .copyright {
        margin-top: 25px;
    }

    .home-subfooter .copyright {
        margin-top: 25px;
    }

    /* Hide the vertical pipes between items on small screens */
    footer.sub-footer nav[aria-label="Footer Navigation"] ul.flex > li > span {
        display: none !important;
    }

    footer .home-subfooter nav[aria-label="Footer Navigation"] ul.flex > li > span {
        display: none !important;
    }

    .homeFooter .people-gathering-graphic {
        display: block;
        right: -30px;
        width: 145px;
        top: -109px;
    }

    .people-gathering-graphic {
        display: block;
        right: -40px;
        bottom: 95px;
        width: 145px;
    }

    img.whale-logo-sub.max-w-\[200px\] {
        max-width: 125px;
    }

    .breadcrumb-nav, .breadcrumb {
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
    }

    .faq-toggle-icon {
        padding-top: 0;
        font-size: 1.5rem;
        line-height: 1.8rem;
        font-weight: 600;
    }

    .faq-answer {
        padding-top: .5rem;
        padding-bottom: .5rem;
        padding-right: 2rem;
        padding-left: 2.5rem;
        font-size: .95rem;
        line-height: 1.4;
    }
}

@media (max-width: 540px) {
    .navigation-bar.pt-4 {
        margin-right: 0;
    }
}

@media (max-width: 520px) {
    .header-background .header-container.container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    section.navigation-bar.pt-4 {
        margin-top: 0;
        padding-top: 5px;
        margin-right: 15px;
        width: 95%;
    }

    main#main-content section.section-bg-quicklinks.relative .container {
        padding-left: 35px !important;
        padding-right: 40px !important;
    }

    h2.heading-h2, h3.heading-h3, h4.heading-h4, h5.heading-h5, h6.heading-h6 {
        letter-spacing: 0;
        margin-top: 1rem;
    }

    .sidebar-list-container {
        padding: .25rem .75rem .15rem .65rem;
    }

    .section-bg-quicklinks ul.quicklinks-grid {
        gap: 0;
    }

    section.section-bg-quicklinks {
        margin-top: -61px;
        padding-top: 92px;
        min-height: 296px;
    }

    div.w-10r.h-10r.quicklinks-icon-circle.mb-4 {
        width: 3.5rem;
        height: 3.5rem;
        margin-bottom: 3px;
    }

    img.quicklinks-icon.h-24.w-24 {
        width: 2.5rem;
        height: 2.5rem;
    }

    section.section-bg-aboutus {
        padding-top: 20px;
    }

    */

    .events-timeline {
        left: 9px;
    }

    .event-info {
        margin-left: 30px;
    }

    span.event-dot {
        left: 1px;
        width: 20px;
        height: 20px;
    }

    div.event-date {
        margin-right: 0;
    }

    .home-subfooter .copyright {
        margin-top: 25px;
        font-size: 13px;
    }
}

@media (max-width: 505px) {
    .social-icon-layout.mobile {
        width: 40%;
        right: -25px;
    }
}

@media (max-width: 485px) {
    section.section-bg-quicklinks.relative {
        margin-top: -95px;
        padding-top: 32px;
        min-height: 250px;
    }

    .section-bg-quicklinks ul.quicklinks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    div.w-10r.h-10r.quicklinks-icon-circle.mb-4 {
        width: 3.25rem;
        height: 3.25rem;
        margin-bottom: 3px;
        margin-top: 10px;
    }

    img.quicklinks-icon.h-24.w-24 {
        width: 2.35rem;
        height: 2.35rem;
    }

    .homeFooter .people-gathering-graphic {
        right: -45px;
    }

    .mobile-nav-panel, .mobile-nav-panel .mobile-group-toggle {
        color: #111111;
        font-weight: 500;
        line-height: 2rem;
        font-size: 1.1rem;
    }

        .mobile-nav-panel .mobile-link:hover, .mobile-nav-panel .mobile-link:focus, .mobile-nav-panel .mobile-group-toggle:hover, .mobile-nav-panel .mobile-group-toggle:focus {
            font-size: 1.1rem;
        }

    .top-line {
        width: 100%;
    }

    .mobile-sublist li.mobile-mega-header {
        font-size: 1.5rem;
        line-height: 1.9rem;
        line-height: 1.4rem;
    }

    .pay-online.px-6 {
        padding-left: 5px;
        padding-right: 5px;
        margin: 0 auto;
        width: 40%;
        text-align: center;
    }
}


/* Mobile navigation    */
@media (max-width: 485px) {
    .mobile-nav-list {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-top: 0;
    }

    .mobile-sublist li.mobile-mega-header {
        font-size: 1.5rem;
        line-height: 1.9rem;
        line-height: 1.4rem;
    }
}


/* RFP Archive Table: Single column layout at ≤485px */
@media (max-width: 485px) {
    .homeFooter .people-gathering-graphic {
        right: -45px;
    }

    /* Convert archive table to stacked cards on mobile */
    .rfp-archive-table thead {
        display: none; /* hide table headers */
    }

    .rfp-archive-table,
    .rfp-archive-table tbody,
    .rfp-archive-table tr,
    .rfp-archive-table td {
        display: block;
        width: 100%;
    }

        .rfp-archive-table tr {
            margin-bottom: .5rem;
            padding: .5rem 1rem;
            border: 1px solid #E0C7AB;
            border-radius: 4px;
            background-color: rgba(112, 134, 140, 0.03);
        }

        .rfp-archive-table td {
            padding: 0.5rem 0;
            border-bottom: 1px solid rgba(224, 199, 171, 0.3);
            text-align: left !important;
        }

        .rfp-archive-table tbody td {
            padding: .5rem 0;
            vertical-align: top;
        }

            .rfp-archive-table tbody td.mt-2 {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
            }

        .rfp-archive-table td:last-child {
            border-bottom: none;
        }

        /* Add labels before each cell */
        .rfp-archive-table td:nth-child(1)::before {
            content: "Project Name: ";
            font-weight: 700;
            color: #60757b;
        }

        .rfp-archive-table td:nth-child(2)::before {
            content: "Open Date: ";
            font-weight: 700;
            color: #60757b;
        }

        .rfp-archive-table td:nth-child(3)::before {
            content: "RFP No.: ";
            font-weight: 700;
            color: #60757b;
        }

        .rfp-archive-table td:nth-child(4)::before {
            content: "Close Date: ";
            font-weight: 700;
            color: #60757b;
        }

        .rfp-archive-table tr:hover {
            background-color: rgba(224, 199, 171, 0.15);
        }
}

@media (max-width: 475px) {
    img.quicklinks-icon.h-24.w-24 {
        width: 2.2rem;
        height: 2.2rem;
    }

    section.section-bg-aboutus {
        padding-top: 10px;
    }

    main#main-content section.section-bg-quicklinks.relative .container {
        padding-left: 25px;
        padding-right: 30px;
    }

    .section-bg-aboutus .container, .section-bg-events .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 455px) {
    .pay-online.px-6 {
        padding-left: 0;
        padding-right: 0;
        width: 45%;
    }

    .upper-header .group-items-2 a.phone-number-top {
        margin-right: 40px;
    }

    .upper-header .group-items-2.desktop {
        display: none !important;
    }

    section.section-bg-videos div.container.mx-auto {
        width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    div.tulalip-news.container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 435px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .navigation-bar div#mobileNavPanel.mobile-nav-panel {
        top: 8.6rem;
    }

    main#main-content section.section-bg-quicklinks.relative .container {
        padding-left: 33px;
        padding-right: 35px;
    }

    #mobileNavPanel.mobile-nav-panel {
        top: 116px !important; /* sit beneath the header bar; bump if needed */
     }

    section.section-bg-videos div.container.mx-auto {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    div#mobileNavPanel.mobile-nav-panel {
        top: 10.5rem;
    }

    .mobile-nav-list {
        padding-left: 1rem;
        padding-right: 1rem;
        margin-top: 0;
    }

    .upper-header .group-items-1.gap-2 {
        margin: 0 auto;
    }

    form#header-search-form {
        margin: 0 auto;
    }

    .group-items-1.gap-2 .relative.ml-4 {
        margin: 0 auto !important;
    }

    #global-search.global-search-input {
        min-width: 250px;
        width: 100%;
        padding-left: unset;
        padding-right: unset;
        margin: 0 auto;
        display: flex;
        text-align: center;
    }

    .upper-header .ml-4 {
        margin-left: auto;
        margin-right: auto;
    }

    .homeFooter .people-gathering-graphic {
        right: -50px;
        width: 130px;
        top: -97px;
    }

    .upper-header {
        text-align: center;
    }

        /* Common centering helpers inside upper header */
        .upper-header .container,
        .upper-header .container * {
            margin-left: auto;
            margin-right: auto;
        }

        /* Group 1: iAmtulalip on one line, search below, both centered */
        .upper-header .group-items-1 {
            display: grid !important; /* override flex if present */
            grid-template-columns: 1fr !important;
            justify-items: center;
            align-items: center;
            row-gap: .5rem;
            width: 100%;
            margin-bottom: 0;
            margin-top: 0;
        }

            .upper-header .group-items-1 .iamtulalip {
                text-align: center !important;
                width: 75%;
            }

            .upper-header .group-items-1 .header-search-form,
            .upper-header .group-items-1 form.header-search-form {
                width: 100%;
                max-width: 420px; /* constrain input width */
                margin: 0 auto;
                text-align: center !important;
            }

                .upper-header .group-items-1 .header-search-form input,
                .upper-header .group-items-1 form.header-search-form input {
                    width: 100%;
                }

        /* Group 2: phone, pay online, social icons each as a centered row */
        .upper-header .group-items-2 {
            display: grid !important;
            grid-template-columns: 1fr !important;
            justify-items: center;
            align-items: center;
            row-gap: unset;
            width: 100%;
            margin-bottom: 5px;
        }

            .upper-header .group-items-2 .phone-number-top,
            .upper-header .group-items-2 a.phone-number-top {
                text-align: left !important;
                padding-left: 0;
                width: 100%;
                padding-top: 3px;
                font-size: .95rem;
            }

            .upper-header .group-items-2 .pay-online {
                text-align: center;
                padding-right: 0;
                min-width: 75px;
                width: 100%;
            }

            .upper-header .group-items-2 .social-icon-layout {
                position: static; /* drop offseting for centering */
                width: auto; /* let content size define width */
                margin: 6px auto 0 auto;
            }

            .upper-header .group-items-2 img.social-icons {
                display: inline-block;
                width: 75%; /* reasonable size on mobile */
                height: auto;
            }

    .group-items-2 .social-icon-layout.mobile {
        width: 23% !important;
    }

    section.section-bg-aboutus {
        padding-top: 10px;
        padding-bottom: 50px;
    }

    .section-bg-aboutus .container article p.text-body-mobile {
        margin: 0;
    }

    section.section-bg-newsfeed .container.tulalip-news {
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media (max-width: 415px) {
    .header-container h1.text-h1-mobile {
        font-size: 1.40rem !important;
    }

    .header-container p.text-lg.mt-4 {
        font-size: .85rem;
        line-height: 1.5;
        margin-top: 5px;
    }

    #media-request-form.g-recaptcha {
        width: 80%;
    }
}

/* Council reCAPTCHA responsive at 415px and below */
@media (max-width: 415px) {
    #council-invite-form .g-recaptcha {
        width: 100% !important;
        max-width: 300px !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

        #council-invite-form .g-recaptcha > div {
            transform: scale(0.90) !important;
            transform-origin: 1 0 !important;
            width: 300px !important;
        }

    #council-invite-form {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
        overflow: hidden !important;
    }
}

/* Scale down council reCAPTCHA even more on very small screens */
@media (max-width: 375px) {
    #council-invite-form .g-recaptcha {
        max-width: 250px !important;
    }

        #council-invite-form .g-recaptcha > div {
            transform: scale(0.80) !important;
        }
}

/* Extra small screens - 320px */
@media (max-width: 320px) {
    #council-invite-form .g-recaptcha {
        max-width: 200px !important;
    }

    #council-invite-formm .g-recaptcha > div {
        transform: scale(0.85) !important;
    }
}


/* Media Request Form - Make reCAPTCHA responsive at 415px and below */
@media (max-width: 415px) {
    #media-request-form .g-recaptcha {
        width: 100% !important;
        max-width: 300px !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

        #media-request-form .g-recaptcha > div {
            transform: scale(0.90) !important;
            transform-origin: 1 0 !important;
            width: 300px !important;
        }

    #media-request-form {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
        overflow: hidden !important;
    }
}

/* Even smaller screens - 375px */
@media (max-width: 375px) {
    #media-request-form .g-recaptcha {
        max-width: 250px !important;
    }

        #media-request-form .g-recaptcha > div {
            transform: scale(0.80) !important;
        }
}

/* Extra small screens - 320px */
@media (max-width: 320px) {
    #media-request-form .g-recaptcha {
        max-width: 200px !important;
    }

        #media-request-form .g-recaptcha > div {
            transform: scale(0.85) !important;
        }
}

/* Council reCAPTCHA responsive at 415px and below */
@media (max-width: 415px) {
    .contact-layout form .g-recaptcha {
        width: 100% !important;
        max-width: 300px !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

        .contact-layout form .g-recaptcha > div {
            transform: scale(0.90) !important;
            transform-origin: 1 0 !important;
            width: 300px !important;
        }

    .contact-layout form {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
        overflow: hidden !important;
    }

    h1#page-title.heading-h1 {
        font-size: 1.80rem;
    }
}

/* Scale down council reCAPTCHA even more on very small screens */
@media (max-width: 375px) {
    .contact-layout form .g-recaptcha {
        max-width: 250px !important;
    }

        .contact-layout form .g-recaptcha > div {
            transform: scale(0.80) !important;
        }
}

/* Extra small screens - 320px */
@media (max-width: 320px) {
    .contact-layout form .g-recaptcha {
        max-width: 200px !important;
    }

        .contact-layout form .g-recaptcha > div {
            transform: scale(0.85) !important;
        }
}


@media (max-width: 400px) {
    .upper-header .group-items-1 {
        margin-top: 2px;
    }

    .subheader-wave {
        top: -8px !important;
    }

    section.section-bg-quicklinks {
        margin-top: -61px;
        padding-top: 92px;
        min-height: 307px;
    }

    section.section-bg-aboutus .container.mx-auto.mt-8 {
        margin-bottom: 0;
    }

    .events-timeline {
        left: 9px;
    }

    .event-info {
        margin-left: 30px;
    }

    span.event-dot {
        left: 1px;
        width: 20px;
        height: 20px;
    }

    div.event-date {
        margin-right: 0;
    }
}

@media (max-width: 485px) {
    .homeFooter .people-gathering-graphic {
        right: -45px;
    }

    .mobile-nav-panel, .mobile-nav-panel .mobile-group-toggle {
        color: #111111;
        font-weight: 500;
        line-height: 2rem;
        font-size: 1.1rem;
    }

        .mobile-nav-panel .mobile-link:hover, .mobile-nav-panel .mobile-link:focus, .mobile-nav-panel .mobile-group-toggle:hover, .mobile-nav-panel .mobile-group-toggle:focus {
            font-size: 1.1rem;
        }

    .top-line {
        width: 100%;
    }

    .mobile-sublist li.mobile-mega-header {
        font-size: 1.5rem;
        line-height: 1.9rem;
        line-height: 1.4rem;
    }

    .pay-online.px-6 {
        padding-left: 5px;
        padding-right: 5px;
        margin: 0 auto;
        width: 40%;
        text-align: center;
    }
}


/* Mobile navigation    */
@media (max-width: 485px) {
    .mobile-nav-list {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-top: 0;
    }

    .mobile-sublist li.mobile-mega-header {
        font-size: 1.5rem;
        line-height: 1.9rem;
        line-height: 1.4rem;
    }
}


/* RFP Archive Table: Single column layout at ≤485px */
@media (max-width: 485px) {
    .homeFooter .people-gathering-graphic {
        right: -45px;
    }

    /* Convert archive table to stacked cards on mobile */
    .rfp-archive-table thead {
        display: none; /* hide table headers */
    }

    .rfp-archive-table,
    .rfp-archive-table tbody,
    .rfp-archive-table tr,
    .rfp-archive-table td {
        display: block;
        width: 100%;
    }

        .rfp-archive-table tr {
            margin-bottom: .5rem;
            padding: .5rem 1rem;
            border: 1px solid #E0C7AB;
            border-radius: 4px;
            background-color: rgba(112, 134, 140, 0.03);
        }

        .rfp-archive-table td {
            padding: 0.5rem 0;
            border-bottom: 1px solid rgba(224, 199, 171, 0.3);
            text-align: left !important;
        }

        .rfp-archive-table tbody td {
            padding: .5rem 0;
            vertical-align: top;
        }

            .rfp-archive-table tbody td.mt-2 {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
            }

        .rfp-archive-table td:last-child {
            border-bottom: none;
        }

        /* Add labels before each cell */
        .rfp-archive-table td:nth-child(1)::before {
            content: "Project Name: ";
            font-weight: 700;
            color: #60757b;
        }

        .rfp-archive-table td:nth-child(2)::before {
            content: "Open Date: ";
            font-weight: 700;
            color: #60757b;
        }

        .rfp-archive-table td:nth-child(3)::before {
            content: "RFP No.: ";
            font-weight: 700;
            color: #60757b;
        }

        .rfp-archive-table td:nth-child(4)::before {
            content: "Close Date: ";
            font-weight: 700;
            color: #60757b;
        }

        .rfp-archive-table tr:hover {
            background-color: rgba(224, 199, 171, 0.15);
        }
}

/* Mobile department accordion styling */
.mobile-department-group {
    margin-top: 0.5rem;
}

.mobile-department-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 1rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    cursor: pointer;
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #111111;
    text-align: left;
    transition: background-color 0.2s, border-color 0.2s;
}

    .mobile-department-toggle:hover,
    .mobile-department-toggle:focus {
        background: #e5e7eb;
        border-color: #9ca3af;
        outline: none;
    }

.mobile-department-name {
    flex: 1;
    font-size: .95rem;
}

.mobile-department-toggle .chevron {
    font-size: 0.875rem;
    transition: transform 0.2s ease;
    margin-left: 0.5rem;
}

.mobile-department-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

.mobile-department-sublist {
    padding-left: 1rem;
    padding-top: 0.5rem;
}

/* On narrow screens, use cover to avoid large side/top bands */
@media (max-width: 768px) {
    .newsfeed-bg-img {
        object-fit: cover;
        object-position: center top;
    }
}

.events-item--focused {
    outline: 2px solid #8C6C54;
    outline-offset: 4px;
    scroll-margin-top: 120px; /* accounts for sticky headers */
}

.mobile-department-sublist .mobile-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
}



/* =====================================
   EVENTS CALENDAR – MOBILE / TABLET
   ===================================== */

@media (max-width: 991px) {

    /* Stack calendar + events */
    .eventsBox > .grid {
        grid-template-columns: 1fr !important;
    }

    .daily-events {
        padding-left: 0 !important;
    }

    /* Calendar table sizing */
    .calendar-box th,
    .calendar-box td {
        font-size: 1.6rem;
    }

    .calendar-box td {
        height: 3.25rem;
    }

    /* Event day circles */
    .calendar-day-number {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.5rem;
        border-width: 2px;
    }

    .today-no-event {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.4rem;
    }

    /* Timeline visuals */
    .events-timeline {
        left: 24px;
        width: 4px;
    }

    .event-dot {
        width: 28px;
        height: 28px;
        left: 14px;
    }

    .event-info {
        margin-left: 56px;
    }

    .event-day {
        font-size: 2.6rem;
        line-height: 2.8rem;
    }

    .event-month {
        font-size: 1.35rem;
        line-height: 1.25rem;
    }
}
/* =====================================
   EVENTS CALENDAR – SMALL LAPTOP
   ===================================== */

@media (max-width: 1199px) {

    .events-timeline {
        left: 32px;
        width: 4px;
    }

    .event-dot {
        width: 30px;
        height: 30px;
        left: 18px;
    }

    .event-info {
        margin-left: 64px;
    }

    .event-day {
        font-size: 3rem;
        line-height: 3.2rem;
    }

    .event-month {
        font-size: 1.5rem;
        line-height: 1.4rem;
    }
}
/* =====================================
   EVENTS CALENDAR – SMALL MOBILE
   ===================================== */

@media (max-width: 640px) {

    .calendar-box th,
    .calendar-box td {
        font-size: 1.4rem;
    }

    .calendar-day-number {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.3rem;
    }

    .today-no-event {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.25rem;
    }

    span.event-dot {
        left: 1px;
        width: 20px;
        height: 20px;
    }

    .events-timeline {
        left: 10px;
    }

    .event-info {
        margin-left: 36px;
    }

    .event-day {
        font-size: 2.2rem;
    }

    .event-month {
        font-size: 1.15rem;
    }
}
/* =====================================
   EVENTS CALENDAR – EXTRA SMALL PHONES
   ≤ 400px ONLY
   ===================================== */

@media (max-width: 400px) {

    /* Calendar header */
    .eventsBox h2.current-month {
        font-size: 1.55rem !important;
        line-height: 1.8rem !important;
    }

    .calendar-nav-arrow {
        font-size: 2.2rem;
    }

    /* Calendar table */
    .calendar-box th,
    .calendar-box td {
        font-size: 1.1rem;
        padding: .25rem 0;
    }

    .calendar-box td {
        height: 2.75rem;
    }

    /* Day circles */
    .calendar-day-number,
    .today-no-event {
        width: 2rem;
        height: 2rem;
        font-size: 1.1rem;
        border-width: 2px;
    }

    /* Events list spacing */
    .event-row {
        margin-bottom: .75rem;
    }

    /* Timeline + dots */
    .events-timeline {
        left: 6px;
        width: 3px;
    }

    .event-dot {
        width: 16px;
        height: 16px;
        left: 0;
    }

    /* Event content alignment */
    .event-info {
        margin-left: 26px;
        gap: .4rem;
    }

    .event-date {
        width: 48px;
        flex: 0 0 48px;
    }

    .event-month {
        font-size: 0.95rem;
        line-height: 1rem;
    }

    .event-day {
        font-size: 1.9rem;
        line-height: 2.1rem;
    }

    .event-title {
        font-size: .9rem;
    }

    .event-time {
        font-size: .85rem;
    }

    .calendar-day {
        font-size: 1.1rem;
    }
}
/* =====================================
   EVENTS CALENDAR – FIX DAY COLLISION
   EXTRA SMALL PHONES (≤ 400px)
   ===================================== */

@media (max-width: 400px) {

    /* Calendar container breathing room */
    .calendar-box {
        padding: .75rem .5rem;
    }

        /* Force equal-width cells */
        .calendar-box table {
            table-layout: fixed;
            width: 100%;
        }

        /* Day headers */
        .calendar-box th {
            font-size: .8rem;
            padding: .25rem 0;
            letter-spacing: .05em;
        }

        /* Day cells */
        .calendar-box td {
            height: 2.9rem;
            padding: .15rem 0;
            text-align: center;
        }

            /* Plain day numbers */
            .calendar-box td span {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 2rem;
                height: 2rem;
                font-size: 1.1rem;
            }

    /* Event + today circles */
    .calendar-day-number,
    .today-no-event {
        width: 2rem;
        height: 2rem;
        font-size: 1.1rem;
        line-height: 1;
        border-width: 2px;
    }

    /* Prevent numeric overlap */
    .calendar-day-link {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Weekday headers: S M T W T F S */
    .calendar-box thead th {
        font-size: 1rem;
        letter-spacing: .02em;
        padding-top: .15rem;
        padding-bottom: .15rem;
    }

    /* Slightly reduce overall table top spacing */
    .calendar-box thead tr {
        height: 2.1rem;
    }
}

@media (max-width: 355px) {
    .upper-header .group-items-2 img.social-icons {
        width: 100%;
    }
}

/* =====================================
   EVENTS CALENDAR – TABLET / SMALL LAPTOP
   Prevent stretched calendar (≈ 768–1024px)
   ===================================== */

@media (max-width: 1024px) and (min-width: 768px) {

    /* Center the calendar column */
    .calendar-box {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

        /* Keep table compact */
        .calendar-box table {
            width: 100%;
            table-layout: fixed;
        }

        /* Slightly tighten day cells */
        .calendar-box td {
            height: 3.1rem;
        }

    .calendar-day-number,
    .today-no-event {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.45rem;
    }

    /* Month header stays centered */
    .eventsBox h2.current-month {
        text-align: center;
    }
}
/* =====================================
   EVENTS CALENDAR – TABLET HEADER FIX
   Align arrows + month with calendar
   ===================================== */

@media (max-width: 1024px) and (min-width: 768px) {

    .eventsBox > article > .mb-2 {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .1rem;
    }

    /* Month title */
    .eventsBox h2.current-month {
        margin: 0;
        text-align: center;
        white-space: nowrap;
    }

    /* Arrows */
    .calendar-nav-arrow {
        position: static;
        transform: none;
        font-size: 2rem;
        line-height: 1;
    }
}

.contact-form-highlight {
    outline: 2px solid #70868C;
    outline-offset: 6px;
}
/* Highlight selected staff member in directory */
.directory-staff--active > button {
    background-color: rgba(112, 134, 140, 0.15); /* brand blue-gray tint */
    border-left: 4px solid #70868C;
    padding-left: 0.5rem;
    border-radius: 4px;
    transition: background-color .25s ease, border-color .25s ease;
}

/* Optional fade-out helper */
.directory-staff--fade {
    background-color: transparent;
    border-left-color: transparent;
}

@keyframes whale-breach-settle {
    /* resting */
    0% {
        transform: rotate(0deg) translateY(0) scale(1);
        filter: drop-shadow(0 0 0 rgba(0,0,0,0));
    }

    6% {
        transform: rotate(-0.6deg) translateY(-0.3px) scale(1.001);
    }

    12% {
        transform: rotate(-1.4deg) translateY(-0.6px) scale(1.002);
    }

    18% {
        transform: rotate(-2.4deg) translateY(-1px) scale(1.003);
    }

    24% {
        transform: rotate(-3.6deg) translateY(-1.4px) scale(1.004);
    }

    30% {
        transform: rotate(-5deg) translateY(-1.9px) scale(1.005);
        filter: drop-shadow(0 2px 0 rgba(0,0,0,0.08));
    }

    36% {
        transform: rotate(-6.6deg) translateY(-2.5px) scale(1.006);
        filter: drop-shadow(0 4px 0 rgba(0,0,0,0.12));
    }

    42% {
        transform: rotate(-8.2deg) translateY(-3.1px) scale(1.007);
        filter: drop-shadow(0 6px 0 rgba(0,0,0,0.16));
    }
    /* peak breach */
    48% {
        transform: rotate(-10deg) translateY(-3.6px) scale(1.008);
        filter: drop-shadow(0 8px 0 rgba(0,0,0,0.18));
    }
    /* hang time */
    54% {
        transform: rotate(-11.2deg) translateY(-3.9px) scale(1.008);
        filter: drop-shadow(0 9px 0 rgba(0,0,0,0.2));
    }

    60% {
        transform: rotate(-12deg) translateY(-4px) scale(1.008);
        filter: drop-shadow(0 10px 0 rgba(0,0,0,0.22));
    }
    /* gravity takes over */
    68% {
        transform: rotate(-9.5deg) translateY(-3.1px) scale(1.005);
        filter: drop-shadow(0 6px 0 rgba(0,0,0,0.14));
    }

    76% {
        transform: rotate(-6.5deg) translateY(-2px) scale(1.003);
        filter: drop-shadow(0 3px 0 rgba(0,0,0,0.08));
    }

    84% {
        transform: rotate(-3deg) translateY(-0.9px) scale(1.001);
        filter: drop-shadow(0 1px 0 rgba(0,0,0,0.04));
    }
    /* calm water */
    100% {
        transform: rotate(0deg) translateY(0) scale(1);
        filter: drop-shadow(0 0 0 rgba(0,0,0,0));
    }
}

.whale-logo-sub {
    display: inline-block; /* required for box-shadow */
    transform-origin: 40% 65%;
    will-change: transform;
}

.whale-animate {
    animation: whale-breach-settle 1.8s cubic-bezier(.22,.85,.35,1) forwards;
}

@media (prefers-reduced-motion: reduce) {
    a:hover .whale-logo-sub {
        animation: none;
        transform: none;
        filter: none;
    }
}

.section-bg-quicklinks {
    z-index: 0;
}

/* ===============================================
   MEGA MENU Z-INDEX FIX - FINAL VERSION
   =============================================== */

/* Navigation bar and mega menu at the top */
.navigation-bar {
    position: relative;
    z-index: 10000 !important;
}

#departments-mega-menu {
    position: absolute;
    z-index: 10000 !important;
}

.navigation.header-nav-width {
    position: relative;
    z-index: 10000 !important;
}

/* Desktop navigation items */
.desktop-strip {
    position: relative;
    z-index: 500 !important;
}

/* Header background and all its children MUST be lower */
.header-background {
    z-index: 1 !important;
    position: relative;
}

    .header-background .header-container {
        position: relative;
        z-index: 1 !important;
    }

    .header-background .navigation-bar {
        position: relative;
        z-index: 10000 !important; /* Exception: nav bar needs to be high */
    }

    .header-background .home-header-content {
        position: relative;
        z-index: 1 !important;
    }

/* Whale logo - must be below mega menu */
img.whale-logo {
    position: relative;
    z-index: 1 !important;
}

/* Site title and blurb - below mega menu */
h1.site-title,
p.site-blurb {
    position: relative;
    z-index: 1 !important;
}

/* QUICKLINKS - must be below mega menu (AGGRESSIVE FIX) */
.section-bg-quicklinks,
.section-bg-quicklinks *,
section.section-bg-quicklinks,
section.section-bg-quicklinks * {
    z-index: 1 !important;
}

/* Main content below everything */
#main-content,
#main-content * {
    z-index: 1 !important;
}

    /* BUT: Allow nav bar in main content to be high */
    #main-content .navigation-bar,
    #main-content .navigation.header-nav-width,
    #main-content #departments-mega-menu {
        z-index: 10000 !important;
    }

/* Video background at the very bottom yep */
.video-bg-wrapper {
    position: absolute;
    z-index: 0 !important;
}

/* Subheader wave */
.subheader-wave {
    position: relative;
    z-index: 2 !important;
}

#departments-mega-menu {
    margin-top: 12px !important; 
    transition: opacity 0.15s ease; 
}


/* Mobile Nav Panel Slide */
#mobileNavPanel {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

    #mobileNavPanel.translate-y-0 {
        transform: translateY(0);
    }

/* Overlay fade-in */
#mobileNavOverlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}

    #mobileNavOverlay:not(.hidden) {
        opacity: 1;
    }

/* Prevent text selection on overlay */
#mobileNavOverlay {
    user-select: none;
}

/* Close button styling (black X on white circle) */
#closeMobileNav {
    color: #000 !important;
    font-weight: bold;
    line-height: 1;
}

/* Body no-scroll when nav open */
body.overflow-hidden {
    overflow: hidden;
    height: 100vh;
}