/* ==========================================================================
   kayem-feedback-home.css — home page + header client-feedback pass (Sep 2026)
   Loaded after kayem-site.css and kayem-mobile-pages.css.
   Sheet rows addressed here: 11, 12, 13, 14, 15. Rows 8 and 9 are Elementor
   settings on post 12 (hero background + H1 colour), not CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   [15] "Our Family of Brands" — the hover flag that covered the whole logo is
   gone (post 12 page CSS). Each of the four flagship cards now has a real
   Heading widget ("Learn More", class kayem-brand-link) under the logo, drawn
   with the same blue swoop underline as "Here to Serve".
   -------------------------------------------------------------------------- */
.kayem-brand-link {
  margin-top: 14px;
}

.kayem-brand-link .elementor-heading-title {
  line-height: 1.05;
  transition: opacity 0.25s ease;
}

/* The blue swoop is drawn by CSS, so the Heading widget's Title field stays
   plain editable text ("Learn More") — no markup for the client to preserve. */
.kayem-brand-link .elementor-heading-title {
  display: inline-block;
  margin-bottom: 4px;
  position: relative;
}

.kayem-brand-link .elementor-heading-title::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 40' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12 C78 22 220 22 298 10 L298 27 C215 34 83 34 2 25 Z' fill='%233d86d9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  bottom: -0.21em;
  content: "";
  height: 0.37em;
  left: 0.02em;
  position: absolute;
  right: -0.04em;
}

/* The four flagship logos are different heights, so bottom-align the links:
   logo centres in the space it has, "Learn More" sits on a common baseline. */
.elementor-element.elementor-element-18974ef {
  align-items: stretch !important;
}

.brand-hover-flag {
  display: flex;
  flex-direction: column;
}

.brand-hover-flag > .elementor-widget-image {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
}

.brand-hover-flag > .elementor-widget-image > .elementor-widget-container {
  width: 100%;
}

.brand-hover-flag > .kayem-brand-link {
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   [13] Product carousel — the cards paint their photo as a CSS background, so
   keep it sharp and never let a small file stretch past its own pixels.
   -------------------------------------------------------------------------- */
.kayem-pc__card-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: auto;
}

/* ==========================================================================
   PHONE
   ========================================================================== */
@media (max-width: 767px) {

  /* ------------------------------------------------------------------------
     [8] Hero texture: the section itself is transparent on phones (the panel
     carries the texture), so silence the new Elementor background overlay
     here — otherwise it tints the photo band.
     ---------------------------------------------------------------------- */
  body.kayem-homepage .elementor-element.elementor-element-f9e091e::before {
    background-image: none !important;
    opacity: 0 !important;
  }

  /* ------------------------------------------------------------------------
     [11] Clean edge where the paper meets the image — was a 22px rounded top.
     [12] Deeper paper panel so the Chelsea stamp has somewhere to sit.
     [8]  Same cream + line-art illustration texture as the desktop hero and
          the Products page headers (kraft-paper.webp retired here).
     ---------------------------------------------------------------------- */
  body.kayem-homepage .elementor-element.elementor-element-7a81111 {
    background-color: #FEFBF7 !important;
    background-image:
      linear-gradient(rgba(254, 251, 247, 0.85), rgba(254, 251, 247, 0.85)),
      url("/wp-content/uploads/2026/04/quote-illustration.webp") !important;
    background-position: 0 0, 0 0 !important;
    background-repeat: repeat, repeat !important;
    background-size: auto, auto !important;
    border-radius: 0 !important;
    margin: -40px 0 0 !important;
    padding: 66px var(--km-gutter) 44px !important;
  }

  /* ------------------------------------------------------------------------
     [12] Chelsea stamp: was hidden on phones. Bring it back straddling the
     photo/paper seam at the right, the way it straddles the kraft edge on
     desktop and the photo corner on tablet. It clears the headline (the panel
     gained top padding above) and sits well clear of the button.
     ---------------------------------------------------------------------- */
  body.kayem-homepage .elementor-element.elementor-element-d22ff1b {
    position: relative !important;
    /* z-index:1 here made the photo column its own stacking context and trapped
       the stamp underneath the paper panel (z-index:2). */
    z-index: auto !important;
  }

  body.kayem-homepage .elementor-element.elementor-element-2114875 {
    bottom: -22px !important;
    display: block !important;
    left: auto !important;
    right: 18px !important;
    top: auto !important;
    transform: none !important;
    width: 80px !important;
    z-index: 4;
  }

  body.kayem-homepage .elementor-element.elementor-element-2114875 .elementor-widget-container,
  body.kayem-homepage .elementor-element.elementor-element-2114875 figure,
  body.kayem-homepage .elementor-element.elementor-element-2114875 .elementor-image {
    margin: 0 !important;
  }

  body.kayem-homepage .elementor-element.elementor-element-2114875 img {
    display: block;
    height: 80px !important;
    max-width: 80px !important;
    object-fit: contain;
    width: 80px !important;
  }

  /* ------------------------------------------------------------------------
     [14] Product carousel order on phones.
     The widget's own script clones the last cards and prepends them so the
     desktop slider can loop. On phones the slider is replaced by a native
     swipe rail, which shows those prepended clones first — so the rail opened
     on the END of the list and read backwards. Hide every clone; the rail now
     shows the real cards in the order set in Elementor.
     ---------------------------------------------------------------------- */
  body.kayem-homepage .kayem-pc__track > .kayem-pc__card[aria-hidden="true"] {
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     [15] Brand cards on phones — the "Learn More" link, tight under the logo.
     ---------------------------------------------------------------------- */
  body.kayem-homepage .elementor-element.elementor-element-18974ef .kayem-brand-link {
    margin-top: 8px;
  }

  body.kayem-homepage .elementor-element.elementor-element-18974ef .kayem-brand-link .elementor-heading-title {
    font-size: 13px !important;
  }
}

/* ==========================================================================
   TABLET
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* [8][12] Chelsea stamp: it used to sit on the busy photo corner, which was
     already hard to read and got harder once the band behind it went cream.
     Move it to the photo's left edge so it straddles paper and photo the way
     it does on desktop; it still clears the SEARCH PRODUCTS button. */
  body.kayem-homepage .elementor-element.elementor-element-2114875 {
    bottom: -22px !important;
    left: -46px !important;
    right: auto !important;
  }

  /* [15] Slightly tighter link under the logo at tablet widths. */
  body.kayem-homepage .elementor-element.elementor-element-18974ef .kayem-brand-link {
    margin-top: 10px;
  }
}