/*
 * The only hand-written stylesheet. Everything else is the original design,
 * extracted and purged. This covers the two places we deliberately changed:
 * icon fonts became an SVG sprite, and the interactive states are now driven
 * by our own JS instead of Bootstrap's.
 */

/* Icon sizing lives in the generated icons.css - each icon gets the em width
   its viewBox implies, because an inline <svg> with `width:auto` falls back
   to 300px rather than to its own aspect ratio. */

/* --- off-canvas menu ---------------------------------------------------- */
body.offcanvas-active .offcanvas-overlay {
  opacity: 1;
  visibility: visible;
}
.offcanvas-overlay {
  position: fixed;
}

/* --- modal -------------------------------------------------------------- */
.modal.show {
  background: rgba(0, 0, 0, 0.5);
}
body.modal-open {
  overflow: hidden;
}

/* --- slider ------------------------------------------------------------- */
.sp-slider-outer-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.sp-slider [data-layer="true"] {
  will-change: opacity, transform;
}

/* --- scroll-up ---------------------------------------------------------- */
.sp-scroll-up {
  display: none;
}

/* --- accordion ---------------------------------------------------------- */
.sppb-panel-heading {
  cursor: pointer;
}

/* --- contact form status ------------------------------------------------ */
.sppb-ajax-contact-status {
  margin-top: 10px;
}
.sppb-ajax-contact-status.sppb-text-success { color: #1a7f37; }
.sppb-ajax-contact-status.sppb-text-danger  { color: #c92a2a; }

/* --- share control ------------------------------------------------------ */
/* Sits beside the article heading and opens a small menu. */
.article-header.kia-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.article-header.kia-head h1 { flex: 1; margin-right: 0; }

.kia-share { position: relative; flex: none; }

.kia-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--primary_color, #ff5351);
  border-radius: 4px;
  background: transparent;
  color: var(--primary_color, #ff5351);
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.kia-share-btn:hover,
.kia-share-btn[aria-expanded="true"] {
  background: var(--primary_color, #ff5351);
  color: #fff;
}

.kia-share-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 200px;
  padding: 6px;
  background: #fff;
  border: 1px solid #e3e5ea;
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(20, 22, 30, .16);
}
.kia-share-menu[hidden] { display: none; }
.kia-share-menu a,
.kia-share-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #212129;
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.kia-share-menu a:hover,
.kia-share-menu button:hover { background: #f2f3f6; color: #212129; }
.kia-share-menu .fab,
.kia-share-menu .fas { flex: none; width: 16px; }

@media (max-width: 575.98px) {
  .article-header.kia-head { flex-wrap: wrap; }
  .kia-share-label { display: none; }
}

/* --- card rows ---------------------------------------------------------- */
/* Cards in the same row all take the height of the tallest one in that row,
   so their edges line up. A wrapped row gets its own height. The class is
   put on by site.js, which knows which rows actually hold cards - a blanket
   rule here would also stretch or squash columns that hold a background
   image or a single paragraph. */
/* the page builder centres these rows through an id selector, which no class
   can outrank - this is the one place the override has to be forced */
/* Tops line up here; the heights themselves are set by site.js, which
   measures each wrapped line and gives its cards the tallest one's height.
   Doing it in CSS would mean a chain of `height: 100%` through four wrappers,
   and that only holds while every one of them has a definite height. */
.sppb-row.kia-equal { align-items: stretch !important; }

/* blog cards on the home page line up the same way */
.ublog .article-list > .row { align-items: stretch; }
.ublog .article-list > .row > [class*="col-"] { display: flex; }
.ublog .article-list > .row > [class*="col-"] > .article,
.ublog .article-list > .row > [class*="col-"] > .article > .article-container { width: 100%; }

/* --- tab strip ---------------------------------------------------------- */
/* the Work Process tabs had no gap, so they read as one block */
.sppb-nav.sppb-nav-pills { gap: 8px; }

/* --- counters ----------------------------------------------------------- */
/* long labels used to touch the divider between columns */
.sppb-addon-animated-number { padding-left: 12px; padding-right: 12px; }

/* --- buttons ------------------------------------------------------------ */
/* The page builder mixes square and rounded buttons; the design is square,
   so everything follows the square ones. */
.sppb-btn,
.sppb-btn-rounded,
.sppb-btn-round,
.sppb-btn-pills,
.btn { border-radius: 0 !important; }

/* The icon used to sit flush against the first letter. `gap` rather than a
   margin, because a button with only an icon has no second item and so gets
   no extra space - a margin would push it off centre. */
.sppb-btn:has(> i),
.sppb-btn:has(> span[class*="fa-"]),
.btn:has(> i) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* --- image columns ------------------------------------------------------ */
/* A column whose only content is a background image has nothing to give it
   height. On a wide screen the row stretches it against its neighbour; once
   the columns stack there is no neighbour left, so it needs its own. */
@media (max-width: 991.98px) {
  .sppb-column.kia-imgcol { min-height: 260px; }
}

/* --- slider arrows ------------------------------------------------------ */
.kia-slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 22, 30, .35);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s, background .25s;
}
.sp-slider:hover .kia-slider-arrow,
.kia-slider-arrow:focus-visible { opacity: 1; }
.kia-slider-arrow:hover { background: rgba(20, 22, 30, .65); }
.kia-slider-prev { left: 24px; }
.kia-slider-next { right: 24px; }

.kia-slider-arrow::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  background-color: currentColor;
  -webkit-mask: url(/assets/icons/fa-chevron-left.svg) no-repeat center / contain;
  mask: url(/assets/icons/fa-chevron-left.svg) no-repeat center / contain;
}
.kia-slider-next::before {
  -webkit-mask-image: url(/assets/icons/fa-chevron-right.svg);
  mask-image: url(/assets/icons/fa-chevron-right.svg);
}

@media (max-width: 991.98px) {
  /* a thumb swipes instead; arrows would sit on top of the text */
  .kia-slider-arrow { display: none; }
}

/* --- carousel arrows ---------------------------------------------------- */
.kia-carousel-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.kia-carousel-arrow {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(128, 128, 128, .35);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s, opacity .2s;
}
.kia-carousel-arrow:hover { border-color: currentColor; background: rgba(128, 128, 128, .12); }
.kia-carousel-arrow.swiper-button-disabled { opacity: .3; cursor: default; }
.kia-carousel-arrow::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 auto;
  background-color: currentColor;
  -webkit-mask: url(/assets/icons/fa-chevron-left.svg) no-repeat center / contain;
  mask: url(/assets/icons/fa-chevron-left.svg) no-repeat center / contain;
}
.kia-carousel-next::before {
  -webkit-mask-image: url(/assets/icons/fa-chevron-right.svg);
  mask-image: url(/assets/icons/fa-chevron-right.svg);
}

/* --- language flags ----------------------------------------------------- */
/* Same two flags the template always showed, just drawn from SVG and a size
   that can actually be hit with a thumb. */
.mod-languages .lang-inline { display: flex; align-items: center; gap: 4px; margin: 0; }
.mod-languages .lang-inline > li { list-style: none; }

.mod-languages .lang-inline > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 6px;
  border-radius: 4px;
}
.mod-languages .lang-inline > li > a:hover { background: rgba(255, 255, 255, .12); }

.mod-languages .lang-inline img {
  display: block;
  width: 26px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

/* --- floating buttons --------------------------------------------------- */
.float {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  text-decoration: none;
}
.float .my-float { margin: 0; }

@media (max-width: 991.98px) {
  /* one floating control is enough on a phone; the browser has a scroll bar */
  .sp-scroll-up { display: none !important; }

  /* thumbs reach the right-hand side more easily */
  .float {
    left: auto;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    font-size: 30px;
  }
}

/* --- touch targets ------------------------------------------------------ */
/* Links in the footer and the slide-out menu were ~24px tall, which is a
   fiddly target on a phone. */
@media (max-width: 991.98px) {
  /* Padding rather than a flex box: these links carry a `::before` arrow that
     is positioned against the original inline layout, and turning the link
     into a flex container pushes the arrow out of place. */
  #sp-bottom ul:not(.social-icons):not(.lang-inline) > li > a,
  .offcanvas-menu .menu > li > a {
    padding-top: 5px;
    padding-bottom: 5px;
  }

}

/* The list marker is absolutely positioned against the top of its item, so it
   drifts above the text - and drifts further once the item grows for touch.
   Centring it keeps the arrow on the same line as the words at any size. */
#sp-bottom ul:not(.social-icons):not(.lang-inline) > li::before {
  top: 50%;
  transform: translateY(-50%);
}

/* --- footer social icons ------------------------------------------------ */
/* The links were inline-block, so icons of different heights sat on the text
   baseline and stepped up and down like a staircase. A flex row lines them up
   and gives each one the same square. */
.sppb-addon-ut-social-links .sppb-addon-content,
ul.social-icons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}
ul.social-icons > li { list-style: none; margin: 0; }

.sppb-addon-ut-social-links .sppb-addon-content > a,
ul.social-icons > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
}
.sppb-addon-ut-social-links .sppb-addon-content > a > i,
ul.social-icons > li > a > i,
ul.social-icons > li > a > span { flex: none; }

/* --- footer logo -------------------------------------------------------- */
#sp-bottom .sppb-addon-single-image-container img { width: 120px; height: auto; }

/* --- footer contact list ------------------------------------------------ */
/* The address, mail and phone blocks sat twice as far apart as the link
   columns beside them. Match the rhythm of those lists. */
#sp-bottom .addon-root-feature { margin-bottom: 15px; }
#sp-bottom .addon-root-feature .sppb-addon-feature { margin-bottom: 0; }

/* --- footer on small screens -------------------------------------------- */
@media (max-width: 767.98px) {
  #sp-bottom .sppb-section { padding-top: 40px !important; padding-bottom: 10px !important; }
  #sp-bottom [class*="sppb-col-"] { margin-bottom: 26px; }
  #sp-bottom .sppb-addon-title { margin-bottom: 12px; }

  /* the copyright line sat under the floating button */
  #sp-footer { padding-bottom: 84px; }
  #sp-footer .sp-column { text-align: center; }
}

/* the honeypot must be reachable by bots and invisible to everyone else */
.kia-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* post body: was keyed off microdata, now a class (structured data moved to JSON-LD) */
.article-details .article-body,.article-details div[itemprop="articleBody"]{font-size:16px;overflow:hidden}

/* visa calculator call-out under visa articles */
.kia-calc-cta{display:flex;align-items:center;gap:20px;margin:36px 0 10px;padding:24px 26px;background:#212129;color:#a4acb3}
.kia-calc-cta__icon{font-size:30px;color:var(--primary_color,#ff5351);flex-shrink:0}
.kia-calc-cta__text{flex:1;display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.5}
.kia-calc-cta__text strong{color:#fff;font-size:18px}
.kia-calc-cta .sppb-btn{flex-shrink:0;white-space:nowrap}
@media (max-width:767.98px){.kia-calc-cta{flex-direction:column;align-items:flex-start}.kia-calc-cta .sppb-btn{width:100%;text-align:center}}