/* 
 * File: index.css
 * Description: This file contains the global styles for the application, including TailwindCSS base, components, utilities, and custom styles.
 * Notes: 
 * - This file uses TailwindCSS for utility-first styling.
 * - Custom CSS variables and styles are defined for light and dark themes.
 * - Includes global resets, typography, button styles, and utility classes.
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

/* Import TailwindCSS layers */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 
 * Base Layer: Define CSS variables and global resets
 */
@layer base {
  /* Root variables for light theme */
  :root {
    /* Background and foreground colors */
    --background: #ffffff;
    --foreground: #0a0a0a;
    --main: #FFF7ED;
    


    /* Card styles */
    --card: #ffffff;
    --card-foreground: #0a0a0a;

    /* Popover styles */
    --popover: #ffffff;
    --popover-foreground: #0a0a0a;

    /* Primary and secondary colors */
    --primary: #005d8d;
    --primary-foreground: #ffffff;
    --secondary: #b34700	;
    --secondary-foreground: #ffffff;

    /* New tertiary color */
    --tertiary: #56B3D3; 
    --tertiary-foreground: #0D9488; 

    /* Data Table color */
    --quaternary: #CCEDFB;
    --quaternary-foreground: #000000;
    --quaternary-muted:#fafafa;


    /* Muted and accent colors */
    /*accent colors are used in labels and inputs*/
    --muted: #f5f5f5;
    --muted-foreground: #737373;
    --accent: #f5f5f5;
    --accent-foreground: #171717;

    /* Destructive colors */
    --destructive: #d72638;
    --destructive-foreground: #fafafa;

    /* Border, input, and ring colors */
    --border: #e5e5e5;
    --input: #e5e5e5;
    --ring: #0a0a0a;
    --input-background: #ffffff;

    /* Radius for rounded elements */
    --radius: 0.5rem;

    /* Sidebar-specific colors */
    --sidebar-background: #f9c604;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;

   /*stop and go type styles */
    --accept: #124A1F;
    --reject: #d72638;
    /* Chart colors */
    --chart-1: #56B3D3;
    --chart-2: #0D9488;
    --chart-3: #F97316;

  }

  /* Dark theme variables */
  .dark {
    /* Background and foreground colors */
    --background: #0a0a0a;
    --foreground: #fafafa;

    /* Card styles */
    --card: #0a0a0a;
    --card-foreground: #fafafa;

    /* Popover styles */
    --popover: #0a0a0a;
    --popover-foreground: #fafafa;

    /* Primary and secondary colors */
    --primary: #fafafa;
    --primary-foreground: #171717;
    --secondary: #262626;
    --secondary-foreground: #fafafa;

    /* New tertiary color for dark mode */
    --tertiary: #F0FDFA; /* Darker green for dark mode */
    --tertiary-foreground: #134E4A; /* White foreground for contrast */

    /* Muted and accent colors */
    --muted: #262626;
    --muted-foreground: #a3a3a3;
    --accent: #262626;
    --accent-foreground: #fafafa;

    /* Destructive colors */
    --destructive: #a0101a;
    --destructive-foreground: #fafafa;

    /* Border, input, and ring colors */
    --border: #262626;
    --input: #262626;
    --ring: #d4d4d4;

    /* Sidebar-specific colors */
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    /* Chart colors for dark mode */
    --color-userIncome: #8b5cf6;
    --color-partnerIncome: #6d28d9;
    --chart-1: #4682b4;
    --chart-2: #2e8b57;
    --chart-3: #f4a460;
    --chart-4: #9370db;
    --chart-5: #ff69b4;
  }

  /* General Reset */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    @apply border-border m-0 p-0;
  }

  html,body {
    @apply text-foreground antialiased;
    line-height: 1.5;
    font-family: "Nunito", sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--main);
  }

  /* Improve media defaults */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  /* Typography */
  h1, h2, h3, h4, h5, h6, ul, li, p, span, label, button {
    font-family: "Nunito", sans-serif;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: break-word;
  }

  h1 { @apply text-4xl font-bold; }
  h2 { @apply text-2xl font-extrabold; }
  h3 { @apply text-xl font-extrabold; }
  h4 { @apply text-lg font-bold; }
  h5 { @apply text-base font-semibold; }
  h6 { @apply text-sm font-semibold; }

  /* Button styles */
  .btn {
    @apply bg-primary text-white px-4 py-2 rounded-full font-semibold text-xl transition-colors hover:bg-destructive focus:outline-primary focus:outline-2 focus:outline-offset-2;
  }
  .bg-accept { background-color: var(--accept); }
.bg-reject { background-color: var(--reject); }

  /* Form styles */
  input, textarea {
    @apply w-full p-2 mt-1 border border-input rounded-md;
  }

  /* Section styles */
  section {
    @apply bg-transparent p-4 md:px-[20vw] rounded-lg relative z-10 flex flex-col justify-center gap-1 h-full m-1 mx-auto;
  }

  /* Wave effect */
  .wave {
    @apply absolute left-0 w-full overflow-hidden leading-none;
    height: 0;
    padding-bottom: 10%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    z-index: 1;
  }

  .wave-top {
    @apply top-0;
    background-image: url('/img/wave-top.svg');
  }

  /* Card styles */
  .card {
    @apply p-8 bg-white rounded-lg shadow-sm border border-border;
  }

  /* Container styles */
  .container {
    @apply w-full max-w-[1200px] mx-auto px-4;
  }

  /* Responsive utilities */
  @media (max-width: 768px) {
    .container {
      @apply px-4;
    }

    section {
      @apply px-4;
    }
  }

  /* Animation keyframes */
  @keyframes fadeIn {
    from { 
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .fade-in {
    animation: fadeIn 0.5s ease-out forwards;
  }


/* 
 * Utilities Layer: Define reusable utility classes
 */
@layer utilities {
  .glass {
    @apply bg-white/10 backdrop-blur-lg border border-white/20 rounded-2xl;
  }

  .feature-box {
    @apply flex flex-col items-center text-center bg-white border border-border rounded-lg p-5 shadow-md;
  }

  .nav-menu {
    @apply flex gap-5 items-center;
  }

}

/* Navigation styles */
.nav-logo {
  font-size: 1.5rem; /* Increase font size */
  font-weight: bold; /* Make it bold */
  z-index: 2;
}

.nav-top-menu {
  z-index: 2;
  font-weight: bold; /* Make it bold */
  font-size: 1.5rem; /* Adjust font size */
}

/* Base layer overrides */
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
  .table-header {
    background-color: var(--primary);
    color: var(--primary-foreground, #ffffff); /* Ensure text is readable */
    border-radius: 0.5rem; /* Add rounded corners */

     }
}


  /* Hero title styles */
  .hero-title {
    font-size: 4rem; /* Large font size for the main heading */
    font-family: "Bangers", system-ui;
    font-style: normal;
    font-weight: 400; /* Regular weight for emphasis */
    margin-bottom: 10px; /* Add spacing below the heading */
  }
}


/*Footer Section*/
footer {
  background: #ffffff;
  padding: 20px;
  text-align: center;
  font-size: 0.9rem;
  position: relative;
  z-index: 1; /* Ensure it appears above lower z-index elements */
  padding-bottom: 50px; /* Add padding to account for the wave */
  text-align: center;


}

.footer-container {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-bottom: 20px;
}

.footer-column {
  text-align: left;
}


.footer-column h5 {
  font-size: 1rem; /* 1rem = 16px */
  margin-bottom: 10px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li {
  margin-bottom: 5px;
}

.footer-column ul li a {
  text-decoration: none;
  color: #007BFF;
  font-size: 0.9375rem; /* 0.9375rem = 15px */
}

.footer-column ul li a:hover {
  text-decoration: underline;
}


/* Cookie Banner Styles */
.cookie-banner {
  position: fixed;
  bottom: 20px; /* Adjust for smaller screens */
  left: 10px; /* Add some padding from the left */
  right: 10px; /* Ensure it doesn't overflow on smaller screens */
  max-width: 400px;
  width: 90%; /* Responsive shrink on smaller viewports */ 
  background: linear-gradient(135deg, #fffbeb, #f5d5cb); /* Gradient background */
  color: #000000;
  padding: 15px;
  display: flex;
  flex-direction: column; /* Stack content vertically */
  gap: 10px;
  z-index: 1000;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
}

.cookie-banner p {
  margin: 0;
  font-size: 0.9rem; /* 0.9rem = 14.4px */
  flex: 1; /* Allow the text to take up available space */

}

.cookie-banner a {
  color: #000000;
  text-decoration: underline;
  font-size: 0.9rem; /* Adjust font size */
  white-space: nowrap; /* Prevent the link from wrapping */

}

.cookie-buttons {
  display: flex;
  gap: 10px;
  white-space: nowrap; /* Prevent wrapping for all buttons */
}

.cookie-buttons .btn {
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9375rem; /* 0.9375rem = 15px */
}

.cookie-buttons .btn:hover {
  background-color: #005d8d; /* Blue color for hover */
  color: #fff; /* Ensure text remains white */
  transition: background-color 0.3s ease; /* Smooth transition */
}

.btn-accept {
  background-color: #28a745;
  color: #fff;
  white-space: nowrap; /* Prevent the link from wrapping */

}


.btn-reject {
  background-color: #dc3545;
  color: #fff;
  white-space: nowrap; /* Prevent the link from wrapping */

}

/* Header Styling */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px; /* Equivalent to Tailwind's p-4 */
  padding-left: 10vw; /* Equivalent to md:px-[10vw] */
  padding-right: 10vw;
  position: relative;
  z-index: 2; /* Ensure it appears above the wave */
}

/* Logo Section */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px; /* Equivalent to Tailwind's gap-2 */
}

.brand-name {
  font-size: 1.5rem; /* Equivalent to Tailwind's text-2xl */
  font-weight: bold;
  font-family: "Nunito", sans-serif; /* Ensure consistent font family */
  line-height: 1.5; /* Set consistent line height */
  color: var(--secondary, #000000); /* Fallback to black if --secondary is not defined */
  text-decoration: none;
}

/* Navigation Menu */
.nav-top-menu {
  display: flex;
  gap: 16px; /* Equivalent to Tailwind's gap-4 */
  align-items: center;
}

.nav-link {
  font-size: 1.5rem; /* Match the font size of the brand name */
  font-weight: bold; /* Match the font weight of the brand name */
  font-family: "Nunito", sans-serif; /* Ensure consistent font family */
  line-height: 1.5; /* Set consistent line height */
  color: var(--primary, #005d8d); /* Fallback to blue if --primary is not defined */
  text-decoration: none;
  transition: color 0.3s ease; /* Equivalent to Tailwind's transition-colors */
}

.nav-link:hover {
  color: var(--hover-primary, #003f5c); /* Fallback to a darker blue for hover */
}



/*FAQ Section*/
.faq {
  padding: 50px 20px;
  background-color: #ffffff;
  text-align: center;
}

.faq-container {
  width: 70vw; /* Set the FAQ container width to 80% of the viewport */
  margin: 0 auto; /* Center the container horizontally */
  text-align: left;
}

.faq-item {
  width: 100%; /* Ensure each FAQ item takes up the full width of the container */
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.faq-question {
  width: 100%; /* Ensure the question takes up the full width of the FAQ item */
  padding: 15px;
  background-color: #005d8d;
  color: #fff;
  text-align: left;
  border: none;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box; /* Include padding and borders in the width */
}

.faq-question:hover {
  background-color: #004a70; /* Slightly darker blue on hover */
}

.faq-toggle {
  float: right;
  font-size: 1.2rem;
  font-weight: bold;
}

.faq-answer {
  width: 100%; /* Match the width of the question */
  display: none;
  padding: 15px;
  background-color: #fff;
  color: #555;
  font-size: 0.9rem;
  box-sizing: border-box; /* Include padding and borders in the width */
  margin-top: 8px;
}

.faq-item.open .faq-answer {
  display: block; /* Show the answer when expanded */
}

/* 
 ---break---
 */

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer components {
  /* Set default background color for input fields */
  input,
  select,
  textarea   {
    @apply  text-foreground; 
  }

  /* Optional: Add border and padding for consistency */
  input,
  select,
  textarea {
    @apply border border-gray-300 rounded-md p-2;
  }


  /* Ensure focus styles are consistent */
  input:focus,
  select:focus,
  textarea:focus {
    @apply ring-2 ring-primary outline-none;
  }
}