/*!
 * Energy Forklift - static site overrides
 * Things the old WordPress JavaScript used to do, plus small fixes.
 */

/* ---- page loader --------------------------------------------------- */
.wd_page_transitions .page-loading {
  transition: opacity .35s ease, visibility .35s ease;
}
.wd_page_transitions .page-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.no-js .page-loading { display: none !important; }

/* page title entrance: short and subtle */
.is-loaded .titlebar #page-title {
  animation: ef-title-in .45s ease-out both;
}
@keyframes ef-title-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---- header --------------------------------------------------------- */
header.l-header .top-bar-container.slideUp {
  transition: top .3s ease, background-color .3s ease;
}
header.l-header .top-bar-container.slideUp.fixed.is-up {
  top: -150px;
}
header.l-header .header_phone strong a {
  color: inherit;
}
/* keyboard access for the desktop drop-down (was hover only) */
@media screen and (min-width: 64em) {
  header.l-header .top-bar-container .top-bar .top-bar-right .menu li.has-dropdown:focus-within > .is-dropdown-submenu {
    transform: translatey(46px);
    opacity: 1;
    z-index: 23;
    visibility: visible;
  }
}

/* mobile menu sub-items (was a Foundation accordion) */
header.l-header .top-bar-container .site-navigation.top-bar .top-bar-right .mobile-menu ul li {
  position: relative;
}
header.l-header .top-bar-container .site-navigation.top-bar .top-bar-right .mobile-menu ul ul {
  padding: 0 0 10px 15px;
}
header.l-header .top-bar-container .site-navigation.top-bar .top-bar-right .mobile-menu .submenu-toggle {
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
header.l-header .top-bar-container .site-navigation.top-bar .top-bar-right .mobile-menu .submenu-toggle:after {
  content: '';
  position: static;
  transition: transform .2s ease;
}

/* ---- spacers (data-height* used to be applied by JS) ----------------- */
.wd_empty_space { height: var(--h-d, 0); }
@media screen and (min-width: 40.063em) and (max-width: 64em) {
  .wd_empty_space { height: var(--h-t, 0); }
}
@media screen and (max-width: 40em) {
  .wd_empty_space { height: var(--h-m, 0); }
}

/* ---- full-width rows (was WPBakery JS) ------------------------------- */
html, body { overflow-x: clip; }
.vc_row[data-vc-full-width] {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  left: 50%;
  margin-left: -50vw !important;
  margin-right: 0 !important;
  padding-left: calc(50vw - 50% + 15px);
  padding-right: calc(50vw - 50% + 15px);
}
.vc_row[data-vc-full-width][data-vc-stretch-content] {
  padding-left: 0;
  padding-right: 0;
}

/* ---- shop ------------------------------------------------------------ */
.woocommerce div.product div.images .woocommerce-product-gallery__image.is-hidden {
  display: none !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image.is-active {
  display: block;
  width: 100%;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image.is-active a {
  cursor: zoom-in;
}
.woocommerce div.product div.images .flex-control-thumbs {
  margin-top: 10px;
}
.woocommerce div.product div.images .flex-control-thumbs li {
  padding: 4px;
  box-sizing: border-box;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  transition: opacity .2s ease;
}
.woocommerce div.product div.images .flex-control-thumbs li img:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.woocommerce-product-gallery { opacity: 1 !important; }
/* main image on top, thumbnails in a row below (same layout as before) */
.single-product.woocommerce div.product div.images.js-gallery {
  display: block !important;
  position: relative;
}
.single-product.woocommerce div.product div.images.js-gallery .woocommerce-product-gallery__wrapper {
  display: block;
}
.single-product.woocommerce div.product div.images.js-gallery .flex-control-thumbs {
  display: flex !important;
  flex-wrap: wrap;
  flex-direction: row !important;
  width: auto !important;
  height: auto !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  position: static !important;
}
.single-product.woocommerce div.product div.images.js-gallery .flex-control-thumbs li {
  width: 25% !important;
  float: none !important;
  margin: 0 !important;
}
.no-js .woocommerce div.product div.images .woocommerce-product-gallery__image.is-hidden { display: none !important; }
.no-js .woocommerce-product-gallery__trigger { display: none; }

/* ---- lightbox ---------------------------------------------------------- */
.ef-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .88);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.ef-lightbox.is-open { opacity: 1; visibility: visible; }
.ef-lightbox__figure {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 70px;
  box-sizing: border-box;
}
.ef-lightbox__figure img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #fff;
}
.ef-lightbox button {
  position: absolute;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 48px;
  line-height: 1;
  cursor: pointer;
  padding: 10px 16px;
  opacity: .8;
}
.ef-lightbox button:hover,
.ef-lightbox button:focus-visible { opacity: 1; }
.ef-lightbox__close { top: 10px; right: 10px; }
.ef-lightbox__prev { left: 10px; top: 50%; transform: translateY(-50%); }
.ef-lightbox__next { right: 10px; top: 50%; transform: translateY(-50%); }
.ef-lightbox.is-single .ef-lightbox__prev,
.ef-lightbox.is-single .ef-lightbox__next { display: none; }
@media (max-width: 640px) {
  .ef-lightbox__figure { padding: 60px 10px; }
}

/* ---- contact form ------------------------------------------------------ */
.wpcf7 form .wpcf7-response-output:empty { display: none; }
.wpcf7-response-output.is-visible {
  display: block;
  margin: 1.5em 0 0;
  padding: .8em 1em;
  border: 2px solid var(--primary-color);
}

/* ---- footer ------------------------------------------------------------ */
.first-footer .contact-details a {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .is-loaded .titlebar #page-title { animation: none; }
  .ef-lightbox, .wd_page_transitions .page-loading { transition: none; }
}

/* ---- fixes ------------------------------------------------------------- */
/* font fallbacks (the customizer printed bare family names) */
body, body p { font-family: 'Open Sans', Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6, .menu-list a { font-family: Yantramanav, 'Open Sans', Arial, sans-serif; }
header.l-header .top-bar-container.sticky .site-navigation.top-bar .top-bar-right .menu li a {
  font-family: 'Open Sans', Arial, sans-serif;
}
header.l-header .header_phone strong a,
header.l-header .header-cta a { text-decoration: none; }
/* footer widget titles were white on a white footer (invisible, but taking space) */
.first-footer div .block-title { color: var(--header-color, #313131); }
.first-footer .contact-details a,
.first-footer .contact-details a p { text-decoration: none; }
.first-footer .contact-details a:hover { color: var(--primary-color); }

/* ---- about page ---------------------------------------------------------- */
.about-text p { margin-bottom: 1em; line-height: 1.7; }
.about-text .about-text__title { margin: 1.4em 0 .6em; font-size: 22px; }
.about-text .about-text__list { margin: 0 0 1.2em 1.2em; }
.about-text .about-text__list li { margin-bottom: .5em; line-height: 1.6; }
.about-text .about-text__cta { margin-top: 1.5em; display: flex; flex-wrap: wrap; gap: 12px; }
.about-text .about-text__cta .button {
  display: inline-block; padding: 12px 26px; font-weight: 700; text-decoration: none;
  background: var(--primary-color); color: #fff; border: 2px solid var(--primary-color);
}
.about-text .about-text__cta .button--ghost { background: transparent; color: var(--primary-color); }
.about-text .about-text__cta .button:hover { opacity: .88; }


/* ---- link hover underline ------------------------------------------------
   The theme drew a thick band (22% of the link height) on hover: it covered the
   letters and showed as a red block on image links. Now: a thin line under text. */
a, a:visited { text-decoration: none; }
a {
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size .25s ease, color .2s ease;
}
a:hover, a:focus, a:active { background-size: 100% 2px; }
/* links that are blocks, images or buttons get no underline */
a:has(img), a.button, .button, .wd-btn, .logo-wrapper a, .header-cta a, .social-media a,
.product-image-wrapper a, ul.products li.product a, .woocommerce-product-gallery a,
.flex-control-thumbs a, .menu-toggle, .ef-lightbox a {
  background-image: none !important;
}
/* main menu: thin line under the item text */
.site-navigation .desktop-menu > li > a {
  background-position: 1rem calc(100% - .45em);
  background-size: 0 3px;
}
.site-navigation .desktop-menu > li > a:hover,
.site-navigation .desktop-menu > li > a:focus { background-size: calc(100% - 2rem) 3px; }
.site-navigation .submenu a { background-position: 33px calc(100% - .35em); background-size: 0 2px; }
.site-navigation .submenu a:hover,
.site-navigation .submenu a:focus { background-size: calc(100% - 100px) 2px; }

/* ---- product cards (grid view) -------------------------------------------
   Same-size image boxes, title always visible, "İncele" appears under it. */
.woocommerce ul.products.grid li.product:not(.product-category) .product-image-wrapper > a {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.woocommerce ul.products.grid li.product:not(.product-category) .product-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .4s ease;
}
.woocommerce ul.products.grid li.product:not(.product-category):hover img { transform: scale(1.04); }
.woocommerce ul.products.grid li.product:not(.product-category) .product-details-wrapper {
  overflow: visible;
  text-align: center;
  padding-bottom: 4px;
}
.woocommerce ul.products.grid li.product:not(.product-category) .woocommerce-loop-product__title,
.woocommerce ul.products.grid li.product:not(.product-category):hover .woocommerce-loop-product__title {
  transform: none;
  transition: color .2s ease;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}
.woocommerce ul.products.grid li.product:not(.product-category):hover .woocommerce-loop-product__title a {
  color: var(--primary-color);
}
.woocommerce ul.products.grid li.product:not(.product-category) .button,
.woocommerce ul.products.grid li.product:not(.product-category):hover .button {
  position: static;
  display: inline-block;
  margin: 8px auto 0;
  padding: 11px 40px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.woocommerce ul.products.grid li.product:not(.product-category):hover .button,
.woocommerce ul.products.grid li.product:not(.product-category):focus-within .button {
  opacity: 1;
  transform: none;
}
.woocommerce ul.products li.product:not(.product-category):hover { margin-bottom: 25px !important; }
@media (hover: none) {
  .woocommerce ul.products.grid li.product:not(.product-category) .button { opacity: 1; transform: none; }
}