.et-l--header {
    position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: transparent;
}

.main-nav li a {
  	text-transform: none !important;
}

.main-nav li:last-child a {
  	background-color: #0085EB;
    margin: 15px 0 !important;
    padding: 0 15px !important;
    border-radius: 5px;
    font-weight: 700;
}

.main-nav ul {
    gap: 27px;
}

/*
 * "Book Now" button for the mobile header Menu module — inserted via
 * gti-mobile-book-now.js (Divi's Menu module has no slot for a second
 * element like this, only logo + links). Styled to match the desktop
 * "Book Now" look above. .et_pb_menu__wrap is a flex row with
 * align-items:stretch by default, so align-self:center keeps it from
 * stretching to the full header height.
 */
.gti-mobile-book-now {
    align-self: center;
    background-color: #0085EB;
    margin: 15px 0 !important;
    padding: 5px 15px !important;
    border-radius: 5px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

#menu-site-sensitive .menu-item-has-children > ul.sub-menu {
    left: auto;
    right: 0;
}

/*
 * Placeholder "Location Account" menu item (Main Menu 2 mobile) — swapped
 * for the [gti_location_account] block by gti_inject_mobile_location_account()
 * in functions.php. Centered above the regular mobile menu links.
 */

.gti-mobile-location-account .gti-location-account {
    justify-content: center;
    gap: 32px;
}

/*
 * [gti_location_account] shortcode - Location + Login/Account block.
 * Always displayed inline, at every screen size (never collapses into
 * a hamburger menu).
 */
.gti-location-account {
    display: flex !important;
    align-items: center;
    gap: 24px;
    font-size: 14px;
    font-family: inherit;
    justify-content: flex-end;
}

.gti-location-account,
.gti-location-account * {
    list-style: none !important;
}

.gti-location-account__item {
    position: relative;
    color: inherit;
    /* Invisible padding bridges the gap to the dropdown below so the
       hover state never breaks while moving the mouse down into it. */
    padding-bottom: 14px;
}

.gti-location-account__item > a {
    color: inherit;
    text-decoration: none;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.gti-location-account__item > a > i {
    order: -1;
    font-size: 14px;
    line-height: 0;
    margin-right: 5px;

}

.gti-has-dropdown > a::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 800;
    content: "\f0d7";
    margin-left: 10px;
    font-size: 11px;
}

.gti-location-account__dropdown {
    display: none;
    position: absolute;
    right: 0;
    /* Sits flush against the bottom of the padded item box above, so
       there is no gap for the mouse to fall out of :hover through. */
    top: 100%;
    background: #0b1f3a;
    min-width: 140px;
    width: 175px;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 9999;
    border-radius: 4px;
}

/*
 * Divi's own mobile-menu accordion CSS (Divi/style-static.min.css) forces
 * ANY <ul> nested inside an <li> under .et_mobile_menu to stay visible:
 *   .et_pb_menu .et_mobile_menu li ul { display:block !important; }
 * That rule is meant for real WP sub-menus, but our dropdown <ul> lives
 * inside <li class="gti-mobile-location-account"> in that same mobile
 * menu, so it gets swept up too and is permanently forced open there,
 * regardless of any class we toggle — this, not the JS, is why the
 * dropdown "stays and won't close" on mobile. Override with matching
 * !important and higher specificity (3 classes beats Divi's rule, whose
 * highest-specificity fallback is 2 classes + 2 elements).
 */
.gti-mobile-location-account a span  {
    font-family:"Mozilla Text",sans-serif;
    font-weight: normal;
}
.gti-mobile-location-account .gti-has-dropdown .gti-location-account__dropdown {
    display: none !important;
}

.main-menu-mobile .et_pb_menu_inner_container {
    padding: 10px 40px;
}
.main-menu-mobile #mobile_menu2 li li {
    padding: 0;
}

.main-menu-mobile #mobile_menu2 li ul {
    padding-left: 0;
}

.main-menu-mobile #mobile_menu2 a {
    font-family: "PP Neue Corp", sans-serif;
    font-size: 20px;

    font-weight: 700;
}

/*
 * "Our Programs" mobile accordion — toggled via gti-mobile-collapsible.js
 * and marked by gti_mobile_programs_menu_classes() in functions.php.
 * Starts open (Divi already force-renders every nested <ul> open), so
 * only the CLOSED state needs a display override, and it needs matching
 * !important plus 3-class specificity to beat Divi's own
 * ".et_pb_menu .et_mobile_menu li ul { display:block !important; }"
 * rule (same fix used above for .gti-location-account__dropdown).
 *
 * The color rules below are scoped under #mobile_menu2 /
 * #menu-main-navigation-2-mobile (this module's own IDs) because Divi
 * also generates its own per-module inline <style> block for this exact
 * menu (from the module's Design settings) with a 3-class selector like
 * ".et_pb_menu_1_tb_header.et_pb_menu .et_mobile_menu a { color:#fff
 * !important; }" — an ID beats any number of classes, so this is the
 * only reliable way to win against it.
 */
.gti-mobile-collapsible-parent > a {
    position: relative;
    display: block;
    padding-right: 40px;
}

#mobile_menu2 .gti-mobile-collapsible-parent > a,
#menu-main-navigation-2-mobile .gti-mobile-collapsible-parent > a {
    color: #0085EB !important;
}

.gti-mobile-collapsible-parent > a::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0d8"; /* caret-up: open, tap to collapse */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

.gti-mobile-collapsible-parent.gti-mobile-collapsible-parent--closed > a::after {
    content: "\f0d7"; /* caret-down: closed, tap to expand */
}

.gti-mobile-collapsible-parent.gti-mobile-collapsible-parent--closed > .sub-menu {
    display: none !important;
}

/*
 * Season group labels one level down (Summer, Fall, Winter, Spring,
 * Team Development) — blue "eyebrow" section headers. Not individually
 * collapsible; they just stay visible whenever "Our Programs" is open.
 * Classes added by gti_mobile_programs_link_atts() in functions.php.
 */
#mobile_menu2 .gti-mobile-subcategory,
#menu-main-navigation-2-mobile .gti-mobile-subcategory {
    color: #0085EB !important;
    font-size: 13px !important;
}

#mobile_menu2 .gti-mobile-find-program,
#menu-main-navigation-2-mobile .gti-mobile-find-program {
    color: #0085EB !important;
}

.gti-mobile-find-program::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f061";
    margin-left: 8px;
    font-size: 13px;
}

#mobile_menu2 .gti-mobile-browse-programs,
#menu-main-navigation-2-mobile .gti-mobile-browse-programs {
    color: #A2B3C1 !important;
}

/*
 * Hover-to-open only applies on devices that actually have hover (mouse).
 * On touch devices, opening/closing is driven solely by the
 * "gti-has-dropdown--open" class toggled in gti-location-account.js —
 * if :hover also matched here, tapping the trigger would leave the
 * dropdown stuck open, because mobile browsers keep a "phantom" :hover
 * state on the tapped element after a tap, which doesn't clear when the
 * JS removes the --open class.
 */
@media (hover: hover) and (pointer: fine) {
    .gti-has-dropdown:hover .gti-location-account__dropdown {
        display: block;
    }
}

.gti-has-dropdown.gti-has-dropdown--open .gti-location-account__dropdown {
    display: block;
}

.gti-mobile-location-account .gti-has-dropdown.gti-has-dropdown--open .gti-location-account__dropdown {
    display: block !important;
}

.gti-location-account__dropdown li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.gti-location-account__dropdown li a {
    display: block;
    padding: 8px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.gti-location-account__dropdown li a:hover {
    background: rgba(255, 255, 255, 0.08);
}

.gti-location-account__dropdown li.current a {
    font-weight: 700;
}

@media (max-width: 980px) {
    .gti-location-account {
        display: flex !important;
    }
}

/*
 * "Our Programs" mega menu — attached to the existing menu item via the
 * "gti-mega-menu" class (see gti_add_mega_menu_class() in functions.php).
 * The panel markup is injected inside that <li>, right after its <a>.
 * Desktop opens on hover, touch devices open on click via the
 * .gti-mega-menu--open class toggled in gti-mega-menu.js.
 */
.gti-mega-menu {
    position: relative;
}

.gti-mega-menu > a {
    display: inline-flex !important;
    align-items: center;
}

.gti-mega-menu > a::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 800;
    content: "\f0d7";
    margin-left: 6px;
    font-size: 11px;
    line-height: 0;
}

.gti-mega-menu__panel {
    display: none;
    position: fixed;
    /* top is set inline by gti-mega-menu.js to track the real header height */
    left: 0;
    right: 0;
    width: 100vw;
    z-index: 9999;
    background: #0b1f3a;
    color: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    padding: 40px 80px;
}

.gti-mega-menu__panel.gti-mega-menu--open {
    display: block;
}

.gti-mega-menu__inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 24px;
}

.gti-mega-menu__col:first-child {
    grid-column: span 2;
}

.gti-mega-menu__heading {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #A2B3C1;
    margin-bottom: 12px;
}

.gti-mega-menu__links,
.gti-mega-menu__links li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.gti-mega-menu__links li + li {
    margin-top: 10px;
}

.gti-mega-menu__links a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
}

.gti-mega-menu__links a:hover {
    text-decoration: underline;
}

.gti-mega-menu__links h2 {
    font-size: 46px;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    color: white;
}

@media (max-width: 980px) {
    .gti-mega-menu__panel {
        position: static;
        width: 100%;
        padding: 24px;
        margin-top: 8px;
    }

    .gti-mega-menu__inner {
        grid-template-columns: 1fr;
    }

    .gti-mega-menu__col:first-child {
        grid-column: span 1;
    }
}

.gti-footer-section .et-menu {
    display: block !important;
}

/* Footer link columns (Get Started / Get Support / Connect) — on tablet
 * and phone, Divi's default is to stack every column at 100% width,
 * centered. Keep the logo column (et_pb_column_1_2) stacked full-width,
 * but let the 3 link columns sit 2-up at 50% each, left-aligned instead
 * of centered. */
@media (max-width: 980px) {
    .gti-footer-section.et_pb_row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .gti-footer-section > .et_pb_column_1_2 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .gti-footer-section > .et_pb_column_1_6 {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        text-align: left !important;
    }

    .gti-footer-section > .et_pb_column_1_6 .et_pb_text_inner,
    .gti-footer-section > .et_pb_column_1_6 .et_pb_menu__wrap,
    .gti-footer-section > .et_pb_column_1_6 .et-menu-nav,
    .gti-footer-section > .et_pb_column_1_6 .et-menu {
        text-align: left !important;
    }
}

/* #et-boc prefix + full class chain matches the specificity of Divi core's
 * `.et-db #et-boc .et-l .et_pb_column { min-height: 1px; }` rule, which is
 * present only in style-static-cpt.min.css (loaded on WooCommerce product_cat
 * archives like /programs/summer-programs/). Without it, that higher-specificity
 * core rule wins on category pages and the two footer promo columns
 * (BE A GTINSIDER / SHOP GTISTORE) collapse to mismatched heights, even though
 * the same class combo renders fine on regular Pages using style-static.min.css. */
#et-boc .et_pb_row.gti-footer-promo-section .promo-col.et_pb_column {
    display: flex;
    flex-direction: column;
    min-height: 520px;
    border-radius: 3px;
}

#et-boc .et_pb_row.gti-product-category-thumbnail .promo-col.et_pb_column {
    display: flex;
    flex-direction: column;
    min-height: 400px;
    border-radius: 3px;
}

.gti-footer-promo-section .promo-col .et_pb_promo, .gti-product-category-thumbnail .promo-col .et_pb_promo {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* "The Professional Standard" photo column (the first/left column of the
 * row — the second column is just the text blurb next to it, untouched).
 *
 * background-position: Divi's dropdown only offers 9 fixed presets
 * (top/center/bottom x left/center/right); none of them frame this
 * portrait photo well inside the short landscape column, since "top
 * center" leaves a band of empty rink wall above the net before the
 * goalie appears. A custom Y offset isn't available through that field,
 * so it's set here instead.
 *
 * ::after gradient: the design calls for two overlapping washes (a flat
 * 20% black tint plus a red glow rising from the bottom) — more than
 * Divi's single-gradient background overlay field supports. A
 * pseudo-element layers those on top of the photo without touching
 * Divi's own background-image, so the photo stays swappable from the
 * builder without this going stale. */
.gti-product-category-thumbnail .promo-col:first-child {
    position: relative;
    background-position: center 20%;
}

.gti-product-category-thumbnail .promo-col:first-child::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(180deg, rgba(255, 92, 77, 0.00) 0%, rgba(255, 92, 77, 0.00) 65%, rgba(255, 92, 77, 0.55) 100%);
}

/* Checklist under "The Professional Standard" — replaces the default
 * list bullets with a check-circle icon to match the approved design. */
.gti-product-category-thumbnail .et_pb_blurb_description ul {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.gti-product-category-thumbnail .et_pb_blurb_description ul li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 12px;
}

.gti-product-category-thumbnail .et_pb_blurb_description ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11.003 16L6.76 11.757L8.174 10.343L11.003 13.172L16.659 7.515L18.074 8.929L11.003 16Z" fill="%230085EB"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.standard-professional-col .et_pb_blurb_content  {
    margin: 0 !important;
}


.et_pb_menu .et-menu {
    margin-left: 0;
    margin-right: 0;
}

.footer-cta {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.footer-cta .et_pb_contact_form {
    display: flex;
}

.footer-cta .et_contact_bottom_container {
    margin: 0;
    float: none;
    display: block;
}

.footer-cta .et_contact_bottom_container button {
    font-size: 20px;
    margin: 0;
}

.hero-buttons .et_pb_column {
    text-align: center;
}

.hero-buttons .et_pb_button_module_wrapper {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .hero-buttons .et_pb_button_module_wrapper {
        display: block;
        width: 100%;
    }

    .hero-buttons .et_pb_button_module_wrapper a {
        width: 100%;
    }

    .hero-buttons .et_pb_button_module_wrapper:last-child {
        margin-bottom: 0 !important;
    }
}



/*
 * "Main Navigation 2 Mobile" row — Divi stacks columns/modules vertically
 * on mobile by default, which drops the "Book Now" button below the
 * hamburger icon instead of beside it. Force the row and the column
 * holding [Menu module + Button module] to stay in a flex row so the
 * hamburger/X toggle and the button sit inline, matching the design.
 */
@media (max-width: 980px) {
    .gti-mobile-header-row.et_pb_row,
    .gti-mobile-header-row .et_pb_row_inner {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .gti-mobile-header-row > .et_pb_column {
        width: auto !important;
        flex: 0 0 auto !important;
        max-width: none !important;
    }

    .gti-mobile-header-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px;
    }

    .gti-mobile-header-actions .et_pb_button_module_wrapper {
        margin: 0 !important;
    }

    .gti-mobile-header-actions .et_pb_menu__wrap {
        display: flex !important;
        align-items: center !important;
    }
}

@media (max-width: 980px) {
    footer .et_pb_menu__wrap {
        justify-content: flex-start !important;
    }

    footer .et_pb_module {
        text-align: left;
    }

    footer .et_pb_menu__menu {
        display: block !important   ;
    }
    footer .et_mobile_nav_menu {
        display: none !important;
    }

    /* Statistics row (tablet/phone only): first item alone + centered,
     * remaining stats 2 per row. Desktop keeps Divi's default 5-column
     * layout untouched. */
    .gti-statistics-row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px;
        padding: 50px;

    }

    .gti-statistics-row > .et_pb_column:first-child {
        width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center;
        margin: 0 !important;
    }

    .gti-statistics-row > .et_pb_column:not(:first-child) {
        width: calc(50% - 6px) !important;
        flex: 0 0 calc(50% - 6px) !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    .main-nav li:last-child a {
        padding: 10px 5% !important;
    }
}

/* Affiliate logos gallery — 7 per row desktop, 3 per row tablet + phone,
 * centered. Divi's gallery JS sets an inline height on .et_pb_gallery_items
 * which locks the container height and clips overflow when we reflow to
 * more columns — override it with auto (the row's height should follow
 * its content, not be pinned to a fixed value). The module itself also
 * has a max-height:160px baked into its per-module generated <style>
 * (from the module's own Height setting in the builder) — remove that
 * cap too so the section isn't clipped/fixed regardless of content. */
.et_pb_gallery_0.et_pb_gallery {
    max-height: none !important;
}

.et_pb_gallery_0 .et_pb_gallery_items {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
}

.et_pb_gallery_0 .et_pb_gallery_item {
    width: calc(100% / 7) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
}

/* Nesting display:flex on .et_pb_gallery_image/its <a> (an earlier attempt)
 * made the flex layout stretch the img to fill that chain even with
 * width:auto — so instead leave those elements in normal flow and just
 * center their inline content with text-align. The outer
 * .et_pb_gallery_item flex above still centers the whole tile (and its
 * height) within the row. */
.et_pb_gallery_0 .et_pb_gallery_image {
    text-align: center !important;
}

/* Render every logo at its own original size — only scale DOWN oversized
 * ones so they don't overflow the row. Never scale a logo up past its
 * native resolution, since that's what was causing the blur/pixelation.
 * width/height:auto with only a max-height doesn't stop a replaced
 * element like <img> from being enlarged up to that max, which is why
 * small logos were still getting stretched — object-fit:scale-down fits
 * an explicit box without ever upscaling past intrinsic size. */
.et_pb_gallery_0 .et_pb_gallery_item img {
    width: 100% !important;
    height: 160px !important;
    max-width: 100% !important;
    object-fit: scale-down !important;
    display: inline-block !important;
}

@media (max-width: 980px) {
    .et_pb_gallery_0 .et_pb_gallery_item {
        width: calc(100% / 3) !important;
    }
}

/* Make cards slightly tighter on phones */
@media (max-width: 767px) {
    .gti-statistics-row {
        gap: 8px;
    }

    .gti-statistics-row .et_pb_module {
        padding: 12px;
    }

    .gti-statistics-row h2,
    .gti-statistics-row h3,
    .gti-statistics-row h4 {
        font-size: 16px;
    }

    .gti-statistics-row p {
        font-size: 13px;
    }

    .main-nav li:last-child a {
        padding: 10px 5%;
    }
}

/* GTI Breadcrumbs — see includes/gti-breadcrumbs.php */
.gti-breadcrumbs {
    padding: 12px 0;
    border-bottom: 1px solid #e3e6ec;
}

.gti-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.gti-breadcrumbs li {
    display: flex;
    align-items: center;
}

.gti-breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin: 0 8px;
    color: #5097c9;
}

.gti-breadcrumbs a {
    color: #242d40;
    text-decoration: none;
}

.gti-breadcrumbs a:hover {
    text-decoration: underline;
}

.gti-breadcrumbs span[aria-current="page"] {
    color: #5097c9;
    font-weight: 600;
}

.visual-edge-row {
    display: flex;
    align-items: center;
}
.gti-statistics-row {
    display: flex;
}

.program-portfolio-stat {
    display: flex;
    align-items: center;
    justify-content: center ;
}