/*
Theme Name: Astra Child - Header Sidebar Redesign
Theme URI: http://als-tir-clichy-5.local/
Description: Custom child theme for ALS Tir Clichy header/sidebar layout
Author: ALS Dev
Version: 1.0
Template: astra
*/

/* ============================================
   Sidebar Navigation Layout (Desktop 922px+)
   ============================================ */

@media (min-width: 922px) {
    /* No separate top bar on desktop — the sidebar takes the
       full viewport height. #masthead (which contains the logo)
       is repurposed as the sidebar's header: shrunk to the
       sidebar's own width instead of spanning the full page. */
    .ast-builder-menu-1,
    .main-header-bar-navigation {
        /* !important on the box geometry: Astra's own JS
           recalculates header/nav width on scroll and resize
           for its (unused here) dropdown/mega-menu positioning,
           and was observed overriding these with inline styles,
           making the sidebar snap to full width after a scroll
           event. These guard against any such override. */
        position: fixed !important;
        left: 0 !important;
        top: 120px !important;
        width: 280px !important;
        height: calc(100vh - 120px) !important;
        background-color: #1B5E3A;
        padding: 0;
        /* Room for the fixed-position contact block pinned to
           the sidebar's bottom, so the last real menu item can
           scroll fully into view instead of sitting behind it. */
        padding-bottom: 110px;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 999;
        box-sizing: border-box;
        /* Astra's default header styles center this flex
           container's content vertically (built for a horizontal
           header bar); override so the menu sits at the top,
           stacked in a column with the contact menu item below
           it. */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    /* Reposition main content to account for sidebar. No top
       offset needed — the sidebar header only covers the left
       280px column, not the full page width. */
    .site-content {
        margin-left: 280px;
        margin-top: 0;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Footer sits outside .site-content, so it needs the same
       left offset — otherwise the fixed sidebar (which spans
       the full viewport height) covers its left 280px, hiding
       the footer contact info. */
    .site-footer {
        margin-left: 280px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Sidebar header: houses the logo, sits above the nav,
       same 280px width and green background so it reads as one
       continuous sidebar rather than a separate top bar. */
    #masthead {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 120px !important;
        background-color: #1B5E3A;
        z-index: 1000;
        box-sizing: border-box;
    }

    /* Sidebar menu list */
    .ast-builder-menu-1 .main-header-menu,
    .main-header-bar-navigation .main-header-menu {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: transparent;
        border: none;
        box-shadow: none;
        box-sizing: border-box;
    }

    /* Menu items styling */
    .ast-builder-menu-1 .menu-item,
    .main-header-bar-navigation .menu-item {
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-sizing: border-box;
    }

    /* Menu links */
    .ast-builder-menu-1 .menu-link,
    .main-header-bar-navigation .menu-link {
        display: block;
        color: #ffffff;
        text-decoration: none;
        padding: 12px 16px;
        font-size: 16px;
        transition: background-color 0.3s ease;
        box-sizing: border-box;
    }

    /* Hover state */
    .ast-builder-menu-1 .menu-item:hover .menu-link,
    .main-header-bar-navigation .menu-item:hover .menu-link {
        background-color: #2E7D4F;
    }

    /* Focus state for accessibility */
    .ast-builder-menu-1 .menu-link:focus,
    .main-header-bar-navigation .menu-link:focus {
        background-color: #2E7D4F;
        outline: 2px solid #ffffff;
        outline-offset: -2px;
    }

    /* Active menu item */
    .ast-builder-menu-1 .menu-item.current-menu-item .menu-link,
    .main-header-bar-navigation .menu-item.current-menu-item .menu-link {
        background-color: #2E7D4F;
        font-weight: bold;
    }

    /* Sidebar header logo. Astra's default row wrapper
       (.ast-primary-header-bar and friends) has its own height
       with the logo vertically centered inside it; force every
       ancestor row to match the 120px header so the centering
       happens inside a box that actually matches its real
       height (otherwise the logo gets clipped — see prior fix). */
    #masthead .ast-primary-header-bar,
    #masthead .site-primary-header-wrap,
    #masthead .ast-builder-grid-row,
    #masthead .site-header-primary-section-left,
    #masthead .site-header-primary-section-right {
        min-height: 120px;
        height: 120px;
        background-color: transparent !important;
    }

    #masthead .site-branding {
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 120px;
        box-sizing: border-box;
    }

    #masthead .site-logo-img img {
        max-height: 90px;
        width: auto;
    }

    /* .site-header-primary-section-right is the in-flow parent
       of the nav, but the nav itself (.main-header-bar-navigation)
       is pulled out via position:fixed above and renders fine
       regardless. Collapse this now-empty flex sibling to zero
       width so it doesn't push/shrink the logo's section. */
    #masthead .site-header-primary-section-right {
        flex: 0 0 0;
        width: 0;
        overflow: hidden;
    }

    /* Safety net: clip anything that would otherwise overflow
       the fixed 50px top bar. */
    #masthead {
        overflow: hidden;
    }
}

/* ============================================
   Hide Above-Header Bar (Task 5)
   ============================================ */

.ast-above-header-wrap,
.ast-above-header {
    display: none !important;
}

/* ============================================
   Primary Header Bar Color Fix
   Astra's primary header bar uses the theme's default blue
   global color. On desktop it's now the sidebar header, so it
   should be green like the rest of the sidebar; on mobile it's
   still a standalone top bar, so it stays dark gray.
   ============================================ */

@media (min-width: 922px) {
    .ast-primary-header-bar {
        background-color: #1B5E3A !important;
    }
}

@media (max-width: 921px) {
    .ast-primary-header-bar {
        background-color: #333333 !important;
    }
}

/* ============================================
   Sidebar Contact Info
   ============================================ */

/* Astra's page footer still shows the copyright line; give it
   the same green background so it doesn't clash. */
.site-footer {
    background-color: #1B5E3A;
}

/* The contact info is appended as the last <li> of the nav menu
   itself (see functions.php wp_nav_menu_items filter), so it
   renders inside both the desktop sidebar and mobile overlay
   automatically. Pin it to the bottom of the sidebar rather than
   flowing right after the last menu item — on desktop the
   sidebar is tall enough that "right after the menu" and "at the
   bottom" look very different. */
.footer-contact-menu-item {
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: none !important;
    margin-top: 8px !important;
}

@media (min-width: 922px) {
    .footer-contact-menu-item {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 280px !important;
        z-index: 1001 !important;
        background-color: #1B5E3A;
        box-sizing: border-box;
    }
}

.footer-contact {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.5;
    padding: 12px 16px;
    box-sizing: border-box;
}

.footer-contact p {
    margin: 0 0 8px 0;
}

.footer-contact a {
    color: #ffffff;
    text-decoration: none;
}

.footer-contact a:hover {
    text-decoration: underline;
}

.footer-social {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Privacy policy link merged inline into the fixed-bottom contact
   block (see als-privacy.php als_privacy_add_footer_link) instead
   of rendering as its own full-size menu item. */
.als-privacy-inline {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.als-privacy-inline-link {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

.als-privacy-inline-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Instagram (and any future social link) shows its full label,
   not an icon — the old fixed 32x32 box clipped the text. Size
   to content instead, styled as a small pill. */
.footer-social a {
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    white-space: nowrap;
}

/* ============================================
   Mobile Hamburger & Overlay (≤921px)
   ============================================ */

@media (max-width: 921px) {
    /* Hide desktop sidebar on mobile */
    .ast-builder-menu-1,
    .main-header-bar-navigation {
        display: none;
    }

    /* Minimal mobile top bar: hamburger only, no logo (the logo
       lives inside the sidebar overlay instead — see below). */
    #masthead {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 50px;
        background-color: #333333;
        z-index: 1000;
        overflow: hidden;
        box-sizing: border-box;
    }

    /* Logo hidden in the mobile top bar; shown instead pinned to
       the top of the sidebar overlay, only while it's open —
       mirrors the desktop sidebar's logo header. */
    #masthead .site-branding {
        display: none;
    }

    body.menu-open #masthead .site-branding {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 50px;
        left: 0;
        width: 280px;
        height: 90px;
        background-color: #1B5E3A;
        padding: 16px;
        z-index: 999;
        box-sizing: border-box;
    }

    body.menu-open #masthead .site-logo-img img {
        max-height: 70px;
        width: auto;
    }

    /* Mobile sidebar overlay (shown on menu toggle). Starts
       below the top bar (50px) + logo header (90px) that's
       pinned above it when open. */
    .ast-mobile-header-content {
        position: fixed;
        left: 0;
        top: 140px;
        width: 280px;
        height: calc(100vh - 140px);
        background-color: #1B5E3A;
        padding: 0;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 999;
    }

    /* Mobile menu visible when open */
    .ast-mobile-header-content.menu-open {
        transform: translateX(0);
    }

    /* Mobile menu list */
    .ast-mobile-header-content .main-header-menu {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    /* Mobile menu items */
    .ast-mobile-header-content .menu-item {
        width: 100%;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Mobile menu links */
    .ast-mobile-header-content .menu-link {
        display: block;
        color: #ffffff;
        text-decoration: none;
        padding: 12px 16px;
        font-size: 16px;
        transition: background-color 0.3s ease;
    }

    /* Mobile menu hover/active */
    .ast-mobile-header-content .menu-item:hover .menu-link,
    .ast-mobile-header-content .menu-item.current-menu-item .menu-link {
        background-color: #2E7D4F;
    }

    /* Remove left margin on mobile (no sidebar) */
    .site-content,
    .site-footer {
        margin-left: 0 !important;
    }

    /* Scrim/overlay background when menu open */
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
        display: block;
    }
}