/* ===== Bee zone CZ – base styles (no framework) ===== */

/* Colors */
:root{
  --bg: #0f1213;          /* dark */
  --text: #111;
  --muted: #5f6b6e;
  --white: #ffffff;

  --honey: #E4B043;       /* honey gold */
  --honey-dark: #C6932D;
  --green: #2E8B57;       /* Bee zone green */
  --surface: #f7f4ee;     /* warm light */
  --card: #ffffff;

  --shadow: 0 10px 25px rgba(0,0,0,.12);
  --shadow-soft: 0 8px 20px rgba(0,0,0,.08);
  --radius: 18px;
  --max: 1120px;
}

/* Reset-ish */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.5;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; }
p{ margin: 0 0 14px; }
h1,h2,h3{ margin:0 0 12px; line-height:1.15; }
h1{ font-size: clamp(30px, 4vw, 52px); letter-spacing:-0.02em; }
h2{ font-size: clamp(22px, 2.5vw, 34px); letter-spacing:-0.01em; }
h3{ font-size: 20px; }

.clearfix:before,.clearfix:after{display:table;content:" "}
.clearfix:after{clear:both}
.asterisk:before{content:"\2a"; color: red;}

main section{ padding: 70px 20px; }
section.cop   { padding: 0px 20px; }
@media (max-width: 700px){
  main section{ padding: 54px 16px; }
}

/* Container helper */
.hero-inner, .heroo-inner, .mission, .benefits, .distribution, .site-header, .cta, .cop, .kontakt, .seent, .products{
  max-width: var(--max);
  margin: 0 auto;
}

/* ===== Header ===== */
.site-header{
  margin: 0 auto; 
  position: absolute;
  left: 0; right: 0;
  top: 0;
  z-index: 20;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 0px;
  padding: 18px 0px 0px 0px;
  }
.site-header .brand img{
  height: 65px;
  width: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
.main-nav{
  display:flex;
  gap: 18px;
  align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}
.main-nav a{
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: 16px;
  padding: 8px 10px;
  border-radius: 10px;
}
.main-nav a:hover{
  background: rgba(255,255,255,.10);
}

@media (max-width: 1150px){

   .site-header {
  padding: 20px;
margin: 20px;
}
  .site-header .brand img{
  margin-left: 20px;
 }
 }


@media (max-width: 750px){

  .main-nav{
  	padding: 4px 6px; }
  .main-nav a{
  padding: 4px 5px;
  margin:  0;}
   .site-header {
  padding: 20px;
margin: 20px;
}
  .site-header .brand img{
  margin-left: 20px;
  height: 40px;
}
 }

@media (max-width: 550px){
  .main-nav{ display:none; } /* může být nahrazeno burgerem */
}

/* ===== Hero ===== */
.hero{
  position: relative;
  min-height: 60vh;
  padding: 120px 20px 70px;
  color: var(--white);

  /* Nastavte cestu k hero fotce podle projektu */
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.10) 70%, rgba(0,0,0,0) 100%),
    url("./i/hero.jpg");
  background-size: cover;
  background-position: center;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(900px 500px at 20% 20%, rgba(228,176,67,.20), rgba(0,0,0,0));
  pointer-events:none;
}
.hero-inner{
  position: relative;
  padding-top: 40px;
}
.hero-perex{
  font-size: 20px;
  opacity: .95;
  margin-top: 14px;
}
.hero-lead{
  margin-top: 14px;
  max-width: 640px;
  color: rgba(255,255,255,.92);
  font-size: 18px;
}
.hero-cta{
  display:flex;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid transparent;
  box-shadow: var(--shadow-soft);
}
.btn-primary{
  background: var(--honey);
  color: #1a1408;
}
.btn-primary:hover{ background: var(--honey-dark); }
.btn-secondary{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
  color: var(--white);
}
.btn-secondary:hover{ background: rgba(255,255,255,.16); }

@media (max-width: 700px){
  .hero{ min-height: 78vh; padding-top: 110px; }
  .hero-perex{ font-size: 16px; }
}

.main-nav{
  margin: 0 30px 0 0;
 
}



/* ===== Hero other ===== */
.heroo{
  position: relative;
  min-height: 15vh;
  padding: 20px 20px 20px;
  color: var(--white);

  /* Nastavte cestu k hero fotce podle projektu */
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.10) 70%, rgba(0,0,0,0) 100%),
    url("./i/hero.jpg");
  background-size: cover;
  background-position: bottom center;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(900px 500px at 20% 20%, rgba(228,176,67,.20), rgba(0,0,0,0));
  pointer-events:none;
}
.hero-inner{
  position: relative;
  padding-top: 40px;
}



/* ===== Mission ===== */
.mission{
  background: linear-gradient(180deg, var(--surface), #ffffff);
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 18px;

}
.mission p{ max-width: 980px; }
.distribution-line{
  margin-top: 16px;
  color: #1c1c1c;
  padding: 12px 14px;
  background: rgba(46,139,87,.08);
  border-left: 4px solid var(--green);
  border-radius: 12px;
}

/* ===== Benefits ===== */
.benefits{ background: #ffffff; }
.benefit-grid{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.benefit{
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0,0,0,.06);
}
.benefit h3{
  margin-bottom: 8px;
  position: relative;
  padding-left: 16px;
}
.benefit h3::before{
  content:"";
  position:absolute;
  left:0; top: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(46,139,87,.12);
}
.benefit p{
  color: var(--muted);
  font-size: 16px;
  margin: 0;
}
@media (max-width: 1100px){
  .benefit-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 740px){
.hero{
  min-height: 35vh;
}

  .benefit-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ===== Distribution block ===== */
.distribution{
  text-align:center;
  background: linear-gradient(180deg, #fff, var(--surface));
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-size: 18px;

}
.distribution img{
  margin: 0 auto 14px;
 
  width: auto;
}
.dist-title{ margin: 0 0 6px; }
.dist-sub{ margin: 0; color: var(--muted); }

/* ===== CTA ===== */
.cta{
  background: var(--green);
  color: rgba(255,255,255,.9);
  text-align:center;
  font-size: 20px;

}
.cta p{ max-width: 920px; margin: 0 auto 16px; }
.cta .btn-primary{ box-shadow: none; }


/* ===== COP ===== */
.cop{
  background: var(--green);
  border-top: 1px solid #FFFFFF;
  color: rgba(255,255,255,.9);
  text-align:center;
}
.cop p{ max-width: 920px; margin: 0 auto 3px; }


/* ===== Kontakt ===== */

.kont { position:relative;  float:left; width:30%; margin: 0px; padding: 20px}
.map {position:relative; float: right; width: 65%; margin: 10px 0;}

@media (max-width: 700px){
.map {position:relative; float: left; width: 100%; margin: 0 0;}

}


.seent{
width: 100%;
  background: linear-gradient(180deg, var(--surface), #ffffff);
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 18px;

}

/* ===== product ===== */
.product{ background: #ffffff; }
.product-grid{
  margin: 26px 0 40px !important;   
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.product{
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0,0,0,.06);
}
.products h2{
  margin: 40px 10px 0px;
}
.product h3{
  margin: 20px;
  position: relative;
  padding-left: 16px;
}
.product p{
  color: var(--muted);
  font-size: 16px;
  margin: 0;
}
.prothat img{ max-width:35%;
}
.prothat table td { padding: 3px;}
.prothat ul { list-style: circle; margin: 10px;}
.prothat li {padding-left: 10px; margin-left: 10px;  font-size: 1.0em;}
.prothat p { font-size: 1.0em;}
.prothat strong { font-size: 1.05em;}


@media (max-width: 1100px){
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 740px){
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
.prothat img{ max-width:50%;}
}

@media (max-width: 500px){
.prothat img{ max-width:100%;}
}


button,input,select,textarea{margin:5px;font-family:inherit;font-size:100%; line-height:2em; width:400px; max-width:400px; }
.user-form__label {float:left; position:relative;  width: 300px;}

table.vyber { max-width:100%; border: none !important;}
table.vyber tr {background-color: #f9cd71; border: none !important; line-height: 300%;}
table.vyber td {border: 1px solid #fff;}
table.vyber tr.seco{ background-color: var(--honey);}
table.vyber tr.top{ background-color: #ebb511;}
td.dot{text-align:center;font-weight: bold; font-size: 2em;}
td.vyr{ text-align: left !important; font-weight: bold ; background-color: #ebb511; padding: 5px !important;}