/*
 * JobReady Global Design System - Color Overrides
 *
 * CORRECTED Elementor Global Color → Design System mapping:
 *   Elementor primary   = #2682F9 Blue        → DS Primary   (buttons, links, active states)
 *   Elementor secondary = #FCA624 Orange       → DS Accent    (CTA buttons, আজই এনরোল করুন)
 *   Elementor text      = #40454F Neutral      → DS Neutral   (body text, descriptions, steps, taglines)
 *   Elementor accent    = #002FA7 Klein Blue    → DS Secondary (titles/headings)
 *
 * Rules:
 *   - Titles = accent color (Primary Blue #2682F9)
 *   - CTA buttons (আজই এনরোল করুন) = secondary color (Orange #FCA624)
 *   - Hero description = text color (#40454F)
 *   - ষ্টেপ ১/২/৩ = text color (#40454F)
 *   - Tagline = text color (#40454F)
 *
 * IMPORTANT: Do NOT override heading/body colors globally.
 * Elementor handles typography via its global color system and inline styles.
 * This file only overrides THEME-level elements (nav, forms, footer, WooCommerce).
 */

/* ===========================
   1. ELEMENTOR GLOBAL COLORS
   These are set in the DB. CSS below is a safety net.
   =========================== */
:root,
.elementor-kit-8 {
  --e-global-color-primary:   #2682F9;
  --e-global-color-secondary: #FCA624;
  --e-global-color-text:      #40454F;
  --e-global-color-accent:    #002FA7; /* Klein Blue - section headings */
  --e-global-color-9e78dc2:   #EBF4FE;
  --e-global-color-23e11f5:   rgba(15, 37, 110, 0.1);
  --e-global-color-d78bc54:   #0E0F11;
  --e-global-color-c17df56:   #054CA9;
  --e-global-color-830a821:   #0DC0FF;
  --e-global-color-669b684:   #E5F8FF;
  --e-global-color-92d2bae:   #054CA9;
  --e-global-color-5b18140:   #0E0F11;
  --e-global-color-e56eb3e:   #FFFFFF;
  --e-global-color-c7134ec:   #ADB2BD;
  --e-global-color-07a2fec:   #EBF4FE;
}

/* ===========================
   2. THEME NAVIGATION
   =========================== */
.site-header,
.gva-offcanvas,
.gavias-sidenav {
  background-color: #FFFFFF;
}

.gavias-menu .nav > li > a {
  color: #40454F;
}
.gavias-menu .nav > li > a:hover,
.gavias-menu .nav > li.active > a,
.gavias-menu .nav > li.current-menu-item > a {
  color: #2682F9;
}

.gavias-menu .dropdown-menu {
  border-color: #ADB2BD;
  background-color: #FFFFFF;
}
.gavias-menu .dropdown-menu > li > a {
  color: #40454F;
}
.gavias-menu .dropdown-menu > li > a:hover {
  color: #2682F9;
  background-color: #EBF4FE;
}

/* ===========================
   3. FORMS & INPUTS
   =========================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select,
.form-control {
  border-color: #ADB2BD;
  color: #40454F;
}
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: #2682F9 !important;
  box-shadow: 0 0 0 2px #D2E5FE !important;
}

/* ===========================
   4. TUTOR LMS
   =========================== */
.tutor-badge {
  background-color: #EBF4FE;
  color: #2682F9;
}

.tutor-enrollment-btn,
.tutor-btn-primary {
  background-color: #2682F9 !important;
  border-color: #2682F9 !important;
}

/* ===========================
   5. WOOCOMMERCE
   =========================== */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: #2682F9 !important;
  border-color: #2682F9 !important;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: #0665DF !important;
}

.woocommerce .star-rating,
.woocommerce-page .star-rating {
  color: #FCA624;
}
.woocommerce .price {
  color: #2682F9;
}

/* ===========================
   6. FOOTER
   =========================== */
.site-footer,
.footer-v1,
.footer-v2 {
  background-color: #0E0F11;
  color: #Ebedef;
}
.site-footer a,
.footer-v1 a,
.footer-v2 a {
  color: #ADB2BD;
}
.site-footer a:hover,
.footer-v1 a:hover,
.footer-v2 a:hover {
  color: #7EB5FB;
}
.footer-widget .widget-title {
  color: #FFFFFF;
}

/* ===========================
   7. MISC THEME ELEMENTS
   =========================== */
#gavias_goto_top,
.back-to-top {
  background-color: #2682F9 !important;
  color: #FFFFFF !important;
}

/* .breadcrumb trail background removed - handled by breadcrumb-unified.css */

.social-icons a,
.elementor-social-icons-wrapper a {
  color: #2682F9 !important;
}
.social-icons a:hover,
.elementor-social-icons-wrapper a:hover {
  color: #0665DF !important;
}

.badge-primary   { background-color: #2682F9; }
.badge-success   { background-color: #16A34A; }
.badge-warning   { background-color: #F5B70B; }
.badge-danger    { background-color: #DC2626; }
.badge-info      { background-color: #0DC0FF; }

.card, .card-body {
  border-color: #ADB2BD;
}
hr {
  border-color: #ADB2BD;
}

/* ===========================
   8. TAGLINE COLOR
   Theme uses var(--e-global-color-secondary) for tagline.
   Override to text color per design system.
   =========================== */
.gsc-heading .sub-title .tagline,
.gsc-heading .sub-title.sub-1 .tagline,
.gsc-heading .sub-title.sub-3 .tagline,
.gsc-heading .sub-title.sub-4 .tagline {
  color: #40454F !important;  /* Neutral/500 = global text color */
}

.gsc-heading .sub-title.sub-2 .tagline, .gsc-heading .sub-title.sub-4 .tagline {
    background-color: #e5f8ff;
    color: #0DC0FF!important;
}

/* ===========================
   9. THEME WIDGET ITEM TITLES
   Digital Accounting, Digital Marketing, SEO, Cloud & DevOps, etc.
   These are theme widget titles (not Elementor widgets).
   Override to global text color.
   =========================== */
.iconbox-two__title {
  color: #40454F !important;  /* Neutral/500 = global text color */
}

/* ===========================
   12. SERVICE-ONE TITLE → Text color
   Override to match design system text color
   =========================== */
.service-one__title {
  color: #40454F !important;  /* Neutral/500 = global text color */
}

/* ===========================
   16. ICON BOX GROUP → White text on hover/active
   The base rule (.iconbox-two__title { color: #40454F !important; })
   overrides parent theme hover. This adds !important to hover/active.
   =========================== */
.iconbox-two__single:hover .iconbox-two__title,
.iconbox-two__single:focus .iconbox-two__title,
.iconbox-two__single.active .iconbox-two__title {
  color: #FFFFFF !important;
}

.site-header.scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ===========================
   17. HERO SLIDER PARAGRAPH
   Override paragraph font size inside the hero slider.
   ID: #heroSlider
   =========================== */
#heroSlider p,
#heroSlider .paragraph,
#heroSlider .content-text {
  font-size: 22px !important;
  line-height: 1.7 !important;
}

/* Tablet */
@media (max-width: 1024px) {
  #heroSlider p,
  #heroSlider .paragraph,
  #heroSlider .content-text {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  #heroSlider p,
  #heroSlider .paragraph,
  #heroSlider .content-text {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}