/**
 * Ledo Custom Fixes & Responsive Styles
 * Production-ready improvements for mobile, tablet, and PHP 8.x compatibility.
 */

/* 1. Admin bar offset for fixed mobile header when logged in */
@media (max-width: 992px) {
  body.admin-bar #kad-mobile-banner {
    top: 32px !important;
  }
}
@media (max-width: 600px) {
  body.admin-bar #kad-mobile-banner {
    top: 46px !important;
  }
}

/* 2. Anchor scroll padding for fixed header */
html {
  scroll-padding-top: 70px;
}

/* 3. Responsive 2-column grid for the 8 rings/products section */
@media (max-width: 780px) {
  #inner-wrap .so-widget-sow-features .sow-features-list.sow-features-responsive,
  .so-widget-sow-features .sow-features-list.sow-features-responsive {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 20px 10px !important;
  }
  #inner-wrap .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-features-feature,
  .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-features-feature {
    width: calc(50% - 8px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  #inner-wrap .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-icon-container,
  .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-icon-container {
    width: 130px !important;
    height: 130px !important;
    flex: 0 0 130px !important;
    margin: 0 auto 10px !important;
  }
  #inner-wrap .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-icon-container .sow-icon-image,
  .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-icon-container .sow-icon-image {
    width: 130px !important;
    height: 130px !important;
    background-size: contain !important;
  }
  #inner-wrap .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-features-feature-title,
  .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-features-feature-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin-top: 8px !important;
  }
}

@media (max-width: 420px) {
  #inner-wrap .so-widget-sow-features .sow-features-list.sow-features-responsive,
  .so-widget-sow-features .sow-features-list.sow-features-responsive {
    gap: 16px 8px !important;
  }
  #inner-wrap .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-features-feature,
  .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-features-feature {
    width: calc(50% - 6px) !important;
  }
  #inner-wrap .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-icon-container,
  .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-icon-container {
    width: 105px !important;
    height: 105px !important;
    flex: 0 0 105px !important;
  }
  #inner-wrap .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-icon-container .sow-icon-image,
  .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-icon-container .sow-icon-image {
    width: 105px !important;
    height: 105px !important;
  }
  #inner-wrap .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-features-feature-title,
  .so-widget-sow-features .sow-features-list.sow-features-responsive .sow-features-feature-title {
    font-size: 13.5px !important;
  }
}

/* 4. Catalog cards corner brackets: hide broken brackets on mobile screens */
@media (max-width: 600px) {
  #inner-wrap .corner2,
  #wrapper .corner2,
  div.corner2,
  .corner2 {
    background: none !important;
  }
}

/* 5. Typed.js animated headline in bottom teal banner: responsive sizing and jump prevention */
@media (max-width: 768px) {
  #pg-2-8 h2 {
    font-size: 22px !important;
    line-height: 1.35 !important;
  }
  #pg-2-8 .kt_typed_element {
    font-size: 22px !important;
  }
}
@media (max-width: 480px) {
  #pg-2-8 h2 {
    font-size: 19px !important;
    line-height: 1.3 !important;
    min-height: 75px;
  }
  #pg-2-8 .kt_typed_element {
    font-size: 19px !important;
  }
}

/* 6. Carousel navigation arrows: prevent obscuring certificates and photos on touch devices */
@media (max-width: 768px) {
  .slick-prev, .slick-next {
    width: 32px !important;
    height: 32px !important;
    opacity: 0.65 !important;
  }
  .slick-prev:before, .slick-next:before {
    font-size: 18px !important;
    line-height: 32px !important;
  }
}

/* 7. Scroll-to-top button: make more compact on mobile to prevent overlapping content */
@media (max-width: 600px) {
  .kad-scroll-to-top {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 15px !important;
    right: 12px !important;
    bottom: 14px !important;
    opacity: 0.75 !important;
    border-radius: 4px !important;
  }
}