/**
 * Unified Header - StylingCV 2026
 * Transparent header with scroll-to-solid behavior
 * Works for both English (LTR) and Arabic (RTL) sites
 *
 * Brand Colors:
 * - Teal Primary: #268599
 * - Coral Primary: #e8885e
 * - Navy Dark: #16344c
 * - Transitional: #618480
 */

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
  --header-bg-transparent: transparent;
  --header-bg-solid: rgba(255, 255, 255, 0.75);
  --header-text-light: #ffffff;
  --header-text-dark: #5a5a5a;
  --header-accent: #268599;
  --header-accent-hover: #e8885e;
  --header-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  --header-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --font-body-en: 'Poppins', sans-serif;
  --font-body-ar: '29LTZaridSansAL', 'Tajawal', sans-serif;
}

/* ============================================
   TRANSPARENT HEADER (Initial State - Top of Page)
   White logo, white text on transparent background
   ============================================ */

/* Main navbar - transparent by default */
nav.navbar.bootsnav,
nav.navbar.bootsnav.navbar-sticky,
nav.navbar.bootsnav.navbar-fixed,
nav.navbar.bootsnav.no-background,
.wrap-sticky nav.navbar.bootsnav,
header.nt-site-header nav.navbar.bootsnav {
  background-color: var(--header-bg-transparent) !important;
  background: var(--header-bg-transparent) !important;
  box-shadow: none !important;
  border-bottom: none !important;
  transition: var(--header-transition) !important;
}

/* Mega menu wrapper - transparent */
#mega-menu-wrap-header_menu_1,
#mega-menu-wrap-header_menu_1 .mega-menu-toggle,
#mega-menu-wrap-header_menu_1 #mega-menu-header_menu_1 {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ============================================
   LOGO HANDLING - Dual Logo System
   ============================================ */

/* Logo container setup */
nav.navbar.bootsnav .navbar-brand,
nav.navbar.bootsnav .navbar-header .navbar-brand,
#nt-logo {
  position: relative;
  display: flex;
  align-items: center;
}

/* Hide any old/default logo images */
nav.navbar.bootsnav .navbar-brand img.default-logo,
nav.navbar.bootsnav .navbar-brand img.logo-display:not(.header-logo-white),
nav.navbar.bootsnav .navbar-brand img.logo-scrolled:not(.header-logo-dark),
#nt-logo img.default-logo {
  display: none !important;
}

/* Logo wrapper for switching */
.header-logo-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  min-width: 160px;
}

.header-logo-wrapper img {
  height: 40px;
  width: auto;
  max-width: 160px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* White logo (visible on transparent header) */
.header-logo-white,
img.header-logo-white {
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

/* Dark logo (hidden on transparent header) */
.header-logo-dark,
img.header-logo-dark {
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* RTL logo positioning */
[dir="rtl"] .header-logo-wrapper {
  direction: rtl;
}

[dir="rtl"] .header-logo-white,
[dir="rtl"] .header-logo-dark,
html[lang="ar"] .header-logo-white,
html[lang="ar"] .header-logo-dark,
body#arabicSite .header-logo-white,
body#arabicSite .header-logo-dark {
  left: auto;
  right: 0;
}

/* ============================================
   NAVIGATION LINKS - Transparent State
   ============================================ */

/* Menu links - white on transparent */
nav.navbar.bootsnav ul.nav > li > a,
nav.navbar.bootsnav .navbar-nav > li > a,
.wrap-sticky nav.navbar.bootsnav ul.nav > li > a,
header.nt-site-header nav.navbar ul.nav > li > a {
  color: var(--header-text-light) !important;
  font-weight: 500 !important;
  transition: var(--header-transition) !important;
}

/* Menu link hover */
nav.navbar.bootsnav ul.nav > li > a:hover,
nav.navbar.bootsnav ul.nav > li > a:focus,
nav.navbar.bootsnav .navbar-nav > li > a:hover {
  color: var(--header-accent-hover) !important;
  background-color: transparent !important;
}

/* Active menu item */
nav.navbar.bootsnav ul.nav > li.active > a,
nav.navbar.bootsnav ul.nav > li.current-menu-item > a {
  color: var(--header-accent) !important;
  background-color: transparent !important;
}

/* Dropdown caret/icon - white */
nav.navbar.bootsnav ul.nav > li > a .caret,
nav.navbar.bootsnav ul.nav > li > a i,
nav.navbar.bootsnav ul.nav > li > a svg,
nav.navbar.bootsnav ul.nav > li > a .mega-indicator {
  color: var(--header-text-light) !important;
  fill: var(--header-text-light) !important;
  transition: var(--header-transition) !important;
}

/* Attr nav (login, CTA buttons) - white */
nav.navbar.bootsnav .attr-nav > ul > li > a,
.wrap-sticky nav.navbar.bootsnav .attr-nav > ul > li > a {
  color: var(--header-text-light) !important;
  transition: var(--header-transition) !important;
}

/* ============================================
   SCROLLED STATE - Solid White Background
   Dark logo, dark text on white background
   ============================================ */

/* Navbar - frosted glass effect with blur */
nav.navbar.bootsnav.sticked,
nav.navbar.bootsnav.scrolled,
nav.navbar.bootsnav.navbar-sticky.sticked,
nav.navbar.bootsnav.navbar-sticky.scrolled,
.wrap-sticky nav.navbar.bootsnav.sticked,
.wrap-sticky nav.navbar.bootsnav.scrolled,
header.nt-site-header nav.navbar.bootsnav.sticked,
header.nt-site-header nav.navbar.bootsnav.scrolled {
  background-color: var(--header-bg-solid) !important;
  background: var(--header-bg-solid) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: var(--header-shadow) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Logo switch when scrolled - show dark, hide white */
nav.navbar.bootsnav.sticked .header-logo-white,
nav.navbar.bootsnav.scrolled .header-logo-white,
.sticked .header-logo-white,
.scrolled .header-logo-white,
nav.navbar.bootsnav.sticked img.header-logo-white,
nav.navbar.bootsnav.scrolled img.header-logo-white {
  opacity: 0 !important;
  visibility: hidden !important;
}

nav.navbar.bootsnav.sticked .header-logo-dark,
nav.navbar.bootsnav.scrolled .header-logo-dark,
.sticked .header-logo-dark,
.scrolled .header-logo-dark,
nav.navbar.bootsnav.sticked img.header-logo-dark,
nav.navbar.bootsnav.scrolled img.header-logo-dark {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Menu links - dark when scrolled */
nav.navbar.bootsnav.sticked ul.nav > li > a,
nav.navbar.bootsnav.scrolled ul.nav > li > a,
nav.navbar.bootsnav.sticked .navbar-nav > li > a,
nav.navbar.bootsnav.scrolled .navbar-nav > li > a {
  color: var(--header-text-dark) !important;
}

/* Menu hover when scrolled */
nav.navbar.bootsnav.sticked ul.nav > li > a:hover,
nav.navbar.bootsnav.scrolled ul.nav > li > a:hover {
  color: var(--header-accent) !important;
}

/* Active item when scrolled */
nav.navbar.bootsnav.sticked ul.nav > li.active > a,
nav.navbar.bootsnav.scrolled ul.nav > li.active > a,
nav.navbar.bootsnav.sticked ul.nav > li.current-menu-item > a,
nav.navbar.bootsnav.scrolled ul.nav > li.current-menu-item > a {
  color: var(--header-accent) !important;
}

/* Dropdown caret/icon - dark when scrolled */
nav.navbar.bootsnav.sticked ul.nav > li > a .caret,
nav.navbar.bootsnav.sticked ul.nav > li > a i,
nav.navbar.bootsnav.sticked ul.nav > li > a svg,
nav.navbar.bootsnav.sticked ul.nav > li > a .mega-indicator,
nav.navbar.bootsnav.scrolled ul.nav > li > a .caret,
nav.navbar.bootsnav.scrolled ul.nav > li > a i,
nav.navbar.bootsnav.scrolled ul.nav > li > a svg,
nav.navbar.bootsnav.scrolled ul.nav > li > a .mega-indicator {
  color: var(--header-text-dark) !important;
  fill: var(--header-text-dark) !important;
}

/* Attr nav links - dark when scrolled */
nav.navbar.bootsnav.sticked .attr-nav > ul > li > a,
nav.navbar.bootsnav.scrolled .attr-nav > ul > li > a {
  color: var(--header-text-dark) !important;
}

/* ============================================
   CTA BUTTON IN HEADER
   ============================================ */

/* Primary CTA button - always gradient */
nav.navbar.bootsnav .attr-nav .btn,
nav.navbar.bootsnav .attr-nav .header-btn,
nav.navbar.bootsnav .attr-nav a.cta-btn,
nav.navbar.bootsnav .attr-nav a[href*="app.stylingcv"],
nav.navbar.bootsnav .attr-nav a[href*="/app"] {
  background: linear-gradient(135deg, #268599 0%, #618480 50%, #e8885e 100%) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(38, 133, 153, 0.3) !important;
  transition: all 0.3s ease !important;
}

nav.navbar.bootsnav .attr-nav .btn:hover,
nav.navbar.bootsnav .attr-nav .header-btn:hover,
nav.navbar.bootsnav .attr-nav a.cta-btn:hover,
nav.navbar.bootsnav .attr-nav a[href*="app.stylingcv"]:hover,
nav.navbar.bootsnav .attr-nav a[href*="/app"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(38, 133, 153, 0.4) !important;
  color: #ffffff !important;
}

/* ============================================
   DROPDOWN / SUBMENU STYLING
   ============================================ */

/* Submenu background - pure white, NO shadows, no rounded corners */
nav.navbar.bootsnav ul.dropdown-menu,
nav.navbar.bootsnav ul.nav ul.dropdown-menu,
.mega-menu > li > .mega-sub-menu,
#mega-menu-wrap-header_menu_1 .mega-sub-menu,
#mega-menu-wrap-header_menu_1 #mega-menu-header_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu {
  background-color: #ffffff !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-top: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}

/* Remove lines at the top of mega menu */
#mega-menu-wrap-header_menu_1 #mega-menu-header_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu::before,
#mega-menu-wrap-header_menu_1 #mega-menu-header_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu::after {
  display: none !important;
  content: none !important;
}

/* Remove column container rounded corners and shadows */
#mega-menu-wrap-header_menu_1 .mega-menu-row > li.mega-menu-column,
#mega-menu-wrap-header_menu_1 .mega-menu-row > li.mega-menu-column:last-child {
  background: #ffffff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Remove column submenu shadows and borders */
#mega-menu-wrap-header_menu_1 .mega-menu-row > li.mega-menu-column > ul.mega-sub-menu {
  background: #ffffff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Ensure mega menu row has white background */
#mega-menu-wrap-header_menu_1 .mega-menu-row {
  background: #ffffff !important;
}

/* Remove any remaining shadows from mega menu elements */
#mega-menu-wrap-header_menu_1 *,
#mega-menu-wrap-header_menu_1 .mega-sub-menu *,
#mega-menu-wrap-header_menu_1 .mega-menu-row *,
#mega-menu-wrap-header_menu_1 .mega-menu-column * {
  box-shadow: none !important;
}

/* Submenu links */
nav.navbar.bootsnav ul.dropdown-menu > li > a,
nav.navbar.bootsnav ul.nav ul.dropdown-menu > li > a,
.mega-menu li a,
.mega-menu-column a {
  color: var(--header-text-dark) !important;
  transition: all 0.2s ease !important;
}

/* Submenu link hover */
nav.navbar.bootsnav ul.dropdown-menu > li > a:hover,
nav.navbar.bootsnav ul.dropdown-menu > li > a:focus,
.mega-menu li a:hover,
.mega-menu-column a:hover {
  background-color: rgba(38, 133, 153, 0.08) !important;
  color: var(--header-accent) !important;
}

/* ============================================
   MOBILE MENU
   ============================================ */

/* Mobile toggle button - white on transparent */
nav.navbar.bootsnav .navbar-toggle {
  color: var(--header-text-light) !important;
  border: none !important;
  background: transparent !important;
}

nav.navbar.bootsnav .navbar-toggle .icon-bar {
  background-color: var(--header-text-light) !important;
  transition: var(--header-transition) !important;
}

/* Mobile toggle when scrolled - dark */
nav.navbar.bootsnav.sticked .navbar-toggle,
nav.navbar.bootsnav.scrolled .navbar-toggle {
  color: var(--header-text-dark) !important;
}

nav.navbar.bootsnav.sticked .navbar-toggle .icon-bar,
nav.navbar.bootsnav.scrolled .navbar-toggle .icon-bar {
  background-color: var(--header-text-dark) !important;
}

/* Mobile navigation menu */
@media (max-width: 991px) {
  nav.navbar.bootsnav .navbar-collapse {
    background-color: rgba(22, 52, 76, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 0 0 16px 16px !important;
    margin-top: 10px !important;
  }

  /* Mobile menu links - always white on dark background */
  nav.navbar.bootsnav .navbar-collapse ul.nav > li > a {
    color: #ffffff !important;
  }

  nav.navbar.bootsnav .navbar-collapse ul.nav > li > a:hover {
    color: var(--header-accent-hover) !important;
  }

  /* Mobile active item */
  nav.navbar.bootsnav .navbar-collapse ul.nav > li.active > a {
    color: var(--header-accent) !important;
  }

  /* Mobile logo handling */
  .header-logo-wrapper img {
    height: 35px;
  }
}

/* ============================================
   STICKY WRAPPER OVERRIDE
   ============================================ */

.wrap-sticky,
.navbar-sticky,
header.nt-site-header {
  background-color: transparent !important;
  background: transparent !important;
}

/* ============================================
   RTL (ARABIC) SPECIFIC STYLES
   ============================================ */

/* Arabic font for navigation */
[dir="rtl"] nav.navbar.bootsnav,
html[lang="ar"] nav.navbar.bootsnav,
body#arabicSite nav.navbar.bootsnav {
  font-family: var(--font-body-ar) !important;
}

[dir="rtl"] nav.navbar.bootsnav ul.nav > li > a,
html[lang="ar"] nav.navbar.bootsnav ul.nav > li > a,
body#arabicSite nav.navbar.bootsnav ul.nav > li > a {
  font-family: var(--font-body-ar) !important;
  font-weight: 500 !important;
}

/* RTL menu alignment */
[dir="rtl"] nav.navbar.bootsnav ul.nav,
html[lang="ar"] nav.navbar.bootsnav ul.nav {
  float: right;
}

[dir="rtl"] nav.navbar.bootsnav .attr-nav,
html[lang="ar"] nav.navbar.bootsnav .attr-nav {
  float: left;
  margin-right: 0;
  margin-left: 15px;
}

/* RTL dropdown alignment */
[dir="rtl"] nav.navbar.bootsnav ul.dropdown-menu,
html[lang="ar"] nav.navbar.bootsnav ul.dropdown-menu {
  text-align: right;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus states */
nav.navbar.bootsnav ul.nav > li > a:focus-visible,
nav.navbar.bootsnav .attr-nav > ul > li > a:focus-visible {
  outline: 2px solid var(--header-accent) !important;
  outline-offset: 2px !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  nav.navbar.bootsnav,
  nav.navbar.bootsnav *,
  .header-logo-white,
  .header-logo-dark {
    transition: none !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  nav.navbar.bootsnav {
    display: none !important;
  }
}