/**
 * Parameter Matrix Tables - General Styles
 * Used by all matrix comparison tables across the site
 */

body.page-id-23226437 {
  /* Dark BG behind light text on Demo page-id-23226437 only (to keep white text legible) */
  .parameter-matrix.et_pb_bg_layout_dark {
    --color-gray-800: #202b30;
    background-color: var(--color-gray-800);
  }
}

.entry-content .parameter-matrix {
  --color-primary: #00c59e;
  --color-primary-hover: #00d181;
  --color-gray-900: #0D151F;
  --color-gray-800: #202b30;
  --color-gray-600: #5F6466;
  --color-gray-400: #B0BBBB;

  line-height: 1;
  margin: 0 auto;
  width: 100%;

  h2 {
    font-weight: 300;
    font-size: 28px;
    letter-spacing: 2px;
    margin: 0 0 20px 0;
  }

  table {
    border-collapse: collapse;
    border: none;
    width: 100%;
  }

  th {
    background: var(--color-primary);
    border: 2px solid var(--color-gray-900);
    color: var(--color-gray-800);
    font-weight: 700;
    font-size: 18px;
    padding: 15px 10px;
    text-align: center;
  }

  th small {
    font-weight: 300;
  }

  td {
    padding: 15px 10px;
    text-align: center;
    border: 2px solid var(--color-gray-900);
    background-color: #fff;
    font-size: 16px;
    vertical-align: middle;
  }

  .highlight-cell {
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 30px 20px;
    position: relative;
    border: 0;

    a {
      display: block;
      text-decoration: none;
      color: var(--color-primary);
      font-weight: 800;
      font-size: 18px;
      text-shadow: 0.08em 0.08em 0em var(--color-gray-900);

      &:hover {
        color: var(--color-primary-hover);
      }
    }
  }

  .name-cell {
    background-color: var(--color-gray-900);
    border-bottom-color: var(--color-gray-600);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 18px;
    padding: 20px 10px;
    text-shadow: 0.08em 0.08em 0em var(--color-gray-900);

    a {
      color: var(--color-primary);
      text-decoration: none;

      &:hover {
        color: var(--color-primary-hover);
      }
    }
  }

  .text-left {
    text-align: left;
    font-size: 14px;
  }

  .icon-cell {
    font-size: 40px;

    a {
      color: var(--color-primary);
      text-decoration: none;
      display: inline-block;
      transition: transform 0.2s;

      &:hover {
        transform: scale(1.1);
        color: var(--color-primary-hover);
      }
    }

    .et-pb-icon {
      font-size: 40px;
    }
  }

  .check-cell {
    text-align: center;

    .et-pb-icon {
      font-size: 24px;
      color: var(--color-primary);
    }
  }

  .et-checkmark::before {
    content: '\4e';
  }

  .et-document::before {
    content: '\e058';
  }

  .et-check-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-primary);

    &::before {
      content: '\4e';
      color: #fff !important;
      font-size: 20px;
    }
  }

  .et-check-supporting {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);

    &::before {
      content: '\4e';
      color: var(--color-primary);
      font-size: 18px;
    }
  }

  .et-check-na {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);

    &::before {
      content: '\4d';
      color: var(--color-primary);
      font-size: 20px;
    }
  }
}

/* Responsive */
@media (max-width: 980px) {
  .entry-content .parameter-matrix {
    table {
      font-size: 14px;
    }

    th,
    td {
      padding: 10px 5px;
    }

    h2 {
      font-size: 24px;
    }
  }
}

@media (max-width: 768px) {
  .entry-content .parameter-matrix {
    table,
    thead,
    tbody,
    th,
    td,
    tr {
      display: block;
    }

    thead tr {
      display: none;
    }

    tr {
      margin-bottom: 20px;
      border: 2px solid var(--color-gray-900);
    }

    td {
      text-align: left;
      border: none;
      border-bottom: 1px solid var(--color-gray-400);
      padding: 15px 10px;
    }
    td[data-label]:before {
      content: attr(data-label);
      display: block;
      font-weight: bold;
      color: var(--color-primary);
      margin-bottom: 5px;
      font-size: 12px !important;
      text-transform: uppercase;
    }

    .highlight-cell {
      padding-left: 10px;
      padding-right: 10px;
    }

    .highlight-cell:before {
      content: none;
    }
  }
}