/* =========================================================================
   S2B Consulting - Global Styles
   ========================================================================= */

/* Footer Mobile Centering Fix - Strictly for Mobile View */
@media (max-width: 768px) {
    .site-footer .footer-top {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 2rem !important;
        padding-top: 2rem !important;
    }

    /* Logo and Copyright Container */
    .site-footer .footer-top > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        gap: 0.25rem !important; /* Extremely reduced gap for mobile */
    }

    /* Menu Columns Wrapper (Navigation & Policies) */
    .site-footer .footer-top div[style*="gap: 4rem"] {
        flex-direction: column !important;
        gap: 2rem !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Individual Menu Columns */
    .site-footer .footer-top div[style*="gap: 1rem"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        gap: 1.25rem !important;
    }

    .site-footer .footer-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.85rem !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .footer-logo {
        justify-content: center !important;
        margin: 0 auto !important;
    }

    .footer-copyright {
        text-align: center !important;
        margin: 0 auto !important;
        font-size: 0.85rem !important;
    }

    .footer-divider {
        margin: 1.5rem 0 !important;
        width: 100% !important;
    }

    .footer-bottom {
        padding: 0 1rem !important;
        text-align: center !important;
    }

    .footer-bottom p {
        max-width: 100% !important;
        font-size: 0.8rem !important;
        line-height: 1.6 !important;
    }

    .footer-bottom a[href^="mailto:"] {
        display: block !important;
        margin-top: 1rem !important;
        font-size: 0.85rem !important;
    }
}

/* BRANDING LOGO - BUTTERY ENTRANCE */
.main-branding {
    padding: 1.25rem 0 0.25rem;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    opacity: 0;
    transform: translateY(-20px) scale(0.98);
    animation: butteryEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
    will-change: transform, opacity;
}

.main-logo-img {
    max-width: 225px; /* Increases header logo by 50% from previous 150px */
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.main-logo-img:hover {
    transform: scale(1.02);
    filter: brightness(1.05);
}

@keyframes butteryEntrance {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Footer specific logo adjustment */
.footer-logo .main-logo-img {
    margin: 0; /* Align left in footer */
    max-width: 150px; /* Footer logo size stays exactly as it is */
    transform: translateX(-4px); /* Vertical alignment nudge */
}

.footer-logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.footer-copyright {
    color: #9CA3AF;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Reduce space between footer logo and copyright text globally */
.site-footer .footer-top > div:first-child {
    gap: 0.25rem !important; /* Significant reduction from 1.5rem */
}

@media (max-width: 768px) {
    .main-branding {
        padding: 0.25rem 0 0 !important; /* Even tighter vertical gap */
    }
    .main-logo-img {
        max-width: 150px !important; /* Matches footer logo size exactly as requested */
    }
    .hero, .hero-section {
        padding-top: 0 !important; /* Eliminate top gap globally */
    }
    .hero-pill {
        display: none !important;
    }
    .footer-logo .main-logo-img {
        margin: 0 auto; /* Center on mobile */
        max-width: 150px !important; /* Keep footer logo at its standard small size */
        transform: none; /* Disable alignment nudge for centered layout */
    }

    /* Smaller Mobile Buttons */
    .btn-black, .btn-yellow, [class^="btn-"], a[class*="btn-"] {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
        width: auto !important;
        max-width: 90% !important;
        min-width: 160px !important;
        letter-spacing: 0.04em !important;
        white-space: nowrap !important;
        display: inline-flex !important;
    }

    /* Inner button structure adjustments */
    .btn-black::after, .btn-yellow::after {
        border-radius: 7px !important;
    }

    /* Spacing fixes for button containers on mobile */
    .reveal[style*="margin-top"] {
        margin-top: 1.75rem !important;
    }
}

/* =========================================================================
   S2B Consulting - Global Button Glow System (Fixed for PC & Mobile)
   Prevents "Hiding" in corners by using a massive centered square.
   ========================================================================= */

@keyframes border-glow-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* The Rotating Glow - Perfectly centered and sized to cover any button shape */
.btn-black::before, .btn-yellow::before {
    content: '' !important;
    position: absolute !important;
    z-index: -2 !important;
    left: 50% !important;
    top: 50% !important;
    width: 600px !important; /* Huge square covers all corners during rotation */
    height: 600px !important;
    margin-left: -300px !important; /* Perfect centering */
    margin-top: -300px !important;
    animation: border-glow-rotate 3s linear infinite !important;
    filter: blur(2.5px) !important; /* Soft, premium glow edges */
    opacity: 1 !important;
    transition: opacity 0.3s ease !important;
}

/* Color distinction: Yellow light for black buttons, White light for yellow buttons */
.btn-black::before {
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 15%,
        var(--yellow, #FFD700) 20%,
        var(--yellow, #FFD700) 30%,
        transparent 35%
    ) !important;
}

.btn-yellow::before {
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 15%,
        #FFFFFF 20%,
        #FFFFFF 30%,
        transparent 35%
    ) !important;
}

/* Ensure the button face is properly positioned above the glow */
.btn-black::after, .btn-yellow::after {
    content: '' !important;
    position: absolute !important;
    inset: 1.5px !important;
    z-index: -1 !important;
    border-radius: calc(var(--radius-sm, 8px) - 1.5px) !important; /* Perfect concentric curve */
    pointer-events: none !important;
}

.btn-black::after { background: var(--black, #0A0A0B) !important; }
.btn-yellow::after { background: var(--yellow, #FFD700) !important; }

/* Global Button Hover & Shadow Logic */
.btn-black, .btn-yellow {
    position: relative !important;
    overflow: hidden !important;
    border-radius: var(--radius-sm, 8px) !important; /* Sync outer radius */
    isolation: isolate !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-black:hover, .btn-yellow:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 159, 0, 0.2);
}

.btn-black:hover::after { background: #1F2937 !important; }
.btn-yellow:hover::after { background: #FDE047 !important; }

/* Subtle Mobile Optimization */
@media (max-width: 768px) {
    .btn-black, .btn-yellow, [class^="btn-"], a[class*="btn-"] {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
        width: auto !important;
        max-width: 90% !important;
        min-width: 160px !important;
        letter-spacing: 0.04em !important;
        white-space: nowrap !important;
        display: inline-flex !important;
    }
}