/* ============================================================
   JKM — footer: one column per row on phones
   (loaded last on all blog-related pages: blog, single posts,
   category, tag, date and author archives)

   WHY THIS FILE EXISTS
   Jupiter already stacks the footer columns correctly at phone
   widths. The problem was ours: the desktop layout rules that
   make widget area 3 span areas 3 and 4 are written with
   !important and NO breakpoint, so they kept forcing 33% / 63%
   / 50% column widths all the way down to 390px.

   Those rules live in:
     jkm-style.css    #mk-footer .mk-col-2-3 > .mk-col-1-3      50%
     jkm-related.css  .footer-wrapper .mk-col-2-3               100%
     jkm-related.css  .mk-col-2-3 > .mk-col-1-3:nth-of-type(1)  33%
     jkm-related.css  .mk-col-2-3 > .mk-col-1-3:nth-of-type(2)  63%

   Rather than add breakpoints in three places (and risk the
   desktop footer regressing), this file overrides them in one
   place at <=767px. The selectors below deliberately carry the
   :nth-of-type qualifier so they outrank the originals on
   specificity, not on load order — the desktop layout is
   untouched above 767px.

   FOOTER STRUCTURE (blog pages)
     .footer-wrapper.mk-grid
       .mk-padding-wrapper
         .mk-col-2-3
           .mk-col-1-3   Studio Location + social      (visible)
           .mk-col-1-3   Products + Categories         (hidden)
           .mk-col-1-3   Products                      (visible)
         .mk-col-1-3     (hidden)
         .clearboth

   Two visible columns today; the rules cover all four so the
   layout still stacks if a hidden widget area is switched on.
   ============================================================ */

@media (max-width:767px){

  /* Every footer column becomes a full-width row. */
  body.jkm-style #mk-footer .footer-wrapper .mk-col-2-3,
  body.jkm-style #mk-footer .footer-wrapper .mk-col-2-3 > .mk-col-1-3,
  body.jkm-style #mk-footer .footer-wrapper .mk-col-2-3 > .mk-col-1-3:nth-of-type(1),
  body.jkm-style #mk-footer .footer-wrapper .mk-col-2-3 > .mk-col-1-3:nth-of-type(2),
  body.jkm-style #mk-footer .footer-wrapper .mk-col-2-3 > .mk-col-1-3:nth-of-type(3),
  body.jkm-style #mk-footer .footer-wrapper .mk-padding-wrapper > .mk-col-1-3,
  body.jkm-style #mk-footer .footer-wrapper [class*="mk-col-"]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    float:none !important;
    display:block !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Do not resurrect the widget areas that are switched off. */
  body.jkm-style #mk-footer .footer-wrapper .mk-col-1-3:has(#categories-3),
  body.jkm-style #mk-footer .footer-wrapper .widget_categories,
  body.jkm-style #mk-footer .footer-wrapper .mk-padding-wrapper > .mk-col-1-3:empty{
    display:none !important;
  }

  /* Air between stacked rows. Applied to the widgets rather than the
     columns so an empty column adds no gap. */
  body.jkm-style #mk-footer .footer-wrapper .widget{
    margin-bottom:34px !important;
  }
  body.jkm-style #mk-footer .footer-wrapper .widget:last-child{
    margin-bottom:0 !important;
  }

  /* The wrapper keeps its own side padding so text is not edge to edge. */
  body.jkm-style #mk-footer .footer-wrapper .mk-padding-wrapper{
    padding-left:20px !important;
    padding-right:20px !important;
  }
}