/*
 * Mobile fixes for the mirrored WordPress/Elementor pages.
 * Loaded on every mirrored view via app/views/shared/_mobile_fixes.html.erb.
 * The bulk is scoped to <= 767px; one block covers the 768-1024px tablet band.
 * Desktop (>= 1025px) rendering is untouched.
 */

@media (max-width: 767px) {

  /* --- Mobile navigation -------------------------------------------------
     Elementor's own JS never binds the toggle in the mirror, so mobile-nav.js
     drives the .elementor-active class. These rules turn the narrow inline
     dropdown into a full-width panel under the header. */

  .elementor-menu-toggle {
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
  }

  .elementor-menu-toggle:focus-visible {
    outline: 2px solid #2E368F;
    outline-offset: 2px;
  }

  /* Panel geometry (position/size) is written inline by mobile-nav.js, which
     is the only way to outrank the mirrored closed-state rule. These are the
     cosmetics for the open panel. */
  .elementor-nav-menu__container.vcl-nav-panel {
    background: #fff;
    box-shadow: 0 14px 30px -12px rgba(15, 23, 42, .35);
    border-top: 1px solid rgba(15, 23, 42, .08);
    -webkit-overflow-scrolling: touch;
  }

  /* Dropdown typography is sized for desktop in the mirror (28px). */
  .elementor-nav-menu--dropdown .elementor-nav-menu > li > a,
  .elementor-nav-menu--dropdown .elementor-item {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 12px 22px !important;
    font-size: 1.0625rem !important;
    line-height: 1.3;
    color: #1e293b !important;
    background-color: transparent !important;
  }

  .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    color: #2E368F !important;
    background-color: rgba(46, 54, 143, .07) !important;
    box-shadow: inset 3px 0 0 #2E368F;
    font-weight: 600;
  }

  .elementor-nav-menu--dropdown .elementor-nav-menu > li + li {
    border-top: 1px solid rgba(15, 23, 42, .07);
  }

  /* Backdrop behind the open panel */
  .vcl-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    z-index: 9997;
  }

  /* The mirrored sticky header sits at z-index 95, so the backdrop was painted
     over it: the logo and the close (X) came out dimmed, and a tap on the X hit
     the backdrop rather than the toggle. Lift the header above both while the
     panel is open — they do not overlap, the panel starts at the header's
     bottom edge. */
  body.vcl-nav-open .elementor-location-header header {
    z-index: 9999 !important;
  }

  body.vcl-nav-open {
    overflow: hidden;
  }

  /* --- Header logo -------------------------------------------------------
     The mirror sizes the logo `width: 489px; height: 36px; object-fit: cover`
     below 768px. 489px is clamped to the 50%-wide logo container (141px at a
     320px viewport) but the height stays 36px, so the box is narrower than the
     artwork's 4.32:1 and `cover` crops it — the final "E" of "CARE LINE" is
     cut off. Size from the height instead and let the container fit the mark. */

  .elementor-location-header .elementor-widget-theme-site-logo img {
    width: auto !important;
    height: 36px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  /* The mirror gives the logo and the menu containers a hard 50% each, which
     is what clamps the mark on narrow phones. Size both to their contents and
     split them apart instead, so a 155px logo and the burger always share one
     row (at 50% + 50% they wrapped onto two rows below ~340px).
     !important throughout: the mirrored rules carry an extra class and would
     otherwise win on specificity. */
  .elementor-location-header .elementor-element-78b6f594,
  .elementor-location-header .elementor-element-ae02e4d {
    --width: auto !important;
  }

  .elementor-location-header .elementor-element-1642016 {
    --justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  /* --- Home hero ---------------------------------------------------------
     The mirrored mobile rules pin the photo to the top of the hero, so the
     headline and sub-headline land on top of the animals. Drop the photo to
     the bottom of the section and give the copy room above it.

     Height comes from the photo rather than the viewport: the background is
     112% wide on a 1024x492 image, so it renders 112 / 2.081 = 54vw tall.
     Reserving that plus a 24px gap as bottom padding tucks the photo under the
     copy instead of leaving ~190px of white between them (60vh was too tall). */

  .elementor-266 .elementor-element.elementor-element-7de84813 {
    --min-height: 0px;
    --padding-top: 8%;
    --padding-bottom: calc(54vw + 24px);
  }

  .elementor-266 .elementor-element.elementor-element-7de84813:not(.elementor-motion-effects-element-type-background),
  .elementor-266 .elementor-element.elementor-element-7de84813 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-position: center bottom !important;
    background-size: 112% auto !important;
    background-repeat: no-repeat !important;
  }

  /* --- Body copy ---------------------------------------------------------
     Justified text on a ~330px measure opens rivers between words. */

  .elementor-widget-text-editor,
  .elementor-widget-text-editor p,
  .elementor-widget-theme-post-content p,
  .elementor-widget-heading + .elementor-widget-text-editor p {
    text-align: left !important;
    hyphens: auto;
  }

  /* --- Product grid ------------------------------------------------------
     The archive drops to one card per row on mobile, which makes 20 products
     a 9,500px scroll. Two up halves it and keeps the cards legible. */

  ul.products.elementor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  ul.products.elementor-grid li.product {
    width: auto !important;
    margin: 0 !important;
  }

  /* --- Tap targets -------------------------------------------------------
     Footer and utility links render ~21px tall; below the 44px minimum. */

  footer .elementor-widget-container ul li a,
  .elementor-widget-icon-list .elementor-icon-list-item > a,
  .elementor-icon-box-title a,
  .woocommerce-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Footer social icons are 18px squares. Grow the hit area with a centred
     pseudo-element rather than the box itself: they sit in a 3-column grid
     that wraps to two rows as soon as the anchors get wider. */
  .elementor-social-icon {
    position: relative;
  }

  .elementor-social-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* The halo on the outermost icon would otherwise widen the page by a few
     pixels; clip it sideways only, so the vertical hit area survives. */
  .elementor-social-icons-wrapper {
    overflow-x: clip;
    overflow-y: visible;
  }

  /* The icon-box icon link is on its own row, so it can just grow. */
  .elementor-icon-box-icon > a.elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* --- Tablet: Learn card row ----------------------------------------------
   Phones stack the four Learn cards and desktop has room for four across,
   but between 768px and 1024px the mirror keeps them on one nowrap row with
   a 90px gap: each card ends up ~105px wide and the titles spill out of the
   page (107px of sideways scroll at 768px). Wrap to two up instead. */

@media (min-width: 768px) and (max-width: 1024px) {

  .elementor-element-1391bb4a {
    flex-wrap: wrap !important;
    gap: 40px !important;
  }

  /* These children are widgets, not containers, so their width comes from
     Elementor's widget sizing rather than --width. Set it outright. */
  .elementor-element-1391bb4a > .elementor-element {
    width: calc(50% - 20px) !important;
    flex: 0 0 auto !important;
  }
}