/* ==========================================================================
   WINTEX APPAREL — Shared Site Header, Mega Menu & Footer
   Desktop (>=901px): 3 visible bars — topbar / midbar / megabar.
   Mobile  (<=900px): SINGLE visible bar — logo (left) + burger (right).
   The topbar and megabar both fold away on mobile; the burger opens an
   off-canvas drawer containing the full category > type > product menu.
   Relies on design tokens (--c-orange, --c-bg-dark, --f-display, etc.)
   already defined in assets/style.css :root — loaded before this file.
   ========================================================================== */

/* ---------- TIER 1 — utility topbar (desktop/tablet only) ---------- */
.topbar{ background: var(--c-bg-darker); color:#c9c5ba; font-size:13px; }
.topbar__inner{
  max-width: var(--container); margin:0 auto; padding:9px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.topbar__left{ display:flex; gap:22px; flex-wrap:wrap; min-width:0; }
.topbar__item{ display:flex; align-items:center; gap:7px; min-width:0; }
.topbar__item .icon{ width:14px; height:14px; color: var(--c-orange); fill:none; flex-shrink:0; }
.topbar__item strong{ color:#fff; font-weight:600; }
.topbar__email{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar__right{ display:flex; align-items:center; gap:12px; font-family: var(--f-mono); font-size:11.5px; letter-spacing:.03em; }
.topbar__tag{ color: var(--c-orange-light); font-weight:700; }
.topbar__divider{ opacity:.4; }

/* ---------- TIER 2 — center bar: socials / logo / burger ---------- */
.midbar{ background: var(--c-bg-light); border-bottom:1px solid var(--c-border); }
.midbar__inner{
  max-width: var(--container); margin:0 auto; padding:16px 28px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
}
.midbar__socials{ display:flex; align-items:center; gap:10px; }
.midbar__socials a{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--c-bg-section); color: var(--c-text); transition: background .15s ease, color .15s ease;
}
.midbar__socials a:hover{ background: var(--c-orange); color:#fff; }
.midbar__socials .icon{ width:16px; height:16px; }

.midbar__brand{ display:flex; align-items:center; justify-content:center; gap:11px; min-width:0; }
.midbar__logo-icon{ height:38px; width:auto; flex-shrink:0; border-radius:50%; }
.midbar__logo-text{
  font-family: var(--f-display); font-size:16px; line-height:1.05; letter-spacing:.01em; color: var(--c-text);
  text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.midbar__right{ display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.midbar__quote{ padding:11px 20px; white-space:nowrap; }

/* burger — lives in the midbar; only visible at <=900px */
.megabar__burger{
  display:none; background:none; border:none; padding:8px; flex-direction:column;
  justify-content:center; align-items:flex-end; gap:5px; width:38px; height:38px; flex-shrink:0;
}
.megabar__burger span{ width:24px; height:2px; background: var(--c-bg-dark); border-radius:2px; }

/* ---------- TIER 3 — mega-menu navigation bar (desktop) / drawer host (mobile) ---------- */
.megabar{ position: sticky; top:0; z-index:60; background: var(--c-orange); }
.megabar__inner{ max-width: var(--container); margin:0 auto; padding:0 28px; display:flex; align-items:stretch; }
.megabar__list{ display:flex; align-items:stretch; }
.megabar__item{ position:relative; }
.megabar__link{
  display:flex; align-items:center; gap:6px; height:52px; padding:0 18px;
  color:#fff; font-weight:700; font-size:13.5px; letter-spacing:.02em; white-space:nowrap;
}
.megabar__link .caret{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(45deg); margin-top:-3px; opacity:.85; }
.megabar__item:hover > .megabar__link,
.megabar__item.is-open > .megabar__link{ background: rgba(0,0,0,.14); }
.megabar__item.is-current > .megabar__link{ background: rgba(0,0,0,.14); box-shadow: inset 0 -3px 0 rgba(255,255,255,.85); }

.megabar__dropdown{
  position:absolute; top:100%; left:0; min-width:240px; background:#fff;
  border:1px solid var(--c-border); border-top:3px solid var(--c-orange);
  box-shadow: var(--shadow-card); border-radius:0 0 var(--radius-s) var(--radius-s);
  padding:8px; display:none; z-index:65;
}
.megabar__item:hover > .megabar__dropdown,
.megabar__item.is-open > .megabar__dropdown{ display:block; }
.megabar__type{ position:relative; }
.megabar__type-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius: var(--radius-s); color: var(--c-text); font-size:13.5px; font-weight:600;
}
.megabar__type-link:hover, .megabar__type.is-open > .megabar__type-link{ background: var(--c-bg-section); color: var(--c-orange); }
.megabar__type-link .caret-r{ width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(-45deg); opacity:.6; flex-shrink:0; }

.megabar__flyout{
  position:absolute; top:-9px; left:100%; width:290px; max-height:380px; overflow-y:auto;
  background:#fff; border:1px solid var(--c-border); border-top:3px solid var(--c-orange);
  box-shadow: var(--shadow-card); border-radius: var(--radius-s); padding:8px; display:none; z-index:66;
}
.megabar__type:hover > .megabar__flyout,
.megabar__type.is-open > .megabar__flyout{ display:block; }
.megabar__flyout a{
  display:block; padding:8px 10px; border-radius:6px; font-size:12.8px; color: var(--c-text-muted); line-height:1.35;
}
.megabar__flyout a:hover{ background: var(--c-bg-section); color: var(--c-orange); }
.megabar__flyout .flyout-all{ font-weight:700; color: var(--c-orange); border-top:1px solid var(--c-border); margin-top:4px; padding-top:10px; }
.megabar__empty{ padding:10px 12px; font-size:12.8px; color: var(--c-text-muted); }

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1080px){
  .megabar__link{ padding:0 13px; font-size:12.8px; }
}

/* Tablet and below: collapse to the single-bar mobile header */
@media (max-width: 900px){
  .topbar{ display:none; }                 /* tier 1 fully hidden on mobile */

  .midbar__inner{ grid-template-columns:auto 1fr auto; padding:12px 18px; }
  .midbar__socials{ display:none; }
  .midbar__brand{ justify-content:flex-start; }
  .midbar__quote{ display:none; }
  .megabar__burger{ display:flex; }

  /* megabar itself becomes an invisible drawer-host — no second bar on mobile */
  .megabar{ position:static; background:transparent; }
  .megabar__inner{ padding:0; max-width:none; }

  .megabar__list{
    position:fixed; inset:0 0 0 auto; width:min(340px, 86vw); height:100vh; overflow-y:auto;
    background: var(--c-bg-dark); flex-direction:column; align-items:stretch;
    transform: translateX(100%); transition: transform .25s ease; padding:18px 0 40px; z-index:90;
  }
  .megabar.is-open .megabar__list{ transform: translateX(0); }
  .megabar__scrim{ display:none; position:fixed; inset:0; background:rgba(12,11,10,.55); z-index:80; }
  .megabar.is-open .megabar__scrim{ display:block; }
  .megabar__close{
    display:flex; align-items:center; justify-content:space-between; color:#fff;
    padding:6px 20px 16px; font-family: var(--f-mono); font-size:12px; letter-spacing:.05em;
    border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:6px;
  }
  .megabar__close button{ background:none; border:none; color:#fff; font-size:22px; line-height:1; padding:4px 8px; }

  .megabar__item{ width:100%; }
  .megabar__link{
    height:auto; padding:14px 20px; color:#fff; justify-content:space-between; width:100%;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .megabar__item:hover > .megabar__link{ background:none; }
  .megabar__item.is-open > .megabar__link{ background: rgba(255,255,255,.06); }
  .megabar__item.is-current > .megabar__link{ background: rgba(255,255,255,.06); box-shadow: inset 3px 0 0 var(--c-orange-light); }

  .megabar__dropdown{
    position:static; display:none; width:100%; background: rgba(255,255,255,.03); border:none;
    border-radius:0; box-shadow:none; padding:4px 0;
  }
  .megabar__item.is-open > .megabar__dropdown{ display:block; }
  .megabar__type-link{ color:#e9e6de; padding:12px 20px 12px 30px; border-radius:0; }
  .megabar__type-link:hover, .megabar__type.is-open > .megabar__type-link{ background: rgba(255,255,255,.06); color: var(--c-orange-light); }

  .megabar__flyout{
    position:static; display:none; width:100%; max-height:none; overflow:visible; background:none;
    border:none; box-shadow:none; padding:0 0 6px;
  }
  .megabar__type.is-open > .megabar__flyout{ display:block; }
  .megabar__flyout a{ color:#c9c5ba; padding:9px 20px 9px 42px; }
  .megabar__flyout a:hover{ background: rgba(255,255,255,.06); color: var(--c-orange-light); }
  .megabar__flyout .flyout-all{ color: var(--c-orange-light); border-top-color: rgba(255,255,255,.1); }
}

/* Large phones */
@media (max-width: 640px){
  .midbar__logo-text{ display:none; }        /* icon-only logo keeps the single bar compact */
  .midbar__logo-icon{ height:32px; }
  .midbar__inner{ padding:10px 14px; }
}

/* Small phones */
@media (max-width: 380px){
  .midbar__inner{ padding:8px 12px; }
}