/* Garden visitor counter: /visitors page, home strip and the hra18.org embed.
   Uses the site's palette and fonts (League Gothic for figures, Inter for text). */
.visitors_section {
  --v-navy: var(--violate-blue, #2e3464);
  --v-blue: var(--light-blue, #515bac);
  --v-gold: #e1a94a;
  --v-gold-soft: #fff4de;
  --v-tint: #f5f6fb;
  --v-line: #e4e6f1;
  --v-muted: #5f6275;
  background-color: var(--v-tint); color: var(--v-navy);
}
.visitors_inner { max-width: 72rem; margin: 0 auto; padding: 5vw 0; }

/* Hero: total, butterflies, milestones */
.visitors_hero { position: relative; text-align: center; padding: 1rem 0 0; }
.visitors_hero-number {
  font-family: "League Gothic", sans-serif; font-weight: 400; line-height: .9;
  font-size: clamp(5.5rem, 15vw, 14rem); font-variant-numeric: tabular-nums;
  color: var(--v-navy); margin: 1.25rem 0 0; position: relative; z-index: 1; text-align: center;
}
.visitors_hero-caption {
  font-family: Inter, sans-serif; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.45;
  color: var(--v-muted); margin: .75rem auto 0; max-width: 36ch; position: relative; z-index: 1; text-align: center;
}
.visitors_fly { position: absolute; height: auto; pointer-events: none; animation: visitors-float 7s ease-in-out infinite; }
.visitors_fly--1 { width: clamp(64px, 9vw, 120px); left: 6%; top: 18%; --r: -14deg; }
.visitors_fly--2 { width: clamp(40px, 5vw, 70px); right: 9%; top: 6%; --r: 12deg; animation-delay: -2.5s; animation-duration: 8s; }
.visitors_fly--3 { width: clamp(36px, 4.5vw, 64px); right: 17%; top: 52%; --r: -6deg; animation-delay: -5s; animation-duration: 9s; }
@keyframes visitors-float {
  0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
  50% { transform: translate(6px, -12px) rotate(calc(var(--r, 0deg) + 6deg)); }
}

/* Badges */
.visitors_badge {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .4rem .8rem;
  border-radius: 999px; background: #fff; border: 1px solid var(--v-line); color: var(--v-navy);
  font: 500 .8125rem/1.2 Inter, sans-serif; white-space: nowrap;
}
.visitors_badge strong { font-weight: 700; }
.visitors_badge--live { position: relative; z-index: 1; }
.visitors_badge--gold { background: var(--v-gold-soft); border-color: #f3dcae; color: #6b4a0e; align-self: flex-start; }
.visitors_badge--gold img { width: 18px; height: auto; }
.visitors_badge--soft { background: #eceefa; border-color: transparent; padding: .2rem .55rem; font-size: .75rem; font-weight: 600; }
.visitors_dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--v-gold); box-shadow: 0 0 0 0 rgba(225, 169, 74, .6); animation: visitors-pulse 2.4s ease-out infinite; }
@keyframes visitors-pulse { 0% { box-shadow: 0 0 0 0 rgba(225, 169, 74, .55); } 70%, 100% { box-shadow: 0 0 0 .5rem rgba(225, 169, 74, 0); } }

/* Milestones */
.visitors_milestones { max-width: 44rem; margin: 2.5rem auto 0; position: relative; z-index: 1; }
.visitors_progress-label { max-width: 34rem; margin-left: auto !important; margin-right: auto !important; display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .6rem; font: 600 .875rem Inter, sans-serif; color: var(--v-navy); }
.visitors_progress-togo { color: var(--v-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.visitors_progress-track { max-width: 34rem; margin: 0 auto; height: .625rem; border-radius: 999px; background: #e3e5f3; position: relative; }
.visitors_progress-fill {
  height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--v-blue), var(--v-navy));
  position: relative; transform-origin: left; animation: visitors-fill 1.4s cubic-bezier(.2, .8, .2, 1) both;
}
.visitors_progress-fly { position: absolute; right: -14px; top: 50%; width: 28px; height: auto; transform: translateY(-58%) rotate(-10deg); }
@keyframes visitors-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.visitors_badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.visitors_milestone {
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px;
  border: 1px dashed #c4c8e2; color: var(--v-muted); font: 500 .8125rem Inter, sans-serif; background: transparent;
}
.visitors_milestone strong { font-weight: 700; color: var(--v-navy); font-variant-numeric: tabular-nums; }
.visitors_milestone.is-reached { border: 1px solid transparent; background: var(--v-navy); color: #cfd3f5; }
.visitors_milestone.is-reached strong { color: #fff; }
.visitors_milestone img { width: 18px; height: auto; }

/* Stat tiles */
.visitors_tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
  margin: 4rem 0 0; padding: 0; list-style: none;
}
.visitors_tile {
  background: #fff; border: 1px solid var(--v-line); border-radius: 1rem; padding: 1.25rem 1.25rem 1.35rem;
  display: flex; flex-direction: column; gap: .35rem; min-width: 0;
}
.visitors_tile-value {
  font-family: "League Gothic", sans-serif; font-size: clamp(3rem, 4.8vw, 4.5rem); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--v-navy);
}
.visitors_tile-label {
  font-family: Inter, sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--v-muted);
}
.visitors_tile-sub { font: 400 .8125rem/1.35 Inter, sans-serif; color: var(--v-muted); }
.visitors_tile-sub.is-trend { font-weight: 600; color: var(--v-navy); }
.visitors_tile--peak { background: linear-gradient(160deg, #fff 55%, var(--v-gold-soft)); border-color: #f3dcae; }

/* Chart cards */
.visitors_block { margin-top: 1.5rem; position: relative; }
.visitors_card { background: #fff; border: 1px solid var(--v-line); border-radius: 1.25rem; padding: clamp(1.25rem, 3vw, 2.25rem); }
.visitors_tiles + .visitors_block { margin-top: 1.5rem; }
.visitors_card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.visitors_block-title {
  font-family: "League Gothic", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1; margin: 0; color: var(--v-navy);
}
.visitors_block-sub { font: 400 .875rem Inter, sans-serif; color: var(--v-muted); margin: .35rem 0 0; }
.visitors_legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin: .25rem 0 0; padding: 0; list-style: none; font: 500 .8125rem Inter, sans-serif; color: var(--v-muted); }
.visitors_legend li { display: inline-flex; align-items: center; gap: .45rem; }
.visitors_legend li[hidden] { display: none; }
.visitors_key { display: inline-block; width: .75rem; height: .75rem; border-radius: 3px; }
.visitors_key--bar { background: var(--v-blue); }
.visitors_key--avg { height: 0; width: 1.1rem; border-top: 2px dashed var(--v-navy); border-radius: 0; }
.visitors_key--band { background: #eef0f9; border: 1px solid var(--v-line); }

.visitors_chart { position: relative; }
.visitors_svg { display: block; width: 100%; height: auto; overflow: visible; }
.visitors_band { fill: #f1f2fa; }
.visitors_grid { stroke: #ececf4; stroke-width: 1; }
.visitors_axis { stroke: #c7cad9; stroke-width: 1; }
.visitors_tick { font: 500 11px Inter, sans-serif; fill: #6f7186; font-variant-numeric: tabular-nums; }
.visitors_tick.is-highlight { fill: var(--v-navy); font-weight: 700; }
.visitors_value { font: 600 12px Inter, sans-serif; fill: var(--v-muted); font-variant-numeric: tabular-nums; }
.visitors_value.is-highlight { font-weight: 700; font-size: 13px; fill: var(--v-navy); }
.visitors_avg { stroke: var(--v-navy); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .7; }
.visitors_avg-label { font: 700 11px Inter, sans-serif; fill: var(--v-navy); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.visitors_hit { fill: transparent; }
.visitors_mark { fill: var(--v-blue); transition: fill .15s ease, opacity .15s ease; }
.visitors_bar.is-highlight .visitors_mark { fill: var(--v-navy); }
.visitors_bar { outline: none; cursor: default; }
.visitors_svg:hover .visitors_bar:not(:hover) .visitors_mark { opacity: .55; }
.visitors_bar:hover .visitors_mark, .visitors_bar:focus-visible .visitors_mark { fill: var(--v-navy); opacity: 1; }
.visitors_bar:focus-visible .visitors_hit { fill: rgba(81, 91, 172, .1); }
.visitors_svg.is-animated .visitors_mark { transform-box: fill-box; transform-origin: bottom; animation: visitors-grow .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes visitors-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.visitors_tooltip {
  position: absolute; transform: translate(-50%, -100%); pointer-events: none; z-index: 5;
  background: #121425; color: #fff; border-radius: .6rem; padding: .5rem .75rem; white-space: nowrap;
  font: 400 .8125rem/1.3 Inter, sans-serif; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(18, 20, 37, .22);
}
.visitors_tooltip[hidden] { display: none; }
.visitors_tooltip strong { font-weight: 700; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.visitors_tooltip span { color: #c3c5d6; }

.visitors_table-toggle { margin-top: 1rem; font: 500 .875rem Inter, sans-serif; color: var(--v-blue); }
.visitors_table-toggle summary { cursor: pointer; }
.visitors_table { width: 100%; max-width: 28rem; border-collapse: collapse; margin-top: .75rem; font-variant-numeric: tabular-nums; }
.visitors_table th, .visitors_table td { text-align: left; padding: .4rem 0; border-bottom: 1px solid var(--v-line); color: var(--v-navy); }
.visitors_table td:last-child, .visitors_table th:last-child { text-align: right; }

/* Months as horizontal bars */
.visitors_months { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.visitors_month { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr 4rem; align-items: center; gap: 1rem; font: 500 .9375rem Inter, sans-serif; }
.visitors_month-name { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.visitors_month-track { height: 1.25rem; background: #f1f2fa; border-radius: 4px; overflow: hidden; }
.visitors_month-fill { display: block; height: 100%; background: var(--v-blue); border-radius: 0 4px 4px 0; }
.visitors_month:first-child .visitors_month-fill { background: var(--v-navy); }
.visitors_month-value { font: 400 1.75rem/1 "League Gothic", sans-serif; text-align: right; font-variant-numeric: tabular-nums; }

/* Report */
.visitors_report { margin-top: 5rem; }
.visitors_report-head { text-align: center; max-width: 40rem; margin: 0 auto; }
.visitors_report-head img { width: 56px; height: auto; display: block; margin: 0 auto .75rem; transform: rotate(-8deg); }
.visitors_report-title {
  font-family: "League Gothic", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.5rem, 4.5vw, 4rem); line-height: 1; margin: 0; color: var(--v-navy);
}
.visitors_report-sub { font: 400 1rem/1.45 Inter, sans-serif; color: var(--v-muted); margin: .6rem 0 0; }
.visitors_tiles--report { margin-top: 2rem; }
.visitors_pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.visitors_pair .visitors_block-title { font-size: clamp(1.5rem, 2.2vw, 2rem); }

.visitors_note { margin: 3rem auto 0; font: 400 .875rem/1.55 Inter, sans-serif; color: var(--v-muted); max-width: 62ch; text-align: center; }
.visitors_status { display: none; font: 500 1rem Inter, sans-serif; color: var(--v-muted); text-align: center; margin-top: 1rem; }
[data-visitors].is-error .visitors_status { display: block; }
[data-visitors]:not(.is-loaded) [data-visitors-total] { color: transparent; background: #e9ebf5; border-radius: .25rem; }
[data-visitors]:not(.is-loaded) [data-visitors-total]::before { content: "0"; }
[data-visitors].is-error [data-visitors-total] { color: inherit; background: none; }
[data-visitors].is-error [data-visitors-total]::before { content: none; }


/* Home strip */
.visitors_strip { background: var(--black, #000); color: #fff; text-align: center; padding: 4vw 8vw; }
.visitors_strip a { color: inherit; text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; }
.visitors_strip-number {
  font-family: "League Gothic", sans-serif; font-size: clamp(4rem, 9vw, 8rem); line-height: .9;
  color: var(--very-light-blue, #8892e7); font-variant-numeric: tabular-nums;
}
.visitors_strip-label { font: 600 clamp(.875rem, 1.2vw, 1.125rem) Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.visitors_strip-link { font: 500 .875rem Inter, sans-serif; color: var(--yellow, #ffb63b); }
/* The home strip stays out of the way until there is a number to show. */
.visitors_strip:not(.is-loaded) { display: none; }

@media screen and (max-width: 991px) {
  .visitors_tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .visitors_inner { padding: 12vw 0; }
  .visitors_tiles { gap: .75rem; }
  .visitors_tile { padding: 1rem; }
  .visitors_pair { grid-template-columns: 1fr; gap: 0; }
  .visitors_fly--1 { width: 54px; left: 0; top: 4.5rem; }
  .visitors_fly--2 { width: 36px; right: 2%; top: 3.75rem; }
  .visitors_fly--3 { display: none; }
  .visitors_month { grid-template-columns: 1fr 3.5rem; }
  .visitors_month-track { grid-column: 1 / -1; grid-row: 2; }
  .visitors_badge { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .visitors_mark { transition: none; }
  .visitors_fly, .visitors_dot, .visitors_progress-fill, .visitors_svg.is-animated .visitors_mark { animation: none; }
}