/*
 * Arovia Fashion — Header CSS
 * ----------------------------
 * Announcement bar, sticky header, desktop nav, dropdown,
 * action buttons, search drawer, mobile nav drawer, overlay.
 * Loaded after arovia-components.css.
 */

/* ═══════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR
   ═══════════════════════════════════════════════════════════ */

.arv-announcement {
  background-color: var(--color-brand);
  color:            var(--color-text-on-brand);
  font-size:        var(--text-xs);
  font-weight:      var(--fw-medium);
  letter-spacing:   var(--ls-widest);
  text-transform:   uppercase;
  min-height:       var(--announcement-height);
  overflow:         hidden;
  transition:       max-height 300ms ease, opacity 300ms ease;
  position:         relative;
  z-index:          calc(var(--z-sticky) + 1);
}

.arv-announcement__inner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-4);
  padding:         var(--space-2) var(--space-10);
  min-height:      var(--announcement-height);
}

.arv-announcement__text {
  color:       inherit;
  text-align:  center;
  line-height: var(--lh-normal);
}

.arv-announcement__text a {
  color: inherit;
}

.arv-announcement__dismiss {
  position:   absolute;
  right:      var(--space-4);
  top:        50%;
  transform:  translateY(-50%);
  background: none;
  border:     none;
  color:      rgba(250, 247, 242, 0.7);
  cursor:     pointer;
  padding:    var(--space-2);
  display:    flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  line-height: 1;
}

.arv-announcement__dismiss:hover {
  color:            var(--color-text-on-brand);
  background-color: rgba(255,255,255,0.1);
}

.arv-announcement__dismiss:focus-visible {
  outline:        2px solid rgba(255,255,255,0.6);
  outline-offset: 2px;
}

/* Scroll-hide animation */
.arv-announcement.is-hidden {
  max-height: 0 !important;
  opacity:    0;
}

/* ═══════════════════════════════════════════════════════════
   HEADER WRAPPER (position context)
   ═══════════════════════════════════════════════════════════ */

.arv-header-wrapper {
  position: sticky;
  top:      0;
  z-index:  var(--z-sticky);
}

/* ═══════════════════════════════════════════════════════════
   MAIN HEADER
   ═══════════════════════════════════════════════════════════ */

.arv-header {
  background-color: var(--color-bg-ivory);
  border-bottom:    1px solid var(--color-border);
  transition:       box-shadow var(--transition-base), background-color var(--transition-base);
}

/* Subtle shadow on scroll */
.arv-header.is-scrolled {
  box-shadow: 0 2px 20px rgba(33, 31, 29, 0.08);
}

.arv-header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          var(--header-height);
  gap:             var(--space-6);
  padding-inline:  var(--container-padding-x);
}

/* ─── Logo ──────────────────────────────────────────────── */

.arv-logo {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.arv-logo img {
  height:    44px;
  width:     auto;
  max-width: 180px;
  object-fit: contain;
}

.arv-logo__text {
  font-family:     var(--font-serif);
  font-size:       var(--text-xl);
  font-weight:     var(--fw-semibold);
  letter-spacing:  var(--ls-tight);
  color:           var(--color-brand);
  white-space:     nowrap;
}

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

/* On mobile: center the logo absolutely */
@media (max-width: 1023px) {
  .arv-header__inner {
    height:   var(--header-height-mobile);
    position: relative;
  }

  .arv-header__logo {
    position:  absolute;
    left:      50%;
    transform: translateX(-50%);
  }

  .arv-logo img  { height: 36px; }
  .arv-logo__text { font-size: var(--text-lg); }
}

/* ─── Desktop Navigation ────────────────────────────────── */

.arv-header__nav {
  flex: 1;
  display:         flex;
  justify-content: center;
}

@media (max-width: 1023px) {
  .arv-header__nav {
    display: none; /* Hidden on mobile — use mobile drawer */
  }
}

/* Nav List */
.arv-nav__list {
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
  list-style:  none;
  padding:     0;
  margin:      0;
}

/* Nav Item */
.arv-nav__item {
  position: relative;
}

/* Nav Link */
.arv-nav__link {
  display:        flex;
  align-items:    center;
  gap:            var(--space-1);
  padding:        var(--space-2) var(--space-3);
  font-family:    var(--font-sans);
  font-size:      var(--text-sm);
  font-weight:    var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color:          var(--color-text);
  text-decoration: none;
  white-space:    nowrap;
  border-radius:  var(--radius-sm);
  transition:     color var(--transition-fast), background-color var(--transition-fast);
  background:     none;
  border:         none;
  cursor:         pointer;
  position:       relative;
}

.arv-nav__link::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             var(--space-3);
  right:            var(--space-3);
  height:           1px;
  background-color: var(--color-brand);
  transform:        scaleX(0);
  transform-origin: left center;
  transition:       transform var(--transition-base);
}

.arv-nav__link:hover {
  color: var(--color-brand);
}

.arv-nav__link:hover::after,
.arv-nav__item.current-menu-item > .arv-nav__link::after,
.arv-nav__item.current-menu-parent > .arv-nav__link::after {
  transform: scaleX(1);
}

.arv-nav__item.current-menu-item > .arv-nav__link,
.arv-nav__item.current-menu-parent > .arv-nav__link {
  color: var(--color-brand);
}

.arv-nav__chevron {
  transition: transform var(--transition-base);
  color: var(--color-text-muted);
}

.arv-nav__item--has-dropdown:hover .arv-nav__chevron,
.arv-nav__item--has-dropdown:focus-within .arv-nav__chevron {
  transform: rotate(180deg);
}

/* ─── Dropdown Menu ─────────────────────────────────────── */

.arv-nav__dropdown {
  position:         absolute;
  top:              calc(100% + 4px);
  left:             50%;
  transform:        translateX(-50%);
  min-width:        200px;
  background-color: var(--color-bg-white);
  border:           1px solid var(--color-border);
  border-top:       2px solid var(--color-brand);
  border-radius:    0 0 var(--radius-md) var(--radius-md);
  box-shadow:       var(--shadow-lg);
  list-style:       none;
  padding:          var(--space-2) 0;
  margin:           0;
  z-index:          var(--z-dropdown);

  /* Hidden state */
  opacity:           0;
  visibility:        hidden;
  pointer-events:    none;
  transform:         translateX(-50%) translateY(-8px);
  transition:
    opacity    var(--transition-base),
    visibility var(--transition-base),
    transform  var(--transition-base);
}

/* Show on hover / focus-within */
.arv-nav__item--has-dropdown:hover    .arv-nav__dropdown,
.arv-nav__item--has-dropdown:focus-within .arv-nav__dropdown,
.arv-nav__item--has-dropdown .arv-nav__dropdown-toggle[aria-expanded="true"] + .arv-nav__dropdown {
  opacity:        1;
  visibility:     visible;
  pointer-events: all;
  transform:      translateX(-50%) translateY(0);
}

.arv-nav__dropdown-link {
  display:        block;
  padding:        var(--space-3) var(--space-5);
  font-size:      var(--text-sm);
  color:          var(--color-text);
  text-decoration: none;
  transition:     color var(--transition-fast), background-color var(--transition-fast);
  white-space:    nowrap;
}

.arv-nav__dropdown-link:hover {
  color:            var(--color-brand);
  background-color: var(--color-brand-subtle);
}

/* WordPress-generated li items in dropdown */
.arv-nav__item--has-dropdown ul.sub-menu {
  position:         absolute;
  top:              calc(100% + 4px);
  left:             50%;
  transform:        translateX(-50%);
  min-width:        200px;
  background-color: var(--color-bg-white);
  border:           1px solid var(--color-border);
  border-top:       2px solid var(--color-brand);
  border-radius:    0 0 var(--radius-md) var(--radius-md);
  box-shadow:       var(--shadow-lg);
  list-style:       none;
  padding:          var(--space-2) 0;
  margin:           0;
  z-index:          var(--z-dropdown);
  opacity:          0;
  visibility:       hidden;
  pointer-events:   none;
  transform:        translateX(-50%) translateY(-8px);
  transition:       opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
}

.arv-nav__item:hover > ul.sub-menu,
.arv-nav__item:focus-within > ul.sub-menu {
  opacity:        1;
  visibility:     visible;
  pointer-events: all;
  transform:      translateX(-50%) translateY(0);
}

.arv-nav__item ul.sub-menu li a {
  display:        block;
  padding:        var(--space-3) var(--space-5);
  font-size:      var(--text-sm);
  color:          var(--color-text);
  text-decoration: none;
  transition:     color var(--transition-fast), background-color var(--transition-fast);
  white-space:    nowrap;
}

.arv-nav__item ul.sub-menu li a:hover {
  color:            var(--color-brand);
  background-color: var(--color-brand-subtle);
}

/* ─── Header Actions (search/account/cart) ──────────────── */

.arv-header__actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
  flex-shrink: 0;
}

.arv-header__action-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  color:           var(--color-text);
  background:      none;
  border:          none;
  cursor:          pointer;
  transition:      color var(--transition-fast), background-color var(--transition-fast);
  text-decoration: none;
  position:        relative;
}

.arv-header__action-btn:hover {
  color:            var(--color-brand);
  background-color: var(--color-brand-subtle);
}

.arv-header__action-btn:focus-visible {
  outline:        2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Cart Badge */
.arv-cart-count {
  position:         absolute;
  top:              2px;
  right:            2px;
  min-width:        18px;
  height:           18px;
  padding:          0 3px;
  border-radius:    var(--radius-full);
  background-color: var(--color-brand);
  color:            var(--color-text-on-brand);
  font-size:        10px;
  font-weight:      var(--fw-semibold);
  line-height:      18px;
  text-align:       center;
  display:          none;
}

.arv-cart-count.has-items {
  display: block;
}

/* Mobile toggle — visible only on mobile */
.arv-mobile-toggle {
  display: none;
  width:   44px;
  height:  44px;
  color:   var(--color-text);
}

@media (max-width: 1023px) {
  .arv-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   SEARCH DRAWER
   ═══════════════════════════════════════════════════════════ */

.arv-search-drawer {
  position:         fixed;
  top:              0;
  left:             0;
  right:            0;
  background-color: var(--color-bg-white);
  border-bottom:    1px solid var(--color-border);
  z-index:          calc(var(--z-sticky) + 50);
  padding:          var(--space-8) var(--container-padding-x);
  transform:        translateY(-110%);
  opacity:          0;
  visibility:       hidden;
  transition:
    transform  var(--transition-slow),
    opacity    var(--transition-base),
    visibility var(--transition-base);
  box-shadow:       var(--shadow-lg);
}

.arv-search-drawer.is-open {
  transform:  translateY(0);
  opacity:    1;
  visibility: visible;
}

.arv-search-drawer__inner {
  max-width:    720px;
  margin-inline: auto;
  position:     relative;
}

.arv-search-drawer__label {
  font-family:    var(--font-serif);
  font-size:      var(--text-2xl);
  color:          var(--color-text);
  margin-bottom:  var(--space-5);
  letter-spacing: var(--ls-tight);
}

.arv-search-drawer__field-wrap {
  position:       relative;
  display:        flex;
  align-items:    center;
  border-bottom:  2px solid var(--color-border-strong);
  padding-bottom: var(--space-3);
  transition:     border-color var(--transition-fast);
}

.arv-search-drawer__field-wrap:focus-within {
  border-bottom-color: var(--color-brand);
}

.arv-search-drawer__input {
  flex:        1;
  border:      none;
  background:  transparent;
  font-family: var(--font-serif);
  font-size:   var(--text-2xl);
  color:       var(--color-text);
  padding:     0;
  line-height: 1;
  outline:     none;
}

.arv-search-drawer__input::placeholder {
  color:       var(--color-border-strong);
  font-style:  italic;
}

.arv-search-drawer__submit {
  background: none;
  border:     none;
  cursor:     pointer;
  color:      var(--color-text-muted);
  padding:    var(--space-2);
  display:    flex;
  transition: color var(--transition-fast);
}

.arv-search-drawer__submit:hover {
  color: var(--color-brand);
}

.arv-search-drawer__quick {
  display:    flex;
  flex-wrap:  wrap;
  align-items: center;
  gap:        var(--space-2);
  margin-top: var(--space-5);
}

.arv-search-drawer__quick-label {
  font-size:      var(--text-xs);
  font-weight:    var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color:          var(--color-text-light);
}

.arv-search-drawer__quick-link {
  font-size:        var(--text-xs);
  font-weight:      var(--fw-medium);
  letter-spacing:   var(--ls-wide);
  color:            var(--color-text-muted);
  border:           1px solid var(--color-border);
  padding:          var(--space-1) var(--space-3);
  border-radius:    var(--radius-full);
  transition:       all var(--transition-fast);
  text-decoration:  none;
  text-transform:   capitalize;
}

.arv-search-drawer__quick-link:hover {
  background-color: var(--color-brand-subtle);
  border-color:     var(--color-brand);
  color:            var(--color-brand);
}

.arv-search-drawer__close {
  position:  absolute;
  top:       -8px;
  right:     -8px;
  color:     var(--color-text-muted);
  padding:   var(--space-2);
  border:    none;
  background: none;
  cursor:    pointer;
  transition: color var(--transition-fast);
}

.arv-search-drawer__close:hover {
  color: var(--color-brand);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE NAVIGATION DRAWER
   ═══════════════════════════════════════════════════════════ */

.arv-mobile-nav {
  position:         fixed;
  top:              0;
  left:             0;
  bottom:           0;
  width:            min(340px, 90vw);
  background-color: var(--color-bg-white);
  z-index:          calc(var(--z-overlay) + 10);
  display:          flex;
  flex-direction:   column;
  transform:        translateX(-100%);
  transition:       transform var(--transition-slow);
  box-shadow:       var(--shadow-lg);
  overflow:         hidden;
}

.arv-mobile-nav.is-open {
  transform: translateX(0);
}

/* Prevent page scroll when nav is open */
body.nav-open {
  overflow: hidden;
}

/* Drawer Header */
.arv-mobile-nav__header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          var(--space-5) var(--space-6);
  border-bottom:    1px solid var(--color-border);
  flex-shrink:      0;
}

.arv-mobile-nav__logo .arv-logo img { height: 34px; }
.arv-mobile-nav__logo .arv-logo__text { font-size: var(--text-lg); }

.arv-mobile-nav__close {
  color:  var(--color-text);
  border: none;
  background: none;
  cursor: pointer;
  padding: var(--space-2);
  display: flex;
  transition: color var(--transition-fast);
}

.arv-mobile-nav__close:hover {
  color: var(--color-brand);
}

/* Drawer Scrollable Content */
.arv-mobile-nav__content {
  flex:       1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display:    flex;
  flex-direction: column;
}

/* Mobile Nav List */
.arv-mobile-nav__list {
  list-style: none;
  padding:    var(--space-4) 0;
  margin:     0;
  flex:       1;
}

.arv-mobile-nav__item {
  border-bottom: 1px solid var(--color-border);
}

.arv-mobile-nav__item:last-child {
  border-bottom: none;
}

.arv-mobile-nav__link {
  display:        block;
  padding:        var(--space-5) var(--space-6);
  font-size:      var(--text-base);
  font-weight:    var(--fw-medium);
  color:          var(--color-text);
  text-decoration: none;
  transition:     color var(--transition-fast), background-color var(--transition-fast);
  letter-spacing: var(--ls-wide);
}

.arv-mobile-nav__link:hover,
.arv-mobile-nav__item.current-menu-item > .arv-mobile-nav__link {
  color: var(--color-brand);
  background-color: var(--color-brand-subtle);
}

/* Parent row (link + toggle) */
.arv-mobile-nav__parent-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.arv-mobile-nav__parent-row .arv-mobile-nav__link {
  flex: 1;
}

.arv-mobile-nav__submenu-toggle {
  padding: var(--space-5) var(--space-6);
  color:   var(--color-text-muted);
  transition: transform var(--transition-base), color var(--transition-fast);
}

.arv-mobile-nav__item--has-children.is-open .arv-mobile-nav__submenu-toggle {
  transform: rotate(180deg);
  color: var(--color-brand);
}

/* Submenu */
.arv-mobile-nav__sub {
  list-style:       none;
  padding:          0;
  margin:           0;
  background-color: var(--color-bg-ivory);
  max-height:       0;
  overflow:         hidden;
  transition:       max-height var(--transition-slow);
}

.arv-mobile-nav__item--has-children.is-open .arv-mobile-nav__sub {
  max-height: 400px;
}

/* Also handle WP-generated submenu */
.arv-mobile-nav__list .menu-item-has-children > ul.sub-menu {
  list-style:       none;
  padding:          0;
  background-color: var(--color-bg-ivory);
  max-height:       0;
  overflow:         hidden;
  transition:       max-height var(--transition-slow);
}

.arv-mobile-nav__sub-link,
.arv-mobile-nav__list .menu-item-has-children > ul.sub-menu li a {
  display:        block;
  padding:        var(--space-4) var(--space-10);
  font-size:      var(--text-sm);
  color:          var(--color-text-muted);
  text-decoration: none;
  transition:     color var(--transition-fast);
  border-bottom:  1px solid var(--color-border);
}

.arv-mobile-nav__sub-link:hover,
.arv-mobile-nav__list .menu-item-has-children > ul.sub-menu li a:hover {
  color: var(--color-brand);
}

/* Mobile Nav Footer */
.arv-mobile-nav__footer {
  padding:       var(--space-6);
  border-top:    1px solid var(--color-border);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-5);
  flex-shrink:   0;
}

.arv-mobile-nav__account-link {
  display:        flex;
  align-items:    center;
  gap:            var(--space-3);
  font-size:      var(--text-sm);
  font-weight:    var(--fw-medium);
  color:          var(--color-text);
  text-decoration: none;
  letter-spacing: var(--ls-wide);
  transition:     color var(--transition-fast);
}

.arv-mobile-nav__account-link:hover {
  color: var(--color-brand);
}

.arv-mobile-nav__social {
  display:    flex;
  gap:        var(--space-5);
  list-style: none;
  padding:    0;
  margin:     0;
}

.arv-mobile-nav__social a {
  color:      var(--color-text-muted);
  display:    flex;
  transition: color var(--transition-fast);
}

.arv-mobile-nav__social a:hover {
  color: var(--color-brand);
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL OVERLAY
   ═══════════════════════════════════════════════════════════ */

.arv-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(33, 31, 29, 0.5);
  z-index:    var(--z-overlay);
  opacity:    0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.arv-overlay.is-visible {
  opacity:    1;
  visibility: visible;
}

/* ═══════════════════════════════════════════════════════════
   ADMIN BAR OFFSET
   When WordPress admin bar is showing, push sticky header down.
   ═══════════════════════════════════════════════════════════ */

.admin-bar .arv-header-wrapper {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .arv-header-wrapper {
    top: 46px;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  /* Compact announcement on mobile */
  .arv-announcement__inner {
    padding-inline: var(--space-8);
    font-size:      10px;
  }
}

@media (max-width: 599px) {
  .arv-announcement__inner {
    padding-inline: var(--space-8);
  }
}