/* ==============================
   OSNOVNO – naslovi, opisi
============================== */
.main.card h2,
#sidebar.card h2 {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.main.card > p {
  color: var(--muted);
  margin-bottom: 14px;
}

/* ==============================
   OBRAZEC ZA KOMENTAR
============================== */
#commentForm {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.comment-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

#commentForm input[type="text"],
#commentForm textarea {
  width: 100%;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

#commentForm input[type="text"]::placeholder,
#commentForm textarea::placeholder {
  color: #98a0ad;
}

#commentForm input[type="text"]:focus,
#commentForm textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255,122,26,.15);
}

#commentForm textarea {
  min-height: 110px;
  resize: vertical;
}

/* Gumb iz main.css (nav-button) naj se poravna levo */
#commentForm .nav-button { justify-self: start; }

.secondary-btn {
  background: rgba(255,255,255,.05);
  color: var(--muted);
}

.secondary-btn:hover {
  color: var(--text);
}

.edit-btn {
  background: rgba(255,255,255,.05);
  color: var(--text);
}

.delete-btn {
  background: rgba(255, 122, 26, .12);
  border-color: rgba(255, 122, 26, .24);
  color: #ffd3b2;
}

.delete-btn:hover {
  color: #fff0e2;
}

.comment-status {
  margin: -4px 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}

.comment-status[data-tone="success"] {
  border-color: rgba(94, 196, 118, .28);
  background: rgba(94, 196, 118, .10);
  color: #c8f5d2;
}

.comment-status[data-tone="error"] {
  border-color: rgba(255, 122, 26, .30);
  background: rgba(255, 122, 26, .10);
  color: #ffd3b2;
}

/* ==============================
   SEZNAM KOMENTARJEV (LEVO)
============================== */
.comments-list {
  display: grid;
  gap: 12px;
}

.comment-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}

.comment-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}

.comment-card p {
  margin: 0 0 6px;
}

.comment-card blockquote {
  margin: 0;
  padding-left: 10px;
  border-left: 3px solid var(--brand);
  color: var(--muted);
  font-style: italic;
}

/* Akcije pod komentarjem */
.comment-actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==============================
   GUMBI
============================== */
.btn {
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .2s ease, transform .05s ease, background .2s ease, color .2s ease;
}
.btn:hover  { filter: brightness(1.05); }
.btn:active { transform: scale(.98); }

/* Like gumb naj bo v brand barvi */
.like-btn { background: var(--brand); color: #111; border: 0; }
.like-btn[disabled],
.like-btn.is-liked {
  opacity: .65;
  cursor: not-allowed;
  filter: saturate(.65);
}
.like-btn[disabled]:hover,
.like-btn.is-liked:hover {
  filter: saturate(.65);
}

/* ==============================
   TOP KOMENTARJI (DESNO)
============================== */
#topComments {
  display: grid;
  gap: 12px;
}

#topComments .top-comment {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}

#topComments .top-comment:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}

#topComments .top-comment p {
  margin: 0 0 6px;
}

#topComments .top-comment blockquote {
  margin: 0;
  padding-left: 10px;
  border-left: 3px solid var(--brand);
  color: var(--muted);
  font-style: italic;
}

/* Naslov v sidebarju */
#sidebar.card > h2 { margin-bottom: 10px; }

/* ==============================
   PRAZNA STANJA
============================== */
.comments-list > p,
#topComments > p {
  color: var(--muted);
}

/* Na strani komentarjev je "Recepti" samo direkten link brez delujocega podmenija. */
.navbar > li.submenu-disabled > ul,
.navbar > li.submenu-disabled:hover > ul,
.navbar > li.submenu-disabled:focus-within > ul,
.navbar > li.submenu-disabled.open > ul {
  display: none !important;
}

/* ==============================
   ODZIVNOST
============================== */
@media (max-width: 1040px) {
  /* grid iz main.css že zloži v 1 stolpec */
}

@media (max-width: 820px) {
  .comment-form-actions {
    display: grid;
  }

  #commentForm .nav-button {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }

  #cancelEditBtn {
    width: 100%;
    justify-content: center;
  }
}