/**
 * Media Queries CSS File
 *
 * This file contains the media queries for the Codehills Kickstarter theme. It includes
 * breakpoints for different screen sizes, such as tablet portrait, tablet landscape,
 * laptop, desktop, and large desktop screens.
 *
 * @since 2.0.0
 * @package WordPress
 * @subpackage Codehills Kickstarter Theme
 */

/***************** Media queries ******************* *
 *  1. Small (tablet portrait) > 640px
 *  2. Medium (tablet landscape) > 960px
 *  3. Large (laptop) > 1200px
 *  4. XLarge (desktop) > 1400px
 *  5. XXLarge (desktop) > 1600px
*****************************************************/

/******** 1. Small (tablet portrait) > 640px ********/

@media only screen and (min-width: 640px) {
    /**** Header / Footer ****/
    header {
        height: 90px;
        border-bottom: 1px solid var(--kickstarter-border);
    }
    header.uk-active {
        padding: 4px 0 8px;
        height: 66px;
    }
    header .uk-logo-wrapper,
    header .country-selector,
    header .search-galenika,
    header .uk-navbar-toggle {
        padding-bottom: 7px;
    }
    header:not(.uk-active) .uk-logo-wrapper,
    header:not(.uk-active) .country-selector,
    header:not(.uk-active) .search-galenika,
    header:not(.uk-active) .uk-navbar-toggle {
        padding-bottom: 15px;
    }
    footer .uk-nav-horizontal {
        gap: 24px;
    }

    /**** Typo ****/
    h1, .uk-h1 {
        font-size: 70px;
    }
    h2, .uk-h2 {
        font-size: 50px;
    }
    h3, .uk-h3 {
        font-size: 24px;
    }
    blockquote {
        font-size: 24px;
        padding-left: 105px;
    }
    blockquote::before {
        top: -10px;
        font-size: 70px;
    }

    /**** UI ****/
    .rank-math-breadcrumb {
        font-size: 14px;
    }
    .page .rank-math-breadcrumb,
    .single-job .rank-math-breadcrumb {
        padding: 30px 0;
    }
    .page-prijava-na-oglas .rank-math-breadcrumb {
        padding: 0;
    }
    .uk-panel {
        padding: 35px 40px;
    }

    /**** Pages ****/
    article#main {
        padding: 0 0 80px;
    }
    .pagetitle-block {
        font-size: 24px;
    }
    .pagetitle-block > .uk-container {
        min-height: 670px;
        padding-bottom: 60px;
    }
    .product-box-content {
        padding: 40px;
    }
    .product-box-content h3,
    .post-box-content h3,
    .post-box-content h3 a {
        font-size: 24px;
    }
    .product-categories a,
    .post-box-content time,
    .article-date {
        font-size: 14px;
    }
    .single-product h1,
    .single-product .uk-h1 {
        font-size: 50px;
    }
    .single article#main {
        padding-top: 30px;
    }
    .single article#main h1 {
        margin-top: 40px;
    }

    /**** Blocks ****/
    #eighty-years-message {
        font-size: 60px;
        bottom: 210px;
        right: 12vw;
    }
    .progress-carousel-block {
        padding: 70px 0 50px;
    }
    .progress-carousel-block-cards,
    .progress-carousel-block-panels {
        padding: 90px 0 130px;
    }
    .progress-carousel-content,
    .slide-label {
        font-size: 24px;
    }
    .progress-carousel-block .splide {
        padding-left: 0;
        padding-right: 0;
    }
    .splide__arrow {
        top: -105px;
    }
    .splide__arrow--prev {
        right: 84px;
    }
    .splide__arrow--next {
        right: 42px;
    }
    .content-media-grid-block .content-media-grid-carousel-mobile .splide__pagination {
        bottom: -30px;
    }
    .featured-member .team-member-content h3 {
        font-size: 50px;
    }
    .featured-member .team-member-content h4 {
        font-size: 24px;
        margin-bottom: 50px;
    }
    .team-member-content h3 {
        font-size: 24px;
    }
    .team-member-content h4 {
        font-size: 14px;
    }
    .cta-content {
        font-size: 24px;
        font-weight: 500;
    }
}

/******* 2. Medium (tablet landscape) > 960px *******/

@media only screen and (min-width: 960px) {
    /**** Blocks ****/
    .content-block-left {
        margin-right: 70px;
    }
    .content-block-right {
        margin-left: 70px;
    }
}

/************ 3. Large (laptop) > 1200px ************/

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

/*********** 4. XLarge (desktop) > 1400px ***********/

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

/*********** 5. XXLarge (desktop) > 1600px ***********/

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