/* ==========================================================================
   1. IMAGE HOVER EFFECT
   ========================================================================== */
.image-container {
  position: relative;
  width: 100%;
}

.image-container img {
  display: block;
  width: 100%;
  transition: opacity 0.5s ease;
}

.image-container img.hover-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.image-container:hover img.original-image {
  opacity: 0;
}

.image-container:hover img.hover-image {
  opacity: 1;
}

/* ==========================================================================
   2. NAVIGATION PADDING (Mobile vs Desktop)
   ========================================================================== */

/* Mobile View: Strip padding off ALL navigation wrappers AND individual links */
@media screen and (max-width: 767px) {
  /* Outer block & containers */
  .custom-nav-padding,
  header .custom-nav-padding,
  .wp-block-navigation.custom-nav-padding,
  .custom-nav-padding .wp-block-navigation__container,
  .custom-nav-padding .wp-block-navigation-responsive-container,
  .custom-nav-padding ul.wp-block-navigation__container {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  /* Individual Navigation List Items (<li>) */
  .custom-nav-padding .wp-block-navigation-item,
  .custom-nav-padding li.wp-block-navigation-item,
  .custom-nav-padding .wp-block-navigation-link {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  /* Individual Link Anchors (<a> tags) */
  .custom-nav-padding .wp-block-navigation-item__content,
  .custom-nav-padding a.wp-block-navigation-item__content,
  .custom-nav-padding .wp-block-navigation-link__content,
  .custom-nav-padding a {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

/* Desktop View: Force 60px outer padding (768px and wider) */
@media screen and (min-width: 768px) {
  .custom-nav-padding,
  header .custom-nav-padding,
  .wp-block-navigation.custom-nav-padding {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}
/*==========================================================================
   3. DESKTOP HEADER STYLING (768px and wider)
   ========================================================================== */
@media screen and (min-width: 768px) {
  .desktop-lang-pad {
    padding-left: 25px !important;
  }
}

/* ==========================================================================
   4. MOBILE HEADER STYLING (under 768px)
      - Hide social icons completely
      - Company Logo always on top
      - Language Switcher underneath logo
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* Hide the 4 social icons on mobile */
  .header-social-icons {
    display: none !important;
  }

  .mobile-top-row-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Company Logo at top */
  .header-logo-column,
  .mobile-top-row-container > .wp-block-column:nth-child(2) {
    width: 100% !important;
    order: 1 !important;
    margin-bottom: 10px !important;
    text-align: center !important;
  }

  /* Language Switcher underneath logo */
  .desktop-lang-pad {
    width: auto !important;
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* =============SLIDE SHOW SIZE================*/
/* Apply 1:1 Square Ratio and 20px Rounded Corners to slideshows, UNLESS tagged with 'ignore-custom-css' */
.wp-block-jetpack-slideshow:not(.ignore-custom-css),
.wp-block-jetpack-slideshow:not(.ignore-custom-css) .wp-block-jetpack-slideshow_container {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Swiper wrapper height reset */
.wp-block-jetpack-slideshow:not(.ignore-custom-css) .wp-block-jetpack-slideshow_swiper-wrapper {
    height: 100% !important;
    max-height: none !important;
}

/* Slide & image styling */
.wp-block-jetpack-slideshow:not(.ignore-custom-css) .wp-block-jetpack-slideshow_slide {
    height: 100% !important;
}

.wp-block-jetpack-slideshow:not(.ignore-custom-css) .wp-block-jetpack-slideshow_slide figure {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: block !important;
}

.wp-block-jetpack-slideshow:not(.ignore-custom-css) .wp-block-jetpack-slideshow_image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 20px !important;
}

/* Navigation buttons positioning */
.wp-block-jetpack-slideshow:not(.ignore-custom-css) .swiper-button-prev,
.wp-block-jetpack-slideshow:not(.ignore-custom-css) .swiper-button-next,
.wp-block-jetpack-slideshow:not(.ignore-custom-css) .wp-block-jetpack-slideshow_button-prev,
.wp-block-jetpack-slideshow:not(.ignore-custom-css) .wp-block-jetpack-slideshow_button-next {
    display: flex !important;
    visibility: visible !important;
    opacity: 0.8 !important;
    z-index: 99 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
}

.wp-block-jetpack-slideshow:not(.ignore-custom-css) .swiper-button-prev,
.wp-block-jetpack-slideshow:not(.ignore-custom-css) .wp-block-jetpack-slideshow_button-prev {
    left: 10px !important;
}

.wp-block-jetpack-slideshow:not(.ignore-custom-css) .swiper-button-next,
.wp-block-jetpack-slideshow:not(.ignore-custom-css) .wp-block-jetpack-slideshow_button-next {
    right: 10px !important;
}

/* Optional: Mini-slideshow size override */
.wp-block-jetpack-slideshow.custom-mini-slideshow {
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Hide pagination dots for slideshows with 'ignore-custom-css' */
.wp-block-jetpack-slideshow.ignore-custom-css .wp-block-jetpack-slideshow_pagination,
.wp-block-jetpack-slideshow.ignore-custom-css .swiper-pagination {
    display: none !important;
}