/*
Theme Name: Darbane Mustafa
Theme URI: https://darbanemustafa.com
Author: Dynamic Studio
Author URI: https://darbanemustafa.com
Description: A modern, lightweight, SEO-optimized, and RTL-ready custom WordPress theme for Darbane Mustafa Islamic media channel.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: darbane-mustafa
Tags: islamic, youtube, media, grid-layout, dark-mode, custom-background, custom-logo, translation-ready, rtl-language-support
*/

/**
 * CSS RESET & VARIABLE ARCHITECTURE
 */
:root {
  /* Color Palette */
  --dm-emerald: #0A3C2F;
  --dm-emerald-light: #125442;
  --dm-emerald-dark: #05261E;
  --dm-gold: #D4AF37;
  --dm-gold-light: #F3E5AB;
  --dm-gold-hover: #AA8B22;
  --dm-charcoal: #1A1A1A;
  --dm-light-bg: #F8F9FA;
  --dm-surface: #FFFFFF;
  --dm-border: #E2E8F0;
  --dm-text-main: #2D3748;
  --dm-text-muted: #718096;
  
  /* Typography */
  --dm-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --dm-font-heading: 'Amiri', 'Traditional Arabic', 'Georgia', serif;
  
  /* Layout Options */
  --dm-container-width: 1280px;
  --dm-border-radius: 12px;
  --dm-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --dm-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --dm-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

/* Dark Mode Variable Overrides */
[data-theme="dark"] {
  --dm-light-bg: #0F172A;
  --dm-surface: #1E293B;
  --dm-border: #334155;
  --dm-text-main: #F1F5F9;
  --dm-text-muted: #94A3B8;
  --dm-emerald: #10B981;
  --dm-emerald-dark: #064E3B;
  --dm-charcoal: #F8FAFC;
}

/* Base Body Engine */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background-color: var(--dm-light-bg);
  color: var(--dm-text-main);
  font-family: var(--dm-font-sans);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .arabic-text {
  font-family: var(--dm-font-heading);
  font-weight: 700;
  line-height: 1.3;
}

a { color: var(--dm-emerald); text-decoration: none; transition: var(--dm-transition); }
a:hover, a:focus { color: var(--dm-gold); }
img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: var(--dm-container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Responsive Grid Utility */
.dm-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) { .dm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dm-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .dm-grid-4 { grid-template-columns: repeat(4, 1fr); } }