/**
 * Header Styles
 *
 * Uses scoped CSS variables following the same pattern as Promptless WP plugin sections.
 * Header theme variant (light/dark) is controlled via Customizer settings.
 *
 * @package Promptless_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   Theme Variant Scoped Variables
   Same pattern as plugin sections - header controls its own theme independently
   ========================================================================== */

.promptless-header.aisb-section--light {
    --section-bg: var(--aisb-color-background, #ffffff);
    --section-surface: var(--aisb-color-surface, #f9fafb);
    --section-text: var(--aisb-color-text, #1f2937);
    --section-text-muted: var(--aisb-color-text-muted, #6b7280);
    --section-border: var(--aisb-color-border, #e5e7eb);
    --section-primary: var(--aisb-color-primary, #6366f1);
}

.promptless-header.aisb-section--dark {
    --section-bg: var(--aisb-color-dark-background, #111827);
    --section-surface: var(--aisb-color-dark-surface, #1f2937);
    --section-text: var(--aisb-color-dark-text, #f9fafb);
    --section-text-muted: var(--aisb-color-dark-text-muted, #9ca3af);
    --section-border: var(--aisb-color-dark-border, #374151);
    --section-primary: var(--aisb-color-primary, #6366f1);
}

/* ==========================================================================
   Header Container
   ========================================================================== */

.promptless-header {
    position: relative;
    z-index: 100;
    background-color: var(--section-bg);
    border-bottom: 1px solid var(--section-border);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Sticky Header */
.promptless-header--sticky {
    position: sticky;
    top: 0;
}

/* No Border */
.promptless-header--no-border {
    border-bottom: none;
}

.promptless-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 4rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* ==========================================================================
   Brand / Logo
   ========================================================================== */

.promptless-header__brand {
    flex-shrink: 0;
}

.promptless-header__brand a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.promptless-header__brand img {
    max-height: 40px;
    width: auto;
}

.promptless-header__site-title {
    font-family: var(--aisb-section-font-heading, inherit);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--section-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.promptless-header__site-title:hover,
.promptless-header__site-title:focus {
    color: var(--section-primary);
    text-decoration: none;
}

/* Site title link - high specificity overrides for plugin link colors
   Uses 8x [href] attribute selectors to beat plugin specificity 0,10,1 */
.promptless-header.aisb-section--light .promptless-header__site-title[href][href][href][href][href][href][href][href] {
    color: var(--section-text);
    text-decoration: none;
}

.promptless-header.aisb-section--light .promptless-header__site-title[href][href][href][href][href][href][href][href]:hover,
.promptless-header.aisb-section--light .promptless-header__site-title[href][href][href][href][href][href][href][href]:focus {
    color: var(--aisb-smart-light-section-link, var(--section-primary));
    text-decoration: none;
}

.promptless-header.aisb-section--dark .promptless-header__site-title[href][href][href][href][href][href][href][href] {
    color: var(--section-text);
    text-decoration: none;
}

.promptless-header.aisb-section--dark .promptless-header__site-title[href][href][href][href][href][href][href][href]:hover,
.promptless-header.aisb-section--dark .promptless-header__site-title[href][href][href][href][href][href][href][href]:focus {
    color: var(--aisb-smart-dark-section-link, var(--section-primary));
    text-decoration: none;
}

/* Brand link wrapper - high specificity override */
.promptless-header.aisb-section--light .promptless-header__brand a[href][href][href][href][href][href][href][href],
.promptless-header.aisb-section--dark .promptless-header__brand a[href][href][href][href][href][href][href][href] {
    text-decoration: none;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.promptless-header__nav-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* ==========================================================================
   Navigation Position Variants
   ========================================================================== */

.promptless-header--nav-left .promptless-header__nav-wrapper {
    justify-content: flex-start;
}

.promptless-header--nav-center .promptless-header__nav-wrapper {
    justify-content: center;
}

.promptless-header--nav-right .promptless-header__nav-wrapper {
    justify-content: flex-end;
}

.promptless-header__nav {
    display: none;
}

@media (min-width: 768px) {
    .promptless-header__nav {
        display: block;
    }
}

.promptless-header__nav-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.promptless-header__nav-list li {
    margin: 0;
    position: relative;
}

.promptless-header__nav-list a {
    display: block;
    padding: 0.5rem 0.75rem;
    font-family: var(--aisb-section-font-body, inherit);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--section-text);
    text-decoration: none;
    /* No border-radius - minimal nav styling */
    transition: color 0.2s ease;
}

.promptless-header__nav-list a:hover,
.promptless-header__nav-list a:focus-visible {
    color: var(--aisb-smart-light-section-link, var(--section-primary));
    background-color: transparent;
    text-decoration: none;
}

.promptless-header__nav-list .current-menu-item > a,
.promptless-header__nav-list .current_page_item > a {
    color: var(--aisb-smart-light-section-link, var(--section-primary));
}

/* ==========================================================================
   HIGH-SPECIFICITY NAVIGATION LINK OVERRIDES
   Plugin core-components.css link rules have specificity 0,10,1 due to 9 :not() clauses.
   We use 8x [href] attribute selectors to achieve 0,11,1 and override.
   See docs/standards/WOOCOMMERCE_DESIGN_ALIGNMENT.md Part 8.3
   ========================================================================== */

/* Light mode navigation - base state */
.promptless-header.aisb-section--light .promptless-header__nav-list a[href][href][href][href][href][href][href][href] {
    color: var(--section-text);
    text-decoration: none;
}

/* Light mode navigation - hover/focus-visible */
.promptless-header.aisb-section--light .promptless-header__nav-list a[href][href][href][href][href][href][href][href]:hover,
.promptless-header.aisb-section--light .promptless-header__nav-list a[href][href][href][href][href][href][href][href]:focus-visible {
    color: var(--aisb-smart-light-section-link, var(--section-primary));
    text-decoration: none;
}

/* Light mode navigation - current item */
.promptless-header.aisb-section--light .promptless-header__nav-list .current-menu-item > a[href][href][href][href][href][href][href][href],
.promptless-header.aisb-section--light .promptless-header__nav-list .current_page_item > a[href][href][href][href][href][href][href][href] {
    color: var(--aisb-smart-light-section-link, var(--section-primary));
}

/* Dark mode navigation - base state */
.promptless-header.aisb-section--dark .promptless-header__nav-list a[href][href][href][href][href][href][href][href] {
    color: var(--section-text);
    text-decoration: none;
}

/* Dark mode navigation - hover/focus-visible */
.promptless-header.aisb-section--dark .promptless-header__nav-list a[href][href][href][href][href][href][href][href]:hover,
.promptless-header.aisb-section--dark .promptless-header__nav-list a[href][href][href][href][href][href][href][href]:focus-visible {
    color: var(--aisb-smart-dark-section-link, var(--section-primary));
    text-decoration: none;
}

/* Dark mode navigation - current item */
.promptless-header.aisb-section--dark .promptless-header__nav-list .current-menu-item > a[href][href][href][href][href][href][href][href],
.promptless-header.aisb-section--dark .promptless-header__nav-list .current_page_item > a[href][href][href][href][href][href][href][href] {
    color: var(--aisb-smart-dark-section-link, var(--section-primary));
}

/* ==========================================================================
   Dropdown Indicator (Chevron) for Menu Items with Children
   Uses CSS mask-image technique for proper theme-aware coloring
   SVG defines shape only; background-color controls visible color
   Only visible on desktop - mobile uses tap-based submenu interaction
   ========================================================================== */

@media (min-width: 768px) {
    /* Parent link layout for chevron alignment */
    .promptless-header__nav-list > .menu-item-has-children > a {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    /* Chevron indicator using mask-image technique
       - SVG is the mask shape (no color in SVG)
       - background-color controls visible color
       - Allows CSS variables to work correctly */
    .promptless-header__nav-list > .menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: var(--section-text);
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        opacity: 0.5;
        transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
        flex-shrink: 0;
    }

    /* Hover/focus state - match link color behavior */
    .promptless-header__nav-list > .menu-item-has-children > a:hover::after,
    .promptless-header__nav-list > .menu-item-has-children > a:focus::after {
        opacity: 0.7;
    }

    /* Rotate chevron when submenu is open (hover or focus-within) */
    .promptless-header__nav-list > .menu-item-has-children:hover > a::after,
    .promptless-header__nav-list > .menu-item-has-children:focus-within > a::after {
        transform: rotate(180deg);
        opacity: 0.7;
    }
}

/* ==========================================================================
   Chevron Theme Variant Overrides
   High-specificity selectors to match navigation link override pattern
   Ensures chevron color matches text color in all theme contexts
   ========================================================================== */

/* Light mode - chevron base state */
.promptless-header.aisb-section--light .promptless-header__nav-list > .menu-item-has-children > a::after {
    background-color: var(--section-text);
}

/* Light mode - chevron hover/focus - use smart link color */
.promptless-header.aisb-section--light .promptless-header__nav-list > .menu-item-has-children > a:hover::after,
.promptless-header.aisb-section--light .promptless-header__nav-list > .menu-item-has-children > a:focus::after {
    background-color: var(--aisb-smart-light-section-link, var(--section-primary));
}

/* Dark mode - chevron base state */
.promptless-header.aisb-section--dark .promptless-header__nav-list > .menu-item-has-children > a::after {
    background-color: var(--section-text);
}

/* Dark mode - chevron hover/focus - use smart link color */
.promptless-header.aisb-section--dark .promptless-header__nav-list > .menu-item-has-children > a:hover::after,
.promptless-header.aisb-section--dark .promptless-header__nav-list > .menu-item-has-children > a:focus::after {
    background-color: var(--aisb-smart-dark-section-link, var(--section-primary));
}

/* Submenu */
.promptless-header__nav-list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background-color: var(--section-surface);
    border: 1px solid var(--section-border);
    border-radius: var(--aisb-section-radius-card, 8px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.promptless-header__nav-list li:hover > .sub-menu,
.promptless-header__nav-list li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.promptless-header__nav-list .sub-menu a {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* ==========================================================================
   Header Actions
   ========================================================================== */

.promptless-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* CTA Button - Uses plugin button styles */
.promptless-header__cta {
    display: inline-flex;
}

/* ==========================================================================
   Mobile Menu Toggle
   ========================================================================== */

.promptless-header__menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    flex-shrink: 0; /* Prevent compression in flex container */
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px; /* Fixed minimal radius, not tied to button settings */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

@media (min-width: 768px) {
    .promptless-header__menu-toggle {
        display: none;
    }
}

.promptless-header__menu-toggle:hover,
.promptless-header__menu-toggle:focus {
    background-color: var(--section-surface);
}

.promptless-header__menu-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--section-text);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Active state - X icon */
.promptless-header__menu-toggle[aria-expanded="true"] .promptless-header__menu-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.promptless-header__menu-toggle[aria-expanded="true"] .promptless-header__menu-toggle-bar:nth-child(2) {
    opacity: 0;
}

.promptless-header__menu-toggle[aria-expanded="true"] .promptless-header__menu-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   Mobile Navigation
   ========================================================================== */

@media (max-width: 767px) {
    .promptless-header__nav-wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99; /* Explicit z-index for proper stacking below cart dropdown (z-index: 200) */
        background-color: var(--section-bg);
        border-bottom: 1px solid var(--section-border);
        max-height: 0;
        overflow: hidden;
        overflow-x: hidden; /* Prevent horizontal scroll from long menu items */
        transition: max-height 0.3s ease;
        /* Override desktop flexbox centering for full-width mobile menu */
        display: block;
    }

    /* Reset navigation position classes on mobile - menu is always full-width */
    .promptless-header--nav-left .promptless-header__nav-wrapper,
    .promptless-header--nav-center .promptless-header__nav-wrapper,
    .promptless-header--nav-right .promptless-header__nav-wrapper {
        justify-content: initial;
    }

    .promptless-header__nav-wrapper.is-open {
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: hidden; /* Ensure no horizontal scroll when menu is open */
    }

    .promptless-header__nav {
        display: block;
        padding: 0.5rem 0;
    }

    /* When collapsed topbar exists above, add top border to primary nav for visual separation */
    .promptless-mobile-topbar + .promptless-header__nav {
        border-top: 1px solid var(--section-border);
        margin-top: 0.25rem;
        padding-top: 0.75rem;
    }

    .promptless-header__nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .promptless-header__nav-list li {
        width: 100%;
    }

    .promptless-header__nav-list a {
        display: block;
        width: 100%;
        padding: 0.75rem 1.5rem;
        border-radius: 0;
        text-align: left;
        word-wrap: break-word; /* Long text protection */
        overflow-wrap: break-word; /* Long text protection - modern property */
    }

    .promptless-header__nav-list .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        background-color: transparent;
    }

    .promptless-header__nav-list .sub-menu a {
        padding-left: 2.5rem;
    }
}

/* ==========================================================================
   Admin Bar Offset
   ========================================================================== */

.admin-bar .promptless-header--sticky {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .promptless-header--sticky {
        top: 46px;
    }
}

/* ==========================================================================
   Skip Link
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--section-primary);
    color: #ffffff;
    padding: 8px 16px;
    z-index: 100000;
    text-decoration: none;
    font-weight: 500;
    border-radius: 0 0 var(--aisb-section-radius-button, 6px) 0;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--section-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Header Cart (WooCommerce)
   ========================================================================== */

.promptless-header__cart {
    position: relative;
}

/* Cart Toggle Button & Link - shared styles */
.promptless-header__cart-toggle,
.promptless-header__cart-link {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--section-text);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-decoration: none;
}

.promptless-header__cart-toggle:hover,
.promptless-header__cart-toggle:focus,
.promptless-header__cart-link:hover,
.promptless-header__cart-link:focus {
    color: var(--section-primary);
    text-decoration: none;
}

/* Cart Icon */
.promptless-header__cart-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Cart Count Badge */
.promptless-header__cart-count {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: var(--aisb-button-primary-text, #ffffff);
    background-color: var(--section-primary);
    border-radius: 8px;
    pointer-events: none;
}

/* High-specificity override to prevent plugin link color interference */
.promptless-header.aisb-section--light .promptless-header__cart-link[href][href][href][href][href][href][href][href],
.promptless-header.aisb-section--dark .promptless-header__cart-link[href][href][href][href][href][href][href][href] {
    color: var(--section-text);
    text-decoration: none;
}

.promptless-header.aisb-section--light .promptless-header__cart-link[href][href][href][href][href][href][href][href]:hover,
.promptless-header.aisb-section--light .promptless-header__cart-link[href][href][href][href][href][href][href][href]:focus {
    color: var(--aisb-smart-light-section-link, var(--section-primary));
    text-decoration: none;
}

.promptless-header.aisb-section--dark .promptless-header__cart-link[href][href][href][href][href][href][href][href]:hover,
.promptless-header.aisb-section--dark .promptless-header__cart-link[href][href][href][href][href][href][href][href]:focus {
    color: var(--aisb-smart-dark-section-link, var(--section-primary));
    text-decoration: none;
}

/* ==========================================================================
   Cart Icon Smart Color Hover Overrides
   Matches navigation link pattern for proper contrast in all theme contexts
   Cart toggle button (dropdown style) needs explicit hover rules since it's
   not an anchor element and doesn't get [href] specificity overrides
   ========================================================================== */

/* Light mode - cart toggle hover/focus */
.promptless-header.aisb-section--light .promptless-header__cart-toggle:hover,
.promptless-header.aisb-section--light .promptless-header__cart-toggle:focus {
    color: var(--aisb-smart-light-section-link, var(--section-primary));
}

/* Dark mode - cart toggle hover/focus */
.promptless-header.aisb-section--dark .promptless-header__cart-toggle:hover,
.promptless-header.aisb-section--dark .promptless-header__cart-toggle:focus {
    color: var(--aisb-smart-dark-section-link, var(--section-primary));
}

/* ==========================================================================
   Mini-Cart Dropdown
   ========================================================================== */

.promptless-header__mini-cart {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 200;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background-color: var(--section-surface);
    border: 1px solid var(--section-border);
    border-radius: var(--aisb-section-radius-card, 8px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.promptless-header__mini-cart[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ==========================================================================
   Mini-Cart Inner Container Padding

   Target .widget_shopping_cart_content directly because WooCommerce AJAX
   cart fragments replace this element and lose custom wrapper classes.
   ========================================================================== */

.promptless-header__mini-cart .widget_shopping_cart_content {
    padding: 1rem;
    box-sizing: border-box;
}

/* Ensure all child elements respect box-sizing */
.promptless-header__mini-cart .widget_shopping_cart_content * {
    box-sizing: border-box;
}

/* Mini-cart product list styling
   Uses promptless-mini-cart-list to avoid WooCommerce widget style conflicts */
.promptless-header__mini-cart .woocommerce-mini-cart,
.promptless-header__mini-cart .promptless-mini-cart-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ==========================================================================
   Cart Item Layout - Matches Custom Template Structure

   Custom template HTML (woocommerce/cart/mini-cart.php):
   li.promptless-cart-item
     ├── a.promptless-cart-item__image (thumbnail)
     ├── div.promptless-cart-item__details (wrapper)
     │   ├── a.promptless-cart-item__name (product name)
     │   └── span.promptless-cart-item__qty (quantity × price)
     └── a.promptless-cart-item__remove (× button)
   ========================================================================== */

.promptless-header__mini-cart .promptless-cart-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    grid-template-areas: "image details remove";
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--section-border);
    margin: 0;
}

.promptless-header__mini-cart .promptless-cart-item:last-child {
    border-bottom: none;
}

/* Product Image */
.promptless-header__mini-cart .promptless-cart-item__image {
    grid-area: image;
    width: 56px;
    height: 56px;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
}

.promptless-header__mini-cart .promptless-cart-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Reset any float from WooCommerce defaults */
    float: none;
    margin: 0;
}

/* Product Details */
.promptless-header__mini-cart .promptless-cart-item__details {
    grid-area: details;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.promptless-header__mini-cart .promptless-cart-item__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--section-text);
    text-decoration: none;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.promptless-header__mini-cart .promptless-cart-item__name:hover {
    text-decoration: underline;
}

.promptless-header__mini-cart .promptless-cart-item__qty {
    font-size: 13px;
    color: var(--section-text-muted);
    line-height: 1.3;
}

/* Reset WooCommerce price styling within mini-cart
   Prevents .woocommerce .amount from overriding on shop pages */
.promptless-header__mini-cart .promptless-cart-item__qty .amount,
.promptless-header__mini-cart .promptless-cart-item__qty .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    font-family: inherit;
}

/* Remove Button - Uses feature icon styling pattern
   Default: Subtle primary background + primary icon color
   Hover: Slightly stronger primary background */
.promptless-header__mini-cart .promptless-cart-item__remove {
    grid-area: remove;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--aisb-smart-light-icon, var(--aisb-color-primary));
    background-color: var(--aisb-smart-light-icon-bg, var(--aisb-color-primary-bg));
    font-size: 18px;
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.promptless-header__mini-cart .promptless-cart-item__remove:hover {
    color: var(--aisb-smart-light-icon, var(--aisb-color-primary));
    background-color: var(--aisb-smart-light-icon-bg, var(--aisb-color-primary-bg));
    filter: brightness(0.92);
    text-decoration: none;
}

/* Dark theme remove button */
.promptless-header.aisb-section--dark .promptless-cart-item__remove {
    color: var(--aisb-smart-dark-icon, var(--aisb-color-primary));
    background-color: var(--aisb-smart-dark-icon-bg, var(--aisb-color-primary-bg));
}

.promptless-header.aisb-section--dark .promptless-cart-item__remove:hover {
    color: var(--aisb-smart-dark-icon, var(--aisb-color-primary));
    background-color: var(--aisb-smart-dark-icon-bg, var(--aisb-color-primary-bg));
    filter: brightness(1.15);
    text-decoration: none;
}

/* ==========================================================================
   High-Specificity Link Color Overrides
   Prevents plugin link colors from interfering with cart item links
   ========================================================================== */

/* Product name link - base state */
.promptless-header.aisb-section--light .promptless-cart-item__name[href][href][href][href][href][href][href][href],
.promptless-header.aisb-section--dark .promptless-cart-item__name[href][href][href][href][href][href][href][href] {
    color: var(--section-text);
    text-decoration: none;
}

/* Product name link - hover */
.promptless-header.aisb-section--light .promptless-cart-item__name[href][href][href][href][href][href][href][href]:hover,
.promptless-header.aisb-section--dark .promptless-cart-item__name[href][href][href][href][href][href][href][href]:hover {
    text-decoration: underline;
}

/* Image link - no text decoration */
.promptless-header.aisb-section--light .promptless-cart-item__image[href][href][href][href][href][href][href][href],
.promptless-header.aisb-section--dark .promptless-cart-item__image[href][href][href][href][href][href][href][href] {
    text-decoration: none;
}

/* Remove button - Light theme base state
   Uses 9x [href] selectors (0,12,1) to beat plugin link rules (0,11,1) */
.promptless-header.aisb-section--light .promptless-cart-item__remove[href][href][href][href][href][href][href][href][href] {
    color: var(--aisb-smart-light-icon, var(--aisb-color-primary));
    text-decoration: none;
}

/* Remove button - Light theme hover */
.promptless-header.aisb-section--light .promptless-cart-item__remove[href][href][href][href][href][href][href][href][href]:hover {
    color: var(--aisb-smart-light-icon, var(--aisb-color-primary));
    background-color: var(--aisb-smart-light-icon-bg, var(--aisb-color-primary-bg));
    filter: brightness(0.92);
    text-decoration: none;
}

/* Remove button - Dark theme base state */
.promptless-header.aisb-section--dark .promptless-cart-item__remove[href][href][href][href][href][href][href][href][href] {
    color: var(--aisb-smart-dark-icon, var(--aisb-color-primary));
    text-decoration: none;
}

/* Remove button - Dark theme hover */
.promptless-header.aisb-section--dark .promptless-cart-item__remove[href][href][href][href][href][href][href][href][href]:hover {
    color: var(--aisb-smart-dark-icon, var(--aisb-color-primary));
    background-color: var(--aisb-smart-dark-icon-bg, var(--aisb-color-primary-bg));
    filter: brightness(1.15);
    text-decoration: none;
}

/* WooCommerce page override - prevent link underlines on remove button */
body.woocommerce .promptless-header__mini-cart .promptless-cart-item__remove:hover,
body.woocommerce-page .promptless-header__mini-cart .promptless-cart-item__remove:hover,
body.woocommerce-cart .promptless-header__mini-cart .promptless-cart-item__remove:hover,
body.woocommerce-checkout .promptless-header__mini-cart .promptless-cart-item__remove:hover {
    text-decoration: none;
}

/* Mini-cart totals - proper padding */
.promptless-header__mini-cart .woocommerce-mini-cart__total {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    margin: 0.5rem 0 0 0;
    border-top: 1px solid var(--section-border);
    font-weight: 600;
    color: var(--section-text);
}

/* Mini-cart buttons - use plugin styling */
.promptless-header__mini-cart .woocommerce-mini-cart__buttons {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
}

/* Mini-cart buttons share equal width - targets both aisb-btn and WooCommerce .button classes */
.promptless-header__mini-cart .woocommerce-mini-cart__buttons .aisb-btn {
    flex: 1;
    width: auto;
}

/* ==========================================================================
   Mini-Cart Button Styling - Target WooCommerce Default Classes

   WooCommerce AJAX cart fragments use default button classes:
   - .button.wc-forward (View Cart)
   - .button.checkout.wc-forward (Checkout)

   We must style these classes, NOT .aisb-btn classes which only exist
   briefly before AJAX replaces the content.
   ========================================================================== */

/* Base button styles for ALL mini-cart buttons - uses compact button sizing */
.promptless-header__mini-cart .woocommerce-mini-cart__buttons .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    box-sizing: border-box;
    padding: var(--aisb-section-space-xs) var(--aisb-section-space-md);
    font-family: var(--aisb-section-font-button, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    font-size: var(--aisb-section-text-sm);
    font-weight: var(--aisb-section-font-button-weight, var(--aisb-section-font-medium));
    text-decoration: none;
    border-radius: var(--aisb-section-radius-button, var(--aisb-section-radius-md));
    transition: all var(--aisb-section-transition-base);
    cursor: pointer;
}

/* Ghost button - View Cart
 * ALWAYS uses dark surface colors because mini-cart dropdown has dark background
 * regardless of header theme. The button sits on a dark surface, so needs
 * dark-context-appropriate colors for accessibility.
 */
.promptless-header__mini-cart .button.wc-forward:not(.checkout) {
    background: transparent;
    color: var(--aisb-smart-dark-section-link, var(--aisb-color-primary, #6366f1));
    border: 2px solid var(--aisb-smart-dark-section-link, var(--aisb-color-primary, #6366f1));
}

.promptless-header__mini-cart .button.wc-forward:not(.checkout):hover {
    background: var(--aisb-color-primary, #6366f1);
    color: var(--aisb-button-primary-text, #ffffff);
    border-color: var(--aisb-color-primary, #6366f1);
    text-decoration: none;
}

/* Primary button - Checkout (both themes) */
.promptless-header__mini-cart .button.checkout.wc-forward {
    background: var(--aisb-button-primary-bg, var(--aisb-color-primary, #6366f1));
    color: var(--aisb-button-primary-text, #ffffff);
    border: 2px solid var(--aisb-button-primary-bg, var(--aisb-color-primary, #6366f1));
}

.promptless-header__mini-cart .button.checkout.wc-forward:hover {
    filter: brightness(0.9);
    color: var(--aisb-button-primary-text, #ffffff);
    text-decoration: none;
}

/* Ghost button focus - View Cart
 * Uses dark surface colors since mini-cart always has dark background
 */
.promptless-header__mini-cart .button.wc-forward:not(.checkout):focus {
    outline: 2px solid var(--aisb-smart-dark-section-link, var(--aisb-color-primary, #6366f1));
    outline-offset: 2px;
    color: var(--aisb-smart-dark-section-link, var(--aisb-color-primary, #6366f1));
    text-decoration: none;
}

/* Primary button focus - Checkout */
.promptless-header__mini-cart .button.checkout.wc-forward:focus {
    outline: 2px solid var(--aisb-color-primary, #6366f1);
    outline-offset: 2px;
    color: var(--aisb-button-primary-text, #ffffff);
    text-decoration: none;
}

/* Empty cart message */
.promptless-header__mini-cart .woocommerce-mini-cart__empty-message {
    padding: 1.5rem 0;
    text-align: center;
    color: var(--section-text-muted);
    font-size: 0.875rem;
}

/* ==========================================================================
   Mini-Cart Mobile Styles
   ========================================================================== */

@media (max-width: 767px) {
    .promptless-header__mini-cart {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 60vh;
        border-radius: 0;
        transform: translateY(100%);
    }

    .promptless-header__mini-cart[aria-hidden="false"] {
        transform: translateY(0);
    }

    .promptless-header__mini-cart .widget_shopping_cart_content {
        padding: 1.5rem;
    }
}

/* ==========================================================================
   Top Bar Theme Variant Scoped Variables
   Same pattern as header/footer - uses plugin design system tokens
   ========================================================================== */

.promptless-topbar.aisb-section--light {
    --topbar-bg: var(--aisb-color-surface, #f9fafb);
    --topbar-text: var(--aisb-color-text, #1f2937);
    --topbar-text-muted: var(--aisb-color-text-muted, #6b7280);
    --topbar-border: var(--aisb-color-border, #e5e7eb);
    --topbar-primary: var(--aisb-color-primary, #6366f1);
}

.promptless-topbar.aisb-section--dark {
    --topbar-bg: var(--aisb-color-dark-surface, #1f2937);
    --topbar-text: var(--aisb-color-dark-text, #f9fafb);
    --topbar-text-muted: var(--aisb-color-dark-text-muted, #9ca3af);
    --topbar-border: var(--aisb-color-dark-border, #374151);
    --topbar-primary: var(--aisb-color-primary, #6366f1);
}

/* ==========================================================================
   Top Bar Container
   ========================================================================== */

.promptless-topbar {
    /* --topbar-height is set dynamically by JavaScript for accurate positioning */
    position: relative;
    z-index: 101;
    background-color: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    font-size: 0.8125rem; /* 13px - compact */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.promptless-topbar--sticky {
    position: sticky;
    top: 0;
}

/* Header offset when both top bar and header are sticky */
.promptless-topbar--sticky + .promptless-header--sticky {
    top: var(--topbar-height, 0);
}

/* ==========================================================================
   Top Bar Inner Layout
   ========================================================================== */

.promptless-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    gap: 1rem;
}

/* ==========================================================================
   Top Bar Navigation
   ========================================================================== */

.promptless-topbar__nav {
    display: flex;
    align-items: center;
}

.promptless-topbar__nav--left {
    justify-content: flex-start;
}

.promptless-topbar__nav--right {
    justify-content: flex-end;
    margin-left: auto;
}

.promptless-topbar__nav-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.promptless-topbar__nav-list li {
    margin: 0;
}

.promptless-topbar__nav-list a {
    display: block;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--topbar-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.promptless-topbar__nav-list a:hover,
.promptless-topbar__nav-list a:focus-visible {
    color: var(--topbar-text);
    text-decoration: none;
}

/* ==========================================================================
   SMART COLOR CONTRAST SYSTEM - High-Specificity Link Overrides
   Uses 8x [href] attribute selectors (specificity 0,11,1) to override
   plugin core-components.css link rules (specificity 0,10,1)
   ========================================================================== */

/* LIGHT MODE - Base state */
.promptless-topbar.aisb-section--light .promptless-topbar__nav-list a[href][href][href][href][href][href][href][href] {
    color: var(--topbar-text-muted);
    text-decoration: none;
}

/* LIGHT MODE - Hover/Focus-visible - Uses smart accessible link color */
.promptless-topbar.aisb-section--light .promptless-topbar__nav-list a[href][href][href][href][href][href][href][href]:hover,
.promptless-topbar.aisb-section--light .promptless-topbar__nav-list a[href][href][href][href][href][href][href][href]:focus-visible {
    color: var(--aisb-smart-light-section-link, var(--topbar-primary));
    text-decoration: none;
}

/* LIGHT MODE - Current menu item */
.promptless-topbar.aisb-section--light .promptless-topbar__nav-list .current-menu-item > a[href][href][href][href][href][href][href][href],
.promptless-topbar.aisb-section--light .promptless-topbar__nav-list .current_page_item > a[href][href][href][href][href][href][href][href] {
    color: var(--aisb-smart-light-section-link, var(--topbar-primary));
}

/* DARK MODE - Base state */
.promptless-topbar.aisb-section--dark .promptless-topbar__nav-list a[href][href][href][href][href][href][href][href] {
    color: var(--topbar-text-muted);
    text-decoration: none;
}

/* DARK MODE - Hover/Focus-visible - Uses smart accessible link color */
.promptless-topbar.aisb-section--dark .promptless-topbar__nav-list a[href][href][href][href][href][href][href][href]:hover,
.promptless-topbar.aisb-section--dark .promptless-topbar__nav-list a[href][href][href][href][href][href][href][href]:focus-visible {
    color: var(--aisb-smart-dark-section-link, var(--topbar-primary));
    text-decoration: none;
}

/* DARK MODE - Current menu item */
.promptless-topbar.aisb-section--dark .promptless-topbar__nav-list .current-menu-item > a[href][href][href][href][href][href][href][href],
.promptless-topbar.aisb-section--dark .promptless-topbar__nav-list .current_page_item > a[href][href][href][href][href][href][href][href] {
    color: var(--aisb-smart-dark-section-link, var(--topbar-primary));
}

/* ==========================================================================
   Admin Bar Offsets for Sticky Top Bar
   ========================================================================== */

.admin-bar .promptless-topbar--sticky {
    top: 32px;
}

.admin-bar .promptless-topbar--sticky + .promptless-header--sticky {
    top: calc(32px + var(--topbar-height, 0));
}

@media (max-width: 782px) {
    .admin-bar .promptless-topbar--sticky {
        top: 46px;
    }

    .admin-bar .promptless-topbar--sticky + .promptless-header--sticky {
        top: calc(46px + var(--topbar-height, 0));
    }
}

/* ==========================================================================
   Top Bar Responsive - Hide on Mobile
   ========================================================================== */

@media (max-width: 767px) {
    .promptless-topbar {
        display: none;
    }
}

/* ==========================================================================
   Mobile Collapsed Top Bar (inside hamburger menu)
   Only visible on mobile when topbar_mobile setting is 'collapse'
   ========================================================================== */

.promptless-mobile-topbar {
    display: none; /* Hidden on desktop */
}

@media (max-width: 767px) {
    .promptless-mobile-topbar {
        display: block;
        padding: 0.75rem 1.5rem 0.5rem; /* Reduced bottom padding */
        /* REMOVED: border-bottom - primary nav provides visual separation via border-top below */
    }

    .promptless-mobile-topbar__list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.625rem 1.25rem; /* Better visual balance when items wrap */
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .promptless-mobile-topbar__list li {
        margin: 0;
    }

    .promptless-mobile-topbar__list a {
        display: block;
        font-size: 0.8125rem; /* 13px - smaller than main nav */
        font-weight: 500;
        color: var(--section-text-muted);
        text-decoration: none;
        transition: color 0.2s ease;
        word-wrap: break-word; /* Long text protection */
        overflow-wrap: break-word; /* Long text protection - modern property */
    }

    .promptless-mobile-topbar__list a:hover,
    .promptless-mobile-topbar__list a:focus-visible {
        color: var(--section-text);
        text-decoration: none;
    }

    /* High-specificity overrides for plugin link colors */
    .promptless-header.aisb-section--light .promptless-mobile-topbar__list a[href][href][href][href][href][href][href][href] {
        color: var(--section-text-muted);
    }

    .promptless-header.aisb-section--light .promptless-mobile-topbar__list a[href][href][href][href][href][href][href][href]:hover,
    .promptless-header.aisb-section--light .promptless-mobile-topbar__list a[href][href][href][href][href][href][href][href]:focus-visible {
        color: var(--aisb-smart-light-section-link, var(--section-primary));
    }

    .promptless-header.aisb-section--dark .promptless-mobile-topbar__list a[href][href][href][href][href][href][href][href] {
        color: var(--section-text-muted);
    }

    .promptless-header.aisb-section--dark .promptless-mobile-topbar__list a[href][href][href][href][href][href][href][href]:hover,
    .promptless-header.aisb-section--dark .promptless-mobile-topbar__list a[href][href][href][href][href][href][href][href]:focus-visible {
        color: var(--aisb-smart-dark-section-link, var(--section-primary));
    }

    /* Current menu item highlighting */
    .promptless-header.aisb-section--light .promptless-mobile-topbar__list .current-menu-item > a[href][href][href][href][href][href][href][href],
    .promptless-header.aisb-section--light .promptless-mobile-topbar__list .current_page_item > a[href][href][href][href][href][href][href][href] {
        color: var(--aisb-smart-light-section-link, var(--section-primary));
    }

    .promptless-header.aisb-section--dark .promptless-mobile-topbar__list .current-menu-item > a[href][href][href][href][href][href][href][href],
    .promptless-header.aisb-section--dark .promptless-mobile-topbar__list .current_page_item > a[href][href][href][href][href][href][href][href] {
        color: var(--aisb-smart-dark-section-link, var(--section-primary));
    }
}