/* ===== ROOT VARIABLES ===== */
:root {
  --font-main: "Montserrat", sans-serif;
  --font-logo: "Kaushan Script", cursive;

  --color-white: #ffffff;
  --color-black: #0f172a;
  --color-gray-light: #f1f5f9;
  --color-gray-bg: #f8fafc;
  --color-blue: #15b8e0;
  --color-green: #22c55e;
  --color-darknav: #1e293b;
  --color-darknav-bg: rgba(15,23,42,0.95);
  --color-dropdown-shadow: rgba(0,0,0,.15);

  --transition-fast: 0.25s ease;
  --transition-normal: 0.3s ease;

  --nav-height: 60px;
  --menu-gap: 26px;
  --menu-font-size: 14px;
  --acc-font-size: 13px;
}

/* =================================================
   ABSOLUTE PRIORITY: NAV TRANSPARENCY
   These rules MUST override ALL other CSS files
   including pages.css, index.css, and any inline styles
================================================= */

/* Force transparent nav - Override EVERYTHING */
.main-nav {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Force transparent nav when not scrolled - Override EVERYTHING */
.main-nav:not(.scrolled) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* =================================================
   CRITICAL NAV TRANSPARENCY RULES - HIGHEST PRIORITY
   These rules MUST override all other CSS files including pages.css
   Using direct values (not CSS variables) to ensure transparency
================================================= */

/* Force transparent nav initially - Override ALL other styles */
.main-nav {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.main-nav:not(.scrolled) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* CRITICAL: Ensure nav text is visible when transparent */
.main-nav:not(.scrolled) .menu a,
.main-nav:not(.scrolled) .accessibility-btn {
  color: #ffffff !important;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7), 0 0 10px rgba(0,0,0,0.4) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* CRITICAL: Ensure hamburger is white when nav is transparent */
.main-nav:not(.scrolled) .hamburger span {
  background: #ffffff !important;
}

/* ===== RESET ===== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: var(--font-main);
}

/* ===== NAV ===== */
.main-nav{
  position: fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:999;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  transition: background var(--transition-normal), background-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal);
  backdrop-filter: blur(0px) !important;
  box-shadow: none !important;
}

/* Transparent nav on ALL pages initially - Completely transparent - FINAL OVERRIDE */
.main-nav:not(.scrolled) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* White text when nav is transparent - FINAL OVERRIDE */
.main-nav:not(.scrolled) .menu a,
.main-nav:not(.scrolled) .accessibility-btn {
  color: #ffffff !important;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7), 0 0 10px rgba(0,0,0,0.4) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure dropdown menu background is white when nav is not scrolled */
.main-nav:not(.scrolled) .dropdown-menu {
  background: #ffffff !important;
}

/* White hamburger when nav is transparent - FINAL OVERRIDE */
.main-nav:not(.scrolled) .hamburger span {
  background: #ffffff !important;
}

/* When scrolled - Get background color and change text color */
.main-nav.scrolled{
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
  backdrop-filter: blur(10px) !important;
}

/* Dark text when scrolled (light mode) */
.main-nav.scrolled .menu a,
.main-nav.scrolled .accessibility-btn {
  color: var(--color-black) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0;
}

/* ===== DARK MODE (menu, dropdown, accessibility) ===== */

/* Dark mode scrolled nav - handled above */

body.dark .menu.active,
body.dark .dropdown-menu,
body.dark .accessibility-menu,
body.dark .acc-row,
body.dark .accessibility-btn{
  background: var(--color-darknav-bg);
  color: var(--color-white);
}

body.dark .dropdown-menu a,
body.dark .acc-row span{
  color: var(--color-white);
}

body.dark .dropdown-menu a:hover,
body.dark .acc-row:hover{
  background: rgba(255,255,255,0.1);
}

body.dark .accessibility-btn{
  background: rgba(255,255,255,0.08);
}

body.dark .hamburger span{
  background: var(--color-white);
}

/* ===== CONTAINER ===== */
.nav-container{
  width:100%;
  max-width:none;
  padding:14px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ===== LOGO ===== */
.logo-img{
  height:42px;
  object-fit:contain;
}

/* ===== MENU ===== */
.menu{
  list-style:none;
  display:flex;
  align-items:center;
  gap: var(--menu-gap);
}


.menu a,
.accessibility-btn{
  color: #ffffff !important;
  text-decoration:none;
  font-weight: 700 !important;
  font-size: var(--menu-font-size);
  font-family: var(--font-main) !important;
  cursor:pointer;
  transition: color var(--transition-fast);
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6), 0 0 8px rgba(0,0,0,0.3) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Force white color when nav is not scrolled - HIGHEST PRIORITY */
.main-nav:not(.scrolled) .menu a,
.main-nav:not(.scrolled) .accessibility-btn {
  color: #ffffff !important;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7), 0 0 10px rgba(0,0,0,0.4) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Dark mode - when scrolled */
body.dark .main-nav.scrolled {
  background: rgba(15,23,42,0.95) !important;
  background-color: rgba(15,23,42,0.95) !important;
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
  backdrop-filter: blur(10px) !important;
}

body.dark .main-nav.scrolled .menu a,
body.dark .main-nav.scrolled .accessibility-btn {
  color: var(--color-white) !important;
}



/* ===== DROPDOWN ===== */
.dropdown{
  position:relative;
}

.dropdown-menu{
  position:absolute;
  top:130%;
  left:0;
  background: var(--color-white);
  min-width:200px;
  border-radius:14px;
  padding:10px;
  box-shadow:0 20px 40px var(--color-dropdown-shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition: var(--transition-normal);
  z-index:10;
}

.dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.dropdown-menu li{
  list-style:none;
}

.dropdown-menu a{
  display:block;
  padding:10px 14px;
  color: var(--color-black);
  border-radius:10px;
  font-size: var(--menu-font-size);
  text-shadow: none !important; /* Remove drop shadow from dropdown text */
}

/* Ensure dropdown text is black when nav is not scrolled (transparent) */
.main-nav:not(.scrolled) .dropdown-menu a {
  color: #0f172a !important; /* Black text for visibility on transparent nav */
  text-shadow: none !important; /* Remove drop shadow from dropdown text */
}

.dropdown-menu a:hover{
  background: var(--color-gray-light);
}

/* Ensure dropdown hover works when nav is not scrolled */
.main-nav:not(.scrolled) .dropdown-menu a:hover {
  background: var(--color-gray-light) !important;
  color: #0f172a !important;
  text-shadow: none !important; /* Remove drop shadow on hover */
}

/* ===== ACCESSIBILITY BUTTON ===== */
.accessibility-btn{
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(6px);
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  transition: all var(--transition-fast);
}

/* Accessibility button when nav is scrolled */
.main-nav.scrolled .accessibility-btn {
  background: rgba(0,0,0,0.08);
}

body.dark .main-nav.scrolled .accessibility-btn {
  background: rgba(255,255,255,0.08);
}

.accessibility-btn:hover{
  transform: scale(1.08);
  background: var(--color-blue);
}

/* ICON */
.accessibility-btn img{
  width:26px;
  height:26px;
  object-fit:contain;
  pointer-events:none;
}

/* ===== ACCESSIBILITY MENU ===== */
.accessibility-menu{
  right:0;
  left:auto;
  width:260px;
}

.acc-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border-radius:10px;
}

.acc-row:hover{
  background: var(--color-gray-bg);
}

.acc-row span{
  font-size: var(--acc-font-size);
  font-weight:600;
  color: var(--color-black);
}

/* ===== SWITCH ===== */
.switch-group{
  display:flex;
  align-items:center;
  gap:6px;
}

.switch{
  position:relative;
  width:36px;
  height:18px;
}

.switch input{
  display:none;
}

.slider{
  position:absolute;
  inset:0;
  background:#cbd5f5;
  border-radius:20px;
  cursor:pointer;
}

.slider:before{
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  left:2px;
  top:2px;
  background: var(--color-white);
  border-radius:50%;
  transition: var(--transition-normal);
}

.switch input:checked + .slider{
  background: var(--color-green);
}

.switch input:checked + .slider:before{
  transform:translateX(18px);
}

/* ===== HAMBURGER ===== */
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.hamburger span{
  width:26px;
  height:2px;
  background: var(--color-white);
  transition: background var(--transition-fast);
}

/* Hamburger is white when nav is transparent */
.main-nav:not(.scrolled) .hamburger span {
  background: var(--color-white) !important;
}

/* Hamburger color changes when nav is scrolled (light mode) */
.main-nav.scrolled .hamburger span {
  background: var(--color-black) !important;
}

/* Hamburger color when nav is scrolled (dark mode) */
body.dark .main-nav.scrolled .hamburger span {
  background: var(--color-white) !important;
}


/* ===== MOBILE FIX (≤991px) ===== */
@media(max-width:991px){

  /* PREVENT HORIZONTAL SCROLL */
  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  /* NAV CONTAINER SAFE PADDING */
  .nav-container{
    padding:14px 20px;
  }

  /* HAMBURGER */
  .hamburger{
    display:flex;
    z-index:1001;
  }
  
  /* Hamburger color on mobile - white when nav is transparent */
  .main-nav:not(.scrolled) .hamburger span {
    background: var(--color-white) !important;
  }
  
  /* Hamburger dark when scrolled on mobile (light mode) */
  .main-nav.scrolled .hamburger span {
    background: var(--color-black) !important;
  }
  
  /* Hamburger white when scrolled on mobile (dark mode) */
  body.dark .main-nav.scrolled .hamburger span {
    background: var(--color-white) !important;
  }

  /* MENU – 70% WIDTH (MOBILE ONLY) */
  .menu{
    position:fixed;
    top:0;
    right:0;
    width:70vw;           /* ✅ 70% width */
    max-width:70%;
    height:100vh;
    background: var(--color-darknav);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:32px;
    transform:translateX(100%);
    transition: var(--transition-normal);
    z-index:1000;
  }

  .menu.active{
    transform:translateX(0);
  }

  /* MENU LINKS */
  .menu a{
    color: #ffffff !important;
    font-size:20px;
    font-weight:600;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important;
  }
  
  /* Ensure menu links are white when nav is transparent on mobile */
  .main-nav:not(.scrolled) .menu a {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important;
  }
  
  /* Menu links dark when scrolled on mobile (light mode) */
  .main-nav.scrolled .menu a {
    color: var(--color-black) !important;
  }
  
  /* Menu links white when scrolled on mobile (dark mode) */
  body.dark .main-nav.scrolled .menu a {
    color: var(--color-white) !important;
  }

  /* ACCESSIBILITY BUTTON MOBILE */
  .accessibility-btn{
    background:rgba(255,255,255,0.12);
    width:48px;
    height:48px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* DROPDOWN MOBILE */
  .dropdown{
    width:100%;
    text-align:center;
  }

  .dropdown-menu{
    position:static;
    width:100%;
    margin-top:12px;
    background: transparent;
    box-shadow:none;
    padding:0;
    display:none;          /* click based */
  }

  .dropdown.active > .dropdown-menu{
    display:block;
  }

  .dropdown-menu a{
    color: var(--color-white);
    padding:12px 0;
    font-size:17px;
  }

  .dropdown-menu a:hover{
    background:rgba(255,255,255,0.08);
  }

}

/* ===== MOBILE LIGHT THEME FIX ===== */
@media(max-width:991px){

  body:not(.dark) .menu{
    background: var(--color-white);
  }

  body:not(.dark) .menu a{
    color: var(--color-black);
  }

  /* On mobile, hamburger should be white when nav is transparent */
  body:not(.dark) .main-nav:not(.scrolled) .hamburger span{
    background: var(--color-white) !important;
  }
  
  /* On mobile, hamburger should be dark when nav is scrolled (light mode) */
  body:not(.dark) .main-nav.scrolled .hamburger span{
    background: var(--color-black) !important;
  }

  body:not(.dark) .accessibility-btn{
    background: rgba(0,0,0,0.08);
  }

  body:not(.dark) .dropdown-menu a{
    color: var(--color-black);
  }

  body:not(.dark) .dropdown-menu a:hover{
    background: var(--color-gray-light);
  }

}

/* ===== MOBILE ACCESSIBILITY ICON CENTER FIX + SPACING ===== */
@media(max-width:991px){

  .accessibility-dropdown{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    position: relative;
  }

  .accessibility-btn{
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* dropdown menu static, centered below icon */
  .accessibility-dropdown .accessibility-menu{
    position: static;
    width: auto;
    margin-top:12px;
    display:none;
    flex-direction: column;
    align-items: center;
  }

  .accessibility-dropdown.active .accessibility-menu{
    display:flex;
  }

  .accessibility-dropdown .accessibility-menu .acc-row{
    width: auto;
    padding: 8px 16px;
    justify-content: center;
    gap: 8px; /* span এবং switch এর মধ্যে gap */
  }

  /* span + switch spacing inside switch-group */
  .accessibility-dropdown .accessibility-menu .switch-group{
    gap: 12px;  /* previous 6px থেকে বাড়ানো spacing */
    display: flex;
    align-items: center;
  }
}