/* ==========================================================================
   TechTalk design system bridge
   Global visual rules that keep theme, board, members and plugins aligned.
   ========================================================================== */

:root {
    --max-width: min(var(--tt-container-page), calc(100vw - (var(--tt-page-gutter) * 2)));
    --tt-rail-page: min(calc(100% - (var(--tt-page-gutter) * 2)), var(--max-width));
    --tt-rail-wide: min(calc(100% - (var(--tt-page-gutter) * 2)), var(--tt-container-wide));
    --color-background: var(--tt-color-bg);
    --color-header: var(--tt-color-header);
    --color-accent: var(--tt-color-accent);
    --color-accent-light: var(--tt-color-accent-bright);
    --color-text: var(--tt-color-text);
    --color-text-secondary: var(--tt-color-text-muted);
}

html.light-mode {
    --tt-color-bg: #f7efe5;
    --tt-color-bg-rgb: 247, 239, 229;
    --tt-color-header: #f4d5ac;
    --tt-color-surface: #fff9f1;
    --tt-color-surface-rgb: 255, 249, 241;
    --tt-color-surface-2: #f2e4d1;
    --tt-color-surface-2-rgb: 242, 228, 209;
    --tt-color-surface-3: #ead7bd;
    --tt-color-surface-3-rgb: 234, 215, 189;
    --tt-color-surface-hover: rgba(91, 65, 34, 0.06);
    --tt-color-surface-active: rgba(166, 124, 53, 0.16);
    --tt-color-text: #3c3028;
    --tt-color-text-muted: #625345;
    --tt-color-text-soft: #846f5b;
    --tt-color-border: rgba(137, 99, 47, 0.38);
    --tt-color-border-soft: rgba(91, 65, 34, 0.16);
    --tt-color-border-muted: rgba(91, 65, 34, 0.24);
    --tt-shadow-sm: 0 0.25rem 1rem rgba(91, 65, 34, 0.10);
    --tt-shadow-md: 0 0.75rem 2.25rem rgba(91, 65, 34, 0.13);
    --tt-shadow-lg: 0 1.5rem 5rem rgba(91, 65, 34, 0.14);
    --tt-shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1.5rem 5rem rgba(91, 65, 34, 0.12);
}

@media (min-width: 1440px) {
    :root {
        --max-width: min(87.5rem, calc(100vw - (var(--tt-page-gutter) * 2)));
    }
}

@media (min-width: 1920px) {
    :root {
        --max-width: min(93.75rem, calc(100vw - (var(--tt-page-gutter) * 2)));
    }
}

body {
    background: var(--tt-color-bg);
}

/* Header */
@media (min-width: 901px) {
    .nav-container {
        max-width: none;
        grid-template-columns: minmax(13.75rem, 1fr) auto minmax(13.75rem, 1fr);
        padding-inline: clamp(0.75rem, 1.6vw, 1.5rem);
    }

    .site-branding {
        justify-self: start;
        padding-left: 0;
    }

    .nav-buttons {
        justify-self: center;
    }

    .search-login-container {
        justify-self: end;
        padding-right: 0;
    }
}

.site-header {
    background: var(--tt-color-header);
    box-shadow: 0 1px 0 rgba(var(--tt-color-accent-rgb), 0.18), var(--tt-shadow-sm);
}

.nav-button,
.login-button,
.btn-animated-read-more,
.pagination-btn {
    min-height: 2.25rem;
    line-height: var(--tt-line-ui);
}

.search-login-container {
    gap: clamp(0.4rem, 1vw, 0.75rem);
}

.search-button,
#settings-toggle {
    width: 2.25rem;
    height: 2.25rem;
    background: color-mix(in srgb, var(--tt-color-surface-2) 82%, transparent);
    border-color: var(--tt-color-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.search-button:hover,
#settings-toggle:hover {
    background: var(--tt-color-surface-3);
    border-color: var(--tt-color-accent-bright);
}

.dropdown-menu,
.settings-panel::after,
.live-search-results {
    background: var(--tt-color-surface);
}

/* Shared rails: keep centering explicit instead of forcing one layout everywhere. */
.content-area:not(.content-area-empty-content),
.page-content-wrapper,
.single-post-wrapper,
.search-results-header {
    width: var(--tt-rail-page);
    max-width: none;
    margin-inline: auto;
}

.content-area.content-area-empty-content {
    width: var(--tt-rail-wide);
    max-width: var(--tt-container-wide);
    margin-inline: auto;
    padding-inline: 0;
}

.page-content,
.post-item,
.search-thread-item {
    filter: drop-shadow(var(--tt-shadow-sm));
}

.page-content::before,
.post-item::before,
.search-thread-item::before {
    background: var(--tt-color-accent);
}

.page-content::after,
.post-item::after,
.search-thread-item::after {
    background:
        linear-gradient(rgba(var(--tt-color-accent-rgb), 0.075), rgba(var(--tt-color-accent-rgb), 0.075)),
        var(--tt-color-bg);
}

.page-content {
    padding: clamp(1.5rem, 3vw, 2rem);
}

.entry-header {
    text-align: center;
    margin-inline: auto;
}

.post-title a,
.search-thread-title a {
    text-decoration-thickness: 1px;
}

.post-excerpt,
.post-content,
.search-thread-excerpt {
    max-width: none;
}

.post-thumbnail img {
    border-radius: var(--tt-radius-xs);
}

/* Forms and simple controls in theme pages */
.page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="password"],
.page-content textarea,
.page-content select {
    min-height: 2.5rem;
    background: var(--tt-color-surface);
    border-color: var(--tt-color-border-muted);
    border-radius: var(--tt-radius-xs);
    transition: border-color var(--tt-transition-fast), box-shadow var(--tt-transition-fast);
}

.page-content input[type="text"]:focus,
.page-content input[type="email"]:focus,
.page-content input[type="password"]:focus,
.page-content textarea:focus,
.page-content select:focus {
    outline: none;
    border-color: var(--tt-color-accent-bright);
    box-shadow: var(--tt-focus-ring);
}

.page-content button,
.page-content input[type="submit"] {
    min-height: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Light mode keeps the same product identity instead of becoming a separate beige UI. */
html.light-mode body,
html.light-mode html {
    background-color: var(--tt-color-bg);
}

html.light-mode .site-header {
    background: var(--tt-color-header);
}

html.light-mode .page-content::after,
html.light-mode .post-item::after,
html.light-mode .search-thread-item::after,
html.light-mode .posts-wrapper .post-item.article-deployed .post-header::after {
    background:
        linear-gradient(rgba(var(--tt-color-accent-rgb), 0.055), rgba(var(--tt-color-accent-rgb), 0.055)),
        var(--tt-color-surface);
}

html.light-mode .post-date,
html.light-mode .post-author {
    color: var(--tt-color-text-muted);
}

/* Mobile */
@media (max-width: 600px) {
    :root {
        --tt-page-gutter: 0.875rem;
    }

    .site-header {
        height: var(--header-height);
    }

    .nav-container {
        width: 100%;
    }

    .search-login-container {
        gap: 0.4rem;
    }

    .search-button,
    #settings-toggle {
        width: 2rem;
        height: 2rem;
    }

    .page-content-wrapper,
    .content-area,
    .single-post-wrapper,
    .search-results-header {
        width: 100%;
        padding-inline: var(--tt-page-gutter);
    }

    .content-area.content-area-empty-content {
        padding-inline: 0;
    }

    .page-content,
    .post-item,
    .search-thread-item {
        padding: 1rem;
    }

    .post-title a,
    .search-thread-title a {
        font-size: clamp(1.05rem, 5vw, 1.25rem);
        line-height: 1.35;
    }
}