/* =========================================================
   Custom mobile + perf overrides on top of the Agrios theme.
   Goals: don't break the theme's own responsive behavior.
   ========================================================= */

/* 1. Stop accidental horizontal overflow */
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }

/* 2. Desktop: make sure sub-menus on the main nav are visible on hover.
      The theme relies on jQuery + CSS; if anything intercepts, this is a fallback. */
.agrios-menu .menu > li.menu-item-has-children { position: relative; }
.agrios-menu .menu > li.menu-item-has-children > .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  padding: 10px 0;
  margin: 0;
  list-style: none;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
}
.agrios-menu .menu > li.menu-item-has-children:hover > .sub-menu,
.agrios-menu .menu > li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.agrios-menu .sub-menu li { list-style: none; }
.agrios-menu .sub-menu li a {
  display: block;
  padding: 8px 18px;
  white-space: nowrap;
  color: #333;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.agrios-menu .sub-menu li a:hover {
  background: #f5f7f3;
  color: #4baf47;
}
/* Top-level items that are pure dropdown triggers (no href) should look clickable */
.agrios-menu .menu > li.menu-item-has-children > a { cursor: pointer; }

/* 3. Hamburger / mobile menu panel.
      Theme already styles .menu-panel-overlay and .menu-panel-wrap as fixed-positioned;
      do NOT touch the .agrios-menu-panel wrapper (it is just an inline layout element). */
.agrios-menu-panel .menu-panel-overlay { z-index: 999998; pointer-events: auto; }
.agrios-menu-panel .menu-panel-wrap    { z-index: 999999; pointer-events: auto; }
.agrios-menu-panel .menu-panel-wrap a,
.agrios-menu-panel .menu-panel-wrap .arrow,
.agrios-menu-panel .menu-panel-wrap .close-menu { pointer-events: auto; cursor: pointer; }
/* Theme handles all internal styling for the mobile menu panel.
   Just ensure the scroll-lock class works and the hamburger icon is interactive. */
html.disable-scroll, html.disable-scroll body { overflow: hidden !important; }
.agrios-hamburger-icon { cursor: pointer; }
.agrios-hamburger-icon.hide { opacity: 0; pointer-events: none; }

/* 4. Tablet & down — generic overflow / typography easing */
@media (max-width: 1024px) {
  .elementor-heading-title { word-wrap: break-word; }
  h1 { font-size: clamp(28px, 6vw, 56px); line-height: 1.15; }
  h2 { font-size: clamp(24px, 5vw, 42px); line-height: 1.2; }
  h3 { font-size: clamp(20px, 4vw, 32px); }
}

/* 5. Mobile (≤768px) */
@media (max-width: 768px) {
  /* Inputs comfy + no iOS zoom */
  input[type="text"], input[type="email"], input[type="search"], input[type="tel"],
  input[type="number"], input[type="password"], textarea, select {
    font-size: 16px !important;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* Buttons bigger touch targets */
  .elementor-button, .button, .wp-block-button__link, button[type="submit"] {
    min-height: 44px;
  }

  /* Avoid fixed-attach jank */
  [style*="background-attachment: fixed"] {
    background-attachment: scroll !important;
  }

  /* Tables get horizontal scroll instead of overflowing */
  table { display: block; overflow-x: auto; max-width: 100%; }

  /* Footer columns stack */
  .site-footer .elementor-column,
  footer .elementor-column { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
}

/* 6. Phones (≤480px) */
@media (max-width: 480px) {
  h1 { font-size: clamp(24px, 7vw, 36px); }
  ul.products li.product { width: 100% !important; margin-right: 0 !important; }
}

/* 7. Honour reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}