/*
 Theme Name:     Divi Child Theme
 Theme URI:      https://markhendriksen.com
 Description:    Divi Child Theme
 Author:         Mark Hendriksen
 Author URI:     https://markhendriksen.com
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* ----------- Place your custom CSS below this line ------------------ */ 



/* ==========================================================
   Divi Mega Menu – 3 Columns (No Row Gaps) + Correct Indent
   Apply classes to the TOP level menu item:
   mega-menu mega-3-col
   ========================================================== */


/* ----------------------------------------------------------
   1) Mega menu dropdown container padding (this fixes the
      "everything stuck to the left edge" indent issue)
   ---------------------------------------------------------- */
#top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu {
    /* Inner "container" padding */
    padding: 28px 36px !important;

    /* Make sure no other layout mode interferes */
    display: block !important;

    /* Remove default list spacing */
    margin: 0 !important;
    list-style: none !important;
}

/* Also remove indentation inside all nested ULs */
#top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}


/* ----------------------------------------------------------
   2) Force 3 columns using floats (masonry people's version)
   ---------------------------------------------------------- */
#top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu > li {
    float: left !important;
    width: 33.3333% !important;

    /* Critical: prevents forced new rows that create big gaps */
    clear: none !important;

    /* Clean spacing */
    margin: 0 !important;
    padding: 0 34px 22px 0 !important;

    height: auto !important;
    min-height: 0 !important;
}

/* Remove right padding on every 3rd item (right column) */
#top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu > li:nth-child(3n) {
    padding-right: 0 !important;
}

/* Hard override: neutralize any old "new row every 3 items" rules */
#top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu > li:nth-child(3n+1),
#top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu > li:nth-of-type(3n+1) {
    clear: none !important;
}

/* Clear floats so the dropdown UL wraps its floated children */
#top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu::after {
    content: "";
    display: block;
    clear: both;
}


/* ----------------------------------------------------------
   3) Headings (top link in each column block)
   ---------------------------------------------------------- */
#top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu > li > a {
    display: block !important;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;

    border-bottom: 1px solid rgba(0,0,0,0.12);

    padding: 0 0 10px 0 !important;
    margin: 0 0 10px 0 !important;
}

/* Disable click + mute ONLY when heading is empty/# */
#top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu > li > a[href="#"],
#top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu > li > a:not([href]),
#top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu > li > a[href=""] {
    opacity: 0.7;
    pointer-events: none;
    cursor: default;
}

/* Remove arrow from headings (if present) */
#top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu > li > a:after {
    display: none !important;
}


/* ----------------------------------------------------------
   4) Child links (submenu items)
   ---------------------------------------------------------- */
#top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu > li > ul {
    padding: 0 !important;
    margin: 0 !important;
}

#top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu > li > ul > li {
    margin: 0 !important;
    padding: 0 !important;
}

#top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu > li > ul > li > a {
    display: block !important;
    font-weight: 400 !important;

    /* Vertical spacing between child links */
    padding: 6px 0 !important;
    margin: 0 !important;
}


/* ----------------------------------------------------------
   5) Mobile: stack columns
   ---------------------------------------------------------- */
@media (max-width: 980px) {
    #top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu {
        padding: 18px 18px !important;
    }

    #top-menu-nav #top-menu li.mega-menu.mega-3-col > ul.sub-menu > li {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        padding: 0 0 18px 0 !important;
    }
}

/* ==========================================================
   Divi Mobile Menu: "Disabled" styling for placeholder links
   (href="#" or empty)
   ========================================================== */
@media (max-width: 980px) {

  /* LEVEL 1 (top items) */
  #mobile_menu > li > a[href^="#"],
  #mobile_menu > li > a[href=""],
  #mobile_menu > li > a:not([href]),
  .et_mobile_menu > li > a[href^="#"],
  .et_mobile_menu > li > a[href=""],
  .et_mobile_menu > li > a:not([href]),

  /* LEVEL 2 (one submenu deep) */
  #mobile_menu > li > ul.sub-menu > li > a[href^="#"],
  #mobile_menu > li > ul.sub-menu > li > a[href=""],
  #mobile_menu > li > ul.sub-menu > li > a:not([href]),
  .et_mobile_menu > li > ul.sub-menu > li > a[href^="#"],
  .et_mobile_menu > li > ul.sub-menu > li > a[href=""],
  .et_mobile_menu > li > ul.sub-menu > li > a:not([href]) {
    opacity: 0.6;
    cursor: default;
  }
  /* For all levels
  #mobile_menu a[href^="#"],
  #mobile_menu a[href=""],
  #mobile_menu a:not([href]),
  .et_mobile_menu a[href^="#"],
  .et_mobile_menu a[href=""],
  .et_mobile_menu a:not([href]) {
    opacity: 0.6;
    cursor: default;
  }
  */
}