/*
 * site.css — the rules that are true of every page ASAS serves on its own domain.
 *
 * Loaded on the whole front end: the marketing homepage, and the 4,038 template pages
 * at their own permalinks. NOT loaded inside the studio preview, which has kit.css, and
 * not inside the studio tool, which has studio.css. All three say the same thing about
 * headings; they are separate files because they are separate documents, not because
 * the rule differs.
 *
 * There is a fourth place the same rule has to hold and this file cannot reach it: a
 * downloaded Elementor JSON, opened on somebody else's WordPress, where none of this
 * exists. That copy is written as real Elementor typography settings by
 * Export::headings(), which is why the rule survives the import.
 */

/*
 * Word spacing, for the same reason kit.css states it on the preview body.
 *
 * Manrope's word space is narrow. At a card's scale, on a phone, or on any page
 * zoomed to fit, "a change of team" closed up into "achange ofteam" — the letters
 * were never touching, the gap just did not survive being scaled down. About one
 * extra pixel at body size fixes it and reads as nothing at full size.
 *
 * On `.elementor` rather than `body` so it reaches the rendered templates without
 * touching the theme's own chrome.
 */
.elementor {
	word-spacing: .08em;
}

/*
 * H1 to H4 are uppercase. H5 and H6 are not.
 *
 * The split is the one the library already draws to: h1 to h4 are the headings a
 * section announces itself with, while h6 is the icon-box title repeated twelve times
 * down a feature grid and h5 is a card title. Shouting those flattens the page instead
 * of structuring it.
 *
 * text-transform, not rewritten text. The words in the database are still sentence
 * case, so a customer who takes the file and turns the transform off gets their
 * sentences back rather than a page of capitals to retype. It is also the only version
 * of this that Arabic survives: Arabic script has no case, so `uppercase` maps every
 * letter to itself and an Arabic heading is returned unchanged, character for
 * character. A mixed heading uppercases only its Latin half, which is correct.
 *
 * Specificity is the whole trick and it took a measurement to get right. Elementor
 * writes per-element typography as `.elementor-element-xxxx .elementor-heading-title`,
 * which is (0,2,0); eight of the homepage's own h2s carry an inherited `capitalize`
 * from the template it was built from and were still rendering in title case under
 * `body h2` (0,1,1). Matching the widget wrapper as well takes this to (0,2,2), which
 * wins on class count — no !important needed, and none wanted, because the kit's Main
 * heading case control does use !important and has to stay able to override the house.
 *
 * The second block is the plain-element fallback for headings that are not Elementor
 * heading widgets at all — a theme template, a flip-box title, a widget that hard-codes
 * its tag.
 */
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-theme-post-title h1.elementor-heading-title,
.elementor-widget-theme-post-title h2.elementor-heading-title,
.elementor-widget-theme-post-title h3.elementor-heading-title,
.elementor-widget-theme-post-title h4.elementor-heading-title,
.elementor-widget-flip-box h1.elementor-flip-box__layer__title,
.elementor-widget-flip-box h2.elementor-flip-box__layer__title,
.elementor-widget-flip-box h3.elementor-flip-box__layer__title,
.elementor-widget-flip-box h4.elementor-flip-box__layer__title,
.elementor h1, .elementor h2, .elementor h3, .elementor h4,
body h1, body h2, body h3, body h4 {
	text-transform: uppercase;
}

/* A heading the reader is meant to copy is not a stylistic surface. `uppercase` turns
   an address into MOUSA@ASAS.MOUSABATARSEH.COM, which is not a design choice — it is a
   wrong email address set in 40px type. The homepage marks these .asas-literal and the
   exemption has to survive the house rule. */
.elementor-widget-heading.asas-literal .elementor-heading-title,
.asas-literal, .asas-literal * {
	text-transform: none;
}

/* The wordmark is a logo, not a heading, and the site chrome sets its own case. The
   selector carries a class more than the rule above so it wins without !important. */
.asas-chrome .asas-brandlink,
.asas-chrome .asas-brandlink span,
.asas-chrome .asas-mark,
.asas-nav h1, .asas-nav h2, .asas-nav h3, .asas-nav h4,
.asas-brandlink span {
	text-transform: none;
}