/*
 * Bootstrap 3 → 5 compatibility layer.
 *
 * The public template's custom CSS skins Bootstrap 3 class names directly
 * (.panel-*, .navbar-*, visibility helpers), so this file provides the BS3
 * behaviors that markup and CSS still depend on. Loaded immediately after
 * bootstrap.min.css in the frontend layouts. Rules here become deletable
 * as the corresponding markup is modernized.
 */

/* --- BS3 type baseline. The template sets font-family but inherits
       Bootstrap's base size, heading scale/margins, and paragraph/list
       rhythm, all of which changed in BS5's reboot. --- */
body {
    font-size: 14px;
    line-height: 1.42857143;
}

h1, h2, h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

p {
    margin: 0 0 10px;
}

ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

/* BS5's reboot aligns SVGs to middle; the template's inline icons
   (nav chevrons and others) were designed against baseline. */
svg {
    vertical-align: baseline;
}

/* --- BS3 link defaults: #337ab7, underline only on hover. BS5 uses a
       brighter blue with permanent underlines. Component and template
       rules override this where they specify colors. --- */
a {
    color: #337ab7;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #23527c;
    text-decoration: underline;
}

/* --- BS3 columns carried 15px side padding regardless of parent (the
       KB pages nest stray columns and rely on the compounding indent) and
       were all position:relative, which decides paint order where hero
       text overflows onto following sections. --- */
[class^="col-"],
[class*=" col-"] {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

/* --- BS3 input groups were CSS tables sized by content, not flex. --- */
.input-group {
    display: table;
    position: relative;
    border-collapse: separate;
}

.input-group .form-control {
    display: table-cell;
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}

.input-group-btn {
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

.input-group[class*="col-"] {
    float: none;
    padding-right: 0;
    padding-left: 0;
}

/* BS5's .input-group declares width:100% after the grid in the cascade,
   defeating column sizing that BS3 honored (BS3 input groups had no
   width). Re-assert the one column width used with input groups. */
@media (min-width: 1200px) {
    .input-group.col-xl-8 {
        width: 66.66666667%;
    }
}

/* --- The KB/CDN accordions use card classes that were inert under BS3;
       the template CSS is their only intended skin. Neutralize BS5's
       card chrome (template rules re-apply theirs afterwards). --- */
.card {
    margin-bottom: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

.card-header {
    margin-bottom: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

.card-body {
    padding: 0;
}

/* --- Grid metrics: BS3 used 30px gutters and 750/970/1170 containers. --- */
.row {
    --bs-gutter-x: 30px;
}

.container,
.container-fluid {
    --bs-gutter-x: 30px;
}

.container {
    max-width: 100%;
}

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

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

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

/* --- Desktop navbar: the 2025 template styles the nav with its own flex
       layout; the only BS5 conflict is .navbar-nav defaulting to a column.
       Scoped to desktop so vertical mobile menus are unaffected. --- */
@media (min-width: 992px) {
    .navbar .navbar-nav {
        flex-direction: row;
    }

    /* BS5 gives the collapse flex-basis:100%, wrapping the menu onto its
       own line; the template expects brand and menu on one line. */
    .navbar .navbar-collapse {
        flex-basis: auto;
    }

    /* Without a navbar-expand-* class BS5 keeps nav dropdowns position:
       static (in flow), which balloons the navbar on hover. The template
       positions them absolutely itself. */
    .navbar .navbar-nav .dropdown-menu {
        position: absolute;
    }

    /* The hover menus sit 8px below their nav item (margin-top in the
       template CSS); bridge that dead gap so the cursor never leaves
       :hover while travelling into the menu. */
    .navbar .navbar-nav .nav-item .dropdown-menu::before {
        position: absolute;
        top: -12px;
        right: 0;
        left: 0;
        height: 12px;
        content: "";
    }
}

/* --- BS3 navbar metrics: the brand pulls out of the container padding
       and the collapse carries its own 15px side padding. --- */
.navbar > .container .navbar-brand {
    margin-left: -15px;
}

.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
}

/* --- The mobile navbar relies on floated children with no flex parent;
       restore the BS3 clearfix and floats it was built against. --- */
.navbar.navbar-mobile {
    display: block;
}

.navbar.navbar-mobile::after,
.navbar.navbar-mobile .navbar-header::after {
    display: table;
    clear: both;
    content: " ";
}

.navbar.navbar-mobile .navbar-brand {
    float: left;
}

.navbar.navbar-mobile .navbar-toggle {
    float: right;
}

/* --- The 2025 template hides .dropdown-menu via opacity/visibility for
       its hover-driven navbar menus; make JS-opened menus (.show) visible
       everywhere, mirroring the heading-scoped rule in custom.css. --- */
.dropdown-menu.show {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* --- The template's tab items carry both col-* sizing and a .row class;
       under BS5 the li becomes a flex container and its link shrinks to
       its text. BS3's block links filled the li width. --- */
.nav-tabs > .nav-item > .nav-link {
    width: 100%;
}

/* --- BS3's .nav > li > a rule outranked the template's .nav-link flex
       styling; without it links go flex and lose text centering. --- */
.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

/* --- BS5 forces width:100% and gutter padding on every direct row child;
       BS3 left non-column children alone. Keep block children stacking
       (they need the 100%) but zero the injected gutter via its variable
       so component-defined padding still applies, and let naturally-inline
       elements keep their content width. --- */
.row > :not([class*="col-"]):not([class*="offset-"]):not(.nav-link) {
    --bs-gutter-x: 0;
}

.row > a:not([class*="col-"]),
.row > img:not([class*="col-"]),
.row > button:not([class*="col-"]),
.row > span:not([class*="col-"]) {
    width: auto;
}

/* --- The data-centers filter bar relies on BS3's block rows and floated
       children; BS5 rows are flex and force width:100% on non-col children. --- */
.data-center-filter.row {
    display: block;
}

.data-center-filter.row::after {
    display: table;
    clear: both;
    content: " ";
}

.data-center-filter.row > * {
    width: auto;
}

.data-center-filter.row > .dropdown,
.data-center-filter.row > .slider-block {
    padding-right: 0;
    padding-left: 0;
}

/* --- The industry-page "Dedicated Servers" sections place columns in a
       .mobile-center wrapper instead of a .row; BS3 floated them, BS5
       columns need a flex parent. --- */
.mobile-center {
    display: flex;
    flex-wrap: wrap;
}

/* --- BS3 floated the hero title column out of the fixed-height #heading;
       the clearfix div after the hero takes its clearance (the spacing
       between hero and content) from that float. --- */
#heading [class^="col-"],
#heading [class*=" col-"] {
    float: left;
}

/* --- BS3 push/pull column reordering (removed in BS5). Implemented as in
       BS3: relative offsets in column-width percentages. Breakpoints match
       the original BS3 tiers the markup still uses. --- */
[class*="-push-"],
[class*="-pull-"] {
    position: relative;
}

@media (min-width: 768px) {
    .col-sm-push-1 { left: 8.33333333%; }
    .col-sm-push-2 { left: 16.66666667%; }
    .col-sm-push-5 { left: 41.66666667%; }
    .col-sm-push-6 { left: 50%; }
    .col-sm-push-7 { left: 58.33333333%; }
    .col-sm-pull-5 { right: 41.66666667%; }
    .col-sm-pull-6 { right: 50%; }
}

@media (min-width: 992px) {
    .col-md-push-1 { left: 8.33333333%; }
    .col-md-push-2 { left: 16.66666667%; }
    .col-md-push-5 { left: 41.66666667%; }
    .col-md-push-6 { left: 50%; }
    .col-md-push-7 { left: 58.33333333%; }
    .col-md-push-8 { left: 66.66666667%; }
    .col-md-pull-2 { right: 16.66666667%; }
    .col-md-pull-4 { right: 33.33333333%; }
    .col-md-pull-5 { right: 41.66666667%; }
    .col-md-pull-6 { right: 50%; }
}

@media (min-width: 1200px) {
    .col-lg-push-2 { left: 16.66666667%; }
}

/* --- Footer link columns: in BS3 the two ul.col-6 lists inside each
       footer half floated side by side; BS5 columns only flow inside a
       flex row, so flex the halves. --- */
.footer .links > [class*="col-"] {
    display: flex;
    flex-wrap: wrap;
}

/* --- BS5 paints an opaque background on every table cell, hiding the
       row-level colors the template CSS applies. --- */
.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-width: 0;
    box-shadow: none;
}

/* BS3 separated rows with a light top border instead of BS5's dark
   bottom border. */
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
    border-top: 1px solid #ddd;
}

.table > thead > tr > th {
    border-bottom: 2px solid #ddd;
    vertical-align: bottom;
}

.table > thead:first-child > tr:first-child > th,
.table > thead:first-child > tr:first-child > td {
    border-top: 0;
}

/* --- Responsive visibility utilities (BS3 names and breakpoints). --- */
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
    display: none !important;
}

@media (max-width: 767.98px) {
    .visible-xs {
        display: block !important;
    }

    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .visible-sm {
        display: block !important;
    }

    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .visible-md {
        display: block !important;
    }

    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .visible-lg {
        display: block !important;
    }

    .hidden-lg {
        display: none !important;
    }
}

/* --- Utilities removed in BS5. --- */
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

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

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

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

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

/* --- Wells. --- */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

/* --- Default buttons. --- */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

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

.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/* --- Panel structure (the template CSS skins these on top). --- */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-body {
    padding: 15px;
}

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

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

.panel-title > a {
    color: inherit;
    text-decoration: none;
}

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

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

.panel-group {
    margin-bottom: 20px;
}

.panel-group .panel {
    margin-bottom: 0;
    border-radius: 4px;
}

.panel-group .panel + .panel {
    margin-top: 5px;
}