html {
    scroll-behavior: smooth;
}

.sig-gradient {
    background: -webkit-linear-gradient(45deg, #338CF5, #4FD1C5);
    background: linear-gradient(45deg, #338CF5, #4FD1C5);
    /* optional for completeness */
    background-clip: text;
    /* <- standard property */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-container {
    margin: auto;
    padding-top: 1rem;
    padding-bottom: 5rem;
}

.hero-text {
    font-size: 3.5rem;
}


/* Center text on smaller screens only */
@media (max-width: 767px) {

    /* .hero-text,
    .subheading {
        text-align: center;
    } */
    .hero-button {
        margin-bottom: 3rem;
    }
}

@media (min-width: 767px) {

    #iphone-screenshot {
        width: 85%;
        display: block;
        margin: 0 auto;
    }
}

@media (max-width: 1100px) and (min-width: 576px) {
    .ipad {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


#news-section {
    padding-top: 3rem;
    padding-bottom: 2rem;
    color: black;
}

.stat-clean-light-mode {
    color: black;
    text-decoration-line: none;
    border-style: solid;
    border-width: 2px;
    border-radius: 1rem;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 8px;
    padding-right: 8px;
}

.stat-clean-dark-mode {
    color: white;
    text-decoration-line: none;
    border-style: solid;
    border-width: 2px;
    border-radius: 1rem;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 8px;
    padding-right: 8px;
}

.timeframe-hitrate {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
}

.timeframe-fraction {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    text-align: center;
}

.timeframe-title {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}

.timeframe-avg {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    text-align: center;
}

.timeframe-article {
    border-style: solid;
    border-width: 1px;
    border-color: #363a3f;
    margin-bottom: 0px;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.timeframe-div {
    display: flex;
    align-items: baseline;
    column-gap: 1rem;
}

#loading-app-container {
    height: 67vh;
    display: flex;
    align-items: center;
}

.threshold-range-article {
    border-style: solid;
    border-width: 1px;
    border-color: #363a3f;
}

.filters-article {
    border-style: solid;
    border-width: 1px;
    border-color: #363a3f;
    flex: 1;
    margin-bottom: 0px;
    padding-bottom: 1rem;
}

.filter-button {
    flex: 1;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    min-width: 5rem;
}

div.o--HorizontalToggle--horizontalToggle li {
    list-style: none !important;
}

div.o--App--widgetBody li {
    list-style: none !important;
}


/* BLOG POST STYLES */
.side-by-side-blog-post {
    display: flex;
    gap: 2rem;
    align-items: stretch;
    /* Forces both children to match height */
}

.side-by-side-text-content {
    flex: 3;
}

.side-by-side-image-content {
    flex: 2;
    display: flex;
    justify-content: center;
    /* center horizontally */
    align-items: center;
    /* center vertically */
}

.side-by-side-image-content img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .side-by-side-blog-post {
        flex-direction: column;
    }

    .side-by-side-image-content {
        align-items: flex-start;
    }

    .side-by-side-image-content img {
        width: 100%;
        height: auto;
    }
}

iframe {
    color-scheme: none;
}

iframe[title="Sign in with Google Button"] {
    /* background-color: white; */
    border-radius: 6px !important;
}

#profile-dropdown::after {
    content: none !important;
}

#sports-dropdown::after {
    content: none !important;
}

#pricing-section {
    scroll-margin-top: -65px;
    /* Adjust as needed */
}

.hitrate-odds-article {
    border-style: solid;
    border-width: 1px;
    border-color: #363a3f;
}

.hitrate-odds-label {
    margin-bottom: 0px;
}

.svg-as-font {
    height: 1.3rem;
}

.dropdown-as-button::after {
    content: none !important;
}

.image-glow {
    filter: drop-shadow(0 0 50px rgba(58, 79, 151, 0.7));
    /* Blue glow */
    border-radius: 50px;
    /* Keeps rounded corners if still needed */
}

.flag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.flag-row-1,
.flag-row-2 {
    display: contents;
    /* flatten container to treat all <p> as siblings */
}

.flag-row p {
    font-size: 2.5rem;
    margin: 0;
    flex: 0 0 auto;
}

/* Responsive: exactly 5 flags per row below 768px */
@media (max-width: 767px) {
    .flag-row p {
        flex: 0 0 calc(20% - 0.8rem);
        /* Adjust for gap (1rem * 4 gaps / 5 items = ~0.8rem) */
        text-align: center;
    }
}

.search-result-article {
    border-style: solid;
    border-width: 1px;
    border-color: #363a3f;
    cursor: pointer;
}

.search-result-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-result-left {
    display: flex;
    column-gap: 0.5rem;
    align-items: center;
    justify-content: left;
}

.search-result-right {
    display: flex;
    column-gap: 0.5rem;
    align-items: center;
    justify-content: right;
}

.search-result-player-number {
    color: gray;
}

.no-mb {
    margin-bottom: 0px;
}

.search-result-team-colours {
    margin-bottom: 0px;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
}

#playerStatChart {
    height: 25vh;
    width: 100%;
    padding: 0;
}

@media (min-width: 1024px) {
    #playerStatChart {
        height: 40vh;
    }
}

.app-header {
    padding-top: 0rem;
    padding-bottom: 0px;
    max-width: 56rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #0e0e0e;
}

#dashboard-nav {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#dashboard-nav-div {
    display: flex;
    align-items: center;
    column-gap: 1rem;
    width: 100%;
}

.nav-link {
    all: unset;
    cursor: pointer;
}

.site-logo {
    width: 1.8rem;
    height: 1.8rem;
}

.landing-header {
    padding-top: 0rem;
    max-width: 56rem;
}

.logo-and-name-div {
    display: flex;
    align-items: center;
    column-gap: 0.1rem;
}

.site-name {
    margin-bottom: 0px;
}

.footer-logo-and-name-div {
    display: flex;
    align-items: center;
    column-gap: 0.1rem;
    padding-bottom: 2rem;
    vertical-align: top;
    align-items: start;
}

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