/* ==========================================================================
   TechTalk Board - design system bridge
   Maps board-specific tokens to the global TechTalk visual system.
   ========================================================================== */

:root {
  --clr-bg-page: var(--tt-color-bg, #081c24);
  --clr-bg-page-rgb: var(--tt-color-bg-rgb, 8, 28, 36);
  --clr-bg-container: var(--tt-color-surface, #10212b);
  --clr-bg-element: var(--tt-color-surface-2, #152933);
  --clr-bg-element-rgb: var(--tt-color-surface-2-rgb, 21, 41, 51);
  --clr-bg-element-hover: var(--tt-color-surface-3, #1b333f);
  --clr-bg-sidebar: color-mix(in srgb, var(--tt-color-surface, #10212b) 92%, #000);
  --clr-bg-header-bar: var(--tt-color-header, #0e0e0f);
  --clr-bg-comment-primary: var(--tt-color-surface-2, #152933);
  --clr-bg-comment-secondary: var(--tt-color-surface, #10212b);
  --clr-bg-element-pinned: color-mix(in srgb, var(--tt-color-surface-3, #1b333f) 82%, var(--tt-color-accent, #9b7434));

  --clr-text-primary: var(--tt-color-text-muted, #b9c3c7);
  --clr-text-secondary: var(--tt-color-text-soft, #87959b);
  --clr-text-heading: var(--tt-color-text, #f4f7f8);
  --clr-text-link: var(--tt-color-accent-bright, #cda158);
  --clr-text-link-hover: color-mix(in srgb, var(--tt-color-accent-bright, #cda158) 84%, #fff);
  --clr-text-on-accent: #fff;

  --clr-accent-gold: var(--tt-color-accent, #9b7434);
  --clr-accent-gold-darker: var(--tt-color-accent-strong, #7d5d29);
  --clr-accent-blue-highlight: var(--tt-color-blue, #18b4ff);
  --clr-accent-gold-rgb: var(--tt-color-accent-rgb, 155, 116, 52);

  --clr-border-primary: var(--tt-color-border-soft, rgba(255, 255, 255, 0.09));
  --clr-border-secondary: var(--tt-color-border-muted, rgba(255, 255, 255, 0.15));
  --clr-border-accent: var(--tt-color-border, rgba(155, 116, 52, 0.42));
  --clr-divider: var(--tt-color-border-soft, rgba(255, 255, 255, 0.09));

  --font-base: var(--tt-font-body, "Helvetica Neue", Helvetica, Arial, sans-serif);
  --font-size-base: var(--tt-font-size-sm, 0.875rem);
  --font-size-sm: var(--tt-font-size-xs, 0.75rem);
  --font-size-lg: var(--tt-font-size-md, 1rem);
  --font-size-xl: var(--tt-font-size-lg, 1.125rem);
  --font-size-xxl: var(--tt-font-size-xl, 1.5rem);
  --line-height-base: var(--tt-line-body, 1.6);

  --space-xs: var(--tt-space-1, 0.25rem);
  --space-sm: var(--tt-space-2, 0.5rem);
  --space-md: var(--tt-space-4, 1rem);
  --space-lg: var(--tt-space-5, 1.5rem);
  --space-xl: var(--tt-space-6, 2rem);

  --cut-sm: var(--tt-cut-sm, 8px);
  --cut-md: var(--tt-cut-md, 12px);
  --chamfer-sm: var(--tt-chamfer-sm);
  --chamfer-md: var(--tt-chamfer-md);
  --border-radius: var(--tt-radius-xs, 0.25rem);
  --max-width-forum: var(--tt-container-wide, 93.75rem);
}

.ttb-forum-wrapper,
.ttb-single-thread-page {
  width: 100%;
  max-width: var(--max-width-forum);
  margin-inline: auto;
  box-sizing: border-box;
}

.ttb-content-wrapper-outer {
  margin-block: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 992px) {
  main.site-main > .content-area.content-area-empty-content:has(.ttb-forum-wrapper),
  main.site-main.site-main-empty-content:has(> .content-area.content-area-empty-content > .ttb-forum-wrapper) > .content-area.content-area-empty-content {
    width: var(--tt-container-shell, min(calc(100% - 2rem), var(--max-width-forum))) !important;
    max-width: var(--max-width-forum) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  main.site-main:has(.ttb-forum-wrapper) {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.ttb-header-bar,
.ttb-sidebar-left,
.ttb-single-thread-page .ttb-thread-item-full,
.ttb-comments-wrapper,
.ttb-form {
  filter: drop-shadow(var(--tt-shadow-sm, 0 0.25rem 1rem rgba(0, 0, 0, 0.22)));
}

.ttb-header-bar::before,
.ttb-sidebar-left::before,
.ttb-single-thread-page .ttb-thread-item-full::before,
.ttb-comments-wrapper::before,
.ttb-form::before,
.ttb-comments-wrapper .comment-body.ttb-comment-body::before {
  background: var(--clr-border-accent);
}

.ttb-thread-item {
  background-color: color-mix(in srgb, var(--clr-bg-element) 94%, transparent);
}

.ttb-thread-item:hover {
  background-color: var(--clr-bg-element-hover);
}

.ttb-btn-create-discussion,
.ttb-form .ttb-form-submit input[type="submit"],
.ttb-form .ttb-form-submit button.ttb-submit-button,
.ttb-comments-wrapper #respond .form-submit input[type="submit"],
.ttb-comments-wrapper .reply.ttb-reply-link .comment-reply-link,
.ttb-load-more-comments-btn {
  min-height: 2.25rem;
  letter-spacing: 0.02em;
}

.ttb-search-form input[type="search"],
.ttb-comment-sort-select,
.ttb-input-wrap input[type="text"],
.ttb-input-wrap textarea,
.ttb-input-wrap select,
.ttb-comments-wrapper #respond input[type="text"],
.ttb-comments-wrapper #respond input[type="email"],
.ttb-comments-wrapper #respond input[type="url"],
.ttb-comments-wrapper #respond textarea#comment {
  transition: border-color var(--tt-transition-fast, 0.15s ease), box-shadow var(--tt-transition-fast, 0.15s ease);
}

.ttb-search-form input[type="search"]:focus,
.ttb-comment-sort-select:focus,
.ttb-input-wrap:focus-within,
.ttb-comments-wrapper #respond input[type="text"]:focus,
.ttb-comments-wrapper #respond input[type="email"]:focus,
.ttb-comments-wrapper #respond input[type="url"]:focus,
.ttb-comments-wrapper #respond textarea#comment:focus {
  outline: none;
  box-shadow: var(--tt-focus-ring, 0 0 0 3px rgba(24, 180, 255, 0.3));
}

.ttb-form .ttb-info {
  background-color: rgba(var(--tt-color-blue-rgb, 24, 180, 255), 0.1);
  border-color: rgba(var(--tt-color-blue-rgb, 24, 180, 255), 0.42);
}

.ttb-form .ttb-info p {
  color: var(--tt-color-blue, #18b4ff);
}

html.light-mode .ttb-header-bar::after,
html.light-mode .ttb-sidebar-left::after,
html.light-mode .ttb-single-thread-page .ttb-thread-item-full::after,
html.light-mode .ttb-comments-wrapper::after,
html.light-mode .ttb-form::after,
html.light-mode .ttb-comments-wrapper > .comment-respond::after,
html.light-mode .ttb-comments-wrapper .comment-body.ttb-comment-body::after {
  background: var(--tt-color-surface, #fff9f1);
}

html.light-mode .ttb-thread-item,
html.light-mode .ttb-pinned-threads-list .ttb-thread-item.ttb-pinned-item {
  background-color: var(--tt-color-surface, #fff9f1);
}

html.light-mode .ttb-thread-item:hover {
  background-color: var(--tt-color-surface-2, #f2e4d1);
}

html.light-mode .ttb-sidebar-left {
  color: var(--tt-color-text, #3c3028);
}

html.light-mode .ttb-search-form input[type="search"],
html.light-mode .ttb-comment-sort-select,
html.light-mode .ttb-editor-content,
html.light-mode .ttb-comments-wrapper #respond input[type="text"],
html.light-mode .ttb-comments-wrapper #respond input[type="email"],
html.light-mode .ttb-comments-wrapper #respond input[type="url"],
html.light-mode .ttb-comments-wrapper #respond textarea#comment {
  background-color: color-mix(in srgb, var(--tt-color-surface, #fff9f1) 88%, #fff);
  color: var(--tt-color-text, #3c3028);
}

@media (max-width: 991.98px) {
  .ttb-forum-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
  }

  .ttb-mobile-sidebar-toggle-btn {
    box-shadow: var(--tt-shadow-md, 0 0.75rem 2.25rem rgba(0, 0, 0, 0.28));
  }
}

@media (max-width: 600px) {
  .ttb-header-bar-inner {
    padding: 1rem;
    gap: 1rem;
  }

  .ttb-header-bar .boards-title {
    font-size: clamp(1.25rem, 7vw, 1.75rem);
  }

  .ttb-single-thread-page .ttb-thread-item-full,
  .ttb-comments-wrapper,
  .ttb-form {
    padding: 1rem;
  }

  .ttb-comments-wrapper .comment-body.ttb-comment-body {
    gap: 0.75rem;
    padding: 1rem;
  }
}