/* =========================
   CATEGORY LIST / SIDEBAR
========================= */

.category-block,
.category-group {
  margin: 0 0 4px;
}

.category-title,
.category-group-title {
  display: block;
  width: 100%;
  padding: 3px 4px;
  color: var(--accent-light);
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}

.category-title:hover,
.category-group-title:hover {
  color: #efbf84;
  background: rgba(255, 255, 255, 0.03);
}

.category-recipes[hidden],
.category-group-children[hidden] {
  display: none;
}

.category-recipes:not([hidden]),
.category-group-children:not([hidden]) {
  display: block;
}

/*
 * Fail closed on the home page: collapsible recipe/category lists stay hidden
 * until category-toggle.js explicitly opens them. This prevents a delayed or
 * failed script load from briefly or permanently rendering the entire sidebar
 * expanded and overflowing through the fixed-height home layout.
 *
 * Search/favorites result lists are server-rendered as focused results rather
 * than collapsible category content, so they remain visible without JS.
 */
body.home-page .category-recipes:not(.search-results-list),
body.home-page .category-group-children {
  display: none;
}

body.home-page .category-recipes.is-open:not([hidden]),
body.home-page .category-group-children.is-open:not([hidden]) {
  display: block;
}

.category-recipes {
  padding: 3px 0 0 12px;
}

.category-group-children {
  padding-left: 12px;
  border-left: 1px solid rgba(215, 166, 106, 0.22);
}

.category-group-children .category-block {
  margin-bottom: 3px;
}

.recipe-link {
  display: block;
  padding: 3px 0;
  margin: 0;
  border-radius: 4px;
  cursor: pointer;
  color: #e5e1db;
  font-size: 0.93rem;
  line-height: 1.35;
  text-decoration: none;
}

.recipe-link:hover {
  background: #2b3540;
  color: #fff;
}

.empty-category,
.empty-state {
  color: var(--muted);
  line-height: 1.45;
}

.empty-category {
  padding: 2px 0 5px;
  font-size: 0.86rem;
  font-style: italic;
}

.empty-state {
  margin: 10px 4px;
}

.search-results-heading {
  margin: 0 0 8px;
  padding: 6px 4px;
  color: var(--muted);
  line-height: 1.35;
}

.search-results-heading strong {
  color: var(--accent-light);
}

.clear-search-link {
  display: inline-block;
  margin: 0 0 14px 4px;
  color: var(--accent-light);
  font-size: 0.9rem;
  text-decoration: none;
}

.clear-search-link:hover {
  text-decoration: underline;
}

/* =========================
   PERSONAL SIDEBAR SHORTCUTS
========================= */

/*
 * Favorites, Want to Try, and Recently Viewed are peers. Keep their box,
 * heading, icon, count, and divider geometry identical so adding another
 * personal shortcut does not require a one-off layout.
 */
.favorite-category-shortcut,
.want-to-try-category-shortcut,
.recently-viewed-shortcut {
  margin-bottom: 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(215, 166, 106, 0.22);
}

.favorite-category-title,
.want-to-try-category-title,
.recently-viewed-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
}

.favorite-category-heart,
.want-to-try-heading-icon,
.recently-viewed-title-icon {
  color: #ff5a66;
  font-size: 1rem;
  line-height: 1;
}

.favorite-category-count,
.want-to-try-category-count,
.recently-viewed-count {
  margin-left: auto;
  padding: 0.02rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 90, 102, 0.15);
  color: #ffd7dc;
  font-size: 0.76rem;
  font-weight: 700;
}

.favorite-results-heading strong {
  color: #ff9aa4;
}


/* Dynamic personal shortcuts use the same shared hidden/toggle behavior. */
.recently-viewed-shortcut[hidden] {
  display: none !important;
}

.recently-viewed-item {
  display: flex !important;
  align-items: baseline;
  gap: 0.45rem;
}

.recently-viewed-item-type {
  font-size: 0.67rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.62;
  white-space: nowrap;
}

.recently-viewed-clear {
  display: block;
  margin: 0.65rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.72;
}

.recently-viewed-clear:hover,
.recently-viewed-clear:focus {
  opacity: 1;
}

/* =========================
   VEGETARIAN CATEGORY INFO
========================= */

.category-title-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.category-title-row .category-title {
  flex: 1;
}

.category-info-button {
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  border: 1px solid rgba(215, 166, 106, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent-light);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.category-info-button:hover {
  background: rgba(215, 166, 106, 0.16);
  color: #fff;
}

.vegetarian-info-dialog {
  max-width: 34rem;
  border: 1px solid rgba(215, 166, 106, 0.5);
  border-radius: 12px;
  background: #1f2832;
  color: #f4eee7;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.vegetarian-info-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.vegetarian-info-dialog-inner {
  padding: 1.25rem;
}

.vegetarian-info-dialog h2 {
  margin: 0 0 0.75rem;
  color: var(--accent-light);
}

.vegetarian-info-dialog p {
  margin: 0 0 0.85rem;
  line-height: 1.45;
}

.vegetarian-info-close {
  margin-top: 0.25rem;
}