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

:root {
  --color-primary: #f7b956;
  --color-primary-dark: #DEA54B;
  --color-secondary: #4d592b;
  --color-secondary-dark: #414536;
  --color-secondary-light: #adb29e;
  --color-secondary-bright: #e2e4d9;
  --color-section-bg: #f5f5f1;
  --color-text: #172126;
  --color-footer-bg: #172126;
  --radius: 25px;
}

body{
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

/* Style the navigation menu */
.topnav {
    overflow: hidden;
    background-color: var(--color-text);
    position: relative;
  }
  
  /* Hide the links inside the navigation menu (except for logo/home) */
  .topnav #myLinks {
    display: none;
  }
  
  /* Style navigation menu links */
  .topnav a{
    color: var(--color-secondary-bright);
    padding: 10px 15px;
    text-decoration: none;
    font-size: 30px;
    display: block;
  }
  
  /* Style the hamburger menu */
  .topnav a.icon {
    background: var(--color-text);
    display: block;
    position: absolute;
    right: 0;
    top: 8px;
  }



.main{
    min-height: 100vh;
    margin-bottom: -100px;
}
.push{
    height: 100px;
}

.container, header{
    display: block;
    max-width: 540px;
    margin: auto;
    padding: 20px;
}
section{
    padding-block: 50px;
}

h1, h2{
    font-optical-sizing: auto;
    font-style: normal;
}

h1{
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 1;
}

h2{
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
}

h3{
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}
h4{
    display: block;
    text-decoration: none;
    margin: 0;
    font-weight: 700;
    font-size: 40px;
    color: var(--color-secondary-bright);
}
.tlacitko{
    display: inline-block;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    color: white;
    background-color: var(--color-primary);
    border-radius: 100vw;
    margin-bottom: 20px;
}
.tlacitko:hover{
    background-color: var(--color-primary-dark);
}

/* -----hlavicka----- */

.header{
    background-color: var(--color-text);
    padding: 0;
}

/* -----baner----- */
.hero{
    background-color: var(--color-primary);
    margin: 0;
    max-width: 100%;
    background-image: url(images/baner.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    /* padding-block: 100px; */
}
.hero h1{
    /* margin: 0; */
    margin: 30px 0 30px 0;
    color: var(--color-section-bg)
}
.hero p{
    margin-block: 30px;
}

/* -----o barefootech----- */
.barefoot{
    text-align: center;
}
.barefoot .container{
    padding-block: 0;
}
.barefoot h2{
    margin-top: 0;
    margin-bottom: 40px;
}
.karta{
    display: block;
    border: 1px var(--color-secondary-bright) solid;
    text-align: center;
    padding: 30px 20px;
    margin-bottom: 30px;
    border-radius: var(--radius);
}
.karta h3{
    color: var(--color-secondary);
    margin: 20px 0 0 0;
}
.karta p{
    margin-block: 20px;
}
.karta a{
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
.karta a:hover{
    text-decoration: underline;
}
.karta:nth-child(4){
    margin-bottom: 0;
}

/* -----baner 2----- */
.baner2{
    background-color: var(--color-section-bg);
    margin: 0;
}
.baner2 .container{
    display: flex;
    gap: 60px;
    flex-direction: column;
    padding-block: 0;
}
.baner2_obrazek, .baner2_popis{
    flex-basis: 50%;
}
.baner2_obrazek img{
    display: block;
    width: 100%;
    border-radius: var(--radius);
    margin-block: 0;
}
.baner2_popis ul{
    list-style: none;
    padding-left: 0;
}
.baner2_popis ul li{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-block: 10px;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-secondary-dark)
}
.baner2_popis h2{
    margin: 0 0 40px 0;
}
.baner2_popis p{
    margin: 40px 0;
}
/* .baner2 img{
    border-radius: 25px;
} */

/* -----paticka----- */
footer{
    height: 100px;
    background-color: var(--color-footer-bg);
    color: var(--color-secondary-light);
    padding: 0;
}
footer a{
    color: var(--color-secondary-bright);
}
footer .container{
    padding-bottom: 0;
}

footer h3{
    margin-top: 0;
    margin-bottom: 10px;
}

/* -----stránka O nás a Kontakt----- */
.oNas h1, .kontakt h1, .partneri h1{
    margin: 0;
    text-align: center;
}
.oNas, .kontakt, .partneri{
    padding: 20px;
}
.oNas, .kontakt, .produkty, .partneri{
    display: flex;
    flex-direction: column;
}

/* ----- stránka Kontakt ----- */
.kontakt li, .partneri li{
    list-style: none;
}
.kontakt ul, .partneri ul{
    padding: 0;
    margin-top: 0;
}
.kontakt a, .partneri a{
    color: var(--color-text)
}
.kontakt h3, .partneri h3{
    margin-bottom: 6px;
}
.kontakt .container, .partneri .container{
    text-align: center;
}
.kontakt p, .partneri p{
    border-bottom: 1px solid var(--color-secondary-bright);
    padding-bottom: 20px;
}

/* ----- stránka Barefoot ----- */
.barefoot_barefoot{
    padding-bottom: 0;
}
.barefoot_text .container{
    padding-block: 0;
}
.barefoot_text{
    padding-top: 0;
}
.barefoot_text .container p{
    display: block;
    border: 1px var(--color-secondary-bright) solid;
    text-align: center;
    padding: 30px 20px;
    margin-block: 0;
    border-radius: var(--radius);
}
.barefoot_doporuceni h2{
    margin-top: 0;
    margin-bottom: 20px;
}
.barefoot_doporuceni{
    background-color: var(--color-section-bg);
}
.barefoot_doporuceni li{
    margin-bottom: 10px;
    /* list-style: none; */
}
/* .barefoot_doporuceni li::before{
    content: "👟";
    display: inline-block;
    margin: 5px;
    content: "🌿";
} */

/* ----- stránka Produkty ----- */
.gallery {
    display: flex;
    flex-wrap: wrap;         /* umožní zalamování do řádků */
    justify-content: center; /* zarovnání doprostřed */
    gap: var(--gap);         /* mezery mezi položkami */
    padding: 0;
  }

  /* Jedna dlaždice s fotkou */
.tile {
    flex: 1 1 240px;         /* základní šířka ~240px, roste/klesá podle místa */
    max-width: 360px;        /* aby se dlaždice neurvala příliš velká */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
    overflow: hidden;
    aspect-ratio: 4 / 3;     /* hezký poměr stran; můžeš klidně smazat */
}

.tile img{
    width: 100%;
    height: 100%;
    object-fit: cover;       /* vyplní dlaždici bez deformace */
    display: block;
}

.produkty h2{
    text-align: center;
}

.produkty ul{
    list-style: none;
    text-align: center;
    padding: 0;
}

.produkty li a{
    color: var(--color-text);
}
/* ----- stránka Partneři ----- */
.partneri_list li::before{
    content: "👟";
    display: inline-block;
    margin: 5px;
}



/* ----- tady styluju pro tablet ----- */
@media(min-width: 900px){
    .topnav a.icon {
        display: none;
    }
    .topnav {
        display: flex;
        max-width: 1100px;
        margin: auto;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        overflow: visible;
        border-radius: 50%;
    }

    .topnav #myLinks {
        display: flex !important;
        flex-direction: row;
        gap: 10px;
    }

    .topnav #myLinks a{
        color: var(--color-secondary-bright);
        padding: 10px 20px;
        border-radius: 50px;
        font-size: 1.25rem;
        text-decoration: none;
    }

    .topnav #myLinks a:hover{
        color: var(--color-text);
        background-color: var(--color-secondary-bright);
    }

    h1{
        font-size: 4rem;
    }
    h2{
        font-size: 3rem;
    }
    .container, header{
        max-width: 1100px;
    }
    section, footer{
        padding-block: 40px;
    }
    .tlacitko{
        padding: 20px 40px;
        font-size: 1.125rem;
    }
    .menu a{
        padding: 10px 20px;
        font-size: 1.25rem;
    }
    header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-inline: 20px;
    }
    .header{
        border-radius: 0 0 25px 25px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
    .hero{
        margin-top: 45px;
        /* padding-block: 120px; */
        padding-top: 100px;
        padding-bottom: 300px;
    }

    .barefoot .container{
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }
    .barefoot h2{
        margin-inline: auto;
    }
    .karta{
        width: calc((100% - 30px) / 2);
        margin: 0;
    }

    .baner2 .container{
        flex-direction: row;
    }
    .baner2_obrazek{
        display: block;
        margin-block: auto;
    }

    footer{
        padding: 0;
    }

    .oNas h1, .kontakt h1, .partneri h1{
        /* flex-basis: calc(100% / 3); */
        margin-block: 18px;
        text-align: left;
    }
    .oNas .container, .kontakt .container, .partneri .container{
        display: flex;
        margin-block: 90px;
        justify-content: space-between;
        gap: 50px;
        padding: 0;
        margin-bottom: 0;
    }

    .container h1{
        text-align: left;
        flex-basis: 50%;
    }
    .container .oNas_text, .container .kontakt_info{
        flex-basis: 50%;
    }


    .kontakt_info {
        text-align: left;
    }

    .barefoot_barefoot{
        margin-top: 70px;
    }
    .boxiky{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .boxik{
        flex-basis: calc(100% / 2)
    }

    .produkty, .barefoot{
        padding: 60px;
    }

    .produkty ul{
        display: flex;
        flex-wrap: wrap;
    }

    .produkty li{
        flex-basis: 50%;
    }
}




/* -----tady styluju pro počítač ----- */
@media(min-width: 1100px){
    h1{
        font-size: 5rem;
    }
    h2{
        font-size: 3.5rem;
    }
    .menu a{
        padding: 15px 30px;
    }
    /* .hero{
        padding-block: 150px;
    } */
    .barefoot .container{
        flex-wrap: nowrap;
        flex-basis: 25%;
    }
    .oNas .container, .kontakt .container, .partneri .container{
        padding: 20px;
    }
}