/* ==========================================================================
   Habka Language Fonts v2.2.0
   Arabic (RTL) -> LANTX  |  English (LTR) -> Helvetica

   LANTX contains Arabic (base + presentation forms), Western digits and
   punctuation, but NO Latin letters. Helvetica is kept in the Arabic stack so
   Latin words inside Arabic copy fall back per-glyph instead of hitting a
   random system serif.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. @font-face
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "LANTX";
	src: url("../fonts/LANTX-Light.woff2") format("woff2"),
	     url("../fonts/LANTX-Light.woff") format("woff");
	font-weight: 100 450;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "LANTX";
	src: url("../fonts/LANTX-LightItalic.woff2") format("woff2"),
	     url("../fonts/LANTX-LightItalic.woff") format("woff");
	font-weight: 100 450;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "LANTX";
	src: url("../fonts/LANTX-Regular.woff2") format("woff2"),
	     url("../fonts/LANTX-Regular.woff") format("woff");
	font-weight: 451 599;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "LANTX";
	src: url("../fonts/LANTX-RegularItalic.woff2") format("woff2"),
	     url("../fonts/LANTX-RegularItalic.woff") format("woff");
	font-weight: 451 599;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "LANTX";
	src: url("../fonts/LANTX-Bold.woff2") format("woff2"),
	     url("../fonts/LANTX-Bold.woff") format("woff");
	font-weight: 600 1000;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "LANTX";
	src: url("../fonts/LANTX-BoldItalic.woff2") format("woff2"),
	     url("../fonts/LANTX-BoldItalic.woff") format("woff");
	font-weight: 600 1000;
	font-style: italic;
	font-display: swap;
}

/* Explicit single-weight families, for the cases where a theme or Elementor
   control needs to pin one file rather than rely on the weight axis. */
@font-face {
	font-family: "LANTX Light";
	src: url("../fonts/LANTX-Light.woff2") format("woff2"),
	     url("../fonts/LANTX-Light.woff") format("woff");
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "LANTX Bold";
	src: url("../fonts/LANTX-Bold.woff2") format("woff2"),
	     url("../fonts/LANTX-Bold.woff") format("woff");
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Stacks
   -------------------------------------------------------------------------- */

:root {
	--habka-font-ar: "LANTX", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--habka-font-en: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--habka-font: var(--habka-font-en);
}

html[dir="rtl"],
body.rtl {
	--habka-font: var(--habka-font-ar);
}

/* --------------------------------------------------------------------------
   3. Base — inherited, so generic spans/divs/icons are never touched
   -------------------------------------------------------------------------- */

body,
body.ltr,
html[dir="ltr"] body {
	font-family: var(--habka-font-en) !important;
}

body.rtl,
html[dir="rtl"] body,
html[lang^="ar"] body {
	font-family: var(--habka-font-ar) !important;
}

/* --------------------------------------------------------------------------
   4. Elements that don't inherit, or that themes/Elementor set explicitly.
      Deliberately excludes span / div / i so icon fonts keep their own family.
   -------------------------------------------------------------------------- */

body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6,
body.rtl p,
body.rtl a,
body.rtl li,
body.rtl dt,
body.rtl dd,
body.rtl th,
body.rtl td,
body.rtl caption,
body.rtl figcaption,
body.rtl blockquote,
body.rtl label,
body.rtl legend,
body.rtl button,
body.rtl input,
body.rtl select,
body.rtl optgroup,
body.rtl option,
body.rtl textarea,
body.rtl ::placeholder,
/* Elementor */
body.rtl .elementor-heading-title,
body.rtl .elementor-widget-text-editor,
body.rtl .elementor-button,
body.rtl .elementor-button-text,
body.rtl .elementor-nav-menu li a,
body.rtl .elementor-nav-menu--dropdown a,
body.rtl .elementor-tab-title,
body.rtl .elementor-tab-content,
body.rtl .elementor-accordion-title,
body.rtl .elementor-toggle-title,
body.rtl .elementor-price-table,
body.rtl .elementor-testimonial-content,
body.rtl .elementor-post__title,
body.rtl .elementor-post__excerpt,
body.rtl .elementor-icon-box-title,
body.rtl .elementor-icon-box-description,
body.rtl .elementor-image-box-title,
body.rtl .elementor-image-box-description,
body.rtl .elementor-counter,
body.rtl .elementor-field-group label,
body.rtl .elementor-field-group .elementor-field,
body.rtl .elementor-alert,
/* WooCommerce */
body.rtl .woocommerce,
body.rtl .woocommerce-page,
body.rtl .woocommerce .button,
body.rtl .woocommerce-loop-product__title,
body.rtl .woocommerce-Price-amount,
/* Habka custom widgets */
body.rtl [class^="habka-"],
body.rtl [class*=" habka-"] {
	font-family: var(--habka-font-ar) !important;
}

/* --------------------------------------------------------------------------
   5. Icon-font guards.
      Nothing in section 4 targets <i>, <span> or <div>, so icons are already
      safe by construction. These rules exist only as a backstop for the case
      where an icon is rendered on an element that IS in the list above
      (e.g. an <a> or <button> that is itself the icon).
   -------------------------------------------------------------------------- */

body.rtl [class^="eicon-"],
body.rtl [class*=" eicon-"] {
	font-family: eicons !important;
}

body.rtl .fa,
body.rtl .fas,
body.rtl .far,
body.rtl .fal,
body.rtl .fab,
body.rtl [class^="fa-"],
body.rtl [class*=" fa-"] {
	font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "Font Awesome 6 Free", "Font Awesome 6 Brands", FontAwesome !important;
}

body.rtl .dashicons,
body.rtl .dashicons-before:before {
	font-family: dashicons !important;
}

/* --------------------------------------------------------------------------
   6. Weight matching

   LANTX ships three real weights. The @font-face declarations above use
   weight RANGES so the browser's matching is deterministic instead of
   guessing a "nearest" face:

       100-450   -> Light     (400 body text is Light, not Regular)
       451-599   -> Regular   (500 is the real "medium" step)
       600-1000  -> Bold      (bold starts at 600, exactly)

   LANTX Regular is visually heavy - measured ink coverage is 0.40 against
   0.22 for Light and 0.55 for Bold - so mapping 400 to Regular makes body
   copy read as semi-bold. 400 is mapped to Light on purpose.

   font-synthesis is disabled so the browser can never fake a bold or an
   italic by smearing/slanting a lighter face, which wrecks Arabic joins.
   -------------------------------------------------------------------------- */

body.rtl,
body.rtl *,
.habka-font-ar,
.habka-font-ar * {
	font-synthesis: none;
	-webkit-font-synthesis: none;
}

/* Arabic rendering polish */
body.rtl {
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   7. Utility classes — force a font regardless of page direction, e.g. an
      Arabic pull-quote inside an English page.
   -------------------------------------------------------------------------- */

.habka-font-ar,
.habka-font-ar * {
	font-family: var(--habka-font-ar) !important;
	direction: rtl;
	unicode-bidi: isolate;
}

.habka-font-en,
.habka-font-en * {
	font-family: var(--habka-font-en) !important;
	direction: ltr;
	unicode-bidi: isolate;
}

.habka-font-light { font-weight: 300 !important; }
.habka-font-regular { font-weight: 500 !important; } /* Regular face */
.habka-font-medium { font-weight: 500 !important; } /* Regular face */
.habka-font-bold { font-weight: 700 !important; }

/* --------------------------------------------------------------------------
   8. Editors — Elementor preview and block editor render inside their own
      wrappers, which don't always carry body.rtl.
   -------------------------------------------------------------------------- */

.elementor-editor-active .elementor-element[dir="rtl"],
.editor-styles-wrapper[dir="rtl"],
.block-editor-writing-flow[dir="rtl"],
.editor-styles-wrapper .rtl,
.elementor-edit-area [dir="rtl"] {
	font-family: var(--habka-font-ar) !important;
}