/* =====================================================================
   maasstad-child: CSS van de MSC-widgets met live-markup (CONTRACTEN.md par. 8).
   Alleen de <style>-blokken die eerst in de Elementor HTML-widgets van
   maasstadcleaning.nl stonden, ongewijzigd en met dezelfde selectors.
   Geen andere regels: bestaande Elementor-selectors worden niet geraakt.
   Bron: _bouw/inventaris/widgets.json (gemaakt met thema_css.py).

   1. .maasstad-faq: FAQ-accordeon van /solliciteren/ (element c9c67db),
      met stappen en highlight.
   2. .mc-faq: FAQ-accordeon van /vacatures-schoonmaak-rotterdam/,
      /cleaning-job-rotterdam/ (beide 94ea2a1) en
      /facilitair-medewerker-rotterdam/ (0720022); de drie zijn gelijk
      op de commentaarregel na.
   De varianten kaarten, items en eenvoudig gebruiken inline styles of
   de Kit-stijlen, precies zoals live, en hebben hier geen regels nodig.
   ===================================================================== */

/* 1. .maasstad-faq (bron /solliciteren/#c9c67db) */
/* FAQ Accordion - Maasstad Cleaning Huisstijl */
.maasstad-faq {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.maasstad-faq__title {
  text-align: center;
  color: #1E3A5F;
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.maasstad-faq__subtitle {
  text-align: center;
  color: #555555;
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  font-weight: 400;
}

.maasstad-faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.maasstad-faq__item {
  background: #ffffff;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.maasstad-faq__item:hover {
  border-color: #1E3A5F;
}

.maasstad-faq__item.active {
  border-color: #1E3A5F;
  box-shadow: 0 4px 15px rgba(30, 58, 95, 0.15);
}

.maasstad-faq__question {
  width: 100%;
  padding: 18px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  color: #333333;
  transition: background-color 0.2s ease;
}

.maasstad-faq__question:hover {
  background-color: #f9f9f9;
}

.maasstad-faq__question:focus {
  outline: none;
  background-color: #f5f5f5;
}

.maasstad-faq__question-text {
  flex: 1;
  line-height: 1.4;
}

.maasstad-faq__icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  background: #1E3A5F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.maasstad-faq__item:hover .maasstad-faq__icon {
  background: #2A4A73;
}

.maasstad-faq__item.active .maasstad-faq__icon {
  transform: rotate(180deg);
  background: #4A90D9;
}

.maasstad-faq__icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: white;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.maasstad-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.maasstad-faq__item.active .maasstad-faq__answer {
  max-height: 600px;
}

.maasstad-faq__answer-content {
  padding: 0 22px 22px 22px;
  color: #555555;
  font-size: 1rem;
  line-height: 1.7;
}

.maasstad-faq__answer-content strong {
  color: #333333;
  font-weight: 600;
}

.maasstad-faq__answer-content ul {
  margin: 12px 0;
  padding-left: 20px;
}

.maasstad-faq__answer-content li {
  margin-bottom: 6px;
}

.maasstad-faq__highlight {
  background: #EDF4FC;
  padding: 14px 16px;
  border-radius: 6px;
  margin-top: 14px;
  border-left: 4px solid #1E3A5F;
  color: #333;
}

.maasstad-faq__highlight-icon {
  margin-right: 8px;
}

/* Process Steps */
.maasstad-faq__steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}

.maasstad-faq__step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.maasstad-faq__step-number {
  background: #1E3A5F;
  color: white;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.maasstad-faq__step-text {
  padding-top: 3px;
}

/* Call-to-Action Section */
.maasstad-faq__cta {
  text-align: center;
  margin-top: 3rem;
  padding: 2.5rem 2rem;
  background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
  border-radius: 12px;
}

.maasstad-faq__cta-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #1E3A5F;
  margin-bottom: 0.5rem;
}

.maasstad-faq__cta-text {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1.5rem;
}

.maasstad-faq__cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.maasstad-faq__cta-button {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  border: none;
}

.maasstad-faq__cta-button--primary {
  background: #4A90D9;
  color: white;
}

.maasstad-faq__cta-button--primary:hover {
  background: #3A7BC8;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74, 144, 217, 0.35);
}

.maasstad-faq__cta-button--secondary {
  background: #1E3A5F;
  color: white;
}

.maasstad-faq__cta-button--secondary:hover {
  background: #2A4A73;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 58, 95, 0.35);
}

/* Responsive */
@media (max-width: 640px) {
  .maasstad-faq {
    margin: 40px auto;
    padding: 0 16px;
  }
  
  .maasstad-faq__title {
    font-size: 1.8rem;
  }
  
  .maasstad-faq__subtitle {
    font-size: 1rem;
  }
  
  .maasstad-faq__question {
    padding: 16px 16px;
    font-size: 0.95rem;
  }
  
  .maasstad-faq__answer-content {
    padding: 0 16px 16px 16px;
    font-size: 0.95rem;
  }
  
  .maasstad-faq__cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .maasstad-faq__cta-button {
    width: 100%;
    max-width: 280px;
  }
}

/* 2. .mc-faq (bron /vacatures-schoonmaak-rotterdam/#94ea2a1) */
/* FAQ Accordion - Maasstad Cleaning Huisstijl */
.mc-faq {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.mc-faq__title {
  text-align: center;
  color: #1E3A5F;
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.mc-faq__subtitle {
  text-align: center;
  color: #555555;
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  font-weight: 400;
}

.mc-faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mc-faq__item {
  background: #ffffff;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.mc-faq__item:hover {
  border-color: #1E3A5F;
}

.mc-faq__item.active {
  border-color: #1E3A5F;
  box-shadow: 0 4px 15px rgba(30, 58, 95, 0.15);
}

.mc-faq__question {
  width: 100%;
  padding: 18px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  color: #333333;
  transition: background-color 0.2s ease;
}

.mc-faq__question:hover {
  background-color: #f9f9f9;
}

.mc-faq__question:focus {
  outline: none;
  background-color: #f5f5f5;
}

.mc-faq__question-text {
  flex: 1;
  line-height: 1.4;
}

.mc-faq__icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  background: #1E3A5F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.mc-faq__item:hover .mc-faq__icon {
  background: #2A4A73;
}

.mc-faq__item.active .mc-faq__icon {
  transform: rotate(180deg);
  background: #4A90D9;
}

.mc-faq__icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: white;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mc-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.mc-faq__item.active .mc-faq__answer {
  max-height: 600px;
}

.mc-faq__answer-content {
  padding: 0 22px 22px 22px;
  color: #555555;
  font-size: 1rem;
  line-height: 1.7;
}

.mc-faq__answer-content strong {
  color: #333333;
  font-weight: 600;
}

.mc-faq__answer-content ul {
  margin: 12px 0;
  padding-left: 20px;
}

.mc-faq__answer-content li {
  margin-bottom: 6px;
}

.mc-faq__answer-content a {
  color: #1E3A5F;
  font-weight: 600;
  text-decoration: none;
}

.mc-faq__answer-content a:hover {
  text-decoration: underline;
}

.mc-faq__highlight {
  background: #EDF4FC;
  padding: 14px 16px;
  border-radius: 6px;
  margin-top: 14px;
  border-left: 4px solid #1E3A5F;
  color: #333;
}

.mc-faq__highlight-icon {
  margin-right: 8px;
}

/* Call-to-Action Section */
.mc-faq__cta {
  text-align: center;
  margin-top: 3rem;
  padding: 2.5rem 2rem;
  background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
  border-radius: 12px;
}

.mc-faq__cta-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #1E3A5F;
  margin-bottom: 0.5rem;
}

.mc-faq__cta-text {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1.5rem;
}

.mc-faq__cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mc-faq__cta-button {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  border: none;
}

.mc-faq__cta-button--primary {
  background: #4A90D9;
  color: white;
}

.mc-faq__cta-button--primary:hover {
  background: #3A7BC8;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74, 144, 217, 0.35);
}

.mc-faq__cta-button--secondary {
  background: #1E3A5F;
  color: white;
}

.mc-faq__cta-button--secondary:hover {
  background: #2A4A73;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 58, 95, 0.35);
}

/* Responsive */
@media (max-width: 640px) {
  .mc-faq {
    margin: 40px auto;
    padding: 0 16px;
  }
  
  .mc-faq__title {
    font-size: 1.8rem;
  }
  
  .mc-faq__subtitle {
    font-size: 1rem;
  }
  
  .mc-faq__question {
    padding: 16px 16px;
    font-size: 0.95rem;
  }
  
  .mc-faq__answer-content {
    padding: 0 16px 16px 16px;
    font-size: 0.95rem;
  }
  
  .mc-faq__cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .mc-faq__cta-button {
    width: 100%;
    max-width: 280px;
  }
}