/* === SEO Tools: Theme Polish (colors/shadows/backgrounds/spacing) === */
/* Scope: .page-seo-tools wrapper */

/* ============================================
   THEME TOKENS - Light Mode (default)
   ============================================ */
.page-seo-tools {
  /* Surfaces */
  --seo-surface: rgba(255, 255, 255, 0.98);
  --seo-card: rgba(255, 255, 255, 1);
  --seo-surface-2: rgba(255, 255, 255, 0.85);
  
  /* Borders */
  --seo-border: rgba(15, 23, 42, 0.08);
  
  /* Shadows - modern soft layered (light and tight) */
  --seo-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
  --seo-shadow-hover: 0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  
  /* Section backgrounds - very subtle (2-4% max) */
  --seo-section-bg: rgba(255, 255, 255, 1);
  --seo-section-grad: linear-gradient(180deg, rgba(59, 130, 246, 0.02) 0%, rgba(59, 130, 246, 0.01) 100%);
  
  /* Accent colors */
  --seo-accent: rgb(59, 130, 246);
  --seo-accent-soft: rgba(59, 130, 246, 0.08);
  --seo-accent-2-soft: rgba(99, 102, 241, 0.08);
  --seo-accent-3-soft: rgba(14, 165, 233, 0.08);
}

/* ============================================
   THEME TOKENS - Dark Mode
   ============================================ */
[data-theme="dark"] .page-seo-tools {
  /* Surfaces */
  --seo-surface: rgba(30, 41, 59, 0.48);
  --seo-card: rgba(30, 41, 59, 0.65);
  --seo-surface-2: rgba(30, 41, 59, 0.45);
  
  /* Borders */
  --seo-border: rgba(148, 163, 184, 0.14);
  
  /* Shadows - deeper but not muddy */
  --seo-shadow: 0 2px 6px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.12);
  --seo-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.18);
  
  /* Section backgrounds - deep neutral with subtle radial accents */
  --seo-section-bg: rgba(15, 23, 42, 0.40);
  --seo-section-grad: radial-gradient(ellipse at top, rgba(59, 130, 246, 0.04) 0%, transparent 70%);
  
  /* Accent colors */
  --seo-accent: rgb(96, 165, 250);
  --seo-accent-soft: rgba(59, 130, 246, 0.12);
  --seo-accent-2-soft: rgba(99, 102, 241, 0.12);
  --seo-accent-3-soft: rgba(14, 165, 233, 0.12);
}

/* ============================================
   SECTION CONTAINERS - Panel Backgrounds
   Consistent padding and spacing
   ============================================ */

/* Base section styles - consistent padding */
.page-seo-tools .seo-tools-primary,
.page-seo-tools .seo-tools-secondary-group {
  background: var(--seo-section-bg);
  border: 1px solid var(--seo-border);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}

/* Very subtle gradient overlay (2-4% tint max) */
.page-seo-tools .seo-tools-primary::before,
.page-seo-tools .seo-tools-secondary-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--seo-section-grad);
  pointer-events: none;
  opacity: 1;
  z-index: 0;
}

/* Technical section - very subtle violet tint */
.page-seo-tools .seo-tools-secondary-group:nth-of-type(1)::before {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.02) 0%, rgba(99, 102, 241, 0.01) 100%);
}

/* Site Assets section - very subtle teal tint */
.page-seo-tools .seo-tools-secondary-group:nth-of-type(2)::before {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.02) 0%, rgba(14, 165, 233, 0.01) 100%);
}

[data-theme="dark"] .page-seo-tools .seo-tools-secondary-group:nth-of-type(1)::before {
  background: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.04) 0%, transparent 70%);
}

[data-theme="dark"] .page-seo-tools .seo-tools-secondary-group:nth-of-type(2)::before {
  background: radial-gradient(ellipse at top, rgba(14, 165, 233, 0.04) 0%, transparent 70%);
}

/* Ensure section content is above the gradient overlay */
.page-seo-tools .seo-tools-primary > *,
.page-seo-tools .seo-tools-secondary-group > * {
  position: relative;
  z-index: 1;
}

/* Remove the old border-image gradients that create blue slabs */
.page-seo-tools .seo-tools-primary,
.page-seo-tools .seo-tools-secondary-group {
  border-left: none !important;
  border-image: none !important;
  padding-left: 24px !important;
}

/* Override conflicting background gradients from seo-tools.css */
[data-theme="dark"] .page-seo-tools .seo-tools-primary,
[data-theme="dark"] .page-seo-tools .seo-tools-secondary-group,
[data-theme="light"] .page-seo-tools .seo-tools-primary,
[data-theme="light"] .page-seo-tools .seo-tools-secondary-group {
  background: var(--seo-section-bg) !important;
}

[data-theme="dark"] .page-seo-tools .seo-tools-secondary-group:nth-of-type(1),
[data-theme="light"] .page-seo-tools .seo-tools-secondary-group:nth-of-type(1),
[data-theme="dark"] .page-seo-tools .seo-tools-secondary-group:nth-of-type(2),
[data-theme="light"] .page-seo-tools .seo-tools-secondary-group:nth-of-type(2) {
  background: var(--seo-section-bg) !important;
}

/* Fix Site Assets section padding/margin to match others */
.page-seo-tools .seo-tools-secondary-group:nth-of-type(2) {
  padding: 24px;
  margin-bottom: 32px;
}

/* Section headers - consistent spacing */
.page-seo-tools .seo-tools-primary h2,
.page-seo-tools .seo-tools-secondary-group h2 {
  margin-top: 0;
  margin-bottom: 8px;
  padding-left: 0;
}

/* ============================================
   CARD STYLING
   ============================================ */

/* Standard cards - stronger surface contrast */
.page-seo-tools .seo-card {
  background: var(--seo-card);
  border: 1px solid var(--seo-border);
  box-shadow: var(--seo-shadow);
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

/* Hover: increase elevation (shadow + border brightening, slight lift) */
.page-seo-tools .seo-card:hover {
  box-shadow: var(--seo-shadow-hover);
  border-color: rgba(59, 130, 246, 0.18);
  transform: translateY(-1px);
}

/* Featured/Primary cards - keep subtle accent */
.page-seo-tools .seo-card--featured:hover {
  border-color: rgba(59, 130, 246, 0.22);
}

/* Coming soon cards - muted but readable with subtle diagonal overlay */
.page-seo-tools .seo-card--coming,
.page-seo-tools .seo-card.is-disabled {
  background: var(--seo-surface-2);
  border: 1px dashed var(--seo-border);
  box-shadow: none;
  opacity: 0.88;
  position: relative;
  overflow: hidden;
}

.page-seo-tools .seo-card--coming::before,
.page-seo-tools .seo-card.is-disabled::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(15, 23, 42, 0.015) 10px,
    rgba(15, 23, 42, 0.015) 20px
  );
  pointer-events: none;
  opacity: 0.4;
}

[data-theme="dark"] .page-seo-tools .seo-card--coming::before,
[data-theme="dark"] .page-seo-tools .seo-card.is-disabled::before {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.01) 10px,
    rgba(255, 255, 255, 0.01) 20px
  );
}

/* Disable hover on coming soon cards */
.page-seo-tools .seo-card--coming:hover,
.page-seo-tools .seo-card.is-disabled:hover {
  box-shadow: none;
  border-color: var(--seo-border);
  transform: none;
}

/* ============================================
   ICON ACCENT COLORS (per section) - Subtle
   ============================================ */

/* Primary section icons - subtle blue accent */
.page-seo-tools .seo-tools-primary .seo-card__icon {
  background: var(--seo-accent-soft);
  border: 1px solid rgba(59, 130, 246, 0.12);
}

.page-seo-tools .seo-tools-primary .seo-card__icon i {
  color: var(--seo-accent);
  stroke: currentColor;
}

/* Technical section icons - subtle violet accent */
.page-seo-tools .seo-tools-secondary-group:nth-of-type(1) .seo-card__icon {
  background: var(--seo-accent-2-soft);
  border: 1px solid rgba(99, 102, 241, 0.12);
}

.page-seo-tools .seo-tools-secondary-group:nth-of-type(1) .seo-card__icon i {
  color: rgb(99, 102, 241);
  stroke: currentColor;
}

/* Site Assets section icons - subtle teal accent */
.page-seo-tools .seo-tools-secondary-group:nth-of-type(2) .seo-card__icon {
  background: var(--seo-accent-3-soft);
  border: 1px solid rgba(14, 165, 233, 0.12);
}

.page-seo-tools .seo-tools-secondary-group:nth-of-type(2) .seo-card__icon i {
  color: rgb(14, 165, 233);
  stroke: currentColor;
}

/* ============================================
   BADGES/PILLS - Recolor to match sections
   ============================================ */

/* Featured badge - primary blue */
.page-seo-tools .seo-tools-primary .seo-card__badge--featured {
  background: var(--seo-accent-soft);
  border: 1px solid rgba(59, 130, 246, 0.18);
  color: var(--seo-accent);
}

[data-theme="light"] .page-seo-tools .seo-tools-primary .seo-card__badge--featured {
  background: rgba(59, 130, 246, 0.10);
  color: rgb(37, 99, 235);
}

/* Free badge - match section accent */
.page-seo-tools .seo-tools-primary .seo-card__badge--free {
  background: var(--seo-accent-soft);
  border: 1px solid rgba(59, 130, 246, 0.16);
  color: var(--seo-accent);
}

.page-seo-tools .seo-tools-secondary-group:nth-of-type(1) .seo-card__badge--free {
  background: var(--seo-accent-2-soft);
  border: 1px solid rgba(99, 102, 241, 0.16);
  color: rgb(99, 102, 241);
}

.page-seo-tools .seo-tools-secondary-group:nth-of-type(2) .seo-card__badge--free {
  background: var(--seo-accent-3-soft);
  border: 1px solid rgba(14, 165, 233, 0.16);
  color: rgb(14, 165, 233);
}

[data-theme="light"] .page-seo-tools .seo-card__badge--free {
  background: rgba(59, 130, 246, 0.10);
  color: rgb(37, 99, 235);
}

[data-theme="light"] .page-seo-tools .seo-tools-secondary-group:nth-of-type(1) .seo-card__badge--free {
  background: rgba(99, 102, 241, 0.10);
  color: rgb(79, 70, 229);
}

[data-theme="light"] .page-seo-tools .seo-tools-secondary-group:nth-of-type(2) .seo-card__badge--free {
  background: rgba(14, 165, 233, 0.10);
  color: rgb(2, 132, 199);
}

/* Coming soon badge - muted but readable */
.page-seo-tools .seo-card__badge--coming-soon {
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: rgba(71, 85, 105, 1);
}

[data-theme="dark"] .page-seo-tools .seo-card__badge--coming-soon {
  background: rgba(148, 163, 184, 0.14);
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(203, 213, 225, 1);
}

/* ============================================
   RESPONSIVE: Consistent padding on mobile
   ============================================ */

@media (max-width: 768px) {
  .page-seo-tools .seo-tools-primary,
  .page-seo-tools .seo-tools-secondary-group {
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 24px;
  }
  
  .page-seo-tools .seo-tools-secondary-group:nth-of-type(2) {
    padding: 20px;
    margin-bottom: 24px;
  }
}