:root {
    --hofstra-blue: #003594;
    --hofstra-mid-blue: #2E96FF;
    --hofstra-dark: #001254;
    --hofstra-gold: #FFC72C;

    --bg-page: #f8f9fa;
    --bg-card: #ffffff;

    --text-main: #212529;
    --text-muted: #6c757d;

    --radius: 4px;
    --font-main: 'Nunito Sans', sans-serif;
}

/* Homepage's primary path into the session listings. */
.hero .buttons-group .camp-session-primary,
.hero .buttons-group .camp-session-primary + a,
.hero .buttons-group .camp-hero-explore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 70px;
}

.hero .buttons-group .camp-session-primary {
    background-color: var(--hofstra-gold);
    border: 2px solid var(--hofstra-gold);
    color: var(--hofstra-dark);
    font-size: 1.2rem;
    font-weight: 700;
    padding: 1rem 1.8rem;
}

.hero .buttons-group .camp-session-primary:hover,
.hero .buttons-group .camp-session-primary:focus-visible {
    background-color: #e5ae1e;
    border-color: #e5ae1e;
    color: var(--hofstra-dark);
}

/* Body styles scoped to app wrapper or specific reset */
.course-finder-app * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Body styles scoped to app wrapper */
.course-finder-app {
    font-family: var(--font-main);
    /* background-color: var(--bg-page); -- remove to inherit template bg */
    color: var(--text-main);
    /* min-height: 100vh; -- remove to fit in content area */
    display: flex;
    flex-direction: column;
}

/* Header - Scoped to app */
.cf-header {
    background-color: var(--hofstra-blue);
    color: white;
    padding: 1.5rem 0;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cf-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cf-header .subtitle {
    color: var(--hofstra-gold);
    font-weight: 400;
    margin-left: 0.5rem;
    text-transform: none;
}

/* Container & Layout */
.cf-container {
    width: 100%;
    /* max-width: 1200px; - Let template handle max-width */
    margin: 0 auto;
    padding: 0 1.5rem;
}

.cf-layout-grid {
    display: grid;
    grid-template-columns: 480px 1fr;
    /* Adjusted width to prevent overflow */
    gap: 2rem;
    align-items: start;
    text-align: left;
    /* Reset text align from template */
}

/* Sidebar */
.cf-sidebar {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    position: sticky;
    top: 2rem;
    color: var(--text-main);
    /* Ensure text color */
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

.cf-filter-columns {
    display: flex;
    gap: 1.5rem;
}

.cf-filter-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cf-sidebar-header h2 {
    color: var(--hofstra-blue);
    font-size: 1.1rem;
    /* Slightly smaller for 2-col */
    margin-bottom: 0.5rem;
}

.cf-sidebar-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.cf-grade-selector-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cf-grade-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    background: white;
    /* Explicit background */
    border: 2px solid #e9ecef;
    border-radius: var(--radius);
    text-align: left;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 700;
    color: var(--hofstra-blue);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cf-grade-btn .icon {
    font-size: 1.25rem;
    margin-right: 0.75rem;
    width: 24px;
    text-align: center;
}

.cf-grade-btn:hover {
    border-color: var(--hofstra-mid-blue);
    background-color: #f8f9fa;
    transform: translateX(4px);
}

.cf-grade-btn.selected {
    background-color: var(--hofstra-blue);
    color: white;
    border-color: var(--hofstra-blue);
    box-shadow: 0 4px 6px rgba(0, 53, 148, 0.2);
}



/* Results Area */
.cf-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
    color: var(--text-main);
}

.cf-results-header h2 {
    color: white;
    /* Changed to white for better visibility on blue, OR generic dark if we fix bg */
    color: var(--hofstra-dark);
    /* Revert to dark if we force white bg on app */
    font-size: 1.75rem;
    margin: 0;
}

.cf-count-badge {
    background-color: var(--hofstra-gold);
    color: var(--hofstra-dark);
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Course Grid */
.cf-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.cf-course-card {
    background: white;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    /* Slightly more rounded */
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    color: var(--text-main);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Softer initial shadow */
    height: 100%;
    /* Uniform height */
}

.cf-course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 53, 148, 0.15);
    /* Blue-tinted shadow on hover */
    border-color: var(--hofstra-mid-blue);
    background: white;
}

.cf-card-top {
    padding: 1.25rem 1.25rem 0.5rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.cf-course-tag {
    background: var(--hofstra-gold);
    color: var(--hofstra-dark);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.cf-course-id {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
    text-align: right;
}

.cf-course-title {
    padding: 0 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--hofstra-blue);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.cf-course-date {
    margin-top: auto;
    padding: 1rem 1.25rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Empty State / No Results */
.cf-empty-state {
    grid-column: 1 / -1;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 1.1rem;
    background: white;
    border-radius: var(--radius);
    border: 2px dashed #e9ecef;
}

.cf-no-results-msg {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: var(--radius);
    border: 1px solid #dee2e6;
    color: var(--text-main);
}

.hidden {
    display: none !important;
}

.fade-in {
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer - Scoped */
.social-logo {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    object-fit: contain;
}

/* Use 探花视频's production icon font and escaped code points. The escapes avoid
   the character-encoding corruption that affected literal private-use glyphs. */
@font-face {
    font-family: "hofstra-icons";
    src: url("https://www.hofstra.edu/wp-content/themes/hofstra/fonts/icons.woff?5lme5j") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.icon.icon-search,
.icon.icon-close,
#btnScrollTop .icon.icon-keyboard_up,
.icon.icon-keyboard_down {
    font-family: "hofstra-icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
}

.icon.icon-search,
.icon.icon-close,
#btnScrollTop .icon.icon-keyboard_up {
    display: inline-block;
    width: 24px;
    height: 24px;
    font-size: 24px !important;
    line-height: 24px !important;
    text-align: center;
}

.icon.icon-search::before {
    content: "\e91a" !important;
}

.icon.icon-close::before {
    content: "\e905" !important;
}

#btnScrollTop .icon.icon-keyboard_up::before {
    content: "\e90f" !important;
}

.icon.icon-keyboard_down::before {
    content: "\e90d" !important;
}

.icon.icon-search::after,
.icon.icon-close::after,
#btnScrollTop .icon.icon-keyboard_up::after,
.icon.icon-keyboard_down::after {
    content: none !important;
}

.cf-footer {
    margin-top: auto;
    padding: 2rem 0;
    background-color: #fff;
    border-top: 1px solid #e9ecef;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Makerspace upgrade callout used on eligible Grades 6-10 program pages. */
.makerspace-callout {
    position: relative;
    height: 100%;
    overflow: hidden;
    padding: 1.75rem;
    color: #fff;
    background: linear-gradient(135deg, #003594 0%, #13579a 100%);
    border-top: 6px solid #ffc72c;
    border-radius: 0.75rem;
    box-shadow: 0 10px 24px rgba(0, 53, 148, 0.22);
}

.makerspace-callout::after {
    content: "";
    position: absolute;
    right: -45px;
    bottom: -55px;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.makerspace-callout__badge {
    display: inline-block;
    margin-bottom: 0.8rem;
    padding: 0.35rem 0.7rem;
    color: #003594;
    background-color: #ffc72c;
    border-radius: 2rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.makerspace-callout h3 {
    position: relative;
    margin: 0 0 0.75rem;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.2;
}

.makerspace-callout p {
    position: relative;
    margin-bottom: 1rem;
    color: #fff;
}

.makerspace-callout__highlight {
    padding: 0.75rem 0.9rem;
    background: rgba(255, 255, 255, 0.12);
    border-left: 4px solid #ffc72c;
    border-radius: 0 0.35rem 0.35rem 0;
}

.makerspace-callout__link {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0.7rem 1rem;
    color: #003594;
    background-color: #ffc72c;
    border: 2px solid #ffc72c;
    border-radius: 0.35rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.makerspace-callout__link:hover,
.makerspace-callout__link:focus {
    color: #fff;
    background-color: transparent;
    text-decoration: none;
    transform: translateY(-2px);
}


.camp-registration-options { margin-top: 2.5rem; }

/* Sports Academy cross-promotion is a distinct camp choice, separate from day options. */
.sports-academy-promo {
    margin-top: 0.5rem;
    padding: 1.4rem 1.35rem 1.5rem;
    background: #f1f6fb;
    border: 1px solid #d8e3ef;
    border-left: 5px solid #003594;
    border-radius: 0.35rem;
}
.sports-academy-promo__eyebrow {
    display: inline-block;
    margin-bottom: 0.65rem;
    padding: 0.25rem 0.6rem;
    color: #003594;
    background: #fff;
    border: 1px solid #c8d7e8;
    border-radius: 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}
.sports-academy-promo h3 {
    margin: 0 0 0.65rem;
    color: #003594;
    font-size: 1.35rem;
    line-height: 1.25;
}
.sports-academy-promo p { margin-bottom: 0.9rem; }
.sports-academy-promo__link {
    display: inline-block;
    padding-bottom: 0.15rem;
    color: #003594;
    border-bottom: 2px solid #ffc72c;
    font-weight: 700;
    text-decoration: none;
    text-underline-offset: 0.15em;
}
.sports-academy-promo__link:hover,
.sports-academy-promo__link:focus {
    color: #13579a;
    border-bottom-color: #003594;
    text-decoration: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .cf-layout-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .cf-sidebar {
        position: static;
        margin-bottom: 1rem;
    }

    .cf-grade-selector-nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .cf-grade-btn {
        width: auto;
        white-space: nowrap;
    }
}


/* --- Navigation Dropdown Fixes --- */

/* Ensure parent li is positioned for absolute child */
.nav-anchor-desktop .list-inline-item {
    position: relative !important;
}

/* Submenu Styling - Hidden by default */
.nav-anchor-desktop .submenu {
    display: none !important;
    /* Force hidden initially */
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: 3px solid #003594;
    /* 探花视频 Blue */
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 260px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    text-align: left;
}

/* Show Submenu on Hover */
.nav-anchor-desktop .list-inline-item:hover .submenu {
    display: block !important;
}

/* Vertical Stacking for Submenu Items */
.nav-anchor-desktop .submenu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid #f0f0f0;
}

.nav-anchor-desktop .submenu li:last-child {
    border-bottom: none;
}

/* Submenu Link Styling */
.nav-anchor-desktop .submenu li a {
    display: block !important;
    padding: 12px 20px;
    color: #222 !important;
    /* Force dark text for visibility on white bg */
    text-decoration: none !important;
    font-size: 15px;
    line-height: 1.4;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-anchor-desktop .submenu li a:hover {
    background-color: #f8f9fa !important;
    color: #003594 !important;
}

/* --- Top Level Link Hover Effect --- */

.nav-anchor-desktop .nav-link {
    position: relative;
    padding-bottom: 4px;
    text-decoration: none !important;
    color: #fff !important;
    /* Ensure top-level links are white on the blue bar */
    font-weight: 500;
    transition: color 0.15s ease-in-out;
    z-index: 5 !important;
}

/* Underline Animation */
.nav-anchor-desktop .nav-link::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: #fff !important;
    transition: all 0.3s ease-out;
    transform: translateX(-50%);
    pointer-events: none !important;
}

.nav-anchor-desktop .nav-link:hover,
.nav-anchor-desktop .list-inline-item:hover>.nav-link {
    color: #FDC82F !important;
    /* Gold color from 探花视频 site */
}

.nav-anchor-desktop .nav-link:hover::before,
.nav-anchor-desktop .list-inline-item:hover>.nav-link::before {
    width: 100% !important;
    background-color: #FDC82F !important;
    /* Underline turns gold on hover */
}

/* Down Arrow for Dropdowns */
.has-submenu::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #fff !important;
    /* Force white arrow */
    opacity: 0.8;
    transition: border-top-color 0.15s ease-in-out;
}

.nav-anchor-desktop .list-inline-item:hover .has-submenu::after {
    border-top-color: #FDC82F !important;
}

/* --- Mobile Styles: Fix Truncation and Visibility --- */
.nav-anchor-mobile .nav-anchor-toggle {
    color: #FDC82F !important;
    /* Gold text */
    font-weight: 700;
}

/* Draw the Quick Links chevron in CSS so it does not depend on a font glyph. */
.nav-anchor-mobile .nav-anchor-toggle .icon.icon-keyboard_down {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    vertical-align: 3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.nav-anchor-mobile .nav-anchor-toggle .icon.icon-keyboard_down::before {
    content: none !important;
}

.nav-anchor-mobile .nav-anchor-toggle[aria-expanded="true"] .icon.icon-keyboard_down {
    transform: rotate(225deg);
}

.nav-anchor-mobile-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.nav-anchor-mobile-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    /* Allows menu to grow as long as needed */
    overflow: visible !important;
    z-index: 10001 !important;
    /* Ensure it floats above everything */
    position: relative;
    /* Establish stacking context */
}

.nav-link-mobile {
    color: #ffffff !important;
    /* White text for main links */
    font-weight: 600;
    padding: 12px 15px;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: auto !important;
    /* Ensure clicks are received */
    cursor: pointer !important;
    position: relative;
    z-index: 10002;
    /* Ensure it floats above container */
}

.mobile-submenu {
    display: none;
    padding-left: 20px;
    background: #ffffff;
    /* White background for submenus */
    list-style: none;
    margin: 0;
}

.mobile-submenu.show {
    display: block !important;
}

.mobile-submenu li a {
    padding: 12px 15px;
    display: block;
    border-bottom: 1px solid #eee;
    color: #003594 !important;
    /* Blue text for sub-items */
    pointer-events: auto !important;
    /* Ensure submenu links are also clickable */
    position: relative;
    z-index: 10003;
}




/* Modern Pill Tabs Styling - Replicating index.html */
:root {
    --hof-navy: #003594;
    --hof-gold: #FFC72C;
    --hof-gray: #e9ecef;
}

.sticky-tabs-wrapper {
    position: sticky !important;
    top: 0 !important;
    z-index: 1005 !important;
    background: white;
    padding: 24px 0 15px 0;
    margin-bottom: 40px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    width: 100% !important;
}

#sticky-pills-tab {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
}

#sticky-pills-tab .nav-item {
    flex: 0 0 calc(25% - 10px) !important;
    min-width: 250px !important;
    box-sizing: border-box !important;
    display: block !important;
}

#sticky-pills-tab .nav-link {
    width: 100% !important;
    text-align: center !important;
    background-color: var(--hof-gray) !important;
    color: var(--hof-navy) !important;
    font-family: "quiet-sans", sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    padding: 16px 20px !important;
    border-radius: 0 !important;
    border: none !important;
    text-decoration: none !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

#sticky-pills-tab .nav-link.active {
    background-color: var(--hof-navy) !important;
    color: white !important;
}

#sticky-pills-tab .nav-link:hover:not(.active) {
    background-color: #dee2e6 !important;
    color: #001254 !important;
}

@media (max-width: 768px) {
    #sticky-pills-tab .nav-item {
        flex: 0 0 calc(50% - 10px) !important;
        min-width: 150px !important;
    }
}

/* Refined Accordion Styling - Replicating ce-edge.html */
.edge-accordion {
    border-top: 1px solid #dee2e6;
}

.edge-accordion-item {
    border-bottom: 1px solid #dee2e6;
    background: #fff;
    transition: background-color 0.3s ease;
}

.edge-accordion-item:hover {
    background-color: #f8f9fa;
}

.edge-accordion-header {
    padding: 1.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.edge-accordion-title {
    color: #003594;
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0;
    flex-grow: 1;
}

.edge-accordion-type {
    color: #666;
    font-size: 0.9rem;
    margin-right: 2rem;
    display: none;
    /* Hidden by default, useful for tags */
}

.edge-accordion-toggle {
    width: 32px;
    height: 32px;
    background-color: #003594;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.edge-accordion-item.active .edge-accordion-toggle {
    background-color: #003594;
    transform: rotate(180deg);
}

.edge-accordion-item.active {
    background-color: #f1f1f1;
}

.edge-accordion-body {
    display: none;
    padding: 0 1rem 2rem 1rem;
}

.edge-accordion-item.active .edge-accordion-body {
    display: block;
}

.edge-accordion-content-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
}

@media (max-width: 768px) {
    .edge-accordion-content-grid {
        grid-template-columns: 1fr;
    }
}

.edge-accordion-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.edge-program-group-title {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: #003594;
    margin-bottom: 1rem;
    border-bottom: 2px solid #003594;
    display: inline-block;
}

.edge-program-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 576px) {
    .edge-program-links {
        grid-template-columns: 1fr;
    }
}

.edge-program-link {
    display: flex;
    align-items: center;
    color: #003594;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.edge-program-link:hover {
    background-color: #003594;
    color: #fff;
    border-color: #003594;
}

.edge-program-link::before {
    /* This is the hex code for a clean 'Right Pointer' arrow */
    content: "\25B8" !important;

    /* Formatting to ensure it looks right */
    margin-right: 8px;
    color: #FDC82F;
    /* 探花视频 Gold */
    font-size: 14px;
    display: inline-block;
}

/* --- Page Header Refinement (No-Hero Design) --- */
.page-header-block {
    background-color: #ffffff;
    padding: 2.5rem 0 3.5rem 0;
    margin-top: 110px;
    /* Clearance for fixed header */
}

.page-header-block h1 {
    font-family: "richmond-text", Richmond-Text, serif !important;
    font-size: 3.375rem !important;
    /* 54px */
    color: #003594 !important;
    font-weight: 400 !important;
    line-height: 1.1;
    margin-top: 0 !important;
    margin-bottom: 1.5rem;
}

.page-header-block .lead {
    font-family: "quiet-sans", sans-serif;
    font-size: 1.375rem;
    /* 22px */
    color: #333333 !important;
    line-height: 1.5;
    max-width: 900px;
}


/* --- Header Scroll Transitions --- */

/* Ensure logos stack correctly for transition */
.site-logo {
    position: relative;
    display: block;
}

/* Default State (Not Scrolled): Show Default (Blue) Logo */
.header-light .logo-default {
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.3s ease-in-out;
    display: block !important;
}

.header-light .logo-scrolled {
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease-in-out;
}

/* Scrolled State: Show Scrolled Logo, Hide Default */
.header.scrolled .logo-default {
    opacity: 0 !important;
    visibility: hidden !important;
}

.header.scrolled .logo-scrolled {
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- Scroll-to-Top Button --- */
.icon {
    font-family: icon !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1 !important;
}

#btnScrollTop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px;
    height: 52px;
    position: fixed;
    bottom: 50px;
    right: 15px;
    z-index: 1029;
    border: 0;
    outline: none;
    background-color: #4068af;
    color: white;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 50px;
    font-size: 1.5rem;
    line-height: normal;
    opacity: 0;
    visibility: hidden;
    transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
}

#btnScrollTop:hover {
    background-color: #003594;
}

#btnScrollTop:focus {
    background-color: #003594;
    box-shadow: 0 0 0 3px #84c8ff;
}

@media (min-width: 992px) {
    #btnScrollTop {
        right: 35px;
    }
}

/* Show class controlled by JS */
#btnScrollTop.show {
    opacity: 1;
    visibility: visible;
}

/* Page-specific styling for the instructional swim review draft. */
#camp-start.swim-program {
    --swim-ink: #142e52;
    --swim-blue: #003594;
    --swim-line: #dce5ef;
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Nunito Sans', Arial, sans-serif;
    font-size: 16px;
    color: var(--swim-ink);
    padding-bottom: 48px;
}
.swim-program p { line-height: 1.75; }
.swim-program a:not(.btn) { color: var(--swim-blue); text-underline-offset: 4px; }
.swim-program a:focus-visible { outline: 3px solid #003594; outline-offset: 5px; }
.swim-program .swim-intro { max-width: 850px; margin-bottom: 32px; }
.swim-program .swim-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--swim-blue);
    margin-bottom: 12px;
}
.swim-program h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; margin-bottom: 20px; color: #001254; }
.swim-program .swim-intro .lead { font-size: 1.3rem; line-height: 1.5; margin-bottom: 18px; }
.swim-program .swim-topic-nav { padding: 20px 0 30px; margin-bottom: 34px !important; border-bottom: 1px solid var(--swim-line); }
.swim-program .swim-topic-nav ul { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.swim-program .swim-topic-nav li { margin: 0; }
.swim-program .swim-topic-nav a {
    display: block;
    padding: 10px 17px;
    border: 1px solid var(--swim-line);
    border-radius: 30px;
    background: #f4f8fc;
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.swim-program .swim-topic-nav a:hover { background: #e6effa; border-color: #003594; }
.swim-program .swim-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.swim-program .swim-section {
    position: relative;
    padding: 36px;
    margin-bottom: 32px !important;
    border: 1px solid var(--swim-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 22px rgba(20, 46, 82, .045);
    scroll-margin-top: 130px;
}
.swim-program .swim-overview .swim-section { margin-bottom: 0 !important; border-top: 4px solid #003594; }
.swim-program .swim-section h2 { font-size: clamp(1.45rem, 2.5vw, 1.9rem); line-height: 1.25; color: #001254; margin-bottom: 18px; }
.swim-program .swim-section > p:last-of-type { margin-bottom: 0; }
.swim-program #swim-levels { background: #f1f6fc; border-color: #d7e3f2; padding: 40px; }
.swim-program #swim-levels > p { max-width: 820px; margin-left: 0; margin-right: 0; text-align: left; }
.swim-program .swim-level-grid { counter-reset: swim-level; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0; margin: 28px 0; list-style: none; }
.swim-program .swim-level-grid li { counter-increment: swim-level; padding: 24px; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; line-height: 1.6; font-size: .95rem; }
.swim-program .swim-level-grid li::before { content: 'LEVEL ' counter(swim-level); display: block; color: #003594; font-weight: 800; font-size: .75rem; letter-spacing: .1em; margin-bottom: 14px; }
.swim-program .swim-level-grid strong { display: block; color: #142e52; font-size: 1.06rem; line-height: 1.35; margin-bottom: 10px; }
.swim-program .swim-camper-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 24px 0; }
.swim-program .swim-camper-card { padding: 26px; border-radius: 12px; background: #f5f8fc; border: 1px solid #e1e9f3; }
.swim-program .swim-camper-card h3 { font-size: 1.3rem; color: #003594; margin-bottom: 14px; }
.swim-program .swim-camper-card p:last-child { margin-bottom: 0; }
.swim-program .swim-note { font-size: .92rem; color: #455a74; }
.swim-program #non-swimmers { border-left: 5px solid #b72e3d; background: #fff8f8; box-shadow: none; }
.swim-program #non-swimmers .swim-eyebrow { color: #9c2332; }
.swim-program #aquatic-camp { border: 0 !important; padding: 40px !important; background: #001f59; color: #fff; }
.swim-program #aquatic-camp h2 { color: #fff; }
.swim-program #aquatic-camp .swim-eyebrow { color: #ffc72c; }
.swim-program #aquatic-camp p { max-width: 800px; }
.swim-program #aquatic-camp .btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 24px; padding: 13px 24px; background: #ffc72c; border: 1px solid #ffc72c; border-radius: 6px; color: #001254; font-weight: 800; text-decoration: none; line-height: 1.4; }
.swim-program #aquatic-camp .btn:hover { background: #ffda70; border-color: #ffda70; }
.swim-program #aquatic-camp .btn:focus-visible { outline-color: #ffc72c; }
.swim-program .swim-contact { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 28px 0; border-top: 1px solid var(--swim-line); }
.swim-program .swim-contact h2 { font-size: 1.5rem; margin: 0; color: #001254; }
.swim-program .swim-contact p { margin: 0; }
@media (max-width: 900px) {
    .swim-program .swim-overview { grid-template-columns: 1fr; }
    .swim-program .swim-level-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    #camp-start.swim-program { padding-left: 20px; padding-right: 20px; }
    .swim-program .swim-section, .swim-program #swim-levels, .swim-program #aquatic-camp { padding: 26px 22px !important; margin-bottom: 24px !important; border-radius: 12px; }
    .swim-program .swim-level-grid, .swim-program .swim-camper-grid { grid-template-columns: 1fr; }
    .swim-program .swim-topic-nav a { font-size: .85rem; padding: 9px 13px; }
    .swim-program .swim-overview { gap: 20px; margin-bottom: 24px; }
    .swim-program .swim-overview .swim-section { margin-bottom: 0 !important; }
}

/* Overlay the site header on the hero, as on the Classic Day Camps reference. */
.camp-tab-header {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* Keep the camp menu available while browsing and prevent scroll-direction
   changes from making it flicker out of view. */
.camp-tab-header.scrolled {
    position: fixed !important;
    top: 0 !important;
    transform: translateY(0) !important;
}

.camp-tab-header ~ main.camp-tab-main {
    margin-top: 0 !important;
}

html body main.camp-tab-main {
    transform: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* The shared script measures Classic's native theme layout at the current
   width. Longer titles or extra buttons extend the photo beneath the content
   instead of moving the first line upward into the logo. */
.camp-tab-hero {
    display: block;
    height: auto !important;
    min-height: var(--camp-hero-height, 500px);
}

.camp-tab-hero .hero-body {
    position: relative;
    top: auto;
    bottom: auto;
    margin: 0 !important;
    padding: var(--camp-hero-top, 120px) 0 var(--camp-hero-bottom, 60px);
    z-index: 2;
}

@media (min-width: 992px) {
    .camp-tab-hero {
        min-height: var(--camp-hero-height, 700px);
    }
}

/* Tuition supplied by camp-page-content.jsp through camp-content.js. */
#camp-start .camp-pricing-callouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 16px;
    margin: 24px 0;
    text-align: left;
}

#camp-start .camp-pricing-callout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid #cbdce9;
    border-left: 5px solid #13579a;
    border-radius: 8px;
    background: #f2f7fc;
    color: #153b60;
    font-size: 16px;
    line-height: 1.5;
}

#camp-start .camp-pricing-tuition {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    line-height: 1.3;
}

#camp-start .camp-pricing-comparison {
    color: #42576b;
}

#camp-start .camp-pricing-savings {
    padding: 4px 12px;
    border-radius: 4px;
    background: #ffd75e;
    color: #183754;
    font-size: 18px;
    font-weight: 800;
}

#camp-start .camp-pricing-deadline {
    font-size: 15px;
    font-weight: 600;
}