/* ============================================================
   RabtPCS Theme — header.css
   All rules must be scoped under .rabtpcs-header.
   Visual layout (viewer's perspective):
   ┌─────────────────────────────────────────────┐
   │  [Logo 180px]          [Icon][Icon][Icon][Icon] │
   │   visual LEFT              visual RIGHT →    │
   └─────────────────────────────────────────────┘
   ============================================================ */

.rabtpcs-header {
  width: 100%;
  background: var(--rabtpcs-white);
  border-bottom: 1px solid var(--rabtpcs-border);
  transition: box-shadow var(--rabtpcs-ease);
  height: 90px;
  direction: ltr;
  display: none;
}

.rabtpcs-header--scrolled {
  box-shadow: var(--rabtpcs-shadow-header);
}

.rabtpcs-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.rabtpcs-header__logo {
  width: var(--rabtpcs-logo-w);
  flex-shrink: 0;
}

.rabtpcs-header__logo-link {
  display: block;
}

.rabtpcs-header__logo-img {
  width: 150px;
  height: auto;
  display: block;
}

.rabtpcs-header__icons {
  display: flex;
  align-items: center;
  gap: 15px;
}

.rabtpcs-header__icon-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: var(--rabtpcs-r-md);
  transition: background-color var(--rabtpcs-ease-fast);
  color: var(--rabtpcs-text);
  overflow: visible;
}

.rabtpcs-header__icon-btn:hover {
  background: var(--rabtpcs-primary-pale);
}

.rabtpcs-header__icon-btn svg {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
}

.rabtpcs-header__icon-btn img,
.rabtpcs-header__icon-img {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.rabtpcs-header__icon-btn svg * {
  vector-effect: non-scaling-stroke;
}

.rabtpcs-header__icon-badge {
  /*position: absolute;
  top: -4px;
  inset-inline-start: -4px; */
  min-width: 18px;
  height: 18px;
  background: var(--rabtpcs-primary);
  color: var(--rabtpcs-white);
  font-size: 11px;
  border-radius: var(--rabtpcs-r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Mobile (768px) */
@media (max-width: 768px) {
  .rabtpcs-header__left {
    width: 27%;
  }

  .rabtpcs-header__icon-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    border-radius: var(--rabtpcs-r-md);
    transition: background-color var(--rabtpcs-ease-fast);
    color: var(--rabtpcs-text);
    overflow: visible;
  }

  .rabtpcs-header__right{
    margin-right: 10px;
  
  }
}

/* ============================================================
   Menu Bar (Customizing ▸ Menus — "primary" location)
   Spacing / sizes are controlled by CSS custom properties set
   from the Customizer (see inc/menu-bar.php).
   ============================================================ */

.rabtpcs-menu-bar__list {
  display: flex;
  align-items: center;
  gap: var(--rabtpcs-menu-gap, 10px);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.rabtpcs-menu-bar__list::-webkit-scrollbar {
  display: none;
}

.rabtpcs-menu-bar .menu-item {
  flex-shrink: 0;
  position: relative;
}

.rabtpcs-menu-bar a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--rabtpcs-menu-pad, 10px);
  font-size: var(--rabtpcs-menu-font, 14px);
  font-weight: 700;
  color: var(--rabtpcs-text);
  white-space: nowrap;
  border-radius: var(--rabtpcs-r-md);
  transition: background-color var(--rabtpcs-ease-fast), color var(--rabtpcs-ease-fast);
}

.rabtpcs-menu-bar a:hover,
.rabtpcs-menu-bar a:focus-visible {
  background: var(--rabtpcs-primary-pale);
  color: var(--rabtpcs-primary);
}

.rabtpcs-menu-item__icon {
  width: var(--rabtpcs-menu-icon, 20px);
  height: var(--rabtpcs-menu-icon, 20px);
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

/* Sub-menus (dropdown) */
.rabtpcs-menu-bar .sub-menu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 200px;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  background: var(--rabtpcs-white);
  border: 1px solid var(--rabtpcs-border);
  border-radius: var(--rabtpcs-r-md);
  box-shadow: var(--rabtpcs-shadow-header);
}

.rabtpcs-menu-bar .sub-menu .sub-menu {
  top: 0;
  inset-inline-start: 100%;
}

.rabtpcs-menu-bar .menu-item:hover > .sub-menu,
.rabtpcs-menu-bar .menu-item:focus-within > .sub-menu {
  display: flex;
}

/* Placement inside the header row */
.rabtpcs-header__menu-slot {
  display: flex;
  align-items: center;
  min-width: 0;
}

.rabtpcs-header__left {
  order: 1;
}

.rabtpcs-header__menu-slot--left {
  order: 2;
  margin-inline-start: 20px;
}

.rabtpcs-header__menu-slot--center {
  order: 3;
  margin-inline: auto;
}

.rabtpcs-header__right {
  order: 4;
  margin-inline-start: auto;
}

.rabtpcs-header__menu-slot--right {
  order: 5;
  margin-inline-start: 20px;
}

/* Independent bar below the header */
.rabtpcs-menu-bar-wrap--below {
  width: 100%;
  background: var(--rabtpcs-white);
  border-bottom: 1px solid var(--rabtpcs-border);
}

.rabtpcs-menu-bar-wrap--below .rabtpcs-menu-bar {
  display: flex;
  min-height: 52px;
  align-items: center;
}

/* Mobile */
@media (max-width: 768px) {
  .rabtpcs-menu-bar__list {
    overflow-x: auto;
  }

  .rabtpcs-header__menu-slot--left,
  .rabtpcs-header__menu-slot--center,
  .rabtpcs-header__menu-slot--right {
    margin-inline-start: 10px;
  }
}