/*
Theme Name: Astra Child
Theme URI: https://saiftec.dev/
Description: Astra child theme for Saiftec Solutions. Hosts small site-specific code (e.g. the per-category service FAQ shortcode) so it survives parent-theme updates.
Author: Saiftec Solutions
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* ---------------------------------------------------------------------------
 * Footer styles (including the SaifTec Location List widget) now live in
 * assets/footer.css, which is enqueued globally from inc/footer.php — same
 * "renders in the footer on every page" requirement, kept with the rest of the
 * footer instead of split across two files.
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * `.title-highlight` — the accent span used to pick out a word or two inside a
 * heading, typed straight into an ACF field or an Elementor heading.
 *
 * It lived in the **Custom CSS box of a single Home-page widget** (icon-box
 * `1a108a9`), which Elementor compiles into `uploads/elementor/css/post-2226.css`.
 * Elementor scopes the FILE to that document, not the selector — so the rule
 * styled all three Home spans and then simply did not exist anywhere else. On
 * `/services/web-design-development/` the two spans in the hero headline
 * inherited the heading's white and the highlight was invisible.
 *
 * This belongs in the globally-enqueued stylesheet because the class is content,
 * not layout: it can appear in any heading on any page type, and an editor typing
 * it into an ACF field has no way to know which document's Custom CSS box carries
 * the rule.
 *
 * Same colour the Home page already resolved (the Kit's Accent global, teal
 * #0AA3D6), so Home is unchanged; the literal is a fallback for any context where
 * the Kit stylesheet is absent. `--title-highlight` lets one section override it
 * without touching this rule — worth knowing that teal measures 6.22:1 on the
 * navy hero but only 2.55:1 on the lavender `#EDEFFF` bands, under the 3:1 WCAG
 * bar for large text, so a light section wanting this treatment should set
 * `--title-highlight:#0B8FBD` (3.24:1) or the purple `#3A0CA3` (10.44:1).
 *
 * A directly-matched rule beats an inherited colour whatever its specificity, so
 * this needs no !important against Elementor's (0,4,0) heading colour.
 * ------------------------------------------------------------------------ */
.title-highlight {
	color: var(--title-highlight, var(--e-global-color-accent, #0AA3D6));
}

/* ---------------------------------------------------------------------------
 * Home hero header clearance.
 *
 * The global header (#2249) is `position:absolute`, so it occupies no layout space and every page's
 * first section has to clear it itself. The shared `.svc-hero` does that with top padding (see
 * service-sections.css). The home hero is the one hero built purely from Elementor container
 * settings — it has NO child-theme CSS and NO top padding — so below 1025px its vertically-centred
 * content grew taller than the container and overflowed UPWARD: the eyebrow "Build. Automate.
 * Grow." rendered at top:0, directly on top of the logo. Measured at 600-1024px.
 *
 * Top-aligning with explicit clearance is the fix rather than more min-height: the content is
 * already taller than the box in that band, so re-centring it would only move the collision.
 * Desktop is untouched — it centres correctly and has never collided.
 *
 * This lives in style.css because it is the only child stylesheet that loads unconditionally, and
 * the selector is pinned to the one container it applies to.
 * ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.home .elementor-element-8b29e04 {
		justify-content: flex-start;
		padding-top: 132px;
		padding-bottom: 56px;
	}
}
@media (max-width: 480px) {
	.home .elementor-element-8b29e04 {
		padding-top: 112px;
	}
}

/* Contact (page 325) is the other page whose first section has `padding-top:0` and therefore no
   header clearance of its own. It only collides in the 481-767px band, where Elementor's mobile
   header layout takes the logo back up to 225px wide and 133px tall — above 767px the logo is
   small enough that the section's own spacing already clears it. */
@media (min-width: 481px) and (max-width: 767px) {
	.page-id-325 .elementor-element-be6fc6b {
		padding-top: 150px;
	}
}