/*
Theme Name: MSA IT Services
Theme URI: https://msaitservices.com
Author: MSA IT Services
Author URI: https://msaitservices.com
Description: A modern, professional, production-ready WordPress theme for MSA IT Services — an MSP delivering secure, scalable, and expertly managed IT solutions. Built with Tailwind CSS, selective React components, and full plugin integration.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: msa-it
Tags: one-column, two-columns, custom-logo, custom-menu, featured-images, theme-options, translation-ready

MSA IT Services WordPress Theme
Copyright 2026 MSA IT Services
*/

/* ────────────────────────────────────────────────────────────
 * Elementor ↔ Tailwind Compatibility
 *
 * Tailwind v4 uses @layer base for its preflight reset.
 * Because Elementor's CSS is NOT in any @layer, it already
 * beats Tailwind's preflight in the cascade (unlayered > layered).
 *
 * This file only provides:
 *   (a) Full-width layout for Elementor sections
 *   (b) Safety-net resets for elements Tailwind clobbers
 *       that might not have explicit Elementor inline styling
 *   (c) Container display fallback
 *
 * The header/footer stay Tailwind-styled — only .elementor
 * children get these overrides.
 * ──────────────────────────────────────────────────────────── */

/* ── Full-width layout ── */
.site-main {
    padding: 0 !important;
    max-width: none !important;
}
.site-main > .elementor {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Container display: safety-net only ──
 * Elementor's own frontend.min.css handles flex-direction on
 * .e-con-inner via var(--flex-direction). We must NOT override
 * flex-direction on .e-con — that breaks e-con-boxed row layouts.
 * Only ensure display is preserved. */
.elementor .e-con,
.elementor .e-con > .e-con-inner {
    display: var(--display, flex) !important;
}

/* ── Nested container sizing fix ──
 * Elementor sets --width:100% on every .e-con by default.
 * When a parent uses flex-direction:row + flex-wrap:wrap,
 * children at 100% width each wrap to their own line.
 * Fix: nested e-con children auto-size and share space. */
.elementor .e-con > .e-con-inner > .e-con {
    width: auto !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    flex-basis: 0% !important;
    min-width: 0 !important;
}

/* ── Stats bar spacing fix ──
 * The stats counter section (99.9%, 24/7, 500+, 100%) uses
 * justify-content:space-around with content-sized children.
 * Override flex-grow so items stay content-sized and space
 * distributes evenly between them. Targets the specific
 * dark stats bar by its Elementor element ID.
 * Needs .elementor ancestor for higher specificity than the
 * generic nested-container rule above (5 classes > 4). */
.elementor .elementor-element-f820803 > .e-con-inner > .e-con {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
}

/* ── Headings: Tailwind @layer base resets to inherit ── */
.elementor h1 { font-size: 2em; font-weight: bold; }
.elementor h2 { font-size: 1.5em; font-weight: bold; }
.elementor h3 { font-size: 1.17em; font-weight: bold; }
.elementor h4 { font-size: 1em; font-weight: bold; }
.elementor h5 { font-size: 0.83em; font-weight: bold; }
.elementor h6 { font-size: 0.67em; font-weight: bold; }

/* ── Lists ── */
.elementor ul { list-style: disc; padding-left: 1.5em; }
.elementor ol { list-style: decimal; padding-left: 1.5em; }

/* ── Links ── */
.elementor a { color: inherit; text-decoration: none; }

/* ── Images ── */
.elementor img {
    max-width: 100%;
    height: auto;
}

/* ── Strong / emphasis ── */
.elementor strong, .elementor b { font-weight: 700; }
.elementor em, .elementor i { font-style: italic; }