/*
 * Growmate Tanzania site styles (batch 9). Only what no Elementor control can do; everything else
 * is set in the templates and the Kit. Values come from the approved prototype (assets/css/site.css)
 * and use the Kit's variables (--e-global-color-*, --e-global-typography-*).
 * Loaded by the "Growmate site assets" block in the child theme's functions.php.
 * Author: Benson Matheka, benson.matheka@outlook.com, +254728121374
 */

/* ---------- T1: target chips on product cards, tinted in the category colour ----------
   Elementor's Post Info widget prints the terms as one line separated by commas; the commas are
   hidden (font-size 0 on the list) and each term becomes a chip. --term-accent comes from the
   "Category colour variables" block in functions.php. Q5: the first three chips only.
   The selectors go through .elementor-icon-list-item .elementor-icon-list-text: Elementor Pro 4.3.1's
   ".elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-text span { display: inline }"
   is more specific than ".product-card .chips ...", so the list and chips fell back to inline and the
   8px gap was ignored (chips touching; found 2026-11-02). */
.product-card .chips .elementor-icon-list-item .elementor-icon-list-text span.elementor-post-info__terms-list { display: flex; flex-wrap: wrap; gap: 8px 0; font-size: 0; }   /* row gap only: the hidden ", " between terms is its own (zero-width) flex item, so a column gap would count twice; chips space themselves with margin-right */
.product-card .chips .elementor-icon-list-item .elementor-icon-list-text span.elementor-post-info__terms-list-item {
  display: inline-flex; align-items: center; min-height: 28px; padding: 2px 12px; border-radius: 14px; margin-right: 8px;
  font-size: var(--e-global-typography-meta-font-size, 13px); line-height: var(--e-global-typography-meta-line-height, 1.4); font-weight: 500;
  color: var(--e-global-color-secondary);
  background: color-mix(in srgb, var(--term-accent, var(--e-global-color-primary)) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--term-accent, var(--e-global-color-primary)) 35%, #fff);
}
.product-card .chips .elementor-icon-list-item .elementor-icon-list-text span.elementor-post-info__terms-list-item:nth-child(n + 4) { display: none; }

/* ---------- T3, T9: whole card clickable, lift, photo zoom, arrow nudge ----------
   The card's title link is stretched over the whole card. Hover effects only for a mouse or
   trackpad, so touch screens never keep a stuck hover state. Zone cards never lift. */
.product-card, .cat-card { position: relative; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.product-card .elementor-image-box-title a::after,
.cat-card .elementor-image-box-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-card .elementor-image-box-img, .cat-card .elementor-image-box-img { overflow: hidden; }
.product-card .elementor-image-box-img img, .cat-card .elementor-image-box-img img { transition: transform .25s ease; }
.product-card .more .elementor-button-icon { transition: transform .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover, .cat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(36, 50, 65, .12); border-color: var(--e-global-color-fieldborder); }
  .product-card:hover .elementor-image-box-img img, .cat-card:hover .elementor-image-box-img img { transform: scale(1.03); }
  .product-card:hover .more .elementor-button-icon { transform: translateX(3px); }
}
/* Keyboard parity: a focused card lifts like a hovered one. */
.product-card:has(a:focus-visible), .cat-card:has(a:focus-visible) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(36, 50, 65, .12); }

/* ---------- T4: lone last category card centred on Home ----------
   7 cards: on 3 columns (881 to 1024 px) the last one moves to the middle column; on 2 columns
   (768 to 880 px) it is centred on its own row at one card's width. */
@media (min-width: 881px) and (max-width: 1024px) {
  #products .elementor-loop-container > .e-loop-item:last-child:nth-child(3n + 1) { grid-column: 2; }
}
@media (min-width: 768px) and (max-width: 880px) {
  #products .elementor-loop-container > .e-loop-item:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}

/* ---------- T5: hero eyebrow bar and the reply badge ---------- */
.eyebrow .elementor-heading-title { display: flex; align-items: center; gap: 12px; }
.eyebrow .elementor-heading-title::before { content: ""; flex: none; width: 32px; height: 4px; border-radius: 2px; background: var(--e-global-color-accent); }
.cx-promise .elementor-icon-list-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-weight: 600; }

/* ---------- T6: current section in the menu while scrolling Home (class set by the script) ---------- */
.e-n-menu-title-container.is-current { position: relative; color: var(--e-global-color-primary); }
.e-n-menu-title-container.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 3px; border-radius: 2px; background: var(--e-global-color-accent); }
.drawer-list a.is-current { color: var(--e-global-color-primary); }

/* ---------- T7: "About: {product}" tag above the enquiry form (built by the script) ----------
   Prefixed with the WPForms container: WPForms resets every element inside it (no background,
   border or radius), and that reset outranks a plain class. */
div.wpforms-container-full .gm-ask-tag {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 6px 6px 6px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--e-global-color-primary) 12%, #fff); border: 1px solid color-mix(in srgb, var(--e-global-color-primary) 35%, #fff);
  color: var(--e-global-color-secondary); font-size: var(--e-global-typography-small-font-size, 14px); font-weight: 500; line-height: 1.4;
}
div.wpforms-container-full .gm-ask-tag b { font-weight: 600; }
div.wpforms-container-full .gm-ask-tag button.gm-ask-remove,
div.wpforms-container-full .gm-ask-tag button.gm-ask-remove:not(:hover):not(:active) { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #fff; color: var(--e-global-color-secondary); font-size: 18px; line-height: 1; cursor: pointer; }
div.wpforms-container-full .gm-ask-tag button.gm-ask-remove:focus-visible { outline: 3px solid var(--e-global-color-primary); outline-offset: 2px; }

/* ---------- Reduced motion: no lifts, zooms or smooth effects ---------- */
@media (prefers-reduced-motion: reduce) {
  .product-card, .cat-card, .product-card *, .cat-card * { transition: none !important; }
  .product-card, .cat-card, .product-card:hover, .cat-card:hover, .product-card .elementor-image-box-img img, .cat-card .elementor-image-box-img img { transform: none !important; }
}