/*
 * bs4-compat.css — The Women's College theme (twc)
 * Loaded straight after Bootstrap 5 and before the theme CSS.
 * Puts back the Bootstrap 4.3.1 defaults the theme was designed against,
 * so the site looks identical after the Bootstrap 4 -> 5 upgrade.
 */

/* ---- Reboot / typography (BS4 values) ---- */
:root { scroll-behavior: auto; }
body { font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; color: inherit; }
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }
a { color: #007bff; text-decoration: none; background-color: transparent; }
a:hover { color: #0056b3; text-decoration: underline; }
a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { color: inherit; text-decoration: none; }
hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0,0,0,.1); color: gray; opacity: 1; box-sizing: content-box; height: 0; overflow: visible; }
ol, ul { padding-left: 0; } /* BS5 adds 2rem; under BS4 the theme's * {padding:0} reset applied */
dl, ol, ul { margin-top: 0; margin-bottom: 1rem; }
label { display: inline-block; margin-bottom: .5rem; }
legend { float: none; display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; }
small, .small { font-size: 80%; font-weight: 400; }
mark, .mark { padding: .2em; background-color: #fcf8e3; }
blockquote { margin: 0 0 1rem; }
th { text-align: inherit; }
caption { padding-top: .75rem; padding-bottom: .75rem; color: #6c757d; text-align: left; caption-side: bottom; }
button, input, optgroup, select, textarea { line-height: inherit; }
abbr[title], abbr[data-original-title] { text-decoration: underline dotted; cursor: help; border-bottom: 0; }
code { font-size: 87.5%; color: #e83e8c; }
sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
img { vertical-align: middle; border-style: none; }
svg { overflow: hidden; vertical-align: middle; }
[type="search"] { outline-offset: -2px; -webkit-appearance: none; }
::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }

/* ---- Grid: BS4 gutters (30px) and container widths (no 1320px xxl step) ---- */
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .row { --bs-gutter-x: 30px; }
@media (min-width: 1400px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1140px; }
}
.col, [class^="col-"], [class*=" col-"] { position: relative; min-height: 1px; }
/* BS4 gave every column 15px padding and width:100% even outside a .row; BS5 only pads .row children.
   Element-level specificity: beats the theme's * {padding:0} reset (as BS4 did) but loses to any BS5 column width or theme class rule. */
:where(:not(.row)) > :where(.col, [class^="col-"], [class*=" col-"]):is(div, main, aside, section, article, nav, form, header, footer, li, ul, p, span, a, figure) { width: 100%; padding-right: 15px; padding-left: 15px; }
/* BS5 forces every direct child of .row to width:100%; BS4 left non-column children alone */
.row > :where(:not([class^="col"]):not([class*=" col"])) { flex-shrink: 1; width: auto; max-width: none; padding-right: 0; padding-left: 0; margin-top: 0; }
.g-0 > *, .no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }
.no-gutters { --bs-gutter-x: 0; margin-right: 0; margin-left: 0; }

/* ---- Components the theme uses ---- */
.btn { border-radius: .25rem; }
.btn-lg { border-radius: .3rem; }
.btn-sm { border-radius: .2rem; }
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: .5rem; }
.form-control { border-radius: .25rem; }
.form-control:not(textarea):not([multiple]):not([size]) { height: calc(1.5em + .75rem + 2px); }
.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }
.form-row > .col, .form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; }
.form-group { margin-bottom: 1rem; }
.form-inline { display: flex; flex-flow: row wrap; align-items: center; }
.input-group-append, .input-group-prepend { display: flex; }
.close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; }
.close:hover { color: #000; text-decoration: none; }
.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus { opacity: .75; }
button.close { padding: 0; background-color: transparent; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.modal-header .close { padding: 1rem; margin: -1rem -1rem -1rem auto; }
.modal-dialog { max-width: 500px; margin: 1.75rem auto; }
.modal-lg, .modal-xl { max-width: 800px; }
@media (max-width: 575.98px) { .modal-dialog { margin: .5rem; } }
@media (min-width: 992px) { .modal-lg, .modal-xl { max-width: 800px; } }
@media (min-width: 1200px) { .modal-xl { max-width: 1140px; } }
.modal-content { border-radius: .3rem; color: inherit; }
.card, .list-group-item, .toast, .popover-body { color: inherit; }
.modal-backdrop.show { opacity: .5; }
.dropdown-menu { font-size: 1rem; color: #212529; }
.nav-link { color: inherit; }
a.nav-link { color: #007bff; }
a.nav-link:hover { color: #0056b3; }

/* ---- BS4 utility classes that BS5 renamed or removed (kept for page content in the database) ---- */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }
.pr-0 { padding-right: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-light { font-weight: 300 !important; }
.font-italic { font-style: italic !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.border-left { border-left: 1px solid #dee2e6 !important; }
.border-right { border-right: 1px solid #dee2e6 !important; }
.embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; }
.embed-responsive::before { display: block; content: ""; }
.embed-responsive-16by9::before { padding-top: 56.25%; }
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }
.media { display: flex; align-items: flex-start; }
.media-body { flex: 1; }