// Global Reset - Scoped to #sideconvo-app
// Prevents interference with WordPress admin styles
//
// IMPORTANT: Element-level resets use :where() to keep specificity at (0,0,0,0).
// This ensures CSS Module classes (0,0,1,0) always win over the reset.
// Without :where(), rules like #sideconvo-app button { background: none }
// have specificity (0,1,0,1) which overrides module classes.
@use 'sass:map';
@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;

// Google Fonts
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

// Root-level styles — needs ID specificity to override WordPress admin
#sideconvo-app {
  font-family: $font-family-base;
  font-size: map.get($font-sizes, 'base');
  font-weight: map.get($font-weights, 'normal');
  line-height: 1.5;
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  // Box-sizing is safe (non-visual) — keep under ID scope
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
}

// Element-level resets — wrapped in :where() for zero specificity.
// CSS Module classes always win; WordPress styles may leak through for
// unstyled elements, but all our UI goes through module-classed components.
:where(#sideconvo-app) {
  // Reset margins/padding on all elements
  :where(*, *::before, *::after) {
    margin: 0;
    padding: 0;
  }

  // Reset headings to inherit — prevent WP admin heading styles
  :where(h1, h2, h3, h4, h5, h6) {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }

  // Reset paragraphs
  :where(p) {
    overflow-wrap: break-word;
  }

  :where(img, picture, video, canvas, svg) {
    display: block;
    max-width: 100%;
  }

  // Reset form elements — WP admin has heavy button/input styling
  :where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    border-radius: 0;
    line-height: inherit;
    -webkit-appearance: none;
    appearance: none;
  }

  :where(button) {
    cursor: pointer;
  }

  :where(a) {
    color: var(--color-primary-base);
    text-decoration: none;
  }

  :where(ul, ol) {
    list-style: none;
  }

  :where(table) {
    border-collapse: collapse;
    border-spacing: 0;
  }

  :where(th, td) {
    padding: 0;
    text-align: left;
  }
}