/*
 * Bootstrap 4 -> 5.3 look-alike overrides.
 * The site was designed on Bootstrap 4; these rules put back the few
 * Bootstrap 4 defaults that changed in 5 so the page looks the same.
 */

/* Links: Bootstrap 5 underlines by default; Bootstrap 4 only on hover */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.nav-link:hover,
.navbar-brand:hover {
    text-decoration: none;
}

/* Gutters: Bootstrap 4 used 30px, Bootstrap 5 uses 24px */
.container-fluid,
.row {
    --bs-gutter-x: 30px;
}

.g-0 {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

/* Navbar: Bootstrap 5 removed the navbar's own side padding */
#sideNav {
    --bs-navbar-padding-x: 1rem;
    /* Menu text raised from 50% to 75% white for readable contrast (WCAG AA) */
    --bs-navbar-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
}

/* Horizontal rules: match Bootstrap 4's light gray line */
hr {
    color: #000;
    opacity: 0.1;
}

/* Headings: Bootstrap 5 scales h4 with the screen width.
   (Some headings are h3/h4 tags styled as .h4/.h5 so heading levels don't skip.) */
h4,
.h4 {
    font-size: 1.5rem;
}

/* Bootstrap's .h4/.h5 classes would otherwise override resume.css's heading style */
.h4,
.h5 {
    font-family: 'Roboto Slab', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #801519;
}

/* Cards: Bootstrap 4 corner radius, padding and inherited text color */
.card {
    --bs-card-border-radius: 0.25rem;
    --bs-card-inner-border-radius: calc(0.25rem - 1px);
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    color: inherit;
}

.card-body {
    color: inherit;
}

/* Bootstrap 4's "dark" gray and small-text size */
.text-dark {
    color: #343a40 !important;
}

small,
.small {
    font-size: 80%;
}

/* Recently Sold: a row of cards that scrolls sideways (swipe on phones) */
.sold-strip {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.75rem;
}

.sold-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
}

.sold-card .card-img-top {
    height: 190px;
    object-fit: cover;
}

.sold-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    background: #801519;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sold-city {
    color: #6c757d;
}

.sold-price {
    margin-top: 0.5rem;
    font-weight: 700;
}