/*
 * v2: loaded between Bootstrap 5 (CDN) and the theme's site.css.
 * Restores the Bootstrap 3 base values the theme was designed against (it overrides them as before),
 * so the move to Bootstrap 5 keeps the original look.
 */

/* Type: Bootstrap 3 base font, line height, headings, links */
:root {
  --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-body-line-height: 1.42857143;
  --bs-body-color: #333;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
h1, .h1, h2, .h2, h3, .h3 { margin-top: 20px; margin-bottom: 10px; }
h4, .h4, h5, .h5, h6, .h6 { margin-top: 10px; margin-bottom: 10px; }
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
p { margin: 0 0 10px; }
b, strong { font-weight: 700; }
small, .small { font-size: 85%; }
ul, ol { margin-bottom: 10px; padding-left: 40px; }
label { font-weight: 700; margin-bottom: 5px; }
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
.btn:hover, .btn:focus, .page-link:hover, .page-link:focus, .carousel a:hover { text-decoration: none; }
hr { margin: 20px 0; border-top: 1px solid #eee; opacity: 1; }
.lead { margin-bottom: 20px; font-size: 16px; font-weight: 200; line-height: 1.4; }
@media (min-width: 768px) { .lead { font-size: 21px; } }

/* Grid: Bootstrap 3 container widths and 30px gutters (breakpoints kept by the class mapping in modernize.ps1) */
.container, .container-fluid, .row { --bs-gutter-x: 30px; }
.container, .container-fluid { width: auto; max-width: none; }
/* Grid boxes stay border-box even where embedded form CSS resets box-sizing (newsletter page) */
.row, .row > * { box-sizing: border-box; }
@media (min-width: 768px)  { .container { width: 750px; } }
@media (min-width: 992px)  { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
/* A wrapper (form, panel div) between .row and its columns: lay the columns out in a row as the floats did */
.row > :not([class*="col"]):has(> [class*="col-"]) { display: flex; flex-wrap: wrap; }
.row > :where(:not([class*="col"]):has(> [class*="col-"])) { padding-left: 0; padding-right: 0; }
:where(.row > :not([class*="col"]):has(> [class*="col-"])) > * {
  flex-shrink: 0; width: 100%; max-width: 100%;
  padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5);
}
/* A wrapper beside other columns (the news sign-up form): its columns flow in the outer row, as the floats did */
.row > [class*="col-"] ~ :not([class*="col"]):not(.row):has(> [class*="col-"]),
.row > :not([class*="col"]):not(.row):has(> [class*="col-"]):has(~ [class*="col-"]) { display: contents; }
/* A .row placed directly in a .row keeps its negative margins at full width, as in Bootstrap 3 */
.row > .row { width: calc(100% + var(--bs-gutter-x)); max-width: none; }
/* News sign-up panel: its row has a fixed 336 px height; when the opened panel is taller (phones, tablets), the
   Bootstrap 3 float overhung and pushed the next news tiles down - grow the row instead so nothing overlaps */
.blog-entries .row.blog-signup-row { height: auto; min-height: 336px; }
/* Phone/tablet menu: columns are full width here, and as plain blocks (Bootstrap 3) the floated toggle
   button overhangs its column instead of making each row taller. Same for the stacked columns of the
   news sign-up panel, where the paragraph margins collapsed between them */
@media (max-width: 991.98px) {
  .secondary-nav .row, .blog-signup-row .row { display: block; }
  .secondary-nav .row::before, .secondary-nav .row::after { content: " "; display: table; }
  .secondary-nav .row::after { clear: both; }
}
/* Bootstrap 3 columns were positioned (the theme places absolute content inside them) */
:is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12) {
  position: relative;
  min-height: 1px;
}
/* Bootstrap 3 containers cleared their floats */
.container::before, .container::after, .container-fluid::before, .container-fluid::after { content: " "; display: table; }
.container::after, .container-fluid::after { clear: both; }

/* Header logo: Bootstrap 3 navbar-header / navbar-brand (floated left of the menu) */
.navbar-brand { float: left; height: 50px; padding: 15px; margin-right: 0; font-size: 18px; line-height: 20px; color: #00b1b1; }
.container > .navbar-header { margin-left: -15px; margin-right: -15px; }
@media (min-width: 768px) { .navbar-header { float: left; } .container > .navbar-header { margin-left: 0; margin-right: 0; } }

/* Inline lists: Bootstrap 3 spacing */
.list-inline { margin-left: -5px; }
.list-inline-item { padding-left: 5px; padding-right: 5px; }
.list-inline-item:not(:last-child) { margin-right: 0; }

/* Buttons and forms: Bootstrap 3 sizes; primary buttons in the airport teal */
.btn { white-space: nowrap; --bs-btn-font-size: 14px; --bs-btn-padding-x: 12px; --bs-btn-padding-y: 6px; --bs-btn-line-height: 1.42857143; }
.btn-lg { --bs-btn-font-size: 18px; --bs-btn-padding-x: 16px; --bs-btn-padding-y: 10px; }
.btn-primary {
  --bs-btn-bg: #00b1b1; --bs-btn-border-color: #00b1b1;
  --bs-btn-hover-bg: #009798; --bs-btn-hover-border-color: #009798;
  --bs-btn-active-bg: #009798; --bs-btn-active-border-color: #009798;
  --bs-btn-focus-shadow-rgb: 0, 177, 177;
}
button, input, optgroup, select, textarea { color: inherit; font-weight: inherit; }
.form-control {
  height: 34px; font-size: 14px; line-height: 1.42857143; color: #555;
  border-color: #ccc; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.form-control:focus { color: #555; border-color: #66afe9; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); }
textarea.form-control { height: auto; }
.form-group { margin-bottom: 15px; }

/* Tables (Bootstrap 3.1): 20px gap, top cell borders, horizontal scrolling only on phones */
.table { margin-bottom: 20px; --bs-table-bg: transparent; }
.table > :not(caption) > * > * { border-bottom-width: 0; border-top: 1px solid #ddd; vertical-align: top; color: inherit; }
.table > thead > tr > th { vertical-align: bottom; }
/* No top border on the first header row (Parking Information price table) */
.table > thead:first-child > tr:first-child > *, .table > caption + thead > tr:first-child > *, .table > colgroup + thead > tr:first-child > * { border-top: 0; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent; background-color: #f9f9f9; }
@media (min-width: 768px) { .table-responsive { overflow: visible; } }
@media (max-width: 767px) {
  .table-responsive { width: 100%; margin-bottom: 15px; overflow-x: scroll; overflow-y: hidden; border: 1px solid #ddd; }
  .table-responsive > .table { margin-bottom: 0; }
  .table-responsive > .table > * > tr > th, .table-responsive > .table > * > tr > td { white-space: nowrap; }
}

/* Bootstrap 3 capped tables at their container (some content tables have a fixed inline width) */
table { max-width: 100%; }

/* Quotes and the alert close button: Bootstrap 3 styles */
/* "blockquote" is also a content class here (a heading div); Bootstrap 3 had no .blockquote rule */
.blockquote { margin-bottom: 0; font-size: inherit; }
blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee; }
blockquote p:last-child { margin-bottom: 0; }
/* Preformatted text (pasted into the PFAS page list): Bootstrap 3 grey box */
pre {
  display: block; padding: 9.5px; margin: 0 0 10px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 13px; line-height: 1.42857143; word-break: break-all; overflow-wrap: break-word;
  color: #333; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px;
}
.close { float: right; font-size: 21px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .2; }
button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; appearance: none; }
.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; opacity: .5; }
/* Bootstrap 3.1 only knew "alert-dismissable", so the site's "alert-dismissible" had no extra styling */
.alert { padding: 15px; margin-bottom: 20px; border-radius: 4px; }
.alert-dismissible { padding-right: 15px; }

/* Cards replacing Bootstrap 3 panels (news sign-up): 15px padding, transparent border, 4px corners */
.card { --bs-card-spacer-x: 15px; --bs-card-spacer-y: 15px; --bs-card-border-color: transparent; --bs-card-border-radius: 4px; --bs-card-inner-border-radius: 3px; }

/* Pagination: Bootstrap 3 was an inline block (centred by .text-center) with smaller cells */
.pagination > .page-item { display: inline; }
.pagination .page-link { float: left; }
.pagination { display: inline-block; margin: 20px 0; --bs-pagination-border-color: #ddd; --bs-pagination-disabled-border-color: #ddd; --bs-pagination-hover-bg: #eee; --bs-pagination-hover-border-color: #ddd; --bs-pagination-padding-x: 12px; --bs-pagination-padding-y: 6px; --bs-pagination-font-size: 14px; }
.pagination-lg { --bs-pagination-padding-x: 16px; --bs-pagination-padding-y: 10px; --bs-pagination-font-size: 18px; --bs-pagination-border-radius: 6px; }
.page-link { line-height: 1.42857143; }

/* Bootstrap carousel replacing Owl Carousel on operator pages (dots below the image, as before) */
.operator-carousel .carousel-indicators { position: static; height: 27px; align-items: flex-start; margin: 10px 0 0; }
.operator-carousel .carousel-indicators [data-bs-target] {
  width: 10px; height: 10px; margin: 5px 7px; border: 0; border-radius: 30px;
  background-color: #d6d6d6; opacity: 1;
}
.operator-carousel .carousel-indicators .active { background-color: #869791; }

/* Parking widget: browser date input and half-hour time list; "Time" placeholder in placeholder grey */
#parkingWidget input[type="date"] { min-height: 34px; }
select.form-control.form-select { padding-top: 6px; padding-bottom: 6px; padding-left: 12px; }
select.form-select:has(option[value=""]:checked) { color: #999; }
select.form-select option { color: #555; }