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

:root {
  --color-primary: #ec5600;
  --color-primary-dark: #db5000;
  --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: #2c2f24;

  --radius: 12px;
}

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

h1,
h2{
  font-family: "Playfair Display", serif;
  font-style: normal;
}

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

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

h3{
  font-family: "DM Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-secondary);
  margin: 0;
}

section{
  padding: 50px 0;
}

.container{
  max-width: 540px;
  margin: 0 auto;
  padding: 0 20px;
}

/* sekce hlavicka  */
.header{
  padding: 20px 0;
}

.header .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.logo_header img{
  height: 35px;
}

.menu{
  margin: 0;
}

.nav__link{
  display: inline-block;
  padding: 10px 15px;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-secondary-dark);
  border-radius: 100vw;
}

.nav__link:hover,
.nav__link:focus {
  background: var(--color-secondary-bright);
}

/* sekce banner  */
.hero{
  background: url(images/hero.jpg)no-repeat center/cover;
  padding: 0;
}

.hero .container{
  text-align: center;
  padding: 100px 0;
}

.banner__title {
  margin: 0;
}

.banner__description {
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 1.125rem;
}

.button{
  display: inline-block;
  padding: 15px 30px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 100vw;
}

.button:hover,
.button:focus{
  background: var(--color-primary-dark);
}

/* sekce jidelni listek  */
.menu-section h2{
  text-align: center;
  margin-bottom: 40px;
}

.cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  align-items: stretch;
}

.menu-card {
  flex: 1 1 100%;
  border: 1px solid var(--color-secondary-bright);
  border-radius: var(--radius);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap:20px;
}

.menu-card .ikona__img{
  width: 40px;
  height: 40px;
  display: block;
}

.description{
  margin: 0;
}

.odkaz{
  margin-top: auto;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  justify-content: center;
}

.odkaz:hover,
.odkaz:focus{
  text-decoration: underline;
}

/* sekce rozvoz */
.delivery {
  background: var(--color-section-bg);
}

.delivery .container{
  display: flex;
  flex-direction: column;
  gap: 40px; 
}

.rozvoz_img{
  width: 100%;
  border-radius: var(--radius);
  display: block;
}

.rozvoz__text {
  display: flex;
  flex-direction: column;
  gap: 40px;           
  justify-content: center;
  align-items: flex-start;
}

.rozvoz__text h2 {
  text-align: left;
  margin: 0;           
}

.delivery-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.delivery-list li {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-secondary-dark);
}

.rozvoz__text p{
  margin: 0;
}

.delivery .ikona__img{
  width: 40px;
  height: 40px;
  display: block;
}

.button_jidlo{
  display: inline-block;
  padding: 15px 30px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 100vw;
}

.button_jidlo:hover,
.button_jidlo:focus{
  background: var(--color-primary-dark);
}

/* sekce paticka  */
.footer{
  background-color: var(--color-footer-bg);
  color: var(--color-secondary-light);
}

.footer .container{
  display: flex;
  flex-direction: column;
  gap:20px;
}

.logo_footer img{
  height: 40px;
}

.menu_footer{
  margin: 0;
  padding: 0;
}

.menu_footer li { 
  display: inline-block;
  margin-top: 20px;
}

.menu_footer a{
  color: var(--color-secondary-bright);
  padding-right: 20px;
}


@media (min-width: 768px) {
  .container{ max-width: 1100px;}

  .section{padding: 80px 0;}

  .header{padding: 20px 0;}

  .header .container{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      text-align: left;
      gap:0;
    }

  h1 {font-size: 4rem;}

  h2{font-size: 3rem;}

  .nav__link{
    padding: 10px 20px;
  }

  .button{
    padding: 20px 40px;
    font-size: 1.125rem;
  }

  .button_jidlo{
    padding: 20px 40px;
    font-size: 1.125rem;
  }

  .hero .container{
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .banner__description {
    font-size: 1.25rem;
  }

  .menu-card {
    flex: 1 1 calc(50% - 30px);
  }

  .delivery .container{
    flex-direction: row;
    gap:60px;
  }

  .polovina{
    flex: 1;;
  }

  .footer .container{
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
  }

}


@media (min-width:1100px){

  h1 {font-size: 5rem;}

  h2{font-size: 3.5rem;}

  .logo_header img{height: 45px;}

  .nav__link{
    padding: 15px 30px;
  }

  .hero .container{
    padding-top: 150px;
    padding-bottom: 150px;
  }

  .menu-card{
    flex: 1 1 calc(25% - 30px);
  }
}