/**
 * Header Block — Static Styles
 *
 * BEM: boost-header
 * Specificity strategy:
 *   style.css  → .boost-header .element  (0-2-0)  layout/structure only
 *   inline CSS → #uid .element           (1-1-0)  colors + dynamic overrides
 *
 * RULE: style.css NEVER sets color, background-color, or font-size on
 * dropdown/mega elements. These must come from inline #uid to override theme.
 *
 * @package felis-cattery
 * @since 3.6.0
 */

/* /blocks/header/style.css */

/* ==========================================================================
   BASE
   ========================================================================== */

.boost-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* ==========================================================================
   CONTAINER + INNER
   ========================================================================== */

.boost-header__container {
    position: relative;
    width: 100%;
    max-width: var(--boost-container-default, 1400px);
    margin: 0 auto;
    padding: 0 var(--boost-spacing-lg, 1.5rem);
    box-sizing: border-box;
}

.boost-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--boost-spacing-xl, 2rem);
    width: 100%;
}

/* ==========================================================================
   LOGO
   ========================================================================== */

.boost-header__logo {
    flex-shrink: 0;
}

/* Override global image-effect overflow:hidden — logo scales in-place, no clip. */
.boost-header__logo[data-boost-image] {
    overflow: visible;
}
.boost-header__logo[data-boost-image] img {
    transition: transform 0.3s ease;
}

.boost-header__logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.boost-header__logo img {
    height: 40px;
    width: auto;
}

.boost-header__logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--boost-text);
}

/* ==========================================================================
   NAV
   ========================================================================== */

.boost-header .boost-header__nav {
    display: flex;
    align-items: center;
    gap: var(--boost-spacing-xl, 2rem);
}

/* ==========================================================================
   MENU — layout only, colors via inline #uid
   ========================================================================== */

.boost-header .boost-header__menu {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.boost-header .boost-header__menu > li {
    position: relative;
}

.boost-header .boost-header__menu > li > a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.2s;
    position: relative;
    z-index: 1;
}

.boost-header .boost-header__menu > li > a .boost-header__chevron {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.boost-header .boost-header__menu > li:hover > a .boost-header__chevron {
    transform: rotate(180deg);
}

/* ==========================================================================
   RICH LABEL INLINE ICONS
   ========================================================================== */

.boost-header .boost-inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: inherit;
}

.boost-header .boost-inline-icon svg {
    width: 100%;
    height: 100%;
}

.boost-header .boost-inline-icon--styled {
    margin-right: 0.35rem;
    color: var(--boost-icon-color, currentColor);
}

.boost-header .boost-inline-icon--styled svg {
    width: 100%;
    height: 100%;
}

.boost-header .boost-styled-icon--filled {
    background: var(--boost-icon-bg, #f1f5f9);
    color: var(--boost-icon-color, currentColor);
}

.boost-header .boost-styled-icon--outlined {
    border: 2px solid var(--boost-icon-bg, #f1f5f9);
    color: var(--boost-icon-color, currentColor);
    background: transparent;
}

.boost-header .boost-styled-icon--ghost {
    background: transparent;
    color: var(--boost-icon-color, currentColor);
}

.boost-header .boost-styled-icon--soft {
    background: color-mix(in srgb, var(--boost-icon-bg, #f1f5f9) 25%, transparent);
    color: var(--boost-icon-color, currentColor);
}

.boost-header .boost-styled-icon--circle {
    background: var(--boost-icon-bg, #f1f5f9);
    color: var(--boost-icon-color, currentColor);
}

/* ==========================================================================
   DROPDOWN — layout only, colors via inline #uid
   ========================================================================== */

.boost-header .boost-header__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s;
    z-index: 10;
    list-style: none;
}

.boost-header .boost-header__menu > li:hover > .boost-header__dropdown,
.boost-header .boost-header__dropdown.is-boost-click-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.boost-header .boost-header__dropdown a {
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.2s;
}

/* ==========================================================================
   MEGA MENU — layout only, colors via inline #uid
   ========================================================================== */

.boost-header .boost-header__mega {
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 100;
    margin-top: 0.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.boost-header .boost-header__menu > li:hover > .boost-header__mega,
.boost-header .boost-header__mega.is-boost-click-open {
    opacity: 1;
    visibility: visible;
}

.boost-header .boost-header__mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
}

.boost-header .boost-header__mega-column {
    padding: 0.5rem 0;
}

.boost-header .boost-header__mega-column:not(:last-child) {
    border-right: 1px solid #f3f4f6;
}

.boost-header .boost-header__mega-column h4 {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.5rem;
    font-weight: 600;
    padding: 0 1rem;
}

.boost-header .boost-header__mega-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.boost-header .boost-header__mega-column li {
    margin: 0;
}

.boost-header .boost-header__mega-column a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.boost-header .boost-header__mega-column a .boost-header__mega-text > span {
    display: block;
    margin-top: 0.15rem;
}

.boost-header .boost-header__mega.boost-header__mega--wide {
    min-width: 480px;
    width: max-content;
    max-width: min(90vw, 900px);
}

.boost-header .boost-header__mega-featured {
    border-radius: 12px;
    padding: 1.5rem;
}

.boost-header .boost-header__mega-featured img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* ==========================================================================
   ACTIONS — layout only
   ========================================================================== */

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

.boost-header .boost-header__cta {
    flex-shrink: 0;
    white-space: nowrap;
}

.boost-header .boost-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    border-radius: 8px;
}

.boost-header .boost-header__toggle svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Close icon hidden by default — JS toggles via inline style on click */
.boost-header .boost-header__toggle .boost-header__icon-close {
    display: none;
}

.boost-header .boost-header__language {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.boost-header .boost-header__language select,
.boost-header .boost-header__language .boost-lang-switcher {
    font-size: 0.875rem;
    border: 1px solid var(--boost-border, #e2e8f0);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   SEARCH TOGGLE
   -------------------------------------------------------------------------- */

.boost-header .boost-header__search {
    position: relative;
}

.boost-header .boost-header__search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
}

.boost-header .boost-header__search-toggle svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* --------------------------------------------------------------------------
   CART ICON
   -------------------------------------------------------------------------- */

.boost-header .boost-header__cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s;
}

.boost-header .boost-header__cart:hover {
    background: rgba(0, 0, 0, 0.05);
}

.boost-header .boost-header__cart svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.boost-header .boost-header__cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
}

.boost-header .boost-header__cart-count:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   ACCOUNT ICON
   -------------------------------------------------------------------------- */

.boost-header .boost-header__account {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s;
}

.boost-header .boost-header__account:hover {
    background: rgba(0, 0, 0, 0.05);
}

.boost-header .boost-header__account svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* --------------------------------------------------------------------------
   MOBILE CLOSE BUTTON
   -------------------------------------------------------------------------- */

.boost-header .boost-header__mobile-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #374151;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.boost-header .boost-header__mobile-close svg {
    width: 24px;
    height: 24px;
}

.boost-header .boost-header__mobile-close:hover {
    color: var(--boost-accent, #3b82f6);
    background: rgba(var(--boost-accent-rgb, 37, 99, 235), 0.1);
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   MOBILE MENU ITEMS
   -------------------------------------------------------------------------- */

.boost-header .boost-header__mobile-link {
    flex: 1;
    min-width: 0;
}

.boost-header .boost-header__mobile-menu .boost-header__submenu-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    margin-right: 0.5rem;
    cursor: pointer;
    color: inherit;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boost-header .boost-header__mobile-menu .boost-header__submenu-chevron {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.boost-header .boost-header__mobile-menu .boost-header__item--has-submenu.is-boost-open .boost-header__submenu-chevron {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   SEARCH FORM
   -------------------------------------------------------------------------- */

.boost-header .boost-header__search-form {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 320px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.2s;
    z-index: 100;
}

.boost-header .boost-header__search-form.is-boost-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.boost-header .boost-header__search-form input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}

.boost-header .boost-header__search-form input:focus {
    border-color: var(--boost-accent, #3b82f6);
}

.boost-header .boost-header__search-form .boost-header__search-form-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.boost-header .boost-header__search-form .boost-header__search-form-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .boost-header__container {
        padding: 0 var(--boost-gutter, 1rem);
    }

    .boost-header .boost-header__toggle {
        display: flex;
        align-items: center;
    }

    .boost-header .boost-header__nav {
        display: none;
    }
}