/* Colours via https://www.iamsajid.com/ui-colors/ */
:root {
  /* hsl (fallback color) */
  --bg-dark: hsl(13 100% 2%);
  --bg: hsl(23 100% 4%);
  --bg-light: hsl(32 100% 7%);
  --text: hsl(33 100% 89%);
  --text-muted: hsl(33 54% 64%);
  --highlight: hsl(35 60% 32%);
  --border: hsl(38 100% 18%);
  --border-muted: hsl(36 100% 10%);
  --primary: hsl(34 60% 63%);
  --secondary: hsl(212 77% 72%);
  --danger: hsl(9 47% 65%);
  --warning: hsl(51 32% 52%);
  --success: hsl(149 31% 55%);
  --info: hsl(217 52% 67%);
  /* oklch */
  --bg-dark: oklch(0.1 0.045 72);
  --bg: oklch(0.15 0.045 72);
  --bg-light: oklch(0.2 0.045 72);
  --text: oklch(0.96 0.09 72);
  --text-muted: oklch(0.76 0.09 72);
  --highlight: oklch(0.5 0.09 72);
  --border: oklch(0.4 0.09 72);
  --border-muted: oklch(0.3 0.09 72);
  --primary: oklch(0.76 0.1 72);
  --secondary: oklch(0.76 0.1 252);
  --danger: oklch(0.7 0.09 30);
  --warning: oklch(0.7 0.09 100);
  --success: oklch(0.7 0.09 160);
  --info: oklch(0.7 0.09 260);
}

.recipe-list {
  display: flex;
  flex-direction: column; /* Stack recipes vertically */
  gap: 1.5rem; /* Space between recipes */
  padding: 1.5rem;
  background-color: var(--bg);
  color: var(--text);
  max-width: 1000px; /* Limit maximum width */
  margin: 0 auto; /* Center the content */
}

.recipe-card {
  background-color: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.recipe-image {
  width: 100%;
  height: 200px; /* Fixed height for consistency */
  object-fit: cover;
}

.recipe-title {
  font-size: 1.25rem;
  font-weight: bold;
  padding: 1rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.recipe-content {
  padding: 0 1rem 1rem;
  flex-grow: 1;
}

.recipe-content h1, .recipe-content h2, .recipe-content h3 {
  color: var(--highlight);
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.tab-navigation {
  display: flex;
  justify-content: flex-start; /* Align tabs to the left */
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  padding-top: 1rem;
}

.tab-button {
  background-color: var(--bg-dark);
  color: var(--text-muted);
  padding: 0.75rem 1.25rem;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
  border-bottom: 3px solid transparent;
}

.tab-button:hover {
  background-color: var(--bg);
  color: var(--text);
}

.tab-button.active {
  background-color: var(--bg-light);
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-content-container {
  padding: 1rem;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.recipe-content p, .recipe-content ul, .recipe-content ol {
  margin-bottom: 1em;
}

.recipe-content ul, .recipe-content ol {
  list-style-position: inside;
  padding-left: 1.2em;
}

.recipe-content li {
  margin-bottom: 0.5em;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: var(--bg-dark);
  color: var(--text);
  position: fixed; /* Make the top bar fixed */
  top: 0; /* Position it at the top */
  width: 100%; /* Span the full width */
  z-index: 1000; /* Ensure it stays on top */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

.site-title {
  font-size: 1.5rem;
  font-weight: bold;
}

.theme-toggle-button {
  background-color: var(--primary);
  color: var(--text);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
}

.theme-toggle-button:hover {
  opacity: 0.8;
}

/* Utility classes for colors */
.text-bg-dark { color: var(--bg-dark); }
.bg-bg-dark { background-color: var(--bg-dark); }
.text-bg { color: var(--bg); }
.bg-bg { background-color: var(--bg); }
.text-bg-light { color: var(--bg-light); }
.bg-bg-light { background-color: var(--bg-light); }
.text-text { color: var(--text); }
.bg-text { background-color: var(--text); }
.text-text-muted { color: var(--text-muted); }
.bg-text-muted { background-color: var(--text-muted); }
.text-highlight { color: var(--highlight); }
.bg-highlight { background-color: var(--highlight); }
.text-border { color: var(--border); }
.bg-border { background-color: var(--border); }
.text-border-muted { color: var(--border-muted); }
.bg-border-muted { background-color: var(--border-muted); }
.text-primary { color: var(--primary); }
.bg-primary { background-color: var(--primary); }
.text-secondary { color: var(--secondary); }
.bg-secondary { background-color: var(--secondary); }
.text-danger { color: var(--danger); }
.bg-danger { background-color: var(--danger); }
.text-warning { color: var(--warning); }
.bg-warning { background-color: var(--warning); }
.text-success { color: var(--success); }
.bg-success { background-color: var(--success); }
.text-info { color: var(--info); }
.bg-info { background-color: var(--info); }

body {
  background-color: var(--bg);
  padding-top: 4rem; /* Add padding to body to account for fixed header height */
}

body.light {
  /* hsl (fallback color) */
  --bg-dark: hsl(33 78% 87%);
  --bg: hsl(33 100% 92%);
  --bg-light: hsl(33 100% 98%);
  --text: hsl(10 100% 5%);
  --text-muted: hsl(38 100% 18%);
  --highlight: hsl(33 100% 94%);
  --border: hsl(34 44% 44%);
  --border-muted: hsl(34 45% 56%);
  --primary: hsl(39 100% 16%);
  --secondary: hsl(210 69% 29%);
  --danger: hsl(8 36% 41%);
  --warning: hsl(52 58% 28%);
  --success: hsl(152 45% 31%);
  --info: hsl(217 38% 43%);
  /* oklch */
  --bg-dark: oklch(0.92 0.045 72);
  --bg: oklch(0.96 0.045 72);
  --bg-light: oklch(1 0.045 72);
  --text: oklch(0.15 0.09 72);
  --text-muted: oklch(0.4 0.09 72);
  --highlight: oklch(1 0.09 72);
  --border: oklch(0.6 0.09 72);
  --border-muted: oklch(0.7 0.09 72);
  --primary: oklch(0.4 0.1 72);
  --secondary: oklch(0.4 0.1 252);
  --danger: oklch(0.5 0.09 30);
  --warning: oklch(0.5 0.09 100);
  --success: oklch(0.5 0.09 160);
  --info: oklch(0.5 0.09 260);
}