/*
 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
*/

/* -------------------------------------------------------------------------
   Arabic type on English pages
   -------------------------------------------------------------------------
   English pages inherit Manrope, which carries no Arabic glyphs. Any Arabic
   string rendered there (currently the "العربية" language switcher in the top
   bar, the desktop header and the mobile header) falls back per-glyph and
   looks broken. These switcher IDs are repeated across the global header
   template and every page that carries its own embedded header copy, so a
   single rule here covers all of them.

   Uses the design token so the fallback chain (Tajawal, system-ui, sans-serif)
   is preserved -- element-level font-family settings in Bricks get quoted and
   break the variable, which is why this lives in CSS.
   ------------------------------------------------------------------------- */
#brxe-utlar,
#brxe-mhdr08,
#brxe-moblang,
[lang="ar"] {
	font-family: var(--askaan-font-arabic);
}

/* -------------------------------------------------------------------------
   Mobile navigation: equal-height rows
   -------------------------------------------------------------------------
   The mobile nav is a 3-column grid holding six links over two rows. Once the
   labels were aligned with the desktop menu, longer ones ("Media Center",
   "المركز الإعلامي") wrap to two lines while shorter ones stay on one, so the
   two rows rendered at different heights in Arabic.

   grid-auto-rows alone is not enough -- the items must also stretch to fill
   the row, otherwise each keeps its own content height.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	#brxe-mobnavx {
		grid-auto-rows: 1fr;
	}

	#brxe-mobnavx > * {
		height: 100%;
	}
}