/*!
 * Unified Systems template — Bootstrap 3 / YT-framework compatibility
 * Covers the legacy classes found in existing article + module content (Nov 2026 audit).
 * Toggle off in the template style ("Bootstrap 3 compatibility CSS") once content is refreshed.
 */

/* Grid: BS3 col-xs-* applied at all widths (BS5 col-sm/md/lg already exist) */
.row > [class*="col-xs-"] { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); }
.row > .col-xs-1 { flex: 0 0 auto; width: 8.333333%; }
.row > .col-xs-2 { flex: 0 0 auto; width: 16.666667%; }
.row > .col-xs-3 { flex: 0 0 auto; width: 25%; }
.row > .col-xs-4 { flex: 0 0 auto; width: 33.333333%; }
.row > .col-xs-5 { flex: 0 0 auto; width: 41.666667%; }
.row > .col-xs-6 { flex: 0 0 auto; width: 50%; }
.row > .col-xs-7 { flex: 0 0 auto; width: 58.333333%; }
.row > .col-xs-8 { flex: 0 0 auto; width: 66.666667%; }
.row > .col-xs-9 { flex: 0 0 auto; width: 75%; }
.row > .col-xs-10 { flex: 0 0 auto; width: 83.333333%; }
.row > .col-xs-11 { flex: 0 0 auto; width: 91.666667%; }
.row > .col-xs-12 { flex: 0 0 auto; width: 100%; }

/* Floats + helpers */
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.pull-left + * { overflow: hidden; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.btn-default { color: var(--us-navy); background: #fff; border: 1.5px solid var(--us-navy); }

/* Responsive visibility (BS3 breakpoints) */
@media (max-width: 767.98px) { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } }
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
@media (max-width: 767.98px) { .visible-xs { display: block !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .visible-sm { display: block !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .visible-md { display: block !important; } }
@media (min-width: 1200px) { .visible-lg { display: block !important; } }

/* Panels -> card look */
.panel { background: #fff; border: 1px solid var(--us-line); margin-bottom: 1rem; }
.panel-heading { padding: 12px 16px; background: var(--us-cream-deep); border-bottom: 1px solid var(--us-line); }
.panel-title { margin: 0; font-size: 1.0625rem; }
.panel-title a { text-decoration: none; display: block; }
.panel-body { padding: 16px; }
.panel-body > :last-child { margin-bottom: 0; }

/* YT framework leftovers */
.yt-list { list-style: none; padding-left: 0; }
.yt-list li { position: relative; padding-left: 1.75em; }
.yt-list.type-check li::before {
  content: ""; position: absolute; left: .2em; top: .45em; width: .45em; height: .8em;
  border-right: 2px solid var(--us-gold); border-bottom: 2px solid var(--us-gold); transform: rotate(45deg);
}

/* BS3 collapse state: BS3 used .in where BS5 uses .show (e.g. Unicart Errors accordion, article 244) */
.collapse.in { display: block; }
.panel-heading .panel-title a { cursor: pointer; }