/* ==========================================================================
header.css — announcement bar + top header (logo, icons, language, search)
Targets: .top-announcement-bar, .site-header, .top-header, .header-inner...
   ========================================================================== */

/* Announcement bar from base.html */
.top-announcement-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: var(--sp-2);
    padding: 0.5rem var(--gutter);
    border-bottom: 1px solid var(--ink-12);
    background: var(--bg);
}
.announcement-wrapper{
    position: relative;
    flex: 1;
    max-width: var(--container);
    display:flex;
    justify-content:center;
    overflow:hidden;
}
.announcement-slide{
    display:none;
    color: var(--text);
    font-size: var(--fs-0);
    line-height: 1.4;
    text-align:center;
    padding: 0.25rem 0.5rem;
}
.announcement-slide.is-active{ display:inline-block; }
.announcement-arrow{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--ink-12);
    background: var(--bg);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.announcement-arrow:hover{ background: rgba(0,0,0,0.03); box-shadow: 0 10px 24px var(--ink-06); }

  /* Sticky header wrapper in base.html */
.site-header{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,0.94);
    border-bottom: 1px solid var(--ink-12);
    backdrop-filter: blur(10px);
}
@supports not (backdrop-filter: blur(10px)){
    .site-header{ background: var(--bg); }
}

  /* Top header (partials/header.html) */
.top-header{ width:100%; }
.header-inner{
    max-width: var(--container);
    margin-inline: auto;
    padding: 0 var(--gutter);
    height: 4.75rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--sp-2);
    transition: height var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

/* FULL-BLEED HEADER: use full screen width instead of centered 1280 container */
.header-inner{
    max-width: none;   /* override */
    width: 100%;
    margin-inline: 0;  /* override */
}

  /* FULL-BLEED ANNOUNCEMENT: don't cap at container */
.announcement-wrapper{
    max-width: none;   /* override */
}

  /* optional compressed state (you can toggle .is-compact via JS later) */
.site-header.is-compact .header-inner{ height: 3.95rem; }

.header-left .logo{
    display:inline-flex;
    align-items:center;
    gap: var(--sp-1);
    text-decoration:none;
}
.logo-img{
    height: 2.2rem;
    width: auto;
    object-fit: contain;
}

  /* Right side actions */
.header-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

  /* CTA */
.header-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 0.65rem 0.95rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--ink-18);
    background: var(--bg);
    font-weight: 680;
    transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.header-cta:hover{
    background: rgba(0,0,0,0.02);
    box-shadow: 0 10px 24px var(--ink-06);
    text-decoration:none;
}

  /* Language switcher */
.lang-switcher select{
    padding: 0.6rem 0.85rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--ink-18);
    background: var(--bg);
    font-weight: 560;
}

/* Country switcher next to language (same styling) */
.country-switcher select{
    padding: 0.6rem 0.85rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--ink-18);
    background: var(--bg);
    font-weight: 560;
}


  /* Icon buttons */
.header-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--ink-12);
    background: var(--bg);
    transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
    text-decoration:none;
}
.header-icon:hover{ background: rgba(0,0,0,0.03); box-shadow: 0 10px 24px var(--ink-06); text-decoration:none; }
.header-icon:active{ transform: translateY(1px); }

.store-link{
    gap: 0.45rem;
    padding-inline: 0.8rem;
    width: auto;
}
.store-text{
    font-size: var(--fs-0);
    color: var(--ink-72);
    font-weight: 560;
}

  /* Cart badge */
.cart-wrapper{ position: relative; }
.cart-badge{
    position:absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: var(--r-pill);
    background: var(--primary);
    color: var(--text); /* black on blue (constraint) */
    font-size: 0.75rem;
    font-weight: 760;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border: 1px solid rgba(0,0,0,0.10);
}

  /* Search (existing structure in header.html) */
.search-bar{
    display:none;
    position: absolute;
    top: calc(4.75rem - 0.25rem);
    right: var(--gutter);
    width: min(32rem, calc(100vw - (var(--gutter) * 2)));
    background: var(--bg);
    border: 1px solid var(--ink-12);
    border-radius: var(--r-2);
    box-shadow: var(--sh-2);
    padding: var(--sp-2);
    z-index: 60;
}
.site-header{ position: sticky; }
  .top-header{ position: relative; } /* allows search-bar absolute anchoring */

.search-bar.is-open{ display:block; }

.search-bar form{
    display:flex;
    gap: var(--sp-1);
    align-items:center;
}
.search-bar input[type="text"]{
    flex: 1;
    border-radius: var(--r-pill);
}
.search-bar button{
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--ink-18);
    background: var(--bg);
}
.search-bar button:hover{ background: rgba(0,0,0,0.03); }

  /* Mobile tweaks */
@media (max-width: 48rem){
    .store-text{ display:none; }
    .header-cta{ display:none; } /* keeps header super clean on mobile */
    .search-bar{
        right: 50%;
        transform: translateX(50%);
        top: calc(4.75rem + 0.25rem);
    }
}

.site-header{
    z-index: 80;      /* must be above banner */
    overflow: visible; /* ensure mega menu isn't clipped */
}

/* Header CTA hover */
.header-cta-tryon:hover,
.header-cta-tryon:focus-visible{
    color: var(--primary);
    text-decoration: none;
}

/* ===============================
   Header / Nav – Shape icons
   =============================== */

/* Keep icon small and aligned with text */
.nav-shape-link{
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  /* Hard-limit icon size */
  .nav-shape-ico{
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    object-fit: contain;
    flex-shrink: 0;
  }
  
  
  
  /* Ensure text baseline feels natural */
  .nav-shape-text{
    line-height: 1.2;
    white-space: nowrap;
  }