/* Component styling; colours come from theme.css / theme-dark.css. */

/* Point Bootstrap's own colours at the palette, in both light and dark themes. */
:root[data-bs-theme] {
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-fg);
    --bs-border-color: var(--color-border);
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: var(--color-primary-rgb);
    --bs-link-hover-color: var(--color-primary-hover);
    --bs-link-hover-color-rgb: var(--color-primary-rgb);
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
}

.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}

[data-bs-theme="dark"] .btn-primary {
    /* The light orange needs dark text. */
    --bs-btn-color: #121315;
    --bs-btn-hover-color: #121315;
    --bs-btn-active-color: #121315;
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--color-primary-rgb), .25);
}

/* Timeline: each post is a clearly bounded card. */
.timeline-card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    box-shadow: 0 .125rem .375rem var(--color-card-shadow);
    transition: box-shadow .15s ease, transform .15s ease;
}

.timeline-card:hover {
    box-shadow: 0 .5rem 1.25rem var(--color-card-shadow-hover);
    transform: translateY(-2px);
}

.timeline-card .card-title-link {
    color: var(--color-fg);
}

.timeline-card .card-title-link:hover {
    color: var(--color-primary);
}

.feed-avatar {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    font-size: .8rem;
}

.article-thumb {
    width: 6rem;
    height: 6rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: .5rem;
}

@media (min-width: 768px) {
    .article-thumb {
        width: 8rem;
        height: 8rem;
    }
}

/* Timeline filter and search, carried in the navbar on the home page. */
.navbar-search {
    display: flex;
    flex: 1 1 0;
    gap: .5rem;
    min-width: 0;
    max-width: 36rem;
}

.navbar-search .form-select {
    flex: 0 1 40%;
    min-width: 0;
}

.navbar-search .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

@media (min-width: 992px) {
    .navbar-search {
        /* Fixed basis, or the menu links beside it squeeze it down. */
        flex: 0 1 30rem;
        margin: 0 1rem;
    }
}

@media (max-width: 575.98px) {
    /* Phones: the logo alone identifies the app, leaving the width for the filter. */
    .navbar:has(.navbar-search) .brand-text {
        display: none;
    }
}