/* ==========================================================
   SOL'S PLAY HOUSE
   DESKTOP / LAPTOP WINDOWS SCALING FIX
   ==========================================================
   
   Designed for:
   - 1920x1080 @ 100% = preserve original design
   - 1920x1080 @ 125% = lightly scale down
   - 1920x1080 @ 150% = scale down significantly
   - 1920x1080 @ 175% = scale down further
   
   IMPORTANT:
   Nothing <= 1024px is modified.
   ========================================================== */


/* ==========================================================
   GLOBAL DESKTOP SAFETY
   ========================================================== */

@media only screen and (min-width: 1025px) {

    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

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

    .elementor,
    .elementor-section,
    .elementor-container,
    .elementor-widget-wrap,
    .e-con,
    .e-con-inner {
        max-width: 100%;
    }

    .elementor img,
    .elementor-widget-image img {
        max-width: 100%;
        height: auto;
    }

    .e-con,
    .e-con-inner,
    .elementor-column,
    .elementor-widget,
    .elementor-widget-wrap,
    .elementor-widget-container {
        min-width: 0;
    }
}


/* ==========================================================
   100% SCALE / LARGE DESKTOP
   1600px+
   
   LEAVE ORIGINAL DESIGN ALONE
   ========================================================== */

@media only screen and (min-width: 1600px) {

    /*
    Intentionally empty.
    
    Your existing Elementor desktop styling remains
    completely in control at normal 1920x1080 / 100%.
    */

}


/* ==========================================================
   125% WINDOWS SCALE
   Approx. 1440px - 1599px effective viewport
   ========================================================== */

@media only screen and (min-width: 1440px) and (max-width: 1599px) {

    /* CONTAINERS */

    .e-con-boxed > .e-con-inner,
    .elementor-section.elementor-section-boxed > .elementor-container {
        width: 94% !important;
    }


    /* =========================
       HEADER LOGO
       ========================= */

    header .elementor-widget-theme-site-logo img,
    header .elementor-widget-image img {
        max-width: 150px !important;
        width: auto !important;
        height: auto !important;
    }


    /* =========================
       NAVIGATION
       ========================= */

    header .elementor-nav-menu--main .elementor-item {
        font-size: 14px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }


    /* =========================
       LET'S PLAY BUTTON
       ========================= */

    header .elementor-button {
        font-size: 13px !important;
        padding: 11px 20px !important;
        line-height: 1.2 !important;
    }


    /* =========================
       TYPOGRAPHY
       ========================= */

    h1.elementor-heading-title {
        font-size: clamp(42px, 3.5vw, 56px) !important;
    }

    h2.elementor-heading-title {
        font-size: clamp(32px, 2.8vw, 44px) !important;
    }

    h3.elementor-heading-title {
        font-size: clamp(22px, 2vw, 30px) !important;
    }

}


/* ==========================================================
   150% WINDOWS SCALE
   Approx. 1200px - 1439px
   
   MAIN FIX:
   Make site visually resemble normal 100% desktop.
   ========================================================== */

@media only screen and (min-width: 1200px) and (max-width: 1439px) {


    /* ======================================================
       MAIN CONTENT WIDTH
       ====================================================== */

    .e-con-boxed > .e-con-inner,
    .elementor-section.elementor-section-boxed > .elementor-container {

        width: 92% !important;
        max-width: 1180px !important;

    }


    /* ======================================================
       HEADER
       Reduce entire navigation bar visual size
       ====================================================== */

    header .e-con,
    header .e-con-inner,
    header .elementor-container {

        min-height: unset !important;

    }


    /* ======================================================
       LOGO
       Major fix for oversized logo at 150%
       ====================================================== */

    header .elementor-widget-theme-site-logo img,
    header .elementor-widget-image img {

        width: auto !important;
        max-width: 125px !important;
        max-height: 75px !important;

        object-fit: contain;

    }


    /* ======================================================
       NAVIGATION TEXT
       ====================================================== */

    header .elementor-nav-menu--main .elementor-item {

        font-size: 12px !important;

        padding-left: 6px !important;
        padding-right: 6px !important;

        padding-top: 10px !important;
        padding-bottom: 10px !important;

        line-height: 1.2 !important;

    }


    /* ======================================================
       LET'S PLAY BUTTON
       ====================================================== */

    header .elementor-button {

        font-size: 11px !important;

        padding:
            9px
            16px !important;

        min-height: unset !important;

        line-height: 1.2 !important;

    }


    header .elementor-button-text {

        font-size: inherit !important;

    }


    /* ======================================================
       H1 HEADINGS
       ====================================================== */

    h1.elementor-heading-title {

        font-size: clamp(
            34px,
            3.4vw,
            46px
        ) !important;

        line-height: 1.05 !important;

    }


    /* ======================================================
       H2 HEADINGS
       ====================================================== */

    h2.elementor-heading-title {

        font-size: clamp(
            27px,
            2.8vw,
            38px
        ) !important;

        line-height: 1.1 !important;

    }


    /* ======================================================
       H3 HEADINGS
       ====================================================== */

    h3.elementor-heading-title {

        font-size: clamp(
            20px,
            2vw,
            27px
        ) !important;

        line-height: 1.15 !important;

    }


    /* ======================================================
       H4 HEADINGS
       ====================================================== */

    h4.elementor-heading-title {

        font-size: clamp(
            17px,
            1.5vw,
            21px
        ) !important;

    }


    /* ======================================================
       BODY TEXT
       ====================================================== */

    .elementor-widget-text-editor,
    .elementor-widget-text-editor p {

        font-size: 14px !important;

        line-height: 1.5 !important;

    }


    /* ======================================================
       GENERAL BUTTONS
       ====================================================== */

    main .elementor-button,
    body:not(header) .elementor-button {

        font-size: 12px;

        padding:
            10px
            18px;

    }


    /* ======================================================
       ICONS
       ====================================================== */

    .elementor-icon {

        font-size: 0.85em;

    }


    /* ======================================================
       CONTAINER GAPS
       ====================================================== */

    .e-con {

        --gap: clamp(
            12px,
            1.5vw,
            20px
        );

    }


    /* ======================================================
       REDUCE LARGE SECTION PADDING
       ====================================================== */

    .e-con.e-flex {

        --padding-top: clamp(
            25px,
            3vw,
            45px
        );

        --padding-bottom: clamp(
            25px,
            3vw,
            45px
        );

    }


    /* ======================================================
       IMAGES
       Keep large images proportional
       ====================================================== */

    .elementor-widget-image img {

        max-width: 100% !important;

        height: auto !important;

        object-fit: contain;

    }

}


/* ==========================================================
   175% WINDOWS SCALE
   Approx. 1025px - 1199px
   
   Even more aggressive desktop scaling.
   ========================================================== */

@media only screen and (min-width: 1025px) and (max-width: 1199px) {


    /* ======================================================
       CONTAINERS
       ====================================================== */

    .e-con-boxed > .e-con-inner,
    .elementor-section.elementor-section-boxed > .elementor-container {

        width: 94% !important;

        max-width: none !important;

    }


    /* ======================================================
       LOGO
       ====================================================== */

    header .elementor-widget-theme-site-logo img,
    header .elementor-widget-image img {

        width: auto !important;

        max-width: 105px !important;

        max-height: 65px !important;

        object-fit: contain;

    }


    /* ======================================================
       NAVIGATION
       ====================================================== */

    header .elementor-nav-menu--main .elementor-item {

        font-size: 11px !important;

        padding-left: 4px !important;
        padding-right: 4px !important;

        padding-top: 8px !important;
        padding-bottom: 8px !important;

        line-height: 1.15 !important;

    }


    /* ======================================================
       LET'S PLAY
       ====================================================== */

    header .elementor-button {

        font-size: 10px !important;

        padding:
            8px
            13px !important;

        line-height: 1.15 !important;

        min-height: unset !important;

    }


    /* ======================================================
       H1
       ====================================================== */

    h1.elementor-heading-title {

        font-size: clamp(
            30px,
            3.5vw,
            40px
        ) !important;

        line-height: 1.05 !important;

    }


    /* ======================================================
       H2
       ====================================================== */

    h2.elementor-heading-title {

        font-size: clamp(
            24px,
            2.8vw,
            32px
        ) !important;

        line-height: 1.1 !important;

    }


    /* ======================================================
       H3
       ====================================================== */

    h3.elementor-heading-title {

        font-size: clamp(
            18px,
            2vw,
            24px
        ) !important;

        line-height: 1.15 !important;

    }


    /* ======================================================
       H4
       ====================================================== */

    h4.elementor-heading-title {

        font-size: 17px !important;

    }


    /* ======================================================
       BODY TEXT
       ====================================================== */

    .elementor-widget-text-editor,
    .elementor-widget-text-editor p {

        font-size: 13px !important;

        line-height: 1.5 !important;

    }


    /* ======================================================
       BUTTONS
       ====================================================== */

    main .elementor-button {

        font-size: 11px !important;

        padding:
            9px
            15px !important;

    }


    /* ======================================================
       CONTAINER GAPS
       ====================================================== */

    .e-con {

        --gap: 10px;

    }


    /* ======================================================
       IMAGES
       ====================================================== */

    .elementor-widget-image img {

        max-width: 100% !important;

        height: auto !important;

    }

}


/* ==========================================================
   HEADER FLEX PROTECTION
   Prevent navigation wrapping / overflowing
   ========================================================== */

@media only screen and (min-width: 1025px) and (max-width: 1599px) {

    header .e-con,
    header .e-con-inner,
    header .elementor-container,
    header .elementor-column,
    header .elementor-widget-wrap {

        min-width: 0;

    }


    header .elementor-nav-menu {

        display: flex;

        align-items: center;

        justify-content: flex-end;

        flex-wrap: nowrap;

    }


    header .elementor-nav-menu > li {

        min-width: 0;

    }

}


/* ==========================================================
   OVERFLOW PROTECTION
   ========================================================== */

@media only screen and (min-width: 1025px) and (max-width: 1599px) {

    .elementor-column,
    .elementor-widget-wrap,
    .elementor-widget-heading,
    .elementor-widget-text-editor,
    .elementor-widget-container {

        min-width: 0;
        max-width: 100%;

    }


    .elementor-widget-image svg {

        max-width: 100%;

    }

}


/* ==========================================================
   MOBILE / TABLET
   ==========================================================
   
   NO CSS BELOW 1025px.
   
   Existing Elementor mobile/tablet design remains unchanged.
   ========================================================== */