/* Reset & basics */
body, html {
  height: 100%;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #fff9f2;
}

/* Navbar links style */
.nav-link {
  font-weight: 600;
  color: #444 !important;
  transition: color 0.3s ease;
}
.nav-link:hover,
.nav-link.active {
  color: #0d6efd !important; /* Bootstrap primary color */
}

/* Hero Section */
.hero-section {
  height: 60vh;
  position: relative;
  background-image: url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1470&q=80');
  background-size: cover;
  background-position: center;
  text-shadow: 0 0 10px rgba(0,0,0,0.6);
  padding-top: 120px;
}

.hero-section .overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 110, 253, 0.5);
  z-index: 0;
  border-radius: 0 0 50% 50% / 20%;
}

.hero-section .content {
  position: relative;
  z-index: 1;
}

/* Search input */
#input1 {
  box-shadow: 0 4px 15px rgba(13,110,253,0.3);
  border: none;
  padding-left: 25px;
  transition: box-shadow 0.3s ease;
}
#input1:focus {
  box-shadow: 0 0 12px 3px rgba(13,110,253,0.7);
  outline: none;
}

/* Search results dropdown */
#searchWords {
  max-height: 200px;
  overflow-y: auto;
  border-radius: 0 0 30px 30px;
}
#searchWords li {
  background-color: white;
  cursor: pointer;
  padding: 10px 20px;
  color: black;
  transition: background-color 0.3s ease;
}
#searchWords li:hover {
  background-color: #e7f1ff;
}
.span {
  background-color: #0d6efd;
  color: white;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}

/* Error message */
#error {
  font-weight: 600;
}

/* Recipe Cards */
#data .card {
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(13,110,253,0.15);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}
#data .card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(13,110,253,0.3);
}
#data img {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  object-fit: cover;
  height: 200px;
  width: 100%;
}

/* Modal */
.modal-content {
  border-radius: 20px;
}
.modal-header {
  border-bottom: none;
}
.modal-title {
  font-weight: 700;
}
.modal-body img {
  border-radius: 15px;
  margin-bottom: 20px;
}
.modal-body ul {
  list-style: disc inside;
  padding-left: 0;
}