/**
 *  @package michael-travels-theme
 *
 *  Where I have been.
 *
 *  The hierarchy carries the design: a region is set large in the serif and a
 *  city is a quiet line of sans, so the depth of a place is legible from its
 *  type alone rather than from indentation a reader has to measure.
 */

.travels-destinations-heading {
  margin-bottom: var(--mt-space-6);
}

.travels-destinations-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.travels-destination-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mt-space-2) var(--mt-space-4);
  align-items: baseline;
}

.travels-destination-name {
  color: inherit;
  text-decoration: none;
}

.travels-destination-name:hover,
.travels-destination-name:focus-visible {
  color: var(--mt-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.travels-destination-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mt-space-3);
  color: var(--mt-muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.is-unvisited > .travels-destination-row .travels-destination-name {
  color: var(--mt-muted);
}




/*  ----------  Depth one: a region  ----------  */

.travels-destinations > .travels-destinations-list > .travels-destination {
  padding-top: var(--mt-space-7);
}

.travels-destinations > .travels-destinations-list > .travels-destination + .travels-destination {
  margin-top: var(--mt-space-7);
  border-top: 1px solid var(--mt-line);
}

.travels-destinations > .travels-destinations-list > .travels-destination > .travels-destination-row .travels-destination-name {
  font-family: var(--mt-font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}




/*  ----------  Depth two: a country  ----------  */

.travels-destinations-list .travels-destinations-list {
  margin-top: var(--mt-space-4);
}

.travels-destinations-list .travels-destinations-list > .travels-destination + .travels-destination {
  margin-top: var(--mt-space-4);
}

.travels-destinations-list
  .travels-destinations-list
  > .travels-destination
  > .travels-destination-row
  .travels-destination-name {
  font-family: var(--mt-font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.2;
}




/*  ----------  Depth three and below: states and cities  ----------  */

.travels-destinations-list
  .travels-destinations-list
  .travels-destinations-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mt-space-2) var(--mt-space-5);
  margin-top: var(--mt-space-2);
  padding-left: var(--mt-space-4);
  border-left: 1px solid var(--mt-line);
}

.travels-destinations-list
  .travels-destinations-list
  .travels-destinations-list
  > .travels-destination {
  margin: 0;
}

.travels-destinations-list
  .travels-destinations-list
  .travels-destinations-list
  .travels-destination-name {
  font-family: var(--mt-font-body);
  font-size: 0.9375rem;
}

/*  A city's own numbers would crowd the row it shares with five others.  */
.travels-destinations-list
  .travels-destinations-list
  .travels-destinations-list
  .travels-destination-counts {
  display: none;
}