/*
 * The site's own styles. Loaded after the legacy Flatsome and child-theme CSS, so rules here can
 * replace legacy behaviour step by step. Some rules need !important because the legacy layer
 * also sets inline, id-scoped styles per element (for example `#row-2 > .col > .col-inner`).
 */

/*
 * Product page hero (.swift-pro-hero): heading, intro text and buttons sit in narrow columns
 * (as little as 2/12) from 550px up, which squeezes them on tablets and phones in landscape.
 * Below 1024px every column takes the full width and the buttons line up under the text.
 * The empty first row stays: it clears the transparent header where the image slider is hidden.
 */
@media (max-width: 1023px) {
  .swift-pro-hero .row > .col {
    flex-basis: 100%;
    max-width: 100%;
  }

  .swift-pro-hero .row:has(h1, h2) > .col {
    padding-bottom: 0;
  }

  .swift-pro-hero .row:has(h1, h2) > .col > .col-inner {
    max-width: 720px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    text-align: start;
  }

  .swift-pro-hero .row:has(h1, h2) a.button {
    white-space: nowrap;
  }
}

/*
 * The text and button columns keep the page's own negative top margin (-10% of the column's width),
 * which lifted them beside the heading. Stacked on tablets it pulled them over the heading (Lite
 * pages, en/fr/hk at 768px). Phones keep it: there the theme stacks the columns as designed.
 */
@media (min-width: 550px) and (max-width: 1023px) {
  .swift-pro-hero .row:has(h1, h2) > .col > .col-inner {
    margin-top: 0 !important;
  }
}

/*
 * Configurator pictures: the child theme gives them a fixed height (500px) at full column width, so
 * on phones and tablets they were stretched (a 591x600 picture shown at 284x500). They keep their
 * proportions inside the same box, so nothing moves when another option is chosen.
 */
.configurator-image {
  object-fit: contain;
}

/*
 * Start page hero (.swift_banner.is-full-height): heading and button sit in two rows, each with an
 * empty spacer column. On tablets only the button's spacer was hidden, so the heading stayed in a
 * narrow right-hand column (one word per line) while the button jumped to the far left.
 * On tablets (550-1023px) both spacers go and heading and button share one full-width,
 * left-aligned column. Phones already stack the columns and keep their own margins.
 */
/* The heading sits in a narrow column; even lines instead of a single word left on the last one. */
.swift_banner.is-full-height h1 {
  text-wrap: balance;
}

@media (min-width: 550px) and (max-width: 1023px) {
  .swift_banner.is-full-height .row > .col.medium-8:not(:has(img, video, h1, h2, h3, p, a)) {
    display: none;
  }

  .swift_banner.is-full-height .row > .col.medium-4 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .swift_banner.is-full-height .row > .col.medium-4 > .col-inner {
    margin-left: 0 !important;
  }
}

/*
 * Newsletter signup on the start pages (the section with the HubSpot form): the form sat in an
 * uncentred 8/12 column under a centred heading, and on tablets the three columns (signup, image,
 * Instagram) squeezed the form until even its button text wrapped. The form is now centred, and
 * below 1024px the three columns stack. On a phone it keeps production's 20px from the screen's
 * edges (its row reaches 15px past them, the theme's gutter).
 */
.image_sec:has(.hs-form-frame) .col-inner > .row {
  justify-content: center;
}

@media (max-width: 1023px) {
  .image_sec:has(.hs-form-frame) .row-collapse > .col {
    flex-basis: 100%;
    max-width: 100%;
  }

  .image_sec:has(.hs-form-frame) .col-inner > .row > .col {
    flex-basis: 100%;
    max-width: min(420px, calc(100% - 70px));
  }
}

/*
 * Footer location picker: the child theme styles it through the .language-selector-footer column
 * class, which some languages' footer blocks lack (Arabic), so the picker fell back to a white
 * browser default with a fixed inline width. Styling it by id gives every language the same look.
 */
select#language-selector {
  width: auto !important;
  min-width: 180px;
  background: #535486 url(/wp-content/themes/flatsome-child/landing-page/images/select-arrow-down.png) no-repeat 97% 50%;
  background-size: 20px;
  color: #ffc9bd;
  border: 1px solid #ffc9bd;
  font-weight: 400 !important;
}

[dir='rtl'] select#language-selector {
  background-position: 3% 50%;
}
/*
 * Section titles with lines ("Välj en av följande 5 färger…" on the product pages): on phones the
 * title wraps over several lines and the underline lines under it look broken, so they go.
 */
@media (max-width: 549px) {
  .section-title-normal,
  .section-title-normal span {
    border-bottom: 0;
  }
}

/*
 * Desktop scroll animations (canvas.swift-reveal-lottie, drawn at 1980 × 1080) are stretched to
 * fill the screen. On an iPad in landscape (4:3) that squashes them visibly, so up to 1199px they
 * keep their proportions; the section's dark background fills the space above and below.
 * Only the desktop sections (.hide-for-medium): the phone versions draw portrait frames into the
 * same 1980 × 1080 canvas on purpose and rely on being stretched.
 */
@media (max-width: 1199px) {
  .tesla_sec.hide-for-medium canvas.swift-reveal-lottie {
    object-fit: contain;
  }

  /* The start page's two-lifts animation has a light background; the others are dark. */
  .tesla_sec.hide-for-medium canvas#two-models-lottie-canvas {
    background-color: rgb(250, 245, 242);
  }

  /*
   * Its overlay texts are fixed 350px boxes; the right-hand ones start at 74% of the width and ran
   * off the screen on an iPad. Here they hug the right edge and scale with the screen.
   */
  .two-models-header-left,
  .two-models-text-left {
    width: 26vw;
  }

  .two-models-header-right,
  .two-models-text-right,
  .two-models-button-right {
    left: auto;
    right: 2vw;
    margin-left: 0;
    width: 26vw;
  }

  .two-models-text-left,
  .two-models-text-right {
    font-size: 2.6vw;
  }
}

/*
 * Scroll animation on product pages, phone and tablet version (.tesla_sec.show-for-medium): the
 * texts that fade in over the animation were fixed at 80% of the screen height, so longer texts
 * (the Swedish ones) ran past the bottom edge. They now sit on the bottom edge and grow upwards,
 * over a black fade that keeps them readable where they overlap the animation.
 */
@media (max-width: 849px) {
  .customizable-text-mobile,
  .colorful-text-mobile {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    padding: 48px 5% calc(24px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 48px);
  }

  .customizable-header-mobile,
  .colorful-header-mobile {
    font-size: 2em;
    line-height: 1.15;
    margin-bottom: 0.4em;
  }
}

/*
 * "Which SWIFT is right for you?" comparison table in John's grouped layout (2026): four groups
 * with a heading, rows alternating white and light grey, the Pro column highlighted in pink and
 * plain check marks. The markup comes from studio/.sanity/comparison-table.mjs (op 23); these
 * rules replace the child theme's .swift-comparison-table styles for it.
 */
.swift-comparison-grouped table {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-collapse: collapse;
  table-layout: fixed;
}

.swift-comparison-grouped th,
.swift-comparison-grouped td {
  padding: 10px 14px;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #000;
  vertical-align: middle;
  border: 0 !important;
}

.swift-comparison-grouped td:first-child,
.swift-comparison-grouped th:first-child {
  width: 34%;
  text-align: start;
}

.swift-comparison-grouped td:nth-child(2),
.swift-comparison-grouped td:nth-child(3),
.swift-comparison-grouped th:nth-child(2),
.swift-comparison-grouped th:nth-child(3) {
  width: 33%;
  text-align: center;
}

/* Product names above the columns. */
.swift-comparison-grouped thead th {
  padding-bottom: 4px;
  font-size: 1.1rem;
  font-weight: 700;
}

.swift-comparison-grouped thead th.table-header-pro {
  color: #ff9196;
}

.swift-comparison-grouped thead th.table-header-lite,
.swift-comparison-grouped thead th.table-header-lite p {
  margin: 0;
  color: #1e627a;
  font-weight: 700;
}

/* Group headings. */
.swift-comparison-grouped .swift-comparison-group th {
  padding: 34px 0 10px;
  font-size: 1.3rem;
  font-weight: 700;
  text-align: start;
  background: none;
}

.swift-comparison-grouped thead + tbody .swift-comparison-group th {
  padding-top: 14px;
}

.swift-comparison-grouped tbody td:first-child {
  font-weight: 400;
}

/* Rows: white and light grey in turn within each group (also on the beige sections), the Pro
   column in pink. */
.swift-comparison-grouped tbody tr:not(.swift-comparison-group) td {
  background-color: #fff;
}

.swift-comparison-grouped tbody tr:nth-child(odd):not(.swift-comparison-group) td {
  background-color: #f5f5f5;
}

.swift-comparison-grouped tbody tr:not(.swift-comparison-group) td:nth-child(2) {
  background-color: #fde6e6;
}

.swift-comparison-grouped tbody tr:nth-child(odd):not(.swift-comparison-group) td:nth-child(2) {
  background-color: #fbdcdc;
}

.swift-comparison-grouped .underline-pro::after,
.swift-comparison-grouped .underline-lite::after {
  display: none;
}

.swift-comparison-grouped .swift-check {
  font-size: 1rem;
  line-height: 1;
}

.swift-comparison-grouped .comparison-image {
  margin: 2px;
  vertical-align: middle;
}

/*
 * The table sits in an off-centre 8/12 column with empty 1/12 and 3/12 columns beside it. The table's
 * column takes the full width instead, so the whole table is centred under the section heading.
 */
.row:has(.swift-comparison-grouped) > .col.hide-for-medium {
  display: none;
}

.row:has(.swift-comparison-grouped) > .col:has(.swift-comparison-grouped) {
  flex-basis: 100%;
  max-width: 100%;
}

.row:has(.swift-comparison-grouped) > .col:has(.swift-comparison-grouped) > .col-inner {
  padding-inline: 0 !important;
}

/* Phones: a wider label column and smaller type, so the three columns still fit side by side. */
@media (max-width: 549px) {
  .swift-comparison-grouped th,
  .swift-comparison-grouped td {
    padding: 9px 6px;
    font-size: 0.78rem;
  }

  .swift-comparison-grouped td:first-child,
  .swift-comparison-grouped th:first-child {
    width: 44%;
    padding-inline-start: 8px;
  }

  .swift-comparison-grouped td:nth-child(2),
  .swift-comparison-grouped td:nth-child(3),
  .swift-comparison-grouped th:nth-child(2),
  .swift-comparison-grouped th:nth-child(3) {
    width: 28%;
  }

  .swift-comparison-grouped thead th {
    font-size: 0.9rem;
  }

  .swift-comparison-grouped .swift-comparison-group th {
    padding: 26px 0 8px;
    font-size: 1.05rem;
  }

  .swift-comparison-grouped .comparison-image {
    width: 16px;
    margin: 1px;
  }
}