/* Shared additions for the merged Retio Support site (manual + firmware update). */

.site-topnav .nav-link {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-weight: 600;
}

.site-topnav .nav-link.active {
    color: #3c4858;
    box-shadow: inset 0 -2px 0 currentColor;
}

@media (max-width: 575.98px) {
    .navbar-brand { font-size: 1rem; }
    .site-topnav .nav-link { padding-left: 0.4rem; padding-right: 0.4rem; font-size: 0.85rem; }
}

.model-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
}

.model-card {
    display: block;
    padding: 1.5rem;
    border: 1px solid #e5e9f2;
    border-radius: 0.5rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.model-card:hover,
.model-card:focus {
    border-color: #008aff;
    box-shadow: 0 0.5rem 1.5rem rgba(31, 45, 61, 0.1);
    text-decoration: none;
    color: inherit;
}

.model-card h3 { margin-bottom: 0.5rem; }
.model-card p { margin-bottom: 0.75rem; }
.model-card .model-card-cta { font-weight: 600; color: #008aff; }

/* Template draws a 4px purple dot in active nav links; hide it in the top nav. */
.site-topnav .nav-link::before { display: none; }

/* Same sidebar width on every page, and keep content clear of it. */
@media (min-width: 992px) {
    .docs .sidenav { width: 230px; max-width: 230px; }
    .docs .main-content { margin-left: 230px; }
}

.model-card h3 { margin-top: 0 !important; padding-top: 0 !important; }

/* Phones: short nav labels, smaller brand. */
.nav-short { display: none; }
@media (max-width: 575.98px) {
    .nav-long { display: none; }
    .nav-short { display: inline; }
}

.site-topnav .nav-item + .nav-item { margin-left: 1rem; }