/*!
 * Bootstrap 3 -> 5 compatibility layer for the Mosaic Initiative theme.
 *
 * The theme was built against Bootstrap 3 and its own 8,000-line style.css
 * targets Bootstrap 3 class names throughout. Bootstrap 5 dropped a number of
 * those classes outright, so rewriting every usage in the markup would mean
 * ~300 edits across 32 templates and would also orphan 74 of the theme's own
 * .panel rules.
 *
 * Instead this file re-implements the handful of Bootstrap 3 base classes that
 * Bootstrap 5 removed, so existing markup and existing theme CSS keep working
 * on top of a genuine Bootstrap 5. Loaded AFTER Bootstrap 5 (now served from jsDelivr) and BEFORE
 * style.css, so the theme's own rules still win.
 *
 * Grid classes are NOT shimmed here -- those were migrated properly in the
 * templates (col-sm-* -> col-md-* etc.) because Bootstrap 5 changed what the
 * breakpoint names mean.
 */

/* ---------------------------------------------------------------------------
   Glyphicons Halflings.
   Bootstrap 3 shipped this @font-face; Bootstrap 5 dropped Glyphicons
   entirely. The font files were still sitting in ../fonts/, but with nothing
   declaring the family the theme's four glyph rules -- the FAQ and Help
   accordion arrows, and the two mobile-menu chevrons -- silently rendered
   nothing at all. Re-declared here so those arrows come back.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Glyphicons Halflings";
  src: url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"),
       url("../fonts/glyphicons-halflings-regular.woff") format("woff"),
       url("../fonts/glyphicons-halflings-regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   Panels  (Bootstrap 5 replaced these with .card)
   The theme uses .panel/.panel-heading/.panel-body in 118 places, including
   the four sidebars registered in functions.php.
   --------------------------------------------------------------------------- */
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-body {
  padding: 15px;
}

.panel-body::after {
  display: block;
  clear: both;
  content: "";
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.panel-heading > .dropdown .dropdown-toggle,
.panel-title,
.panel-title > a {
  color: inherit;
}

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
}

.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.panel-default {
  border-color: #ddd;
}

.panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}

.panel > .list-group,
.panel > .panel-collapse > .list-group {
  margin-bottom: 0;
}

.panel > .list-group .list-group-item {
  border-width: 1px 0;
  border-radius: 0;
}

/* ---------------------------------------------------------------------------
   Jumbotron  (removed outright in Bootstrap 5)
   The home page wraps its "Our vision" band in one; without this the section
   loses its grey background and padding entirely.
   --------------------------------------------------------------------------- */
.jumbotron {
  padding: 30px 15px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee;
}

.jumbotron h1,
.jumbotron .h1 {
  color: inherit;
}

.jumbotron > hr {
  border-top-color: #d5d5d5;
}

@media screen and (min-width: 768px) {
  .jumbotron {
    padding: 48px 0;
  }
  .container .jumbotron {
    padding-right: 60px;
    padding-left: 60px;
    border-radius: 6px;
  }
  .jumbotron h1,
  .jumbotron .h1 {
    font-size: 63px;
  }
}

/* ---------------------------------------------------------------------------
   The off-canvas mobile menu sits between the two header columns in the markup.
   Under Bootstrap 3's float grid it was harmless; under Bootstrap 5's flex .row
   it becomes a flex item and pushes the login/nav column onto its own line.
   Its inner .sidenav is position:fixed, so taking the wrapper out of flow is
   safe and restores the single-line header.
   --------------------------------------------------------------------------- */
.row > .mobile-menu {
  position: absolute;
  width: 0;
  padding: 0;
}

/* ---------------------------------------------------------------------------
   Thumbnails  (removed in Bootstrap 4+)
   --------------------------------------------------------------------------- */
.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
       -o-transition: border .2s ease-in-out;
          transition: border .2s ease-in-out;
}

.thumbnail > img,
.thumbnail a > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}

.thumbnail .caption {
  padding: 9px;
  color: #333;
}

/* ---------------------------------------------------------------------------
   Images  (.img-responsive -> .img-fluid)
   --------------------------------------------------------------------------- */
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.img-rounded {
  border-radius: 6px;
}

.img-circle {
  border-radius: 50%;
}

/* ---------------------------------------------------------------------------
   Container widths.
   Bootstrap 5 introduced an xxl tier, so at a 1440px viewport .container is
   1320px wide where Bootstrap 3 capped it at 1170px. The theme's fixed-pixel
   positioning was designed around the Bootstrap 3 widths, so pin them back.
   --------------------------------------------------------------------------- */
.container {
  width: auto;
  max-width: none;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px)  { .container { width: 750px; } }
@media (min-width: 992px)  { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* ---------------------------------------------------------------------------
   Floats and text alignment  (.pull-* -> .float-*, .text-right -> .text-end)
   These are kept as-is in the markup because the theme's own CSS also targets
   them; renaming in the templates would orphan those rules.
   --------------------------------------------------------------------------- */
.pull-left  { float: left  !important; }
.pull-right { float: right !important; }

/* Bootstrap 3's .row was float-based, so a floated child inside it moved to the
   right edge. Bootstrap 5's .row is a flex container, where float is ignored
   entirely -- which silently dropped every .pull-right element in the header
   back to the left. Reproduce the intent with flex alignment instead.

   These use logical properties, not margin-left/right. The theme means
   .pull-right as "push to the far end of the row", and on the Arabic site the
   far end is the left. With a physical margin-left:auto the header's login row
   and main nav were shoved to the right in RTL, leaving a wide empty gap down
   the left of the page. margin-inline-start resolves to left in English and
   right in Arabic, so the block lands on the outer edge either way. */
.row > .pull-right,
.row > .col-auto.pull-right {
  margin-inline-start: auto;
}

.row > .pull-left {
  margin-inline-end: auto;
}

/* Same reasoning for the float itself: in a mirrored layout .pull-right should
   mean the end of the line, which is physically left under RTL. */
[dir="rtl"] .pull-left  { float: right !important; }
[dir="rtl"] .pull-right { float: left  !important; }

/* Same problem one level down: the theme floats elements inside columns that
   Bootstrap 5 now lays out with flex (for example the sticky header bar). */
.sticky-main-menu .container,
.header-login,
.top-login {
  display: block;
}

.text-left   { text-align: left   !important; }
.text-right  { text-align: right  !important; }
.text-center { text-align: center !important; }

/* Mirror them under RTL, the way Bootstrap 3's RTL builds did. */
[dir="rtl"] .text-right { text-align: right !important; }
[dir="rtl"] .text-left  { text-align: left  !important; }

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

/* ---------------------------------------------------------------------------
   Responsive visibility  (.hidden-xs etc. were dropped for .d-* utilities)
   Bootstrap 3's xs boundary was 768px, which is Bootstrap 5's md.
   --------------------------------------------------------------------------- */
@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; } }

/* ---------------------------------------------------------------------------
   Forms  (.form-group and .control-label were dropped in Bootstrap 5)
   --------------------------------------------------------------------------- */
.form-group {
  margin-bottom: 15px;
}

.control-label {
  margin-bottom: 5px;
  font-weight: 700;
}

/* .input-group-btn became .input-group in Bootstrap 4+; keep the old wrapper
   behaving like a button addon. */
.input-group-btn {
  display: flex;
  align-items: stretch;
}

.input-group-btn > .btn {
  position: relative;
  z-index: 2;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ---------------------------------------------------------------------------
   Buttons and misc
   --------------------------------------------------------------------------- */
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-default:hover,
.btn-default:focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

/* ---------------------------------------------------------------------------
   Bootstrap 3 typography defaults the theme's CSS assumes.
   Bootstrap 5 sets its own font stack and a 1rem/1.5 rhythm; the theme was
   written against Bootstrap 3's 14px/1.42857143.
   --------------------------------------------------------------------------- */
body {
  font-size: 14px;
  line-height: 1.42857143;
}

/* Bootstrap 5 removes the default heading margin-top that the theme relies on
   for vertical rhythm inside panels and articles. */
h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; }
h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; }

/* Bootstrap 5's reboot makes labels display:inline-block and adds
   margin-bottom to legends; Bootstrap 3 did neither. */
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
}

/* Bootstrap 5 gives .row negative margins via CSS variables and adds default
   gutter padding to columns. Bootstrap 3 used fixed 15px. Normalise so the
   theme's own fixed-pixel offsets keep lining up. */
.row {
  --bs-gutter-x: 30px;
}