/* =========================
   Home Locations (Base)
========================= */
.block-home-locations{
  margin-top: 2rem;
  width: 100%;
  display: block;
}

.block-home-locations .content-box{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.location-list-col{
  text-align: center;
  font-size: 14px;
}

.location-list-col a:hover{
  text-decoration: underline;
}

.location-list-col h2{
  font-size: 19px;
}

/* Link styling (from your snippet) */
.block-home-locations .location-list-col p a,
.location-list-col h2 a{
  color: #333;
  font-weight: 600;
}

.location-list-col h2 a:hover,
.location-list-col p a:hover{
  color: #c00;
}


/* =========================
   Parent headings row (GRID)
========================= */
.block-home-locations .loc-parent-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  position: relative; /* ✅ dropdown positioning context */
  box-sizing: border-box;
  border-radius:8px;
  padding:5px;
  background:#fff;
}

.block-home-locations .loc-parent-row *{
  box-sizing: border-box;
}

/* each parent item is a <details> */
.block-home-locations .loc-parent-item{
  min-width: 0;
  width: 100%;
  /* ✅ IMPORTANT: remove position:relative so dropdown is NOT centered to a single parent */
  position: static;
}


/* =========================
   Parent trigger (summary)
========================= */
.block-home-locations .loc-parent-trigger{
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 100%;
  max-width: 100%;

  padding: 10px 12px;
  border: 0;
  background: none;

  cursor: pointer;
  user-select: none;
  margin: 0;

  border-radius: 8px;
}

.block-home-locations .loc-parent-trigger::-webkit-details-marker{ display:none; }
.block-home-locations .loc-parent-trigger::marker{ content:""; }

/* Desktop-only hover styling */
@media (hover: hover) and (pointer: fine){
  .block-home-locations .loc-parent-trigger:hover{
    background:#fafafa;
  }

  .block-home-locations .loc-parent-trigger:hover .loc-parent-heading{
    color:#c00;
  }
}

/* Prevent sticky hover on touch devices */
@media (hover: none){
  .block-home-locations .loc-parent-trigger:hover{
    background:transparent;
  }
}

/* Touch/mobile: parent should navigate, dropdown should never appear */
@media (hover: none), (pointer: coarse) {
  .block-home-locations details.loc-parent-item[open] > .loc-dropdown {
    display: none !important;
  }
}

/* =========================
   Icons + Heading alignment
========================= */
.block-home-locations .loc-parent-icon{
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 22px;
  display: block;
}

.block-home-locations .loc-parent-heading{
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  transition: color .15s ease, font-weight .15s ease;
}

.block-home-locations .loc-parent-heading a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  text-decoration: none;
  color: inherit;
}

.block-home-locations .loc-parent-item[open] .loc-parent-heading{
  color: #c00;
  font-weight: 700;
}

.block-home-locations .loc-parent-count{
  font-weight: inherit;
}


/* =========================
   Dropdown panel (CENTERED UNDER THE WHOLE ROW)
========================= */
.block-home-locations .loc-parent-item:not([open]) > .loc-dropdown{
  display:none;
}

.block-home-locations .loc-dropdown{
  position: absolute;

  /* ✅ Center relative to the whole .loc-parent-row */
  left: 50%;
  transform: translateX(-50%);

  /* ✅ Drop below the parent row */
  top: calc(100% + 20px);

  background: #fff;
  border: 1px solid #e74b47;
  border-radius: 10px;
  padding: 16px;

  width: min(750px, calc(100vw - 32px));
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);

  z-index: 50;
  text-align: left;
}

/* Ensure all dropdowns align to the same "row" context */
.block-home-locations .loc-parent-row .loc-dropdown{
  top: calc(100% + 20px);
}

.block-home-locations .loc-dropdown-grid{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
}

.block-home-locations .loc-dropdown h4{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #222;
}

/* Force dropdown links to behave like block items */
.block-home-locations .loc-dropdown a,
.block-home-locations .loc-popular a,
.block-home-locations .loc-az a,
.block-home-locations .loc-links a{
  display: block;
  width: 100%;
  white-space: normal;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.25;
  margin: 0 0 4px;
  color: #c00;
}

.block-home-locations .loc-dropdown a:hover{
  text-decoration: underline;
}

/* Grid for A–Z links */
.block-home-locations .loc-links{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 14px;
}

.block-home-locations .loc-popular a{
  padding: 2px 0;
}

.block-home-locations .loc-view-all{
  margin-top: 10px;
}

.block-home-locations .loc-view-all a{
  color: #333;
  font-weight: 600;
}


/* =========================
   Responsive
========================= */
@media (max-width: 900px){
  .block-home-locations .loc-parent-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .block-home-locations .loc-links{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .block-home-locations .loc-dropdown-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .block-home-locations .loc-parent-row{
    grid-template-columns: 1fr;
  }
  .block-home-locations .loc-links{
    grid-template-columns: 1fr;
  }
}