/* 
 * Language CSS for Wardiah Contracting Company
 * Contains styles for language switcher and language-specific styles
 */

/* Import ibrand font for English language */
@font-face {
  font-family: 'ibrand';
  src: url('../fonts/ibrand.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Language switcher button styles */
.language-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  margin-right: 15px;
  background-color: var(--secondary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: var(--transition-fast);
  white-space: nowrap;
  font-size: 0.9rem;
  z-index: 1002; /* Ensure it's above other elements */
}

.language-switcher:hover {
  background-color: #e57700;
  transform: translateY(-2px);
}

.language-switcher-icon {
  margin-left: 8px;
  font-size: 0.85em;
}

/* Language-specific styles */
html[lang="en"] {
  direction: ltr;
  /* Apply LTR-specific styles here */
}

html[lang="ar"] {
  direction: rtl;
  /* Apply RTL-specific styles here */
}

/* Font adjustments for each language */
html[lang="ar"] body {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}

html[lang="en"] body {
  font-family: "ibrand", "Arial", sans-serif;
}

/* LTR adjustments for English language */
html[lang="en"] .logo {
  flex-direction: row-reverse;
}

html[lang="en"] .logo-text {
  align-items: flex-start;
}

html[lang="en"] .section-title::after {
  left: 0;
  right: auto;
}

html[lang="en"] .section-header .section-title::after {
  left: 50%;
  transform: translateX(-50%);
}

html[lang="en"] .activity-icon {
  margin-left: 0;
  margin-right: 20px;
}

html[lang="en"] .activity-title,
html[lang="en"] .activity-description {
  text-align: left;
}

html[lang="en"] .contact-card-icon {
  margin-left: 0;
  margin-right: 15px;
}

html[lang="en"] .footer-col h3::after {
  left: 0;
  right: auto;
}

html[lang="en"] .footer-links a:hover {
  padding-right: 0;
  padding-left: 5px;
}

html[lang="en"] .projects-table th,
html[lang="en"] .projects-table td {
  text-align: left;
}

/* In mobile view, adjust the table cell layout for English */
@media screen and (max-width: 768px) {
  html[lang="en"] .projects-table td {
    text-align: left;
    padding-left: 10px;
    padding-right: 50%;
  }
  
  html[lang="en"] .projects-table td::before {
    left: auto;
    right: 10px;
    text-align: left;
  }
}

/* Mobile menu adjustments for English */
@media screen and (max-width: 768px) {
  html[lang="en"] .nav-list {
    right: auto;
    left: -100%;
    align-items: flex-start;
  }
  
  html[lang="en"] .nav-list.active {
    right: auto;
    left: 0;
  }
  
  html[lang="en"] .activity-card,
  html[lang="en"] .contact-card {
    flex-direction: column;
  }
  
  html[lang="en"] .activity-icon,
  html[lang="en"] .contact-card-icon {
    margin: 0 0 15px 0;
  }
  
  html[lang="en"] .language-switcher {
    margin-right: 0;
    margin-left: 15px;
  }
  
  html[lang="en"] .language-switcher-icon {
    margin-left: 0;
    margin-right: 8px;
  }
}

/* Mobile view adjustments for language switcher - REPOSITIONED INSIDE MOBILE MENU */
@media screen and (max-width: 576px) {
  .language-switcher {
    position: absolute; /* Changed to absolute to stick with header */
    top: 50%; /* Center vertically in the header */
    transform: translateY(-50%); /* Perfect vertical centering */
    right: 15px; /* Position at the right edge of header */
    padding: 6px 12px;
    font-size: 0.8rem;
    z-index: 1002;
    margin-right: 0;
    display: none; /* Hide by default in mobile view but allow override */
    visibility: hidden; /* Ensure it's hidden but allow override */
    opacity: 0; /* Ensure it's fully transparent but allow override */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for visual appeal */
    border-radius: 4px; /* Slightly rounded corners */
    transition: var(--transition-fast); /* Add transition for smooth movement */
  }
  
  /* When menu is open, make language switcher visible inside the menu */
  body.menu-open .language-switcher {
    position: static;
    transform: none;
    margin: 20px auto 0;
    width: fit-content;
    box-shadow: none;
    display: block !important; /* Override to show in menu */
    visibility: visible !important; /* Ensure it's visible in menu */
    opacity: 1 !important; /* Ensure it's fully opaque in menu */
  }
  
  /* When menu is open, move the language switcher to the nav-list */
  body.menu-open .nav-list {
    padding-bottom: 80px; /* Add space for language switcher */
  }
  
  .mobile-menu-btn {
    margin-right: 0; /* Remove margin as language switcher will move below */
  }
  
  html[lang="en"] .language-switcher {
    right: auto;
    left: 15px; /* Position at the left edge of header for English */
  }
  
  html[lang="en"] .mobile-menu-btn {
    margin-right: 0;
    margin-left: 0; /* Remove margin as language switcher will move below */
  }
  
  /* Ensure proper navigation in mobile view */
  .nav-menu {
    justify-content: flex-end;
    position: relative;
  }
}