/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* ==========================================================================
   DIGDAGA BASE LAYER

   Only what Bricks Theme Styles and global classes genuinely cannot express.
   Colours, the type scale, spacing, buttons and cards all live in Bricks as
   variables, Theme Styles and global classes. Do not duplicate any of that
   here, or the client loses the ability to edit it from the builder.

   Token names in this file must match Bricks > Settings > Variables exactly.
   A var() that does not exist makes the whole declaration invalid, and the
   rule silently does nothing.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. RESPONSIVE TOKEN SCALE

   Bricks holds one value per variable, so the mobile step-down lives here.
   Redefining the tokens at the breakpoint scales every page at once instead
   of overriding sizes element by element. Values come from the approved
   mobile mockups (h1 34px, h2 27px, h3 24px, stat 64px).
   -------------------------------------------------------------------------- */

/* :root:root raises specificity to (0,2,0). Bricks prints its own :root
   variable block in an inline <style> AFTER this stylesheet, so a plain
   :root here loses on source order even inside a media query. */
@media (max-width: 767px) {
  :root:root {
    --text-display:  3.4rem;
    --text-stat:     6.4rem;
    --text-h1:       3.6rem;
    --text-h2:       2.7rem;
    --text-h3-lg:    2.6rem;
    --text-h3:       2.4rem;
    --text-h4:       2.1rem;
    --text-intro:    1.6rem;
    --text-xl:       1.6rem;

    --section-y:     var(--section-y-mobile);
    --container-pad: var(--container-pad-mobile);
  }
}


/* --------------------------------------------------------------------------
   2. ARABIC / RTL

   Theme Styles write font-family literally rather than through the variable,
   so the Arabic families are overridden directly. WPML puts dir="rtl" on the
   Arabic side, so the swap hangs off that.
   -------------------------------------------------------------------------- */

[dir="rtl"] {
  --font-body:    var(--font-ar);
  --font-heading: var(--font-ar);
}

/* Arabic is Tajawal everywhere, enforced on every element rather than a list.

   Two separate mechanisms put "Public Sans" on elements in a way that beats
   normal inheritance, and Public Sans has NO Arabic glyphs, so anything it
   catches falls back to a generic system font. The result was two different
   Arabic typefaces on one page.
     - Bricks writes per-element settings into an ID rule (#brxe-xxx), which
       outranks any class or attribute selector here. ~44 elements: buttons,
       eyebrows, inline links, CTAs, step numbers.
     - Bricks Theme Styles write font-family literally onto bare tags (a,
       label, ...), which beats inheritance from a styled ancestor. That is
       why an earlier fix listing only [class*="brxe-"] still left the whole
       nav, form labels and the WPML switcher spans in the fallback font.

   Verified with a canvas probe: Arabic measured in "Public Sans" came back the
   same width as monospace, i.e. no glyph coverage at all.

   Enumerating selectors kept missing cases, so this deliberately covers every
   descendant. Safe here because the page uses no icon fonts at all (the only
   families present are Tajawal and Public Sans; the three icons are inline
   SVG). If an icon font is ever added, exempt it explicitly.

   Scoped to [dir="rtl"], so English keeps Public Sans and Newsreader.
   Latin runs (phone, email) keep their .ltr isolation below and simply render
   in Tajawal's Latin, consistent with the rest of the Arabic page. */
[dir="rtl"] body,
[dir="rtl"] body * {
  font-family: "Tajawal", "Segoe UI", "Geeza Pro", "Noto Sans Arabic", sans-serif !important;
}

/* Arabic needs more leading than Latin at the same optical size, and
   letter-spacing distorts the letterforms, so tracking goes to zero. */
[dir="rtl"] body {
  line-height: 1.85;
}

[dir="rtl"] :is(h1, h2, h3, h4, h5, h6) {
  line-height: var(--leading-snug);
  letter-spacing: 0;
}

/* Arabic has no letter case. Uppercase must never be applied to it, so any
   component that uppercases a label in English opts out here.

   The class is doubled for the same reason :root:root is doubled above.
   Bricks prints its global classes as a compound selector in an inline
   <style> AFTER this stylesheet: .eyebrow.brxe-text-basic is (0,2,0), and so
   was the old [dir="rtl"] .eyebrow. Equal specificity means source order
   decides, and Bricks was winning, leaving Arabic eyebrows on
   letter-spacing: var(--tracking-caps). Tracking breaks Arabic cursive
   joining, so this must win. Doubling takes it to (0,3,0).

   Buttons never had the fault (.btn resolves lower), but they are doubled
   too so the whole rule behaves the same way. */
[dir="rtl"] .eyebrow.eyebrow,
[dir="rtl"] .chip.chip,
[dir="rtl"] .btn.btn,
[dir="rtl"] .bricks-button.bricks-button {
  text-transform: none;
  letter-spacing: 0;
}

/* Latin runs inside Arabic text (phone numbers, HACCP, the brand name)
   render scrambled without isolation. This is the single most common bug on
   bilingual UAE sites. Apply .ltr to any such run. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Directional icons must mirror under RTL, or arrows point the wrong way. */
[dir="rtl"] .icon--dir {
  transform: scaleX(-1);
}


/* --------------------------------------------------------------------------
   3. FORMS

   Placeholder colour is kept out of Theme Styles on purpose: Bricks applies
   that control to <select> as well, which overrode the select's own text
   colour and left dropdowns rendering faint grey.
   -------------------------------------------------------------------------- */

.brxe-form ::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}


/* --------------------------------------------------------------------------
   4. MOTION

   The design direction sets motion low (dial 0.15): hover feedback only.
   Respect the OS preference regardless.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   5. TYPE NICETIES
   Small refinements with no Theme Style equivalent.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Never let a long unbroken string blow out the layout. */
h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word;
}