/*
Theme Name:   Hello Elementor Child
Theme URI:    https://lipidtools.com/
Description:  Child theme voor Hello Elementor
Author:       JKC Media B.V.
Author URI:   https://lipidtools.com/
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child
*/


.calculator-page {
  width: 100%;               /* neemt volledige schermbreedte */
  margin: 0;
  padding: 0;
  background-color: #fff;    /* wit vlak over de volle breedte */
  color: #222;
  font-family: inherit;
  line-height: 1.7; 
  font-size: 1rem;
  letter-spacing: 0.2px;
}
.calculator-container {
  max-width: 1140px;         /* dezelfde max-breedte als eerder */
  margin: 0 auto;            /* centreren */
  padding: 0 1.5rem;         /* witruimte links en rechts */
}
.calculator-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0;
  border-bottom: 1px solid #e5eaf0;
}

.calculator-icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.calculator-title {
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0;
  color: #111;
  line-height: 1.2;
}

/* Introductietekst */
.calculator-intro {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  font-size: 1.1rem;         /* net wat groter */
  line-height: 1.75;         /* meer ademruimte */
  color: #333;
  font-weight: 400;
}

.calculator-description {
  margin-top: 2rem;
  margin-bottom: 3rem;
  font-size: 1.05rem;        /* iets groter */
  line-height: 1.75;
  color: #222;
}

.calculator-description p {
  margin-bottom: 1.25rem;
}

/* Eventuele subtitels in description */
.calculator-description h2,
.calculator-description h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: #111;
  line-height: 1.3;
}

.calculator-description ul,
.calculator-description ol {
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.calculator-description li {
  margin-bottom: 0.5rem;
}

/* Links in teksten */
.calculator-description a,
.calculator-intro a {
  color: #0056b3;
  text-decoration: underline;
}

.calculator-description a:hover,
.calculator-intro a:hover {
  color: #003d80;
  text-decoration: none;
}

.iframe-wrapper {
  margin: 2rem 0;
  border: none;
  background-color: #fff;
  width: 100%;
}

.calculator-iframe {
  width: 100%;
  height: 70vh;
  border: none;
}

/* Mobile */
@media (max-width: 767px) {
  .calculator-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 0;
  }

  .calculator-icon img {
    width: 48px;
    height: 48px;
  }

  .calculator-title {
    font-size: 1.75rem;
  }

  .calculator-intro {
    margin: 1rem 0;
    font-size: 0.95rem;
  }

  .calculator-description {
    margin-bottom: 2rem;
  }
}