/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/
/* ==========================================================================
   Bee Master — brand layer
   Loads after woodmart-style. Yellow/black identity, tri-lingual typography.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  --bm-yellow:        #FFE000;
  --bm-yellow-hover:  #E6CA00;
  --bm-black:         #111111;
  --bm-black-soft:    #2A2A28;
  --bm-bg:            #FAFAF7;
  --bm-grey:          #EFEFEA;
  --bm-border:        #E0E0DA;
  --bm-muted:         #6E6E68;
  --bm-cert:          #1E7A3C;
  --bm-wa:            #25D366;
  --bm-wa-hover:      #1FB855;

  --bm-radius:        2px;
  --bm-gap:           clamp(1rem, 3vw, 2rem);

  /* Overridden per language below. */
  --bm-font-body:     "IBM Plex Sans Arabic", system-ui, sans-serif;
  --bm-font-display:  "IBM Plex Sans Arabic", system-ui, sans-serif;
  --bm-line:          1.85;
  --bm-tracking:      0;
}

/* --------------------------------------------------------------------------
   2. Typography per language

   Arabic and Kurdish Sorani share the Arabic script, but Sorani adds
   ڕ ڵ ۆ ێ — many Arabic webfonts omit these and render blank boxes.
   IBM Plex Sans Arabic covers them. Verify a full Kurdish page on mobile
   before sign-off.

   Arabic script needs a taller line-height than Latin, and letter-spacing
   must never be applied — it breaks the cursive joins.
   -------------------------------------------------------------------------- */

.bm-lang-ar,
.bm-lang-ckb {
  --bm-font-body:    "IBM Plex Sans Arabic", system-ui, sans-serif;
  --bm-font-display: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --bm-line:         1.9;
  --bm-tracking:     0;
}

.bm-lang-en {
  --bm-font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --bm-font-display: "IBM Plex Sans", system-ui, sans-serif;
  --bm-line:         1.65;
  --bm-tracking:     -0.01em;
}

body,
body.bm-lang-ar,
body.bm-lang-ckb,
body.bm-lang-en {
  font-family: var(--bm-font-body);
  line-height: var(--bm-line);
  color: var(--bm-black-soft);
  background: var(--bm-bg);
}

h1, h2, h3, h4, h5, h6,
.woodmart-title-container .title {
  font-family: var(--bm-font-display);
  color: var(--bm-black);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--bm-tracking);
}

/* Never letter-space Arabic script. */
.bm-lang-ar h1, .bm-lang-ar h2, .bm-lang-ar h3,
.bm-lang-ckb h1, .bm-lang-ckb h2, .bm-lang-ckb h3 {
  letter-spacing: 0 !important;
}

/* Arabic script sits lower in the em box; nudge headings optically. */
.bm-lang-ar h1, .bm-lang-ckb h1 { line-height: 1.45; }
.bm-lang-ar h2, .bm-lang-ckb h2 { line-height: 1.5; }

/* Numerals stay Western in all three languages for spec sheets and phone
   numbers. Remove this if the client wants Eastern Arabic numerals. */
.bm-num, .bm-stat-value, .woocommerce-Price-amount {
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
  direction: ltr;
  unicode-bidi: embed;
}

/* Phone numbers and emails must stay LTR inside RTL paragraphs. */
.bm-ltr-inline,
a[href^="tel:"],
a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}


/* --------------------------------------------------------------------------
   3. Buttons

   Black is the primary action colour, not yellow — yellow is reserved for
   accents and one CTA section, so it keeps its impact.
   Never white text on yellow: contrast is 1.4:1 and fails WCAG.
   -------------------------------------------------------------------------- */

.bm-btn,
.woodmart-button,
.btn.btn-color-primary {
  font-family: var(--bm-font-body);
  font-weight: 700;
  border-radius: var(--bm-radius);
  letter-spacing: 0;
  transition: background-color .18s ease, color .18s ease;
}

.bm-btn-primary {
  background: var(--bm-black);
  color: #fff;
  padding: .9em 2em;
  display: inline-block;
  border: 2px solid var(--bm-black);
}
.bm-btn-primary:hover,
.bm-btn-primary:focus-visible {
  background: var(--bm-yellow);
  border-color: var(--bm-yellow);
  color: var(--bm-black);
}

.bm-btn-outline {
  background: transparent;
  color: var(--bm-black);
  border: 2px solid var(--bm-black);
  padding: .9em 2em;
  display: inline-block;
}
.bm-btn-outline:hover { background: var(--bm-black); color: #fff; }

/* Inside a yellow section, actions flip to black. */
.bm-section-yellow .bm-btn-primary {
  background: var(--bm-black);
  border-color: var(--bm-black);
  color: #fff;
}
.bm-section-yellow .bm-btn-primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--bm-black);
}


/* --------------------------------------------------------------------------
   4. WhatsApp buttons

   Logical properties (margin-inline / padding-inline) instead of left/right,
   so RTL and LTR both work without a separate stylesheet.
   -------------------------------------------------------------------------- */

.bm-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  background: var(--bm-wa);
  color: #fff !important;
  font-weight: 700;
  border-radius: var(--bm-radius);
  padding-block: .75em;
  padding-inline: 1.5em;
  text-decoration: none;
  transition: background-color .18s ease;
}
.bm-wa-btn:hover,
.bm-wa-btn:focus-visible {
  background: var(--bm-wa-hover);
  color: #fff !important;
}

.bm-wa-icon { flex-shrink: 0; }

/* The icon is a directional glyph — mirror it in RTL so the tail matches. */
.bm-rtl .bm-wa-icon { transform: scaleX(-1); }

.bm-wa-btn--loop {
  width: 100%;
  margin-block-start: .75rem;
  font-size: .9rem;
}

.bm-wa-btn--single {
  width: 100%;
  max-width: 340px;
  padding-block: 1em;
  font-size: 1rem;
}
.bm-wa-single { margin-block: 1.5rem; }

.bm-wa-btn--cta {
  padding-block: 1em;
  padding-inline: 2.25em;
  font-size: 1.05rem;
}

/* Floating button — inset-inline-end flips automatically per direction. */
.bm-wa-float {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  z-index: 380;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--bm-wa);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
  transition: transform .2s ease, background-color .18s ease;
}
.bm-wa-float:hover { background: var(--bm-wa-hover); transform: scale(1.07); }
.bm-wa-float .bm-wa-icon { width: 26px; height: 26px; }

/* Clear WoodMart's mobile bottom navbar if it is ever re-enabled. */
@media (max-width: 768px) {
  .bm-wa-float { inset-block-end: 16px; inset-inline-end: 16px; }
  body.wd-mobile-navbar-active .bm-wa-float { inset-block-end: 76px; }
}


/* --------------------------------------------------------------------------
   5. Catalog mode cleanup
   -------------------------------------------------------------------------- */

.price,
.woocommerce-Price-amount,
.wd-product .price,
.summary .price,
.star-rating,
.woocommerce-product-rating,
.wd-buttons .wd-action-btn.wd-add-cart-btn,
.wd-buttons .wd-wishlist-btn,
.wd-buttons .wd-compare-btn,
.woodmart-wishlist-info-widget,
.woodmart-compare-info-widget,
.wd-header-cart,
.wd-header-my-account {
  display: none !important;
}


/* --------------------------------------------------------------------------
   6. Sections
   -------------------------------------------------------------------------- */

.bm-section-yellow {
  background: var(--bm-yellow);
  color: var(--bm-black);
}
.bm-section-yellow h1,
.bm-section-yellow h2,
.bm-section-yellow h3,
.bm-section-yellow p { color: var(--bm-black); }

.bm-section-dark {
  background: var(--bm-black);
  color: #fff;
}
.bm-section-dark h1,
.bm-section-dark h2,
.bm-section-dark h3 { color: #fff; }
.bm-section-dark p { color: rgba(255, 255, 255, .78); }
/* One word in the heading may be yellow — no more. */
.bm-section-dark .bm-accent { color: var(--bm-yellow); }

/* Stat bar */
.bm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--bm-gap);
  text-align: center;
}
.bm-stat-value {
  font-family: var(--bm-font-display);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--bm-black);
}
.bm-stat-label {
  font-size: .95rem;
  color: var(--bm-black-soft);
  margin-block-start: .5rem;
}

/* Category cards — hairline yellow rule on top of the card, the one
   place the accent appears outside of buttons and stats. */
.bm-card {
  background: #fff;
  border: 1px solid var(--bm-border);
  border-block-start: 3px solid var(--bm-yellow);
  border-radius: var(--bm-radius);
  padding: 2rem 1.5rem;
  height: 100%;
  transition: box-shadow .2s ease, transform .2s ease;
}
.bm-card:hover {
  box-shadow: 0 8px 28px rgba(17, 17, 17, .09);
  transform: translateY(-3px);
}
.bm-card h3 { margin-block-end: .6rem; font-size: 1.15rem; }
.bm-card p  { color: var(--bm-muted); font-size: .95rem; margin: 0; }

/* Supplier logos — grey until hover, so the yellow stays the loudest thing. */
.bm-logo-grid img {
  filter: grayscale(1);
  opacity: .55;
  transition: filter .25s ease, opacity .25s ease;
}
.bm-logo-grid img:hover { filter: grayscale(0); opacity: 1; }

/* Certification icons */
.bm-cert-icon { color: var(--bm-cert); }


/* --------------------------------------------------------------------------
   7. Header, footer, language switcher
   -------------------------------------------------------------------------- */

.whb-header,
.whb-main-header { background-color: var(--bm-black) !important; }

.whb-header .wd-nav > li > a,
.whb-header .wd-tools-element > a { color: #fff; }
.whb-header .wd-nav > li > a:hover { color: var(--bm-yellow); }

.wd-footer,
footer.footer-container { background: var(--bm-black); color: rgba(255, 255, 255, .75); }
.wd-footer h5,
.wd-footer .widget-title { color: #fff; }
.wd-footer a { color: rgba(255, 255, 255, .75); }
.wd-footer a:hover { color: var(--bm-yellow); }

/* Language switcher — text labels in native script, never flags.
   Kurdish flags carry political weight; avoid them entirely. */
.wpml-ls-legacy-list-horizontal {
  border: 0;
  padding: 0;
}
.wpml-ls-legacy-list-horizontal .wpml-ls-item { margin-inline-end: .25rem; }
.wpml-ls-legacy-list-horizontal a {
  padding: .25rem .6rem;
  font-size: .85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
  border-radius: var(--bm-radius);
}
.wpml-ls-legacy-list-horizontal a:hover,
.wpml-ls-legacy-list-horizontal .wpml-ls-current-language a {
  color: var(--bm-black);
  background: var(--bm-yellow);
}
.wpml-ls-flag { display: none !important; }

/* Each language label renders in its own script. */
.wpml-ls-item-en a  { font-family: "IBM Plex Sans", system-ui, sans-serif; }
.wpml-ls-item-ar a,
.wpml-ls-item-ckb a { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }


/* --------------------------------------------------------------------------
   8. Directional fixes

   WoodMart handles most RTL, but Elementor copies numeric left/right values
   into translated pages. These catch the common ones.
   -------------------------------------------------------------------------- */

.bm-rtl .wd-nav-arrow,
.bm-rtl .btn-arrow,
.bm-rtl .bm-arrow { transform: scaleX(-1); display: inline-block; }

.bm-rtl .woocommerce-breadcrumb { direction: rtl; }
.bm-ltr .woocommerce-breadcrumb { direction: ltr; }

/* Text alignment follows the document, not a hardcoded side. */
.bm-align-start { text-align: start; }
.bm-align-end   { text-align: end; }


/* --------------------------------------------------------------------------
   9. Accessibility floor
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.bm-wa-btn:focus-visible,
.bm-btn-primary:focus-visible {
  outline: 3px solid var(--bm-yellow);
  outline-offset: 2px;
}
.bm-section-yellow a:focus-visible { outline-color: var(--bm-black); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .bm-wa-float:hover, .bm-card:hover { transform: none; }
}