/*
Theme Name: Creative Player Foundation
Theme URI: 
Author: TIA
Description: A custom theme for WordPress
Version: 1.11
*/

@font-face {
    font-family: 'Anke';
    src: url('./assets/fonts/Anke.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'Avenir LT Pro';
    src: url('./assets/fonts/AvenirLTProMedium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir LT Pro';
    src: url('./assets/fonts/AvenirLTProRoman.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('./assets/fonts/inter.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
    list-style: none;
}

*::after,
*::before {
    box-sizing: border-box;
}

:root {

    /* Theme Colors */
    --dark-green: #22362E;
    --orange: #ED7E29;
    --pink: #EC92F6;
    --blue: #5C30FF;
    --primary-yellow: #F3E60C;
    --primary-green: #25773C;
    --primary-black: #000000;
    --primary-white: #ffffff;
    --secondary-yellow: #FFF76B;
    --secondary-green: #254C3C;
    --secondary-redbrown: #D1584D;
    --secondary-grey: #BBBCBC;

    /* Breakpoints */
    --desktop: 1440px;
    --tablet: 1024px;
    --mobile: 390px;

    /* Spacing */
    --gap-8: 8px;
    --gap-16: clamp(12px, 1.111vw, 16px);
    --gap-24: clamp(16px, 1.667vw, 24px);
    --gap-32: clamp(24px, 2.222vw, 32px);
    --gap-56: clamp(32px, 3.889vw, 56px);
    --gap-64: clamp(40px, 4.444vw, 64px);
    --gap-96: clamp(32px, 6.667vw, 96px);
    --gap-120: clamp(40px, 8.333vw, 120px);

}

p {
    margin-bottom: 0;
}

body {
    font-family: 'Avenir LT Pro', sans-serif;
}

/* Override Bootstrap container max-width */
.container {
    max-width: 1440px !important;
}

.container-sm {
    max-width: 1366px !important;
}

/* Smooth fade transition for tab content */
.tab-pane {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.tab-pane.show {
    opacity: 1;
}

img {
    max-width: 100%;
    object-fit: contain;
    height: auto;
}

/* Typography Colors */
h1 {
    font-size: clamp(40px, 3.333vw, 48px);
    line-height: 120%;
    font-weight: 400;
}

.h2,
h2 {
    font-size: clamp(32px, 2.778vw, 40px);
    line-height: 120%;
    font-weight: 400;
}

h3 {
    font-size: clamp(24px, 2.222vw, 32px);
    line-height: 120%;
    font-weight: 400;
}

.h4,
h4 {
    font-size: clamp(22px, 1.667vw, 24px) !important;
    line-height: 120%;
    font-weight: 400;
}

.l-card-heading {
    font-size: clamp(32px, 2.778vw, 40px);
}

.small-card-heading {
    font-size: clamp(24px, 2.222vw, 32px);
}

.stats {
    font-size: clamp(80px, 6.25vw, 90px);
}

.f-22 {
    font-size: 22px;
}

h1,
h2,
h3,
h4,
.l-card-heading,
.small-card-heading,
.stats {
    font-family: 'Anke', sans-serif;
}

p {
    font-family: "Avenir LT Pro";
    font-size: 18px;
    font-weight: 400;
    line-height: 150%;
}




/* Spacing */
.gap {
    padding: var(--gap, 0) 0;
}

.gap-t {
    padding-top: var(--gap, 0);
}

.gap-b {
    padding-bottom: var(--gap, 0);
}

.section {
    padding: var(--section, 0);
}

.section-t {
    padding-top: var(--section, 0);
}

.section-b {
    padding-bottom: var(--section, 0);
}

.gap-8 {
    --gap: var(--gap-8);
}

x {
    --gap: var(--gap-16);
}

.gap-24 {
    --gap: var(--gap-24);
}

.gap-32 {
    --gap: var(--gap-32);
}

.gap-56 {
    --gap: var(--gap-56);
}

.gap-bottom-16 {
    padding-bottom: 16px;
}

.gap-top-32 {
    padding-top: 32px;
}

.gap-bottom-32 {
    padding-bottom: 32px;
}

.gap-top-48 {
    padding-top: 48px;
}

.gap-bottom-48 {
    padding-bottom: 48px;
}

.gap-top-56 {
    padding-top: clamp(40px, 3.889vw, 56px);
}

.gap-bottom-56 {
    padding-bottom: clamp(40px, 3.889vw, 56px);
}

.gap-top-96 {
    padding-top: clamp(40px, 6.667vw, 96px);
}

.gap-bottom-96 {
    padding-bottom: clamp(40px, 6.667vw, 96px);
}

.gap-top-24 {
    padding-top: clamp(16px, 1.667vw, 24px);
}

.gap-bottom-24 {
    padding-bottom: clamp(16px, 1.667vw, 24px);
}

.section-56 {
    --section: var(--gap-56);
}

.section-64 {
    --section: var(--gap-64);
}

.section-96 {
    --section: var(--gap-96);
}

.section-120 {
    --section: var(--gap-120);
}


/* Rounded Corners */
.rounded-s {
    border-radius: 16px;
}

.rounded-m {
    border-radius: clamp(16px, 1.667vw, 24px);
}

.rounded-l {
    border-radius: clamp(24px, 2.222vw, 32px);
}

.rounded-btn {
    border-radius: 4px;
}


/*buttons*/
.btn {
    font-family: 'Avenir LT Pro', sans-serif;
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 4px;
    font-style: normal;
}

.btn-green-yellow {
    border: 2px solid var(--primary-yellow, #F3E60C);
    background: #164423;
    color: #F3E60C;
}

.btn-green-yellow svg * {
    stroke: transparent;
    color: #F3E60C;
    fill: #F3E60C;
}

.btn-green-yellow:hover {
    border: 2px solid #164423 !important;
    background: var(--Primary-Yellow, #F3E60C) !important;
    color: black !important;
}


.btn-green-yellow:hover svg * {
    color: black;
    stroke: black;
    fill: black;
}

.btn-white-green {
    border: 2px solid var(--Primary-Yellow, #F3E60C);
    background: var(--Primary-White, #FFF);
    color: #25773C;
}

.btn-white-green svg * {
    color: #25773C;
    stroke: #25773C;
}

.btn-white-green:hover {
    border-radius: var(--Round-Corner-Round-Corner-Btn, 4px);
    background: var(--Primary-Yellow, #F3E60C);
    color: black;
}

.btn-white-green:hover svg * {
    color: black;
    stroke: black;
}

.btn-transparent-white {
    border: 2px solid #FFAC20;
    background: rgba(255, 255, 255, 0.00);
    color: white;
}

.btn-transparent-white svg * {
    color: white;
    stroke: white;
}

.btn-transparent-white:hover {
    border: 2px solid #FFAC20;
    background: #FFAC20;
    color: black;
}

.btn-transparent-white:hover svg * {
    color: black;
    stroke: black;
}

.btn-yellow-black {
    border: 2px solid #164423;
    background: var(--Primary-Yellow, #F3E60C);
    color: black;
}

.btn-yellow-black svg * {
    color: transparent;
    stroke: black;
    /* fill: black; */
}

.btn-yellow-black:hover {
    border: 2px solid var(--Primary-Yellow, #F3E60C);
    background: var(--Primary-White, #FFF);
}

/* .btn-yellow-black:hover svg * {
    color: white;
    stroke: white;
} */
.common_background_btn .btn-green-yellow:hover,
.common_background_section .btn-green-yellow:hover {
    border: 2px solid var(--Primary-Yellow, #F3E60C) !important;
    background: var(--Primary-white, #ffffff) !important;
    color: black !important;
}

span.hero-badge {
    font-family: 'Avenir LT Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 150%;
    display: block;
    margin-bottom: 16px;
}

/*header*/
.sportsengine {
    background: #23282b;
}

.sportsengine img {
    max-width: 170px;
}

.sportsengine a {
    color: white;
}

.main-header {
    background: var(--Secondary-green, #254C3C);
}

.main-header .logo {
    max-width: 67px;
}

.main-header .nav a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 700;
}

/*footer*/
footer {
    background: var(--Secondary-green, #254C3C);
    color: white;
}

footer .logo {
    max-width: 165px;
    margin-bottom: 24px;
}

footer .column-2 {
    min-width: 50%;
}

footer h3 {
    font-family: 'Satoshi', sans-serif;
    font-size: var(--Font-Paragraph, 18px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 13px;

}

footer a {
    color: white;
}

footer .donate-container {
    border-radius: var(--Round-Corner-Round-Corner-M, 24px);
    background: rgba(31, 31, 31, 0.50);
    padding: var(--Gap-Gap-32, 32px);
}

#menu-footer li a:hover {
    color: var(--primary-yellow);
}

footer .nav {
    height: max-content;
}

footer .nav li a {
    text-decoration: none;
    margin-bottom: 16px;
    display: block;
}

footer .subscribe_box {
    margin-top: 13px;
    display: flex;
    align-items: center;
    gap: 0;
}

footer .subscribe_box input#subscribe {
    background-color: var(--primary-white);
    border: none;
    padding: 11px 22px;
    width: 100%;
    display: block;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

footer .subscribe_box input[type="submit"] {
    padding: 11px 22px;
    background-color: var(--dark-green);
    color: var(--primary-white);
    border: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
footer .fc_info {
    padding-left: 0;
}

footer .fc_info a {
    text-decoration: none;
}

/* Common Banner Section CSS Start */
.common_banner {
    background-repeat: no-repeat;
    background-size: cover;
}

.common_banner p,
.common_banner h1 {
    color: var(--primary-white);
}

body section {
    scroll-margin-top: 250px
}

.ff_submit_btn_wrapper button[type="submit"] {
    font-family: 'Avenir LT Pro', sans-serif;
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: 500;
    padding: 12px 46px 12px 16px;
    border-radius: 4px;
    min-width: 205px;
    font-style: normal;
    opacity: 1 !important;
}

.ff_submit_btn_wrapper button[type="submit"]::after {
    position: absolute;
    content: '';
    background-image: url('./assets/yellow_wheel.svg');
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    left: 55%;
    transform: translateX(50%);
}

.ff_submit_btn_wrapper button[type="submit"]:hover {
    background-color: #F3E60C !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

.ff_submit_btn_wrapper button[type="submit"]:hover::after {
    mix-blend-mode: exclusion;
}

.left_right_section .excerpt {
    --visible-lines: 7;
    --max-height-collapsed: calc(var(--line-height) * var(--visible-lines));
    --max-height-expanded: 2000px;
}

/* hide any checkbox */
.left_right_section input[type=checkbox] {
    position: absolute;
    left: -9999px;
}

/* clamp paragraph */
.left_right_section .excerpt {
    line-height: var(--line-height);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--visible-lines);
    overflow: hidden;
    max-height: var(--max-height-collapsed);
    transition: max-height 300ms ease, -webkit-line-clamp 300ms ease;
    position: relative;
}

.left_right_section .excerpt::after {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--line-height) * 1.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
}

/* expanded state (match the specific checkbox before the excerpt) */
.left_right_section input[type=checkbox]:checked+.excerpt {
    -webkit-line-clamp: unset;
    display: block;
    max-height: var(--max-height-expanded);
}

.left_right_section input[type=checkbox]:checked+.excerpt::after {
    display: none;
}

/* toggle button */
.left_right_section .toggle {
    display: inline-block;
    margin-top: 10px;
    cursor: pointer;
    font-weight: 600;
    color: #000000;
    user-select: none;
}

/* switch label text depending on state */
.left_right_section .toggle::after {
    content: "Read more";
}

.left_right_section input[type=checkbox]:checked+.excerpt+.toggle::after {
    content: "Read less";
}

.date_icon {
    position: relative;
}

.date_icon::after {
    position: absolute;
    content: "";
    background-image: url('https://stagingserver.ca/cpf/wp-content/uploads/2025/09/calendar_icon.svg');
    width: 24px;
    height: 24px;
    right: 8px;
    top: 65%;
    transform: translateY(-50%);
}

@media(min-width: 1400px) {
    .common_banner .banner_content {
        position: relative;
        top: -29px;
        padding-left: 17px;
    }

    .common_banner .banner_img {
        position: relative;
        left: 20px;
        top: 3px;
    }
}

@media(max-width: 767px) {
    footer .nav {
        height: max-content;
        flex-direction: column;
        padding-left: inherit;
        margin-top: 32px;
        margin-bottom: 32px;
    }

    .sportsengine {
        background: #23282b;
        padding: 11px 10px !important;
    }

    .main-header .container {
        padding-left: 8px;
        padding-right: 8px;
    }

    .main-header .container>div.py-3 {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .main-header .container .nav+.ctas {
        gap: 6px !important;
    }

    .main-header .container .nav+.ctas .btn {
        padding: 6px 10px !important;
        gap: 12px !important;
        font-size: 12px !important;
    }

    .main-header .custom-logo {
        width: 49px;
        height: 53px;
    }

    .main-header .container .nav+.ctas .btn svg {
        width: 16px;
        height: 16px;
    }

    .common_banner {
        padding-right: 5px;
        padding-left: 5px;
    }

    .hero-block.gap-top-56 {
        padding-top: 21px !important;
    }

    .hero-block h1.gap-bottom-24 {
        padding-bottom: 21px;
    }

    .hero-block h1.gap-bottom-24 br {
        display: none;
    }

    .banner_content .btn {
        padding: 9px 17px 9px 13px !important;
        font-size: 16px;
        gap: 22px !important;
    }

    .fluentform .ff-el-group.ff-el-form-top .ff-el-input--label {
        font-size: 17px;
    }

    .fluentform .ff-el-group {
        margin-bottom: 10px;
    }

    .ff-default .ff-el-form-control {
        padding: 9px 8px;
        font-size: 14px;
    }

    .ff_submit_btn_wrapper button[type="submit"] {
        width: 100%;
    }

    .ff_submit_btn_wrapper button[type="submit"]::after {
        left: 52%;
    }


}

@media(max-width: 575px) {
    .common_banner .row {
        margin-right: -5px;
        margin-left: -5px;
    }

    .banner_img {
        position: relative;
        margin-top: 34px;
    }

    body section {
        scroll-margin-top: 190px
    }


}

/* Common Banner Section CSS End */

/* 404 Page Start */

.wrapper_404{
    margin: 24px 0;
    position: relative;
}

.content_404{
    position: absolute;
    bottom: 24px;
    width: 100%;
    left: 0;
    right: 0;
    text-align: center;
}

.content_404 p{
    color: #FFF;
    font-size: clamp(18px, 1vw + 0.5rem, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 16px;
}

@media(max-width: 900px) {
    .content_404{
        position: relative;
        bottom: auto;
        padding: 24px 0;
    }

    .wrapper_404{
        margin: 0;
        padding: 24px;
        background: #254C3C;
    }

    .container_404{
        padding: 0;
    }
}