/* jbwages.com Isso theme
   Syncs with Quarto light/dark mode via body.quarto-light / body.quarto-dark
*/

#isso-thread {
  --isso-font: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", sans-serif);
  --isso-radius-sm: 10px;
  --isso-radius-md: 14px;
  --isso-radius-lg: 18px;
  --isso-space-1: 0.35rem;
  --isso-space-2: 0.6rem;
  --isso-space-3: 0.9rem;
  --isso-space-4: 1.2rem;
  --isso-space-5: 1.75rem;
  --isso-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  --isso-shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.04);

  margin-top: 3rem;
  padding-top: 1.5rem;
  font-family: var(--isso-font);
  line-height: 1.6;
}

#isso-thread h4,
#isso-thread .isso-heading {
  margin-bottom: 0.75rem;
}

#isso-thread a {
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

#isso-thread a:hover {
  text-decoration: underline;
}

#isso-thread textarea,
#isso-thread input[type="text"],
#isso-thread input[type="email"],
#isso-thread input[type="url"] {
  width: 100%;
  font: inherit;
  line-height: 1.5;
  border-radius: var(--isso-radius-sm);
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--isso-border);
  background: var(--isso-input-bg);
  color: var(--isso-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

#isso-thread textarea {
  min-height: 10rem;
  resize: vertical;
}

#isso-thread textarea:focus,
#isso-thread input[type="text"]:focus,
#isso-thread input[type="email"]:focus,
#isso-thread input[type="url"]:focus {
  outline: none;
  border-color: var(--isso-accent);
  box-shadow: 0 0 0 3px var(--isso-ring);
}

#isso-thread .isso-postbox {
  margin: 1.25rem 0 2rem;
  padding: 1.25rem;
  background: var(--isso-card-bg);
  border: 1px solid var(--isso-border);
  border-radius: var(--isso-radius-lg);
  box-shadow: var(--isso-shadow-soft);
}

#isso-thread .isso-textarea-wrapper,
#isso-thread .isso-preview {
  border-radius: var(--isso-radius-md);
}

#isso-thread .isso-preview {
  margin-top: 0.9rem;
  padding: 1rem 1.05rem;
  background: var(--isso-preview-bg) !important;
  color: var(--isso-text) !important;
  border: 1px solid var(--isso-border);
}

#isso-thread .isso-preview *,
#isso-thread .isso-comment-text *,
#isso-thread .isso-comment * {
  color: inherit;
}

#isso-thread .isso-preview pre,
#isso-thread .isso-preview code,
#isso-thread .isso-comment-text pre,
#isso-thread .isso-comment-text code {
  background: var(--isso-code-bg) !important;
  color: var(--isso-text) !important;
  border-radius: 8px;
}

#isso-thread .isso-preview pre,
#isso-thread .isso-comment-text pre {
  padding: 0.85rem 1rem;
  overflow-x: auto;
  border: 1px solid var(--isso-border);
}

#isso-thread .isso-preview code,
#isso-thread .isso-comment-text code {
  padding: 0.15rem 0.4rem;
}

#isso-thread .isso-postbox .auth-section,
#isso-thread .isso-postbox .input-wrapper,
#isso-thread .isso-postbox .isso-auth-section {
  gap: 0.75rem;
}

#isso-thread .isso-form-wrapper,
#isso-thread .isso-auth-section,
#isso-thread .isso-notification,
#isso-thread .isso-follow-up {
  margin-top: 0.9rem;
}

#isso-thread .isso-post-action,
#isso-thread .isso-form-actions {
  margin-top: 1rem;
}

#isso-thread input[type="checkbox"] {
  accent-color: var(--isso-accent);
}

#isso-thread button,
#isso-thread input[type="submit"],
#isso-thread .isso-submit,
#isso-thread .isso-preview-button,
#isso-thread .isso-edit,
#isso-thread .isso-delete,
#isso-thread .isso-reply,
#isso-thread .isso-cancel {
  appearance: none;
  font: inherit;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

#isso-thread button:hover,
#isso-thread input[type="submit"]:hover,
#isso-thread .isso-submit:hover,
#isso-thread .isso-preview-button:hover,
#isso-thread .isso-edit:hover,
#isso-thread .isso-delete:hover,
#isso-thread .isso-reply:hover,
#isso-thread .isso-cancel:hover {
  transform: translateY(-1px);
}

#isso-thread .isso-submit,
#isso-thread input[type="submit"] {
  background: var(--isso-accent);
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

#isso-thread .isso-submit:hover,
#isso-thread input[type="submit"]:hover {
  background: var(--isso-accent-hover);
  text-decoration: none;
}

#isso-thread .isso-preview-button,
#isso-thread .isso-edit,
#isso-thread .isso-delete,
#isso-thread .isso-reply,
#isso-thread .isso-cancel {
  background: var(--isso-pill-bg);
  color: var(--isso-text) !important;
  border-color: var(--isso-border);
}

#isso-thread .isso-comment {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  background: var(--isso-card-bg);
  border: 1px solid var(--isso-border);
  border-radius: var(--isso-radius-lg);
  box-shadow: var(--isso-shadow-soft);
}

#isso-thread .isso-comment:not(:last-child) {
  margin-bottom: 0.9rem;
}

#isso-thread .isso-comment-header,
#isso-thread .isso-comment-footer,
#isso-thread .isso-meta,
#isso-thread .isso-note {
  color: var(--isso-muted) !important;
  font-size: 0.95rem;
}

#isso-thread .isso-author {
  color: var(--isso-text) !important;
  font-weight: 700;
}

#isso-thread .isso-is-page-author > .isso-comment-header .isso-author,
#isso-thread .isso-is-page-author .isso-author {
  color: var(--isso-accent) !important;
}

#isso-thread .isso-comment-text {
  margin-top: 0.65rem;
  color: var(--isso-text);
}

#isso-thread .isso-comment-footer {
  margin-top: 0.8rem;
}

#isso-thread .isso-feedlink,
#isso-thread .isso-permalink {
  opacity: 0.9;
}

#isso-thread .isso-feedlink:hover,
#isso-thread .isso-permalink:hover {
  opacity: 1;
}

#isso-thread .isso-comment-separator {
  display: none;
}

#isso-thread .isso-notification {
  padding: 0.8rem 0.95rem;
  border-radius: var(--isso-radius-md);
  border: 1px solid var(--isso-border);
  background: var(--isso-preview-bg);
  color: var(--isso-text);
}

#isso-thread blockquote {
  margin: 0.8rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--isso-accent);
  color: var(--isso-muted);
}

#isso-thread img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

#isso-thread hr {
  border: 0;
  border-top: 1px solid var(--isso-border);
  margin: 1rem 0;
}

/* Light mode */
body.quarto-light #isso-thread {
  --isso-bg: #ffffff;
  --isso-card-bg: #ffffff;
  --isso-input-bg: #fbfcfe;
  --isso-preview-bg: #f6f8fb;
  --isso-code-bg: #f3f5f7;
  --isso-pill-bg: #f4f6f8;
  --isso-border: rgba(24, 36, 51, 0.12);
  --isso-text: #1f2937;
  --isso-muted: #6b7280;
  --isso-accent: #2563eb;
  --isso-accent-hover: #1d4ed8;
  --isso-ring: rgba(37, 99, 235, 0.18);
}

/* Dark mode */
body.quarto-dark #isso-thread {
  --isso-bg: #111827;
  --isso-card-bg: #161d2a;
  --isso-input-bg: #0f1724;
  --isso-preview-bg: #0f1724;
  --isso-code-bg: #0b1220;
  --isso-pill-bg: #1d2636;
  --isso-border: rgba(148, 163, 184, 0.20);
  --isso-text: #e5e7eb;
  --isso-muted: #a8b3c7;
  --isso-accent: #60a5fa;
  --isso-accent-hover: #93c5fd;
  --isso-ring: rgba(96, 165, 250, 0.22);
  --isso-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  --isso-shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.24);
}

/* Dark mode preview fixes */
body.quarto-dark #isso-thread .isso-preview,
body.quarto-dark #isso-thread .isso-preview p,
body.quarto-dark #isso-thread .isso-preview li,
body.quarto-dark #isso-thread .isso-preview blockquote,
body.quarto-dark #isso-thread .isso-preview code,
body.quarto-dark #isso-thread .isso-preview pre,
body.quarto-dark #isso-thread textarea,
body.quarto-dark #isso-thread input[type="text"],
body.quarto-dark #isso-thread input[type="email"],
body.quarto-dark #isso-thread input[type="url"] {
  color: var(--isso-text) !important;
  background-color: var(--isso-preview-bg) !important;
  border-color: var(--isso-border) !important;
}

body.quarto-dark #isso-thread .isso-preview a,
body.quarto-dark #isso-thread .isso-comment a,
body.quarto-dark #isso-thread a {
  color: #8ec5ff;
}

/* Small-screen polish */
@media (max-width: 768px) {
  #isso-thread {
    margin-top: 2.25rem;
    padding-top: 1.1rem;
  }

  #isso-thread .isso-postbox,
  #isso-thread .isso-comment {
    padding: 0.9rem;
    border-radius: 14px;
  }

  #isso-thread button,
  #isso-thread input[type="submit"],
  #isso-thread .isso-submit,
  #isso-thread .isso-preview-button,
  #isso-thread .isso-edit,
  #isso-thread .isso-delete,
  #isso-thread .isso-reply,
  #isso-thread .isso-cancel {
    width: auto;
    min-height: 42px;
  }

  #isso-thread textarea {
    min-height: 8rem;
  }
}

/* Make preview button match submit button */
#isso-thread input[name="preview"],
#isso-thread button[name="preview"],
#isso-thread .isso-post-action > input[type="button"],
#isso-thread .isso-post-action > button,
#isso-thread .isso-postbox input[type="button"],
#isso-thread .isso-postbox button {
  appearance: none;
  font: inherit;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--isso-accent) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transition:
    transform 0.12s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

#isso-thread input[name="preview"]:hover,
#isso-thread button[name="preview"]:hover,
#isso-thread .isso-post-action > input[type="button"]:hover,
#isso-thread .isso-post-action > button:hover,
#isso-thread .isso-postbox input[type="button"]:hover,
#isso-thread .isso-postbox button:hover {
  transform: translateY(-1px);
  background: var(--isso-accent-hover) !important;
}