/* =============================================================================
   RookiDroid theme — Site header, the collar plate
   A white armour plate across the top of every page: framed in navy along
   the bottom edge, with the cards' red / purple / yellow trim strip along
   the top. Markup: header.php.
   ============================================================================= */

.site-header {
  position: relative;
  z-index: 1000;   /* dropdowns open above the homepage hero's floating cards */
  background: var(--rd-surface);
  border-bottom: 2px solid var(--rd-navy);
}

/* Trim strip along the top: a red block, purple, then yellow vent slats at
   the right-hand end. */
.site-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--rd-yellow) 0 8px, transparent 8px 13px)
      right 16px top / 60px 100% no-repeat,
    linear-gradient(90deg,
      var(--rd-red) 0 120px,
      var(--rd-primary) 120px calc(100% - 88px),
      transparent calc(100% - 88px));
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
  padding-top: 4px;
}

/* ── Branding ── */
.site-branding { flex-shrink: 0; margin-right: auto; }
.site-branding a { display: flex; align-items: center; text-decoration: none; }
.site-branding .custom-logo { display: block; width: auto; height: 40px; }
.site-title {
  font-family: var(--rd-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--rd-navy);
}

/* ── Primary menu ── */
.primary-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-menu { display: flex; align-items: center; gap: 28px; }
.primary-menu > li { position: relative; }
.primary-menu > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  font-family: var(--rd-font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--rd-navy);
  text-decoration: none;
}
.primary-menu > li.menu-item-has-children > a::after {
  content: '';
  width: 6px;
  height: 6px;
  margin: -3px 0 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-ancestor > a { color: var(--rd-primary); }

/* Hover marker: a purple bar with a yellow tip, left showing under the
   current page's item. */
.primary-menu > li > a::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--rd-primary) calc(100% - 6px),
    var(--rd-yellow) calc(100% - 6px));
  transition: width var(--rd-transition);
}
.primary-menu > li > a:hover::before,
.primary-menu > li.current-menu-item > a::before,
.primary-menu > li.current-menu-ancestor > a::before { width: 100%; }

/* ── Dropdowns: a small armour plate hanging off the header's navy edge ── */
.primary-menu .sub-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: -18px;
  z-index: 10;
  display: none;
  min-width: 220px;
  padding: 10px 0 6px;
  background: var(--rd-surface);
  border: 2px solid var(--rd-navy);
  box-shadow: var(--rd-shadow-md);
}
/* Bridges the gap so the menu stays open while the pointer crosses. */
.primary-menu .sub-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
}
.primary-menu .sub-menu::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  pointer-events: none;
  background: var(--rd-trim);
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu { display: block; }
.primary-menu .sub-menu a {
  display: block;
  padding: 9px 18px 9px 15px;
  border-left: 3px solid transparent;
  font-size: .875rem;
  font-weight: 500;
  color: var(--rd-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--rd-transition), border-color var(--rd-transition), color var(--rd-transition);
}
.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu .current-menu-item > a {
  color: var(--rd-primary);
  background: var(--rd-primary-ghost);
  border-left-color: var(--rd-primary);
}

/* ── Icon buttons: search, account and cart as small chamfered plates ── */
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-icon {
  --rd-chamfer: 6px;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--rd-navy);
  background: var(--rd-surface-alt);
  border: 2px solid var(--rd-border);
  border-radius: 0;
  clip-path: var(--rd-chamfer-clip);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--rd-transition), color var(--rd-transition), transform var(--rd-transition);
}
.header-icon:hover,
.header-icon[aria-expanded="true"] {
  color: var(--rd-primary);
  background: var(--rd-surface-alt);
  border-color: var(--rd-navy);
  transform: translate(-1px, -1px);
}
.header-icon svg { width: 16px; height: 16px; }

/* Cart count: a purple chip on the cart plate's top-right corner; grey
   while the cart is empty. Sits outside the clipped plate. */
.header-cart { position: relative; display: inline-flex; }
.header-cart .cart-count {
  --rd-chamfer: 3px;
  position: absolute;
  top: -6px;
  right: -9px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-family: var(--rd-font-mono);
  font-size: .65rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--rd-primary);
  clip-path: var(--rd-chamfer-clip);
  pointer-events: none;
}
.header-cart .cart-count.is-empty {
  color: var(--rd-text-secondary);
  background: var(--rd-panel);
}

/* ── Search panel under the header ── */
.header-search {
  border-top: 1px solid var(--rd-border-light);
  background: var(--rd-surface-alt);
  padding: 14px 0;
}
.header-search[hidden] { display: none; }
.header-search .search-form { max-width: none; }

/* ── Mobile ── */
.menu-toggle { display: none; }
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform var(--rd-transition), opacity var(--rd-transition);
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before,
.menu-toggle__bars::after { content: ''; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -5px; }
.menu-toggle__bars::after { top: 5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 960px) {
  .site-header__inner { gap: 12px; min-height: 60px; }
  .site-branding .custom-logo { height: 34px; }
  .menu-toggle { display: inline-grid; width: 40px; height: 40px; border-color: var(--rd-navy); }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background: var(--rd-surface);
    border-bottom: 2px solid var(--rd-navy);
    box-shadow: var(--rd-shadow-md);
  }
  .primary-nav.is-open { display: block; }
  .primary-nav .primary-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 16px 12px; }
  .primary-menu > li { border-bottom: 1px solid var(--rd-border-light); }
  .primary-menu > li:last-child { border-bottom: 0; }
  .primary-menu > li > a { display: flex; padding: 14px 0; }
  .primary-menu > li > a::before { display: none; }
  .primary-menu > li.menu-item-has-children > a::after { display: none; }

  /* Sub-menus sit open, indented, inside the panel. */
  .primary-menu .sub-menu,
  .primary-menu li:hover > .sub-menu,
  .primary-menu li:focus-within > .sub-menu {
    position: static;
    display: block;
    min-width: 0;
    padding: 0 0 10px;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .primary-menu .sub-menu::before,
  .primary-menu .sub-menu::after { display: none; }
  .primary-nav .primary-menu .sub-menu { padding: 0 0 10px; }
  .primary-menu .sub-menu a { padding: 8px 12px; white-space: normal; }
}