header nav a{
    font-size: 18px;
    font-weight: 500;
}

body{
  margin:0;
  font-family: 'Montserrat', sans-serif;

  background-image: url('chalupa.jpg');
  background-size: cover;        /* roztáhne přes celou stránku */
  background-position: center;   /* vystředí */
  background-repeat: no-repeat;  
  background-attachment: fixed;  /* efekt při scrollu 🔥 */
}

body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0, 0, 0, 0.808); /* ztmavení */
  z-index:-1;
}


.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:white;
  text-decoration:none;
  font-weight:600;
}

.brand-wrap{
  position:relative;
  width:420px;       /* pevný prostor vlevo */
  height:120px;
  display:flex;
  align-items:center;
}

.logo-link{
  display:flex;
  align-items:center;
  text-decoration:none;
}


.logo-box{
  position: relative;
  left: -140px;
}

/* FORM SEKCE */

.hero-content .eyebrow{
    margin-top:130px;
    font-size:28px;
    letter-spacing:4px;
}

/* KARTA */
.form-section{
  position: relative;
  top: -320px; /* posune nahoru */
  width:100%;
  max-width:none;
  padding:20px 40px;
  display:flex;
  justify-content:center;
}

.form-card {
  background: rgba(122, 122, 122, 0.253);
  padding: 32px;
  border-radius: 20px;
  width: 100%;
  max-width: 700px;
  color: #ffffff;

  box-shadow: 0 10px 30px rgba(180, 180, 180, 0.3);
  border: 1px solid rgba(255,255,255,0.08);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 35px rgba(0,0,0,0.4);
}

form{
  width:100%;
  max-width:none;
}

.hero-content{
  position: relative;
  top: -150px;
}

.form-card h2,
.form-card .form-subtitle{
  color:white !important;
  text-align:center;
}

.form-subtitle{
  margin-bottom:30px;
}

.input-group{
  position:relative;
  margin-bottom:22px;
}

.input-group input,
.input-group textarea,
.input-group select{
  width:100%;
  padding:16px 14px;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:12px;
  font-size:16px;
  background:rgba(255,255,255,0.08);
  color:rgb(255, 255, 255);
  box-sizing:border-box;
}
.input-group select option {
  color: black;
}
.input-group select{
}
.input-group textarea{
  min-height:130px;
  resize:none;
}

.input-group label{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,0.75);
  background:transparent;
  padding:0 6px;
  pointer-events:none;
}

.input-group textarea + label{
  top:22px;
  transform:none;

}
.input-group input:not(:placeholder-shown) + label,
.input-group textarea:not(:placeholder-shown) + label {
  opacity: 0;
  visibility: hidden;
}
.btn-submit{
  width:100%;
  padding:16px;
  border:none;
  border-radius:12px;
  background:#0077ff;
  color:white;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}

.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus{
  border-color:#ffffff;
  box-shadow:0 0 0 4px rgba(255, 255, 255, 0.3);
  outline: none;
}

/* BUTTON */
.btn-submit{
  width:100%;
  padding:16px;
  border:none;
  border-radius:12px;
  background:#414141;
  color:rgb(255, 255, 255);
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

/* BUTTON HOVER */
.btn-submit:hover{
  background:#e67b00;
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.contact-strip{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 40px 20px;
  color: #ffffff;
   font-size:24px;
     text-align: center;
}


.contact-strip{ 
  margin-top: -280px; /* doladíš podle oka */
}

/* =========================
   MOBILNÍ MENU FORMULÁŘ
========================= */

#menu-toggle{
  display:none !important;
}

.menu-btn{
  display:none !important;
}

header nav{
  display:flex;
  align-items:center;
}

/* =========================
   MOBILNÍ VERZE
========================= */

@media only screen and (max-width:768px){

  body{
    background-attachment:scroll;
    overflow-x:hidden;
  }

  header{
    height:115px !important;
    padding:12px 16px !important;
    position:relative !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
  }

  .brand-wrap{
    position:absolute !important;
    left:50% !important;
    top:8px !important;
    transform:translateX(-50%) !important;
    width:auto !important;
    height:auto !important;
  }

  .logo{
    width:220px !important;
    height:auto !important;
    position:relative !important;
    left:0 !important;
    top:0 !important;
  }

  .menu-btn{
    display:block !important;
    color:white !important;
    font-size:34px !important;
    font-weight:700 !important;
    cursor:pointer;
    position:absolute !important;
    right:20px !important;
    top:28px !important;
    z-index:50 !important;
  }

  header nav{
    display:none !important;
    position:absolute !important;
    top:82px !important;
    right:16px !important;
    width:210px !important;
    background:rgba(40,40,40,0.96) !important;
    border-radius:16px !important;
    padding:14px !important;
    z-index:45 !important;
  }

  #menu-toggle:checked ~ nav{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  nav a{
    display:block !important;
    margin:0 !important;
    padding:10px 12px !important;
    font-size:15px !important;
    color:white !important;
    text-align:left !important;
    white-space:nowrap !important;
  }

  .hero{
    min-height:auto !important;
    padding:120px 20px 45px !important;
  }

  .hero-content{
    top:0 !important;
  }

  .hero-content h1{
    font-size:34px !important;
    line-height:1.25 !important;
  }

  .hero-content p{
    font-size:18px !important;
    line-height:1.6 !important;
  }

  .eyebrow{
    font-size:18px !important;
    letter-spacing:2px !important;
  }

  .form-section{
    top:0 !important;
    margin-top:40px !important;
    padding:20px !important;
  }

  .form-card{
    width:100% !important;
    max-width:100% !important;
    padding:28px 20px !important;
    border-radius:18px !important;
  }

  .form-subtitle{
    font-size:16px !important;
    line-height:1.6 !important;
  }

  .input-group input,
  .input-group textarea,
  .input-group select{
    font-size:16px !important;
    padding:15px 14px !important;
  }

  .input-group textarea{
    min-height:140px !important;
  }

  .contact-strip{
    margin-top:30px !important;
    padding:30px 20px !important;
    font-size:18px !important;
  }

  .contact-box{
    width:auto !important;
    max-width:85% !important;
    margin:0 auto !important;
    padding:25px 20px !important;
  }

  .contact-box p{
    line-height:1.7 !important;
    word-break:break-word !important;
  }

  .contact-box p:nth-child(3){
  white-space: nowrap !important;
}

  .site-footer{
    text-align:center !important;
    font-size:14px !important;
    padding:20px !important;
  }
}