/* keysolvers.com — additions on top of the Divi theme's own stylesheets.
   Kept in one file so everything not inherited from WordPress is visible in one
   place, and a Divi stylesheet is never edited in situ. */

/* --- mobile menu -------------------------------------------------------- */
/* Divi styles .et_mobile_menu already; it only needs to be revealed when open. */
#et_mobile_nav_menu .mobile_nav.opened .et_mobile_menu { display: block; }
#et_mobile_nav_menu .mobile_nav { cursor: pointer; }
#et_mobile_nav_menu .et_mobile_menu { text-align: left; }
#et_mobile_nav_menu .et_mobile_menu li a { padding: 10px 5%; display: block; }

@media (max-width: 980px) {
  /* --- sticky header -----------------------------------------------------
     Divi fixes the header on desktop but explicitly unfixes it under 980px
     (.et_fixed_nav #main-header {position:absolute}), so it needs to be beaten on
     specificity, not just declared. Nothing shifts: the header is already out of
     flow at top:0 and the hero's own padding accounts for its height, so switching
     absolute -> fixed only changes what happens on scroll. */
  body.et_fixed_nav #main-header,
  #main-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999;
  }

  /* --- footer ------------------------------------------------------------
     The three footer columns stack on a phone, which left the address block,
     the logo and the two links each aligned differently. Centre them once
     stacked; the desktop three-column alignment is untouched. */
  footer .et_pb_column,
  footer .et_pb_text_inner,
  footer .et_pb_text_inner p { text-align: center !important; }
  /* The logo is an inline <span> wrapper, so it centres by text-align on its
     container — making the wrapper a block just left-aligns the image inside it. */
  footer .et_pb_image { text-align: center !important; }
  footer .et_pb_image .et_pb_image_wrap { display: inline-block; }
}

/* --- reviews: consistent stacking + readable video size on phones ---------
   Desktop keeps its alternating photo/quote zig-zag; only the stacked view is
   normalised, always photo then quote. */
@media (max-width: 980px) {
  .et_pb_row.ks-stack { display: flex; flex-direction: column; }
  .et_pb_row.ks-stack .ks-photo { order: 1; }
  .et_pb_row.ks-stack .ks-quote { order: 2; }

  /* The video modules carry a 60% width from the desktop design, which leaves the
     testimonials about 187px wide on a phone. Divi's fluid-width-video-wrapper
     keeps the aspect ratio, so widening the module is all that is needed. */
  .et_pb_video,
  .et_pb_video .et_pb_video_box { width: 100% !important; max-width: 100% !important; }
}