/* ==========================================================================
   Picoty DP Fioul - Standardized Mobile Header & Navigation CSS
   ========================================================================== */

/* Variables and design tokens fallback if not defined in root */
:root {
    --picoty-primary: #008081;
    --picoty-primary-dark: #004041;
    --picoty-primary-light: #009e9f;
    --picoty-primary-soft: #e6f3f3;
    --picoty-dark: #1f2933;
    --picoty-muted: #6b7280;
    --teal-dark: #004041;
    --trans-fast: 0.3s ease;
}

/* Hide mobile-specific navigation elements on desktop by default */
.logo-text-mobile,
.hamburger,
.mobile-nav {
    display: none;
}

/* Mobile-only styling under 992px breakpoint */
@media (max-width: 992px) {
    
    /* ── Internal Page Standardized Header ──────────────── */
    body.is-internal-page .main-header {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 72px !important;
        background: #ffffff !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
        border-bottom: 1px solid #f0f0f0 !important;
        padding: 0 20px !important;
        justify-content: space-between !important;
        align-items: center !important;
        z-index: 1040 !important; /* Ensure it lies directly below drawer panel backdrop */
        box-sizing: border-box !important;
    }

    body.is-internal-page .main-header .logo {
        color: var(--picoty-primary) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        font-family: 'Ubuntu', sans-serif !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        font-size: 1.25rem !important;
        text-decoration: none !important;
    }

    body.is-internal-page .main-header .logo img {
        max-height: 44px !important;
        height: 44px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    body.is-internal-page .main-header .logo-text-mobile {
        display: inline-block !important;
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        color: var(--picoty-primary) !important;
        letter-spacing: 0.5px !important;
    }

    body.is-internal-page .main-header .nav-links {
        display: none !important;
    }

    body.is-internal-page .main-header .header-actions {
        display: none !important;
    }

    body.is-internal-page .main-header .search-box {
        display: none !important;
    }

    /* ── Hamburger Button ───────────────────────────────── */
    .hamburger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        width: 44px !important;
        height: 44px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        border-radius: 8px !important;
        transition: background var(--trans-fast) !important;
        z-index: 1045 !important;
        padding: 4px !important;
        box-sizing: border-box !important;
    }

    .hamburger:hover {
        background: rgba(0, 128, 129, 0.08) !important;
    }

    .hamburger span {
        display: block !important;
        width: 24px !important;
        height: 2px !important;
        background: var(--picoty-dark) !important;
        border-radius: 2px !important;
        transition: all 0.35s cubic-bezier(.23,1,.32,1) !important;
        transform-origin: center !important;
    }

    .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }

    .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }

    /* ── Mobile Navigation Drawer ───────────────────────── */
    .mobile-nav {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        z-index: 1050 !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }

    .mobile-nav.open {
        pointer-events: all !important;
    }

    .mobile-nav-backdrop {
        position: absolute !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        opacity: 0 !important;
        transition: opacity 0.35s ease !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .mobile-nav.open .mobile-nav-backdrop {
        opacity: 1 !important;
    }

    .mobile-nav-panel {
        position: absolute !important;
        top: 0 !important;
        right: -100% !important;
        width: min(320px, 92vw) !important;
        height: 100vh !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        transition: right 0.38s cubic-bezier(.23, 1, .32, 1) !important;
        box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18) !important;
        box-sizing: border-box !important;
    }

    .mobile-nav.open .mobile-nav-panel {
        right: 0 !important;
    }

    .mobile-nav-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 16px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        min-height: 72px !important;
        box-sizing: border-box !important;
    }

    .mobile-nav-header img {
        max-height: 40px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .mobile-nav-header-title {
        font-family: 'Ubuntu', sans-serif !important;
        font-weight: 700 !important;
        font-size: 1.15rem !important;
        color: var(--picoty-primary) !important;
        margin-left: 8px !important;
        text-transform: uppercase !important;
        flex: 1 !important;
        text-align: left !important;
    }

    .mobile-nav-close {
        width: 36px !important;
        height: 36px !important;
        background: #f5f5f5 !important;
        border: none !important;
        cursor: pointer !important;
        border-radius: 50% !important;
        font-size: 1.1rem !important;
        color: var(--picoty-dark) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: background var(--trans-fast) !important;
        box-sizing: border-box !important;
    }

    .mobile-nav-close:hover {
        background: var(--picoty-primary-soft) !important;
        color: var(--picoty-primary) !important;
    }

    .mobile-nav-links {
        flex: 1 !important;
        padding: 12px 0 !important;
        box-sizing: border-box !important;
    }

    .mobile-nav-links a,
    .mobile-nav-links .mob-group-title {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 16px !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: var(--picoty-dark) !important;
        text-decoration: none !important;
        border-bottom: 1px solid #f5f5f5 !important;
        transition: background var(--trans-fast) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    .mobile-nav-links a:hover,
    .mobile-nav-links .mob-group-title:hover {
        background: var(--picoty-primary-soft) !important;
        color: var(--picoty-primary) !important;
    }

    .mobile-nav-links .mob-group-title i {
        transition: transform 0.3s ease !important;
        font-size: 0.7rem !important;
        color: var(--picoty-muted) !important;
    }

    .mobile-nav-links .mob-group-title.open i {
        transform: rotate(180deg) !important;
    }

    .mobile-submenu {
        overflow: hidden !important;
        max-height: 0 !important;
        transition: max-height 0.35s ease !important;
        background: var(--picoty-primary-soft) !important;
        box-sizing: border-box !important;
    }

    .mobile-submenu.open {
        max-height: 400px !important;
    }

    .mobile-submenu a {
        padding: 10px 16px 10px 24px !important;
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        text-transform: none !important;
        color: var(--picoty-dark) !important;
        border-bottom: 1px solid rgba(0, 128, 129, 0.08) !important;
    }

    .mobile-submenu a:hover {
        color: var(--picoty-primary) !important;
        background: rgba(0, 128, 129, 0.12) !important;
    }

    .mobile-nav-footer {
        padding: 16px 16px !important;
        border-top: 1px solid #f0f0f0 !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    .mobile-nav-footer .btn-primary {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 48px !important;
        background: var(--picoty-orange, #ffad33) !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        transition: background var(--trans-fast) !important;
        gap: 8px !important;
        padding: 8px 16px !important;
        box-sizing: border-box !important;
    }

    .mobile-nav-footer .btn-primary:hover {
        background: var(--picoty-orange-light, #ffc966) !important;
    }
}

/* ==========================================================================
   Internal Page Standardized Hero & Container Styles
   ========================================================================== */

.internal-page-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
    position: relative;
    z-index: 3;
    box-sizing: border-box;
}

.internal-hero-content {
    width: 100%;
    max-width: 760px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    box-sizing: border-box;
}

/* Ensure inner-hero and internal-hero are flex containers aligned to the left */
.inner-hero, .internal-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

/* Clean up sub-elements to ensure they align nicely to the left */
.inner-hero-title, .internal-hero h1 {
    text-align: left !important;
    margin-left: 0 !important;
}

.inner-hero-subtitle, .internal-hero p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 650px !important;
}

.hero-btns {
    justify-content: flex-start !important;
    margin-left: 0 !important;
}

.inner-accent {
    margin-left: 0 !important;
}

.breadcrumb {
    justify-content: flex-start !important;
    margin-left: 0 !important;
}

/* Responsiveness overrides */
@media (max-width: 1024px) {
    .internal-page-container {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}

@media (max-width: 767px) {
    .internal-page-container {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
    
    .internal-hero-content {
        max-width: 100% !important;
    }
    
    .inner-hero-title, .internal-hero h1 {
        font-size: 2.2rem !important;
    }
    
    .inner-hero-subtitle, .internal-hero p {
        font-size: 1.05rem !important;
    }
}