/* ==============================
   GEC - WordPress Override Fixes
   assets/css/fixes.css
============================== */

/* ===== WORDPRESS GLOBAL RESETS ===== */
.site-footer ul,
.site-footer ol,
.footer-links,
.footer-links li,
.nav-menu li,
.widget-wrap ul,
.widget-wrap ol,
.widget-wrap li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.widget-wrap ul li::before,
.footer-links li::before {
  display: none !important;
  content: none !important;
}

/* WP block styles reset */
.wp-block-list,
.wp-block-list li {
  padding: 0;
}

/* ===== HERO FIXES ===== */
.hero-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-container {
  padding-top: 60px !important;
  padding-bottom: 80px !important;
}

.hero-title {
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
  line-height: 1.25 !important;
}

.hero-desc {
  font-size: 1rem !important;
  max-width: 600px;
}

.hero-stats {
  margin-top: 50px !important;
  padding: 20px 30px !important;
  flex-wrap: wrap;
  gap: 0;
}

.hero-stat { padding: 10px 24px !important; }
.hero-stat-num { font-size: 2.2rem !important; }
.hero-stat-suffix { font-size: 1.6rem !important; }

/* ===== FEATURES STRIP FIXES ===== */
.features-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 900px) {
  .features-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 500px) {
  .features-grid { grid-template-columns: 1fr !important; }
}

.feature-item {
  border-right: 1px solid var(--gec-gray-100) !important;
  border-left: none !important;
}

.feature-item:last-child { border-right: none !important; }

/* ===== SERVICES CARDS FIXES ===== */
.services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.service-card-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 14px !important;
}

.service-card-icon svg {
  width: 32px !important;
  height: 32px !important;
}

/* ===== ABOUT PREVIEW FIXES ===== */
.about-preview {
  overflow: hidden;
}

.about-preview-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  align-items: center !important;
}

.about-preview-img {
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
}

.about-preview-img-placeholder {
  height: 420px !important;
  border-radius: var(--radius-xl) !important;
}

/* ===== PROJECTS FIXES ===== */
.projects-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.project-card-img { height: 220px !important; }

.project-no-img {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== STATS SECTION FIXES ===== */
.stats-section { padding: 80px 0 !important; }

.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
}

.stat-item {
  padding: 20px 30px !important;
  border-right: 1px solid rgba(255,255,255,0.15) !important;
  border-left: none !important;
}

.stat-item:last-child { border-right: none !important; }

.stat-icon {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 14px !important;
}

.stat-icon svg {
  width: 28px !important;
  height: 28px !important;
}

.counter { font-size: 2.8rem !important; }
.stat-suffix { font-size: 1.8rem !important; }

/* ===== TEAM FIXES ===== */
.team-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

.team-card-img { height: 240px !important; }

.team-no-photo {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #e0ece9, #c8ddd9) !important;
  color: var(--gec-teal-mid) !important;
}

.team-no-photo svg {
  width: 64px !important;
  height: 64px !important;
  opacity: 0.5;
}

/* ===== TESTIMONIALS FIXES ===== */
.testimonials-swiper {
  padding-bottom: 50px !important;
  padding-right: 10px !important;
  padding-left: 10px !important;
}

.testimonial-card {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.testimonial-text {
  flex: 1;
  font-size: 0.95rem !important;
}

/* ===== BLOG FIXES ===== */
.blog-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.blog-card-img { height: 200px !important; }

.blog-no-img {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--gec-cream), #dde8dd) !important;
  color: var(--gec-teal) !important;
}

/* ===== PARTNERS TRACK FIXES ===== */
.partners-track {
  display: flex !important;
  align-items: center !important;
}

.partner-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 130px !important;
  flex-shrink: 0 !important;
}

/* ===== FOOTER FIXES ===== */
.footer-main { padding: 60px 0 !important; }

.footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr !important;
  gap: 40px !important;
}

.footer-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-links li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-links a {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.875rem !important;
  color: rgba(255,255,255,0.55) !important;
}

.footer-links a:hover { color: var(--gec-lime) !important; }

.footer-links a::before {
  content: '←' !important;
  font-size: 0.7rem !important;
  color: var(--gec-lime) !important;
  opacity: 0.7 !important;
}

/* ===== SECTION LABEL FIX (Arabic RTL) ===== */
.section-label {
  display: inline-block !important;
  position: relative !important;
  padding: 0 42px !important;
}

.section-label::before {
  right: 0 !important;
  left: auto !important;
}

.section-label::after {
  left: 0 !important;
  right: auto !important;
}

/* ===== BUTTON FIXES ===== */
.btn {
  white-space: nowrap;
  text-align: center;
}

.btn svg { flex-shrink: 0; }

/* ===== SCROLL INDICATOR FIX ===== */
.hero-scroll-indicator {
  position: absolute !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
}

/* ===== CARD HOVER FIX ===== */
.service-card,
.project-card,
.team-card,
.blog-card {
  transform: translateY(0);
  will-change: transform;
}

/* ===== FORM FIXES ===== */
.form-input.error,
.form-textarea.error,
.form-select.error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.1) !important;
}

/* ===== PAGE HERO FIX ===== */
.page-hero {
  padding: 90px 0 60px !important;
}

/* ===== SECTION CTA FOOTER ===== */
.section-footer {
  text-align: center !important;
  padding-top: 20px !important;
}

/* ===== MOBILE FIXES ===== */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .projects-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .team-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .stat-item { border: none !important; background: rgba(255,255,255,0.07) !important; border-radius: 16px !important; }
  .about-preview-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 768px) {
  .features-grid { grid-template-columns: 1fr !important; }
  .services-grid { grid-template-columns: 1fr !important; }
  .projects-grid { grid-template-columns: 1fr !important; }
  .team-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .blog-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .hero-stats { display: none !important; }
  .footer-cta-inner { flex-direction: column !important; text-align: center !important; }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr !important; }
}

/* ============================================
   FIX: RTL Footer Arrow Direction
   ============================================ */
.footer-links a::before {
    content: '→' !important; /* ✅ سهم يشاور نحو النص في RTL */
    font-size: 0.7rem !important;
    color: var(--gec-lime) !important;
    opacity: 0.7 !important;
}

/* ============================================
   DARK MODE SYSTEM
   ============================================ */
:root,
[data-theme="light"] {
    --bg-primary:       #ffffff;
    --bg-secondary:     #f5f7f5;
    --bg-card:          #ffffff;
    --bg-header:        #ffffff;
    --text-primary:     #2E3A2E;
    --text-secondary:   #556055;
    --text-muted:       #8A9A8A;
    --border-color:     rgba(0,0,0,0.08);
    --input-bg:         #f5f7f5;
}

[data-theme="dark"] {
    --bg-primary:       #0f1a14;
    --bg-secondary:     #162014;
    --bg-card:          #1a2e1a;
    --bg-header:        #0d1810;
    --text-primary:     #e8f5e4;
    --text-secondary:   #a5c9a0;
    --text-muted:       #6a9860;
    --border-color:     rgba(255,255,255,0.08);
    --input-bg:         #1a2e1a;
}

/* Apply Dark Mode */
[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .site-header,
[data-theme="dark"] #masthead {
    background-color: var(--bg-header) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.4) !important;
}

[data-theme="dark"] .nav-menu > li > a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] section,
[data-theme="dark"] .section {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] section:nth-child(even),
[data-theme="dark"] .bg-light {
    background-color: var(--bg-secondary) !important;
}

/* Cards in dark mode */
[data-theme="dark"] .card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"] {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Inline white backgrounds override */
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"] {
    background-color: var(--bg-card) !important;
}

/* Text color overrides for dark mode inline styles */
[data-theme="dark"] [style*="color:var(--gec-teal-dark)"],
[data-theme="dark"] [style*="color: var(--gec-teal-dark)"] {
    color: var(--text-primary) !important;
}
[data-theme="dark"] [style*="color:var(--gec-gray-400)"],
[data-theme="dark"] [style*="color: var(--gec-gray-400)"] {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] [style*="color:var(--gec-gray-600)"],
[data-theme="dark"] [style*="color: var(--gec-gray-600)"] {
    color: var(--text-muted) !important;
}

/* Dark sections stay dark */
[data-theme="dark"] [style*="background:var(--gec-teal-dark)"],
[data-theme="dark"] [style*="background:var(--gec-cream)"],
[data-theme="dark"] .stats-section,
[data-theme="dark"] .footer-cta-banner {
    /* these are already dark/themed, leave them */
}

/* Inputs in dark mode */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Dropdown nav in dark mode */
[data-theme="dark"] .nav-menu .sub-menu {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Mobile nav in dark mode */
[data-theme="dark"] .site-nav {
    background-color: var(--bg-card) !important;
}

/* ============================================
   BOXED LAYOUT SYSTEM
   ============================================ */
[data-boxed="1"] body {
    background-color: #e8ede8 !important;
}

[data-theme="dark"][data-boxed="1"] body {
    background-color: #070d07 !important;
}

[data-boxed="1"] #page,
[data-boxed="1"] .site {
    max-width: 1280px !important;
    margin: 0 auto !important;
    box-shadow: 0 0 60px rgba(0,0,0,0.15) !important;
    overflow: hidden !important;
}

@media (max-width: 1300px) {
    [data-boxed="1"] #page,
    [data-boxed="1"] .site {
        max-width: 100% !important;
        box-shadow: none !important;
    }
}

/* ============================================
   DARK MODE TOGGLE BUTTON STYLES
   ============================================ */
#gec-theme-toggle {
    position: fixed;
    bottom: 150px;
    left: 30px;
    z-index: 9999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--gec-teal);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(43,122,112,0.4);
    transition: all 0.3s ease;
}

#gec-theme-toggle:hover {
    background: var(--gec-teal-dark);
    transform: scale(1.1);
}

[data-theme="dark"] #gec-theme-toggle {
    background: var(--gec-lime);
}

/* ============================================
   FEATURES STRIP — Fix overlap spacing
   ============================================ */
.features-strip-wrap {
    position: relative;
    z-index: 10;
    margin-top: -40px !important;
    padding-bottom: 0 !important;
}

/* ============================================
   PROJECT CARD OVERLAY (template-part)
   ============================================ */
.project-card {
    background: white;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(27,80,80,0.07);
    border: 1px solid var(--gec-gray-100);
    transition: all 0.4s;
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(27,80,80,0.14);
}

.project-card-img {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: var(--gec-cream);
}

.project-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26,80,80,0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.project-card:hover .project-overlay { opacity: 1; }

.project-cat-badge {
    position: absolute;
    top: 14px;
    right: 14px;
}

.project-card-body {
    padding: 20px;
}

.project-card-title {
    font-size: 1rem !important;
    color: var(--gec-teal-dark) !important;
    margin-bottom: 8px !important;
}

.project-card-title a {
    color: inherit;
}

.project-card-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.project-card-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--gec-gray-400);
}

[data-theme="dark"] .project-card,
[data-theme="dark"] .project-card-body {
    background-color: var(--bg-card) !important;
}


/* ============================================
   PROJECT GALLERY & LIGHTBOX STYLES
   ============================================ */

/* Thumbnail strip */
.gec-gallery-thumb-link {
    transition: border-color 0.2s, transform 0.2s !important;
}
.gec-gallery-thumb-link:hover {
    border-color: var(--gec-lime) !important;
    transform: scale(1.05) !important;
}
.gec-gallery-thumb-link.active {
    border-color: var(--gec-lime) !important;
}

/* Main image hover zoom */
#gec-main-img:hover {
    transform: scale(1.02) !important;
}

/* Lightbox */
#gec-lightbox {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    animation: gec-lb-in 0.2s ease !important;
}

@keyframes gec-lb-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#gec-lightbox-img {
    box-shadow: 0 20px 80px rgba(0,0,0,0.8) !important;
    animation: gec-img-in 0.3s ease !important;
}

@keyframes gec-img-in {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

#gec-lightbox button:hover {
    background: rgba(255,255,255,0.25) !important;
}

/* Video embed */
.project-video-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16/9;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.project-video-wrap iframe,
.project-video-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ============================================
   ADMIN DASHBOARD — Gallery Meta Box Styles
   ============================================ */
.gec-gallery-thumb {
    transition: transform 0.2s, box-shadow 0.2s !important;
    cursor: grab !important;
}
.gec-gallery-thumb:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
.gec-gallery-thumb:active {
    cursor: grabbing !important;
}