/*
Theme Name:  acsdoc26
Theme URI:   https://github.com/drjoeward/acsd
Description: ACS Organic Division WordPress theme. WCAG 2.1 AA compliant. Bootstrap 5 via CDN. No build tools.
Version:     4.0.0
Author:      Joseph Ward
Author URI:  https://github.com/drjoeward
License:     MIT License
License URI: http://opensource.org/licenses/MIT
Text Domain: acsdoc26
*/

/* =============================================================================
   BASE RESETS & ACCESSIBILITY
   ============================================================================= */

/* Skip-to-content link for keyboard users */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: #000;
    color: #fff;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    z-index: 9999;
    text-decoration: none;
    transition: top 0.1s;
}
.skip-link:focus {
    top: 0;
}

/* Ensure focus is always visible (WCAG 2.4.7) */
*:focus-visible {
    outline: 3px solid #0056b3;
    outline-offset: 2px;
}

/* =============================================================================
   TYPOGRAPHY & BODY
   ============================================================================= */

body {
    font-family: 'Metropolis', 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #212529;
    background-color: #fff;
}

/* =============================================================================
   LAYOUT
   ============================================================================= */

.site-main {
    min-height: 50vh;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

/* =============================================================================
   NAVIGATION
   ============================================================================= */

/* megamenu-pro output inherits Bootstrap 5 navbar — keep selector specificity low */
.navbar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Active menu item indicator */
.nav-item.active-current-item > .nav-link,
.nav-item.current-menu-item > .nav-link {
    font-weight: 600;
}

/* =============================================================================
   SIDEBAR
   ============================================================================= */

.sidebar .widget {
    margin-bottom: 2rem;
}

.sidebar .widget h3,
.sidebar .widget h4 {
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 0.4rem;
    margin-bottom: 1rem;
}

/* =============================================================================
   ENTRIES / POSTS
   ============================================================================= */

.entry-title a {
    color: inherit;
    text-decoration: none;
}
.entry-title a:hover {
    text-decoration: underline;
}

.entry-meta {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
}

/* =============================================================================
   BUTTONS
   ============================================================================= */

/* Preserve content-editor class from TinyMCE styles panel */
.btn.alt-button {
    background-color: transparent;
    border: 2px solid currentColor;
}

/* =============================================================================
   SIDEBAR BLOCK (TinyMCE custom style)
   ============================================================================= */

.sidebar-block {
    background-color: #f8f9fa;
    border-left: 4px solid #0056b3;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

/* =============================================================================
   SEARCH FORM
   ============================================================================= */

.search-form {
    display: flex;
    gap: 0.5rem;
}

.search-form .search-field {
    flex: 1;
}

/* =============================================================================
   PAGINATION
   ============================================================================= */

.bb-pagination {
    margin: 2rem 0;
}

.bb-pagination .pager {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bb-pagination .pager li a,
.bb-pagination .pager li span {
    display: block;
    padding: 0.375rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    color: #0056b3;
    text-decoration: none;
    background-color: #fff;
}

.bb-pagination .pager li.active span {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #fff;
}

.bb-pagination .pager li a:hover {
    background-color: #e9ecef;
}

/* =============================================================================
   FOOTER
   ============================================================================= */

.site-footer {
    margin-top: 3rem;
    font-size: 0.9rem;
}

/* Footer top band — blue bg, white text, social icons */
.bb-footer__top {
    background-color: #3a6486;
    color: #fff;
    padding: 12px 0;
}

/* Social icon links */
.footer-social a {
    display: inline-block;
    margin: 0 0.4rem;
    font-size: 1.5rem;
    color: #fff;
    text-decoration: none;
    transition: color 0.15s;
}

.footer-social a:hover {
    color: rgba(255, 255, 255, 0.75);
}

.social-title {
    color: #fff;
    font-size: 0.85rem;
}

/* Footer bottom band — white bg, logos + copyright */
.bb-footer__bottom {
    background-color: #fff;
    color: #333333;
    border-top: 1px solid #dee2e6;
    font-size: 0.85rem;
}

.bb-footer__bottom a {
    color: #333333;
    text-decoration: none;
}

.bb-footer__bottom a:hover {
    color: #ba0000;
    text-decoration: underline;
}

/* Footer logo images */
.bb-footer__bottom img {
    max-height: 100px;
    width: auto;
}

/* Privacy/footer nav — pipe-separated inline list */
.bb-nav__footer-admin {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.bb-nav__footer-admin li {
    display: flex;
    align-items: center;
}

.bb-nav__footer-admin li + li::before {
    content: '|';
    margin: 0 0.4rem;
    color: #999;
}

.site-footer .widget h4 {
    color: #fff;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

/* =============================================================================
   WORDPRESS CORE CLASSES (alignment, captions, etc.)
   ============================================================================= */

.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 0 auto 1rem; }
.alignnone  { float: none; }

.wp-caption {
    max-width: 100%;
    margin-bottom: 1rem;
}
.wp-caption-text {
    font-size: 0.8rem;
    color: #6c757d;
    text-align: center;
    padding-top: 0.25rem;
}

img.alignleft,
img.alignright,
img.aligncenter,
img.alignnone {
    max-width: 100%;
    height: auto;
}

/* =============================================================================
   METROPOLIS FONT FACE (loaded from /metropolis-font/)
   ============================================================================= */

@import url('metropolis-font/metropolis.regular.css');
@import url('metropolis-font/metropolis.medium.css');
@import url('metropolis-font/metropolis.bold.css');
@import url('metropolis-font/metropolis.light.css');

/* =============================================================================
   PHASE 3: BRAND COLORS & SITE-SPECIFIC STYLES
   Ported from assets/styles/sass/ source files.
   Bootstrap 5 loads from CDN. This file handles all site-specific overrides.
   Brand: red #ba0000 | blue #3a6486 | dark gray #333333 | bg #eaf0f5
   ============================================================================= */

/* --- Container ---------------------------------------------------------------- */

/* Match old theme's 90% / 1400px constraint inside Bootstrap's container-fluid */
.container-fluid {
    max-width: 1400px;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}

/* --- Global Typography -------------------------------------------------------- */

a {
    color: #ba0000;
}

a:hover,
a:focus {
    color: #3a6486;
}

h1, h2, h5 {
    color: #3a6486;
}

h3, h4 {
    color: #333333;
}

h6 {
    color: #333333;
}

/* --- Site Header -------------------------------------------------------------- */

#bb-header {
    background-color: #fff;
    border-top: 5px solid #ba0000;
    position: relative;    /* logo uses position:absolute against this */
    min-height: 130px;
    z-index: 100;
    transition: all 0.6s ease-in-out;
}

/* Container-fluid is the positioning parent for the absolute logo */
#bb-header .container-fluid {
    position: relative;
}

/* Logo: absolutely positioned at the left edge of the container (not the viewport) */
#bb-header .bb-logo-wrap {
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 10;
}

#bb-header .bb-logo-wrap .bb-logo {
    display: inline-block;
    margin: 15px 0 0 10px;
}

#bb-header .bb-logo img.main-logo {
    max-width: 140px;
    width: auto;
    height: auto;
    display: block;
}

/* Secondary (white) logo: hidden until .shrink */
#bb-header .bb-logo img.secondary-logo {
    display: none;
}

/* Nav wrap: full-width inline-block — megamenu #{$wrap} floats right inside */
#bb-header .bb-nav__action-wrap {
    display: inline-block;
    width: 100%;
}

/* Search + action buttons: float right, above the megamenu row */
#bb-header .bb-nav__action-right {
    float: right;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 10px;
}

/* Search field sizing */
#bb-header .utility-bar .search-form {
    min-width: 180px;
}

/* Action nav items are red buttons (EC MEMBER / LOGOUT / JOIN / LOGIN) */
.bb-nav__action ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bb-nav__action ul li a {
    display: inline-block;
    background: #ba0000;
    color: #fff !important;
    border: 2px solid #ba0000;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.bb-nav__action ul li a:hover,
.bb-nav__action ul li a:focus {
    background: #fff;
    color: #ba0000 !important;
    border-color: #ba0000;
}

/* Sticky/shrink: JS adds .shrink to #bb-header on scroll past 50px (desktop only) */
#bb-header.shrink {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 72px;
    background-color: #ba0000;
    border-top: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 1000;
}

/* Admin bar pushes fixed header down 32px (46px on small screens) */
body.admin-bar #bb-header.shrink {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar #bb-header.shrink {
        top: 46px;
    }
}

#bb-header.shrink .bb-logo-wrap {
    top: 0;
    left: 5px;
}

#bb-header.shrink .bb-logo-wrap .bb-logo {
    margin: 0;
}

#bb-header.shrink .bb-logo-wrap .bb-logo img.main-logo {
    max-width: 115px;
    max-height: 60px;
    width: auto;
    height: auto;
}

#bb-header.shrink .bb-logo-wrap .bb-logo img.primary-logo {
    display: none;
}

#bb-header.shrink .bb-logo-wrap .bb-logo img.secondary-logo {
    display: block;
    max-width: 115px;
    max-height: 60px;
    width: auto;
    height: auto;
}

#bb-header.shrink .bb-nav__action-right {
    display: none; /* hide search+buttons when shrunk */
}

/* Push content down when header is sticky (JS sets exact px value) */
body.header-shrunk {
    padding-top: 130px; /* fallback; JS overrides with measured value */
}

/* --- Primary Nav Megamenu (compiled from plugin Custom Styling SCSS) ----------- */
/*
 * Source SCSS used #{$wrap} = #mega-menu-wrap-primary_navigation
 *                  #{$menu} = #mega-menu-primary_navigation
 *                  @include desktop = min-width 992px
 *                  @include mobile  = max-width 991px
 * Once confirmed working, clear the plugin's "Custom Styling" box to avoid conflicts.
 */

@media (min-width: 992px) {
    /* Push primary nav to the right, leaving room for the absolutely-positioned logo */
    #mega-menu-wrap-primary_navigation {
        width: calc(100% - 200px);
        clear: both;
        float: right;
        margin-top: 15px;
    }

    /* Sticky header: red background on the nav bar */
    #bb-header.shrink #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation {
        background: #ba0000;
        clear: both;
        float: right;
        margin-top: 15px;
    }

    /* Sticky header: white text on nav items */
    #bb-header.shrink #mega-menu-primary_navigation > li.mega-menu-item > a.mega-menu-link {
        color: #fff;
    }
}

@media (max-width: 991px) {
    #mega-menu-wrap-primary_navigation {
        float: right;
    }
}

/* --- Sidebar Megamenu (accordion mode) ---------------------------------------- */

/* Ensure the sidebar megamenu renders as a block (vertical accordion) */
#mega-menu-wrap-sidebar_navigation {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both;
    margin-top: 0 !important;
}

#mega-menu-sidebar_navigation {
    display: block !important;
    width: 100% !important;
}

#mega-menu-sidebar_navigation > li.mega-menu-item {
    display: block !important;
    float: none !important;
    width: 100% !important;
}

/* Third-level indent from megamenu custom CSS */
#mega-menu-wrap-sidebar_navigation #mega-menu-sidebar_navigation.mega-menu-accordion > li.mega-menu-flyout > ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu a.mega-menu-link {
    padding-left: 40px;
}

/* --- Custom CSS from ACF site options (ported to work with #bb-header) -------- */

/* Anchor offset for sticky header */
a.anchor {
    display: block;
    position: relative;
    top: -115px;
    visibility: hidden;
}

/* Event date no-wrap */
#bb-widgets-section .home-widget .bb-event-widget .bb-date span {
    white-space: nowrap;
}

/* Footer bucket alignment */
#bb-footer .bb-footer__bottom .footer-bucket,
.bb-footer__bottom .footer-bucket {
    text-align: center;
}

/* Content links should not be bold */
.main-content a {
    font-weight: normal;
}

/* Gravity Forms font fixes */
.gfield_description {
    font-size: 100%;
}
.gform_wrapper form .gform_body input,
.gform_wrapper form .gform_body textarea,
.gform_wrapper form .gform_body select {
    font-weight: normal;
}

/* Search results */
.bb-search__result article {
    padding-bottom: 17px;
    margin-top: 17px;
}

.bb-search__result .btn-primary {
    background: none;
    color: #ba0000;
    border: none;
}

.bb-search__result .btn-primary:hover {
    background: none;
    color: #ba0000;
    border: none;
}

/* Video post category */
article.category-histvid .entry-title {
    display: none;
}

div.bb-post-video__wrap {
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid #eee;
}

/* Faculty list */
ul.faclist {
    font-size: larger;
}

/* Home section padding */
#bb-info-section,
#bb-home-news-section,
#bb-widgets-section {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Caption callout links */
a.bb-caption-callout {
    color: white;
}
a.bb-caption-callout:hover {
    color: #ba0000;
}

/* Upcoming events */
ul.upcoming-events {
    list-style-type: none;
    width: 100%;
}

/* Footer social FA icons */
.bb-footer__top .fa,
.footer-social .fa {
    padding: 5px;
    color: white;
}

.bb-footer__top .fa:hover,
.footer-social .fa:hover {
    color: #3a6486;
    background: white;
    opacity: 0.7;
}

/* My Calendar plugin */
.mc-event-list-container {
    width: 100%;
}

/* News title min-height (md+) */
@media (min-width: 768px) {
    #bb-home-news-section .bb-news-title {
        min-height: 48px;
    }
}

/* --- Pages Header / Banner (#bb-banner) --------------------------------------- */

#bb-banner {
    position: relative;
    overflow: hidden;
    background-color: #3a6486;
    height: 200px;
}

@media (min-width: 576px) {
    #bb-banner { height: 300px; }
}

@media (min-width: 768px) {
    #bb-banner { height: 400px; }
}

/* Banner with background image */
#bb-banner.img-bg {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Banner with inline image (Image type) */
#bb-banner .bb-banner__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Wrap fills the banner and positions caption */
#bb-banner .bb-banner__wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
}

/* Caption outer container */
.bb-caption-outer {
    width: 100%;
}

/* Caption: full-width red overlay at bottom */
.bb-caption {
    background-color: rgba(186, 0, 0, 0.78);
    color: #fff;
    padding: 10px 20px;
}

.bb-caption.bb-caption__left  { text-align: left; }
.bb-caption.bb-caption__right { text-align: right; }
.bb-caption.bb-caption__center { text-align: center; }

.bb-caption h1,
.bb-caption h2 {
    color: #fff;
    margin: 0;
    font-size: 1.4rem;
}

@media (min-width: 768px) {
    .bb-caption h1,
    .bb-caption h2 {
        font-size: 1.9rem;
    }
}

/* Color-bg variant: solid brand-2 blue, no image */
#bb-banner.color-bg {
    background-color: #3a6486;
}

/* --- Inner Page Layout -------------------------------------------------------- */

/* Main content + sidebar wrapper */
#bb-main {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

/* Content column — sidebar is on LEFT so border goes on the left */
.main-content.with-sidebar {
    border-left: 5px solid #eaf0f5;
    padding-left: 25px;
}

@media (max-width: 991.98px) {
    .main-content.with-sidebar {
        border-left: none;
        padding-left: 0;
        border-top: 5px solid #eaf0f5;
        padding-top: 1.5rem;
    }
}

/* Sidebar */
.bb-aside {
    padding-right: 1rem;
}

@media (max-width: 991.98px) {
    .bb-aside {
        padding-right: 0;
        border-top: 1px solid #dee2e6;
        padding-top: 1.5rem;
        margin-top: 1.5rem;
    }
}

.inner-sidebar {
    padding: 0 10px;
}

/* Sidebar navigation: only show current-menu-item children */
.bb-aside .widget_nav_menu ul ul {
    display: none;
}

.bb-aside .widget_nav_menu .current-menu-item > ul,
.bb-aside .widget_nav_menu .current-menu-ancestor > ul {
    display: block;
}

.bb-aside .widget_nav_menu a {
    color: #3a6486;
    text-decoration: none;
    display: block;
    padding: 3px 0;
    font-size: 0.9rem;
}

.bb-aside .widget_nav_menu a:hover {
    color: #ba0000;
    text-decoration: underline;
}

.bb-aside .widget_nav_menu .current-menu-item > a {
    font-weight: 600;
    color: #ba0000;
}

/* --- Blog / Post List --------------------------------------------------------- */

.post-row .entry-title a {
    color: #3a6486;
}

.post-row .entry-title a:hover {
    color: #ba0000;
    text-decoration: underline;
}

.post-row article {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.post-row article:last-child {
    border-bottom: none;
}

/* --- Pagination (brand colors) ------------------------------------------------ */

.bb-pagination .pager li a {
    color: #3a6486;
}

.bb-pagination .pager li.active span {
    background-color: #ba0000;
    border-color: #ba0000;
}

/* --- Sidebar Block (brand accent) --------------------------------------------- */

.sidebar-block {
    border-left-color: #3a6486;
}

/* --- Buttons (brand) ---------------------------------------------------------- */

.btn-primary {
    background-color: #ba0000;
    border-color: #ba0000;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #8f0000;
    border-color: #8f0000;
}

.btn-secondary {
    background-color: #3a6486;
    border-color: #3a6486;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #2e5070;
    border-color: #2e5070;
}

/* --- Gravity Forms overrides -------------------------------------------------- */

.gform_wrapper .gform_title {
    color: #3a6486;
}

.gform_wrapper .gform_submit input[type="submit"],
.gform_wrapper input[type="submit"] {
    background-color: #ba0000 !important;
    border-color: #ba0000 !important;
    color: #fff !important;
}

.gform_wrapper input[type="submit"]:hover {
    background-color: #8f0000 !important;
    border-color: #8f0000 !important;
}

/* Required field asterisk */
.gform_wrapper .gfield_required {
    color: #ba0000;
}

/* --- Events (The Events Calendar / ai1ec) ------------------------------------- */

.tribe-events-calendar td.tribe_events_cat-featured {
    background-color: #eaf0f5;
}

/* --- Virtual Symposia --------------------------------------------------------- */

.blog-cont h1 {
    color: #3a6486;
    border-bottom: 3px solid #ba0000;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* --- Utility classes (carried from old theme) --------------------------------- */

/* Full-width background section */
.bb-section {
    padding: 3rem 0;
}

.bb-section-blue {
    background-color: #3a6486;
    color: #fff;
}

.bb-section-blue h2,
.bb-section-blue h3 {
    color: #fff;
}

.bb-section-red {
    background-color: #ba0000;
    color: #fff;
}

.bb-section-red h2,
.bb-section-red h3 {
    color: #fff;
}

.bb-section-light {
    background-color: #eaf0f5;
}

/* Tagline / subtitle text style */
.tagline {
    font-size: 1.1rem;
    color: #3a6486;
    font-style: italic;
}

/* =============================================================================
   HOME SLIDER
   Bootstrap 5 carousel. Compiled from _s__slider.scss.
   ============================================================================= */

#bb-home-slider-section {
    background-color: #fff;
    position: relative;
}

/* Slide background image — responsive heights */
#bb-home-slider-section .carousel-item .bg-img {
    background-size: cover !important;
    background-position: center 15% !important;
    height: 150px;
}

@media (min-width: 768px) {
    #bb-home-slider-section .carousel-item .bg-img { height: 390px; }
}

@media (min-width: 992px) {
    #bb-home-slider-section .carousel-item .bg-img { height: 525px; }
}

@media (min-width: 1275px) {
    #bb-home-slider-section .carousel-item .bg-img { height: 550px; }
}

@media (min-width: 1700px) {
    #bb-home-slider-section .carousel-item .bg-img { height: 600px; }
}

/* Caption overlay */
#bb-home-slider-section .carousel-caption {
    position: absolute;
    text-shadow: none;
    color: #fff;
    bottom: 20px;
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    padding: 0 35px;
}

#bb-home-slider-section .carousel-caption.caption-left  { text-align: left; }
#bb-home-slider-section .carousel-caption.caption-right { text-align: right; }

@media (min-width: 768px) {
    #bb-home-slider-section .carousel-caption { top: 70px; bottom: auto; }
}

@media (min-width: 992px) {
    #bb-home-slider-section .carousel-caption { top: 130px; }
}

#bb-home-slider-section .carousel-caption h1 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    #bb-home-slider-section .carousel-caption h1 { font-size: 45px; white-space: normal; }
}

@media (min-width: 992px) {
    #bb-home-slider-section .carousel-caption h1 { font-size: 60px; line-height: 82px; margin-bottom: 20px; }
}

#bb-home-slider-section .carousel-caption p          { font-size: 12px; line-height: 1; }
@media (min-width: 768px) { #bb-home-slider-section .carousel-caption p { font-size: 18px; } }
@media (min-width: 992px) { #bb-home-slider-section .carousel-caption p { font-size: 24px; } }

/* Caption callout / CTA button */
.bb-caption-callout {
    display: inline-block;
    background: #ba0000;
    color: #fff !important;
    border: 2px solid #ba0000;
    padding: 10px 24px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    text-decoration: none !important;
    margin-top: 15px;
    transition: background 0.2s ease, color 0.2s ease;
}

.bb-caption-callout:hover {
    background: #fff;
    color: #ba0000 !important;
}

/* Slide indicators — hidden on mobile/tablet, flex on desktop */
#bb-home-slider-section .carousel-indicators {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    padding: 0;
    margin: 0;
    justify-content: center;
}

@media (min-width: 992px) {
    #bb-home-slider-section .carousel-indicators { display: flex; }
}

#bb-home-slider-section .carousel-indicators button {
    width: 95px;
    height: 7px;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 0 !important;
    margin: 0 2px;
    padding: 0;
    opacity: 1;
    text-indent: -9999px;
}

#bb-home-slider-section .carousel-indicators .active {
    background-color: #fff;
}

/* Prev/next controls — hidden until hover, hidden on mobile */
#bb-home-slider-section .carousel-control-prev,
#bb-home-slider-section .carousel-control-next {
    display: none;
    z-index: 100;
}

@media (min-width: 768px) {
    #bb-home-slider-section .home-slider:hover .carousel-control-prev,
    #bb-home-slider-section .home-slider:hover .carousel-control-next {
        display: flex;
    }
}

/* =============================================================================
   HOME CTAs — HEXAGONAL TILES
   Compiled from _s__ctas.scss + hexagon() mixin.
   hexagon(170px, #fff, 4px solid #fff):
     height = 170 * 0.577 = 98px  |  margin = 170 * 0.288 = 49px
     pseudo w/h = 170 * 0.707 = 120px  |  left = 170 * 0.129 = 22px
     top/bottom offset = 170 * 0.353 = 60px
   ============================================================================= */

/* Mobile: solid background bar */
#bb-ctas-section {
    position: relative;
    width: 100%;
    background-color: #eaf0f5;
    padding: 20px 0;
}

/* Desktop: absolute, overlapping the bottom of the slider */
@media (min-width: 768px) {
    #bb-ctas-section {
        position: absolute;
        background: none;
        margin-top: -210px;
        padding: 0;
        z-index: 100;
        width: 100%;
    }
}

@media (min-width: 992px) {
    #bb-ctas-section { margin-top: -250px; }
}

/* Text BEFORE/AFTER the CTA tiles (section-level headings) is white over the image.
   h4 is intentionally excluded — hex tile titles use brand red, set below. */
#bb-ctas-section .bb-section__before,
#bb-ctas-section .bb-section__after {
    color: #fff;
}

/* Hex tile title: brand red — overrides any inherited white with high specificity */
#bb-ctas-section .cta-item .hex h4 {
    color: #ba0000 !important;
}

/* Inner wrap: centred, max-width 890px */
#bb-ctas-section .bb-section__wrap {
    max-width: 890px;
    width: 90%;
    margin: 0 auto;
    padding: 0 15px;
}

/* CTA row — flexbox replacement for BS3 .row */
.cta-group {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #c0cdd6;
    border-bottom: none;
}

@media (min-width: 768px) {
    .cta-group {
        border: none;
        margin-left: -18px;
    }
}

/* Individual CTA item — full width on mobile, fractional on desktop */
.cta-item {
    width: 100%;
    border-bottom: 1px solid #c0cdd6;
    background: #fff;
    isolation: isolate; /* keeps hex z-index: -1 pseudo-elements scoped */
}

@media (min-width: 768px) {
    .cta-item {
        border: none;
        background: none;
        text-align: center;
        padding-left: 18px;
    }
    .cta-item__one   { width: 100%; }
    .cta-item__two   { width: 50%; }
    .cta-item__three { width: 33.333%; }
    .cta-item__four  { width: 25%; }
    .cta-item__five  { width: 20%; }
    .cta-item__six   { width: 16.666%; }
}

/* Link wrapper */
.cta-item a {
    padding: 18px 18px 14px;
    display: inline-block;
    width: 100%;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}

@media (min-width: 768px) {
    .cta-item a { padding: 0; }
}

/* --- Hexagon shape (desktop only) --- */

/* Mobile: plain block, no clipping */
.cta-item .hex {
    display: block;
}

@media (min-width: 768px) {
    .cta-item .hex {
        position: relative;
        width: 170px;
        height: 98px;
        background-color: #fff;
        margin: 49px 0;
        border-left: 4px solid #fff;
        border-right: 4px solid #fff;
        display: inline-block;
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .cta-item .hex::before,
    .cta-item .hex::after {
        content: "";
        position: absolute;
        z-index: -1;
        width: 120px;
        height: 120px;
        transform: scaleY(0.5774) rotate(-45deg);
        background-color: inherit;
        left: 22px;
        transition: border-color 0.2s ease;
    }

    .cta-item .hex::before {
        top: -60px;
        border-top: 4px solid #fff;
        border-right: 4px solid #fff;
    }

    .cta-item .hex::after {
        bottom: -60px;
        border-bottom: 4px solid #fff;
        border-left: 4px solid #fff;
    }
}

/* Icon (Font Awesome) inside hex */
.cta-item .hex .fa,
.cta-item .hex [class^="fa-"],
.cta-item .hex [class*=" fa-"] {
    color: #666666;
    font-size: 24px;
    float: left;
}

@media (min-width: 768px) {
    .cta-item .hex .fa,
    .cta-item .hex [class^="fa-"],
    .cta-item .hex [class*=" fa-"] {
        float: none;
        display: inline-block;
    }
}

/* Title inside hex */
.cta-item .hex h4 {
    color: #ba0000;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    float: left;
    margin: 6px 0 0 16px;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .cta-item .hex h4 {
        float: none;
        display: inline-block;
        margin: 16px 0 0;
        font-size: 20px;
        line-height: 27px !important;
        width: 100%;
        padding: 0 15px;
    }
}

/* Image inside hex */
.cta-item .hex img {
    float: left;
    max-width: 22px;
}

@media (min-width: 768px) {
    .cta-item .hex img {
        float: none;
        display: inline-block;
    }
}

/* Description / hover text — hidden by default */
.cta-item .hex > span {
    color: #fff;
    background: #0e2d47;
    display: none;
    font-size: 10px;
}

/* --- Hover state (desktop only) ---
   Swap to dark-blue hex, blue border; hide icon/title; show description. */
@media (min-width: 768px) {
    .cta-item a:hover .hex .fa,
    .cta-item a:hover .hex [class^="fa-"],
    .cta-item a:hover .hex [class*=" fa-"],
    .cta-item a:hover .hex h4,
    .cta-item a:hover .hex img {
        display: none;
    }

    .cta-item a:hover .hex {
        background-color: #0e2d47;
        border-color: #3a6486;
    }

    .cta-item a:hover .hex::before {
        border-top-color: #3a6486;
        border-right-color: #3a6486;
    }

    .cta-item a:hover .hex::after {
        border-bottom-color: #3a6486;
        border-left-color: #3a6486;
    }

    .cta-item a:hover .hex > span {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-family: Arial, sans-serif;
        height: 100%;
        padding: 0 10px;
        text-align: center;
    }

    .cta-item a:hover {
        color: #fff;
    }
}

/* Wrap slider + CTAs together so the absolutely-positioned CTA section has a
   positioned ancestor to anchor to. The wrapper height = slider height; the CTAs
   overlap the slider bottom via negative margin-top. Content after the wrapper
   needs padding to clear the protruding bottom of the CTA hexagons (~40px). */
.home-hero-wrap {
    position: relative;
}

/* Push content after the hero wrap down to clear the hexagon overhang */
@media (min-width: 768px) {
    .home-hero-wrap + * {
        padding-top: 20px;
    }
}

@media (min-width: 992px) {
    .home-hero-wrap + * {
        padding-top: 10px;
    }
}

/* =============================================================================
   SECTION LAYOUT SYSTEM (.bb-section__wrap / __outer / __inner)
   Used by every home-page section: info, news, widgets, features, testimonials.
   Compiled from _e__section.scss + individual section SCSS files.
   ============================================================================= */

/* Section spacing (replaces %bb-section-spacing) */
#bb-info-section,
#bb-home-news-section,
#bb-widgets-section,
#bb-features-section,
#bb-testimonials-section {
    margin: 0;
    padding: 30px 0;
}

@media (min-width: 768px) {
    #bb-info-section,
    #bb-home-news-section,
    #bb-widgets-section,
    #bb-features-section,
    #bb-testimonials-section {
        padding: 50px 0;
    }
}

@media (min-width: 992px) {
    #bb-info-section,
    #bb-home-news-section,
    #bb-widgets-section,
    #bb-features-section,
    #bb-testimonials-section {
        padding: 70px 0;
    }
}

/* __wrap: centred container, 95% wide (matches production width: 95%) */
.bb-section__wrap {
    width: 95%;
    max-width: 1400px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

/* News section gets a tighter max-width */
#bb-home-news-section .bb-section__wrap {
    max-width: 1200px;
}

/* __outer: Bootstrap 5 flex row */
.bb-section__outer {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* __inner: full width mobile → col-sm-10 offset-sm-1 → col-md-8 offset-md-2 */
.bb-section__inner {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .bb-section__inner {
        width: 83.333%;           /* col-sm-10 */
        margin-left: 8.333%;      /* offset-sm-1 */
    }
}

@media (min-width: 992px) {
    .bb-section__inner {
        width: 66.666%;           /* col-md-8 */
        margin-left: 16.666%;     /* offset-md-2 */
    }
}

/* Section title / before text */
.bb-section__title,
.bb-section__before {
    font-size: 1.8rem;
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .bb-section__title,
    .bb-section__before {
        font-size: 2.2rem;
    }
}

/* Section after text */
.bb-section__after {
    text-align: center;
    margin-top: 1rem;
}

/* Info section: centred text */
#bb-info-section {
    text-align: center;
}

#bb-info-section .bb-section__inner > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* =============================================================================
   HOME NEWS SECTION
   Compiled from _s__news-items.scss.
   2-col grid at md+. 60px gutter (outer: margin-left -60px; items: padding-left 60px).
   ============================================================================= */

/* Override general __inner for news title row (full width, no centring offset) */
#bb-home-news-section .bb-section__inner {
    width: 100%;
    margin-left: 0;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 992px) {
    #bb-home-news-section .bb-section__inner {
        padding-left: 60px;
    }

    /* Wide gutter: negative margin on outer, positive padding on each article */
    #bb-home-news-section .bb-section__outer {
        margin-left: -60px;
        margin-right: 0;
    }
}

/* Section title / headline */
#bb-home-news-section .bb-home-news__title h1,
#bb-home-news-section .headline h1 {
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 2px solid #e1e1e1;
    margin-bottom: 25px;
}

@media (min-width: 768px) {
    #bb-home-news-section .headline h1 {
        padding-bottom: 15px;
        margin-bottom: 50px;
    }
}

/* Each news article: full-width mobile → 50% (2 col) at md+ */
.bb-news__wrap {
    width: 100%;
    padding: 0 15px;
    margin-bottom: 25px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .bb-news__wrap {
        width: 50%;
        padding-left: 60px;
        padding-right: 0;
    }
}

/* Excerpt wrap: stretch to fill article height for equal-height rows */
.bb-news__excerpt-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* News title link */
.bb-news-title {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 1.35;
    margin-bottom: 5px;
    color: #ba0000;
    text-decoration: none;
    font-weight: 700;
}

@media (min-width: 768px) {
    .bb-news-title {
        font-size: 18px;
        line-height: 24px;
    }
}

.bb-news-title:hover,
.bb-news-title:focus {
    color: #3a6486;
    text-decoration: underline;
}

/* Excerpt text */
.bb-news-excerpt {
    font-size: 13px;
    font-weight: 300;
    line-height: 18px;
    color: #333;
}

@media (min-width: 768px) {
    .bb-news-excerpt {
        font-size: 15px;
        line-height: 24px;
    }
}

/* "More News" callout button row */
.bb-home-news__callout {
    text-align: center;
    margin-top: 15px;
}

/* Before/after section text */
#bb-home-news-section .bb-section__before {
    text-align: center;
}

#bb-home-news-section .bb-section__after {
    text-align: center;
    margin-top: 25px;
}