/* Additions to the old theme for the WM6 version of the site. */

/* home: welcome title (was an inline style) */
.wel-content h1 {
  margin-top: 25px;
}

/* home slider: badge under the button (the old markup set width="300px") */
.nhs-caption .slide-badge {
  display: inline-block;
  max-width: 100%;
  width: 300px;
}
.nhs-caption2 .slide-badge {
  width: 500px;
}

/* boat boxes: CMS images are not cropped, the old thumbnails were */
.family-img .image-gallery a.single-gallery img {
  max-width: 100%;
  object-fit: cover;
}
.family-img .image-gallery a.single-gallery.ff-270 img {
  width: 270px;
  aspect-ratio: 270 / 205;
}
.family-img .image-gallery a.single-gallery.ff-210 img {
  width: 210px;
  aspect-ratio: 210 / 420;
}
.family-img .image-gallery a.single-gallery.ff-550 img {
  width: 550px;
  aspect-ratio: 550 / 205;
}
@media (max-width: 1199px) {
  .family-img .image-gallery a.single-gallery.ff-270 img,
  .family-img .image-gallery a.single-gallery.ff-210 img,
  .family-img .image-gallery a.single-gallery.ff-550 img {
    width: 100%;
  }
}

/* boat equipment list: the Htmlarea drops the old lista_03 class, same rules as .lista_03 li in custom.css */
.boat-equipment ul {
  margin: 10px 0 0;
}
.boat-equipment ul li {
  font-size: 15px !important;
  font-style: normal !important;
  color: #777 !important;
  font-family: "Open Sans", sans-serif !important;
  list-style-type: square !important;
  display: list-item !important;
  margin-bottom: 10px;
  line-height: normal !important;
  margin-left: 15px;
}

/* gallery album and itinerary previews: CMS images keep their ratio */
.gallery-page-one .img-holder img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* itinerary attachments */
.itinerario-allegati ul {
  list-style: none;
  padding: 0;
}
.itinerario-allegati li {
  margin-bottom: 5px;
}
.itinerario-allegati .fa {
  margin-right: 6px;
}

/* 404: content centered both ways in the space between menu and footer */
.not-found {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 60px 15px;
  text-align: center;
}
.not-found-content {
  max-width: 750px;
}
.not-found h1 {
  margin: 0 0 20px;
  color: #0e1322;
  font: 700 120px/1 "Open Sans", sans-serif;
}
.not-found-subtitle {
  margin: 0 0 15px;
  color: #0e1322;
  font: 2.43em/1.2em "Playball", sans-serif;
}
.not-found-text {
  margin: 0 0 30px;
  color: #777;
  font-size: 16px;
}
@media (max-width: 767px) {
  .not-found {
    min-height: 0;
  }
  .not-found h1 {
    font-size: 80px;
  }
}

/* contact form: fe() prints bootstrap 5 markup, the theme is bootstrap 3 */
.d-none {
  display: none !important;
}
.input_form .form-floating {
  position: relative;
}
.input_form .form-floating > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.input_form .form-select {
  display: block;
  width: 100%;
}
/* same look and height for every field: the selects have no .form-control, so they missed the theme rules */
.book-left-content form .form-control,
.book-left-content form .form-select {
  display: block;
  width: 100%;
  height: 48px;
  margin-bottom: 0;
  padding: 11px 20px;
  border: 1px solid #e1e1e1;
  border-radius: 0;
  background-color: #fff;
  box-shadow: none;
  font: 400 1.0715em/1.5em 'Open Sans', serif;
  color: #959595;
}
.book-left-content form textarea.form-control {
  height: 203px;
  margin-bottom: 0;
  padding: 15px 20px;
  resize: none;
}
/* the space under the fields sits on the wrapper, so the error message goes right under its field */
.book-left-content form .form-floating {
  margin-bottom: 20px;
}
.book-left-content form .flex-fill.form-floating {
  margin-bottom: 32px;
}
.book-left-content form .form-control::placeholder {
  color: #959595;
  opacity: 1;
}
.input_form .invalid-feedback {
  color: #a94442;
  font-size: 13px;
  line-height: 1.4;
  margin: 5px 0 0;
}
.input_form .invalid-feedback:empty {
  display: none;
}
.book-left-content form .is-invalid {
  border-color: #a94442;
}
.check-privacy .form-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 20px;
}
/* fe() prints the gdpr feedback with d-none outside the class attribute: :empty hides it until there is an error */
.check-privacy .invalid-feedback {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
}
.check-privacy .form-check-input {
  margin: 0;
}
.check-privacy .form-check-label {
  margin: 0;
  font-weight: normal;
}
.check-privacy .gdpr-link {
  cursor: pointer;
}
/* form-processor error under the button: formErrorContent() prints bootstrap 5 markup.
   The .col-12 wrapper does not float, so without clear it covered the floated button column */
.input_form [errorMsgContainerWrapper] {
  clear: both;
  padding: 20px 15px 0;
}
.input_form #errorMsgContainer:focus {
  outline: none;
}
.input_form #errorMsgContainer .alert {
  position: relative;
  margin: 0;
  padding: 12px 40px;
  border-radius: 3px;
  opacity: 1;
  text-align: center;
}
.input_form #errorMsgContainer .btn-close {
  position: absolute;
  top: 50%;
  right: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: 700 22px/1 Arial, sans-serif;
  opacity: 0.6;
  transform: translateY(-50%);
}
.input_form #errorMsgContainer .btn-close:hover {
  opacity: 1;
}
.input_form #errorMsgContainer .btn-close::before {
  content: "\00d7";
}

/* privacy policy: the old h4 section titles are h3 now (one h1, no skipped levels), same look as .privacy h4 in ide.css */
.privacy .nasir-contact h3 {
  color: #0e1322;
  font: 2em "Playball", sans-serif;
  margin: 20px 0 10px;
  padding: 0;
}