/**
 * Main CSS - التنسيقات الأساسية
 * Main Theme Styles
 * 
 * @package OIC_Atif_Al_Abbasi
 * @version 1.0.001
 */

/**
 * ═══════════════════════════════════════════════════════════════════
 * Container
 * ═══════════════════════════════════════════════════════════════════
 */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

/**
 * ═══════════════════════════════════════════════════════════════════
 * Site Structure
 * ═══════════════════════════════════════════════════════════════════
 */

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-header {
  position: relative;
  z-index: var(--z-sticky);
}

.site-main {
  flex: 1;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.site-footer {
  margin-top: auto;
}

/**
 * ═══════════════════════════════════════════════════════════════════
 * Layout - تم نقله إلى layout.css
 * Layout is now in components/layout.css
 * ═══════════════════════════════════════════════════════════════════
 */

/* تم نقل كل CSS الخاص بالـ Layout إلى components/layout.css */

/**
 * ═══════════════════════════════════════════════════════════════════
 * Typography
 * ═══════════════════════════════════════════════════════════════════
 */

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

/**
 * ═══════════════════════════════════════════════════════════════════
 * Buttons
 * ═══════════════════════════════════════════════════════════════════
 */

.btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base) var(--transition-ease);
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
}

.btn-primary:hover {
  background-color: var(--color-link-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}

/**
 * ═══════════════════════════════════════════════════════════════════
 * Forms
 * ═══════════════════════════════════════════════════════════════════
 */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 12px 16px;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base) var(--transition-ease);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/**
 * ═══════════════════════════════════════════════════════════════════
 * Responsive Utilities
 * ═══════════════════════════════════════════════════════════════════
 */

/* Hide on mobile */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on desktop */
@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}

/* نهاية main.css */