/**
 * Ultracube — Visual Polish Fixes (2026-05-30)
 *
 * Fixes:
 *  1. Mobile horizontal overflow
 *  2. Heading size consistency
 *  3. Button style unification
 *  4. Mobile header height reduction
 *  5. VC column gap fix on mobile
 *  6. Portfolio card polish
 *  7. Font Awesome icon fallback fix
 *
 * Load this AFTER the main theme stylesheet.
 */

/* ============================================================
 * 01. Mobile horizontal overflow fix
 * ============================================================ */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* VC column gap overflow — prevent 30px gap from pushing past viewport */
    .vc_row.vc_column-gap-30 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .vc_row.vc_column-gap-30 > .vc_column_container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ============================================================
 * 02. Heading scale — consistent hierarchy
 * ============================================================ */
/* NOTE: theme sets html{font-size:10px}, so 1rem=10px. Use px for clamps. */
h1, .h1, .vc_custom_heading h1, .vc_custom_heading.h1,
.wpb_content_element h1, .grd_title-type-4 .title {
    font-size: clamp(32px, 5vw, 52px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}
h2, .h2, .vc_custom_heading h2, .vc_custom_heading.h2,
.wpb_content_element h2, .grd_title-type-4 .desc {
    font-size: clamp(24px, 3.5vw, 36px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}
h3, .h3, .vc_custom_heading h3, .vc_custom_heading.h3,
.wpb_content_element h3 {
    font-size: clamp(18px, 2vw, 22px) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}
h4, .h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Site title (logo text) — keep compact */
.site-title {
    font-size: clamp(20px, 3vw, 32px) !important;
}

/* Override for portfolio card titles — keep them smaller */
.portfolio-wrapper .entry-content .title,
.portfolio-wrapper h3.entry-title {
    font-size: 16px !important;
    font-weight: 600 !important;
}
@media (max-width: 768px) {
    .portfolio-wrapper .entry-content .title,
    .portfolio-wrapper h3.entry-title {
        font-size: 15px !important;
    }
}

/* ============================================================
 * 03. Button unification
 * ============================================================ */
/* Primary CTA buttons — consistent style */
.btn, .button, a.button, input[type="submit"],
.vc_btn3, .vc_general.vc_btn3, .grd-btn,
[class*="vc_btn"], .wp-block-button__link,
.portfolio-wrapper .entry-read-more {
    display: inline-block !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
}
@media (max-width: 480px) {
    .btn, .button, a.button, input[type="submit"],
    .vc_btn3, .vc_general.vc_btn3, .grd-btn,
    [class*="vc_btn"], .wp-block-button__link {
        padding: 10px 20px !important;
        font-size: 13px !important;
    }
}

/* Primary (green fill) */
.btn-primary,
.button.primary,
.vc_btn3-color-green,
.vc_btn3.vc_btn3-color-green,
.grd-btn-primary,
.grd-btn--primary {
    background: #86a610 !important;
    color: #fff !important;
    border-color: #86a610 !important;
}
.btn-primary:hover,
.button.primary:hover {
    background: #739108 !important;
    border-color: #739108 !important;
}

/* Secondary (outline) */
.btn-outline,
.button.outline,
.vc_btn3-color-grey {
    background: transparent !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}
.btn-outline:hover,
.button.outline:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

/* ============================================================
 * 04. Mobile header — reduce height
 * ============================================================ */
@media (max-width: 767px) {
    /* Collapse the bulky topbar */
    .header-v1 .topbar {
        height: auto !important;
        min-height: 0 !important;
        padding: 6px 0 !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 12px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
    .header-v1 .topbar:before {
        display: none !important;
    }

    /* Shrink logo padding */
    .site-logo {
        padding-top: 0.6em !important;
        padding-bottom: 0.6em !important;
    }
    .site-logo img {
        max-height: 44px !important;
        width: auto !important;
    }

    /* Hide bulky top-bar widgets on mobile */
    .header-bar {
        padding: 0 !important;
    }
    .header-bar .highlights {
        display: none !important;
    }

    /* Mobile menu toggle — compact */
    .header-v1 .main-navigation {
        padding: 4px 0 !important;
    }

    /* Hero section — tighter padding */
    .vc_row.vc_custom_services {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* Service icon boxes — smaller */
    .vc_column_container .vc_icon_element {
        margin-bottom: 8px !important;
    }
}

/* ============================================================
 * 05. Portfolio card grid — consistent spacing
 * ============================================================ */
.portfolio-wrapper {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 24px !important;
}
@media (max-width: 480px) {
    .portfolio-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* ============================================================
 * 06. Font Awesome — ensure icons render
 * ============================================================ */
.fa, .fab, .fas, .far, [class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased !important;
}

/* ============================================================
 * 07. Body text — better readability
 * ============================================================ */
body {
    font-family: "DM Sans", -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #1e293b !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ============================================================
 * 08. Links — consistent hover
 * ============================================================ */
a {
    transition: color 0.2s ease !important;
}

/* ============================================================
 * 09. Image rendering
 * ============================================================ */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* ============================================================
 * 10. Section spacing
 * ============================================================ */
.vc_row {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
@media (max-width: 767px) {
    .vc_row {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
}