.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400, 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.jetbrains-mono {
  font-family:"JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300, 800;
  font-style: normal;
}

body {
    background-color: #ffffff;
    font-family: "Roboto";
    color: #000000;
}
h1,h2,h3,h4,p,ul,ol,li,body {
    margin: 0;
    padding: 0;
}

.clearfix:after, .clearfix:before {
    content: "";
    display: block;
    clear: both;
}
*, *:after, *:before {
    box-sizing: border-box;
}
a {
    transition: all 0.3s ease-out;
}
a:hover { 
    transition: all 0.3s ease-out;
}
@media screen and (max-width: 479px) {
    .container {width: 92%}
}
@media screen and (min-width: 480px) {
    .container {width: 95%}
}
@media screen and (min-width: 740px) {
    .container {width: 95%}
}
@media screen and (min-width: 960px) {
    .container {width: 95%}
}
@media screen and (min-width: 1200px) {
    .container {width: 1100px}
}

/*HLAVIČKA*/
.topline {
    padding: 24px 0;
    margin: 0 10px;
}
.container {
    max-width: 1100px;
    margin: 0 auto;
}
.container-columns, .container-columns2, .container-columns3 {
    max-width: 1100px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
}
.topline-left,
.topline-right,
.columns2-left,
.columns2-right {
    display: flex;
    flex-direction: column;
}
.topline-right,
.columns2-right {
    align-items: flex-end;
}
.menu {
    margin-top: auto;
}
.menu ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
}

.menu a {
    font-family: "JetBrains Mono", monospace;
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #000000;
    text-decoration: none;
}
.menu a:hover {
    font-weight: 700;
}
.menu li:not(:last-child)::after {
    content: "/";
    margin: 0 10px;
}
.menu li li::after {
  content: "";
}
.menu ul ul li::after {
    content: none !important;
}
.menu ul ul {
    display: none;
    position: absolute;
    top: 1.5em;
    left: 0;
    z-index: 99999;
    background: #c7a233;
    border-radius: 3px;
    list-style: none;
    width: 200px;
}
.menu ul ul a {
    display: block;
    padding: 5px 10px;
}
.menu ul li:hover > ul {
    display: block;
    margin: auto;
}
.menu li {
    position: relative;
  }

/*Hamburger*/
.mmenu-icon-wrapper {
  position: absolute;
  top: 3.9em;
  right: 0.5em;
  height: 26px;
  width: 26px;
  cursor: pointer;
  z-index: 2;
}
.mmenu-icon,
.mmenu-icon:before,
.mmenu-icon:after {
  content: '';
  position: absolute;
  border-radius: 1em;
  height: 2px;
  width: 26px;
  background: #282828;
  transition: all 0.2s ease
}

.mmenu-icon {
  top: 0.75em
}

.mmenu-icon:before {
  top: -0.50em
}

.mmenu-icon:after {
  top: 0.50em
}

.mmenu-active .mmenu-icon {
  background: transparent;
  transform: rotate(-135deg)
}

.mmenu-active .mmenu-icon:before,
.mmenu-active .mmenu-icon:after {
  top: 0
}

.mmenu-active .mmenu-icon:before {
  transform: rotate(90deg)
}

.mmenu-active .mmenu-icon,
.mmenu-active .mmenu-icon:before,
.mmenu-active .mmenu-icon:after {
  background: white
}

.mmenu-menu {
  transition: all 0.4s ease;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9) !important;
  color: white;
  text-align: center;
  z-index: 2;
}

.mmenu-active .mmenu-menu {
  opacity: 1;
  pointer-events: initial;
}

.mmenu-menu ul {
  display: block;
  transition: all 0.4s ease;
  padding: 0;
  list-style-type: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  font-size: 20px;
  line-height: 200%;
}

.mmenu-menu ul ul {
    position: static !important;    /* Zruší absolutní pozicování nad sebou */
    display: block !important;     /* Zajistí správné zobrazení */
    transform: none !important;    /* Odstraní posuny z desktopové verze */
    width: auto !important;        /* Zruší fixní šířku 230px z desktopu */
    padding: 0 !important;         /* Vyčistí vnitřní okraje */
    margin: 10px 0 !important;     /* Vytvoří jemný rozestup nad a pod podmenu */
}

/* Volitelné: Vizuální zjemnění podmenu pro lepší přehlednost */
.mmenu-menu ul ul li a {
    font-size: 16px !important;    /* Menší písmo pro podpoložky */
    opacity: 0.7;                  /* Jemnější bílá barva textu */
}

.mmenu-menu ul li a {
	color: #fff;
	text-decoration: none;
}

.mmenu-menu ul li a:hover {
	color: #cbbba0;
}

.mmenu-active .mmenu-menu ul {
  transform: translate(-50%, -50%) scale(1)
}
.mmenu-menu li::after {
    content: none !important;
}

@media screen and (max-width: 520px) {
	.menu {
		display: none;
	}
}

@media screen and (min-width: 520px) {
	.mmenu-menu, .mmenu-icon-wrapper {
		display: none !important;
	}
}

.pattern {
    margin: auto;
}

.pattern img {
    display: block;
    max-width: 520px;
    width: 100%;
    height: auto;
    padding-top: 25px;
}
.logo {
    margin-bottom: auto;
}
.topline-right h1 {
    margin-top: auto;
    align-self: flex-end;
    text-align: right;
}
.logo img {
    max-height: 100px;
    width: auto;
    margin-bottom: 10px;
}
.nadpis {
    text-align: center;
    background-color: #c7a233;
    padding: 10px 0;
    color: #000000;
}
h1 {
    font-family: "JetBrains Mono", monospace;
    font-size: 35px;
    font-weight: 800;
    color: #ffffff;
}
h1#domu {
    color: #000000;
}
h1 a {
    text-decoration: none;
    color: #ffffff;
}
h1 a:hover {
    color: #000000;
}
.header-top {
    padding: 5px 0;
    background-color: #282828;
}
.socials {
    display: flex;
    gap: 8px;
    justify-content: right;
}
.socials a {
    font-family: "JetBrains Mono", monospace;
    font-size: 30px;
    font-weight: 800;
    color: #c7a233;
    text-decoration: none;
    gap: 5px;
}
.socials a:hover {
    color: #ffffff;
}
.languages {
    justify-content: left;
    color: #ffffff;
    margin: auto 0;
}
.languages a {
    font-family: "JetBrains Mono", monospace;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    color: #c7a233;
    padding: 1px;
    border: 3px solid #c7a233;
    text-decoration: none;
    border-radius: 6px;
}

.languages a:hover {
    font-weight: 700;
    color: #ffffff;
    border: 3px solid #ffffff;
}
.foto {
    background: url(../img/kapslovna4.jpg) center center no-repeat;
    background-size: cover;
    height: 600px;
}
.toptext {
    background-color: #282828;
    opacity: 0.9;
    text-align: center;
}

.intro {
display: flex;
justify-content: center;
}

.intro p {
    max-width: 344px;
    padding: 30px 0;
    font-size: 20px;
    color: #fffffF;
}
.intro p a {
    text-decoration: none;
    font-weight: 700;
    color: #c7a233;
}
.intro p a:hover{
    color: #fffffF;
}
.rezervace-btn {
    align-self: flex-end;
    margin: 10px 0;
}
.rezervace-btn a {
    padding: 10px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 20px;
    border-radius: 6px;
    background-color: #282828;
    color: #fffffF;
    letter-spacing: 2px;
}
.rezervace-btn a:hover{
    background-color:#c7a233;
}
/*KONTAKT*/
.kontakt {
    padding: 40px 0;
    background-color: #282828;
    color: #c7a233;
}
.details {
    padding: 40px 0;
}
.container-columns-middle {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:40px;
}
.kontakt-left {
    margin: auto 0;
    text-align: right;
}
.kontakt-left img {
    max-height: 180px;
    width: auto;
    color: #282828;
}
.kontakt-right {
    margin: auto 0;
    text-align: left;
}
.kontakt-right h2 {
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    font-size: 24px;
    padding-bottom: 15px;
}
.kontakt-right p {
    font-size: 18px;
    line-height: 24px;
}
.adresa {
    padding-bottom: 10px!important;
}
.phone a {
    color: #ffffff!important;
}
.phone a:hover {
    color: #c7a233!important;
}
.kontakt-right p a {
    text-decoration: none;
    color: #c7a233;
    font-weight: 700;
}

.kontakt-right p a:hover {
    color: #ffffff;
}
.mapa iframe {
    vertical-align: top;
    width: 100%;
}
.details {
    margin: 0 10px;
}
.details h3 {
    padding: 25px 0 10px 0;
    font-family: "JetBrains Mono", monospace;
    font-weight: 300;
    font-size: 20px;
}
.details p {
    font-size: 18px;
    line-height: 24px;
}
.details-left {
    display: flex;
    justify-content: space-between;
}

/*COPY*/
.copy {
    font-size: 18px;
    padding: 15px 0;
    font-weight: 400;
    background-color: #282828;
    color: #fffffF;
}
.copy .container {
    display: flex;
    justify-content: space-between;
}
.copy a {
    text-decoration: none;
    color: #ffffff;
}
.copy a:hover {
    text-decoration: none;
    color: #c7a233;
}
.copyL span {
    color: #c7a233;
}
/*Error*/
.error {
    text-align: center;
    padding-bottom: 35px;
}
.error p {
    font-size: 20px;
    font-weight: 800;
    padding-bottom: 35px;
}
.error a {
    background-color: #c7a233;
    color: #fffffF;
    font-weight: 800;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 3px;
}
.error a:hover {
    background-color:#fffffF ;
    color: #c7a233;
    border: 3px solid #c7a233;
}
/*Page*/
.container-page {
    display: flex;
    justify-content: center;
    padding: 10px;
}
.page {
    margin: 20px 0;
}
.page p {
    padding: 10px;
    line-height: 24px;
    text-align: justify;
    font-size: 18px;
}
.page a {
    text-decoration: none;
    color: #c7a233;
    font-weight: 700;
}
.page a:hover {
    color: #000000;
}

/*REZERVACE*/

.page-rezervace {
    margin: 20px 0;
}
.page-rezervace p {
    padding-bottom: 10px;
    line-height: 24px;
    font-size: 18px;
    text-align: center;
}
.sloupec p, .pole-cela-sirka p {
    text-align: left;
}
.page a {
    text-decoration: none;
    color: #c7a233;
    font-weight: 700;
}
.page a:hover {
    color: #000000;
}

.sloupce-formulare {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Mezera mezi sloupci */
    margin-top: 20px;
}

.sloupce-formulare .sloupec {
    flex: 1; /* Sloupce zaberou stejnou šířku */
    min-width: 250px; /* Minimální šířka, při které se na mobilech přehodí pod sebe */
}
/* Zajištění plné šířky pro vstupy a textarea, Úprava výšky všech textových a výběrových polí ve formuláři */
.sloupce-formulare input,
.pole-cela-sirka textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    height: auto;         /* Resetuje případnou pevnou výšku šablony */
    font-size: 18px;      /* Zvětší text uvnitř pole, aby ladil s výškou */
    font-family: "Roboto";
}

.wpcf7 input.muj-submit {
    display: block;
    cursor: pointer;
    transition: all 0.3s ease; /* Plynulý efekt při najetí myší */
    margin-top: 20px;
    padding: 10px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
    border-radius: 6px;
    background-color: #c7a233;
    color: #fffffF;
    border: none;
    letter-spacing: 2px;
}

.wpcf7 input.muj-submit:hover {
    background-color:#fffffF ;
    color: #c7a233;
    border: 3px solid #c7a233;
}

/* --- ZAROVNÁNÍ TLAČÍTKA NA STŘED --- */
.tlacitko-stred {
    display: flex;
    justify-content: center; /* Vycentrování horizontálně */
    width: 100%;
}

/*DENNÍ MENU*/
.bila {
    padding: 30px 0;
}
.bila .container {
    padding: 10px;
}
.bila h2 {
    font-size: 30px;
    font-family: "JetBrains Mono", monospace;
    font-weight: 300;
    padding-bottom: 10px;
    text-align: left;
    text-transform: uppercase;
}
.bila p {
    font-size: 20px;
    padding-bottom: 5px;
}
.polozka {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    padding-bottom: 5px;
}
.nazev {
    flex: 0 1 80%;
    text-align: left;
    font-family: "Roboto", sans-serif;
}
.nazev p strong {
    color: #c7a233;
    font-weight: 700;
    font-size: 20px;
}
.nazev p {
    font-weight: 300;
    font-size: 16px;
}
#nazev {
    font-weight: 700;
    padding-bottom: 0;
    font-size: 20px;
}
#objem {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 16px;
    text-transform: lowercase;
}
#vinarstvi {
    font-weight: 400;
    padding-top: 5px;
}
.cena {
    flex: 0 1 20%;
    font-weight: 800;
    text-align: right;
}
/*SPECIALITY*/
.obraz {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.obraz img {
    max-width: 250px;
    width: 100%;
}

/*RESPONZIVITA*/
@media screen and (max-width: 1120px) {
.kontakt, .details {padding: 24px 0;}
h1#domu {font-size: 28px;}
.languages, .socials {margin: auto 10px;}
}
@media screen and (max-width: 850px) {
.container-columns {
    grid-template-columns: none;
    gap: 0;
}
.container-columns2 {
    grid-template-columns: none;
    gap: 0;
}
.pattern {margin: 10px 0;}
.pattern img {padding-top: 0;}
.details-left {display: block;}
.rezervace-btn {
    display: flex;
    justify-content: center;
    margin-top: 24px; 
    margin-bottom: 0;
}
.sloupec p, .pole-cela-sirka p {
    text-align: left;
}
}
@media screen and (max-width: 768px) {
    .sloupce-formulare {
        flex-direction: column; /* Seřadí sloupce pod sebe */
        gap: 0px; /* Zruší boční mezeru mezi sloupci, políčka budou mít rozestupy vertikálně */
    }
    .sloupce-formulare .sloupec {
        width: 100%; /* Sloupec zabere celou šířku displeje */
    }
    .container-columns-middle {grid-template-columns: none; gap: 0;}
    .kontakt-right {text-align: center;}
    .kontakt-left {text-align: center; margin-bottom: 24px;}
    .kontakt-left img {max-height: 180px;}
    .kontakt h2 {font-size: 20px;}
}
@media screen and (max-width: 610px) {
    .socials a {font-size: 24px;}
    .languages a {font-size: 12px;}
    .intro p {padding: 30px 0;}
    .toptext {height: 160px;}
    .polozka, .bila p {font-size: 16px;}
    .bila .container {padding: 15px 0;}
    .bila h2 {font-size: 25px;}
}
@media screen and (max-width: 520px) {
    .header-top {width: 100%;}
    .copy {font-size: 14px;}
    .copy .container {flex-direction: column; text-align: center;}
    .copyL {margin-bottom: 10px;}
    .logo img {max-height: 70px;}
    .mmenu-icon-wrapper {top: 2.5em;}
    .mapa iframe {height: 300px;}
    .topline {padding: 15px 0;}
    h1#domu {font-size: 22px;}
    .intro p {font-size: 18px;}
    .open {text-align: center;}
    .columns2-right {align-items: center; text-align: center;}
}