/*
Theme Name:   Eduall Child
Theme URL:    https://wowtheme7.com/eduall-child/
Description:  Education WordPress Theme
Author:       wowtheme7
Author URL:   https://wowtheme7.com/
Template:     eduall
Version:      1.0.4
License:      GNU General Public License v2 or later
License URL:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  eduallchildtheme
*/

/*
   Please Add your custom styles here
*/

/* ============================================================
   Gravity E-Learning - Complete Design System
   Version: 2.0
   Domain: gcc-learn.com
   ============================================================ */

/* ---- 1. Import Cairo Font (Arabic & Latin) ---- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

/* ---- 2. CSS Custom Properties (Design Tokens) ---- */
:root {
  /* Brand Colors */
  --gravity-primary:     #1B3A6B;   /* Deep Blue */
  --gravity-secondary:   #F47920;   /* Orange */
  --gravity-accent:      #00A8C6;   /* Teal */
  --gravity-dark:        #0D1B2A;   /* Dark Navy */
  --gravity-light:       #F5F7FA;   /* Light BG */
  --gravity-white:       #FFFFFF;
  --gravity-text:        #333333;
  --gravity-text-light:  #666666;
  --gravity-border:      #E5E7EB;
  --gravity-gold:        #D4A017;
  --gravity-success:     #10B981;
  --gravity-warning:     #F59E0B;
  --gravity-error:       #EF4444;

  /* Typography */
  --gravity-font:        'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --gravity-font-size-xs:    12px;
  --gravity-font-size-sm:    14px;
  --gravity-font-size-base:  16px;
  --gravity-font-size-md:    18px;
  --gravity-font-size-lg:    20px;
  --gravity-font-size-xl:    24px;
  --gravity-font-size-2xl:   28px;
  --gravity-font-size-3xl:   36px;
  --gravity-font-size-4xl:   48px;
  --gravity-font-size-5xl:   60px;

  /* Spacing */
  --gravity-radius-sm:   4px;
  --gravity-radius:      8px;
  --gravity-radius-md:   12px;
  --gravity-radius-lg:   16px;
  --gravity-radius-xl:   24px;
  --gravity-radius-full: 9999px;

  /* Shadows */
  --gravity-shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --gravity-shadow:      0 4px 12px rgba(27,58,107,0.10);
  --gravity-shadow-md:   0 8px 24px rgba(27,58,107,0.15);
  --gravity-shadow-lg:   0 16px 40px rgba(27,58,107,0.20);

  /* Transitions */
  --gravity-transition:  all 0.3s ease;
}

/* ---- 3. Global Font Override (Cairo for ALL elements) ---- */
*,
*::before,
*::after {
  font-family: var(--gravity-font) !important;
}

html,
body,
p, span, div, a, li, td, th,
input, textarea, select, button,
label, blockquote, cite,
.elementor-widget-container,
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--gravity-font) !important;
}

/* ---- 4. Heading Sizes & Weights ---- */
h1, .h1,
.elementor-widget-heading h1,
.elementor-widget-heading .elementor-heading-title.elementor-size-xl,
.elementor-widget-heading .elementor-heading-title.elementor-size-xxl {
  font-family: var(--gravity-font) !important;
  font-size: var(--gravity-font-size-4xl) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--gravity-dark) !important;
  letter-spacing: -0.5px;
}

h2, .h2,
.elementor-widget-heading h2,
.elementor-widget-heading .elementor-heading-title.elementor-size-large {
  font-family: var(--gravity-font) !important;
  font-size: var(--gravity-font-size-3xl) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--gravity-dark) !important;
}

h3, .h3,
.elementor-widget-heading h3,
.elementor-widget-heading .elementor-heading-title.elementor-size-medium {
  font-family: var(--gravity-font) !important;
  font-size: var(--gravity-font-size-2xl) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--gravity-dark) !important;
}

h4, .h4,
.elementor-widget-heading h4 {
  font-family: var(--gravity-font) !important;
  font-size: var(--gravity-font-size-xl) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--gravity-primary) !important;
}

h5, .h5,
.elementor-widget-heading h5 {
  font-family: var(--gravity-font) !important;
  font-size: var(--gravity-font-size-lg) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: var(--gravity-primary) !important;
}

h6, .h6,
.elementor-widget-heading h6 {
  font-family: var(--gravity-font) !important;
  font-size: var(--gravity-font-size-base) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: var(--gravity-primary) !important;
}

/* ---- 5. Body Text ---- */
body {
  font-family: var(--gravity-font) !important;
  font-size: var(--gravity-font-size-base) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: var(--gravity-text) !important;
  background-color: var(--gravity-white) !important;
}

p {
  font-family: var(--gravity-font) !important;
  font-size: var(--gravity-font-size-base) !important;
  line-height: 1.7 !important;
  color: var(--gravity-text) !important;
}

/* ---- 6. Links ---- */
a {
  font-family: var(--gravity-font) !important;
  color: var(--gravity-primary) !important;
  transition: var(--gravity-transition) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--gravity-secondary) !important;
}

/* ---- 7. Logo Styling ---- */
.logo .site-logo,
.logo a.site-logo,
.logo .custom-logo-link {
  display: inline-flex !important;
  align-items: center !important;
}

.logo .site-logo img,
.logo a.site-logo img,
.logo .custom-logo-link img,
.logo a img,
.custom-logo {
  max-height: 65px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Sticky Header Logo */
.sticky-header .logo img,
.header-sticky .logo img,
.fixed-header .logo img,
.is-sticky .logo img,
.header.sticky .logo img {
  max-height: 50px !important;
  width: auto !important;
}

/* ---- 8. Header Styling ---- */
.header {
  background-color: var(--gravity-white) !important;
  box-shadow: var(--gravity-shadow-sm) !important;
  transition: var(--gravity-transition) !important;
}

.header .nav-link,
.header .main-menu li a,
.header-inner .main-menu li a {
  font-family: var(--gravity-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--gravity-dark) !important;
  transition: var(--gravity-transition) !important;
}

.header .nav-link:hover,
.header .main-menu li a:hover,
.header-inner .main-menu li a:hover {
  color: var(--gravity-secondary) !important;
}

/* ---- 9. Buttons ---- */
.btn,
.button,
button:not(.slick-arrow):not(.menu-toggle),
input[type="submit"],
input[type="button"],
.elementor-button,
.boxed-btn,
.theme-btn,
.enroll-btn,
.tutor-btn {
  font-family: var(--gravity-font) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border-radius: var(--gravity-radius) !important;
  transition: var(--gravity-transition) !important;
  letter-spacing: 0.3px !important;
}

.btn-primary,
.boxed-btn.btn-primary,
.theme-btn,
.enroll-btn {
  background-color: var(--gravity-primary) !important;
  color: var(--gravity-white) !important;
  border-color: var(--gravity-primary) !important;
}

.btn-primary:hover,
.boxed-btn.btn-primary:hover,
.theme-btn:hover,
.enroll-btn:hover {
  background-color: var(--gravity-secondary) !important;
  border-color: var(--gravity-secondary) !important;
  color: var(--gravity-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--gravity-shadow-md) !important;
}

/* ---- 10. Cards & Course Cards ---- */
.course-card,
.tutor-course-card,
.course-item,
.card {
  border-radius: var(--gravity-radius-md) !important;
  box-shadow: var(--gravity-shadow) !important;
  transition: var(--gravity-transition) !important;
  overflow: hidden !important;
  border: 1px solid var(--gravity-border) !important;
}

.course-card:hover,
.tutor-course-card:hover,
.course-item:hover,
.card:hover {
  box-shadow: var(--gravity-shadow-lg) !important;
  transform: translateY(-4px) !important;
}

/* ---- 11. Section Titles ---- */
.section-title,
.section-heading,
.widget-title {
  font-family: var(--gravity-font) !important;
  font-weight: 700 !important;
  color: var(--gravity-dark) !important;
}

/* ---- 12. Footer ---- */
.footer-section,
.footer-style,
.footer-wrap {
  font-family: var(--gravity-font) !important;
}

.footer-list li,
.footer-widget p,
.footer-widget a {
  font-family: var(--gravity-font) !important;
  font-size: 14px !important;
}

/* ---- 13. Forms ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
  font-family: var(--gravity-font) !important;
  font-size: var(--gravity-font-size-base) !important;
  border-radius: var(--gravity-radius) !important;
  border-color: var(--gravity-border) !important;
  transition: var(--gravity-transition) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--gravity-primary) !important;
  box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.1) !important;
  outline: none !important;
}

/* ---- 14. Elementor Widgets ---- */
.elementor-widget-text-editor *,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-button .elementor-button,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-description {
  font-family: var(--gravity-font) !important;
}

/* ---- 15. Tutor LMS Specific ---- */
.tutor-course-card-title,
.tutor-course-title,
.tutor-lesson-title,
.tutor-quiz-title,
.tutor-course-meta,
.tutor-course-price,
.tutor-course-rating,
.tutor-dashboard-title,
.tutor-dashboard-nav li a {
  font-family: var(--gravity-font) !important;
}

.tutor-btn-primary {
  background-color: var(--gravity-primary) !important;
  font-family: var(--gravity-font) !important;
  font-weight: 600 !important;
  border-radius: var(--gravity-radius) !important;
}

.tutor-btn-primary:hover {
  background-color: var(--gravity-secondary) !important;
}

/* ---- 16. Responsive - Tablet (768px - 1024px) ---- */
@media (max-width: 1024px) {
  h1, .h1 {
    font-size: 38px !important;
  }
  h2, .h2 {
    font-size: 30px !important;
  }
  h3, .h3 {
    font-size: 24px !important;
  }
  h4, .h4 {
    font-size: 20px !important;
  }
  .logo .site-logo img,
  .logo .custom-logo-link img {
    max-height: 55px !important;
  }
}

/* ---- 17. Responsive - Mobile (max 767px) ---- */
@media (max-width: 767px) {
  h1, .h1 {
    font-size: 30px !important;
    line-height: 1.3 !important;
  }
  h2, .h2 {
    font-size: 24px !important;
    line-height: 1.35 !important;
  }
  h3, .h3 {
    font-size: 20px !important;
  }
  h4, .h4 {
    font-size: 18px !important;
  }
  h5, .h5 {
    font-size: 16px !important;
  }
  body {
    font-size: 15px !important;
  }
  p {
    font-size: 15px !important;
  }
  .logo .site-logo img,
  .logo .custom-logo-link img {
    max-height: 50px !important;
  }
  .btn,
  .button,
  .elementor-button,
  .boxed-btn {
    font-size: 14px !important;
    padding: 10px 20px !important;
  }
}

/* ---- 18. Responsive - Small Mobile (max 480px) ---- */
@media (max-width: 480px) {
  h1, .h1 {
    font-size: 26px !important;
  }
  h2, .h2 {
    font-size: 22px !important;
  }
  h3, .h3 {
    font-size: 18px !important;
  }
  .logo .site-logo img,
  .logo .custom-logo-link img {
    max-height: 45px !important;
  }
}

/* ---- 19. RTL Support (Arabic) ---- */
[dir="rtl"],
.rtl {
  font-family: var(--gravity-font) !important;
  text-align: right !important;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] p,
[dir="rtl"] a,
[dir="rtl"] li,
.rtl h1,
.rtl h2,
.rtl h3,
.rtl h4,
.rtl h5,
.rtl h6,
.rtl p,
.rtl a,
.rtl li {
  font-family: var(--gravity-font) !important;
}

/* ---- 20. WooCommerce Compatibility ---- */
.woocommerce,
.woocommerce-page,
.woocommerce-cart,
.woocommerce-checkout {
  font-family: var(--gravity-font) !important;
}

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--gravity-font) !important;
  font-weight: 600 !important;
  border-radius: var(--gravity-radius) !important;
  background-color: var(--gravity-primary) !important;
  color: var(--gravity-white) !important;
}

.woocommerce .button:hover,
.woocommerce button.button:hover {
  background-color: var(--gravity-secondary) !important;
}

/* ---- 21. Gravity E-Learning Brand Accents ---- */
.gravity-primary-bg {
  background-color: var(--gravity-primary) !important;
}

.gravity-secondary-bg {
  background-color: var(--gravity-secondary) !important;
}

.gravity-primary-text {
  color: var(--gravity-primary) !important;
}

.gravity-secondary-text {
  color: var(--gravity-secondary) !important;
}

/* ---- 22. Preloader Styling ---- */
.preloader {
  background-color: var(--gravity-white) !important;
}

/* ---- 23. Scrollbar Styling ---- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gravity-light);
}

::-webkit-scrollbar-thumb {
  background: var(--gravity-primary);
  border-radius: var(--gravity-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gravity-secondary);
}

/* ---- 24. Selection Color ---- */
::selection {
  background-color: var(--gravity-primary);
  color: var(--gravity-white);
}

::-moz-selection {
  background-color: var(--gravity-primary);
  color: var(--gravity-white);
}

/* ============================================================
   END - Gravity E-Learning Design System
   ============================================================ */