/* ==========================================================================
   DESKTOP STYLES
   ========================================================================== */

/* 1. Target the dropdown panel ONLY for the background color */
.kl-navbar__panel {
  background-color: #f8fafc !important; /* Your light blue/grey */
  border-top: 1px solid rgba(0,0,0,0.05); /* Optional: clean line under titles */
}

/* 2. Container spacing - Fixes the 'big gap' under descriptions */
.kl-navbar__panel-wrapper {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  max-width: 1100px !important; 
  width: 90% !important;
  margin: 0 auto !important;
  padding: 30px 0 !important; /* Reduced from 40px to close the gap */
}

/* 3. Description Column spacing */
.kl-navbar__description--full {
  flex: 0 0 300px !important; 
  margin-right: 50px !important;
}

.kl-navbar__description--full a {
  margin-bottom: 0 !important;
  display: block;
}

/* 4. The Grid Area */
.kl-navbar__categories {
  flex: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 60px !important;
  row-gap: 25px !important;
}

/* Global/Desktop: Pins icons to the top of the title */
.kl-navbar__entry-with-image a {
  display: flex !important;
  align-items: flex-start !important; /* Changed from center to flex-start */
  gap: 15px !important;
  text-decoration: none;
  width: 100% !important;
  justify-content: flex-start !important;
}

.kl-navbar__entry-icon {
  width: 45px !important;
  height: auto;
  flex-shrink: 0 !important;
  margin-top: -7px !important; /* Optional: tiny nudge for perfect alignment */
}

/* ==========================================================================
   MOBILE ADJUSTMENTS (Breakout & Alignment)
   ========================================================================== */

@media (max-width: 768px) {
  @media (max-width: 768px) {
  /* 1. Full-Width Breakout: Pulls background to screen edges */
  .kl-navbar__item {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
  }

  /* 2. Apply background to the parent to include the Title */
  .kl-navbar__item:hover, 
  .kl-navbar__item:focus-within {
    background-color: #f8fafc !important;
  }

  /* 3. Remove the 'weird bar' (inner background/border conflicts) */
  .kl-navbar__panel,
  .kl-navbar__panel-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* 4. Fix Alignment: Keep everything pinned to the LEFT */
  /* Re-aligns title and content inside the full-width breakout */
  .kl-navbar__item > a.kl-navbar__dropdown,
  .kl-navbar__panel-wrapper {
    padding-left: 20px !important; /* Adjust to match logo alignment */
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* 5. Tighten the vertical gap */
  .kl-navbar__panel-wrapper {
    flex-direction: column !important;
    padding-top: 20px !important; /* Removes gap between title and description */
    padding-left: 50px !important; /* Removes gap between title and description */
    padding-right: 50px !important; /* Removes gap between title and description */
    padding-bottom: 20px !important;
  }

  .kl-navbar__description--full {
    flex: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0px !important; /* Gap before icons start */
  }

  /* 6. Grid Alignment */
  .kl-navbar__categories {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 20px !important;
    width: 100% !important;
    justify-items: start !important; /* Forces icons to stay left */
  }

  .kl-navbar__entry-with-image a {
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
  }

  .kl-navbar__entry-icon {
    width: 40px !important;
    margin: 0 !important;
  }
}