/**
 * TPG Addons for WooCommerce — Distraction-Free Checkout Header
 *
 * Styles for the minimal checkout header that replaces the global site header
 * on cart, checkout, and order-confirmation pages.
 *
 * Breakpoint behaviour (confirmed from Figma + lessons page reference):
 *   B1–B3 (≤767px):   Icon logo + divider, no title, compact padding
 *   B4    (768–1023px): Full logo + divider + title, medium padding
 *   B5    (1024–1279px): Full logo + divider + title, wider padding
 *   B6    (≥1280px):    Full logo + divider + title, widest padding
 *
 * The divider is always visible (matching the lessons page pattern where
 * border-right on .header-logo persists across all breakpoints).
 *
 * @package TPG_Addons_WooCommerce
 * @since   3.7.0
 */


/* ==========================================================================
   1. HEADER CONTAINER
   ==========================================================================
   Mobile-first: starts with B1–B3 compact layout.
   ========================================================================== */

.tpg-checkout-header {
    position: relative;
    width: 100%;
    background: var(--tpg-white, #FFFFFF);
    border-bottom: 1px solid var(--tpg-gray, #D8DDE2);
    z-index: 100;
    margin-bottom: 24px;
    padding: 15px 16px;
}

.tpg-checkout-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
   
}


/* ==========================================================================
   2. LEFT SECTION — Logo + Divider + Title
   ========================================================================== */

.tpg-checkout-header__left {
    display: flex;
    align-items: center;
    gap: 10px; /* Tighter on mobile — matches lessons page at ≤839px */
    flex-shrink: 0;
}

/* Logo link — removes default link styling */
.tpg-checkout-header__logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    line-height: 0; /* Collapse whitespace around images */
}

/* Full logo: hidden on B1–B3 (mobile-first = hidden by default) */
.tpg-checkout-header__logo--full {
    width: 141px;
    height: auto;
}

/* Icon logo: shown on B1–B3 (mobile-first = shown by default) */
.tpg-checkout-header__logo--icon {
    display: none;
    width: 41px;
    height: auto;
}

/* Vertical divider: always visible (matches lessons page pattern) */
.tpg-checkout-header__divider {
    display: block;
    width: 1px;
    height: 36px; /* Proportional to 60px mobile header */
    background: rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

/* Page title: hidden on B1–B3 */
.tpg-checkout-header__title {
    font-family: 'Source Sans Pro', var(--tpg-font-body, sans-serif);
    font-weight: 600;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: -0.01em;
    color: var(--tpg-dark-gray, #4A4B4C);
    white-space: nowrap;
}


/* ==========================================================================
   3. CENTER SECTION — Progress Stepper
   ==========================================================================
   The stepper is rendered via [tpg_checkout_stepper] shortcode.
   Its own responsive styles are in progress-stepper.css.
   ========================================================================== */

.tpg-checkout-header__center {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0; /* Allow shrinking below content size */
}

/* Remove stepper's standalone chrome when inside the header */
.tpg-checkout-header__center .tpg-checkout-progress {
    margin: 0;
    padding: 0;
    border-bottom: none;
    background: transparent;
    margin-bottom: 0;
}

/* Allow stepper to use available horizontal space in header */
.tpg-checkout-header__center .tpg-progress-steps {
    max-width: none;
}


/* ==========================================================================
   4. RIGHT SECTION — My Account Dropdown
   ==========================================================================
   The dropdown is rendered via [llms_myaccount_dropdown] shortcode from
   TPG Addons for LifterLMS. Its own styles are in myaccount.css.
   We only need layout positioning here.
   ========================================================================== */

.tpg-checkout-header__right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}


/* ==========================================================================
   5. RESPONSIVE BREAKPOINTS
   ==========================================================================
   B1 (≤479px): Icon logo + divider, no title. Compact padding.
   B2 (480–599px): Same as B1.
   B3 (600–767px): Same as B1–B2 (icon logo + divider, no title).
   B4 (768–1023px): Full logo + divider + title appear.
   B5 (1024–1279px): More horizontal padding.
   B6 (≥1280px): Maximum horizontal padding.
   ========================================================================== */

@media screen and (max-width: 599px){

    .tpg-checkout-header__logo--full {
        display: none;
    }
    
    .tpg-checkout-header__logo--icon {
        display: block !important;
    }

    span.tpg-checkout-header__title {
        display: none;
    }
    
    span.tpg-checkout-header__divider {
        display: none;
    }
}