/**
 * IMS Header Actions — frontend styles
 *
 * Scoped to .ims-header-actions (also carries legacy .compact-icons class
 * for backwards compatibility with other header CSS).
 */

.ims-header-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex-shrink: 0;
    gap: 0;
    margin-left: auto;
}

/* Shared icon-button layout: icon on top, label underneath */
.ims-header-actions .header-icon,
.ims-header-actions .ims-quote-mini-cart__button,
.ims-header-actions .ims-cart-mini-cart__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    color: #bbb;
    text-decoration: none;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    position: relative;
    min-width: 44px;
}

.ims-header-actions .header-icon:hover,
.ims-header-actions .ims-quote-mini-cart__button:hover,
.ims-header-actions .ims-cart-mini-cart__button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.ims-header-actions .header-icon svg,
.ims-header-actions .ims-quote-mini-cart__icon,
.ims-header-actions .ims-cart-mini-cart__icon {
    width: 20px;
    height: 20px;
}

.ims-header-actions .header-icon__label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* Icon wrapper: establishes the positioning context for the count badge so
   the badge sits on the icon's top-right corner regardless of button width
   or label length. */
.ims-header-actions .header-icon__wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Count badges — anchored to the icon's top-right corner and growing to
   the RIGHT as the digit count rises (so "1000" spills away from the icon
   instead of overlapping it). Per-icon translateX fine-tunes the visual
   anchor because the two SVG glyphs don't reach the same x inside their
   24-viewBox boxes. !important beats legacy quote-cart.css / drawer-modern.css
   rules (solid-right positioning + gradient + transform on cart). */
.ims-header-actions .ims-quote-mini-cart__badge,
.ims-header-actions .ims-cart-mini-cart__badge {
    position: absolute !important;
    top: -6px !important;
    right: auto !important;
    bottom: auto !important;
    min-width: 16px;
    width: auto;
    height: 16px;
    padding: 0 5px;
    background: var(--wp--preset--color--primary, #FAB000) !important;
    background-image: none !important;
    color: #111111 !important;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 8px;
    text-align: center;
    white-space: nowrap;
    box-shadow: none !important;
    box-sizing: border-box;
    display: inline-block;
    pointer-events: none;
}

/* Per-icon anchor: left edge of the badge sits a few pixels inside the
   icon's visual right edge. The translateX values offset back so the badge
   appears to overlap the icon's top-right corner. */
.ims-header-actions .ims-quote-mini-cart__badge {
    /* Quote icon glyph stops ~3px short of its SVG right edge. */
    left: 100% !important;
    transform: translateX(-9px) !important;
}

.ims-header-actions .ims-cart-mini-cart__badge {
    /* Cart icon glyph reaches closer to the SVG right edge. */
    left: 100% !important;
    transform: translateX(-8px) !important;
}

/* ==========================================================================
   Account dropdown
   --------------------------------------------------------------------------
   The wrapper is the positioning context for the absolute-positioned menu.
   `display: inline-flex` keeps the toggle behaving like the sibling icon
   buttons (no extra wrapping shift). Menu is right-anchored so it never
   spills off the right edge of the viewport on narrow screens where the
   icon sits flush with the header's trailing edge.

   Works identically on touch + pointer: visibility is driven entirely by
   `aria-expanded` on the toggle (set by JS on click / Escape / outside-
   click). No hover dependency, so it behaves the same on mobile.
   ========================================================================== */

.ims-header-actions .ims-account-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Subtle "is open" visual hint on the toggle itself (since the icon
   button is flex-column, an inline chevron would stack awkwardly
   below the label). When the dropdown is open, give the toggle the
   same hover-state background so it reads as the active control. */
.ims-header-actions .ims-account-dropdown__toggle[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* Menu surface uses the theme's `gold-pale` preset (#FEE8A0) so the
   dropdown reads as part of the brand palette rather than a generic
   white popover. Border uses the slightly deeper `gold-light` so the
   card has definition against the header without going harsh. CSS
   custom properties from style.css's :root expose the same values via
   --color-gold-pale / --color-gold-light, with hex fallbacks for any
   surface that loads this block in isolation (editor previews). */
.ims-account-dropdown__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1000;
    min-width: 240px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    background: var(--wp--preset--color--gold-pale, #FEE8A0);
    border: 1px solid var(--wp--preset--color--gold-light, #FDE280);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
    color: #111;
    font-size: 13px;
    line-height: 1.3;
    /* Slide-in animation when the menu is revealed. The `hidden`
       attribute toggled by JS removes it from the layout entirely
       between opens, so each open replays the transition. */
    animation: imsAccountDropdownIn 0.12s ease-out;
}

.ims-account-dropdown__menu[hidden] {
    display: none;
}

@keyframes imsAccountDropdownIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Header (greeting + email or guest tagline). Divider tint pulls from
   gold-light so it reads against the pale-gold surface rather than
   the original cool-grey #f0f1f3 which clashed with the warm bg. */
.ims-account-dropdown__header {
    padding: 8px 12px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(160, 110, 0, 0.22);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ims-account-dropdown__greeting {
    font-weight: 700;
    font-size: 13px;
    color: #111;
}

.ims-account-dropdown__email {
    font-size: 11.5px;
    color: #6b5b1e;
    word-break: break-all;
}

.ims-account-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ims-account-dropdown__item {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #111;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.12s ease, color 0.12s ease;
}

/* Hover lifts into the deeper gold-light so the active row contrasts
   against the pale-gold base without colliding with the destructive
   logout state below. */
.ims-account-dropdown__item:hover,
.ims-account-dropdown__item:focus-visible {
    background: var(--wp--preset--color--gold-light, #FDE280);
    color: #111;
    outline: none;
}

/* Guest dropdown: promote the primary "Sign In" item visually so it's
   the obvious tap target on first open. Uses the brand CTA fill so it
   reads as the same kind of "primary action" button used elsewhere
   on the site. */
.ims-account-dropdown__item--primary {
    background: var(--wp--preset--color--cta, #FAB000);
    color: #111;
    font-weight: 700;
    margin-bottom: 4px;
}

.ims-account-dropdown__item--primary:hover,
.ims-account-dropdown__item--primary:focus-visible {
    background: var(--wp--preset--color--cta-hover, #E09E00);
    color: #111;
}

/* Logout reads as a destructive action; nudges the colour towards the
   site's red so it stands apart from the navigation items above it.
   Top border matches the header divider so the visual separation is
   consistent across the menu. */
.ims-account-dropdown__item--logout {
    color: #b91c1c;
    border-top: 1px solid rgba(160, 110, 0, 0.22);
    border-radius: 0 0 6px 6px;
    margin-top: 2px;
}

.ims-account-dropdown__item--logout:hover,
.ims-account-dropdown__item--logout:focus-visible {
    background: #fee2e2;
    color: #7f1d1d;
}

/* Mobile search toggle — hidden on desktop. On mobile it inherits the
   shared .header-icon layout above, so it matches account/quote/cart
   (20×20 stroke-1.5 glyph, same color, padding, radius, hover). */
.ims-header-actions .mobile-search-toggle {
    display: none;
}

/* Hamburger menu — hidden on desktop, visible on mobile */
.ims-header-actions .hamburger-menu {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    flex-direction: column;
    justify-content: space-between;
}
.ims-header-actions .hamburger-menu span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

/* Narrow viewports: icons only, no labels */
@media (max-width: 900px) {
    .ims-header-actions .header-icon__label {
        display: none;
    }
}

/* Mobile: show mobile search toggle + hamburger */
@media (max-width: 768px) {
    .ims-header-actions .mobile-search-toggle {
        display: flex;
    }
    .ims-header-actions .hamburger-menu {
        display: flex;
    }
}