/* ==========================================================================
   Denise Lynne Jackson - front-end fixes
   Paste into: Appearance > Customize > Additional CSS

   1. Hero: on phones the photo becomes a band above the copy instead of
      sitting behind it. 768px and up is left exactly as the site was built.
   2. "Leadership positions" section: no photo at all under 1200px, just the
      blue panel. Avoids two photos stacked back to back on phones.
   3. Board and Executive Experience timeline: ElementsKit Pro 2.3.4 no longer
      ships its timeline stylesheet under Elementor 4.3 / ElementsKit Lite
      4.0.6, so the widget renders unstyled. Restyled here from scratch.
   3b. Timeline hover effect removed.
   ========================================================================== */

/* ---------- 1. Hero ---------- */

/* Phones: photo band on top, copy underneath on the brand blue.
   Her silhouette occupies 16.5% - 46.5% of the source image, so anchoring
   the band at 0% lands her centred in a phone-width crop.                  */
@media (max-width: 767px) {

  .elementor-871 .elementor-element.elementor-element-8c336e1:not(.elementor-motion-effects-element-type-background) {
    background-image: none !important;
    background-color: #536888 !important;
    padding: 0 0 36px 0 !important;
  }
  .elementor-871 .elementor-element.elementor-element-8c336e1 > .elementor-background-overlay { opacity: 0 !important; }
  .elementor-871 .elementor-element.elementor-element-8c336e1 > .elementor-container {
    min-height: 0 !important;
    flex-wrap: wrap !important;
  }
  .elementor-871 .elementor-element.elementor-element-066b977 {
    width: 100% !important;
    min-height: 360px;
    background-image: url("https://deniselynnejackson.com/wp-content/uploads/2023/04/Banner-Image.jpg");
    background-size: cover;
    background-position: 0% center;   /* tweak this one value to re-crop */
    background-repeat: no-repeat;
  }
  .elementor-871 .elementor-element.elementor-element-3c46f4f { width: 100% !important; }
  .elementor-871 .elementor-element.elementor-element-3c46f4f > .elementor-element-populated {
    padding: 26px 22px 0 22px !important;
  }
  .elementor-871 .elementor-element.elementor-element-416c2e1 .elementor-heading-title { font-size: 40px !important; }
}

/* ---------- 2. "Leadership positions" section ---------- */

/* Under 1200px drop the photo entirely and keep the blue panel. The body copy
   in this section is white, so the panel has to stay blue rather than white. */
@media (max-width: 1199px) {
  .elementor-871 .elementor-element.elementor-element-360535a:not(.elementor-motion-effects-element-type-background) {
    background-image: none !important;
    background-color: #536888 !important;
    padding: 44px 0 44px 0 !important;
  }
  .elementor-871 .elementor-element.elementor-element-360535a > .elementor-background-overlay { opacity: 0 !important; }
  .elementor-871 .elementor-element.elementor-element-360535a > .elementor-container {
    min-height: 0 !important;
    flex-wrap: wrap !important;   /* Elementor only wraps at <=1024 on its own */
  }
  .elementor-871 .elementor-element.elementor-element-342b7ea { display: none !important; }
  .elementor-871 .elementor-element.elementor-element-57407ca { width: 100% !important; }
  .elementor-871 .elementor-element.elementor-element-57407ca > .elementor-element-populated {
    padding: 0 22px 0 22px !important;
  }
}
@media (min-width: 600px) and (max-width: 1199px) {
  .elementor-871 .elementor-element.elementor-element-57407ca > .elementor-element-populated {
    padding: 0 40px 0 40px !important;
  }
}

/* justified text on a narrow column makes rivers of white space */
@media (max-width: 767px) {
  .elementor-871 .elementor-element.elementor-element-d4f5095,
  .elementor-871 .elementor-element.elementor-element-80892f1 { text-align: left !important; }
}
@media (max-width: 1199px) {
  .elementor-871 .elementor-element.elementor-element-ea75144 { text-align: left !important; }
}

/* ---------- 3. Board and Executive Experience timeline ---------- */
.elementor-871 .elementor-element.elementor-element-0e705fe .timeline-area {
  position: relative;
  padding: 4px 0 0 0;
}
.elementor-871 .elementor-element.elementor-element-0e705fe .timeline-bar {
  position: absolute !important;
  top: 8px; bottom: 8px; left: 6px;
  width: 1px !important; height: auto !important;
  background-color: rgba(83, 104, 136, .25) !important;
}
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0 26px 30px;
  margin: 0 !important;
}
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline:last-of-type { padding-bottom: 0; }
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline .timeline-info { order: -1; margin: 0 !important; }
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline .timeline-info .date {
  margin: 0 0 2px 0;
  font-size: 16px !important;
  letter-spacing: .04em;
  line-height: 1.3;
  color: #536888 !important;
}
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline .timeline-item { margin: 0; }
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline .timeline-content { text-align: left !important; }
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline .subtitle {
  margin: 0 0 3px 0;
  font-size: 17px !important;
  line-height: 1.4;
  font-weight: 600;
  color: #1c1c1c !important;
}
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline .title {
  margin: 0;
  font-size: 18px !important;
  line-height: 1.35;
  font-style: italic;
}
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline .timeline-content p { margin: 6px 0 0 0; }
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline .timeline-pin { display: none !important; }
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline .timeline-pin-icon {
  position: absolute !important;
  left: 0; top: 5px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background-color: #536888 !important;
  box-shadow: 0 0 0 3px #fff;
}
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline .timeline-pin-icon i { display: none !important; }

@media (min-width: 768px) {
  .elementor-871 .elementor-element.elementor-element-0e705fe .timeline-bar { left: 146px; }
  .elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline { padding: 0 0 30px 176px; }
  .elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline .timeline-info {
    position: absolute; left: 0; top: 0; width: 126px; text-align: right;
  }
  .elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline .timeline-info .date { font-size: 18px !important; }
  .elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline .timeline-pin-icon { left: 140px; }
  .elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline .subtitle { font-size: 18px !important; }
  .elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline .title { font-size: 20px !important; }
}

/* ---------- 3b. Kill the timeline hover effect ---------- */
.elementor-871 .elementor-element.elementor-element-0e705fe .ekit-wid-con .single-timeline:hover .timeline-item,
.elementor-871 .elementor-element.elementor-element-0e705fe .ekit-wid-con .single-timeline:hover .timeline-item .timeline-icon,
.elementor-871 .elementor-element.elementor-element-0e705fe .ekit-wid-con .single-timeline:hover .timeline-content {
  background-color: transparent !important;
}
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline:hover .subtitle,
.elementor-871 .elementor-element.elementor-element-0e705fe .timeline-item:hover .subtitle { color: #1c1c1c !important; }
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline:hover .title,
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline:hover .title a { color: #536888 !important; }
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline:hover .timeline-content p { color: #1c1c1c !important; }
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline:hover .timeline-pin-icon { background-color: #536888 !important; }
.elementor-871 .elementor-element.elementor-element-0e705fe .single-timeline:hover .timeline-info .date { color: #536888 !important; }