/**
 * Garden Theme — Linguise Compatibility Layer
 *
 * WHY THIS FILE EXISTS:
 * Linguise translates pages by proxying the full HTML through its cloud servers.
 * During this process it wraps translated text nodes in <span> elements.
 * This breaks:
 *   1. CSS child/sibling selectors like `.menu-item > a` (span now sits between)
 *   2. :nth-child(), :last-child, :first-child pseudo-selectors (span shifts counts)
 *   3. CSS that targets specific tag types directly inside containers
 *   4. :empty checks (Linguise may inject whitespace or span nodes)
 *   5. display:contents layouts where span wrappers override the rendering
 *
 * STRATEGY: Every fragile selector below is duplicated to also match when a
 * <span class="notranslate"> or similar wrapper appears between the elements.
 * We also add blanket translate="no" protection directly in PHP where needed.
 *
 * @package Garden
 */

/* ============================================================
   1. NAVIGATION — .sh-nav .menu-item > a
      Linguise injects spans between .menu-item and its <a>,
      turning "menu-item > a" into "menu-item > span > a"
   ============================================================ */

/* Desktop nav links */
.sh-nav .menu-item > a,
.sh-nav .menu-item > span > a,
.sh-nav .menu-item > span.notranslate > a {
  font-size: 14px;
  font-weight: 500;
  color: var(--tx2);
  padding: 6px 10px;
  border-radius: 6px;
  transition: color .15s, background .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.sh-nav .menu-item > a:hover,
.sh-nav .menu-item > span > a:hover,
.sh-nav .menu-item > span.notranslate > a:hover {
  background: var(--bg-el);
  color: var(--c-p500);
}

/* Current menu item underline indicator */
.sh-nav .current-menu-item > a,
.sh-nav .current-menu-item > span > a {
  color: var(--c-p500);
}

/* Dropdown caret on parent nav items */
.sh-nav .menu-item-has-children > a,
.sh-nav .menu-item-has-children > span > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sh-nav .menu-item-has-children > a::before,
.sh-nav .menu-item-has-children > span > a::before {
  content: '';
  order: 99;
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
}

/* Mobile nav: last item no border */
.sh-nav.is-open .sh-nav-list .menu-item:last-child > a,
.sh-nav.is-open .sh-nav-list .menu-item:last-child > span > a { border-bottom: none; }

/* Mobile nav link styles */
.sh-nav.is-open .sh-nav-list .menu-item > a,
.sh-nav.is-open .sh-nav-list .menu-item > span > a {
  display: block;
  font-size: 16px;
  font-weight: 500;
  padding: 14px 20px;
  border-bottom: 1px solid var(--bdr);
  color: var(--tx);
  border-radius: 0;
  transition: background .15s;
  min-height: 44px;
}

.sh-nav.is-open .sh-nav-list .menu-item > a:hover,
.sh-nav.is-open .sh-nav-list .menu-item > span > a:hover,
.sh-nav.is-open .sh-nav-list .menu-item > a:active,
.sh-nav.is-open .sh-nav-list .menu-item > span > a:active { background: var(--c-n100); }

.sh-nav.is-open .menu-item-has-children > a::before,
.sh-nav.is-open .menu-item-has-children > span > a::before { display: none; }

/* Sub-menu: last item */
.sh-nav.is-open .sub-menu li:last-child a,
.sh-nav.is-open .sub-menu li:last-child span > a { border-bottom: none; }

/* ============================================================
   2. LAYOUT — .site-main > p:empty / > p > br:only-child
      Linguise may inject a span inside the empty <p>,
      making :empty no longer match. Use min-height:0 fallback.
   ============================================================ */

/* Original rule kept, plus span-injection variant */
.site-main > p:empty,
.site-main > p:not(:has(*:not(span:empty))):has(span:empty) { display: none; }

/* When Linguise wraps the br inside a span, br:only-child fails.
   Use a max-height collapse to prevent extra spacing. */
.site-main > p > br:only-child,
.site-main > p > span:only-child > br:only-child { display: none; }

/* ============================================================
   3. CHECKOUT — .woocommerce-notices-wrapper:empty
      Linguise may deposit whitespace text nodes or empty spans
      inside the notices wrapper, preventing :empty from matching
   ============================================================ */
.woocommerce-checkout .woocommerce-notices-wrapper:empty,
.woocommerce-checkout .woocommerce-notices-wrapper:not(:has(.woocommerce-error, .woocommerce-message, .woocommerce-info)) { display: none; }

/* ============================================================
   4. CHECKOUT — .chk-before-form > *
      Linguise may wrap children; re-assert grid-column
   ============================================================ */
.chk-before-form > *,
.chk-before-form > span > * { grid-column: 1; }

/* ============================================================
   5. CHECKOUT STEPS — .pg-step > span:last-child (mobile hide)
      On mobile step indicators the last <span> inside .pg-step is
      the step label. Linguise wraps it, shifting :last-child.
   ============================================================ */
@media (max-width: 600px) {
  /* Hide any span that is last, even if Linguise pushed the real last further */
  .chk-steps .pg-step > span:last-child,
  .chk-steps .pg-step > span:last-of-type { display: none; }
}

/* ============================================================
   6. BULK DISCOUNT STRIP — Linguise protection
      Button has translate="no" so Linguise cannot inject spans.
      Belt-and-suspenders: ensure row containers stay flex
      even if Linguise somehow wraps them.
   ============================================================ */
.bulk-discount-strip__top-row,
.bulk-discount-strip__bot-row { display:flex !important; align-items:center; }
/* Ensure icon color is never overridden by Linguise span inheritance */
.bulk-discount-strip__unit-icon { color:var(--tx2) !important; }
.bulk-discount-strip__pct { color:var(--c-a500) !important; }

/* ============================================================
   7. ACCOUNT — :last-child / :nth-child selectors
      Linguise can shift these by injecting spans into rows
   ============================================================ */

/* Ensure last order row still loses its bottom border */
.acc-section:last-child,
.acc-section:last-of-type { margin-bottom: 0; }

.acc-orders-row:last-child,
.acc-orders-row:last-of-type { border-bottom: none; }

/* View-order items — nth-child selectors */
.vo-items-hdr span:nth-child(2),
.vo-items-hdr .vo-col-qty { text-align: center; }

.vo-items-hdr span:nth-child(3),
.vo-items-hdr .vo-col-total { text-align: right; }

.vo-items-row:last-child,
.vo-items-row:last-of-type { border-bottom: none; }

/* ============================================================
   8. AUTH — last list item
   ============================================================ */
.auth-benefits li:last-child,
.auth-benefits li:last-of-type { margin-bottom: 0; }

/* ============================================================
   9. BLOG / SINGLE — blockquote last paragraph
   ============================================================ */
.blog-single-content blockquote p:last-child,
.blog-single-content blockquote p:last-of-type { margin-bottom: 0; }

/* ============================================================
   10. MINI-CART / CART LINES — :last-child
   ============================================================ */
.mc-line:last-child,
.mc-line:last-of-type { border-bottom: none; }

.cart-aside-row:last-child,
.cart-aside-row:last-of-type { border-bottom: none; }

.cart-mobile-items .mc-line:last-child,
.cart-mobile-items .mc-line:last-of-type { border-bottom: none; }

/* ============================================================
   11. FAQ — :last-child
   ============================================================ */
.faq-item:last-child,
.faq-item:last-of-type { border-bottom: none; }

/* ============================================================
   12. CONTACT — :last-child in cards
   ============================================================ */
.contact-card-hour span:last-child,
.contact-card-hour span:last-of-type { color: rgba(255,255,255,.35); }

.contact-card-notice p:last-child,
.contact-card-notice p:last-of-type { margin-bottom: 0; }

/* ============================================================
   13. HERO OVERLINE — ::before pseudo not affected by Linguise
      but the em inside .hero-h can be wrapped.
      Re-assert italic color for translated em.
   ============================================================ */
.hero-h em,
.hero-h span > em,
.hero-h .notranslate > em { color: var(--c-a400); font-style: italic; }

/* ============================================================
   14. SECTION TITLES — em color re-assertion for all translated headings
   ============================================================ */
.sec-title em,
.sec-title span > em { color: var(--c-p500); font-style: italic; }

.sec-title--inv em,
.sec-title--inv span > em { color: var(--c-a400); }

/* ============================================================
   15. PRODUCT CARD — "Lees meer" toggle btn text protected via JS,
      but if Linguise translates "Minder tonen" incorrectly the
      button still needs to function. No CSS fix needed, handled in JS.

   16. STAR ICONS — Font Awesome icons use ligature/Unicode font
      rendering, NOT text nodes, so they survive translation intact.
      No fix needed.

   17. WOOCOMMERCE NOTICES WRAPPER — already covered in item 3.

   18. BADGE COLOR VALUES — all badge colors come from CSS classes
      (.b-sale, .b-new etc.) not from translated text values.
      No fix needed.
   ============================================================ */

/* ============================================================
   19. LINGUISE LANGUAGE SWITCHER in footer — ensure it renders
      inline even if Linguise's own widget wrapper changes display
   ============================================================ */
.ft-translate > * { display: inline-flex; align-items: center; }
.ft-translate .ls-flag-wrapper,
.ft-translate .linguise-flag-select { display: inline-flex !important; }

/* ============================================================
   20. PREVENT FONT AWESOME ICON CONTENT BEING TRANSLATED
      Font Awesome uses the CSS ::before pseudo-element with
      Unicode content. These are already safe. But if any theme
      outputs icon text inside the element (instead of ::before),
      protect those with display:none text nodes.
   ============================================================ */
.fa-solid, .fa-regular, .fa-brands,
[class^="fa-"], [class*=" fa-"] { speak: never; }

/* ============================================================
   21. QUANTITY STEPPER — .js-qty-val span is read by JS
      using .textContent — protect it from Linguise wrapping
      by ensuring only direct numeric text matters.
      The translate="no" attribute is added in PHP (see functions.php patch).
      This CSS just prevents layout issues.
   ============================================================ */
.js-qty-val { font-variant-numeric: tabular-nums; }

/* ============================================================
   22. ANNOUNCEMENT BAR — ensure spans don't break centering
   ============================================================ */
.ann > span { display: inline; }
.ann span[class=""], .ann span:not([class]) { display: inline; }

/* ============================================================
   23. WOOCOMMERCE LOGIN FORM — :first-of-type vs :first-child
   ============================================================ */
.woocommerce-checkout .woocommerce-form-login p:first-of-type {
  font-size: 13px;
  color: var(--txm);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* ============================================================
   24. ACCOUNT EDIT FORM — direct child selectors that Linguise breaks
   ============================================================ */
.acc-content .edit-account .form-row-first,
.acc-content .edit-account > .form-row-first,
.acc-content .edit-account > span > .form-row-first { grid-column: 1; }

.acc-content .edit-account .form-row-last,
.acc-content .edit-account > .form-row-last,
.acc-content .edit-account > span > .form-row-last { grid-column: 2; }

.acc-content .edit-account .form-row-wide,
.acc-content .edit-account > .form-row-wide,
.acc-content .edit-account > span > .form-row-wide,
.acc-content .edit-account fieldset,
.acc-content .edit-account > fieldset,
.acc-content .edit-account > .clear,
.acc-content .edit-account > p:last-of-type { grid-column: 1 / -1; }

/* ============================================================
   25. ACCOUNT CONTENT — direct paragraph styling
   ============================================================ */
.acc-content p,
.acc-content > p { margin-bottom: 20px; font-size: 14px; color: var(--txm); }


/* ============================================================
   26. REVIEW GRID — Linguise wraps .rv-dark in extra spans,
       making spans the grid children instead of the cards.
       Force any direct child of .rev-g4 to behave as a grid
       item, and ensure .rv-dark always fills its cell fully.
   ============================================================ */
/* Linguise wraps rv-dark cards in spans — target only those span wrappers */
.rev-g4 > span { display: contents; }
.rev-g4 .rv-dark {
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  /* Ensure it still fills the grid cell properly */
  overflow: hidden;
}

/* ============================================================
   27. REVIEW NAME ROW — Linguise can reorder flex children
       when injecting wrapper spans. Enforce name-first,
       badge-second via explicit CSS order, !important.
   ============================================================ */
.rv-name-row { display: flex !important; align-items: center; flex-wrap: wrap; }
.rv-name-row .rv-name  { order: 1 !important; }
.rv-name-row .rv-ver   { order: 2 !important; }

/* ============================================================
   28. ACCOUNT ORDERS TABLE — now uses <table> element,
       no grid-column fixes needed. Keep price protection only.
   ============================================================ */
.acc-orders-row .woocommerce-Price-amount { white-space: nowrap; }

/* ============================================================
   29. VO-TOTALS (order view / thank-you) — Shipping row
       wc_price() output includes <small class="shipped_via">
       Linguise splits price and label. Protect the price
       amount from reflow while allowing the via-label to translate.
   ============================================================ */
.vo-totals-value { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
/* Protect entire price block and the bdi inside it from Linguise splitting € from amount */
.vo-totals-value .woocommerce-Price-amount { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: baseline; }
.vo-totals-value .woocommerce-Price-amount bdi { white-space: nowrap; display: inline; }
.vo-totals-value .woocommerce-Price-currencySymbol { white-space: nowrap; }
.vo-totals-value .shipped_via { white-space: normal; }
/* Apply same protection globally for all price amounts site-wide */
.woocommerce-Price-amount.amount { white-space: nowrap; }
.woocommerce-Price-amount bdi { white-space: nowrap; }

/* ============================================================
   30. ACCOUNT NAV — user name and initials should not translate
   ============================================================ */
.acc-nav-av,
.acc-nav-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   31. ACCOUNT LAYOUT — Linguise wraps acc-nav and acc-content
       in extra spans, breaking the acc-wrap 2-col grid.
       display:contents makes the wrappers transparent so
       acc-nav and acc-content become the actual grid items.
   ============================================================ */
/* Linguise injects a <span> wrapper around acc-nav and acc-content.
   Target only span children (Linguise wrappers), NOT the nav/div themselves.
   This leaves the non-translated DOM completely untouched. */
.acc-wrap > span { display: contents; }