/**
 * Location: /assets/css/topbar.css
 * Purpose:
 * - Topbar (V5 – FINAL)
 * - Left: icon-only (PNG) via --stm-topbar-icon
 * - Right: icon + text (SVG) via --stm-topbar-icon mask
 * - Performance-safe, conflict-free, no hover animations
 *
 * Related CSS:
 * - Header shell: /assets/css/header.css
 * - Responsive rules: /assets/css/header-responsive.css
 *
 * Loader:
 * - Enqueued by your assets loader (stm-topbar handle).
 */

/* =========================================
   TOPBAR (V5 – FINAL, Conflict-Free)
========================================= */

.stm-topbar{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.12);

  /* If your theme uses CSS variable toggle, this keeps it compatible.
     If variable not defined, default stays block. */
  display: var(--stm-topbar, block);
}

.stm-topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:36px;
  width:100%;
}

/* menus */
.stm-topbar__menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:12px;
}

.stm-topbar__menu > li{
  margin:0;
  padding:0;
}

/* links base (safe reset without breaking accessibility) */
.stm-topbar__link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  border:0;
  background:transparent;

  /* remove visual effects */
  box-shadow:none !important;

  /* don't kill focus outline globally (accessibility) */
  outline: none;
}

/* =========================
   LEFT (icon-only PNG)
========================= */
.stm-topbar__link--left{
  width:auto;
  height:auto;
  padding:6px;
  justify-content:center;
  line-height:0;
}

/* PNG icon */
.stm-topbar__icon--png{
  width:18px;
  height:18px;
  display:block;

  background-image: var(--stm-topbar-icon);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  opacity:1;
}

/* Keep same visuals on hover/focus/active */
.stm-topbar__link--left:hover,
.stm-topbar__link--left:focus,
.stm-topbar__link--left:active{
  background:transparent !important;
}
.stm-topbar__link--left:hover .stm-topbar__icon--png,
.stm-topbar__link--left:focus .stm-topbar__icon--png,
.stm-topbar__link--left:active .stm-topbar__icon--png{
  opacity:1 !important;
}

/* =========================
   RIGHT (icon + text SVG)
========================= */
.stm-topbar__link--right{
  gap:8px;
  padding:6px 10px;
  border-radius:999px;

  color:rgba(0,0,0,.70);
  background:transparent;
}

/* Keep same visuals on hover/focus/active */
.stm-topbar__link--right:hover,
.stm-topbar__link--right:focus,
.stm-topbar__link--right:active{
  color:rgba(0,0,0,.70) !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* SVG icon via mask */
.stm-topbar__icon--svg{
  width:18px;
  height:18px;
  display:block;

  -webkit-mask: var(--stm-topbar-icon) center / 18px 18px no-repeat;
  mask: var(--stm-topbar-icon) center / 18px 18px no-repeat;

  background-color: currentColor;
  flex:0 0 18px;
}

/* Text */
.stm-topbar__text{
  font-size:14px;
  line-height:1;
  white-space:nowrap;
}

/* wrappers */
.stm-topbar__left,
.stm-topbar__right{
  display:flex;
  align-items:center;
}

/* ======================================================
   TOPBAR: Hide on Tablet & Mobile (<=1024px)
   - IMPORTANT: Only hides topbar, does not affect header layout
====================================================== */
@media (max-width: 1024px){
  .stm-topbar{
    display:none !important;
  }
}