/* Header, mega menu, drawer and mobile navigation. */
.np-site-header,
body:not(.wp-admin) .site-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--np-line);
  box-shadow: 0 10px 32px rgba(12, 43, 46, .07);
  transition: opacity .3s var(--np-ease), transform .3s var(--np-ease), box-shadow .3s var(--np-ease);
  will-change: transform, opacity;
}

body:not(.wp-admin).np-chrome-hidden .site-header {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-100% - 10px));
}

.np-nav,
body:not(.wp-admin) .site-header .nav { min-height: 76px; display: flex; gap: 28px; align-items: center; position: relative; }
.np-brand,
body:not(.wp-admin) .site-header .brand { min-width: 180px; display: flex; gap: 10px; align-items: center; }
.np-brand img,
body:not(.wp-admin) .site-header .brand img { width: auto; max-width: 150px; max-height: 46px; object-fit: contain; }
.np-main-nav,
body:not(.wp-admin) .main-nav { display: flex; gap: 4px; align-items: center; flex: 1; }
.np-main-nav ul,
body:not(.wp-admin) .main-nav > ul,
body:not(.wp-admin) .main-nav .np-v2-primary-menu { margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; list-style: none; }
.np-main-nav li,
body:not(.wp-admin) .main-nav li { position: relative; margin: 0; }
.np-main-nav a,
body:not(.wp-admin) .main-nav a { padding: 10px 12px; display: block; border-radius: 6px; text-decoration: none; }
.np-main-nav a:hover,
.np-main-nav .current-menu-item > a,
body:not(.wp-admin) .main-nav a:hover,
body:not(.wp-admin) .main-nav a[aria-current="page"],
body:not(.wp-admin) .main-nav .current-menu-item > a { color: var(--np-primary-strong); background: var(--np-primary-soft); }
.np-nav-link,
body:not(.wp-admin) .nav-link { padding: 11px 13px; color: inherit; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-weight: 500; text-decoration: none; }
.np-nav-link:hover,
.np-nav-link.is-active,
.np-nav-link[aria-current="page"],
body:not(.wp-admin) .nav-link:hover,
body:not(.wp-admin) .nav-link.active,
body:not(.wp-admin) .nav-link[aria-current="page"] { color: var(--np-primary-strong); background: var(--np-primary-soft); }

[data-np-mega-trigger],
body:not(.wp-admin) [data-mega-trigger] { display: inline-flex; gap: 7px; align-items: center; }
[data-np-mega-trigger]::after,
body:not(.wp-admin) [data-mega-trigger]::after { content: ""; width: 7px; height: 7px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--np-duration) var(--np-ease); }
[data-np-mega-trigger][aria-expanded="true"]::after,
body:not(.wp-admin) [data-mega-trigger][aria-expanded="true"]::after { transform: rotate(225deg) translateY(-1px); }

/* Primary navigation labels already open their mega panels on hover and with
   ArrowDown. The generic RTL chevron becomes a tall separator on these anchor
   triggers, so keep the desktop header labels clean. */
body:not(.wp-admin) .np-v2-primary-menu a[data-np-mega-trigger]::after { content: none; display: none; }

.np-nav-actions,
body:not(.wp-admin) .nav-actions { display: flex; gap: 8px; align-items: center; }
.np-menu-toggle { display: none; }
.np-v2-mega { position: static; }
.np-v2-mega > summary { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; list-style: none; }
.np-v2-mega > summary::-webkit-details-marker { display: none; }
.np-v2-mega-trigger { display: inline-flex !important; align-items: center; gap: 7px; }
.np-v2-mega-trigger::after {
  content: "";
  width: 7px;
  height: 7px;
  border-inline-end: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--np-duration) var(--np-ease);
}
.np-v2-mega-trigger[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-1px); }
.np-v2-mega-trigger[aria-expanded="true"] { color: var(--np-primary-strong); background: var(--np-primary-soft); }

.np-mega,
body:not(.wp-admin) .mega-hub {
  position: absolute;
  top: calc(100% + 1px);
  right: auto;
  left: 50%;
  width: min(1180px, calc(100vw - (2 * var(--np-page-gutter))));
  padding: 10px;
  color: var(--np-ink);
  background: #fff;
  border: 1px solid var(--np-line);
  border-radius: 0 0 11px 11px;
  box-shadow: var(--np-shadow-menu);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px) scale(.985);
  transform-origin: top center;
  transition: opacity var(--np-duration), visibility var(--np-duration), transform var(--np-duration) var(--np-ease);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.np-mega.is-open,
body:not(.wp-admin) .mega-hub.open,
body:not(.wp-admin) .np-v2-mega[open] > .mega-hub { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.np-v2-mega-hub { overflow: hidden; }
.mega-panel-head { min-height: 48px; padding: 7px 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--np-line); }
.mega-panel-head > div { display: flex; align-items: center; gap: 9px; color: var(--np-muted); font: 700 9px/1.4 ui-monospace, monospace; letter-spacing: .11em; }
.mega-panel-head button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: var(--np-muted); background: var(--np-surface-2); border: 1px solid var(--np-line); border-radius: 6px; cursor: pointer; }
.mega-panel-head svg { width: 17px; height: 17px; }
.mega-signal { width: 8px; height: 8px; border-radius: 50%; background: var(--np-primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--np-primary) 10%, transparent); }
.np-v2-mega__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, .75fr); gap: 12px; }
.np-v2-mega__title { margin: 0 0 12px; font-size: 1rem; }
.np-v2-mega__links { margin: 0 0 18px; padding: 0; display: grid; gap: 4px; list-style: none; }
.np-v2-mega__links a { padding: 8px 0; display: block; text-decoration: none; }
.np-v2-mega__search > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.np-mega__panel,
body:not(.wp-admin) .mega-panel { display: none; grid-template-columns: minmax(220px, .9fr) minmax(0, 1.45fr) minmax(190px, .74fr); gap: 10px; min-height: 360px; }
.np-mega__panel.is-active,
body:not(.wp-admin) .mega-panel.active { display: grid; }
.np-mega__links,
body:not(.wp-admin) .mega-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.np-mega__link,
body:not(.wp-admin) .mega-link-card { min-width: 0; min-height: 68px; padding: 10px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 9px; align-items: center; border: 1px solid transparent; border-radius: 6px; text-decoration: none; transition: var(--np-duration) var(--np-ease); }
.np-mega__link:hover,
.np-mega__link:focus-visible,
body:not(.wp-admin) .mega-link-card:hover,
body:not(.wp-admin) .mega-link-card:focus-visible { background: var(--np-primary-soft); border-color: color-mix(in srgb, var(--np-primary) 28%, var(--np-line)); transform: translateY(-1px); }
.mega-content,
.mega-side { min-width: 0; padding: 20px; }
.mega-content { border-inline-end: 1px solid var(--np-line); }
.mega-side { display: flex; flex-direction: column; gap: 4px; }
.mega-side > :where(a, p) { margin: 0; padding: 10px 0; color: var(--np-muted); text-decoration: none; font-size: 13px; line-height: 1.7; border-bottom: 1px solid color-mix(in srgb, var(--np-line) 74%, transparent); }
.mega-side > a:hover { color: var(--np-primary); }
.mega-side .np-v2-mega-side-cta { margin-top: auto; padding: 11px 13px; color: #fff; background: var(--np-primary); border: 0; border-radius: 6px; text-align: center; }
.mega-card-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--np-primary); background: var(--np-primary-soft); border-radius: 6px; }
.mega-card-icon svg { width: 18px; height: 18px; }
.mega-link-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.mega-link-card small { overflow: hidden; color: var(--np-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
body:not(.wp-admin) [data-np-mega-panel="security"] .mega-link-grid { grid-template-columns: 1fr; }
body:not(.wp-admin) [data-np-mega-panel="security"] .mega-link-card b { white-space: nowrap; }
.np-v2-mega-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.np-v2-mega-posts a { min-width: 0; min-height: 118px; padding: 14px; display: flex; flex-direction: column; gap: 7px; color: var(--np-ink); background: var(--np-surface-2); border: 1px solid var(--np-line); border-radius: 6px; text-decoration: none; }
.np-v2-mega-posts a:hover { border-color: color-mix(in srgb, var(--np-primary) 34%, var(--np-line)); }
.np-v2-mega-posts small { color: var(--np-primary); font-size: 9px; }
.np-v2-mega-posts b { font-size: 12px; line-height: 1.6; }
.np-v2-mega-posts span { margin-top: auto; color: var(--np-muted); font-size: 10px; }

.np-mobile-drawer { position: fixed; inset: 0; z-index: 1050; visibility: hidden; pointer-events: none; }
.np-mobile-drawer::before { content: ""; position: absolute; inset: 0; background: rgb(3 20 18 / 55%); opacity: 0; transition: opacity var(--np-duration); }
.np-mobile-drawer__panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(88vw, 380px); padding: 24px; overflow-y: auto; background: var(--np-surface); transform: translateX(105%); transition: transform var(--np-duration) var(--np-ease); }
html[dir="ltr"] .np-mobile-drawer__panel { transform: translateX(-105%); }
.np-mobile-drawer.is-open { visibility: visible; pointer-events: auto; }
.np-mobile-drawer.is-open::before { opacity: 1; }
.np-mobile-drawer.is-open .np-mobile-drawer__panel { transform: none; }

.np-mobile-nav,
body:not(.wp-admin) .mobile-nav { display: none; }

/* Keep the full desktop navigation on one line, including Persian labels and arrows. */
@media (min-width: 1024.01px) {
  .np-v2-skin .np-v2-header__inner {
    gap: 14px;
  }

  .np-v2-skin .np-v2-brand {
    flex: 0 0 150px;
    min-width: 150px;
  }

  .np-v2-skin .np-v2-brand img {
    max-width: 140px;
  }

  .np-v2-skin .np-v2-primary-nav,
  .np-v2-skin .np-v2-primary-menu {
    min-width: 0;
  }

  .np-v2-skin .np-v2-primary-menu {
    flex-wrap: nowrap;
  }

  .np-v2-skin .np-v2-primary-menu > li {
    flex: 0 0 auto;
  }

  .np-v2-skin .np-v2-primary-menu :where(a, .nav-link) {
    padding-inline: 10px;
    font-size: 15px;
    white-space: nowrap;
  }

  .np-v2-skin .np-v2-header__actions {
    flex: 0 0 auto;
  }
}

/* Compact laptop header from the approved design-system behavior. */
@media (min-width: 1024.01px) and (max-width: 1240px) {
  .np-v2-skin .np-v2-header__inner {
    gap: 10px;
  }

  .np-v2-skin .np-v2-brand {
    flex-basis: 132px;
    min-width: 132px;
  }

  .np-v2-skin .np-v2-brand img {
    max-width: 126px;
  }

  .np-v2-skin .np-v2-primary-nav {
    gap: 0;
  }

  .np-v2-skin .np-v2-primary-menu {
    gap: 0;
  }

  .np-v2-skin .np-v2-primary-menu :where(a, .nav-link) {
    padding: 9px 7px;
    font-size: 13px;
  }

  .np-v2-skin .np-v2-account-link {
    width: 42px;
    min-height: 42px;
    justify-content: center;
    padding: 0;
  }

  .np-v2-skin .np-v2-account-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .np-v2-skin .np-v2-shop-link {
    min-height: 42px;
    padding-inline: 12px;
    font-size: 13px;
  }
}

/* Collapse before compact desktop items can overlap the action cluster. */
@media (max-width: 1160px) {
  .np-v2-skin .np-v2-primary-nav { display: none; }
  .np-v2-skin .np-menu-toggle { display: inline-grid !important; }
  .np-v2-skin .np-v2-header__inner { min-height: 68px; gap: 12px; }
  .np-v2-skin .np-v2-brand { flex: 1 1 auto; min-width: 0; margin-inline-end: auto; }
  .np-v2-skin .np-v2-brand img { width: 100%; max-width: 136px; }
  .np-v2-skin :is(.np-v2-mega, .mega-hub) { display: none; }
  body:not(.wp-admin) .np-v2-header__actions > :not(.np-menu-toggle):not(.np-v2-account-link) { display: none !important; }
  .np-v2-skin .np-v2-account-link { display: flex !important; }
}

@media (max-width: 1024px) {
  .np-main-nav,
  body:not(.wp-admin) .main-nav { display: none; }
  .np-menu-toggle { display: inline-grid; }
  .np-nav,
  body:not(.wp-admin) .site-header .nav { min-height: 68px; gap: 12px; }
  .np-brand,
  body:not(.wp-admin) .site-header .brand { min-width: 0; margin-inline-end: auto; }
  .np-mega,
  body:not(.wp-admin) .mega-hub,
  body:not(.wp-admin) .np-v2-mega { display: none; }
}

@media (max-width: 480px) {
  .np-v2-skin .np-v2-header__inner { gap: 8px; }
  .np-v2-skin .np-v2-brand img { max-width: 120px; }
  .np-v2-skin .np-v2-shop-link { min-height: 42px; padding-inline: 10px; font-size: 12px; }
  .np-v2-skin .np-menu-toggle { min-height: 42px; padding-inline: 10px; }
}

@media (max-width: 360px) {
  /* Collapse the account CTA to its icon so the logo keeps its width. */
  .np-v2-skin .np-v2-account-link { padding-inline: 10px !important; }
  .np-v2-skin .np-v2-account-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .np-v2-skin .np-v2-brand img { max-width: 128px; }
}

@media (max-width: 1024px) {
  .np-nav-actions > :not(.np-menu-toggle):not(.np-essential-action),
  body:not(.wp-admin) .nav-actions > :not(.np-menu-toggle):not(.np-essential-action) { display: none; }
  .np-mobile-nav,
  body:not(.wp-admin) .mobile-nav {
    position: fixed;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    z-index: 950;
    min-height: 62px;
    padding: 7px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    background: color-mix(in srgb, var(--np-surface) 92%, transparent);
    border: 1px solid var(--np-line);
    border-radius: 10px;
    box-shadow: var(--np-shadow);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  .np-mobile-nav ul,
  body:not(.wp-admin) .mobile-nav > ul,
  body:not(.wp-admin) .mobile-nav .np-v2-mobile-nav__list { margin: 0; padding: 0; display: contents; list-style: none; }
  .np-mobile-nav li,
  body:not(.wp-admin) .mobile-nav li { min-width: 0; margin: 0; }
  .np-mobile-nav :where(a, button),
  body:not(.wp-admin) .mobile-nav :where(a, button) { min-width: 0; padding: 6px 4px; display: grid; gap: 2px; place-items: center; color: var(--np-muted); background: transparent; border: 0; border-radius: 6px; font-size: .6875rem; text-decoration: none; }
  .np-mobile-nav :where(a, button).is-active,
  .np-mobile-nav :where(a, button)[aria-current="page"],
  body:not(.wp-admin) .mobile-nav :where(a, button).active,
  body:not(.wp-admin) .mobile-nav .current-menu-item > a { color: var(--np-primary-strong); background: var(--np-primary-soft); }
  body:not(.wp-admin) { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

@media (min-width: 783px) {
  .admin-bar .np-site-header,
  .admin-bar body:not(.wp-admin) .site-header { top: 32px; }
}

/* Two-row desktop header: brand and actions share the top line, the primary
   menu drops to its own full-width line beneath the logo. Below 1160px the
   primary nav is already collapsed into the drawer, so this stops there. */
@media (min-width: 1160.01px) {
  .np-v2-skin .np-v2-header__inner {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
    min-height: 0;
    /* Wrapping removed the old 76px min-height that used to center the
       single row, so the brand needs its own breathing room up top. */
    padding-block-start: 16px;
  }

  body.np-v2-skin .np-v2-brand { order: 1; flex: 0 0 auto; }
  body.np-v2-skin .np-v2-header__actions { order: 2; }

  /* Specificity must clear `body:not(.wp-admin) .main-nav { flex: 1 }` above. */
  body:not(.wp-admin).np-v2-skin .np-v2-primary-nav {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    min-height: 52px;
    justify-content: flex-start;
    border-block-start: 1px solid var(--np-line);
  }

  /* RTL: flex-start is the right edge, so the menu starts under the logo. */
  body.np-v2-skin .np-v2-primary-menu { justify-content: flex-start; }
}