/*
 * MSA Elementor Enhancements
 *
 * Custom CSS that layers on top of Elementor's output to create
 * effects not natively available in Elementor Free:
 *   - Bento grid sizing
 *   - Stacking card layout
 *   - Glassmorphism cards
 *   - Gradient accents
 *   - Smooth hover lifts
 *
 * @package MSA_IT_Services
 */

/* Selection color */
::selection {
    background-color: #e3391e;
    color: #fff;
}

/* ════════════════════════════════════════════════════════════
 * 1. STACKING CARDS
 * ════════════════════════════════════════════════════════════ */

.elementor .msa-stack-section {
    position: relative !important;
}

.elementor .e-con.msa-stack-section {
    /* Let the section be tall enough for sticky to work */
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

.elementor .msa-stack-card {
    background: #1C1C1C !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Stacking card text — readable on dark bg */
.elementor .msa-stack-card h2,
.elementor .msa-stack-card h3,
.elementor .msa-stack-card .elementor-heading-title {
    color: #ffffff !important;
}

.elementor .msa-stack-card p,
.elementor .msa-stack-card .elementor-text-editor {
    color: rgba(255, 255, 255, 0.65) !important;
}

.elementor .msa-stack-card .elementor-icon {
    color: #e3391e !important;
}

/* ════════════════════════════════════════════════════════════
 * 2. SERVICES SECTION — Split Layout + Slim Card Rows
 *
 * Left  = label + heading (red) + subtitle — stacked naturally
 * Right = 6 slim card rows
 * Bottom = "View All Services" button, centred
 *
 * Pure CSS via :has().
 * ════════════════════════════════════════════════════════════ */

/* --- Outer container overrides --- */
.e-con:has(.msa-bento-grid) {
    --display: grid !important;
    --flex-direction: unset !important;
    --align-items: start !important;
    --padding-top: 80px !important;
    --padding-bottom: 80px !important;
}

/* --- Inner wrapper: two-column grid with proper row tracks --- */
.e-con:has(.msa-bento-grid) > .e-con-inner,
.e-con-inner:has(> .msa-bento-grid) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto 1fr auto !important;
    column-gap: 56px !important;
    row-gap: 8px !important;
    align-items: start !important;
    flex-wrap: unset !important;
    flex-direction: unset !important;
}

/* --- Hide spacers --- */
.e-con-inner:has(> .msa-bento-grid) > .elementor-widget-spacer {
    display: none !important;
}

/* ── LEFT COLUMN — label row 1, heading row 2, subtitle row 3 ── */

/* Label */
.e-con-inner:has(> .msa-bento-grid) > .elementor-widget-text-editor:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/* Heading */
.e-con-inner:has(> .msa-bento-grid) > .elementor-widget-heading {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

/* Subtitle */
.e-con-inner:has(> .msa-bento-grid) > .elementor-widget-text-editor:nth-of-type(2) {
    grid-column: 1 !important;
    grid-row: 3 !important;
}

/* Heading style — RED, left-aligned, large */
.e-con-inner:has(> .msa-bento-grid) > .elementor-widget-heading .elementor-heading-title {
    color: #e3391e !important;
    font-size: 2.75rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-align: left !important;
}

/* Label tweak */
.e-con-inner:has(> .msa-bento-grid) > .elementor-widget-text-editor:first-child .msa-label {
    margin-bottom: 0 !important;
}

/* Subtitle style — the text-editor that follows the heading.
 * NOTE:  :nth-of-type selects by tag, not class.  All Elementor
 * widgets are <div>, so the old selector missed the target.
 * Using the general-sibling combinator instead. */
.e-con-inner:has(> .msa-bento-grid) > .elementor-widget-heading ~ .elementor-widget-text-editor p {
    color: var(--color-muted-text, #6B7280) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    text-align: left !important;
    max-width: none !important;
    margin: 0 !important;
}

/* ── RIGHT COLUMN — card list spans rows 1–4 ── */
.e-con-inner:has(> .msa-bento-grid) > .msa-bento-grid {
    grid-column: 2 !important;
    grid-row: 1 / 5 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    flex-direction: unset !important;
}

/* Reset old bento spans */
.e-con-inner:has(> .msa-bento-grid) > .msa-bento-grid > * {
    grid-column: unset !important;
    grid-row: unset !important;
}

/* --- Bottom row: button centred, full width --- */
.e-con-inner:has(> .msa-bento-grid) > .elementor-widget-button {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    justify-self: center !important;
    padding-top: 32px !important;
}

/* ══════════════════════════════════
 *  SLIM CARD ROWS
 * ══════════════════════════════════ */

.msa-bento-grid > .e-con,
.msa-bento-grid > .e-child {
    background: #ffffff !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 10px !important;
    padding: 16px 24px !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: auto !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.msa-bento-grid > .e-con:hover,
.msa-bento-grid > .e-child:hover {
    border-color: #e3391e !important;
    box-shadow: 0 4px 16px rgba(227, 57, 30, 0.12) !important;
    transform: translateY(-2px) !important;
}

/* Hide icons */
.msa-bento-grid .msa-icon-circle {
    display: none !important;
}

/* Hide all text-editor widgets inside cards (icons + descriptions) */
.msa-bento-grid > .e-con .elementor-widget-text-editor {
    display: none !important;
}

/* Card heading: centred, uppercase */
.msa-bento-grid > .e-con h3,
.msa-bento-grid > .e-child h3,
.msa-bento-grid > .e-con .elementor-heading-title,
.msa-bento-grid > .e-child .elementor-heading-title {
    color: var(--color-primary-black, #111111) !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 4px 0 !important;
}

/* Hover: heading turns red */
.msa-bento-grid > .e-con:hover .elementor-heading-title,
.msa-bento-grid > .e-child:hover .elementor-heading-title {
    color: #e3391e !important;
}

/* Remove accent-top bar */
.msa-bento-grid .msa-accent-top::before {
    display: none !important;
}

/* Inner e-con-inner in cards — no padding/gaps */
.msa-bento-grid > .e-con > .e-con-inner {
    padding: 0 !important;
    gap: 0 !important;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .e-con:has(.msa-bento-grid) {
        --display: flex !important;
        --flex-direction: column !important;
    }
    .e-con:has(.msa-bento-grid) > .e-con-inner,
    .e-con-inner:has(> .msa-bento-grid) {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        gap: 16px !important;
    }
    .e-con-inner:has(> .msa-bento-grid) > .msa-bento-grid {
        grid-column: unset !important;
        grid-row: unset !important;
    }
    .e-con-inner:has(> .msa-bento-grid) > .elementor-widget-button {
        grid-column: unset !important;
        grid-row: unset !important;
    }
    .e-con-inner:has(> .msa-bento-grid) > .elementor-widget-heading .elementor-heading-title {
        text-align: center !important;
    }
    .e-con-inner:has(> .msa-bento-grid) > .elementor-widget-text-editor p {
        text-align: center !important;
        max-width: none !important;
    }
}

/* ── Mobile only: center service option cards ── */
@media (max-width: 767px) {
    .e-con-inner:has(> .msa-bento-grid) > .msa-bento-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .msa-bento-grid > .e-con,
    .msa-bento-grid > .e-child {
        width: auto !important;
        min-width: 280px !important;
        max-width: 90% !important;
    }
}

/* ════════════════════════════════════════════════════════════
 * 3. CARD STYLES
 * ════════════════════════════════════════════════════════════ */

/* Glassmorphism card */
.elementor .msa-glass-card {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.elementor .msa-glass-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
}

/* Solid elevated card with hover lift */
.elementor .msa-lift-card {
    border-radius: 20px !important;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

.elementor .msa-lift-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
}

/* Red accent line at top */
.elementor .msa-accent-top {
    position: relative !important;
    overflow: hidden !important;
}
.elementor .msa-accent-top::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #e3391e, #ff6b4a) !important;
    z-index: 2 !important;
}

/* ── Dark Bento Card — DISABLED (using white cards now) ── */
/*
.elementor .msa-bento-grid > .e-con,
.elementor .msa-bento-grid > .e-child {
    background: #1C1C1C !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 20px !important;
    padding: 32px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.elementor .msa-bento-grid > .e-con:hover,
.elementor .msa-bento-grid > .e-child:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(227, 57, 30, 0.25) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
}

.elementor .msa-bento-grid > .e-con h3,
.elementor .msa-bento-grid > .e-child h3,
.elementor .msa-bento-grid > .e-con .elementor-heading-title,
.elementor .msa-bento-grid > .e-child .elementor-heading-title {
    color: #ffffff !important;
}

.elementor .msa-bento-grid > .e-con p,
.elementor .msa-bento-grid > .e-child p,
.elementor .msa-bento-grid > .e-con .elementor-text-editor,
.elementor .msa-bento-grid > .e-child .elementor-text-editor {
    color: rgba(255, 255, 255, 0.65) !important;
}

.elementor .msa-bento-grid .msa-icon-circle,
.elementor .msa-bento-grid .elementor-icon {
    background: rgba(227, 57, 30, 0.12) !important;
    color: #e3391e !important;
}

.elementor .msa-bento-grid .msa-accent-top::before {
    display: none !important;
}
*/

/* Number stat card (for trust bar redesign) */
.elementor .msa-stat-card {
    border-radius: 20px !important;
    padding: 32px 24px !important;
    text-align: center !important;
    transition: transform 0.3s ease !important;
}
.elementor .msa-stat-card:hover {
    transform: scale(1.03) !important;
}

/* ════════════════════════════════════════════════════════════
 * 4. HERO ENHANCEMENTS
 * ════════════════════════════════════════════════════════════ */

/* Subtle grid pattern overlay */
.elementor .msa-hero-grid,
.msa-hero-grid {
    position: relative !important;
    overflow: hidden !important;
}

.elementor .msa-hero-grid::before,
.msa-hero-grid::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px) !important;
    background-size: 60px 60px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 40%, transparent 100%) !important;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 40%, transparent 100%) !important;
}

/* Gradient glow behind hero text */
.elementor .msa-hero-glow,
.msa-hero-glow {
    position: relative !important;
    overflow: hidden !important;
}

.elementor .msa-hero-glow::after,
.msa-hero-glow::after {
    content: '' !important;
    position: absolute !important;
    width: 500px !important;
    height: 500px !important;
    background: radial-gradient(circle, rgba(227,57,30,0.15) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.elementor .msa-hero-grid > *,
.elementor .msa-hero-glow > *,
.msa-hero-grid > *,
.msa-hero-glow > * {
    position: relative !important;
    z-index: 1 !important;
}

/* ════════════════════════════════════════════════════════════
 * 5. SECTION DIVIDERS & POLISH
 * ════════════════════════════════════════════════════════════ */

/* Gradient text for headings */
.elementor .msa-gradient-text .elementor-heading-title {
    background: linear-gradient(135deg, #e3391e 0%, #ff6b4a 50%, #e3391e 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Subtle badge / label styles */
.msa-label {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #e3391e !important;
    background: rgba(227, 57, 30, 0.08) !important;
    padding: 6px 16px !important;
    border-radius: 100px !important;
}

/* Icon circle background */
.msa-icon-circle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    background: rgba(227, 57, 30, 0.08) !important;
    color: #e3391e !important;
    font-size: 24px !important;
    margin-bottom: 16px !important;
}

/* ════════════════════════════════════════════════════════════
 * 6. ANIMATIONS
 * ════════════════════════════════════════════════════════════ */

@keyframes msa-fade-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.msa-fade-up {
    animation: msa-fade-up 0.6s ease-out both !important;
}

/* Stagger children */
.elementor .msa-stagger > *,
.msa-stagger > * {
    opacity: 0;
    animation: msa-fade-up 0.5s ease-out both;
}
.elementor .msa-stagger > *:nth-child(1),
.msa-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.elementor .msa-stagger > *:nth-child(2),
.msa-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.elementor .msa-stagger > *:nth-child(3),
.msa-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.elementor .msa-stagger > *:nth-child(4),
.msa-stagger > *:nth-child(4) { animation-delay: 0.4s; }
.elementor .msa-stagger > *:nth-child(5),
.msa-stagger > *:nth-child(5) { animation-delay: 0.5s; }
.elementor .msa-stagger > *:nth-child(6),
.msa-stagger > *:nth-child(6) { animation-delay: 0.6s; }

/* ════════════════════════════════════════════════════════════
 * 6b. MOBILE — "WHY US" STACK CARDS
 *
 * On mobile, make the stack cards fill the screen as clean
 * square-ish blocks with readable text (no word-breaking).
 * Hide the large "01 / 02 / 03 / 04" ghost numbers.
 * ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Stack section: tighter vertical gap */
    .msa-stack-section {
        gap: 16px !important;
    }

    /* Each card: full-width, vertical stack, square-ish aspect */
    .elementor .msa-stack-card {
        flex-direction: column !important;
        padding: 36px 28px !important;
        min-height: auto !important;
        border-radius: 16px !important;
    }

    /* Text container: full width, no min-width constraint */
    .elementor .msa-stack-card > .e-con:first-child,
    .elementor .msa-stack-card > .e-child:first-child {
        width: 100% !important;
        min-width: unset !important;
        flex-basis: auto !important;
    }

    /* Hide the large ghost number container (01, 02, 03, 04) */
    .elementor .msa-stack-card > .e-con:last-child,
    .elementor .msa-stack-card > .e-child:last-child {
        display: none !important;
    }

    /* Heading size down for mobile */
    .elementor .msa-stack-card h2,
    .elementor .msa-stack-card .elementor-heading-title {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

    /* Body text: readable, no breaking */
    .elementor .msa-stack-card p,
    .elementor .msa-stack-card .elementor-text-editor {
        font-size: 15px !important;
        line-height: 1.7 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* Icon size down */
    .elementor .msa-stack-card .elementor-text-editor div[style*="font-size:48px"] {
        font-size: 36px !important;
    }

    /* "Why Choose MSA" section heading */
    .elementor .msa-stack-section ~ .elementor-widget-heading .elementor-heading-title,
    .e-con:has(.msa-stack-section) > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
        font-size: 28px !important;
    }
}

/* Tablet adjustments for stack cards */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor .msa-stack-card {
        padding: 40px 36px !important;
        min-height: 280px !important;
    }

    .elementor .msa-stack-card > .e-con:first-child,
    .elementor .msa-stack-card > .e-child:first-child {
        min-width: unset !important;
        width: 55% !important;
    }

    .elementor .msa-stack-card > .e-con:last-child,
    .elementor .msa-stack-card > .e-child:last-child {
        width: 35% !important;
    }

    .elementor .msa-stack-card h2,
    .elementor .msa-stack-card .elementor-heading-title {
        font-size: 26px !important;
    }
}

/* ════════════════════════════════════════════════════════════
 * 7. HOMEPAGE HERO–STATS SPACING
 *
 * Add breathing room between the hero section and the trust-bar
 * (stats row that overlaps upward with negative margin).
 * ════════════════════════════════════════════════════════════ */

/* The stats bar is the second top-level container on the home page.
   It already has margin-top:-60px via Elementor inline styles.
   We add a small top padding so the bar doesn't feel glued to the hero. */
body.home .elementor > .elementor-element:first-child + .elementor-element {
    margin-top: -40px !important;   /* was -60px inline → visually adds ~20px gap */
}

/* ════════════════════════════════════════════════════════════
 * 8. LOGO SIZING
 * ════════════════════════════════════════════════════════════ */

/* Make the WP custom-logo and fallback logo visible */
.site-header .custom-logo-link img,
.site-header .custom-logo,
.site-header a[rel="home"] img {
    height: 60px !important;
    width: auto !important;
    max-height: 60px !important;
}

/* Elementor header logo override */
.elementor .elementor-widget-site-logo img,
.elementor .elementor-widget-theme-site-logo img {
    height: 60px !important;
    width: auto !important;
    max-height: 60px !important;
}

/* ════════════════════════════════════════════════════════════
 * 9. SMOOTH SCROLL & ANCHOR OFFSET
 * ════════════════════════════════════════════════════════════ */
html {
    scroll-behavior: smooth;
}

/* Offset for fixed header when jumping to anchors */
[id].service-cloud,
[id].service-cybersecurity,
[id].service-endpoint,
[id].service-backup,
[id].service-haas,
[id].service-consulting {
    scroll-margin-top: 100px;
}

/* ════════════════════════════════════════════════════════════
 * 10. CONTACT FORM SPACING ENHANCEMENTS
 *
 * Breathing room between form fields, full-width inputs,
 * and clean vertical rhythm.
 * ════════════════════════════════════════════════════════════ */

/* Grid rows: 2-col with comfortable gap */
.wpcf7 .msa-cf7-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

/* Force CF7 wrapper spans to block so inputs fill their grid cell */
.wpcf7 .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

/* All text-type inputs */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
}

/* Dropdown spacing */
.wpcf7 select {
    margin-bottom: 20px !important;
}

/* Textarea */
.wpcf7 textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
}

/* Submit button */
.wpcf7 input[type="submit"] {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Contact form mobile fixes ── */
@media (max-width: 767px) {
    .wpcf7 .msa-cf7-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 select,
    .wpcf7 textarea {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 16px !important;          /* prevents iOS zoom on focus */
        padding: 12px 14px !important;
    }

    .wpcf7 .wpcf7-form-control-wrap {
        display: block !important;
        width: 100% !important;
    }

    .wpcf7 select {
        margin-bottom: 14px !important;
    }

    .wpcf7 input[type="submit"] {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }
}

/* ─── About Page: "What Drives Us" section mobile fix ─── */
/* Scoped to About page only (local .elementor-7, prod .elementor-26) */
@media (max-width: 767px) {
    /* Force heading widget to full width so text-align works */
    .elementor-7 .elementor-element.elementor-element-002da52,
    .elementor-26 .elementor-element.elementor-element-002da52 {
        text-align: center !important;
        width: 100% !important;
    }

    /* Also target the h2 directly */
    .elementor-7 .elementor-element.elementor-element-002da52 .elementor-heading-title,
    .elementor-26 .elementor-element.elementor-element-002da52 .elementor-heading-title {
        text-align: center !important;
    }

    /* Reduce spacer between heading and paragraph */
    .elementor-7 .elementor-element.elementor-element-a172407,
    .elementor-26 .elementor-element.elementor-element-a172407 {
        --spacer-size: 6px !important;
    }
    .elementor-7 .elementor-element.elementor-element-a172407 .elementor-spacer-inner,
    .elementor-26 .elementor-element.elementor-element-a172407 .elementor-spacer-inner {
        height: 6px !important;
    }
}