/**
 * My Account Sidebar - CSS Grid Dynamic Layout
 *
 * Makes content area automatically adjust width based on sidebar state.
 * Uses CSS Grid for modern, precise control.
 *
 * @package My_Account_Extensions
 * @version 1.0.0
 * @since 2025-10-21
 * @lastmod 2025-10-23
 * @session 2025-10-21 | 17:07 (Initial implementation)
 * @session 2025-10-23 | 13:53 (Layout fixes: align-items, fallback width, transition)
 *
 * IMPORTANT: This CSS works WITH the existing Elementor structure.
 * No database changes, no Elementor structure modifications.
 *
 * Required Setup (User does this in Elementor editor):
 * 1. Main container (top-level): Add CSS class "my-account-layout-wrapper"
 * 2. Sidebar container: Keep existing "sidebar-wrapper" class
 * 3. Content container: Keep existing "content-wrapper" class
 *
 * How It Works:
 * - CSS Grid creates two columns: [sidebar] [content]
 * - Sidebar column width controlled by --sidebar-current-width variable
 * - Content column uses 1fr (takes remaining space)
 * - JavaScript updates --sidebar-current-width when toggle is clicked
 * - Smooth transitions between expanded (250px) and minimized (60px)
 */

/* ============================================================================
   CSS Custom Properties - Updated by JavaScript
   ============================================================================ */

:root {
    /* Current sidebar width - Set dynamically by Elementor control
     * Session (2025-10-21 | 17:30): Reads actual sidebar width from DOM
     * Session (2025-10-24 | 13:13): Bound to Elementor sidebar width control
     *
     * Elementor control automatically outputs: --sidebar-current-width: {{SIZE}}{{UNIT}};
     * JavaScript also updates this on page load and toggle for dynamic state changes
     *
     * This fallback is only used if Elementor CSS fails to load (extremely rare)
     */
    --sidebar-current-width: 250px; /* Fallback only - real value from Elementor control */

    /* Gap between sidebar and content columns */
    --layout-gap: 0px;
}

/* ============================================================================
   CSS Grid Layout - Main Container
   ============================================================================ */

/**
 * Main container with CSS Grid
 *
 * Grid structure: [sidebar column] [content column]
 * - Column 1: var(--sidebar-current-width) - sidebar width (changes on toggle)
 * - Column 2: 1fr - content takes all remaining space
 */
.my-account-layout-wrapper {
    display: grid !important;
    grid-template-columns: var(--sidebar-current-width) 1fr;
    align-items: start; /* Each grid item keeps its own height (no vertical stretching) */
    gap: var(--layout-gap);
    width: 100%;
}

/* Smooth transition when sidebar width changes */
/* DISABLED (Session 2025-10-23): Causes visual gap on page load
.my-account-layout-wrapper {
    transition: grid-template-columns 0.3s ease;
}
*/

/* ============================================================================
   Sidebar Container - Grid Column 1
   ============================================================================ */

/**
 * Sidebar container
 *
 * Grid places this automatically in column 1
 * No width needed - controlled by grid-template-columns
 *
 * CRITICAL FIX (Session 2025-10-22 | 16:01):
 * Grid layout should NOT apply to off-canvas sidebars!
 * Off-canvas sidebars use position: fixed and are outside the grid system.
 */
.sidebar-wrapper:not(:has(.wc-addons-sidebar--mobile-offcanvas)) {
    /* Grid auto-placement in column 1 */
    grid-column: 1;

    /* Allow sidebar to control its own height/position */
    position: relative;

    /* Ensure sidebar stays above content if needed */
    z-index: 10;
}

/* Off-canvas sidebar: Remove from grid layout entirely */
.sidebar-wrapper:has(.wc-addons-sidebar--mobile-offcanvas) {
    /* Not part of grid - positioned fixed independently */
    grid-column: auto;
    position: static; /* Don't interfere with child's position: fixed */
    z-index: auto; /* Let off-canvas sidebar control its own z-index */
}

/* ============================================================================
   Content Container - Grid Column 2
   ============================================================================ */

/**
 * Content container
 *
 * Grid places this automatically in column 2
 * Takes all remaining space (1fr)
 *
 * SPACING: All padding/margin controlled by user in Elementor.
 * No hardcoded padding - full user control via Elementor Advanced settings.
 */
.content-wrapper {
    /* Grid auto-placement in column 2 */
    grid-column: 2;

    /* Prevent overflow issues */
    min-width: 0;
}

/* ============================================================================
   Responsive - Tablet Adjustments
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1024px) {
    /* No tablet-specific spacing - controlled by user in Elementor */
}

/* ============================================================================
   Responsive - Mobile Adjustments
   ============================================================================ */

@media (max-width: 767px) {
    .my-account-layout-wrapper {
        /* Single column on mobile - sidebar stacks above content */
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    /* CRITICAL FIX (Session 2025-10-22 | 16:01): Only apply grid to non-offcanvas sidebars */
    .sidebar-wrapper:not(:has(.wc-addons-sidebar--mobile-offcanvas)) {
        /* Sidebar in row 1 */
        grid-column: 1;
        grid-row: 1;
    }

    .content-wrapper {
        /* Content in row 2 */
        grid-column: 1;
        grid-row: 2;

        /* No left padding on mobile */
        padding-left: 0;
    }

    /* Override mobile behavior if sidebar is off-canvas */
    .my-account-layout-wrapper:has(.wc-addons-sidebar--mobile-offcanvas) {
        /* Content takes full width when sidebar is off-canvas */
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .my-account-layout-wrapper:has(.wc-addons-sidebar--mobile-offcanvas) .content-wrapper {
        grid-row: 1;
    }
}

/* ============================================================================
   Debug Helper (Remove in production)
   ============================================================================ */

/**
 * Uncomment to see grid layout visually during development
 */
/*
.my-account-layout-wrapper {
    outline: 2px solid red;
}

.sidebar-wrapper {
    outline: 2px solid blue;
}

.content-wrapper {
    outline: 2px solid green;
}
*/