/*
 * Vellex static site - small overrides on top of the original template CSS.
 * style.css and libs.css are carried over from the Joomla template unchanged
 * apart from font and image paths. Everything the static version needs that
 * the old JavaScript used to do lives here.
 */

/* Mobile menu: the old script animated these with jQuery; CSS does it now. */
@media only screen and (max-width: 991px) {
  header.open .header-left {
    -webkit-transform: translateX(calc(-100% + 80px));
    transform: translateX(calc(-100% + 80px));
  }
  header.open .btn-toggle {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  /* The template already slides the drawer in from the right (translateX) when
     <header> has the "open" class; it only needs to be scrollable when open. */
  header.open .wrapper-header {
    top: 0;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* The header is fixed on small screens, so push the page content down. */
  main {
    padding-top: 80px;
  }
  .menu ul.sub-menu {
    list-style: none;
  }
}

/* FAQ accordion: answers hidden until the question is clicked. */
[data-accordion] .faqs-list-item-desc {
  display: none;
  padding-bottom: 20px;
}
[data-accordion] .faqs-list-item.active .faqs-list-item-desc {
  display: block;
}

/* Map embeds (Google Maps iframe, no API key or script needed). */
.maps-google iframe {
  width: 100%;
  min-height: 400px;
  border: 0;
  display: block;
}
.transport-map .maps-google iframe {
  min-height: 460px;
}

/* Back-to-top button is now a plain anchor. */
footer .scroll-top .btn-square {
  text-decoration: none;
}

/* Current page highlight in the navigation. */
header .header-menu-left-item > a.current {
  color: #FF7800;
}

/* Items that used to be a carousel on small screens now simply stack. */
@media only screen and (max-width: 991px) {
  .business--code-logo {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
  }
  .business--code-logo .logo-item {
    width: 50%;
    padding: 15px;
    text-align: center;
  }
}

/* Article pages (news items and job ads). */
.article-detail .article-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.article-detail .article-detail-main img {
  max-width: 100%;
  height: auto;
}
.article-detail .article-detail-preview {
  min-width: 260px;
}
@media only screen and (max-width: 991px) {
  .article-detail .article-detail-preview {
    margin-left: 0 !important;
    margin-top: 40px;
  }
}

/* Static forms kept for review: inputs are disabled until a backend exists. */
.static-form-notice {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 4px solid #FF7800;
  background: #FFF4E8;
  font-family: 'OSR', 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: #423d3d;
}