/*
  Totco: global header overrides

  Goal:
  - Make the default header (and its placeholder-generated cart/user parts)
    look like the static homepage header in `views/website_templates/home_page.xml`.

  Notes:
  - Must NOT be homepage-scoped (applies on all pages using `website.layout`).
  - We keep overrides narrowly targeted to the header to avoid side effects.
*/

/* --------
   List marker reset (fix "dots" on <li>)
   -------- */

/* Some themes add list markers back on nav lists. Ensure header lists never show bullets/dots. */
#wrapwrap header ul,
#wrapwrap header ol {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#wrapwrap header li {
    list-style: none;
}

#wrapwrap header li::marker {
    content: "";
}

/* --------
   Cart link (website_sale.header_cart_link)
   -------- */

/* The template renders: li.o_wsale_my_cart > a > div(iconwrap) + span(text) */
#wrapwrap header .o_wsale_my_cart > a {
    /* Match the homepage button layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    min-height: 2.25rem; /* min-h-9 */
    padding: 0.5rem 1rem; /* py-2 px-4 */

    border-radius: 9999px;
    border: 1px solid hsl(var(--secondary-border));
    /* background-color: hsl(var(--secondary)); */
    color: hsl(var(--secondary-foreground));

    font-size: 0.875rem; /* text-sm */
    font-weight: 500;
    line-height: 1.25rem;
    white-space: nowrap;

    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
    text-decoration: none;

    /* Homepage button uses overlay-based elevate effect; keep relative for ::after */
    position: relative;
    z-index: 0;
}

/* Recreate the homepage hover-elevate / active-elevate-2 overlay effect
   (see `.hover-elevate` / `.active-elevate-2` in `home_styles.css`) */
#wrapwrap header .o_wsale_my_cart > a::after {
    content: "";
    position: absolute;
    inset: -1px; /* match `border.hover-elevate::after { inset: -1px; }` */
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 999;
}

#wrapwrap header .o_wsale_my_cart > a:hover::after {
    opacity: 1;
    background-color: var(--elevate-1);
}

#wrapwrap header .o_wsale_my_cart > a:active::after {
    opacity: 1;
    background-color: var(--elevate-2);
}

#wrapwrap header .o_wsale_my_cart > a:hover {
    transform: translateY(-1px);
    background-color: hsl(var(--secondary) / 0.85);
    text-decoration: none;
}

#wrapwrap header .o_wsale_my_cart > a:active {
    transform: translateY(0);
}

/* Icon wrap: align like the lucide icon */
#wrapwrap header .o_wsale_my_cart > a > div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#wrapwrap header .o_wsale_my_cart > a > div > i.fa-shopping-cart {
    /* Make it look like the lucide icon sizing (h-4 w-4) */
    font-size: 1rem;
    line-height: 1;
    margin-right: 0.5rem; /* mr-2 */
}

/* Badge: pill + primary background like homepage */
#wrapwrap header .o_wsale_my_cart .my_cart_quantity {
    position: static !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: 0.5rem;

    border: 0;
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.125rem 0.625rem; /* py-0.5 px-2.5 */

    font-size: 0.75rem;
    font-weight: 600;

    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    /* `shadow-xs` in tailwind build resolves to a subtle top highlight */
    box-shadow: var(--shadow-xs, 0 1px 0 0 rgba(0, 0, 0, 0.08));
}

/* Hide the default “My Cart” span and inject a real label node instead of using ::after text.
   This avoids mixing our overlay ::after with text content. */
#wrapwrap header .o_wsale_my_cart > a > span {
    display: none;
}

/* Insert a “Cart” label between icon and badge */



/* --------
   Portal user dropdown
   -------- */

/* Style the sign-in link like an icon button (matches homepage account icon button feel) */
#wrapwrap header a[href^="/web/login"],
#wrapwrap header a[href^="/web/signup"] {
    text-decoration: none;
}

/* Targets the dropdown toggle link inside portal.user_dropdown */
#wrapwrap header .dropdown:has(.o_portal_my_account) .dropdown-toggle,
#wrapwrap header .o_portal_my_account .dropdown-toggle,
#wrapwrap header .o_user_dropdown .dropdown-toggle,
#wrapwrap header .dropdown-toggle.o_portal_my_account,
#wrapwrap header .dropdown-toggle {
    border-radius: 9999px;
}

/* Keep dropdown menus consistent with homepage */
#wrapwrap header .dropdown-menu {
    border-radius: 0.9rem;
    border: 1px solid rgba(2, 6, 23, 0.10);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.16);
}

#wrapwrap header .dropdown-menu a {
    border-radius: 0.65rem;
    margin: 0 0.4rem;
}

#wrapwrap header .dropdown-menu a:hover {
    background-color: rgba(2, 6, 23, 0.04);
}

/* --------
   Mobile header (website.template_header_mobile) - Totco structure
   --------
   The mobile header is implemented in `views/website_templates/header.xml` as:
   - .preheader.top_bar2 (#top_bar)
   - .nav_upper_part (hamburger + brand + cart)
   - .search_bar_container (search)
   This file provides targeted layout rules to keep it neat on small screens.
*/

@media (max-width: 868px) {
    /* Ensure header area doesn't cause horizontal overflow */
    #wrapwrap header,
    #wrapwrap header * {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Top bar height + padding for small devices */
    #wrapwrap header #top_bar {
        height: auto;
        min-height: 2.5rem;
        padding: 0.25rem 0.75rem;
        padding-left: calc(0.75rem + env(safe-area-inset-left));
        padding-right: calc(0.75rem + env(safe-area-inset-right));
    }

    /* Hide long phone number if it wraps badly */
    #wrapwrap header .delivery_text {
        font-size: 0.85rem;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Main mobile row */
    #wrapwrap header .nav_upper_part {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        padding-left: calc(0.75rem + env(safe-area-inset-left));
        padding-right: calc(0.75rem + env(safe-area-inset-right));
        background: hsl(var(--background));
        border-bottom: 1px solid hsl(var(--border));
    }

    /* Left hamburger */
    #wrapwrap header .nav_upper_part .mobile_menu.left-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 9999px;
        border: 1px solid hsl(var(--border));
        background: hsl(var(--background));
    }

    /* Brand in center: keep it from overflowing */
    #wrapwrap header .nav_upper_part .navbar-brand,
    #wrapwrap header .nav_upper_part a.navbar-brand {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0;
    }

    #wrapwrap header .nav_upper_part .navbar-brand img {
        height: 28px;
        width: auto;
        max-width: 160px;
        object-fit: contain;
    }

    /* Cart on right */
    #wrapwrap header .nav_upper_part .mobile_menu.cart {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 9999px;
        border: 1px solid hsl(var(--border));
        background: hsl(var(--background));
    }

    /* Make Odoo/Bootstrap's toggler icon visible even if theme overrides it */
    .o_main_nav .nav_upper_part .mobile_menu.left-menu.navbar-toggler {
        padding: 0;
        background: transparent;
        border: 0;
        line-height: 1;
    }
    .o_main_nav .nav_upper_part .mobile_menu.left-menu .navbar-toggler-icon {
        width: 20px;
        height: 20px;
        display: inline-block;
        background-image: none;
        position: relative;
    }
    .o_main_nav .nav_upper_part .mobile_menu.left-menu .navbar-toggler-icon::before {
        content: "";
        position: absolute;
        left: 1px;
        right: 1px;
        top: 4px;
        height: 2px;
        background: currentColor;
        box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
        border-radius: 2px;
    }

    #wrapwrap header .nav_upper_part .mobile_cart_counter {
        top: -0.35rem;
        right: -0.35rem;
        min-width: 1.25rem;
        height: 1.25rem;
        font-size: 0.7rem;
        line-height: 1;
        background: hsl(var(--primary));
        color: hsl(var(--primary-foreground));
        border: 2px solid hsl(var(--background));
    }

    /* Search bar area */
    #wrapwrap header .search_bar_container {
        padding: 0.5rem 0.75rem;
        padding-left: calc(0.75rem + env(safe-area-inset-left));
        padding-right: calc(0.75rem + env(safe-area-inset-right));
        background: hsl(var(--background));
    }

    #wrapwrap header .search_bar_container .search-form {
        max-width: 100% !important;
        width: 100%;
    }

    #wrapwrap header .search_bar_container .search-form input,
    #wrapwrap header .search_bar_container input[type="search"],
    #wrapwrap header .search_bar_container input[type="text"] {
        width: 100% !important;
    }
}