/*
Theme Name: Modus Digital Custom
Version: 1.2.0
Description: Consolidated styles for Hero, USPs, Blog, and Buttons.
*/

/* --- 1. DESIGN TOKENS --- */
:root {
    --md-primary: #376B8E;
    --md-danger: #dc3545;
    --md-white: #ffffff;
    --md-black: #000000;
    --transition: all 0.3s ease;
    --font-heading: 'Arimo', sans-serif;
    --font-body: 'Mulish', sans-serif;
}

/* --- 2. GLOBAL BUTTON STYLES --- */

/* Initial State: White border button (Modus Style) */
.btn.btn-outline-danger.mt-2 {
    color: var(--md-white) !important;
    background-color: transparent !important;
    border: 2px solid var(--md-white) !important;
    transition: var(--transition);
    text-transform: none;
    font-weight: 600;
}

/* Hover State: Black background */
.btn.btn-outline-danger.mt-2:hover,
.btn.btn-outline-danger.mt-2:focus {
    color: var(--md-white) !important;
    background-color: var(--md-black) !important;
    border-color: var(--md-black) !important;
    box-shadow: none !important;
}

/* --- 3. HERO CAROUSEL & BUTTON ALIGNMENT --- */

/* Fix clipping and ensure hero fills space correctly */
#carouselPageHeader .carousel-item,
#carouselHomepageHeader .carousel-item {
    aspect-ratio: auto !important;
    min-height: 600px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding-bottom: 5rem !important;
}

/* Container for buttons in Hero - THE FLEX FIX */
.carousel-caption .d-inline.align-start {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 1rem !important; /* Space only between buttons */
    margin-top: 1.5rem !important;
    margin-left: 0 !important;
}

/* Kill existing margins that cause the "extra gap" */
.carousel-caption .d-inline.align-start a.btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: inline-block !important;
}

/* Specific rule to ensure no margin-left exists on the second button */
.carousel-caption .d-inline.align-start a.btn + a.btn {
    margin-left: 0 !important;
}

/* --- 4. USP SECTION STYLES --- */

.md-usp-item {
    text-align: center;
    padding: 1.5rem;
    transition: transform 0.3s ease;
}

.md-usp-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 1.25rem;
    background-color: rgba(55, 107, 142, 0.1); /* Soft Modus Blue */
    color: var(--md-primary);
    font-size: 2rem;
    border-radius: 50%; /* Round background */
    transition: var(--transition);
}

.md-usp-item h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin: 0;
}

.md-usp-item:hover i {
    background-color: var(--md-primary);
    color: var(--md-white);
}

/* --- 5. SECTION SPACING (Steps & Testimonials) --- */

.md-steps-vertical, 
.md-testimonial-section {
    display: block;
    position: relative;
    clear: both;
}

.md-steps-vertical {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
}

.md-testimonial-section {
    margin-top: clamp(3.5rem, 8vw, 6.25rem) !important;
    margin-bottom: clamp(3.5rem, 8vw, 6.25rem) !important;
}

/* --- 6. BLOG & TYPOGRAPHY --- */

.md-blog-body h2 {
    font-size: clamp(1.725rem, 1.529rem + 0.524vw, 2rem);
    margin-top: 3.5rem;
    margin-bottom: 1.25rem;
}

.md-blog-body p {
    font-size: clamp(1.125rem, 1.036rem + 0.238vw, 1.25rem);
    line-height: 1.6;
}

/* Blog Hover Logic */
.md-blog-card-image-wrap, .md-blog-panel {
    position: relative;
    overflow: hidden;
}

.md-blog-card-image-wrap::after, .md-blog-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(55, 107, 142, 0) 0%, rgba(55, 107, 142, 0.6) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.md-blog-card:hover .md-blog-card-image-wrap::after,
.md-blog-panel:hover::after {
    opacity: 1;
}

/* --- 7. RESPONSIVE ADJUSTMENTS --- */

@media (max-width: 991px) {
    .md-steps-vertical {
        margin-top: 3.75rem !important;
        margin-bottom: 3.75rem !important;
    }
}

@media (max-width: 767px) {
    /* Stack buttons and remove horizontal gap */
    .carousel-caption .d-inline.align-start {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.75rem !important;
    }

    .carousel-caption .d-inline.align-start a.btn {
        width: 100% !important;
        margin-left: 0 !important;
    }

    #carouselPageHeader .carousel-item {
        min-height: 100vh !important;
        padding-bottom: 2.5rem !important;
        justify-content: center !important;
    }

    .md-steps-vertical {
        margin-top: 1.875rem !important;
        margin-bottom: 1.875rem !important;
    }
}

@media (max-width: 576px) {
    .md-usp-item i {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}