/* DEMO-4 – lehká modernizace a hezčí hover efekty.
   Načítá se jako poslední (po style.css a responsive.css) na všech stránkách dema,
   takže tady stačí přepisovat existující pravidla. Barvy, písmo i rozložení zůstávají.

   Obsah:
    1. Proměnné a základ
    2. Hlavička (info boxy, menu, podmenu, tlačítko Poptávka)
    3. Tlačítka
    4. Karty služeb (V čem jsme nejlepší, přehledy služeb)
    5. Galerie (pás na úvodu, přehled galerií, fotky)
    6. Proč si nás vybrat
    7. Podstránky (drobečky, boční menu, fotky služby, stránkování)
    8. Formuláře a kontakty
    9. Patička a tlačítko Nahoru
   10. Omezení pohybu (přístupnost)
*/

/* ---------- 1. Proměnné a základ ---------- */
:root {
  --brand: #ab7442;
  --brand-dark: #825832;
  --brand-rgb: 171, 116, 66;
  --ink: #272727;
  --radius: 0;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t: .35s var(--ease);
  --shadow-sm: 0 4px 14px rgba(39, 30, 22, .08);
  --shadow-md: 0 14px 34px rgba(39, 30, 22, .16);
}
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--brand); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* ---------- 2. Hlavička ---------- */
.main-header .header-top .social li a { transition: color var(--t), transform var(--t); display: inline-block; }
.main-header .header-top .social li a:hover { color: var(--brand); transform: translateY(-2px); }
.main-header .header-upper .logo img { transition: transform var(--t); }
.main-header .header-upper .logo a:hover img { transform: scale(1.03); }
.main-header .info-box .icon_box { transition: transform var(--t); }
.main-header .info-box:hover .icon_box { transform: translateY(-3px) rotate(-6deg); }
.main-header .info-box a { transition: color var(--t); }
.main-header .info-box a:hover { color: var(--brand); }

/* Hlavní menu – jen desktop (mobilní menu řeší responsive.css) */
@media (min-width: 1025px) {
  .mainmenu-wrapper .menu-bg { border-radius: var(--radius); }
  .mainmenu-wrapper.stricky-fixed .menu-bg { border-radius: 0; box-shadow: 0 8px 22px rgba(0, 0, 0, .15); }

  .mainmenu-holder .nav-header > ul > li > a { transition: background var(--t), color var(--t); }
  /* místo tmavého pozadí: světlá linka, která vyjede ze středu */
  .mainmenu-holder .nav-header > ul > li > a:hover { background: rgba(0, 0, 0, .08); }
  .mainmenu-holder .nav-header > ul > li:hover > a::after,
  .mainmenu-holder .nav-header > ul > li.current > a::after,
  .mainmenu-holder .nav-header > ul > li.active > a::after { transform: scaleX(1); }
  .mainmenu-holder .nav-header > ul > li.current > a { background: rgba(0, 0, 0, .12); }

  /* podmenu: vyjede zlehka dolů, stín, zaoblené spodní rohy */
  .mainmenu-holder .nav-header > ul > li > ul {
    transform: translateY(10px); transition: opacity var(--t), transform var(--t), visibility var(--t);
    box-shadow: var(--shadow-md); border-radius: 0 0 var(--radius) var(--radius); overflow: hidden;
    border-bottom-width: 3px;
  }
  .mainmenu-holder .nav-header > ul > li:hover > ul { transform: translateY(0); }
  .mainmenu-holder .nav-header > ul > li > ul li a {
    position: relative; text-transform: none; font-size: 15px; letter-spacing: 0;
    transition: color var(--t), background var(--t), padding var(--t), border-color var(--t);
  }
  .mainmenu-holder .nav-header > ul > li > ul li + li { border-top: 1px solid #f3f0ec; }
  .mainmenu-holder .nav-header > ul > li > ul li:hover > a {
    color: var(--brand); background: #faf7f3; padding-left: 30px;
  }
}

/* Šipka u položek s podmenu – jen na širokých obrazovkách, kde je v menu místo */
@media (min-width: 1280px) {
  /* šipka u položek s podmenu */
  .mainmenu-holder .nav-header > ul > li.dropdown > a { padding-right: 38px; }
  .mainmenu-holder .nav-header > ul > li.dropdown > a::before {
    content: ""; position: absolute; right: 22px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
    border-right: 2px solid rgba(255, 255, 255, .8); border-bottom: 2px solid rgba(255, 255, 255, .8);
    transform: rotate(45deg); transition: transform var(--t); display: block;
  }
  .mainmenu-holder .nav-header > ul > li.dropdown:hover > a::before { transform: translateY(2px) rotate(225deg); }

}

/* Tlačítko Nezávazná poptávka – k původnímu diagonálnímu efektu přidán odlesk a zvednutí */
.mainmenu-wrapper .get-appt { border-radius: var(--radius); transition: transform var(--t), box-shadow var(--t); }
.mainmenu-wrapper .get-appt .appt-btn::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease); pointer-events: none;
}
.mainmenu-wrapper .get-appt:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
.mainmenu-wrapper .get-appt:hover .appt-btn::after { left: 130%; }

/* ---------- 3. Tlačítka ---------- */
.thm-btn, .appt-btn { border-radius: var(--radius); }
.thm-btn { transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t) !important; }
.thm-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(var(--brand-rgb), .28); }
.thm-btn:active { transform: translateY(0); box-shadow: none; }
.call-out-action .thm-btn:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }

/* ---------- 4. Karty služeb ---------- */
.our-services .single-our-service {
  border-radius: var(--radius); overflow: hidden; background: #fff;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.our-services .single-our-service .img-box { overflow: hidden; margin: 0; }
.our-services .single-our-service .img-box img { width: 100%; transition: transform .7s var(--ease); }
/* původní plná hnědá clona nahrazena jemným přechodem + ikonou šipky */
.our-services .single-our-service .img-box a:after {
  background: linear-gradient(180deg, rgba(var(--brand-rgb), 0) 30%, rgba(var(--brand-rgb), .55) 100%);
  transform: none; opacity: 0; transition: opacity var(--t);
}
.our-services .single-our-service .img-box a::before {
  content: "\2192"; position: absolute; z-index: 2; right: 18px; bottom: 18px;
  width: 44px; height: 44px; line-height: 44px; text-align: center; border-radius:0;
  background: #fff; color: var(--brand); font-size: 20px; font-weight: 700;
  opacity: 0; transform: translateY(10px) scale(.8); transition: opacity var(--t), transform var(--t);
}
.our-services .single-our-service h4 { transition: color var(--t); }
@media (hover: hover) {
  .our-services .single-our-service:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
  .our-services .single-our-service:hover .img-box img { transform: scale(1.07); }
  .our-services .single-our-service:hover .img-box a:after { opacity: 1; transform: none; }
  .our-services .single-our-service:hover .img-box a::before { opacity: 1; transform: none; }
  .our-services .single-our-service:hover h4 { color: var(--brand); }
}

/* ---------- 5. Galerie ---------- */
.project_gallery .item .inner-box { border-radius: var(--radius); }
.project_gallery.style-2 .item .inner-box { border-radius: 0; }
.project_gallery .item .image-box { margin: 0; overflow: hidden; }
.project_gallery .item .image-box img { width: 100%; transition: transform .8s var(--ease); }
/* clona už nepadá shora – plynule se objeví, text vyjede zespodu */
.project_gallery .item .overlay-one { top: 0; transition: opacity .45s var(--ease); }
.project_gallery .item .overlay-one .overlay-inner {
  background: linear-gradient(180deg, rgba(var(--brand-rgb), 0) 25%, rgba(var(--brand-rgb), .9) 100%);
}
.project_gallery .item .overlay-one .overlay-inner .content { vertical-align: bottom; padding: 0 20px 26px; }
.project_gallery .item .overlay-one .overlay-inner .content h4 {
  transform: translateY(14px); transition: transform .45s var(--ease); letter-spacing: .03em;
}
.project_gallery .item .overlay-one .overlay-inner .content h4::after {
  content: ""; display: block; width: 36px; height: 2px; background: #fff; margin: 10px auto 0;
  transform: scaleX(0); transition: transform .45s .1s var(--ease);
}
/* u jednotlivých fotek (prohlížeč) kulatá ikona + uprostřed */
.project_gallery .item a.fancybox .overlay-inner { background: rgba(30, 22, 15, .35); }
.project_gallery .item a.fancybox .overlay-inner::before {
  content: "+"; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  line-height: 52px; text-align: center; border-radius:0; background: #fff; color: var(--brand);
  font-size: 30px; font-weight: 300; transform: scale(.6); transition: transform .45s var(--ease);
}
.project-content.project_gallery .item .inner-box { transition: box-shadow var(--t); }
@media (hover: hover) {
  .project_gallery .item:hover .image-box img { transform: scale(1.08); }
  .project_gallery .item:hover .overlay-one .overlay-inner .content h4 { transform: none; }
  .project_gallery .item:hover .overlay-one .overlay-inner .content h4::after { transform: scaleX(1); }
  .project_gallery .item:hover a.fancybox .overlay-inner::before { transform: scale(1); }
  .project-content.project_gallery .item:hover .inner-box { box-shadow: var(--shadow-md); }
}
.project_gallery .text-link a { position: relative; transition: color var(--t); }
.project_gallery .text-link a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.project_gallery .text-link a:hover::after { transform: scaleX(1); }

/* ---------- 6. Proč si nás vybrat ---------- */
.service-item .inner-box .icon_box { border-radius:0; }
.service-item .inner-box h4 { transition: color var(--t); }
@media (hover: hover) {
  .service-item:hover .inner-box .icon_box { transform: translateY(-4px) rotate(-8deg); box-shadow: 0 8px 18px rgba(var(--brand-rgb), .35); }
  .service-item:hover .inner-box h4 { color: var(--brand); }
}

/* ---------- 7. Podstránky ---------- */
.breadcumb-wrapper ul.link-list li a { transition: color var(--t); }
.breadcumb-wrapper ul.link-list li a:hover { color: var(--ink); }

/* boční menu služeb: posun textu a hnědá linka vlevo */
.single-sidebar-box.service-link-widget ul.catergori-list li a {
  border-radius: var(--radius); border-left-width: 3px;
  transition: color var(--t), background var(--t), padding var(--t), border-color var(--t), box-shadow var(--t);
}
.single-sidebar-box.service-link-widget ul.catergori-list li a:hover {
  padding-left: 32px; background: #faf7f3; border-color: #faf7f3; border-left-color: var(--brand); box-shadow: var(--shadow-sm);
}
.single-sidebar-box.service-link-widget ul.catergori-list li.active a { border-left-color: var(--brand); font-weight: 500; }
.single-sidebar-box.service-link-widget ul.catergori-list li:after { transition: opacity var(--t); pointer-events: none; }
.single-sidebar-box.service-link-widget ul.catergori-list li:hover:after { opacity: 0; }

/* fotky v detailu služby */
.single-service-page .img-box { overflow: hidden; border-radius: var(--radius); }
.single-service-page .img-box img { transition: transform .8s var(--ease); }
@media (hover: hover) {
  .single-service-page .img-box:hover img { transform: scale(1.05); }
}

/* stránkování galerií */
.page_pagination li a { border-radius: var(--radius); transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t) !important; }
.page_pagination li a:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(var(--brand-rgb), .3); }
.page_pagination li a.active:hover { transform: none; }

/* ---------- 8. Formuláře a kontakty ---------- */
.default-form input[type="text"], .default-form input[type="email"], .default-form input[type="tel"],
.default-form select, .default-form textarea, .contact-section .g-select {
  border-radius: var(--radius); transition: border-color var(--t), box-shadow var(--t), background var(--t) !important;
}
.default-form input:focus, .default-form textarea:focus, .default-form select:focus {
  border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18) !important; outline: 0;
}
.contact-section .form-box { border-radius:0; }

.accordion .acc-btn { transition: color var(--t), background var(--t); }
.accordion .acc-btn:hover { color: var(--brand); background: #f3eee8; }
.accordion .acc-btn .toggle-icon { transition: transform var(--t); }
.accordion .acc-btn:hover .toggle-icon { transform: translateX(3px); }
.contact-infos li .icon_box { transition: transform var(--t); }
.contact-infos li:hover .icon_box { transform: scale(1.1); }

/* ---------- 9. Patička a tlačítko Nahoru ---------- */
.footer-bottom a { position: relative; transition: color var(--t); }
.footer-bottom a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.footer-bottom a:hover::after { transform: scaleX(1); }
.scroll-top { border-radius:0; transition: transform var(--t), box-shadow var(--t), background var(--t); }
.scroll-top:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(var(--brand-rgb), .35); }

/* ---------- 10. Omezení pohybu ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .our-services .single-our-service:hover,
  .project_gallery .item:hover .image-box img,
  .thm-btn:hover { transform: none !important; }
}

/* Mobilní audit: celá fotografie je skutečná dotyková plocha. */
.project_gallery .item .overlay-one > a {
  display: block; position: relative; width: 100%; height: 100%;
}
.project_gallery .item:focus-within .overlay-one { top: 0; opacity: 1; }
@media (hover: none), (max-width: 767px) {
  .project_gallery .item .overlay-one { opacity: 1; }
  .project_gallery .item a.fancybox .overlay-inner { background: transparent; }
  .project_gallery .item a.fancybox .overlay-inner::before {
    left: auto; top: auto; right: 12px; bottom: 12px; margin: 0;
    width: 44px; height: 44px; line-height: 42px; font-size: 26px;
    transform: none; box-shadow: 0 3px 12px rgba(0,0,0,.15);
  }
  .project_gallery .item .overlay-one .overlay-inner .content h4 { transform: none; }
}

@media (max-width: 767px) {
  /* Velikost 16 px zabrání automatickému přiblížení polí na iPhonu. */
  .default-form input, .default-form select, .default-form textarea,
  .default-form .bootstrap-select .btn { font-size: 16px; }
}