/*
 Theme Name:   Abuild Child
 Theme URI:    https://demo.rstheme.com/wordpress/abuild/
 Description:  Abuild Child
 Author:       RSTheme
 Author URI:   http://rstheme.com
 Template:     abuild
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
 */

/* =============================================================
   ABUILD CHILD THEME — DEMO IMPORT FIXES
   Corrects Elementor kit defaults that weren't imported:
   - Container max-width (1140px kit default → 1315px theme spec)
   - Global typography CSS variables for h1–h6 + body
   ============================================================= */

/* Load Jost font (Barlow is already loaded by theme defaults) */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── 1. Container max-width fix ──────────────────────────────── */
/* The imported kit set 1140px; the theme spec is 1315px.
   Using body prefix for higher specificity than the kit's .e-con rule. */

body .e-con {
    --container-max-width: 1315px;
}

body .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1315px;
}

@media (max-width: 1024px) {
    body .e-con {
        --container-max-width: 1024px;
    }
    body .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 1024px;
    }
}

@media (max-width: 767px) {
    body .e-con {
        --container-max-width: 767px;
    }
    body .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 767px;
    }
}

/* ── 2. Elementor global typography variables (kit never imported) ─ */
/* These IDs match the theme's elementor-kit.zip / site-settings.json */

.elementor-kit-9 {
    /* ── System colours ── */
    --e-global-color-primary:   #255290;
    --e-global-color-secondary: #0E0E0E;
    --e-global-color-text:      #555555;
    --e-global-color-accent:    #39CA6E;
    /* Custom palette */
    --e-global-color-8e1049e:   #0E0E0E; /* Heading */
    --e-global-color-3924737:   #F8F8F8; /* Gray */

    /* ── Body — Barlow 16px/400 ── */
    --e-global-typography-cad7119-font-family: "Barlow";
    --e-global-typography-cad7119-font-size:   16px;
    --e-global-typography-cad7119-font-weight: 400;
    --e-global-typography-cad7119-line-height: 26px;

    /* H1 — Jost 80px/800 */
    --e-global-typography-a73083e-font-family: "Jost";
    --e-global-typography-a73083e-font-size:   80px;
    --e-global-typography-a73083e-font-weight: 800;
    --e-global-typography-a73083e-line-height: 94px;

    /* H2 — Jost 52px/600 */
    --e-global-typography-cb11fa9-font-family: "Jost";
    --e-global-typography-cb11fa9-font-size:   52px;
    --e-global-typography-cb11fa9-font-weight: 600;
    --e-global-typography-cb11fa9-line-height: 62px;

    /* H3 — Jost 32px/600 */
    --e-global-typography-bd1aed0-font-family: "Jost";
    --e-global-typography-bd1aed0-font-size:   32px;
    --e-global-typography-bd1aed0-font-weight: 600;
    --e-global-typography-bd1aed0-line-height: 42px;

    /* H4 — Jost 24px/600 */
    --e-global-typography-434b778-font-family: "Jost";
    --e-global-typography-434b778-font-size:   24px;
    --e-global-typography-434b778-font-weight: 600;
    --e-global-typography-434b778-line-height: 34px;

    /* H5 — Jost 16px/600 */
    --e-global-typography-4bfa35c-font-family: "Jost";
    --e-global-typography-4bfa35c-font-size:   16px;
    --e-global-typography-4bfa35c-font-weight: 600;
    --e-global-typography-4bfa35c-line-height: 26px;

    /* H6 — Jost 14px/600 */
    --e-global-typography-f37ae15-font-family: "Jost";
    --e-global-typography-f37ae15-font-size:   14px;
    --e-global-typography-f37ae15-font-weight: 600;
    --e-global-typography-f37ae15-line-height: 24px;
}

/* ── 3. Body & heading font families (belt-and-suspenders) ────── */
/* Ensures Barlow/Jost are applied even when Elementor falls back
   to the kit's Roboto primary typography. */

html, body {
    font-family: "Barlow", sans-serif;
    font-size:   16px;
    line-height: 1.625;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Jost", sans-serif;
}

/* Elementor heading widgets that explicitly use the Roboto primary global */
.elementor-widget-heading .elementor-heading-title {
    font-family: "Jost", sans-serif;
}

/* ── 4. rs-iconbox: replace arrow icons with checkmarks ────────── */
/* Hides the arrow-circle SVG and draws an orange check-circle
   using an inline SVG background — reliable without font loading. */

.elementor-widget-rs-iconbox .icon-area .e-far-arrow-alt-circle-right {
    display: none !important;
}

.elementor-widget-rs-iconbox .icon-area {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23255290' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
}

/* Remove the ::before since we're using background-image now */
.elementor-widget-rs-iconbox .icon-area::before {
    content: none !important;
    display: none !important;
}

/* Title text — match demo orange colour */
.elementor-widget-rs-iconbox .iconbox-title h5.title {
    color: #255290 !important;
    font-weight: 700;
}

/* ── 5. (Removed override — Elementor DB already has element.png set.
   post-31.css was stale. Fixed directly in the CSS cache below.) */

/* ── 5a. Portfolio slider content positioning fix ────────────────
   Elementor set bottom:-300px (bottom-slide intent) but the plugin's
   style1 uses left-slide (top:30px / left:-200px). These conflict.
   We fully switch to a clean bottom-slide approach:
   - Default: hidden below the card via bottom:-120px, opacity:0
   - Hover / slick-current: slides to bottom:0, opacity:1
   Also fix .p-title a background — inline <a> creates per-line
   boxes when text wraps; move bg to .portfolio-content wrapper. */

.elementor-31 .elementor-element.elementor-element-1096935
    .rs-portfolio-slider .portfolio-item .portfolio-content {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -120px !important;
    visibility: visible !important;
    opacity: 0 !important;
    padding: 20px 24px 24px !important;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 100%) !important;
    transition: bottom 0.4s ease, opacity 0.4s ease !important;
    overflow: hidden !important;
}

/* Show on hover or when slide is active */
.elementor-31 .elementor-element.elementor-element-1096935
    .rs-portfolio-slider .portfolio-item:hover .portfolio-content,
.elementor-31 .elementor-element.elementor-element-1096935
    .rs-portfolio-slider .grid-item.slick-current .portfolio-item .portfolio-content {
    bottom: 0 !important;
    opacity: 1 !important;
}

/* Remove per-line black box from <a> — background is now on the wrapper */
.elementor-31 .elementor-element.elementor-element-1096935
    .rs-portfolio .portfolio-item .p-title a {
    background-color: transparent !important;
    padding: 0 !important;
}

/* Keep text white and readable */
.elementor-31 .elementor-element.elementor-element-1096935
    .rs-portfolio-slider .portfolio-item .portfolio-content .p-title a,
.elementor-31 .elementor-element.elementor-element-1096935
    .rs-portfolio-slider .portfolio-item .portfolio-content .p-category a {
    color: #fff !important;
}

/* ── 6a. Team member name font size ──────────────────────────────
   Default is 24px — reduced to 20px so longer names like
   "Kuttyamma Michael" stay on one line and don't crop the photo. */
.rs-team-grid .team-item .team-content .team-name {
    font-size: 20px !important;
    line-height: 28px !important;
}

/* ── 6. Team grid → Slick slider ────────────────────────────────
   Slick uses float:left internally — we must NOT override that.
   We only need to neutralise Bootstrap column width constraints
   so Slick can set its own slide widths. */

/* ── 6. Team grid — 5-column layout ─────────────────────────────
   The widget uses col-lg-4 (3 cols). Override to 5 columns,
   with consistent card height, image sizing, and subtle shadow. */

/* 5 equal columns on desktop */
.elementor-widget-rsteam .team-style-column {
    width: 20% !important;
    max-width: 20% !important;
    flex: 0 0 20% !important;
    padding: 0 10px 20px !important;
}

@media (max-width: 1024px) {
    .elementor-widget-rsteam .team-style-column {
        width: 33.333% !important;
        max-width: 33.333% !important;
        flex: 0 0 33.333% !important;
    }
}
@media (max-width: 768px) {
    .elementor-widget-rsteam .team-style-column {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
}
@media (max-width: 480px) {
    .elementor-widget-rsteam .team-style-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Consistent image height + positioning context for social icons.
   Theme rule (.team-grid-style1 .team-item .image-wrap img) has higher
   specificity (4 classes) so we need !important on height/object-fit. */
.elementor-widget-rsteam .image-wrap {
    position: relative !important;
    height: 240px !important;
    overflow: hidden !important;
}
.elementor-widget-rsteam .image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
}

/* Subtle card shadow — no overflow:hidden so text below image isn't clipped */
.elementor-widget-rsteam .team-item {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    background: #fff;
    transition: box-shadow 0.3s;
}
/* Clip only the image corners, not the text content */
.elementor-widget-rsteam .team-item .image-wrap {
    border-radius: 8px 8px 0 0;
}
.elementor-widget-rsteam .team-item:hover {
    box-shadow: 0 8px 28px rgba(37,82,144,0.14);
}

/* Social icons: use the theme's original slide-from-right tab behaviour.
   Only restore the primary colour (was orange, now navy). */
.team-grid-style1 .team-item .image-wrap .social-icons {
    background-color: #255290;
}

/* ── 7. Sticky header logo → white transparent version ──────────
   The sticky header (slides in on scroll-up) has a black background
   (Elementor template post 14922, element 6a949e5).
   Using CSS content: url() to swap the img src without touching the DB. */

.elementor-14922 .elementor-element.elementor-element-6a949e5 .hfe-site-logo-container img {
    content: url('../../uploads/2026/06/michael_michael_logo_white_transparent.png');
    height: 55px !important;
    width: auto !important;
}

/* ── 8. Child theme logo.php override (non-sticky header) ────────
   Hide the white logo link everywhere by default — only used if
   the non-sticky header also needs the white logo in future. */
.logo-area .mm-logo-white-link {
    display: none !important;
}

/* ── 9. "Who We Are" section — iconbox text alignment fix ────────
   Elementor sets text-align:center on all 4 credential items
   (fb86873, 9f47e83, 5f83a8f, 6655461 in post-31).
   This causes center-aligned wrapping (e.g. "PWD A-Class /
   Registered / Contractor"). Fix to left-align so wrapped
   text is flush with the start of the text block. */

.elementor-31 .elementor-element.elementor-element-fb86873 .rs-iconbox-area .box-inner,
.elementor-31 .elementor-element.elementor-element-9f47e83 .rs-iconbox-area .box-inner,
.elementor-31 .elementor-element.elementor-element-5f83a8f .rs-iconbox-area .box-inner,
.elementor-31 .elementor-element.elementor-element-6655461 .rs-iconbox-area .box-inner {
    text-align: left !important;
    align-items: center !important;
}

/* Also left-align the title text inside each iconbox */
.elementor-31 .elementor-element.elementor-element-fb86873 .iconbox-title,
.elementor-31 .elementor-element.elementor-element-9f47e83 .iconbox-title,
.elementor-31 .elementor-element.elementor-element-5f83a8f .iconbox-title,
.elementor-31 .elementor-element.elementor-element-6655461 .iconbox-title {
    text-align: left !important;
}

/* Add gap between checkmark icon and text — padding is consumed by
   box-sizing: border-box so use margin-right instead */
.elementor-31 .elementor-element.elementor-element-fb86873 .icon-area,
.elementor-31 .elementor-element.elementor-element-9f47e83 .icon-area,
.elementor-31 .elementor-element.elementor-element-5f83a8f .icon-area,
.elementor-31 .elementor-element.elementor-element-6655461 .icon-area {
    margin-right: 12px !important;
    flex-shrink: 0;
}

/* Make both columns equal width so items have room to breathe */
.elementor-31 .elementor-element.elementor-element-82541cf {
    --width: 50% !important;
}
.elementor-31 .elementor-element.elementor-element-f7d2c6d {
    --width: 50% !important;
}

/* Team section: taller member photos so people are more visible */
.rs-team-slider .team-item .image-wrap img,
.rs-team-grid .team-item .image-wrap img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: top center;
}
@media (max-width: 767px) {
    .rs-team-slider .team-item .image-wrap img,
    .rs-team-grid .team-item .image-wrap img {
        height: 340px;
    }
}