/**
 * @file
 * Styles for the Kelty Location Map block.
 */

.location-container {
  padding: 20px 0;
}

.location-intro-text {
  margin-bottom: 56px;
}

.location-mid-text,
.location-footer-text {
  margin-bottom: 20px;
}

.location-mid-text {
  margin-top: 20px;
}

.location-footer-text {
  margin-top: 64px;
}

.bodySmall {
  font-size: 0.85em;
  line-height: 1.4;
}

/* Search Form */
.location-search {
  margin-bottom: 30px;
}

.location-search-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.location-address {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
}

.location-address-icon {
  position: absolute;
  top: 50%;
  left: 18px;
  z-index: 1;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: #646364;
  pointer-events: none;
}

.location-address input[type="text"] {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 20px 0 46px;
  border: 1px solid #0072BC;
  border-radius: 100px;
  color: #121212;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  background: #fff;
}

.location-address input[type="text"]::placeholder {
  color: #646364;
  opacity: 1;
  font-weight: 400;
}

.location-address input[type="text"]:focus {
  outline: none;
  border-color: #004C7D;
}

/* Filter pill (legend + dropdown) */
.filter-fieldset {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.filter-legend {
  display: inline-block;
  margin: 0;
  padding: 11px 50px 11px 20px;
  border: 1px solid #0072BC;
  border-radius: 100px;
  background: #fff;
  color: #0072BC;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.304px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease, color 0.2s ease;
  box-sizing: border-box;
  height: 40px;
  min-width: 230px;
}

.filter-legend::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 18px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.70711 7.29289L10 10.5858L13.2929 7.29289C13.6834 6.90237 14.3166 6.90237 14.7071 7.29289C15.0976 7.68342 15.0976 8.31658 14.7071 8.70711L10.7071 12.7071C10.3166 13.0976 9.68342 13.0976 9.29289 12.7071L5.29289 8.70711C4.90237 8.31658 4.90237 7.68342 5.29289 7.29289Z' fill='%230072BC'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  transition: transform 0.2s ease, background-image 0.2s ease;
}

.filter-fieldset.open .filter-legend {
  background-color: #0072BC;
  color: #fff;
}

.filter-fieldset.open .filter-legend::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.70711 7.29289L10 10.5858L13.2929 7.29289C13.6834 6.90237 14.3166 6.90237 14.7071 7.29289C15.0976 7.68342 15.0976 8.31658 14.7071 8.70711L10.7071 12.7071C10.3166 13.0976 9.68342 13.0976 9.29289 12.7071L5.29289 8.70711C4.90237 8.31658 4.90237 7.68342 5.29289 7.29289Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

.filter-fieldset.open .filter-legend::after {
  transform: translateY(-50%) rotate(180deg);
}

.filter-options {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 225px;
  padding: 15px 20px;
  border: 1px solid #0072BC;
  border-radius: 10px;
  background: #fff;
  box-shadow:
    0 8px 17px 0 rgba(0, 0, 0, 0.10),
    0 30px 30px 0 rgba(0, 0, 0, 0.09),
    0 68px 41px 0 rgba(0, 0, 0, 0.05);
  z-index: 50;
}

.filter-fieldset.open .filter-options {
  display: block;
}

.filter-option {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 6px;
  cursor: pointer;
  color: #0072BC;
  font-size: 16px;
  line-height: 1.4;
  transition: color 0.15s ease;
}

.filter-option:last-child {
  margin-bottom: 0;
}

.filter-option:hover {
  color: #004C7D;
}

.filter-option:hover input[type="radio"],
.filter-option:hover input[type="checkbox"] {
  border-color: #004C7D;
}

.filter-option:hover input[type="radio"]:checked::before,
.filter-option:hover input[type="checkbox"]:checked::before {
  background: #004C7D;
}

.filter-option input[type="radio"],
.filter-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid #0072BC;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  position: relative;
  flex: 0 0 16px;
}

.filter-option input[type="checkbox"] {
  border-radius: 3px;
}

.filter-option input[type="radio"]:checked::before,
.filter-option input[type="checkbox"]:checked::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0072BC;
}

.filter-option input[type="checkbox"]:checked::before {
  border-radius: 1px;
}

.location-search-row .btn {
  flex: 0 0 auto;
  height: 40px;
  white-space: nowrap;
}

/* Map */
.location-map {
  width: 100%;
  height: 400px;
  margin-bottom: 30px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.location-map.active {
  cursor: grab;
}

/* Location Items List */
.location-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.location-item {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
}

.location-item h5 {
  margin: 0 0 14px;
  color: #3f4448;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.location-item.provincial-program {
  border-color: #f90;
  background: #fff8f0;
}

/* Contact rows (icon + value) */
.location-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 16px;
}

.location-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  fill: #0072BC;
}

.provincial-label {
  display: inline-block;
  background: #f90;
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  margin-bottom: 10px;
  align-self: flex-start;
}

.location-row--address {
  margin-bottom: 14px;
}

.location-item address {
  font-style: normal;
  color: #3f4448;
}

.location-item address span {
  display: block;
  line-height: 1.45;
}

.location-item .tel,
.location-item .email {
  color: #0072BC;
  text-decoration: none;
  min-width: 0;
}

.location-item .tel:hover,
.location-item .email:hover {
  text-decoration: underline;
}

.location-item .email {
  /* Prefer breaking at the <wbr> before "@"; fall back to breaking long
     local-parts so an address can never overflow the card. */
  overflow-wrap: anywhere;
}

/* Website link reuses the theme's outline button; we only pin it to the
   bottom of the card and keep it sized to its content. */
.location-item .location-website {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  align-self: flex-start;
}

.location-website__chevron {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.location-item .website-link:hover {
  text-decoration: underline;
}

.btn-medium {
  padding: 10px 20px;
}

/* Info Window */
.location-info-window {
  max-width: 300px;
}

.location-info-window h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.location-info-window address {
  font-style: normal;
  margin-bottom: 10px;
}

.location-info-window p {
  margin: 5px 0;
}

/* No Results */
.no-locations {
  text-align: center;
  padding: 40px;
  color: #666;
  font-size: 18px;
}

/* Responsive */
@media (max-width: 768px) {
  .location-search-row {
    flex-wrap: wrap;
  }

  .location-address,
  .filter-fieldset,
  .location-search-row .btn {
    flex: 1 1 auto;
    width: 100%;
  }

  .filter-legend {
    display: block;
    width: 100%;
    text-align: left;
  }

  .filter-options {
    width: 100%;
  }

  .location-map {
    height: 300px;
  }
}