/*
 * Bootstrap 4 -> 5 compatibility layer for the NewsEdge template.
 * Restores the Bootstrap 4 pieces the template's markup and style.css still rely on,
 * so the design looks the same on Bootstrap 5.
 */

/* Grid: Bootstrap 4 used 30px gutters, Bootstrap 5 defaults to 1.5rem (24px). */
.container,
.container-fluid,
.row {
    --bs-gutter-x: 30px;
}

/* Container: keep the Bootstrap 4 max width instead of the new 1320px xxl breakpoint. */
@media (min-width: 1400px) {
    .container {
        max-width: 1140px;
    }
}

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

a:hover {
    text-decoration: underline;
}

/* Media object: removed in Bootstrap 5. */
.media {
    display: flex;
    align-items: flex-start;
}

.media-body {
    flex: 1;
}

/* Form group: removed in Bootstrap 5. */
.form-group {
    margin-bottom: 1rem;
}

/* Close button: replaced by .btn-close in Bootstrap 5. */
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

button.close {
    padding: 0;
    background: transparent;
    border: 0;
    appearance: none;
}

/* Form controls and buttons: Bootstrap 4 used tighter padding and a 1.25 line height. */
.form-control {
    padding: .5rem .75rem;
    line-height: 1.25;
}

.btn {
    --bs-btn-padding-y: .5rem;
    --bs-btn-line-height: 1.25;
    white-space: nowrap;
}

/* Borders: the template ships its own .border-bottom (a 1px :before line) that Bootstrap 5's new utility would double up. */
.border-bottom {
    border-bottom: 0 !important;
}

/* Bootstrap 4's .border color. */
:root {
    --bs-border-color: #e9ecef;
}

/* Columns: Bootstrap 4 gave every column a 1px minimum height, so empty columns still took up space. */
.col,
[class^="col-"],
[class*=" col-"] {
    min-height: 1px;
}