/*
Theme Name: Barrie Futsal Club Child
Theme URI: https://barriefutsal.com/
Description: Child theme for Barrie Futsal Club. Adds a safe Elementor-editable homepage while inheriting the complete Barrie Futsal Club parent theme.
Author: Barrie Futsal Club
Template: barrie-futsal-club-theme-v2
Version: 1.0.39
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: barrie-futsal-child
*/

/* Parent theme provides the site's visual styling. */


/* =========================================================
   Homepage Media Library image support
   The actual hero URL is injected dynamically by functions.php
   after WordPress imports the original hero into Media Library.
   ========================================================= */


/* =========================================================
   v1.0.3 - Homepage age groups
   Restore the original card treatment when the markup is
   rendered from the Elementor homepage source page.
   ========================================================= */
body.home .program-grid,
body.home .age-groups-grid,
body.page .elementor .program-grid,
body.page .elementor .age-groups-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important;
}

body.home .program-card,
body.home .age-group-card,
body.page .elementor .program-card,
body.page .elementor .age-group-card {
    background: #fff !important;
    border: 1px solid rgba(11,31,58,.10) !important;
    border-radius: 14px !important;
    padding: 28px 24px !important;
    height: 100% !important;
    box-shadow: 0 8px 24px rgba(11,31,58,.09) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

body.home .program-card:hover,
body.home .age-group-card:hover,
body.page .elementor .program-card:hover,
body.page .elementor .age-group-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 32px rgba(11,31,58,.14) !important;
}

body.home .program-card h3,
body.home .age-group-card h3,
body.page .elementor .program-card h3,
body.page .elementor .age-group-card h3 {
    margin-top: 0 !important;
}

@media (max-width: 1024px) {
    body.home .program-grid,
    body.home .age-groups-grid,
    body.page .elementor .program-grid,
    body.page .elementor .age-groups-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    body.home .program-grid,
    body.home .age-groups-grid,
    body.page .elementor .program-grid,
    body.page .elementor .age-groups-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Added automatically above the age-group/program cards. */
.bf-age-groups-heading {
    text-align: center;
    margin: 0 0 30px;
    color: var(--navy, #0B1F3A);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    font-weight: 800;
}


/* =========================================================
   v1.0.4 - Exact age-group markup fix
   Actual markup: .quick-links > .container.cards.four >
                  a.feature-card
   ========================================================= */

body.home .quick-links {
    padding-top: 58px !important;
    padding-bottom: 62px !important;
}

body.home .quick-links .container.cards.four,
body.page .elementor .quick-links .container.cards.four {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important;
}

body.home .quick-links .feature-card,
body.page .elementor .quick-links .feature-card {
    display: block !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 28px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: var(--radius, 14px) !important;
    box-shadow: var(--shadow, 0 10px 28px rgba(11,31,58,.10)) !important;
    color: var(--navy, #0B1F3A) !important;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

body.home .quick-links .feature-card:hover,
body.page .elementor .quick-links .feature-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 32px rgba(11,31,58,.14) !important;
}

body.home .quick-links .feature-card span,
body.page .elementor .quick-links .feature-card span {
    display: block !important;
    margin-bottom: 20px !important;
    font-size: 28px !important;
    line-height: 1 !important;
}

body.home .quick-links .feature-card h3,
body.page .elementor .quick-links .feature-card h3 {
    margin: 0 0 14px !important;
    color: var(--navy, #0B1F3A) !important;
}

body.home .quick-links .feature-card p,
body.page .elementor .quick-links .feature-card p {
    margin: 0 !important;
    color: var(--navy, #0B1F3A) !important;
}

body.home .quick-links .bf-age-groups-heading,
body.page .elementor .quick-links .bf-age-groups-heading {
    max-width: var(--container, 1120px);
    margin: 0 auto 30px !important;
    padding: 0 20px;
    text-align: left;
    color: var(--navy, #0B1F3A);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    font-weight: 800;
}

@media (max-width: 1024px) {
    body.home .quick-links .container.cards.four,
    body.page .elementor .quick-links .container.cards.four {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    body.home .quick-links .container.cards.four,
    body.page .elementor .quick-links .container.cards.four {
        grid-template-columns: 1fr !important;
    }
}


/* v1.0.5: server-rendered age-groups title */
body.home .quick-links > .bf-age-groups-heading,
body.home .quick-links .bf-age-groups-heading {
    display: block !important;
    width: min(var(--container, 1120px), calc(100% - 40px)) !important;
    margin: 0 auto 30px !important;
    padding: 0 !important;
    text-align: left !important;
    color: var(--navy, #0B1F3A) !important;
    font-size: clamp(28px, 3vw, 40px) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}


/* v1.0.7 - heading is now stored in the actual Elementor homepage content */
body.home .quick-links .container > .bf-age-groups-heading,
body.page .elementor .quick-links .container > .bf-age-groups-heading {
    display: block !important;
    margin: 0 0 30px !important;
    padding: 0 !important;
    text-align: left !important;
    color: var(--navy, #0B1F3A) !important;
    font-size: clamp(28px, 3vw, 40px) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}


/* =========================================================
   v1.0.8 - Native Elementor feature cards
   Background images are selected per card in Elementor.
   ========================================================= */
body.home .bf-native-section {
    width: 100%;
}

body.home .bf-age-groups-native,
body.home .bf-complete-player-native {
    background: #fff;
}

body.home .bf-development-native {
    background: var(--light, #F5F7FA);
}

body.home .bf-native-section-title {
    margin-bottom: 28px;
}

body.home .bf-native-card-grid {
    display: grid !important;
    width: 100% !important;
    gap: 22px !important;
}

body.home .bf-native-card-grid-4 {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}

body.home .bf-native-card-grid-3 {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}

body.home .bf-native-card {
    position: relative !important;
    overflow: hidden !important;
    min-height: 220px !important;
    padding: 28px !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(11,31,58,.12) !important;
    background-color: var(--navy, #0B1F3A);
    background-position: center !important;
    background-size: cover !important;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

body.home .bf-native-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(11,31,58,.72);
    z-index: 0;
    pointer-events: none;
}

body.home .bf-native-card > * {
    position: relative;
    z-index: 1;
}

body.home .bf-native-card h3,
body.home .bf-native-card p,
body.home .bf-native-card .elementor-heading-title,
body.home .bf-native-card .elementor-widget-text-editor,
body.home .bf-native-card .elementor-widget-text-editor p {
    color: #fff !important;
}

body.home .bf-native-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 34px rgba(11,31,58,.20) !important;
}

@media (max-width:1024px) {
    body.home .bf-native-card-grid-4,
    body.home .bf-native-card-grid-3 {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

@media (max-width:767px) {
    body.home .bf-native-card-grid-4,
    body.home .bf-native-card-grid-3 {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   v1.0.9 - Restore original card proportions and appearance
   while retaining native Elementor background-image controls.
   ========================================================= */

/* Elementor's container CSS is flex-based. Explicit widths prevent
   each native card from expanding to a full row. */
body.home .bf-native-card-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 22px !important;
}

body.home .bf-native-card-grid-4 > .bf-native-card {
    flex: 0 0 calc((100% - 66px) / 4) !important;
    width: calc((100% - 66px) / 4) !important;
    max-width: calc((100% - 66px) / 4) !important;
}

body.home .bf-native-card-grid-3 > .bf-native-card {
    flex: 0 0 calc((100% - 44px) / 3) !important;
    width: calc((100% - 44px) / 3) !important;
    max-width: calc((100% - 44px) / 3) !important;
}

/* Restore the original compact white-card treatment. */
body.home .bf-native-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 28px 24px !important;
    background-color: #fff !important;
    border: 1px solid rgba(11,31,58,.06) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(11,31,58,.10) !important;
    color: var(--navy, #0B1F3A) !important;
}

/* No forced dark layer when a card has no photograph. Elementor's own
   Background Overlay remains available to the user when an image is chosen. */
body.home .bf-native-card::before {
    display: none !important;
}

body.home .bf-native-card h3,
body.home .bf-native-card p,
body.home .bf-native-card .elementor-heading-title,
body.home .bf-native-card .elementor-widget-text-editor,
body.home .bf-native-card .elementor-widget-text-editor p {
    color: var(--navy, #0B1F3A) !important;
}

body.home .bf-native-card .elementor-heading-title {
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    margin: 0 !important;
}

body.home .bf-native-card .elementor-widget-text-editor,
body.home .bf-native-card .elementor-widget-text-editor p {
    font-size: 15px !important;
    line-height: 1.55 !important;
}

body.home .bf-native-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 32px rgba(11,31,58,.14) !important;
}

/* When the editor adds a background image, make the text readable.
   Elementor adds .e-con when the image is present but does not expose a
   reliable front-end class for "has background image", so a small runtime
   class is added by the child theme below. */
body.home .bf-native-card.bf-has-bg-image {
    background-color: var(--navy, #0B1F3A) !important;
}

body.home .bf-native-card.bf-has-bg-image::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(11,31,58,.68) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

body.home .bf-native-card.bf-has-bg-image > * {
    position: relative !important;
    z-index: 1 !important;
}

body.home .bf-native-card.bf-has-bg-image h3,
body.home .bf-native-card.bf-has-bg-image p,
body.home .bf-native-card.bf-has-bg-image .elementor-heading-title,
body.home .bf-native-card.bf-has-bg-image .elementor-widget-text-editor,
body.home .bf-native-card.bf-has-bg-image .elementor-widget-text-editor p {
    color: #fff !important;
}

@media (max-width:1024px) {
    body.home .bf-native-card-grid-4 > .bf-native-card,
    body.home .bf-native-card-grid-3 > .bf-native-card {
        flex-basis: calc((100% - 22px) / 2) !important;
        width: calc((100% - 22px) / 2) !important;
        max-width: calc((100% - 22px) / 2) !important;
    }
}

@media (max-width:767px) {
    body.home .bf-native-card-grid-4 > .bf-native-card,
    body.home .bf-native-card-grid-3 > .bf-native-card {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* =========================================================
   v1.0.10 - Elementor container structure correction
   Elementor may insert .e-con-inner between grid and cards.
   ========================================================= */

/* Grid itself and Elementor's optional inner wrapper */
body.home .bf-native-card-grid,
body.home .bf-native-card-grid > .e-con-inner {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    gap: 22px !important;
    align-items: stretch !important;
}

body.home .bf-native-card-grid-4,
body.home .bf-native-card-grid-4 > .e-con-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.home .bf-native-card-grid-3,
body.home .bf-native-card-grid-3 > .e-con-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Reset Elementor's generated width/flex rules on cards. */
body.home .bf-native-card-grid > .bf-native-card,
body.home .bf-native-card-grid > .e-con-inner > .bf-native-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    align-self: stretch !important;
}

/* Exact original white-card baseline when no photo is chosen. */
body.home .bf-native-card:not(.bf-has-bg-image) {
    background: #fff !important;
    background-image: none !important;
    color: var(--navy, #0B1F3A) !important;
}

body.home .bf-native-card:not(.bf-has-bg-image)::before,
body.home .bf-native-card:not(.bf-has-bg-image) > .elementor-background-overlay {
    display: none !important;
}

/* Compact proportions matching the earlier card design. */
body.home .bf-native-card {
    min-height: 155px !important;
    padding: 28px 24px !important;
    border: 1px solid rgba(11,31,58,.06) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(11,31,58,.10) !important;
}

/* Elementor editor uses a different body context; keep the same grid there. */
body.elementor-editor-active .bf-native-card-grid,
body.elementor-editor-active .bf-native-card-grid > .e-con-inner {
    display: grid !important;
    gap: 22px !important;
}
body.elementor-editor-active .bf-native-card-grid-4,
body.elementor-editor-active .bf-native-card-grid-4 > .e-con-inner {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}
body.elementor-editor-active .bf-native-card-grid-3,
body.elementor-editor-active .bf-native-card-grid-3 > .e-con-inner {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}
body.elementor-editor-active .bf-native-card-grid > .bf-native-card,
body.elementor-editor-active .bf-native-card-grid > .e-con-inner > .bf-native-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
}

@media (max-width:1024px) {
    body.home .bf-native-card-grid-4,
    body.home .bf-native-card-grid-4 > .e-con-inner,
    body.home .bf-native-card-grid-3,
    body.home .bf-native-card-grid-3 > .e-con-inner {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}

@media (max-width:767px) {
    body.home .bf-native-card-grid-4,
    body.home .bf-native-card-grid-4 > .e-con-inner,
    body.home .bf-native-card-grid-3,
    body.home .bf-native-card-grid-3 > .e-con-inner {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   v1.0.11 - authoritative native-card layout
   Layout is independent of card background images.
   ========================================================= */
body.home .bf-native-card-grid,
body.home .bf-native-card-grid > .e-con-inner,
body.elementor-editor-active .bf-native-card-grid,
body.elementor-editor-active .bf-native-card-grid > .e-con-inner {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: stretch !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: 100% !important;
}
body.home .bf-native-card-grid .bf-native-card,
body.elementor-editor-active .bf-native-card-grid .bf-native-card {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 155px !important;
    height: auto !important;
    padding: 28px 24px !important;
    background-color: #fff;
    border: 1px solid rgba(11,31,58,.06) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(11,31,58,.10) !important;
    overflow: hidden !important;
    position: relative !important;
}
body.home .bf-native-card-grid-4 .bf-native-card,
body.elementor-editor-active .bf-native-card-grid-4 .bf-native-card {
    flex: 0 0 calc((100% - 66px) / 4) !important;
    width: calc((100% - 66px) / 4) !important;
    max-width: calc((100% - 66px) / 4) !important;
}
body.home .bf-native-card-grid-3 .bf-native-card,
body.elementor-editor-active .bf-native-card-grid-3 .bf-native-card {
    flex: 0 0 calc((100% - 44px) / 3) !important;
    width: calc((100% - 44px) / 3) !important;
    max-width: calc((100% - 44px) / 3) !important;
}
/* Do NOT set background or background-image here. Elementor owns that property,
   so choosing a Media Library image cannot alter layout and cannot be erased by CSS. */
body.home .bf-native-card-grid .bf-native-card::before,
body.elementor-editor-active .bf-native-card-grid .bf-native-card::before {
    display: none !important;
}
body.home .bf-native-card-grid .bf-native-card .elementor-heading-title,
body.home .bf-native-card-grid .bf-native-card .elementor-widget-text-editor,
body.home .bf-native-card-grid .bf-native-card .elementor-widget-text-editor p {
    color: var(--navy,#0B1F3A);
}
@media (max-width:1024px) {
 body.home .bf-native-card-grid-4 .bf-native-card,
 body.home .bf-native-card-grid-3 .bf-native-card,
 body.elementor-editor-active .bf-native-card-grid-4 .bf-native-card,
 body.elementor-editor-active .bf-native-card-grid-3 .bf-native-card {
   flex-basis: calc((100% - 22px)/2) !important;
   width: calc((100% - 22px)/2) !important;
   max-width: calc((100% - 22px)/2) !important;
 }
}
@media (max-width:767px) {
 body.home .bf-native-card-grid-4 .bf-native-card,
 body.home .bf-native-card-grid-3 .bf-native-card,
 body.elementor-editor-active .bf-native-card-grid-4 .bf-native-card,
 body.elementor-editor-active .bf-native-card-grid-3 .bf-native-card {
   flex-basis: 100% !important; width:100% !important; max-width:100% !important;
 }
}


/* =========================================================
   v1.0.12 - FINAL CARD GRID OVERRIDE
   Deliberately NOT scoped to body.home: front-page.php renders
   Elementor content from a separate source page, so body/query
   classes are not a reliable styling hook.
   ========================================================= */
.bf-native-card-grid,
.bf-native-card-grid > .e-con-inner {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 22px !important;
    align-items: stretch !important;
    flex: none !important;
}
.bf-native-card-grid-4,
.bf-native-card-grid-4 > .e-con-inner {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}
.bf-native-card-grid-3,
.bf-native-card-grid-3 > .e-con-inner {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}
.bf-native-card-grid .bf-native-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 155px !important;
    height: 100% !important;
    flex: none !important;
    padding: 28px 24px !important;
    border: 1px solid rgba(11,31,58,.06) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(11,31,58,.10) !important;
    overflow: hidden !important;
    position: relative !important;
    background-color: #fff;
}
.bf-native-card-grid .bf-native-card .elementor-heading-title,
.bf-native-card-grid .bf-native-card .elementor-widget-text-editor,
.bf-native-card-grid .bf-native-card .elementor-widget-text-editor p {
    color: var(--navy,#0B1F3A) !important;
}
.bf-native-card-grid .bf-native-card.bf-has-bg-image .elementor-heading-title,
.bf-native-card-grid .bf-native-card.bf-has-bg-image .elementor-widget-text-editor,
.bf-native-card-grid .bf-native-card.bf-has-bg-image .elementor-widget-text-editor p {
    color:#fff !important;
}
.bf-native-card-grid .bf-native-card.bf-has-bg-image::after {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(11,31,58,.64);
    z-index:0;
    pointer-events:none;
}
.bf-native-card-grid .bf-native-card.bf-has-bg-image > * {
    position:relative !important;
    z-index:1 !important;
}
@media (max-width:1024px) {
    .bf-native-card-grid-4,
    .bf-native-card-grid-4 > .e-con-inner,
    .bf-native-card-grid-3,
    .bf-native-card-grid-3 > .e-con-inner {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}
@media (max-width:767px) {
    .bf-native-card-grid-4,
    .bf-native-card-grid-4 > .e-con-inner,
    .bf-native-card-grid-3,
    .bf-native-card-grid-3 > .e-con-inner {
        grid-template-columns:1fr !important;
    }
}


/* =========================================================
   v1.0.13 - Deterministic Barrie Futsal card-grid widget
   ========================================================= */
.bf-card-widget-section { padding:58px 20px 62px; width:100%; box-sizing:border-box; }
.bf-card-widget-container { width:min(1120px,100%); margin:0 auto; }
.bf-card-widget-title { margin:0 0 30px; color:var(--navy,#0B1F3A); font-size:clamp(28px,3vw,40px); line-height:1.15; font-weight:800; }
.bf-card-widget-container > .eyebrow { margin-bottom:16px; }
.bf-card-widget-grid { display:grid !important; gap:22px !important; width:100% !important; }
.bf-card-widget-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
.bf-card-widget-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.bf-card-widget-card { position:relative; display:block; box-sizing:border-box; min-width:0; min-height:155px; padding:28px 24px; overflow:hidden; background-color:#fff; background-position:center; background-repeat:no-repeat; background-size:cover; border:1px solid rgba(11,31,58,.06); border-radius:14px; box-shadow:0 10px 28px rgba(11,31,58,.10); text-decoration:none !important; transition:transform .2s ease,box-shadow .2s ease; }
.bf-card-widget-card:hover { transform:translateY(-4px); box-shadow:0 14px 32px rgba(11,31,58,.14); }
.bf-card-widget-overlay { position:absolute; inset:0; background:rgba(11,31,58,.68); z-index:0; }
.bf-card-widget-content { position:relative; z-index:1; display:block; }
.bf-card-widget-card h3 { margin:0 0 14px; color:var(--navy,#0B1F3A); font-size:18px; line-height:1.25; font-weight:800; }
.bf-card-widget-card p { margin:0; color:var(--text,#182230); font-size:15px; line-height:1.55; }
.bf-card-widget-card.has-image h3,.bf-card-widget-card.has-image p { color:#fff; }
@media(max-width:1024px){.bf-card-widget-grid-4,.bf-card-widget-grid-3{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media(max-width:767px){.bf-card-widget-grid-4,.bf-card-widget-grid-3{grid-template-columns:1fr !important;}}


/* v1.0.14 standard Elementor pages */
.bf-elementor-page { width:100%; }
.bf-elementor-page > .elementor { width:100%; }
.bf-editable-page-section { padding:56px 20px; }
.bf-editable-page-section > .e-con-inner { max-width:1120px; margin:0 auto; }


/* v1.0.18 - standard-page widget uses the original Barrie Futsal theme classes. */
.bf-elementor-page > .elementor { width:100%; }
.cards.two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.elementor-widget-bf-standard-page { width:100%; }
.elementor-widget-bf-standard-page > .elementor-widget-container { width:100%; }
@media(max-width:600px){ .cards.two { grid-template-columns:1fr; } }


/* v1.0.21 email fallback used only when the browser remains on-page */
.bf-email-fallback { display:inline-block; margin-left:12px; font-weight:700; }
.bf-email-fallback a { color:inherit; text-decoration:underline; }
.site-footer .bf-email-fallback { display:block; margin:8px 0 0; color:#fff; }


/* v1.0.28 - Elementor-controlled overlays for image-backed custom widgets. */
.bf-elementor-home-hero { position:relative; overflow:hidden; }
.bf-elementor-home-hero .bf-hero-widget-overlay { position:absolute; inset:0; z-index:0; pointer-events:none; }
.bf-elementor-home-hero .hero-content { position:relative; z-index:1; }


/* v1.0.28 - Background overlays and border-ready boxed components. */
.elementor-widget-bf-standard-page .info-card,
.elementor-widget-bf-standard-page .callout,
.elementor-widget-bf-standard-page .contact-form { position:relative; overflow:hidden; isolation:isolate; }
.elementor-widget-bf-standard-page .info-card::before,
.elementor-widget-bf-standard-page .callout::before,
.elementor-widget-bf-standard-page .contact-form::before {
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:var(--bf-box-overlay-color,#0B1F3A); opacity:var(--bf-box-overlay-opacity,0);
}

/* v1.0.29 layered backgrounds for native homepage banner/CTA widgets */
.bf-home-registration,.bf-home-cta{position:relative;overflow:hidden;}
.bf-home-registration .bf-section-overlay,.bf-home-cta .bf-section-overlay{position:absolute;inset:0;z-index:0;pointer-events:none;}
.bf-home-registration .bf-section-content,.bf-home-cta .bf-section-content{position:relative;z-index:1;}

/* v1.0.33 - Consistent content width for regular Elementor pages.
   Constrains only top-level Elementor containers inside the child theme's
   .bf-elementor-page wrapper; homepage/custom full-width sections are untouched. */
.bf-elementor-page > .elementor > .e-con,
.bf-elementor-page > .elementor > .elementor-element.e-con {
    width: calc(100% - 40px) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 767px) {
    .bf-elementor-page > .elementor > .e-con,
    .bf-elementor-page > .elementor > .elementor-element.e-con {
        width: calc(100% - 28px) !important;
    }
}

/* v1.0.34 - Mobile stacking for regular Elementor page layouts.
   Desktop/tablet styling is unchanged. On phones, top-level page containers
   and their direct container/widget children become a single fluid column so
   desktop custom widths cannot squeeze text beside an image. */
@media (max-width: 767px) {
    .bf-elementor-page > .elementor > .e-con {
        flex-direction: column !important;
        --flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    .bf-elementor-page > .elementor > .e-con > .e-con-inner {
        flex-direction: column !important;
        --flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    .bf-elementor-page > .elementor > .e-con > .e-con,
    .bf-elementor-page > .elementor > .e-con > .elementor-element,
    .bf-elementor-page > .elementor > .e-con > .e-con-inner > .e-con,
    .bf-elementor-page > .elementor > .e-con > .e-con-inner > .elementor-element {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-basis: auto !important;
    }

    .bf-elementor-page .elementor-widget-icon-list,
    .bf-elementor-page .elementor-widget-image,
    .bf-elementor-page .elementor-widget-icon-list > .elementor-widget-container,
    .bf-elementor-page .elementor-widget-image > .elementor-widget-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .bf-elementor-page .elementor-widget-image img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .bf-elementor-page .elementor-icon-list-item,
    .bf-elementor-page .elementor-icon-list-text {
        min-width: 0 !important;
        overflow-wrap: normal;
        word-break: normal;
    }
}


/* v1.0.35 - Shared LEAGUES hero for Kids/Youth and Adult league detail pages. */
.bf-league-detail-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center;
    background-color: #0B1F3A;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}
.bf-league-detail-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(11,31,58,.94) 0%, rgba(11,31,58,.78) 55%, rgba(11,31,58,.58) 100%);
}
.bf-league-detail-hero-inner {
    width: calc(100% - 40px);
    max-width: 1120px;
    margin: 0 auto;
    padding: 52px 0 46px;
}
.bf-league-detail-hero .eyebrow {
    margin: 0 0 10px;
    color: #FF6B00;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.bf-league-detail-hero h1 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(42px, 6vw, 68px);
    line-height: .98;
    font-weight: 900;
}
.bf-league-detail-subtitle {
    margin: 0 0 20px;
    max-width: 720px;
    color: #fff;
    font-size: 18px;
    line-height: 1.5;
}
.bf-league-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255,255,255,.88);
}
.bf-league-breadcrumbs a { color: #fff; text-decoration: none; }
.bf-league-breadcrumbs a:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .bf-league-detail-hero { min-height: 240px; }
    .bf-league-detail-hero-inner {
        width: calc(100% - 28px);
        padding: 38px 0 34px;
    }
    .bf-league-detail-hero h1 { font-size: clamp(38px, 13vw, 52px); }
    .bf-league-detail-subtitle { font-size: 16px; margin-bottom: 16px; }
    .bf-league-breadcrumbs { font-size: 13px; }
}


/* v1.0.36 - Prominent club crest in Programs and Leagues hero areas. */
.bf-page-hero-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}
.bf-page-hero-copy { min-width: 0; flex: 1 1 auto; }
.bf-page-hero-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 22px;
}
.bf-page-hero-logo img {
    display: block;
    width: 155px;
    max-height: 190px;
    height: auto;
    object-fit: contain;
}
.bf-league-detail-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}
.bf-league-detail-copy { min-width: 0; flex: 1 1 auto; }
.bf-league-detail-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 22px;
}
.bf-league-detail-logo img {
    display: block;
    width: 155px;
    max-height: 190px;
    height: auto;
    object-fit: contain;
}
@media (max-width: 1024px) {
    .bf-page-hero-layout, .bf-league-detail-hero-inner { gap: 30px; }
    .bf-page-hero-logo img, .bf-league-detail-logo img { width: 125px; max-height: 155px; }
}
@media (max-width: 767px) {
    .bf-page-hero-layout,
    .bf-league-detail-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .bf-page-hero-logo,
    .bf-league-detail-logo {
        width: 100%;
        justify-content: center;
        padding: 4px 0 0;
    }
    .bf-page-hero-logo img,
    .bf-league-detail-logo img { width: 95px; max-height: 120px; }
}


/* v1.0.37 - Contact joins the shared branded page-hero treatment.
   The existing .bf-page-hero-* responsive rules intentionally apply unchanged. */

/* v1.0.39 native Elementor compatibility: preserve the established theme design. */
.bf-native-text-link .elementor-button{background:transparent!important;color:var(--blue,#0057B8)!important;padding:0!important;border:0!important;border-radius:0!important;font:inherit!important;font-weight:800!important;text-transform:uppercase!important;box-shadow:none!important;}
.bf-native-primary .elementor-button{background:var(--orange,#FF6B00)!important;color:#fff!important;border-radius:4px!important;font-weight:800!important;text-transform:uppercase!important;}
.bf-native-hero-logo-image img{width:100%;height:auto;display:block;}
.elementor-element.page-hero{width:100%;}
.elementor-element.page-hero>.e-con-inner{max-width:none!important;padding:0!important;}
.elementor-element.section{width:100%;}
.elementor-element.section>.e-con-inner{max-width:none!important;padding:0!important;}
.elementor-element.container{max-width:1120px;margin-left:auto;margin-right:auto;width:100%;}
.elementor-element.cards.three{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important;}
.elementor-element.cards.two{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important;}
.elementor-element.info-card{display:flex!important;flex-direction:column!important;}
.elementor-element.bf-page-hero-layout{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;}
.elementor-element.bf-page-hero-copy{flex:1 1 auto!important;}
.elementor-element.bf-page-hero-logo{flex:0 0 180px!important;max-width:180px!important;}
@media(max-width:767px){
 .elementor-element.cards.three,.elementor-element.cards.two{grid-template-columns:1fr!important;}
 .elementor-element.bf-page-hero-layout{flex-direction:column!important;align-items:flex-start!important;gap:24px!important;}
 .elementor-element.bf-page-hero-logo{align-self:center!important;flex-basis:auto!important;max-width:130px!important;}
}