/*
 * WP Nav Pro — Icon System  v0.2.0
 *
 * Icons are <span class="wnp-icon wnp-icon--{name}"> elements.
 * Each span renders the matching SVG <symbol> from icon-sprite.php
 * via an inline <svg><use> approach driven purely by CSS content.
 *
 * We use the SVG-in-HTML <use href> technique:
 * The span carries an aria-hidden="true" attribute in the templates.
 * Screen readers skip them; visible labels / aria-labels carry meaning.
 */

.wnp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 20px; /* default icon size; override per context */
  flex-shrink: 0;
  pointer-events: none;
  color: inherit;
}

/* ── Render each icon via inline SVG use ──────────────────────────────────
   The span becomes a flex container holding a generated SVG.
   We use ::before with content: url() for simple SVG icons,
   but the most robust cross-browser approach is adding the <svg><use>
   directly in PHP templates (which the templates already do).

   For icons output via CSS class alone (e.g. the chevron in nav links
   that are added by the walker), we use background-image masks.
──────────────────────────────────────────────────────────────────────── */

/* Social icon sizes */
.wnp-social-btn .wnp-icon {
  font-size: var(--wnp-icon-size, 18px);
  width: var(--wnp-icon-size, 18px);
  height: var(--wnp-icon-size, 18px);
}

/* Utility icon buttons */
.wnp-icon-btn .wnp-icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

/* Nav chevrons */
.wnp-nav-link__chevron {
  font-size: 14px;
  width: 14px;
  height: 14px;
  opacity: 0.6;
  transition: transform var(--wnp-dur-md) var(--wnp-ease);
}

.wnp-nav-item--has-children:hover .wnp-nav-link__chevron,
.wnp-nav-item--has-children.wnp-open .wnp-nav-link__chevron {
  transform: rotate(180deg);
}

/* Panel back chevron */
.wnp-panel-back .wnp-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}

/* Drawer btn chevron-right */
.wnp-drawer-btn .wnp-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  opacity: 0.45;
}

/* CTA arrow */
.wnp-cta-btn .wnp-icon,
.wnp-drawer-cta .wnp-icon {
  font-size: 14px;
  width: 14px;
  height: 14px;
}

/* Close button */
.wnp-drawer__close .wnp-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
}