:root {
  /* Main Backgrounds & Surfaces */
  --pure-black: #000000; /* Main Background */
  --zinc-900: #18181b; /* Surface/Card Backgrounds */
  
  /* Borders & Dividers */
  --zinc-800: #27272a; /* Card Borders & Hover Secondary */
  --zinc-700: #3f3f46; /* Secondary Button Border */
  
  /* Typography & Text */
  --pure-white: #ffffff; /* Primary Text & Headings */
  --zinc-300: #d4d4d8; /* Secondary Button Text */
  --zinc-400: #a1a1aa; /* Secondary Text (Subtitles/Labels) */
  --zinc-500: #71717a; /* Tertiary Text (Muted/Placeholders) */
  
  /* Interactives */
  --zinc-200: #e4e4e7; /* Primary Button Hover */

  /* Status Accents (10% Opacity Backgrounds achieved via rgba) */
  --status-green-text: #4ade80;
  --status-green-bg: rgba(74, 222, 128, 0.1);
  
  --status-yellow-text: #facc15;
  --status-yellow-bg: rgba(250, 204, 21, 0.1);
  
  --status-gray-text: #a1a1aa;
  --status-gray-bg: rgba(161, 161, 170, 0.1);
}

/* =========================================
   BASE BODY & TYPOGRAPHY
   ========================================= */
body {
  background-color: var(--pure-black) !important;
  color: var(--pure-white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--pure-white);
}

/* Helpful text color utility classes you can add to WP blocks */
.text-secondary { color: var(--zinc-400) !important; }
.text-tertiary { color: var(--zinc-500) !important; }

/* =========================================
   BUTTONS
   ========================================= */
/* Primary Action Buttons (Cash App style) */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--pure-white) !important;
  color: var(--pure-black) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-weight: bold !important;
  border: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--zinc-200) !important;
}

/* Secondary Action Buttons (Mapped to WP's Outline Style) */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--zinc-300) !important;
  border: 1px solid var(--zinc-700) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-weight: 500 !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--zinc-800) !important;
  color: var(--pure-white) !important;
}

/* =========================================
   INPUT FIELDS
   ========================================= */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="search"], 
textarea, 
select {
  background-color: var(--pure-black) !important;
  border: 1px solid var(--zinc-800) !important;
  border-radius: 8px !important;
  color: var(--pure-white) !important;
  padding: 10px 12px;
}

input::placeholder, 
textarea::placeholder {
  color: var(--zinc-500) !important;
}

/* =========================================
   CARDS & CONTAINERS
   ========================================= */
/* Add the class 'custom-card' to any Group or Column block in WP */
.custom-card {
  background-color: var(--zinc-900) !important;
  border: 1px solid var(--zinc-800);
  border-radius: 12px !important;
  padding: 24px !important;
}

/* Mobile responsive padding for cards */
@media (max-width: 768px) {
  .custom-card {
    padding: 16px !important;
  }
}

/* =========================================
   STATUS BADGES
   ========================================= */
/* Add these classes (e.g., 'badge-live') to paragraph blocks or span tags */
.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px; /* Slightly smaller radius for small badges */
  font-size: 12px;
  font-weight: 500;
}

.badge-live {
  color: var(--status-green-text);
  background-color: var(--status-green-bg);
}

.badge-pending {
  color: var(--status-yellow-text);
  background-color: var(--status-yellow-bg);
}

.badge-neutral {
  color: var(--status-gray-text);
  background-color: var(--status-gray-bg);
}

/* Targeted fix for the mobile overlay menu background */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: #000000 !important;
}

/* Fix for the general header area */
header, .site-header, #masthead {
    background-color: #000000 !important;
}

/* Ensures the text remains white and visible */
.wp-block-navigation-item__label {
    color: #ffffff !important;
}