/*======================================
Theme Name: AboveMedia
Theme URI: https://divicake.com/
Description: A bespoke website by AboveMedia
Version: 1.0
Author: AboveMedia
Author URI: https://AboveMedia.co.uk
Template: Divi
======================================*/


/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */
/*====== FIXED DROPDOWN WIDTH & HOVER (MATCH ORIGINAL SITE) ======*/

@media (hover: hover) {
  .et_pb_menu .et-menu-nav li {
      position: relative;
  }

  .et_pb_menu .et-menu-nav li ul.sub-menu {
      position: absolute;
      left: 0;
      top: 100%;
      min-width: 300px;
      background: white;
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
      margin-top: 0px !important;
      pointer-events: none;
  }

  .et_pb_menu .et-menu-nav li:hover > ul.sub-menu,
  .et_pb_menu .et-menu-nav li > ul.sub-menu:hover {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      top: 100%;
  }

  .et_pb_menu .sub-menu li a {
      display: block;
      width: 100%;
      padding: 10px 15px;
      white-space: normal;
      line-height: 1.2;
      text-align: left;
      box-sizing: border-box;
  }
}



/*======== LANDSCAPING LIST ===========*/
.landscaping-process {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.landscaping-process li {
  display: grid;
  grid-template-columns: 60px auto;
  grid-column-gap: 10px;
  align-items: center; /* vertically centre-aligns number and text */
  margin-bottom: 30px;
}

.step-number {
  font-family: 'Playfair Display', serif;
  font-size: 50px;
  color: #32CD32;
  line-height: 1;
}

.step-text {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: 1.6;
}

.step-title {
  font-weight: bold;
  color: #32CD32;
}



/*====== COLOUR SWATCH GRID (FULLY RESPONSIVE WITH EXPLICIT BREAKPOINTS) ======*/

.am-colour-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px 0;
  gap: 10px;
}

/* Desktop: 12 per row (explicit) */
@media (min-width: 901px) {
  .am-colour-grid img {
    flex: 0 0 calc(100% / 12 - 10px);
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
  }
}

/* Tablet: 6 per row */
@media (min-width: 768px) and (max-width: 900px) {
  .am-colour-grid img {
    flex: 0 0 calc(100% / 6 - 10px);
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
  }
}

/* Mobile: 4 per row */
@media (max-width: 767px) {
  .am-colour-grid img {
    flex: 0 0 calc(100% / 4 - 10px);
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
  }
}