/* ==========================================================
   Custom overrides – loaded AFTER app.min.css
   ========================================================== */

#root {
    position: relative;
    width: 100%;
}

/* Hero section: exactly fill the viewport above the fold, no white frame */
.wionhero-section2 {
    min-height: max(100vh, 600px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: calc(100% - 16px) !important;
    margin: 8px auto !important;
    border: none !important;
    border-radius: clamp(12px, 3vw, 20px) !important;
    box-shadow: none !important;
    overflow: hidden;
    padding-bottom: clamp(40px, 8vh, 80px);
}

/* Ensure the hero content wrapper fills the section */
.wionhero-section2 .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

/* On mobile, reduce height to dvh for precise math */
@supports (height: 100dvh) {
    .wionhero-section2 {
        min-height: max(100dvh, 600px);
    }
}

/* Consistent spacing: hero-to-next-section gap */
.wionabout-animation-section {
    padding-top: 80px;
}

/* Typography Refinement: Smaller but big, less trendy */
.wionhero-content2 h1 {
    font-size: clamp(36px, 7vw, 80px) !important;
    line-height: 1.1em !important;
    letter-spacing: -0.5px !important;
    font-family: "SatoshiBold", sans-serif;
}

/* Logo Text Styling */
.header-logo-text {
    font-family: "SatoshiBold", sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--heading-color);   /* default (scrolled state) = brand blue/dark */
    letter-spacing: -1px;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
    transition: color 0.35s ease;
}

/* White logo when nav is over hero (not scrolled) */
.header-logo-text.logo-white {
    color: #ffffff !important;
}

.header-logo-text:hover {
    color: var(--accent-color) !important;
}

.mobile-logo .header-logo-text,
.wionfooter-logo .header-logo-text {
    font-size: 24px;
}

/* Sidebar Logo */
.wionsidebar-header-icon .header-logo-text {
    font-size: 32px;
    margin-bottom: 20px;
}

.site-header .header-logo-text {
    font-size: 32px;
    margin-bottom: 0px !important;
    transition: color 0.4s ease;
}

/* ── Header base: glassmorphism pill floating over hero ───────────────────── */
.site-header.wionheader-section {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    top: 16px !important;  
    z-index: 1000;
    padding: 0 !important;
    /* At top: transparent with strong blur – text must be white */
    background-color: rgba(4, 13, 24, 0.22) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    box-shadow: 0 2px 24px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.14) !important;
    border-radius: 100px !important;
    width: 72% !important;
    max-width: 1400px !important;            
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.4s ease,
                backdrop-filter 0.4s ease,
                box-shadow 0.4s ease,
                width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 991px) {
    .site-header.wionheader-section {
        width: calc(100% - 16px) !important;
    }
}

/* Nav links: white when over hero (not scrolled) */
.site-header .wionmain-menu-item a,
.site-header nav.main-menu ul li a {
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

.site-header[data-scrolled="false"] .wionmain-menu-item a,
.site-header[data-scrolled="false"] nav.main-menu ul li a {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.site-header[data-scrolled="false"] .wionmain-menu-item a:hover,
.site-header[data-scrolled="false"] nav.main-menu ul li a:hover {
    color: #4ECDC4 !important;
}

/* Inner flex row: always space-between, never collapse */
.site-header .wionheader-main-menu {
    justify-content: space-between !important;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 6px 8px 24px;
    gap: 16px;
}

/* Nav stays right-aligned, near the CTA */
.site-header .wionmain-menu-item {
    flex: 0 0 auto;
    text-align: center;
}

/* Hero content breathing room below the fixed header */
.wionhero-content2 {
    padding-top: 100px;
}

/* ── Scrolled state: opaque white pill ───────────────────────────────────── */
.site-header.wionheader-section.sticky-menu {
    width: calc(100% - 32px) !important;
    background-color: rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
    max-width: 1920px !important; /* Allow the width expansion to seamlessly open up */
}

/* Nav links: brand colour when scrolled */
.site-header.sticky-menu .wionmain-menu-item a,
.site-header.sticky-menu nav.main-menu ul li a {
    color: var(--heading-color) !important;
    text-shadow: none;
}

.site-header.sticky-menu .wionmain-menu-item a:hover,
.site-header.sticky-menu nav.main-menu ul li a:hover {
    color: var(--accent-color) !important;
}

/* Scroll-down: KEEP IT VISIBLE, do not hide! */
.site-header.wionheader-section.hide-header {
    transform: translateX(-50%) !important;
    opacity: 1;
    pointer-events: auto;
    left: 50% !important;
}

@media (min-width: 992px) {
    .wionmenu-toggle.d-lg-none {
        display: none !important;
    }
}

/* Vertical alignment for logo */
.header-logo {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Sprint Header Button */
.wiondefault-btn.sprint-header-btn {
    padding: 17px 32px !important;
    border-radius: 50px !important;
}

.wiondefault-btn.sprint-header-btn::before {
    display: none !important;
}

/* Global Solid Turquoise Button */
.solid-turquoise-btn,
.site-header .solid-turquoise-btn,
.site-header .wiondefault-btn.solid-turquoise-btn {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--white-color) !important;
}

.solid-turquoise-btn i,
.site-header .solid-turquoise-btn i,
.site-header .wiondefault-btn.solid-turquoise-btn i {
    color: var(--white-color) !important;
}

.solid-turquoise-btn:hover,
.site-header .solid-turquoise-btn:hover,
.site-header .wiondefault-btn.solid-turquoise-btn:hover {
    background-color: var(--white-bg) !important;
    border-color: var(--accent-color) !important;
    color: var(--heading-color) !important;
}

/* ==========================================================
   MOBILE FIXES (≤ 991px)
   ========================================================== */

/* ── Bootstrap utility shims (Bootstrap not loaded globally) ── */
/* Hide desktop-only nav on mobile */
.d-none {
    display: none !important;
}

.d-lg-block {
    display: none !important;
}

@media (min-width: 576px) {
    .d-sm-flex {
        display: flex !important;
    }
}

@media (min-width: 992px) {
    .d-none {
        display: none !important;
    }

    .d-lg-block {
        display: block !important;
    }

    .d-lg-none {
        display: none !important;
    }

    .d-inline-block {
        display: inline-block !important;
    }
}

/* ── Mobile header layout ── */
@media (max-width: 991px) {

    /* Burger icon sizing and alignment */
    .wionmenu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 6px 10px;
        font-size: 22px;
        background: none;
        border: none;
        cursor: pointer;
        /* colour controlled via inline style from Header.jsx */
    }

    /* Header pill on mobile: match the 8px side margins visually -> absolute inset */
    .site-header.wionheader-section {
        width: calc(100% - 32px) !important;
        max-width: none !important;
    }

    /* Scrolled state on mobile: no width restriction */
    .site-header.wionheader-section.sticky-menu {
        max-width: none !important;
    }

    /* Hide the sprint button in header on mobile to keep it clean */
    .wiondefault-btn.sprint-header-btn {
        display: none !important;
    }

}

/* ── Hero section mobile ── */
@media (max-width: 991px) {
    .wionhero-content2 {
        padding-top: clamp(60px, 12vh, 100px);
        text-align: center;
    }
    
    .wionhero-content2 .mt-50 {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 767px) {
    /* Subtext paragraph: smaller on mobile */
    .wionhero-content2 p {
        font-size: clamp(0.95rem, 4vw, 1.15rem) !important;
    }

    /* Reduce the gap between headline and subtext on small screens */
    .wionhero-content2 .mt-50 {
        margin-top: clamp(20px, 4vh, 30px) !important;
    }

    /* Hero: prevent horizontal overflow */
    .wionhero-section2 {
        overflow-x: hidden;
    }
}

/* ── General section padding on mobile ── */
@media (max-width: 767px) {
    .wionsection-padding {
        padding: 60px 0 !important;
    }

    /* Prevent any section from causing horizontal scroll */
    section,
    .wionabout-animation-section,
    .wiondefault-bg {
        overflow-x: hidden;
    }
}

/* ── About animation section: disable parallax images on mobile ── */
@media (max-width: 991px) {
    .wionabout-animation-wrap .animated-image {
        display: none;
    }

    .wionabout-content4 {
        text-align: center;
        padding: 60px 20px;
    }

    .wionabout-content4 h3 {
        font-size: 1.4rem !important;
        line-height: 1.5 !important;
    }

    .wionabout-content4 .mt-50 {
        display: flex;
        justify-content: center;
    }
}

/* ── Service items: horizontal overflow guard ── */
@media (max-width: 767px) {
    .wionservice-image-reveal-wraper {
        overflow: hidden;
    }

    .wionservice-wrap {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* ── Portfolio / Project cards: ensure single-column on mobile ── */
@media (max-width: 767px) {
    .wionp-wraper {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .wionp-item {
        width: 100% !important;
    }

    .wionp-wrap.wrap2,
    .wionp-wrap.wrap3 {
        margin-top: 0 !important;
    }
}

/* ── mx-auto shim (utility not globally defined) ── */
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── Mobile menu popup: sleek glass ── */
.wionmenu-wrapper {
    background: rgba(4, 13, 24, 0.6) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
}
.wionmobile-menu ul li a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500;
}
.wionmobile-menu ul li a:hover {
    color: #4ECDC4 !important;
}