/* Tazakka color palette as CSS variables */
:root {
  /* Light mode colors */
  --bg-main: #F4F6FF;
  --title: #101828;
  --description: #667085;
  --text-light: #F2F4F7;
  --text-dark: #021A1A;
  --primary: #9F00FF;
  --primary-light: #F5E6FF;
  --secondary: #E4A036;
  --secondary-light: #FEE7C2;
  --border: #E4E7EC;
  --shadow: #021A1A;
  --link: #9F00FF;
  --link-hover: #43006B;
}

.dark {
  /* Dark mode colors */
  --bg-main: #111B89;
  --title: #F2F4F7;
  --description: #98A2B3;
  --text-light: #F2F4F7;
  --text-dark: #021A1A;
  --primary: #9100E8;
  --primary-light: #F5E6FF;
  --secondary: #E4A036;
  --secondary-light: #FEE7C2;
  --border: #676CD5;
  --shadow: #F6FBF9;
  --link: #F5E6FF;
  --link-hover: #FFFFFF;
}

@font-face {
  font-family: 'primary';
  font-style: normal;
  font-weight: 300;
  src: url('../assets/fonts/IBMPlexSansArabic-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'primary';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'primary';
  font-style: normal;
  font-weight: 600;
  src: url('../assets/fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
}


body {
  font-family: 'primary', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  background: linear-gradient(359.11deg, #F4F6FF 0.71%, #E7C8FF 94.7%);
  color: var(--title);
}

/* Dark mode gradient */
.dark body {
  background: linear-gradient(180deg, #484ED4 0%, #111B89 100%);
}

/* Header transparent to show body gradient */
header {
  background: transparent !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hide logo, language switcher and theme switcher on mobile */
@media (max-width: 639px) {
  header .flex.items-center.gap-2 {
    display: none !important;
  }

  header .flex.gap-2:has(#langToggle, #themeToggle) {
    display: none !important;
  }

  /* Position header as bottom sheet on mobile */
  /* Position header as bottom sheet on mobile */
  header {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: translateY(0) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12) !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 1.5rem 1.25rem 2rem 1.25rem !important;
    z-index: 50 !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
  }

  .dark header {
    background: rgba(17, 27, 137, 0.85) !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  /* Hide header when scrolling */
  header.hide-on-scroll {
    transform: translateY(100%) !important;
  }

  /* Improve navigation buttons on mobile */
  header nav {
    width: 100% !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  header nav button {
    width: 100% !important;
    padding: 1rem 1.25rem !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    border-radius: 16px !important;
    border: none !important;
    background: linear-gradient(135deg, var(--bg-main) 0%, var(--primary-light) 100%) !important;
    color: var(--title) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .dark header nav button {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
    color: var(--text-light) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }

  /* Active state for buttons */
  header nav button:active {
    transform: scale(0.98) !important;
    filter: brightness(0.95);
  }

  /* Highlight active button */
  header nav button.border-b-2 {
    background: var(--primary) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(159, 0, 255, 0.3) !important;
  }
  
  .dark header nav button.border-b-2 {
    background: var(--primary) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(145, 0, 232, 0.4) !important;
  }

  /* Remove the border-bottom style since we are using full background for active state on mobile */
  header nav button.border-b-2 {
    border-bottom: none !important;
  }

  header .flex.flex-col.sm\:flex-row {
    padding: 0 !important;
  }

  /* Remove excessive top margin since header is at bottom on mobile */
  main#content {
    margin-top: 1.5rem !important;
    padding-bottom: 10rem !important; /* Add bottom padding for bottom sheet */
  }
}

/* Tazakka theme backgrounds and text */
.bg-primary { background-color: var(--primary); }
.bg-primary-light { background-color: var(--primary-light); }
.bg-secondary { background-color: var(--secondary); }
.text-primary { color: var(--primary); }
.text-title { color: var(--title); }
.text-description { color: var(--description); }
.border-primary { border-color: var(--border); }

#themeToggle {
  font-size: 1.3rem;
  line-height: 1;
}

ul, ol {
  padding-right: 1.5rem; /* for RTL layout */
  list-style-type: disc;
}

li > p {
  display: inline;
  margin-bottom: 0;
}

li {
  margin-bottom: 0.5rem;
}

/* Links and underlines */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 2px;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--title);
  margin-bottom: 1rem;
}

p {
  color: var(--description);
  margin-bottom: 0.75rem;
}

/* Buttons */
button {
  transition: all 0.3s ease;
  border-color: var(--border);
  color: var(--title);
}

/* Only apply hover on desktop devices with mouse/pointer */
@media (hover: hover) and (pointer: fine) {
  button:hover {
    background-color: var(--primary);
    color: var(--primary-light);
  }
}

/* Strong/Bold text */
strong, b {
  color: var(--title);
  font-weight: 600;
}