/* ============================================================================
   Global Styles & Reset
   ============================================================================ */

/* Global font settings */
* {
    font-family: 'Open Sans', sans-serif;
    letter-spacing: -0.02em;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Scroll padding to account for sticky header when using anchor links */
html {
    scroll-padding-top: 130px; /* Height of header-section + site-header */
}

/* For pages with hero banner, adjust scroll padding dynamically */
.has-hero-banner {
    scroll-padding-top: 130px;
}

/* Add scroll-margin-top to all elements that might be anchor targets */
:target,
[id] {
    scroll-margin-top: 130px;
}

/* Prevent horizontal scroll only on body using clip (does NOT create a scroll container,
   so position: sticky continues to work relative to the viewport scroll) */
body {
    overflow-x: clip;
}
/* html and body intentionally have no overflow-y — the viewport (html) scrolls naturally.
   Any overflow-y: auto/scroll/hidden on body would make body the scroll container
   instead of the viewport, which breaks position: sticky on nested elements. */

.page-body p {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .page-body p {
        font-size: 0.875rem !important;
    }
}

/* ============================================================================
   Breadcrumb Styles
   ============================================================================ */

.breadcrumb-container {
    padding: 15px 0;
    border: 1px solid #dadde6;
}

.breadcrumb-container .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.breadcrumb-nav {
    flex: 1;
    min-width: 0;
}

.breadcrumb-container .breadcrumb {
    --bs-breadcrumb-divider: '';
    --bs-breadcrumb-item-active-color: #7D55C7;
    --bs-breadcrumb-divider-color: #1e3268;
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
    min-width: 0;
}

    .breadcrumb-container .breadcrumb::-webkit-scrollbar {
        display: none;
    }

.breadcrumb-container .breadcrumb-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
}

    .breadcrumb-container .breadcrumb-item + .breadcrumb-item::before,
    .breadcrumb-container .breadcrumb-item::before {
        flex-shrink: 0;
    }

    .breadcrumb-container .breadcrumb-item + .breadcrumb-item::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        margin: 0 12px;
        padding: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 4L10 8L6 12' stroke='%231E3268' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 16px;
        vertical-align: middle;
    }

    .breadcrumb-container .breadcrumb-item a {
        color: #1e3268 !important;
        text-decoration: none;
        font-weight: 600;
    }

        .breadcrumb-container .breadcrumb-item a:hover {
            color: #1e3268 !important;
            text-decoration: underline;
        }

    .breadcrumb-container .breadcrumb-item.active {
        color: #1e3268 !important;
        font-weight: 600;
    }

        .breadcrumb-container .breadcrumb-item.active + .breadcrumb-item::before {
            color: #1e3268 !important;
        }

    /* Specific override for the separator before active item */
    .breadcrumb-container .breadcrumb-item:has(+ .breadcrumb-item.active)::after,
    .breadcrumb-container .breadcrumb-item:last-child::before {
        color: #1e3268 !important;
    }

/* Breadcrumb text truncation */
.breadcrumb-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 0.813rem;
}

/* Breadcrumb link wrapper */
.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
}

/* Current page shows full text on desktop; truncates only when out of space */
.breadcrumb-item-current .breadcrumb-text {
    max-width: 100%;
}

/* Breadcrumb ellipsis dropdown */
.breadcrumb-ellipsis-btn {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    color: #1e3268 !important;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

    .breadcrumb-ellipsis-btn:hover,
    .breadcrumb-ellipsis-btn:focus {
        color: #1e3268 !important;
        text-decoration: underline;
    }

/* Prevent the open dropdown menu from being clipped by the breadcrumb overflow */
.breadcrumb-container .breadcrumb:has(.dropdown-menu.show) {
    overflow: visible;
}

.breadcrumb-item-ellipsis .dropdown-menu .dropdown-item {
    font-size: 0.813rem;
    font-weight: 600;
    color: #1e3268;
    text-transform: capitalize;
}

    .breadcrumb-item-ellipsis .dropdown-menu .dropdown-item.disabled {
        color: #6c757d;
    }

/* Ensure the open ellipsis dropdown renders above following elements
   (e.g., the mobile-current-page bar on guidelines chapter pages) */
.breadcrumb-item-ellipsis .dropdown-menu {
    z-index: 1060;
}

.breadcrumb-container:has(.dropdown-menu.show) {
    position: relative;
    z-index: 1060;
}

/* Desktop: show the full trail and hide the ellipsis */
@media (min-width: 768px) {
    .breadcrumb-container .breadcrumb-item-ellipsis {
        display: none;
    }
}

/* Mobile: collapse middle items into the ellipsis dropdown */
@media (max-width: 767.98px) {
    .breadcrumb-container .breadcrumb-item-middle {
        display: none;
    }
}

/* Breadcrumb Actions (Share & Print buttons) */
.breadcrumb-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.breadcrumb-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: #1e3268 !important;
    font-weight: 600;
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
}

    .breadcrumb-action-btn span {
        font-size: 0.813rem;
    }

    .breadcrumb-action-btn:hover,
    .breadcrumb-action-btn:focus,
    .breadcrumb-action-btn:active,
    .breadcrumb-action-btn:visited {
        color: #1e3268 !important;
        text-decoration: none;
        background: transparent;
    }

    .breadcrumb-action-btn svg {
        color: #1e3268 !important;
    }

    .breadcrumb-action-btn svg [fill="currentColor"] {
        fill: #1e3268 !important;
    }

.breadcrumb-icon {
    width: 0.813rem;
    height: 0.813rem;
    flex-shrink: 0;
}

.dropdown-arrow {
    width: 12px;
    height: 12px;
    margin-left: -2px;
}

.breadcrumb-separator {
    color: #d0d0d0;
    font-size: 20px;
    margin: 0 4px;
}

.breadcrumb-action-btn {
    text-decoration: none !important;
    font-weight: 600 !important;
}

    .breadcrumb-action-btn:hover {
        text-decoration: underline !important;
    }

/* Share Dropdown Customization */
.share-dropdown .dropdown-menu {
    min-width: 200px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 8px 0;
}

.share-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #1e3268 !important;
    font-size: 0.813rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

    .share-dropdown .dropdown-item:hover,
    .share-dropdown .dropdown-item:focus,
    .share-dropdown .dropdown-item:active {
        background-color: #f5f5f5;
        color: #1e3268 !important;
    }

    .share-dropdown .dropdown-item svg {
        color: #1e3268 !important;
        fill: #1e3268 !important;
    }

.shareaholic-share-item {
    position: relative;
}

.share-dropdown .dropdown-item svg {
    width: 0.813rem;
    height: 0.813rem;
    flex-shrink: 0;
}

/* Copy Link toast notification */
.copy-link-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: #1e3268;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 1080;
    pointer-events: none;
}

    .copy-link-toast.show {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .breadcrumb-container {
        padding: 15px 30px;
    }

        .breadcrumb-container .breadcrumb {
            font-size: 16px;
        }

        .breadcrumb-container .breadcrumb-item + .breadcrumb-item::before {
            margin: 0 8px;
        }

    .breadcrumb-action-btn {
        padding: 6px 10px;
    }

        .breadcrumb-action-btn span {
            font-size: 0.625rem;
        }

    .breadcrumb-icon {
        width: 0.625rem;
        height: 0.625rem;
    }

    .share-dropdown .dropdown-item {
        font-size: 0.625rem;
    }

        .share-dropdown .dropdown-item svg {
            width: 0.625rem;
            height: 0.625rem;
        }

    .breadcrumb-container .breadcrumb {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .breadcrumb-container .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .breadcrumb-container .breadcrumb-item {
        flex-shrink: 0;
    }

    .breadcrumb-item-current .breadcrumb-text {
        max-width: 180px;
    }

    .breadcrumb-text {
        font-size: 0.625rem;
    }
}

@media (max-width: 768px) {
    .breadcrumb-container {
        padding: 10px 16px;
        gap: 8px;
    }

        .breadcrumb-container .breadcrumb {
            font-size: 14px;
            flex: 1;
            min-width: 0;
        }

        .breadcrumb-container .breadcrumb-item + .breadcrumb-item::before {
            margin: 0 4px;
            width: 14px;
            height: 14px;
            background-size: 14px 14px;
        }

    .breadcrumb-action-btn {
        padding: 6px 8px;
        gap: 4px;
        padding-right: 0 !important;
    }

        .breadcrumb-action-btn span {
            font-size: 0.625rem;
        }

        /* Keep text visible on mobile */
        .breadcrumb-action-btn span {
            display: inline;
        }

    .breadcrumb-icon {
        width: 0.625rem;
        height: 0.625rem;
    }

    .dropdown-arrow {
        width: 10px;
        height: 10px;
    }

    .breadcrumb-separator {
        font-size: 16px;
        margin: 0 2px;
    }

    /* Truncate breadcrumb text on mobile */
    .breadcrumb-item-first .breadcrumb-text {
        max-width: 60px;
    }

    .breadcrumb-item-current .breadcrumb-text {
        max-width: 120px;
    }

    .breadcrumb-text {
        max-width: 80px;
    }
}

@media (max-width: 575.98px) {
    .breadcrumb-container {
        padding: 8px 12px;
        gap: 6px;
    }

        .breadcrumb-container .breadcrumb {
            font-size: 10px;
        }

        .breadcrumb-container .breadcrumb-item + .breadcrumb-item::before {
            margin: 0 3px;
            width: 13px;
            height: 13px;
            background-size: 13px 13px;
        }

    .share-dropdown .dropdown-item {
        font-size: 0.625rem;
    }

        .share-dropdown .dropdown-item svg {
            width: 0.625rem;
            height: 0.625rem;
        }

    .share-dropdown .dropdown-menu {
        padding:0;
    }

    .breadcrumb-action-btn {
        padding: 4px 6px;
        gap: 3px;
    }

        .breadcrumb-action-btn span {
            font-size: 0.625rem;
        }

    .breadcrumb-icon {
        width: 0.625rem;
        height: 0.625rem;
    }

    .breadcrumb-separator {
        font-size: 14px;
    }

    /* More aggressive truncation on very small screens */
    .breadcrumb-item-first .breadcrumb-text {
        max-width: 50px;
    }

    .breadcrumb-item-current .breadcrumb-text {
        max-width: 100px;
    }

    .breadcrumb-text {
        max-width: 60px;
    }
}

/* ============================================================================
   Global Button Styles
   ============================================================================ */

/* Yellow CTA Button - Yellow background with blue text */
.btn-cta-yellow {
    display: inline-block;
    background-color: #FFD255;
    color: #1e3268;
    font-weight: 700;
    /*    font-size: 0.875rem;*/
    padding: .8rem 2rem;
    border-radius: 50px;
    text-decoration: none !important;
    border: 1px solid #FFD255;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: -0.01em;
    text-align: center;
}

    .btn-cta-yellow:hover {
        background-color: #ffffff;
        border: 1px solid #ffd255;
        text-decoration: none !important;
    }

/*    .btn-cta-yellow:active,
    .btn-cta-yellow:focus {
        background-color: #1e3268;
        color: #FFD255;
        border-color: #1e3268;
        text-decoration: none;
        outline: none;
    }*/

/* White CTA Button - White background with blue text */
.btn-cta-white {
    display: inline-block;
    background-color: #FFFFFF;
    color: #1e3268;
    font-weight: 700;
    font-size: 1rem;
    padding: .8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    border: 2px solid #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: -0.01em;
}

    .btn-cta-white:hover {
        background-color: #1e3268;
        color: #FFFFFF;
        border: 2px solid #ffffff;
        text-decoration: none;
    }

    .btn-cta-white:active,
    .btn-cta-white:focus {
        background-color: #1e3268;
        color: #FFFFFF;
        border-color: #FFFFFF;
        text-decoration: none;
        outline: none;
    }

.btn-primary {
    background-color: #1E3268;
    border: 2px solid #1E3268;
    border-radius: 50rem;
    color: #fff;
    font-weight: 600;
    padding: .8rem 2rem;
    transition: all 0.3s ease;
}

    .btn-primary:hover {
        background-color: #fff;
        color: #1E3268;
        border-color: #1E3268;
    }

/* ============================================================================
   Site Header & Navigation
   ============================================================================ */

.sticky-header-wrapper {
    z-index: 1050;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.header-container,
.footer-section > .container-fluid {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero banner pages - fixed position header */
.has-hero-banner .sticky-header-wrapper.sticky-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.site-header {
    position: relative;
    z-index: 1040;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    justify-content: center;
    transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
}

/* Hero banner pages: site-header starts transparent */
.has-hero-banner .site-header {
    background: transparent;
}

/* Site header becomes white when scrolled past hero (only on hero pages) */
.has-hero-banner .sticky-header-wrapper.header-scrolled .site-header {
    background: #ffffff;
    border-bottom: 1px solid #dde0e9;
}

.nav-pill-shell {
    background-color: #ffffff;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    /* Mirror the hero pages' pill content position (95% width centered +
       0.5rem padding, capped at 1440px) so the logo and search icon stay
       in the same place when navigating between hero and non-hero pages. */
    padding: 0.5rem calc((100% - min(95%, 1440px)) / 2 + 0.5rem);
    gap: 4rem;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hero banner pages: nav-pill starts as transparent pill */
.has-hero-banner .nav-pill-shell {
    background-color: rgb(255 254 254 / 90%);
    border-radius: 9999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
    padding: 0.5rem 0.5rem;
    width: 95%;
}

/* Nav pill becomes full width white when scrolled (only on hero pages).
   The horizontal padding mirrors the pill state's content position
   (95% width centered + 0.5rem padding, capped at 1440px) so the logo
   and search icon don't shift when the header switches states. */
.has-hero-banner .sticky-header-wrapper.header-scrolled .nav-pill-shell {
    background-color: #ffffff;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    width: 100%;
    max-width: none;
    padding: 0.5rem calc((100% - min(95%, 1440px)) / 2 + 0.5rem);
}

/* Tablet/Mobile: hero banner pages use a full-width header (no pill shell),
   matching the header-scrolled layout but keeping the transparent background */
@media (max-width: 991.98px) {
    .nav-pill-shell,
    .has-hero-banner .nav-pill-shell,
    .has-hero-banner .sticky-header-wrapper.header-scrolled .nav-pill-shell {
        background-color: transparent;
        border-radius: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        width: 100%;
        max-width: 1440px;
        padding: 0.5rem 1rem;
    }

    .has-hero-banner .sticky-header-wrapper.header-scrolled .nav-pill-shell {
        background-color: #ffffff;
    }

    .has-hero-banner .site-header {
        background: rgb(255 255 255 / 80%);
        /* Blur lives on ::before instead of the header itself: a backdrop-filter
           here would make .site-header the containing block for the fixed
           mobile drawer (.main-nav), which prevents the drawer from showing
           over the hero banner on phones. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .has-hero-banner .site-header::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .has-hero-banner .sticky-header-wrapper.header-scrolled .site-header {
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid #dde0e9;
    }

    .has-hero-banner .sticky-header-wrapper.header-scrolled .site-header::before,
    body.drawer-active.has-hero-banner .site-header::before {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

.site-logo {
    padding-left: clamp(1rem, 0.5rem + 3.5vw, 5rem);
}

@media (max-width: 991.98px) {
    .site-logo {
        padding-left: 0.5rem;
    }
}

    .site-logo .c-logo-svg__desktop {
        width: 96px;
        height: auto;
    }

@media (max-width: 768px) {
    .site-logo {
        padding-left: 0.25rem;
    }

        .site-logo .c-logo-svg__desktop {
            width: 94px;
        }

    .site-header {
        justify-content: center;
    }

    .btn-cta-yellow, .btn-cta-white {
        font-size: 0.875rem;
    }
}

/* ============================================================================
   Header Component Styles
   ============================================================================ */

/* Header Section - Default: solid dark blue for all pages */
.header-section {
    background-color: #1e3268;
    color: #ffffff;
    border: 1px solid #1e3268;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* Hero banner pages: header-section starts transparent */
.has-hero-banner .header-section {
    background-color: rgb(255 254 254 / 90%);
    color: #1e3268;
    border: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Header section becomes dark blue when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .header-section {
    background-color: #1e3268;
    color: #ffffff;
    border-color: #1e3268;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.header-container {
    position: relative;
}

.header-row {
    min-height: 50px;
}

/* Social Links */
.social-link {
    color: #ffffff;
    display: inline-block;
    line-height: 1;
    transition: color 0.3s ease-in-out;
}

/* Hero banner pages: social links start dark blue */
.has-hero-banner .social-link {
    color: #1e3268;
}

/* Social links become white when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .social-link {
    color: #ffffff;
}

.social-icon {
    width: 36px;
    height: 36px;
    display: block;
}

.social-fallback {
    display: inline-block;
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 50%;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    color: #1e3268;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.header-scrolled .social-fallback {
    background: #ffffff;
    color: #1e3268;
}

.social-fallback-hidden {
    display: none;
}

/* Quick Links */
.header-right-content {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding-right: 15rem;
}

.quick-link {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    transition: color 0.3s ease-in-out;
}

.header-section .quick-link {
    font-weight: 700;
    font-size: 1rem;
}

    .header-section .quick-link:hover {
        text-decoration: underline;
        /*        color: #fff;*/
    }

/* Hero banner pages: quick links start dark blue */
.has-hero-banner .quick-link {
    color: #1e3268;
}

/* Quick links become white when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .quick-link {
    color: #ffffff;
}

.quick-link-icon {
    width: 36px;
    height: 36px;
}

/* Search */
.search-container {
    position: absolute;
    right: 220px;
    top: 0;
    bottom: 0;
    display: none; /* Hidden - moved to navigation bar */
    align-items: stretch;
}

.search-form {
    display: flex;
    align-items: center;
    border: none;
    border-radius: 0;
    padding: 0 15px;
    gap: 10px;
}

.search-button {
    border: none;
    background: transparent;
    color: #ffffff;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.3s ease-in-out;
}

/* Hero banner pages: search button starts dark blue */
.has-hero-banner .search-button {
    color: #1e3268;
}

/* Search button becomes white when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .search-button {
    color: #ffffff;
}

.search-input {
    background-color: transparent !important;
    border: none;
    color: #ffffff;
    width: 200px;
    font-size: 14px;
    padding: 0;
    transition: color 0.3s ease-in-out;
}

/* Hero banner pages: search input starts dark blue */
.has-hero-banner .search-input {
    color: #1e3268;
}

/* Search input becomes white when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .search-input {
    color: #ffffff;
}

.search-input::placeholder {
    color: #1e326875;
    transition: color 0.3s ease-in-out;
}

#navSearchInput::placeholder, #SearchInput::placeholder {
    color: #1e326875;
    transition: color 0.3s ease-in-out;
}

/* Hero banner pages: placeholder starts dark blue */
.has-hero-banner .search-input::placeholder {
    color: #1e326875;
}

/* Placeholder becomes white when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .search-input::placeholder {
    color: #1e326875;
}

.search-input:focus {
    outline: none;
    box-shadow: none !important;
    background-color: transparent !important;
}

.search-input:active {
    background-color: transparent !important;
}

.search-input:-webkit-autofill,
.search-input:-webkit-autofill:hover,
.search-input:-webkit-autofill:focus,
.search-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: transparent !important;
}

/* Hero banner pages: autofill starts dark blue */
.has-hero-banner .search-input:-webkit-autofill,
.has-hero-banner .search-input:-webkit-autofill:hover,
.has-hero-banner .search-input:-webkit-autofill:focus,
.has-hero-banner .search-input:-webkit-autofill:active {
    -webkit-text-fill-color: #1e3268 !important;
}

/* Autofill becomes white when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .search-input:-webkit-autofill,
.has-hero-banner .header-scrolled .search-input:-webkit-autofill:hover,
.has-hero-banner .header-scrolled .search-input:-webkit-autofill:focus,
.has-hero-banner .header-scrolled .search-input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
}

.search-input::selection {
    background-color: #1e3268;
    color: #ffffff;
}

/* Hero banner pages: selection starts dark blue */
.has-hero-banner .search-input::selection {
    background-color: rgba(30, 50, 104, 0.2);
    color: #1e3268;
}

/* Selection becomes white when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .search-input::selection {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Donate Button */
.donate-button {
    background-color: #FFD255;
    color: #1e3268;
    font-weight: 800;
    font-size: 1rem;
    padding: 0 40px;
    text-decoration: none;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    position: absolute;
    right: 3rem;
    top: 0.1rem;
    bottom: 0.1rem;
    border: 2px solid transparent;
}

    .donate-button:hover {
        color: #1e3268;
        background-color: #ffffff;
        border: 2px solid #FFD255;
    }

/*# Home banner #*/
.banner-section {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 580px;
    width: 100%;
    padding: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: 60%;
    text-align: left;
    margin-bottom: 1rem;
}

    .banner-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.5) 100%);
        z-index: 0;
        pointer-events: none;
    }

.banner-heading,
.banner-text {
    position: relative;
    z-index: 1;
}

/*# Form */
div.contact-us-form .form-field {
    margin-bottom: 0.8rem;
}

div.contact-us-form .form-field-label {
    margin-bottom: 0.3rem;
}

div.contact-us-form .form-field-label-required:after {
    content: "*";
    color: #B4594A;
}

div.contact-us-form .input-style {
    padding: 0.4rem;
    width: 60%;
}

div.contact-us-form .editing-form-control-nested-control input,
div.contact-us-form .editing-form-control-nested-control textarea {
    padding: 0.4rem;
    width: 60%;
}

div.contact-us-form .editing-form-control-nested-control textarea {
    width: 100%;
    height: 6rem;
}

div.contact-us-form .field-validation-error {
    font-weight: bold;
    color: #D12127;
}

div.contact-us-form input[type="submit"] {
    -webkit-appearance: button;
    padding: 0.6rem 2rem;
    cursor: pointer;
    color: #ffffff;
    background-color: #272219;
    border: none;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.875rem;
}

    div.contact-us-form input[type="submit"]:hover {
        background: rgba(39, 34, 25, 0.8);
    }

div.contact-us-form .ktc-file-component-wrapper .ktc-uploader-text {
    max-width: calc(100% - 26px);
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: bottom;
    white-space: nowrap;
    display: inline-block;
}

div.contact-us-form .ktc-file-component-wrapper .ktc-uploader-icon-button {
    font-family: "Core-icons";
    font-size: 20px;
    position: absolute;
    right: 8px;
    color: #504e4c;
    line-height: 24px;
}

    div.contact-us-form .ktc-file-component-wrapper .ktc-uploader-icon-button[data-icon="select"]::before {
        content: "\e6d3";
        cursor: pointer;
    }

/*# Modern Carousel Widget - Full Width Image with Overlay #*/
.modern-carousel {
    overflow: hidden;
    margin-top: 0;
}

    /* Full-width Image Container - always 100% width.
       Ideal height is the 1440x872 design ratio (60.56vw); on short viewports
       the height is capped at 100svh and the image stretches to fit (no crop). */
    .modern-carousel .carousel-fullwidth-container {
        position: relative;
        width: 100%;
        height: min(60.56vw, 100svh);
        overflow: hidden;
    }

        .modern-carousel .carousel-fullwidth-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .modern-carousel .carousel-fullwidth-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f0f0f0;
    }

    /* Content Box on Left Side - 626x496 at 46px left / 306px top (of 1440x872).
       On normal screen heights the box sits at the design position (top: 35.09%).
       On short viewports (see max-height media query below) it switches to
       bottom anchoring so it never extends past the image bottom. */
    .modern-carousel .carousel-content-box {
        position: absolute;
        top: 30.09%; /* 306 / 872 * 100 */
        bottom: max(8.03%, 20px);
        left: 3.19%; /* 46 / 1440 * 100 */
        background-color: #1e3268;
        border-radius: 20px;
        padding: 40px;
        width: 43.47%; /* 626 / 1440 * 100 */
        max-width: 626px;
        min-width: 320px;
        height: auto;
        overflow: hidden; /* never show a scrollbar; fluid font sizes keep content fitting */
        z-index: 10;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .modern-carousel .carousel-preheader {
        color: #FFFFFF;
        font-weight: 400;
        font-size: clamp(0.8rem, 0.55rem + 0.45vw, 0.95rem);
        line-height: 1.4;
        margin: 0 0 12px 0;
        opacity: 0.9;
    }

    .modern-carousel .carousel-icon {
        max-width: 80px;
        height: auto;
        display: block;
    }

    .modern-carousel .carousel-heading {
        color: #FFFFFF;
        font-weight: 600;
        font-size: clamp(1.5rem, 0.32rem + 2.42vw, 2.5rem); /* 1.5rem @ ~780px -> 2.5rem @ 1440px */
        line-height: 1.2;
        margin: 0 0 16px 0;
        letter-spacing: -0.02em;
    }

    .modern-carousel .carousel-description {
        color: #FFFFFF;
        font-weight: 400;
        font-size: clamp(0.9rem, 0.5rem + 1.11vw, 1.5rem); /* 0.9rem @ 576px -> 1.5rem @ 1440px */
        line-height: 1.6;
        margin: 0 0 20px 0;
        letter-spacing: -0.01em;
    }

    /* CTA Buttons Container */
    .modern-carousel .carousel-cta-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 12px;
    }

    /* CTA Button - White background with blue text */
    .modern-carousel .carousel-cta-btn {
        display: inline-block;
        background-color: #FFFFFF;
        color: #1e3268;
        font-weight: 700;
        font-size: clamp(0.85rem, 0.5rem + 0.55vw, 1rem);
        padding: clamp(10px, 0.9vw, 14px) clamp(20px, 2.2vw, 32px);
        border-radius: 50px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        letter-spacing: -0.01em;
    }

        .modern-carousel .carousel-cta-btn:hover {
            background-color: #f5f5f5;
            color: #1e3268;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
            text-decoration: none;
        }

    /* Carousel Controls Inside Box - Arrows with dots in between */
    .modern-carousel .carousel-controls-inbox {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        margin-top: 30px;
    }

    .modern-carousel .carousel-indicators-inbox {
        position: static !important; /* Override Bootstrap's absolute positioning */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0;
        padding: 0;
        flex: 0 1 auto; /* Don't grow, allow shrink, auto basis */
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
    }

        .modern-carousel .carousel-indicators-inbox [data-bs-target] {
            position: static !important; /* Override any absolute positioning */
            width: 8px;
            height: 8px;
            margin: 0;
            padding: 0;
            border-radius: 50%;
            border: none;
            background-color: rgba(255, 255, 255, 0.4);
            opacity: 1;
            transition: transform 0.2s ease, background-color 0.2s ease;
            text-indent: 0; /* Reset Bootstrap's -999px */
            flex-shrink: 0;
        }

            .modern-carousel .carousel-indicators-inbox [data-bs-target].active {
                background-color: rgba(255, 255, 255, 1);
            }

    /* Navigation Arrows - Styled for inside the box */
    .modern-carousel .carousel-arrow-btn {
        width: 32px;
        height: 32px;
        background-color: rgba(255, 255, 255, 0.25);
        border-radius: 50%;
        position: static;
        transform: none;
        z-index: 10;
        cursor: pointer;
        transition: all 0.25s ease;
        opacity: 1;
        padding: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .modern-carousel .carousel-arrow-btn:hover {
            background-color: rgba(255, 255, 255, 0.25);
            border-color: rgba(255, 255, 255, 0.5);
        }

    .modern-carousel .carousel-arrow-icon {
        display: block;
        width: 60%;
        height: 60%;
        margin: 0;
        padding: 0;
        flex-shrink: 0;
    }

/* Short viewports: the image container is capped at 100svh, so the design
   top position could push the box past the image bottom. Switch to bottom
   anchoring so the box keeps its natural height and grows upward instead. */
@media (max-height: 750px) {
    .modern-carousel .carousel-content-box {
        top: auto;
        bottom: max(8.03%, 40px); /* design gap: 872 - 306 - 496 = 70px -> 8.03% */
    }
}

/* On screens wider than 1440px, keep the content box within a centered
   1440px design area so text doesn't expand/drift; image stays full width. */
@media (min-width: 1440px) {
    .modern-carousel .carousel-content-box {
        left: calc((100% - 1440px) / 2 + 46px);
        width: 626px;
    }
}

/* Narrow desktop (992px - 1300px): the content box gets tight at these widths,
   so reduce font sizes, padding and spacing to prevent text cutoff. */
@media (min-width: 992px) and (max-width: 1300px) {
    .modern-carousel .carousel-content-box {
        padding: 28px;
    }

    .modern-carousel .carousel-preheader {
        font-size: clamp(0.75rem, 0.5rem + 0.35vw, 0.85rem);
        margin-bottom: 8px;
    }

    .modern-carousel .carousel-icon {
        max-width: 60px;
    }

    .modern-carousel .carousel-heading {
        font-size: clamp(1.25rem, 0.4rem + 1.5vw, 1.75rem);
        margin-bottom: 12px;
    }

    .modern-carousel .carousel-description {
        font-size: clamp(0.8rem, 0.45rem + 0.65vw, 1.05rem);
        line-height: 1.5;
        margin-bottom: 14px;
    }

    .modern-carousel .carousel-cta-btn {
        font-size: clamp(0.75rem, 0.5rem + 0.4vw, 0.9rem);
        padding: 8px 20px;
    }

    .modern-carousel .carousel-cta-buttons {
        gap: 10px;
        margin-bottom: 8px;
    }

    .modern-carousel .carousel-controls-inbox {
        margin-top: 18px;
    }
}

@media (max-width: 991.98px) {
    .modern-carousel .carousel-content-box {
        left: 2.5%;
        padding: 30px;
        width: 48%; /* Slightly wider on tablet */
        max-width: 500px;
        min-width: 280px;
        min-height: auto;
    }

    .modern-carousel .carousel-preheader {
        margin-bottom: 10px;
    }

    .modern-carousel .carousel-icon {
        max-width: 60px;
    }

    .modern-carousel .carousel-heading {
        font-size: clamp(1.1rem, 0.5rem + 1.25vw, 1.5rem);
        margin-bottom: 10px;
    }

    .modern-carousel .carousel-description {
        font-size: clamp(0.8rem, 0.5rem + 0.6vw, 1rem);
        line-height: 1.45;
        margin-bottom: 12px;
    }

    .modern-carousel .carousel-cta-buttons {
        gap: 8px;
        margin-bottom: 6px;
    }

    .modern-carousel .carousel-cta-btn {
        font-size: 0.8rem;
        padding: 8px 18px;
    }

    .modern-carousel .carousel-controls-inbox {
        margin-top: 14px;
    }

    .modern-carousel .carousel-arrow-btn {
        width: 28px;
        height: 28px;
    }

    .modern-carousel .carousel-indicators-inbox [data-bs-target] {
        width: 7px;
        height: 7px;
    }
}

@media (max-width: 767.98px) {
    /* Mobile: full width; ideal 393x692 ratio height (176.08vw), capped to viewport */
    .modern-carousel .carousel-fullwidth-container {
        height: min(176.08vw, 100svh);
    }

    /* Mobile: content box 365x264 (of a 393 design), 30px from bottom, centered.
       Scales up fluidly toward the 768px edge of the breakpoint. */
    .modern-carousel .carousel-content-box {
        top: auto;
        transform: none; /* Remove transform for bottom alignment */
        bottom: 30px; /* 30px margin from bottom */
        left: 14px;
        right: 14px;
        padding: clamp(20px, 3.5vw, 32px) clamp(12px, 3vw, 24px);
        width: calc(100% - 28px);
        max-width: 700px;
        min-width: 0;
        min-height: min(clamp(264px, 45vw, 340px), calc(100% - 60px));
        max-height: calc(100% - 60px); /* keep 30px gaps top and bottom */
        margin: 0 auto;
    }

    .modern-carousel .carousel-preheader {
        font-size: clamp(0.8rem, 0.6rem + 0.5vw, 0.95rem);
        margin-bottom: 8px;
    }

    .modern-carousel .carousel-icon {
        max-width: clamp(50px, 8vw, 64px);
    }

    .modern-carousel .carousel-heading {
        font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.3rem);
    }

    .modern-carousel .carousel-description {
        font-size: clamp(1rem, 0.8rem + 0.6vw, 1.2rem);
        margin-bottom: 0;
    }

    .modern-carousel .carousel-cta-buttons {
        margin-bottom: 0;
    }

    .modern-carousel .carousel-cta-btn {
        font-size: clamp(0.9rem, 0.75rem + 0.4vw, 1rem);
        padding: 12px 24px;
    }

    /* Mobile: hide arrows/indicators - navigation via swipe */
    .modern-carousel .carousel-controls-inbox {
        display: none;
    }
}

/* Large Desktop - keep full design-spec box height */
@media (min-width: 1400px) {
    .modern-carousel .carousel-content-box {
        min-height: min(496px, calc(64.91% - 40px)); /* design height, but never past the banner bottom */
    }
}

/* Remove old carousel styles that are no longer needed */
.modern-carousel .carousel-indicators-custom,
.modern-carousel .slide-number,
.modern-carousel .indicators-wrapper,
.modern-carousel .indicator-bar,
.modern-carousel .carousel-nav-btn,
.modern-carousel .carousel-nav-buttons {
    display: none !important;
}

/* Generic CTA Component Styles */

/* Light Blue Theme */
.generic-cta-light-blue {
    background-color: #00b2eb;
    color: white;
}

    .generic-cta-light-blue .generic-cta-title {
        color: white;
        font-weight: 700;
        font-size: clamp(1.5rem, 1.5rem + 0.5vw, 2rem);
        line-height: 1.2;
    }

    .generic-cta-light-blue .generic-cta-description {
        color: white;
        font-size: 1.25rem;
        line-height: 1.7;
    }

    .generic-cta-light-blue .generic-cta-button {
        background-color: white;
        color: #00b2eb;
        border-color: white;
        font-weight: 600;
        transition: all 0.3s ease;
    }

        .generic-cta-light-blue .generic-cta-button:hover {
            background-color: #f8f9fa;
            color: #00b2eb;
            border-color: #f8f9fa;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
        }

/* Dark Blue Theme */
.generic-cta-dark-blue {
    background-color: #1E3268;
    color: white;
    border-radius: 8px;
    padding: 4rem 2rem;
}

    .generic-cta-dark-blue .generic-cta-title {
        color: white;
        font-weight: 700;
        font-size: clamp(1.5rem, 1.5rem + 0.5vw, 2rem);
        line-height: 1.2;
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .generic-cta-dark-blue .generic-cta-description {
        color: white;
        font-size: 1.5rem;
        line-height: 1.6;
        text-align: center;
        margin-bottom: 2.5rem;
    }

    .generic-cta-dark-blue .generic-cta-button {
        background-color: #FFD255;
        color: #1E3268;
        border: 1px solid #FFD255;
        font-weight: 700;
        border-radius: 8px;
        padding: 1rem 3rem !important;
        font-size: 1.25rem;
        transition: all 0.3s ease;
        text-transform: none;
    }

        .generic-cta-dark-blue .generic-cta-button:hover {
            background-color: #ffdd7a;
            color: #1E3268;
            border: 1px solid #ffdd7a;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 210, 85, 0.4);
        }

/* White Theme */
.generic-cta-white {
    background-color: white;
    color: #212529;
}

    .generic-cta-white .generic-cta-title {
        font-weight: 700;
        font-size: clamp(1.5rem, 1.5rem + 0.5vw, 2rem);
        line-height: 1.2;
    }

    .generic-cta-white .generic-cta-description {
        font-size: 1.25rem;
        line-height: 1.7;
    }

    .generic-cta-white .generic-cta-button {
        background-color: #FFD255;
        color: #1E3268;
        border: 1px solid #FFD255;
        font-weight: 600;
        transition: all 0.3s ease;
        border-radius: 52.47px !important;
    }

        .generic-cta-white .generic-cta-button:hover {
            background-color: #0b5ed7;
            color: white;
            border: 1px solid #0a58ca;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
        }

/* Common CTA Styles */
.generic-cta {
    background-color: #1E3268;
    color: white;
    border-radius: 8px;
}

.generic-cta-title {
    margin-bottom: 0;
    color: white;
    text-align: center;
}

.generic-cta-description {
    margin-bottom: 0;
    color: white;
    text-align: center;
}

.generic-cta-button {
    background-color: #FFD255;
    color: #1E3268;
    border-color: #FFD255;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    letter-spacing: -0.02em;
    font-weight: 600;
    transition: all 0.3s ease;
}

    .generic-cta-button:hover {
        background-color: #ffdd7a;
        color: #1E3268;
        border-color: #ffdd7a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 210, 85, 0.4);
    }

.generic-cta-image img {
    width: 100%;
    height: auto;
}

.generic-cta-decorative-line {
    height: 4px;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

.generic-cta-pretitle {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.generic-cta-light-blue .generic-cta-pretitle {
    color: white;
}

.generic-cta-dark-blue .generic-cta-pretitle {
    color: white;
}

.generic-cta-white .generic-cta-pretitle {
    color: #1E3268;
}

.generic-cta-text-container {
    padding: 0;
    text-align: center;
}

.generic-cta-button-container {
    text-align: center;
}

/* Yellow Pill Button Style */
.c-button-sec {
    display: inline-block;
    background-color: #FFD255;
    color: #1e3268;
    font-weight: 700;
    font-size: 0.9rem;
    padding: .9375rem 1.15625rem;
    border-radius: 50px;
    text-decoration: none !important;
    border: 2px solid #FFD255;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: -0.01em;
}

    .c-button-sec:hover {
        background-color: #ffffff;
        color: #1e3268 !important;
        border: 2px solid #FFD255;
        text-decoration: none !important;
    }

@media (max-width: 991.98px) {
    .generic-cta-title {
        font-size: clamp(1.5rem, 1.5rem + 0.5vw, 2rem);
    }

    .generic-cta-description {
        font-size: 1.125rem;
    }

    .generic-cta-button {
        font-size: 0.875rem;
        padding: 0.625rem 1.5rem !important;
    }

    .generic-cta-text-container {
        padding: 2rem 0;
    }
}

/* ============================================================================
   Guidelines Chapter Page Styles
   ============================================================================ */

.guidelines-chapter-page {
    background-color: #fff;
}

.chapter-banner {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.banner-content {
    max-width: 1400px;
    margin: 0 auto;
}

.chapter-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-transform: uppercase;
}

.page-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    line-height: 1.3;
}

.action-buttons .btn,
.navigation-buttons .btn {
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    border: none;
}

.action-buttons .btn-light {
    background-color: white;
    color: #1e3268;
}

    .action-buttons .btn-light:hover {
        background-color: #f8f9fa;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

.navigation-buttons .btn-outline-light:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
}



/* Tab/Pill Navigation Styling - matching CampPage */
.nav-tabs {
    border-bottom: none !important;
}

    .nav-tabs .nav-link {
        color: #2c4770;
        border: none;
        border-bottom: 4px solid transparent;
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        font-size: 1.1rem;
        transition: all 0.3s ease;
    }

        .nav-tabs .nav-link:hover {
            color: #1e3a5f;
            border-bottom: 4px solid #00b2eb;
            background-color: transparent;
        }

/*        .nav-tabs .nav-link.active {
            color: #1e3a5f;
            border-bottom-color: #00bcd4;
            background-color: transparent;
            font-weight: 600;
        }*/

.tab-content {
    min-height: 200px;
}


    /*.nav-tabs .nav-link {
        color: #6c799d;
        font-weight: 600;
        font-size: 1rem;
        padding: 1rem 1.5rem;
        border: none;
        border-bottom: 3px solid transparent;
        transition: all 0.3s ease;
    }*/

        .nav-tabs .nav-link.active {
            color: #1e3268;
            background-color: transparent;
            border-bottom: 4px solid #00b2eb;
        }

        /*.nav-tabs .nav-link.disabled {
            color: #adb5bd;
            cursor: not-allowed;
            opacity: 0.5;
        }

        .nav-tabs .nav-link:hover:not(.disabled):not(.active) {*/
            /*    background-color: #f8f9fa;
    border-bottom: 3px solid #dee2e6;*/
        /*}*/

.chapter-content {
    min-height: 300px;
    line-height: 1.5;
    font-size: 1.125rem;
    color: #1e3268;
}

.chapter-headings {
    margin-bottom: 2.5rem;
}

    .chapter-headings h1,
    .chapter-headings h2,
    .chapter-headings h3,
    .chapter-headings h4,
    .chapter-headings h5,
    .chapter-headings h6 {
        color: #1e3268;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        font-weight: 600;
    }

        .chapter-headings h1:first-child,
        .chapter-headings h2:first-child,
        .chapter-headings h3:first-child,
        .chapter-headings h4:first-child,
        .chapter-headings h5:first-child,
        .chapter-headings h6:first-child {
            margin-top: 0;
        }

.key-messages {
    background: #fafbfb;
    padding: 1rem .5rem 0;
    border-top: 4px solid #00b2eb;
    /*    margin-bottom: 2.5rem;*/
}

.chapterRecommendations {
    border-top: 4px solid #00B2EB;
    background: rgba(245, 246, 246, 0.45);
    padding: 1.5rem;
}

    .chapterRecommendations > :last-child {
        border-top: 1px solid #00B2EB;
        padding-top: 1.5rem;
    }

    .chapterRecommendations ol {
        margin-bottom: 1.5rem !important;
    }

/* No border/padding when shown inside the Recommendations tab */
#recommendations .chapterRecommendations {
    border-top: none;
    padding: 0;
}

.chapterKeyMessages h2, .chapterRecommendations h2 {
    margin-top: 0;
}

    .chapterKeyMessages h2:not(:first-of-type) {
        border-top: 1px solid #00B2EB;
        padding-top: 1.5rem;
    }

    .key-messages .chapterKeyMessages h2:not(:first-of-type) {
        margin-left: -.5rem;
        margin-right: -.5rem;
        padding-left: .5rem;
        padding-right: .5rem;
    }

.key-messages .key-messages-heading {
    color: #2e7d32;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #4caf50;
}

.key-messages ul,
.key-messages ol {
    margin-bottom: 0.5rem;
    padding-left: 2rem;
}

.key-messages li {
    margin-bottom: 0.75rem;
    font-weight: 400;
}



.chapter-content h2 {
    color: #1e3268;
    margin-bottom: 1.25rem;
    font-weight: 600;
    font-size: 1.75rem;
    padding-bottom: 0.5rem;
}

.chapter-content h3 {
    color: #34495e;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1.4rem;
}

.chapterReferences h2 {
    margin-top: 0;
}

.chapter-content p {
    margin-bottom: 1.5rem;
}

.chapter-content ol{
    margin-bottom: 0;
    padding-left: 2.5rem;
}

.chapter-content ul {
    margin-bottom: 1rem;
    padding-left: 1rem;
}

.chapterKeyMessages ul,
.chapterKeyMessages ol {
    padding-left: 1.5rem;
}

.chapterKeyMessages ul {
    padding-bottom: 1.5rem;
}

.mainText table li::marker {
    color: #00b2eb;
}

li::marker {
    color: #00b2eb;
}

/*ol li::marker {
    color: #1e3268;
}*/

li p {
    margin-bottom: 0.5rem !important;
}

table p {
    margin-bottom: 0 !important;
}

li ul:not(.mega-menu-list):not(.mobile-nav-list) > li {
    list-style-type: disc;
}


.mainText li:has(a)::marker {
    /*    color: #8248d4;*/
}

.chapter-content table li::marker {
    font-size: 12px;
}

.chapterContents ul,
.chapterContents ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.chapterContents p {
    font-size: 26px;
}

.chapter-content li {
    /*    margin-bottom: 0.75rem;*/
}

.chapter-content a {
    transition: all 0.3s ease;
    font-weight: 500;
}

    .chapter-content a:hover {
        /*    color: #2980b9;
    border-bottom-color: #2980b9; */
    }

.chapter-headings a {
    color: #6B27CC;
    font-size: 1.0rem;
}

@media (max-width: 576px) {
    .chapter-headings a {
        font-size: 0.875rem;
    }

    .chapter-content {
        font-size: 0.875rem;
    }

        .chapter-content table th {
            font-size: 1.25rem !important;
        }

    .tableSubHead {
        font-size: 0.875rem !important;
    }

    .chapter-content tfoot {
        font-size: 0.75rem !important;
    }
}

.chapter-content figure,
.chapter-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chapter-content figcaption {
    font-size: 0.9rem;
    color: #6c757d;
    font-style: italic;
    margin-top: 0.75rem;
    text-align: center;
}

.chapter-content table {
    width: 100%;
    margin-bottom: 0.5rem;
    border-collapse: collapse;
    /*    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);*/
}

    .chapter-content table th,
    .chapter-content table td {
        padding: 1rem;
        border: 1px solid #dee2e6;
        text-align: left;
    }

    .chapter-content table th {
        font-weight: 600;
        font-size: 1.4rem;
        padding: 1rem 0 !important;
    }

.chapter-content tr {
    border-bottom: 1px solid #00b2eb;
}

.chapter-content td.lastRow {
    border-top: 4px solid #00b2eb !important;
}

.chapter-content thead, .chapter-content .firstRow, tr.firstRowB, tr.firstRowA td.lastRow {
    border-bottom: 4px solid #00b2eb !important;
}

.chapter-content tr.firstRow {
    font-weight: 600;
}

tr.firstRowA {
    border-bottom: none;
}

.chapter-headings strong {
    font-size: 1.5rem;
    font-weight: 600;
}



.chapter-content tfoot {
    border-top: 4px solid #00b2eb;
    font-size: 0.875rem;
    line-height: 1.3;
}

.tableSubHead {
    font-weight: 400;
    font-size: 1.125rem;
}

tfoot.tableFootnote tr {
    border: none;
}

tfoot.tableFootnote td {
    padding: 6px;
}


.chapter-content th, .chapter-content td {
    border: none !important;
}



.chapter-content table tr:nth-child(even) {
    /*    background-color: #f8f9fa;*/
}

blockquote {
    position: relative;
    padding: 2rem 4rem 2rem 8rem;
    margin: 3rem 0;
    font-style: italic;
    color: #1e3268;
    background-color: #F3FCFF;
    border: none;
}

    blockquote::before {
        content: "\201C";
        position: absolute;
        left: 50px;
        top: 40px;
        font-size: 4rem;
        line-height: 0.8;
        color: #1e3268;
        font-weight: 700;
        font-family: sans-serif;
        font-style: normal;
    }

    blockquote p {
        font-size: 1.1rem;
        font-weight: 500;
        font-style: italic;
        color: #1e3268;
        line-height: 1.8;
        margin-bottom: 0;
    }

        blockquote p em {
            font-style: italic;
        }

.references-section {
    padding-top: 2rem;
    margin-top: 3rem;
}

    .references-section .references-heading {
        color: #1e3268;
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #4FC3F7;
    }

    .references-section ol,
    .references-section ul {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .references-section li {
        margin-bottom: 1rem;
        padding-left: 0.5rem;
    }

table.CPG_appendix td, table.quick_ref_guide td {
    border: solid #ccc 1px;
    padding: 5px 10px;
    font-size: 14px;
}

table.CPG_appendix, table.quick_ref_guide {
    border-collapse: separate;
    border-spacing: 0;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    width: 100%;
    font-size: 14px;
}

    table.CPG_appendix img {
        margin: 0 0 0.5rem 0.5rem !important;
    }

    .greyTableHeader {
        background-color: #CCC;
    }

.darkgreyTableHeader {
    background-color: #999;
}

.blackTableHeader {
    background-color: #000;
    color: #1e3268;
}

/* ============================================================================
   Global Long-Word / URL Overflow Prevention
   ============================================================================ */

/* Prevent long URLs and unbreakable strings in content from causing
   horizontal page scroll (e.g., reference lists with full URLs). */
main p,
main li,
main td,
main th,
main blockquote {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Links containing raw URLs may have no natural break points at all,
   so allow breaking anywhere. */
main li a,
main p a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ============================================================================
   Global Table Styles
   ============================================================================ */

/* Global table styles - Applied to all tables except those in .chapter-content */
table:not(.chapter-content table):not(.nutrition-content table) {
    width: 100%;
    margin-bottom: 2rem;
    border-collapse: collapse;
}

    table:not(.chapter-content table):not(.nutrition-content table) th,
    table:not(.chapter-content table):not(.nutrition-content table) td {
        padding: 1rem;
        border: 1px solid #dee2e6;
        text-align: left;
        font-size: 1rem;
    }

@media (max-width: 576px) {
    table:not(.chapter-content table):not(.nutrition-content table) th,
    table:not(.chapter-content table):not(.nutrition-content table) td {
        font-size: 0.75rem;
    }
}

    table:not(.chapter-content table):not(.nutrition-content table) th {
        font-weight: 600;
    }

    table:not(.chapter-content table):not(.nutrition-content table) tr {
        border-bottom: 1px solid #00b2eb;
    }

        table:not(.chapter-content table):not(.nutrition-content table) thead,
        table:not(.chapter-content table):not(.nutrition-content table) .firstRow,
        table:not(.chapter-content table):not(.nutrition-content table) tr.firstRowB,
        table:not(.chapter-content table):not(.nutrition-content table) tr.firstRowA td.lastRow,
        {
            border-bottom: 4px solid #00b2eb !important;
        }

        table:not(.chapter-content table):not(.nutrition-content table) tr.firstRow {
            font-weight: 600;
        }

        table:not(.chapter-content table):not(.nutrition-content table) tr.firstRowA {
            border-bottom: none;
        }

    table:not(.chapter-content table):not(.nutrition-content table) tfoot {
        border-top: 4px solid #00b2eb;
    }

    table:not(.chapter-content table):not(.nutrition-content table) th,
    table:not(.chapter-content table):not(.nutrition-content table) td {
        border: none !important;
    }

    table:not(.chapter-content table):not(.nutrition-content table) tr:nth-child(even) {
        background-color: #f8f9fa;
    }

table:not(.chapter-content table):not(.nutrition-content table) tr:last-child {
    border-bottom: 4px solid #00b2eb;
}

/* Responsive tables: always-visible horizontal scrollbar */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Always show scrollbar in Firefox */
    scrollbar-width: thin;
    scrollbar-color: #1e3268 #e9ecef;
}

    /* Always-visible scrollbar for WebKit browsers (Chrome, Safari, Edge, iOS) */
    .table-responsive::-webkit-scrollbar {
        height: 10px;
        -webkit-appearance: none;
    }

    .table-responsive::-webkit-scrollbar-track {
        background: #e9ecef;
        border-radius: 5px;
    }

    .table-responsive::-webkit-scrollbar-thumb {
        background-color: #1e3268;
        border-radius: 5px;
        border: 2px solid #e9ecef;
    }

/* Scroll hint shown at the top right of scrollable tables (mobile only) */
.table-scroll-hint {
    display: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e3268;
    margin-bottom: 0.25rem;
    background-color: #DCBDFF;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    align-items: center;
    gap: 0.5rem;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

    .table-scroll-hint svg {
        flex-shrink: 0;
    }

@media (max-width: 767.98px) {
    .table-scroll-hint.visible {
        display: flex;
    }
}

/* Visible focus indicator for keyboard-scrollable table regions (WCAG 2.1.1 / 2.4.7) */
.table-responsive.is-scrollable:focus-visible {
    outline: 3px solid #1e3268;
    outline-offset: 2px;
}

/* On desktop, make tables fit their container so no horizontal scrolling is needed */
@media (min-width: 768px) {
    .table-responsive {
        overflow-x: visible;
    }

        .table-responsive table {
            width: 100% !important;
            max-width: 100%;
        }

            .table-responsive table th,
            .table-responsive table td {
                white-space: normal !important;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
}

/* Copy Table Button */
.copy-table-button {
    display: inline-block;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.4rem 1.5rem;
    background-color: #FFD255;
    color: #1e3268;
    border: 2px solid #FFD255;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .copy-table-button:hover {
        background-color: white;
        color: #1e3268;
        border: 2px solid #FFD255;
    }

    .copy-table-button:active {
        background-color: white;
        color: #1e3268;
        border: 2px solid #FFD255;
    }

/* Constrain pages with HCP side navigation to 1440px */
.sidenav-layout-container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

/* Mobile Current Page Bar */
.mobile-current-page {
    background: #ffd255;
    padding: 1rem 0;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

    .mobile-current-page:hover {
        background: #ffd255;
    }

    .mobile-current-page .current-page-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #1e3268;
        font-weight: 700;
    }

    .mobile-current-page .current-label {
        font-size: 0.875rem;
        margin-right: 0.5rem;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .mobile-current-page .current-title {
        flex: 1;
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-current-page .chevron-icon {
        flex-shrink: 0;
        margin-left: 0.5rem;
    }

/* ============================================================================
   Sticky Sidebar Implementation (Bootstrap 5 Compatible)
   Based on: https://getbootstrap.com/docs/5.0/helpers/position/#sticky-top
   ============================================================================ */

/* Sidebar Column — sticky is applied here, directly on the Bootstrap flex-item col.
   align-self: flex-start ensures the column only takes its own content height,
   NOT the full row height, so the sticky element has room to travel while scrolling. 
   The negative top value allows the sidebar to scroll up with the page initially, 
   then stick when it reaches the top of the viewport. */
.sidebar-column {
    position: sticky;
    top: 80px; /* Adjusted to stick right under the header/breadcrumb area */
    align-self: flex-start !important;
    z-index: 100;
    padding-left: 1.5rem;
    height: calc(100vh - 80px); /* Fallback; actual height is kept in sync with the viewport by js/sidebar-scroll.js */
    /* Scroll is applied directly on the aside column so it works anywhere within it */
    overflow-y: auto;
    overflow-x: clip;
    /* Prevent scroll chaining to the page body when sidebar scroll reaches its edges */
    overscroll-behavior: contain;
    /* Smooth scrolling */
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar while keeping the sidebar scrollable */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

    /* Hide scrollbar for webkit browsers */
    .sidebar-column::-webkit-scrollbar {
        display: none;
        width: 0;
    }




/* Inner wrapper - no longer the scroll container, just spacing */
.sticky-sidebar-inner {
    padding: 2rem 0rem;
}

/* Layout Styles */
@media (min-width: 992px) {
    .guidelines-chapter-page .row {
        align-items: flex-start !important;
    }
}

/* Banner adjustments when inside column layout */
.chapter-banner {
    /*    margin-bottom: 2rem;*/
    overflow: hidden;
}

/* Side Navigation Section */
.sidebar-navigation {
    margin-bottom: 2rem;
}

.sidebar-section {
    margin-bottom: 2rem;
    border-bottom: 2px solid #DDE0E9;
    padding-bottom: 1.5rem;
}

@media (max-width: 767.98px) {
    .sidebar-section {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* Padding lives on the inner list (not on .collapse.show) so it is
       included in the animated height and doesn't pop in/out during
       Bootstrap's collapsing transition, which caused a visible jump. */
    .sidebar-section .collapse .sidebar-section-items,
    .sidebar-section .collapsing .sidebar-section-items {
        padding: 20px;
    }
}

    .sidebar-navigation .sidebar-section:last-child {
        margin-bottom: 0;
    }

    .sidebar-section:last-of-type {
        border-bottom: none;
    }

    /* Section Header */
    .sidebar-section-header {
        font-size: 0.875rem;
        font-weight: 700;
        color: #1e3268;
        text-transform: uppercase;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        letter-spacing: 0.5px;
        line-height: 1.4;
    }

        .sidebar-section-header .section-icon {
            width: 24px;
            height: 24px;
            object-fit: contain;
            flex-shrink: 0;
        }

    /* Section Items List */
    .sidebar-section-items {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .sidebar-section-items li {
            margin-bottom: 0.5rem;
        }



        .sidebar-section-items a {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            color: #34495e;
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.2s ease;
            font-size: 0.813rem;
        }

            .sidebar-section-items a .item-icon {
                width: 16px;
                height: 16px;
                object-fit: contain;
                flex-shrink: 0;
            }

            .sidebar-section-items a:hover {
                background-color: #ffd255;
                color: #1e3268;
            }

        .sidebar-section-items li.active a {
            background-color: #e3f2fd;
            color: #1e3268;
            font-weight: 600;
        }

    @media (min-width: 992px) {
        .sidebar-column {
            flex: 0 0 27% !important;
            max-width: 27% !important;
            padding-left: 80px !important;
            padding-right: 24px !important;
            border-right: 1px solid #EAEBF1;
        }

            .sidebar-column ~ .col-lg-9 {
                flex: 0 0 73% !important;
                max-width: 73% !important;
            }
    }

    /* Reduce left padding on narrower desktop widths so the buttons in
       .sidebar-section-items don't wrap before the 992px breakpoint. */
    @media (min-width: 992px) and (max-width: 1380px) {
        .sidebar-column {
            padding-left: 32px !important;
        }
    }

    /* First/Last Section Pill Button Styles (for HCP navigation) */
    .sidebar-section.first-section .sidebar-section-items.pill-grid,
    .sidebar-section.last-section .sidebar-section-items.pill-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

        .sidebar-section.first-section .sidebar-section-items.pill-grid li,
        .sidebar-section.last-section .sidebar-section-items.pill-grid li {
            margin-bottom: 0;
        }

        .sidebar-section.first-section .sidebar-section-items.pill-grid a,
        .sidebar-section.last-section .sidebar-section-items.pill-grid a {
            justify-content: center;
            text-align: center;
            padding: 0.75rem 0.5rem;
            border-radius: 50px;
            border: 1px solid #e5e8ee;
            background-color: #ffffff;
            color: #1e3268;
            font-weight: 400;
            font-size: 0.75rem;
        }

            .sidebar-section.first-section .sidebar-section-items.pill-grid a:hover,
            .sidebar-section.last-section .sidebar-section-items.pill-grid a:hover {
                background: #1e3268;
                color: #ffffff;
            }

        .sidebar-section.first-section .sidebar-section-items.pill-grid li.active a,
        .sidebar-section.last-section .sidebar-section-items.pill-grid li.active a {
            background-color: #1e3268;
            border-color: #1e3268;
            color: #ffffff;
            font-weight: 600;
        }

        .sidebar-section.first-section .sidebar-section-items.pill-grid a .item-icon,
        .sidebar-section.last-section .sidebar-section-items.pill-grid a .item-icon {
            display: none;
        }

    /* Metadata and Navigation Button Styles */
    .metadata {
        color: white !important;
    }

    .nav-btn-enabled {
        border: 2px solid rgba(255,255,255,0.3) !important;
        color: white !important;
    }

        .nav-btn-enabled:hover {
            background-color: rgba(255,255,255,0.1) !important;
            border-color: rgba(255,255,255,0.5) !important;
            color: white !important;
        }

    .nav-btn-disabled {
        border: 2px solid rgba(255,255,255,0.2) !important;
        opacity: 0.5 !important;
        color: white !important;
    }

    /* Page TOC */
    .sidebar-toc {
        background: transparent;
        border-radius: 0;
        margin-top: 1rem;
        border-top: 2px solid #b2b9cd;
    }

    .sidebar-heading {
        font-size: 0.875rem;
        font-weight: 700;
        color: #1e3268;
        text-transform: uppercase;
        margin-bottom: 0.75rem;
        letter-spacing: 1px;
    }

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

    .toc-item {
        margin-bottom: 0.25rem;
    }

        .toc-item a {
            display: block;
            padding: 0.5rem 0;
            color: #34495e;
            text-decoration: none;
            border-left: 3px solid transparent;
            padding-left: 0.75rem;
            transition: all 0.2s ease;
            font-size: 0.813rem;
        }

        .toc-item.toc-level-3 a {
            padding-left: 1.5rem;
            font-size: 0.85rem;
        }

        .toc-item a:hover {
            color: #1e3268;
            background-color: #ffd255;
            font-weight: 700;
        }

        .toc-item.active a {
            color: #1e3268;
            font-weight: 600;
        }

    /* ============================================================================
   Content Editor Widget Styles
   ============================================================================ */

    .content-editor-widget .content-wrapper {
        border-radius: 8px;
    }

        .content-editor-widget .content-wrapper.bg-white {
            background-color: #FFFFFF;
        }

        .content-editor-widget .content-wrapper.bg-light-blue {
            background-color: #00B2EB;
        }

        .content-editor-widget .content-wrapper.bg-purple {
            background-color: #DCBDFF;
        }

        .content-editor-widget .content-wrapper.bg-navy {
            background-color: #1e3268;
        }

.sidebar-widgets .content-editor-widget .content-wrapper {
    padding: 0 1rem;
}

.sidebar-widgets .content-editor-widget .content-wrapper > *:first-child {
    padding-top: 2rem;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.sidebar-widgets .content-editor-widget .content-wrapper > *:last-child {
    padding-bottom: 2rem;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

    .content-editor-widget {
        margin: 2rem 0;
    }

    .toc-item.active a:hover {
        color: #1e3268;
        font-weight: 600;
        background-color: #ffd255;
    }

    /* Offcanvas Sidebar Styles */
    .offcanvas .sidebar-navigation {
        border-bottom: 1px solid #e9ecef;
    }

    .offcanvas .sidebar-toc {
        position: static;
        max-height: none;
        background: transparent;
        padding: 0;
        margin-top: 1rem;
    }

    /* ============================================================================
   Footer Styles
   ============================================================================ */

    /* Footer Component Styles */

    .footer-section {
        padding-bottom: 1rem !important;
    }

    .footer-newsletter-title {
        margin-bottom: 1.5rem !important;
    }

    .footer-container {
        max-width: 100%;
        overflow-x: hidden;
    }

    .footer-newsletter-title {
        margin-bottom: 1.5rem;
    }

    .footer-logo img {
        max-width: 202px;
        height: auto;
    }

    .footer-logo-img {
        max-width: 202px;
        height: auto;
    }

    .footer-description-text {
        line-height: 1.5;
    }

    .footer-text-link {
        display: inline-block;
    }

        .footer-text-link:hover {
            text-decoration: underline !important;
        }

    .footer-nav-card-link {
        display: block;
    }

    .footer-social-link:hover .footer-social-link-title {
        text-decoration: underline;
    }

    .footer-quick-link:hover {
        text-decoration: underline !important;
    }

    .footer-quick-link-separator {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .footer-group-title {
        margin-bottom: 1rem;
        margin-top: 0;
        font-size: 1.5rem !important;
    }

    .footer-nav-card {
        margin-bottom: 1rem;
    }

    .footer-nav-card-inner {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .footer-nav-icon img {
        width: 100%;
        height: auto;
        max-height: 200px;
        object-fit: cover;
        border-radius: 8px 8px 0 0;
    }

    .footer-nav-content {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .footer-nav-description {
        font-size: 1rem;
        line-height: 1.5;
        flex-grow: 1;
        margin-bottom: 1rem;
    }

    .footer-nav-button .btn {
        background-color: #00bcd4;
        border: none;
    }

    .footer-text-link-description {
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .footer-newsletter-signup {
        padding: 1.5rem;
        border-radius: 0.5rem;
        background-color: #334576;
    }

    .footer-newsletter-title {
        margin-bottom: 1.5rem;
        margin-top: 0 !important;
    }

    .footer-newsletter-input {
        padding-right: 3rem;
    }

    .footer-newsletter-submit {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        margin-right: 0.75rem;
        text-decoration: none !important;
    }

    .footer-social-icon {
        width: 24px;
        height: 24px;
    }

    .footer-social-link-title, .footer-copyright-text, .footer-quick-link {
        font-size: 0.875rem;
    }

    .footer-divider {
        border-color: rgba(255, 255, 255, 0.25);
    }

    .footer-text-link-title, .footer-text-link, .footer-text-link-description {
        font-size: 1.125rem;
    }

    @media (max-width: 767.98px) {
        .footer-group-title {
            font-size: 1.25rem !important;
        }

        .footer-text-link, .footer-text-link-description {
            font-size: 0.875rem;
        }

        .footer-text-link-title {
            font-size: 1rem;
        }

        .footer-social-link-title, .footer-copyright-text, .footer-quick-link {
            font-size: 0.875rem;
        }
    }

    /* ============================================================================
   Global Category Pill Style
   ============================================================================ */

    .category-pill {
        font-size: 0.875rem !important;
        padding: 0.4rem 0.6rem !important;
        border-radius: 50px !important;
        background-color: #1e3268;
        color: white;
        text-decoration: none;
        display: inline-block;
        border: 1px solid #1e3268;
        transition: background-color 0.2s ease, transform 0.1s ease;
    }

        .category-pill:hover {
            background-color: #ffffff;
            color: #1e3268;
            text-decoration: none;
            border: 1px solid #1e3268;
        }

    /* ============================================================================
   Responsive Image Gallery Wrapper
   ============================================================================ */

    /* Wrapper for 4 images: 1 row on desktop, 2 rows on mobile */
    .image-gallery-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        align-items: center;
        margin: 2rem 0;
    }

        /* Individual image styling */
        .image-gallery-wrapper img {
            flex: 1 1 auto;
            max-width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 8px;
        }

    /* Desktop: 4 images in one row */
    @media (min-width: 768px) {
        .image-gallery-wrapper img {
            flex: 1 1 calc(25% - 0.75rem);
            max-width: calc(25% - 0.75rem);
        }
    }

    /* Mobile: 2 images per row (2 rows total) */
    @media (max-width: 767.98px) {
        .image-gallery-wrapper {
            gap: 0.75rem;
        }

            .image-gallery-wrapper img {
                flex: 1 1 calc(50% - 0.375rem);
                max-width: calc(50% - 0.375rem);
            }
    }

    /* ============================================================================
   Responsive Camp Info Table
   ============================================================================ */

    /* Wrapper for borderless, responsive table */
    .camp-info-table {
        width: 100%;
        border-collapse: collapse;
        margin: 2rem 0;
        border-radius: 8px;
        overflow: hidden;
    }

        .camp-info-table tr:nth-child(even) {
            background-color: transparent !important;
        }

        .camp-info-table thead tr,
        .camp-info-table tbody tr:first-child {
            color: #1e3268;
        }

        .camp-info-table th,
        .camp-info-table td {
            padding: 0 !important;
            text-align: left;
            border: none;
            vertical-align: top;
        }

        .camp-info-table tr {
            border: none !important;
        }

        .camp-info-table tbody tr:not(:first-child) {
            background-color: #ffffff;
        }



        .camp-info-table strong {
            color: inherit;
            font-weight: 600;
        }

    /* Desktop: Full table layout */
    @media (min-width: 768px) {
        .camp-info-table th,
        .camp-info-table td {
            width: 20%;
        }
    }

    /* Mobile: 2 columns layout - Label: Value pairs */
    @media (max-width: 767.98px) {
        .camp-info-table {
            display: block;
            background-color: transparent;
        }

            .camp-info-table thead {
                display: none;
            }

            .camp-info-table tbody {
                display: block;
            }

                .camp-info-table tbody tr {
                    display: block;
                    background-color: transparent !important;
                }

                    .camp-info-table tbody tr:first-child {
                        display: none;
                    }

                    .camp-info-table tbody tr:not(:first-child) {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 1rem 1.5rem;
                        margin-bottom: 0;
                    }

            .camp-info-table td {
                display: block;
                padding: 1rem 0 !important;
                background-color: transparent;
                border-radius: 0;
                box-shadow: none;
                border-bottom: 1px solid #e0e0e0;
            }

                .camp-info-table td:nth-last-child(-n+2) {
                    border-bottom: none;
                }

                .camp-info-table td::before {
                    content: attr(data-label);
                    display: block;
                    font-weight: 600;
                    color: #1e3268;
                    margin-bottom: 0.5rem;
                    font-size: 1rem;
                    letter-spacing: 0;
                }

                .camp-info-table td strong {
                    display: none;
                }
    }

    .category-pill:active {
        transform: translateY(0);
        /*    margin-top: 1.5rem;
    margin-bottom: 1.5rem;*/
    }

    .footer-social-links {
        margin-bottom: 1.0rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        text-align: center;
    }

    /* Mobile: social links in one row, auto-sized and spread edge-to-edge, icons only */
    @media (max-width: 767.98px) {
        .footer-social-links > [class*="col"] {
            flex: 0 0 auto;
            max-width: none;
            width: auto;
            text-align: center;
        }

        .footer-social-links .footer-social-link-title {
            display: none;
        }
    }

    .footer-copyright-row {
        align-items: center;
        margin-bottom: 1rem;
    }

    .footer-quick-links-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    /* ============================================================================
   Icon Feature List Styles
   ============================================================================ */

    .icon-feature-section {
        background-color: #FFB3BA;
        padding: 20px;
        width: 100%;
    }

    .icon-feature-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        gap: 20px;
        padding: 0 15px;
    }

    .icon-feature-item {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 200px;
        font-weight: 600;
    }

    .icon-feature-icon {
        flex-shrink: 0;
    }

        .icon-feature-icon svg {
            display: block;
            width: 24px;
            height: 24px;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .icon-feature-text {
        color: #1e3268;
        font-weight: 600;
        font-size: 1.25rem;
    }

    /* Responsive adjustments for mobile */
    @media (max-width: 768px) {
        .icon-feature-container {
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .icon-feature-item {
            width: 100%;
            min-width: 100%;
            justify-content: center;
        }

        .icon-feature-text {
            font-size: 1.0rem;
        }
    }

    /* Mobile font sizes for chapter content */
    @media (max-width: 768px) {

        .chapter-content p {
            font-size: 0.875rem !important;
        }

        .chapter-content li {
            font-size: 0.875rem !important;
        }

        .chapter-content h2 {
            font-size: 1.5rem !important;
        }

        .references-section {
            margin-top: 0 !important;
        }
    }

    @media (min-width: 768px) {
        .footer-quick-links-container {
            justify-content: flex-end;
        }
    }


    @media (max-width: 992px) {
        .banner-content .d-flex.justify-content-between {
            flex-direction: column;
            align-items: flex-start !important;
        }

        .navigation-buttons {
            width: 100%;
            margin-top: 1rem;
        }
    }

    @media (max-width: 768px) {
        .chapter-banner .banner-content {
            padding: 2rem 1rem !important;
        }

        .page-title {
            font-size: 1.75rem !important;
        }

        .chapter-label {
            font-size: 0.85rem !important;
        }

        .action-buttons {
            flex-direction: column;
            width: 100%;
        }

            .action-buttons .btn,
            .action-buttons a {
                width: 100%;
                justify-content: center;
            }

        .navigation-buttons {
            flex-direction: row;
            flex-wrap: nowrap;
            width: 100%;
        }

            .navigation-buttons .btn,
            .navigation-buttons a {
                flex: 1 1 50%;
                min-width: 0;
                justify-content: center;
            }

        .nav-tabs {
            overflow-x: auto;
            flex-wrap: nowrap;
            -webkit-overflow-scrolling: touch;
        }

            .nav-tabs .nav-item {
                flex-shrink: 0;
            }

            .nav-tabs .nav-link {
                padding: 0.75rem 1rem;
                font-size: 0.9rem;
            }
    }

    @media (max-width: 576px) {
        .metadata .d-flex {
            align-items: flex-start !important;
        }

            .metadata .d-flex > * {
                margin-bottom: 0.5rem;
            }
    }

    /* ============================================================================
   Form Widget Area Styles
   ============================================================================ */

.formwidget-submit-text {
    font-size: 1.4rem;
}

    .form-page-content-wrapper {
        max-width: 80%;
    }

    .generic-page-content-wrapper,
    .sub-page-content-wrapper {
        max-width: 80%;
        margin: 0 auto;
    }

    .generic-page-content-wrapper.two-column,
    .sub-page-content-wrapper.two-column {
        max-width: 100%;
    }

    .form-widget-area-container {
        width: 100%;
    }

    .form-widget-area {
        padding: 2rem 2rem 2rem 0;
        max-width: 80%;
    }

        /* Form Styling */
        .form-widget-area .form-field {
            margin-bottom: 2rem;
        }

        .form-widget-area label.control-label {
            display: block;
            color: #1e3268;
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        /* Checkbox List Styling */
        .form-widget-area .ktc-checkbox-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-top: 0.5rem;
        }

        .form-widget-area .ktc-checkbox {
            display: flex;
            align-items: center;
            position: relative;
        }

        .form-widget-area .form-field:has(.ktc-checkbox):not(:has(.ktc-checkbox-list)) {
            display: flex !important;
            align-items: center;
            gap: 0;
        }

        .form-widget-area .form-field:has(.ktc-checkbox):not(:has(.ktc-checkbox-list)) > .control-label {
            order: 2;
            margin: 0;
            cursor: pointer;
        }

        .form-widget-area .form-field:has(.ktc-checkbox):not(:has(.ktc-checkbox-list)) .editing-form-control-nested-control {
            order: 1;
            margin: 0;
        }

        .form-widget-area .ktc-checkbox input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin: 0;
            margin-right: 0.75rem;
            cursor: pointer;
            flex-shrink: 0;
        }

        .form-widget-area .ktc-checkbox label {
            display: inline-block;
            color: #1e3268;
            font-size: 1rem;
            font-weight: 400;
            margin: 0;
            cursor: pointer;
            line-height: 1.5;
            padding-left: 10px;
        }

        .form-widget-area .ktc-checkbox input[type="checkbox"]:focus {
            outline: 2px solid #1e3268;
            outline-offset: 2px;
        }

        .form-widget-area input.form-control[type="text"],
        .form-widget-area input.form-control[type="email"] {
            width: 100%;
            border: none;
            border-bottom: 1px solid #1e3268;
            background-color: transparent;
            padding: 0.5rem 0;
            font-size: 1.125rem;
            border-radius: 0;
            outline: none;
            transition: border-color 0.3s ease;
        }

            .form-widget-area input.form-control[type="text"]::placeholder,
            .form-widget-area input.form-control[type="email"]::placeholder {
                color: #999;
                font-style: italic;
            }

            .form-widget-area input.form-control[type="text"]:focus,
            .form-widget-area input.form-control[type="email"]:focus {
                border-bottom-color: #1e3268;
                box-shadow: none;
            }

        .form-widget-area textarea.form-control {
            width: 100%;
            border: 1px solid #1e3268;
            background-color: transparent;
            padding: 0.75rem;
            font-size: 1.125rem;
            border-radius: 4px;
            outline: none;
            min-height: 120px;
            resize: vertical;
            transition: border-color 0.3s ease;
        }

            .form-widget-area textarea.form-control::placeholder {
                color: #999;
                font-style: italic;
            }

            .form-widget-area textarea.form-control:focus {
                border-color: #1e3268;
                box-shadow: none;
            }

        /* Submit Button Styling */
        .form-widget-area input[type="submit"] {
            background-color: #FFD255;
            color: #1e3268;
            border: 1px solid #FFD255;
            padding: 0.75rem 2.5rem;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 1rem;
        }

            .form-widget-area input[type="submit"]:hover {
                background-color: #ffffff;
                border: 1px solid #FFD255;
            }

            .form-widget-area input[type="submit"]:active {
                transform: translateY(0);
            }

    .field-validation-error {
        color: red;
    }
    /* Responsive adjustments for form widget area */
    @media (max-width: 768px) {
        .form-page-content-wrapper, .generic-page-content-wrapper, .sub-page-content-wrapper {
            max-width: 100%;
        }

        .form-widget-area {
            max-width: 100%;
            padding: 1.5rem 1.5rem 1.5rem 0;
        }

        .form-control-lg {
            font-size: 0.875rem !important;
        }

        .form-widget-area label.control-label,
        .form-widget-area textarea.form-control,
        .explanation-text,
        .form-widget-area input.form-control[type="text"], .form-widget-area input.form-control[type="email"] {
            font-size: 0.875rem;
        }
    }

    /* ============================================================================
   YouTube Video Embed Styles (Frontend)
   ============================================================================ */

    /* YouTube video embed container */
    .youtube-video-embed {
        margin: 20px 0;
        /*    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;*/
    }

    /* Video container with responsive aspect ratio */
    .youtube-video-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background-color: #000;
        border-radius: 4px;
    }

        .youtube-video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

    /* YouTube controls section */
    .youtube-controls {
        margin-top: 15px;
        text-align: left;
    }

    /* Transcript toggle button */
    .youtube-transcript-toggle {
        display: inline-block;
        padding: 10px 20px;
        background-color: #ff0000;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        .youtube-transcript-toggle:hover {
            background-color: #cc0000;
        }

        .youtube-transcript-toggle:active {
            background-color: #990000;
        }

    /* Transcript content */
    .youtube-transcript {
        margin-top: 15px;
        padding: 15px;
        background-color: white;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        font-size: 14px;
        line-height: 1.6;
        color: #333;
        white-space: pre-wrap;
        word-wrap: break-word;
        max-height: 400px;
        overflow-y: auto;
    }

        /* Scrollbar styling for transcript */
        .youtube-transcript::-webkit-scrollbar {
            width: 8px;
        }

        .youtube-transcript::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        .youtube-transcript::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

            .youtube-transcript::-webkit-scrollbar-thumb:hover {
                background: #555;
            }

    /* Mobile responsive */
    @media (max-width: 768px) {
        .youtube-video-embed {
            margin: 15px 0;
        }

        .youtube-transcript {
            max-height: 300px;
            font-size: 13px;
        }

        .youtube-transcript-toggle {
            width: 100%;
            padding: 12px;
        }
    }

    /* Print styling */
    @media print {
        .youtube-controls {
            display: none;
        }

        .youtube-transcript {
            display: block !important;
            max-height: none;
            overflow: visible;
        }

        .youtube-video-container {
            page-break-inside: avoid;
        }
    }

.c-button-alt {
    background-color: #1e3268;
    color: #ffffff;
    border: 1px solid #1e3268;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none !important;
    letter-spacing: -0.01em;
    transition: all 0.3s ease;
    font-size: .875rem;
    line-height: 1.42857;
    display: inline-block;
    padding: .8rem 2rem;
    margin-top: 0.5rem;
}

        .c-button-alt:hover {
            background-color: #ffffff;
            color: #1e3268 !important;
            border: 1px solid #1e3268;
            text-decoration: none !important
        }

    /* Rich text editer styling */

    /*.fr-view {
    padding: 20px 0;
}*/

    /* Anchor styling */
    .anchor {
        color: #6B27CC;
        font-weight: 600;
    }

    li:has(a.anchor)::marker {
        content: '' !important;
    }


    ul:has(li > a.anchor) {
        padding-left: 0;
    }

    /* ============================================================================
   Two-Column Image & Text Layout
   ============================================================================ */

    /* Container for the two-column layout */
    .two-column-layout {
        display: flex;
        gap: 2rem;
        align-items: stretch;
    }

    /* Left column - Image and description */
    .two-column-layout-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* Right column - Paragraphs */
    .two-column-layout-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* Image styling - fixed 3:2 ratio, cropped with object-fit */
    .two-column-layout-image {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        border-radius: 8px;
        object-fit: cover;
    }

    /* Description text below image */
    .two-column-layout-description {
        font-size: 0.75rem;
        color: #1e3268;
        line-height: 1.3;
    }

    /* Paragraph content */
    .two-column-layout-content {
        font-size: 1.125rem;
        color: #1e3268;
        line-height:1.44;
    }

    /* Mobile: Stack layout - paragraphs on top, image and description at bottom */
    @media (max-width: 768px) {
        .two-column-layout {
            flex-direction: column-reverse;
            gap: 1.5rem;
        }

        .two-column-layout-left,
        .two-column-layout-right {
            width: 100%;
        }

        .two-column-layout-content {
            font-size: 0.875rem;
        }
    }

   

    /* ============================================================================
   Statistics Section Styles
   ============================================================================ */

    /* Horizontal layout on desktop, 2x2 grid on mobile */
    /* Background spans full width; content is capped at 1440px via side padding */
    .stats-section-inline {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10px max(10px, calc((100% - 1440px) / 2));
        background: #dcbdff;
    }

    .stat-item-inline {
        text-align: center;
        padding: 0 20px;
        border-left: 1px solid #bfa8e9;
    }



        /* Remove right border from last item */
        .stat-item-inline:last-child {
            border-right: none;
        }

        .stat-item-inline .stat-number {
            display: inline;
            font-size: 2.5rem;
            font-weight: 600;
            margin-right: 10px;
        }

        .stat-item-inline .stat-label {
            display: inline;
            font-size: 1rem;
            font-weight: 500;
        }

    /* Mobile view - 2x2 grid layout */
    @media (max-width: 768px) {
        .stats-section-inline {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0;
            padding: 0;
            margin-bottom: 1.5rem;
        }

        .stat-item-inline {
            padding: 10px 20px;
            border: 1px solid #bfa8e9;
            border-right: none;
            border-bottom: none;
            text-align: left;
        }





            .stat-item-inline .stat-number {
                display: block;
                margin-bottom: 5px;
                margin-right: 0;
                font-size: 1.6rem;
            }

            .stat-item-inline .stat-label {
                display: block;
                font-size: 0.8rem;
            }
    }

    /* ============================================================================
   Text-Image Split Component (rich text editor friendly)
   ============================================================================ */

    .text-image-split {
        display: flex;
        align-items: flex-start;
        gap: 129px;
        margin-bottom: 40px;
    }

        .text-image-split h3 {
            margin-top: 0 !important;
        }

        .text-image-split .text-image-split-text {
            width: 630px;
            max-width: 100%;
            flex-shrink: 0;
            font-size: 1.125rem;
            line-height: 1.4;
        }


        .text-image-split .text-image-split-media {
            flex: 1;
            min-width: 0;
        }

            .text-image-split .text-image-split-media img {
                width: 100%;
                height: auto;
                aspect-ratio: 521 / 300;
                object-fit: cover;
                border-radius: 12px;
                display: block;
            }

    #campers-staff-content .text-image-split .text-image-split-media img {
        aspect-ratio: 413 / 400;
    }

@media (max-width: 767.98px) {
    .text-image-split {
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
    }

        .text-image-split .text-image-split-text {
            width: 100%;
            font-size: 0.875rem;
            line-height: 1.57;
        }



        .text-image-split .text-image-split-media {
            width: 100%;
        }

            .text-image-split .text-image-split-media img {
                aspect-ratio: 353 / 203;
                margin-bottom: 2rem;
            }

    #campers-staff-content .text-image-split .text-image-split-media img {
        aspect-ratio: 353 / 342;
    }

    /*    .generic-page .resource-links-widget {
        padding: 20px !important;
    }*/
}

/*.generic-page .resource-links-widget {
    padding: 80px;
}*/

    /* ============================================================================
   Team Profile (image left 1/4, text right 3/4; stacked on mobile)
   ============================================================================ */

    .team-profile {
        display: flex;
        gap: 24px;
        align-items: flex-start;
        margin-bottom: 2.5rem !important;
    }

    .team-profile-photo {
        flex: 0 0 30%;
        max-width: 30%;
    }

        .team-profile-photo img {
            width: 100%;
            height: auto;
            display: block;
            margin: 0 !important;
        }

    .team-profile-info {
        flex: 1;
        min-width: 0;
    }

    .team-profile-name {
        font-size: 18px;
        font-weight: bold;
        color: #1a3e6e;
        margin: 0 0 8px 0;
    }

    .team-profile-title {
        font-size: 14px;
        font-weight: bold !important;
        margin: 0 0 12px 0;
    }

    .team-profile-intro {
        font-size: 16px;
        line-height: 1.6;
    }

        .team-profile-intro p {
            margin: 0 0 12px 0;
        }

            .team-profile-intro p:last-child {
                margin-bottom: 0;
            }

    .team-profile-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 16px;
    }


    @media (max-width: 767px) {
        .team-profile {
            flex-direction: column;
        }

        .team-profile-photo {
            flex: 0 0 auto;
            max-width: 100%;
            width: 100%;
        }
    }

.post-nav {
    text-align: center; /* Desktop default */
}

@media (max-width: 767px) {
    .post-nav {
        text-align: left !important; /* Forces mobile left */
    }
}

.chef-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.aprons-scope .chef-grid .chef {
    text-align: center;
}