/* General Layout */

@tailwind base;
@tailwind components;
@tailwind utilities;


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

header, footer {
    background-color: var(--main-bg-color);
    color: var(--text-color-light);
    padding: 10px 0;
}

header .logo {
    max-height: 50px;
}

main {
    padding: 10px 0;
}

/* Reset list styles */
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 2.25rem; /* Tailwind default for h1 */
    font-weight: 700;   /* Bold */
  }
  
  h2 {
    font-size: 1.875rem; /* Tailwind default for h2 */
    font-weight: 600;   /* Semi-bold */
  }
  
  h3 {
    font-size: 1.5rem;
    font-weight: 500;
  }

  h4 {
    font-size: 1.3rem;
    font-weight: 400;
  }
  

/* Main navigation items */
.main-nav li {
    position: relative; /* Required for submenu positioning */
    padding: 0; /* Remove any padding applied to the <li> */
    margin: 0; /* Remove margin if applied */
    display: inline-block; /* Prevent <li> from stretching */
}

.main-nav a {
    text-decoration: none;
    color: #ffffff;
    padding: 15px 15px; /* Padding only on the anchor, not the <li> */
    display: block; /* Ensures the entire anchor area is clickable */
    background-color: #092335;
    white-space: nowrap; /* Prevent text wrapping */
}

.main-nav a:hover {
    background-color: #1a252f;
}

/* Submenu Styles */
.submenu {
    display: none; /* Hide by default */
    position: absolute;
    top: 100%; /* Position below parent item */
    left: 0;
    background-color: #092335;
    padding: 0;
    margin: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Submenu Items */
.submenu li {
    padding: 0;
    margin: 0;
}

.submenu li a {
    color: #ffffff;
    padding: 10px 15px;
    text-decoration: none;
    display: block; /* Make the entire area clickable */
    background-color: #092335; /* Match the main menu */
}

.submenu li a:hover {
    background-color: #092335; /* Highlight on hover */
}

/* Show Submenu on Hover */
.main-nav li:hover > .submenu {
    display: block; /* Show submenu */
}

/* Show submenu on hover */c
.main-nav li:hover > .submenu {
    display: block;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .main-nav ul {
        flex-direction: column; /* Stack the main menu vertically */
    }

    .main-nav li {
        display: block; /* Make menu items stack vertically */
    }

    .main-nav a {
        padding: 15px; /* Ensure consistent spacing */
    }

    .submenu {
        position: static; /* Allow submenu to flow naturally */
        box-shadow: none; /* Remove shadow for mobile */
        padding: 0; /* Adjust padding */
    }

    .submenu li a {
        padding: 10px; /* Adjust for smaller screens */
    }

    .submenu li a:hover {
        background-color: #1a252f; /* Ensure hover works on mobile */
    }
}

@media (max-width: 480px) {
    .main-nav a {
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .submenu li a {
        padding: 8px 10px; /* Further adjust submenu padding */
    }
}

/* General Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.875rem; /* Slightly smaller text for tables */
    background-color: #fff;
    border: 1px solid #ddd;
}

th, td {
    text-align: left;
    padding: 0.75rem;
    border: 1px solid #ddd; /* Add subtle borders */
}

th {
    background-color: #f7f7f7; /* Light background for headers */
    font-weight: 600; /* Make header text semi-bold */
    color: #333; /* Darker text for headers */
}

td {
    color: #555; /* Lighter text for table data */
}

tr:nth-child(even) {
    background-color: #f9f9f9; /* Zebra stripe effect for rows */
}

tr:hover {
    background-color: #f1f1f1; /* Highlight row on hover */
}


/* Product Row: Flexbox for Responsive Layout */
.product-row {
    display: flex;
    flex-wrap: wrap; /* Ensures wrapping on smaller screens */
    gap: 20px; /* Adds spacing between items */
    justify-content: center; /* Centers items horizontally */
}

/* Product Card: Individual Item Styling */
.product-card {
    flex: 1 1 calc(75% - 40px); /* Was 50%, now 75% */
    max-width: 300px; /* Was 200px, now 50% bigger */
    text-align: center;
    background-color: #f4f4f4;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}


/* Product Image */
.product-image {
    width: 100%; /* Ensures the image fits within the card */
    height: 100%;
    opacity: 0.5; /* Adds transparency */
    border-radius: 8px; /* Matches the card's rounded corners */
    object-fit: cover; /* Ensures the image scales properly */
}

/* Product Link: Overlay Text */
.product-link {
    position: absolute; /* Positions the text over the image */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the text */
    color: black;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
    z-index: 1; /* Ensures the text is above the image */
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .product-card {
        flex: 1 1 100%; /* Each card takes up the full width on smaller screens */
        max-width: 100%; /* Removes width restriction */
    }
}


.welcome-section ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.welcome-section ul li {
    margin-bottom: 10px;
}

.welcome-section ul li strong {
    font-weight: bold;
}

img {
    touch-action: manipulation; /* Enables pinch zoom for touch devices */
}

@media (max-width: 768px) {
    #menu-toggle {
      display: block !important;
    }
  
    #nav-menu {
      display: none;
      flex-direction: column;
      gap: 1rem;
      background: #092335;
      padding: 1rem;
    }
  
    #nav-menu.show {
      display: flex;
    }
  
    .submenu {
      display: none;
    }
  
    .submenu.show {
      display: block !important;
    }
  }