// ═══════════════════════════════════════════════════════════════════════════
// WP Compress — Base & Global Resets
// ═══════════════════════════════════════════════════════════════════════════

// ─── WP Admin Content Area Reset ─────────────────────────────────────────
// WordPress sets padding-left: 20px on #wpcontent. We reset it ONLY
// when our plugin container is present — never on other admin pages.
#wpcontent:has(.wpc-advanced-settings-container-v4),
#wpcontent:has(.wpc-lite-settings-container) {
  padding-left: 0 !important; // FORCED: WP admin sets padding-left: 20px
}

// ─── Plugin Container — Box Model Reset ──────────────────────────────────
.wpc-advanced-settings-container-v4,
.wpc-lite-settings-container {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  font-family: @font-regular;
  font-size: @font-size-base;
  color: @color-text-body;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  // ─── Selection ───────────────────────────────────────────────────────────
  &::selection {
    background: fade(@color-primary, 20%);
    color: @color-text-dark;
  }

  // ─── Scrollbar (webkit) ──────────────────────────────────────────────────
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: @color-border;
    border-radius: @radius-pill;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: @color-gray-muted;
  }

  // ─── Focus Visible ───────────────────────────────────────────────────────
  &:focus-visible {
    outline: 2px solid var(--wpc-brand-primary-light, @color-primary);
    outline-offset: 2px;
    border-radius: @radius-sm;
  }

  // ─── Links ───────────────────────────────────────────────────────────────
  a {
    color: var(--wpc-brand-primary-dark, @color-blue-deep);
    text-decoration: none;
    transition: @transition-fast;
  }

  a:hover {
    color: var(--wpc-brand-primary-dark, @color-blue-vivid);
  }

  // ─── Headings ────────────────────────────────────────────────────────────
  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: @font-semibold;
    color: @color-text-dark;
    margin: 0;
    line-height: 1.3;
  }

  // ─── Images ──────────────────────────────────────────────────────────────
  img {
    max-width: 100%;
    height: auto;
  }

  // ─── Utility: hide ───────────────────────────────────────────────────────
  .wpc-hidden {
    display: none !important; // FORCED: utility class, must override everything
  }
}

// ─── Sparkle Icon (FA Sharp Regular) ─────────────────────────────────────
.wpc-sparkle-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: -1px;
  margin-right: 6px;
  flex-shrink: 0;
}
