/*
*********************************************************************************************
* File: index.css
* Author: Madhurima Rawat
* Date: July 18, 2024
* Description: Stylesheet for study resources website, including
*              responsive design, hover effects, color schemes, and layout adjustments.
* Version: 1.0
* GitHub Repository: https://github.com/madhurimarawat/Semester-Notes
* Issues/Bugs: For any issues or bugs, please visit the GitHub repository issues section.
* Comments: This CSS file defines styles for various components such as navbar, cards, 
*           headings, buttons, and footer. It includes customizations for hover effects,
*           color schemes, and layout adjustments to enhance user experience and visual appeal.
* Dependencies: Bootstrap 4.5.2 for responsive design.
*********************************************************************************************
*/

/* Root variables for primary colors */
:root {
  --primary-color: #28a745;
  --primary-hue: 134;
  /* Adjust hue for the primary color */
  --primary-saturation: 61%;
  /* Adjust saturation for the primary color */
  --primary-color-lighter: hsl(
    var(--primary-hue),
    var(--primary-saturation),
    40%
  );
  --button-color: #ffc107;
  --button-hue: 45;
  /* Adjust hue for the button color */
  --button-saturation: 100%;
  /* Adjust saturation for the button color */
  --button-color-lighter: hsl(var(--button-hue), var(--button-saturation), 50%);
}

.hidden {
  display: none;
}

/* Ensure box-sizing is applied globally */
*,
*::before,
*::after {
  box-sizing: border-box;
}

#search-container {
  width: 100%;
  padding: 0;
  margin-top: 23px;
  color: black;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

#searchInput {
  margin-bottom: 5px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid #ccc;
  /* Subtle border */
  border-radius: 10px;
  /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Card-like shadow */
  background-color: #fff;
  /* White background */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  border-collapse: collapse;
  transition: box-shadow 0.3s, border 0.3s;
  /* Smooth transition for hover effect */
}

#searchInput:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  /* Enhanced shadow on hover */
  border: 2px solid var(--primary-color);
  /* Change border color on hover */
}

#searchInput:focus {
  outline: none;
  /* Remove the default blue outline */
  border: 2px solid var(--primary-color);
  /* Optional: add a custom border */
  box-shadow: 0 0 5px var(--primary-color);
  /* Optional: add a custom shadow */
}

.header-container h1 {
  margin-bottom: 10px;
}

.line-space {
  margin-bottom: 0;
  /* Adjust or remove this to decrease space after the search box */
}

.intro-box {
  margin-top: 10px;
  /* Adjust this value to decrease the space after the search box */
}

/* Container for search suggestions */
#suggestions {
  position: absolute;
  /* Position the container absolutely relative to its parent */
  z-index: 1000;
  /* Ensure the container is above other content */
  width: 100%;
  /* Make the container as wide as its parent */
  list-style-type: none;
  /* Remove default list styling */
  padding: 0;
  /* Remove default padding */
  margin: 0;
  /* Remove default margin */
  text-align: center;
  /* Center-align the text */
}

/* Styling for each search suggestion item */
#suggestions .list-group-item {
  padding: 10px;
  /* Add padding to each item */
  cursor: pointer;
  /* Change cursor to pointer for clickable items */
  background-color: white;
  /* Set the background color to white */
  color: black;
  /* Ensure the text color is black */
  border: 1px solid #ddd;
  /* Add a light gray border to each item */
  border-bottom: none;
  /* Remove the bottom border for all but the last item */
  border-left: none;
  /* Remove the left border for a cleaner look */
  border-right: none;
  /* Remove the right border for a cleaner look */
  outline: none;
  /* Remove the outline for a cleaner look */
}

/* Add bottom border to the last list item */
#suggestions .list-group-item:last-child {
  border-bottom: 1px solid #ddd;
  /* Add the bottom border to the last item */
}

/* Active color for keyboard navigation */
#suggestions .list-group-item.active {
  background-color: #f0f0f0;
  /* Change the background color when active */
  color: black;
  /* Ensure the text color remains black */
}

/* Hover color for list items */
#suggestions .list-group-item:hover {
  background-color: #f0f0f0;
  /* Change the background color on hover */
  color: black;
  /* Ensure the text color remains black */
}

#search-line {
  margin-top: 5px;
  height: 1px;
  background-color: #ccc;
}

/* Style for the button */
#searchButton {
  border-color: white;
  /* Initial border color */
  color: white;
  /* Initial text color */
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Hover effect */
#searchButton:hover {
  background-color: var(--primary-color);
  /* Background color on hover */
  color: black;
  /* Text color on hover */
  border-color: white;
  /* Border color on hover */
}

/* Styling for tool buttons */
.tool-button {
  display: inline-block;
  background-color: var(--primary-color);
  color: white;
  text-align: center;
  padding: 8px 16px;
  margin: 4px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s;
}

/* Hover effect for tool buttons */
.tool-button:hover {
  /* background-color: #4a8dc9; */
  background-color: --primary-color-lighter;
  text-decoration: none;
  color: black;
}

/* Styling for tool buttons */
.tool-button_2 {
  display: inline-block;
  background-color: var(--button-color);
  color: white;
  text-align: center;
  padding: 8px 16px;
  margin: 4px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s;
}

/* Hover effect for tool buttons */
.tool-button_2:hover {
  /* background-color: */
  background-color: var(--button-color);
  text-decoration: none;
  color: black;
}

/* Add margin-top to row class for larger screens */
.row + .row {
  margin-top: 24px;
  /* Adjust the value as needed */
}

/* For mobile devices, set margin-top to 0 for rows and add margin-bottom to cards */
@media (max-width: 767.98px) {
  .row + .row {
    margin-top: 0;
  }

  .col-md-4 {
    margin-bottom: 20px;
    /* Adjust the value as needed */
  }

  /* Remove margin-bottom for the last row of cards */
  .semester-box .row:last-child .col-md-4 {
    margin-bottom: 0;
  }
}

/* Styling for the card component */
.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fffff0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Hover effect for the card component */
.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Styling for the main heading */
.heading {
  text-align: center;
  color: var(--primary-color);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Background color for the navbar */
.navbar {
  /* background-color: var(--primary-color); */
  /* Change background color */
  background-color: black;
}

/* Text color for navbar links */
.navbar-dark .navbar-nav .nav-link {
  color: #fff;
  /* Change text color */
}

/* Hover effect for navbar links */
.navbar-dark .navbar-nav .nav-link:hover {
  color: dodgerblue;
  /* Change text color on hover */
}

/* Padding for the navigation links */
.navbar-nav .nav-link {
  padding: 0.5rem 1rem;
}

/* Margin for font-awesome icons in navigation links */
.navbar-nav .nav-link .fa {
  margin-right: 5px;
}

/* Dropdown menu item hover */
.navbar-dark .navbar-nav .dropdown-menu a.dropdown-item:hover {
  background-color: var(--primary-color);
  /* Set hover background color */
  color: black;
  /* Set hover text color */
}

.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Styling for the body */
body {
  font-family: Arial, sans-serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  /* background-color: #FFFFF0; */
  background: url("/docs/images/background.jpeg") no-repeat center center;
  background-size: cover; /* Ensures the image covers the entire navbar */
  background-attachment: fixed; /* Optional: Keeps the image fixed when scrolling */
  background-position: center;
  color: #333;
  text-align: center;
}

h1,
h2 {
  text-align: center;
  color: var(--primary-color);
}

.semester-box {
  border: 2px solid var(--primary-color);
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  /* Ensure position context for absolute button */
}

.semester-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.semester-box-title {
  font-weight: bold;
  color: var(--primary-color);
  font-size: 1.2em;
  text-align: center;
}

.semester-box-desc {
  margin-top: 10px;
  color: #666;
}

.intro-box {
  border: 2px solid var(--primary-color);
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  text-align: center;
}

.intro-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.note {
  font-size: 0.9em;
  color: #555;
  margin-top: 10px;
}

.header-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Full height to center vertically */
  text-align: center;
}

/* Styling for secondary headings */
.heading_1 {
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Styling for the second type of tool button */
.tool-button-2 {
  display: inline-block;
  background-color: bisque;
  color: black;
  text-align: center;
  padding: 4px 10px;
  /* Reduced padding */
  margin: 2px 4px;
  /* Slightly reduced margin */
  border-radius: 4px;
  /* Increased border radius for a smoother look */
  text-decoration: none;
  font-size: 0.875rem;
  /* Slightly smaller font size */
  font-weight: 500;
  /* Added font weight for a bolder look */
  transition: background-color 0.3s, transform 0.3s;
  /* Added transform transition for better effect */
}

/* Hover effect for the second type of tool button */
.tool-button-2:hover {
  background-color: bisque;
  /* Slightly darker background on hover */
  transform: scale(1.05);
  /* Slight scale up effect on hover */
}

.footer-section {
  text-align: center;
  padding: 20px;
  color: white;
  /* background-color: var(--primary-color); */
  background-color: black;
}