/* deklarace proměnných barev, fontů, velikosti a tučnosti */

:root {
    /* Colors */
    --clr-primary-100: #FE8907;
    --clr-primary-200: #5BB01E;
    --clr-neutral-100: #191919;
    --clr-neutral-200: #fff;
    --clr-accent-100: #f8f8f8;
    --clr-accent-200: #4e4e4e50;
    --clr-accent-300: #4e4e4eaa;
    --clr-accent-400: #e96d00;
    --clr-accent-500: #409807;
    --clr-accent-600: #616161;
    --clr-accent-700: #d6d6d6;
    /*Fonts*/
    --ff-primary: "Open Sans",sans-serif;
    --ff-secondary: "Source Sans Pro",sans-serif;
    /* Font weight */
    --fw-light: 200;
    --fw-regular: 300;
    --fw-semi-bold: 500;
    --fw-bold: 600;
    /* Font sizes */
    --fs-200: 0.9375rem;
    --fs-300: 1rem;
    --fs-400: 1.125rem;
    --fs-450: 1.25rem;
    --fs-500: 1.375rem;
    --fs-600: 1.5rem;
    --fs-650: 1.75rem;
    --fs-700: 2rem;
    --fs-750: 2.25rem;
    --fs-800: 3rem;
    --fs-850: 3.5rem;
    --fs-900: 4rem;
    --fs-body: var(--fs-500);
    --fs-primary-heading: var(--fs-900);
    --fs-secondary-heading: var(--fs-650);
    --fs-nav: var(--fs-300);
    --fs-button-s: var(--fs-400);
    --fs-button-b: var(--fs-450);
    /* padding/size */
    --size-100: .25rem;
    --size-200: .5rem;
    --size-300: .75rem;
    --size-400: 1rem;
    --size-500: 1.5rem;
    --size-600: 2rem;
    --size-700: 3rem;
    --size-800: 4rem;
    --size-900: 5rem;
    --size-1000: 6rem;
}

@media(max-width:66em) {
    :root {
        --fs-primary-heading: var(--fs-850);
        --fs-secondary-heading: var(--fs-650);
        --size-1000: 5rem;
    }
}

@media(max-width:50em) {
    :root {
        --fs-primary-heading: var(--fs-800);
        --fs-secondary-heading: var(--fs-600);
        --size-900: 3rem;
        --fs-body: min(var(--fs-450),4.5vh); /*otočený telefon layout*/
        --fs-button-b: var(--fs-300);
    }
}

@media(max-width:33em) {
    :root {
        --fs-body: var(--fs-400);
        --fs-primary-heading: var(--fs-800);
    }
}

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

/* Remove default margin */
* {
    margin: 0;
    padding: 0;
    font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
    list-style: none;
    list-style: none;
}
/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

html,
body {
    height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 15rem;
}
/* Set core body defaults */
body {
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}
/* Make images easier to work with */
img,
picture,
svg {
    max-width: 100%;
    display: block;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* utility classes */
.text-neutral-100 {
    color: var(--clr-neutral-100);
}

.text-neutral-200 {
    color: var(--clr-neutral-200);
}

.text-primary-100 {
    color: var(--clr-primary-100);
}

.text-primary-200 {
    color: var(--clr-primary-200);
}

.bg-neutral-100 {
    background-color: var(--clr-neutral-100);
}

.bg-neutral-200 {
    background-color: var(--clr-neutral-200);
}

.bg-primary-100 {
    background-color: var(--clr-primary-100);
}

.bg-primary-200 {
    background-color: var(--clr-primary-200);
}

.bg-accent-100 {
    background-color: var(--clr-accent-100);
}

.bg-accent-600 {
    background-color: var(--clr-accent-600);
}

.padding-block-100 {
    padding-block: var(--size-100);
}

.padding-block-200 {
    padding-block: var(--size-200);
}

.padding-block-300 {
    padding-block: var(--size-300);
}

.padding-block-400 {
    padding-block: var(--size-400);
}

.padding-block-500 {
    padding-block: var(--size-500);
}

.padding-block-600 {
    padding-block: var(--size-600);
}

.padding-block-700 {
    padding-block: var(--size-700);
}

.padding-block-800 {
    padding-block: var(--size-800);
}

.padding-block-900 {
    padding-block: var(--size-900);
}

.padding-block-1000 {
    padding-block: var(--size-1000);
}

.fw-light {
    font-weight: var(--fw-light);
}

.fw-regular {
    font-weight: 300;
}

.fw-semi-bold {
    font-weight: var(--fw-semi-bold);
}

.fw-bold {
    font-weight: var(--fw-bold);
}

.fs-primary-heading {
    font-size: var(--fs-primary-heading);
    font-family: var(--ff-primary);
    line-height: 1.15;
}

.fs-secondary-heading {
    font-size: var(--fs-secondary-heading);
    font-family: var(--ff-primary);
}

.fs-small {
    font-size: var(--fs-200);
}

.inline {
    display: inline;
}

.italic {
    font-style: italic;
}

.text-center {
    text-align: center;
}

/* Button hell */
.button-1 {
    padding: var(--size-200) var(--size-600);
    font-size: var(--fs-button-b);
    font-family: var(--ff-primary);
    font-weight: var(--fw-semi-bold);
    border-radius: 5px;
    border: none;
    background-color: var(--clr-primary-100);
    color: var(--clr-accent-100);
    transition: 0.4s;
    box-shadow: 0px 3px 4px var(--clr-accent-200);
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}

    .button-1:hover,
    .button-1:focus-visible {
        background-color: var(--clr-accent-400);
        box-shadow: 0px 2px 4px var(--clr-accent-300);
    }

.button-1-green {
    background-color: var(--clr-primary-200);
}

    .button-1-green:hover,
    .button-1-green:focus-visible {
        background-color: var(--clr-accent-500);
    }

.button-1-black {
    background-color: var(--clr-neutral-100);
}

    .button-1-black:hover,
    .button-1-black:focus-visible {
        background-color: rgb(28, 28, 28);
    }

.button-1-transparent {
    background-color: var(--clr-accent-100);
    color: var(--clr-neutral-100);
    outline: 3px solid var(--clr-neutral-100);
    outline-offset: -3px;
}

    .button-1-transparent:hover,
    .button-1-transparent:focus-visible {
        background-color: var(--clr-neutral-100);
        color: var(--clr-accent-100);
        font-weight: var(--fw-semi-bold);
    }


/***&general***/
body {
    color: var(--clr-neutral-100);
    font-size: var(--fs-body);
    font-family: var(--ff-secondary);
}

.arrow::after {
    font-family: "Font Awesome 5 Free";
    content: "\f078";
    padding-left: 0.5rem;
    font: var(--fa-font-solid);
    font-size: 14px;
}

.container {
    --max-width: 1200px;
    --padding: 1.5rem;
    width: min(var(--max-width), 100% - var(--padding));
    margin-inline: auto;
}

hr {
    height: 3px;
    background-color: #000;
}
/*změna barvy icon telefonu v safari*/
a[href^=tel] {
    color: inherit;
    text-decoration: none;
}

/*js*/
.lockScroll {
    overflow: hidden
}

.footer-dropdown {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.footer-dropdown__ul {
    display: none; /*mění se zapomocí js*/
    margin-top: 0.5rem;
}

.footer-dropdown__icon {
    cursor: pointer;
    font-size: var(--fs-300);
    color: var(--clr-primary-100);
}

.footer-dropdown__text {
    font-size: var(--fs-300);
    cursor: pointer;
    font-weight: var(--fw-regular);
}


/***&layout***/
.wrapper-1-1 {
    display: flex;
    align-items: center;
    gap: var(--size-900);
    padding-inline: 3em;
    padding-bottom: calc(1.5rem + 3vw)
}

.social-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.icon-wrapper {
    display: flex;
    column-gap: 2rem;
    align-items: center;
}

.wrapper-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    place-items: center;
    grid-row-gap: 0.5rem;
    grid-column-gap: 3.7rem;
    margin-inline: 3rem;
}

/******************PAGE-STYLING*********************/
/*&layout*/

/***&utility***/
/***&general***/
/***&components***/
/******&styling******/
/****&header****/
.primary-header {
    background-color: var(--clr-nav);
    position: fixed;
    z-index: 100;
    width: 100vw;
    display: flex;
    align-items: center;
    min-height: 5rem;
    
    --clr-nav: #191919;
    --clr-nav-sub: #2b2b2b;
}

.just-logo {
    display: none;
}

.logo-top-nav {
    float: left;
}

.show, .btn, input[type="checkbox"] {
    display: none;
}

nav {
    font-family: var(--ff-primary);
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-nav);
}

    nav::after {
        content: "";
        clear: both;
        display: table;
    }

    nav ul {
        float: right;
        position: relative;
    }

        nav ul i {
            color: var(--clr-accent-100);
            font-size: var(--size-400);
        }

        nav ul li {
            float: left;
        }

            nav ul li a {
                color: var(--clr-accent-100);
                text-decoration: none;
                line-height: 70px;
                padding: 0 0.75rem;
                transition: 0.3s;
                position: relative;
                font-size: 17px;
            }

                nav ul li a::before {
                    content: "";
                    position: absolute;
                    top: 2.1rem;
                    left: 0;
                    width: 0%;
                    height: 3px;
                }

                nav ul li a:hover::before {
                    left: 0;
                    width: 100%;
                }

        nav ul ul {
            position: absolute;
            opacity: 0;
            visibility: hidden;
            top: 52px;
            padding-block: 1rem;
            background-color:var(--clr-nav-sub);
        }

        nav ul li:hover > ul {
            opacity: 1;
            visibility: visible;
            top: 70.5px;
            transition: 0.5s;
        }

        nav ul ul li {
            position: relative;
            padding: 0 0.5rem;
            float: none;
            display: list-item;
            transition: 0.2s;
            background-color:var(--clr-nav-sub)
        }

        nav ul ul ul {
            padding-block: 0;
            background-color: transparent;
        }

        nav ul ul li a {
            line-height: 50px
        }

        /*nav ul ul li:hover,
        nav ul ul ul li:hover {
            background-color: #4e4e4e;
            border: none;
        }
*/
        nav ul ul li a:hover::before {
            content: none;
        }

        nav ul ul ul li {
            position: relative;
            top: -71px; /*must try*/
            left: 217px; /*must try */
            color: red;
            margin: 0;
            min-width: 100%;
            width: max-content;
        }

/***&slider***/
.slider {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 98vh;
    width: 100%;
    position: relative;  
}

.slider--content {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1.5rem 1rem;
    max-width: 650px;
    border-radius: 0.3rem;
    color: var(--clr-accent-100);
}

.slider--controls {
    position: absolute;
    display: flex;
    width: 100%;
    top: 50%;
    justify-content: space-between;
    transform: translate(0%,-50%);
}

.slider--heading {
    font-size: var(--fs-primary-heading);
    font-weight:var(--fw-bold);
    line-height:1.25;
}

.slider--text {
    font-size: var(--fs-600);
    color: var(--clr-accent-100);
    margin: 0rem 0 0.2rem 0;
    font-family: var(--ff-secondary);
    line-height:1.4;
}
.slider__btn {
    background: #fff;
    text-transform: uppercase;
    border: none;
    color: #444;
    border: 1px solid #444;
    outline: none;
    font-weight: 700;
    padding: 0.8rem 2rem;
    cursor: pointer;
}

.slider__btn-right,
.slider__btn-left {
    background: transparent;
    border: none;
    outline: none;
    font-size: 4rem;
    color: #eee;
    padding: 0 1rem;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
    margin-top: 5rem;
}

    .slider__btn-left:hover,
    .slider__btn-right:hover {
        transform: scale(0.95);
    }

/*pause/play icona*/
.slider__btn-toggle {
    position: absolute;
    top: 92%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #ffffffaa;
    font-size: var(--fs-600);
    cursor: pointer;
    background-color: #00000099;
    width: 50px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    transition: 0.3s;
    border: solid 0px;
}

/***&footer***/
.contact--footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    justify-items: center
}

    .contact--footer .contact__text {
        font-size: var(--fs-400);
        font-weight: var(--fw-regular);
    }

    .contact--footer .contact__icon {
        font-size: var(--fs-500);
    }

    .contact--footer .contact__subheading {
        font-size: var(--fs-400);
    }

footer hr {
    margin-block: var(--size-600);
    background-color: var(--clr-accent-100);
}

.social-wrapper__text--footer,.icon-wrapper__text{
    font-weight:300;
}
/******************************* MEDIA QUERIES ********************************** **/
@media(max-width:71em) {
    /***&layout***/
    /***&utility***/
    /***&general***/
    /***&components***/
    /******&styling******/
    /****&header****/
    /***&slider***/
    /***&footer***/
}

@media(max-width:66em) {
    /***&layout***/
    .wrapper-1-1 {
        display: flex;
        flex-direction: column;
        gap: var(--size-500);
        padding-inline: var(--size-500);
    }
    /***&utility***/

    /***&general***/

    /***&components***/

    /****&header****/
    .logo-top-nav {
        display: none;
    }
    .just-logo {
        float: left;
        display: block;
    }

    /***&slider***/

    /***&footer***/

    @media (max-width: 50em) {
        /***GENERAL***/
        html {
            scroll-padding-top: 90px;
        }

        /***&layout***/
        .social-wrapper {
            flex-direction: column;
            row-gap: 12px;
        }

        /***&utility****/
        .padding-block-1000 {
            padding-block: var(--size-700)
        }

        /***&general***/
        .arrow::after {
            display: none;
        }
        .down-arrow {
            position: absolute;
            right: 0%;
            top: 4px;
            padding: 20px;
            font-size: var(--fs-600);
            color: var(--clr-primary-100);
        }
        .down-arrow-smaller {
            padding: 11px 20px;
        }

        /***&components***/

        /***&header***/
        .logo-top-nav {
            display: block;
            padding-block: 0.3rem;
        }

        .just-logo {
            display: none;
        }
        nav ul {
            margin-right: 0px;
            padding-block: 1.5rem;
            height: 100vh;
            width: 100%;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 6rem;
        }

            nav ul li {
                border-bottom: 1px solid rgba(255, 255, 255, 0.121);
                position: relative;
            }

            nav ul li a {
                font-size: var(--fs-500);
            }

            nav ul ul li {
                background-color: var(--clr-nav)
            }
            
            /*přepisuje padding stanovený bez media-queries*/
            nav ul ul li a {
                padding-inline: 1rem;
                font-size: var(--fs-300);
            }

            nav ul li,
            nav ul ul li,
            nav ul ul ul li {
                display: block;
                width: 100%;
                line-height: 50px;
                padding-left: 1rem;
            }

            nav ul ul li {
                border-bottom: none;
                border-top: 1px solid rgba(255, 255, 255, 0.105);
            }

            nav ul ul {
                top: 80px;
                position: static;
                float: none;
                display: none;
                opacity: 1;
                visibility: visible;
                background-color: #000;
                height: auto;
                padding-block: 0rem;
                -webkit-overflow-scrolling: auto;
                overflow-x: hidden;
                overflow-y: hidden;
            }

                nav ul li a:hover::before,
                nav ul li a:hover,
                nav ul ul ul li a:hover,
                .show:hover,
                .show:active {
                    content: none;
                    text-decoration: underline;
                }

                nav ul ul ul li {
                    position: static;
                    left: 0;
                    color: white;
                    cursor: pointer;
                }

        .vr {
            background-color: rgba(255, 255, 255, 0.121);
            height: 2px;
            width: 55px;
            transform: rotate(90deg);
            position: absolute;
            right: 2.4rem;
            top: 2.2rem;
        }

        .vr-smaller {
            width: 40px;
            top: 1.6rem;
            right: 2.9rem;
            height: 2px;
        }

        .show {
            display: block;
            color: var(--clr-accent-100);
            cursor: pointer;
        }

            .show + a, nav ul {
                display: none;
            }

        .btn {
            display: block;
            color: white;
            position: absolute;
            right: 1rem;
            top: 0.8rem;
            font-size: var(--fs-750);
            cursor: pointer;
            height: 37px;
        }

        [id^=btn]:checked + nav > ul {
            display: block;
        }

        [id^=btn-1]:checked + ul {
            display: block;
        }

        [id^=btn-4]:checked + ul {
            display: block;
        }

        [id^=btn-2]:checked + ul {
            display: block;
        }

        [id^=btn-3]:checked + ul {
            display: block;
        }

        /***&slider***/
        .slider{
            height:90vh
        }
        .slider--text {
            font-size: var(--fs-500);
        }
        .slider--content{
            min-width:65vw;
            padding:1.5rem 1rem;
        }
        .slider__btn-toggle{
            top:90%
        }

        /***&footer***/
        .contact--footer {
            grid-template-columns: 1fr;
        }
    }

    @media(max-width:33em) {
        /***&layout***/
        .wrapper-1-1 {
            gap: var(--size-300);
            padding-inline: var(--size-400);
            padding-bottom: calc(1.5rem + 4vw)
        }

        .wrapper-cards {
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            padding-top: var(--size-200);
            margin-inline: 1rem;
        }

        .social-wrapper {
            flex-direction: column;
            row-gap: var(--size-200);
            font-size: 1.25rem;
            padding-inline: 0.5rem;
        }

        .icon-wrapper {
            column-gap: 1.5rem;
        }

        /***&utility***/

        /***&general***/

        /***&components***/

        /******&styling******/
        /****&header****/
        .logo-top-nav img {
            max-width: 90%;
            height: auto;
            padding-block: 0.3rem;
        }

        nav ul li a {
            font-size: var(--fs-400);
        }

        /***&slider***/
        .slider__btn-toggle {
            width: 40px;
            font-size: 18px;
            color: #ffffffee;
            background-color: #00000099;
        }

        .slider__btn-right,
        .slider__btn-left {
            font-size: var(--fs-750);
        }        

        .slider--text {
            font-size: var(--fs-400);
        }

        /***&footer***/
        .social-wrapper {
            padding-inline: 1.5rem;
        }
        .copyright {
            order: 2;
        }
        .social-wrapper__text--footer{
            margin-bottom:8px;

        }
        .icon-wrapper, .social-wrapper__text--footer, .icon-wrapper__text {
            font-size: clamp(16px,5vw,18px);
        }
    }
}