/****** CUSTOM STYLES ******/

/* ==========================================================================
   1. GLOBAL STYLES
   ========================================================================== */

/* Typography - add Chinese font support */
body {
  font-family: "Raleway",
             -apple-system, BlinkMacSystemFont,
             "Helvetica Neue", "Segoe UI", Roboto,
             "Microsoft JhengHei", "Microsoft YaHei",
             Arial, sans-serif;
  overflow: auto !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p {
  font-family: "Raleway",
             -apple-system, BlinkMacSystemFont,
             "Helvetica Neue", "Segoe UI", Roboto,
             "Microsoft JhengHei", "Microsoft YaHei",
             Arial, sans-serif;
}

/* Prevent image overflow */
img {
  overflow: hidden;
}

/* ==========================================================================
   2. LAYOUT UTILITIES
   ========================================================================== */

/* Custom left padding for specific sections (disabled on mobile) */
.padding60 {
  padding-left: 60px;
}

@media (max-width: 767px) {
  .padding60 {
    padding-left: 0;
  }
}

/* Embelish icons - add spacing between 404 page background icons */
.embelish-icons i {
  margin: 0 2px;
}

/* ==========================================================================
   3. COMPONENT STYLES
   ========================================================================== */

/* Modal - allow scrolling */
.modal {
  overflow: auto !important;
}

/* Foundry modal buttons - fixed width */
.foundry_modal .btn {
  width: 200px;
  max-width: 200px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Accordion - increase max-height limit to accommodate long FAQ answers while keeping transition animation */
.accordion li.active .content {
  max-height: 2000px;
}

/* Accordion-2 icon and title alignment */
.accordion-2 .title {
  display: flex;
  align-items: flex-start;
}

.accordion-2 .title:before {
  margin-right: 8px;
  flex-shrink: 0;
  margin-top: 4px;
}

/* FAQ answer text - increase font size, line height and spacing */
.accordion-2 .content p.lead {
  font-size: 1.3em;
  line-height: 1.8;
  padding: 32px 0;
}

/* Photo Transfer tabs - active state color */
.text-tabs .active_photo .tab-title {
  color: #5edcd0;
}

/* Footer social icons */
.social-list {
  margin-top: 16px !important;
}

.social-list a {
  display: inline-block !important;
  margin-right: 22px;
}

@media (max-width: 767px) {
  .social-list a {
    margin-right: 12px;
  }
}

.social-list a i,
.social-list a img {
  font-size: 18px !important;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

/* Image size scaled down */
.img-resize {
  width: auto;
  height: 80px;
  margin-top: 5px;
  margin-bottom: 12px;
}

/* Downloads page - equal height cards using flexbox */
.row-flex {
  display: flex;
  flex-wrap: wrap;
}

.row-flex > [class*="col-"] {
  display: flex;
}

.row-flex .feature.boxed {
  width: 100%;
}

@media (max-width: 767px) {
  .row-flex {
    display: block;
  }
  .row-flex > [class*="col-"] {
    display: block;
  }
}

/* Accordion simple - no icon, no border, centered text */
.accordion-simple .title {
  text-align: center;
  justify-content: center;
  align-items: center;
  border-bottom: none!important;
  font-size: 13px;
}

.accordion-simple .title:before {
  display: none;
}

.accordion-simple .content {
  text-align: center;
}

.accordion-simple .content a {
  pointer-events: auto;
}

/* Dashed underline text */
.underline-dashed {
  border-bottom: 1px dashed #666;
  padding-bottom: 2px;
}

/* Contact form row with background illustration */
.contact-form-bg {
  position: relative;
  background: url('/public/img/contact_bg.png') no-repeat 88% bottom;
  background-size: 330px auto;
}

/* Downloads hero section background */
.downloads-hero-bg {
  background: url('/public/img/downloads_devices.png') no-repeat center center;
  background-size: contain;
  min-height: 320px;
}

/* ==========================================================================
   4. RESPONSIVE STYLES
   ========================================================================== */

/* Menu fine-tuning (< 990px) */
@media (max-width: 990px) {
  .menu li {
    line-height: 36px;
  }
  .nav-last-option {
    margin-bottom: 12px;
  }
  .nav-lang-list {
    margin-top: 12px;
  }
  .nav-open .mobile-toggle {
    border-left: none !important;
  }
  .mobile-toggle {
    border-top: none !important;
  }
}

/* Mobile (< 768px) */
@media all and (max-width: 767px) {
  br {
    display: block;
  }

  /* Hide contact background illustration on mobile */
  .contact-form-bg {
    background: none;
  }

  /* Use mobile-optimized downloads hero image */
  .downloads-hero-bg {
    background-image: url('/public/img/downloads_devices_xs.png');
  }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  /* Shrink contact background illustration on tablet */
  .contact-form-bg {
    background-size: 260px auto;
  }
}

/* Tablet/Small Desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  /* Reduce hero button min-width to allow spacing between buttons */
  a.btn.btn-lg.btn-modal {
    min-width: 185px !important;
  }
}