/* AVD Schools and Reviews — Walk Score Widget */

.avdsr-ws-wrap {
  --ws-bg:          #ffffff;
  --ws-title-color: #111111;
  --ws-sub-color:   #777777;
  --ws-circle-border: #b8c9c2;
  --ws-circle-color:  #111111;
  --ws-label-color:   #111111;
  --ws-meta-color:    #999999;
  --ws-link-color:    #5a8a7a;
  --ws-divider:       #e8e8e8;
  --ws-title-font:    'Georgia', serif;
  --ws-body-font:     inherit;
  --ws-title-size:    2rem;
  --ws-num-size:      1.5rem;
  --ws-label-size:    .8rem;

  background: var(--ws-bg);
  padding: 0;
  font-family: var(--ws-body-font);
}

/* ── Title ─────────────────────────── */
.avdsr-ws-title {
  font-family: var(--ws-title-font);
  font-size: var(--ws-title-size);
  font-weight: 400;
  color: var(--ws-title-color);
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 14px;
}

.avdsr-ws-subtitle {
  font-size: .9rem;
  color: var(--ws-sub-color);
  line-height: 1.65;
  margin: 0 0 20px;
  max-width: 680px;
}

/* ── Divider ────────────────────────── */
.avdsr-ws-divider {
  height: 1px;
  background: var(--ws-divider);
  margin: 24px 0;
}

/* ── Scores row ────────────────────── */
.avdsr-ws-scores {
  display: flex;
  align-items: center;
  gap: 0;
}

.avdsr-ws-sep {
  width: 1px;
  height: 60px;
  background: var(--ws-divider);
  flex-shrink: 0;
}

.avdsr-ws-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 0 32px;
}

/* Icon above the circle */
.avdsr-ws-icon-wrap {
  display: flex;
  align-items: center;
  color: var(--ws-link-color, #5a8a7a);
}
.avdsr-ws-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Number + info sit side by side below the icon */
.avdsr-ws-item .avdsr-ws-circle + .avdsr-ws-info,
.avdsr-ws-item {
  /* override: circle and info are still side by side */
}

/* Reset: circle and info in a horizontal row */
.avdsr-ws-item > .avdsr-ws-circle,
.avdsr-ws-item > .avdsr-ws-info {
  /* keep inline if needed */
}

/* Layout: icon on top, then row of circle + info */
.avdsr-ws-item {
  flex-direction: column;
  align-items: flex-start;
}
.avdsr-ws-circle-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.avdsr-ws-item:first-child { padding-left: 0; }
.avdsr-ws-item:last-child  { padding-right: 0; }

/* ── Circle ─────────────────────────── */
.avdsr-ws-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1.5px solid var(--ws-circle-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  transition: border-color .25s;
}
.avdsr-ws-item:hover .avdsr-ws-circle {
  border-color: var(--ws-link-color);
}

.avdsr-ws-num {
  font-size: var(--ws-num-size);
  font-weight: 400;
  color: var(--ws-circle-color);
  line-height: 1;
  font-family: var(--ws-title-font);
}

/* ── Info ───────────────────────────── */
.avdsr-ws-info { flex: 1; }

.avdsr-ws-label {
  font-size: var(--ws-label-size);
  font-weight: 700;
  color: var(--ws-label-color);
  letter-spacing: .06em;
  line-height: 1.3;
  margin-bottom: 5px;
}

.avdsr-ws-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ws-meta-color);
}

.avdsr-ws-icon-link {
  display: inline-flex;
  align-items: center;
  color: var(--ws-link-color);
  transition: color .2s, transform .2s;
}
.avdsr-ws-icon-link:hover {
  color: var(--ws-circle-color);
  transform: translateX(2px);
}

/* ── Attribution ────────────────────── */
.avdsr-ws-attribution {
  font-size: .72rem;
  color: var(--ws-meta-color);
  margin: 0;
}
.avdsr-ws-attribution a {
  color: var(--ws-link-color);
  text-decoration: none;
  font-weight: 500;
}
.avdsr-ws-attribution a:hover { text-decoration: underline; }

.avdsr-ws-error {
  padding: 14px 18px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  font-size: .875rem;
  color: #991b1b;
}

/* ── Responsive ─────────────────────── */
@media (max-width: 600px) {
  .avdsr-ws-scores {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .avdsr-ws-sep { display: none; }
  .avdsr-ws-item { padding: 0; }
}