/* ============================================================================
   UF Infographics - shared stylesheet
   All selectors prefixed with .uf- to avoid theme conflicts.
   ============================================================================ */

.uf-chev-stack,
.uf-revenue-card,
.uf-donut-card,
.uf-alachua-card {
  --uf-blue:#0021A5;
  --uf-orange:#FA4616;
  --uf-navy:#0d2249;
  --uf-cream:#FDF8EE;
  --uf-ink:#0E1530;
  --uf-ink-soft:#2A3151;
  font-family: 'Mulish', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  box-sizing: border-box;
}
.uf-chev-stack *,
.uf-revenue-card *,
.uf-donut-card *,
.uf-alachua-card * { box-sizing: border-box; }

/* Visually hidden, still read by screen readers */
.uf-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}


/* ============================================================================
   1. CHEVRON STATS
   ============================================================================ */
.uf-chev-stack {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 780px; margin: 0 auto;
}
.uf-chev-bar {
  position: relative;
  height: 88px;
  background: transparent;
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 50%, calc(100% - 44px) 100%, 0 100%);
  overflow: hidden;
}
.uf-chev-fill {
  position: absolute; inset: 0;
  background: var(--uf-chev-color, var(--uf-orange));
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.uf-chev-bar.uf-in .uf-chev-fill { transform: scaleX(1); }
.uf-chev-content {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; align-items: center; gap: 20px;
  padding-left: 32px; padding-right: 56px;
  transition: opacity .55s ease .35s, transform .55s ease .35s;
}
.uf-chev-bar.uf-in .uf-chev-content { opacity: 1; transform: none; }
.uf-chev-text { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; }
.uf-chev-value {
  font-size: clamp(28px, 4vw, 42px); font-weight: 900;
  letter-spacing: -.015em; color: var(--uf-cream);
  line-height: 1; white-space: nowrap;
}
.uf-chev-label {
  font-size: clamp(13px, 1.4vw, 16px); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--uf-cream); line-height: 1.2;
  min-width: 0; overflow-wrap: break-word;
}
.uf-chev-orange { --uf-chev-color: var(--uf-orange); }
.uf-chev-blue   { --uf-chev-color: var(--uf-blue); }

@media(max-width:560px) {
  .uf-chev-bar { height: auto; min-height: 74px; clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 50%, calc(100% - 32px) 100%, 0 100%); }
  .uf-chev-content { padding: 14px 42px 14px 20px; gap: 14px; }
  .uf-chev-text { gap: 10px; flex-direction: column; align-items: flex-start; }
}


/* ============================================================================
   2. REVENUE PIE
   ============================================================================ */
.uf-revenue-card {
  position: relative; max-width: 720px; margin: 0 auto;
  padding: 48px 56px 56px;
  background: var(--uf-cream); border: 3px dotted var(--uf-blue);
  color: var(--uf-blue);
}
.uf-revenue-title {
  text-align: center; font-size: clamp(24px, 2.6vw, 34px); font-weight: 900;
  letter-spacing: -.01em; color: var(--uf-blue); text-transform: uppercase;
  margin: 0 0 40px;
}
.uf-pie-block { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.uf-pie-heading {
  font-size: clamp(20px, 2vw, 28px); font-weight: 900;
  color: var(--uf-orange); letter-spacing: -.005em; text-align: center;
}
.uf-pie-area {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px;
  align-items: center; width: 100%;
}
.uf-pie-svg-wrap { position: relative; width: min(260px, 40vw); aspect-ratio: 1; }
.uf-pie-svg-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }
.uf-pie-slice {
  transform: scale(1); transform-origin: 50% 50%;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.uf-revenue-card.uf-in .uf-pie-slice { opacity: 1; transform: scale(1); }
.uf-pie-ring { fill: none; stroke: var(--uf-orange); stroke-width: 3; }
/* NOTE: no `fill` here - the readable text color is set per element as a
   presentation attribute, and a CSS fill would override it. */
.uf-pie-label {
  font-family: 'Mulish', sans-serif; font-weight: 900; font-size: 13px;
  text-anchor: middle; dominant-baseline: middle; pointer-events: none;
  transition: opacity .5s ease;
}
.uf-revenue-card.uf-in .uf-pie-label { opacity: 1; transition-delay: 1.1s; }

.uf-pie-legend { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
.uf-legend-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: flex-start;
  transition: opacity .45s ease, transform .45s ease;
}
.uf-revenue-card.uf-in .uf-legend-item { opacity: 1; transform: none; }
.uf-legend-swatch { width: 22px; height: 22px; flex-shrink: 0; background: var(--c, var(--uf-orange)); }
.uf-legend-label { font-size: 13px; font-weight: 600; color: var(--uf-blue); line-height: 1.35; overflow-wrap: break-word; }

.uf-pie-total {
  font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; color: var(--uf-blue);
  letter-spacing: -.005em;
  transition: opacity .55s ease, transform .55s ease;
  text-align: center;
}
.uf-revenue-card.uf-in .uf-pie-total { opacity: 1; transform: none; transition-delay: 1.3s; }

@media(max-width:600px) {
  .uf-pie-area { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; }
  .uf-pie-svg-wrap { width: min(260px, 70vw); }
  .uf-revenue-card { padding: 32px 24px 40px; }
}


/* ============================================================================
   3. VISITOR DONUT
   ============================================================================ */
.uf-donut-card {
  position: relative; max-width: 1180px; margin: 0 auto;
  padding: 48px 56px 56px;
  background: var(--uf-cream); border: 3px dotted var(--uf-blue);
  color: var(--uf-blue);
}
.uf-donut-title {
  font-size: clamp(24px, 2.6vw, 34px); font-weight: 900;
  letter-spacing: -.01em; color: var(--uf-ink); line-height: 1.15;
  margin: 0 0 40px; max-width: 46ch;
}
.uf-donut-grid {
  position: relative; display: grid;
  /* minmax(0, ...) on every track so long unbroken words can't blow the grid out */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px; align-items: center;
}

.uf-donut-svg-wrap {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  /* Establishes a query container so the centre text can scale with the
     donut instead of the viewport. */
  container-type: inline-size;
}
.uf-donut-svg-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }

.uf-donut-arc {
  fill: none; stroke-width: 42; stroke-linecap: butt;
  stroke-dasharray: var(--uf-dash-to, 0 9999);
  transition: stroke-dasharray 1s cubic-bezier(.22,.61,.36,1);
}
.uf-donut-card.uf-in .uf-donut-arc { stroke-dasharray: var(--uf-dash-to, 0 9999); }

/* NOTE: no `fill` - set per element as a presentation attribute for contrast. */
.uf-donut-pct {
  font-family: 'Mulish', sans-serif; font-weight: 900; font-size: 18px;
  text-anchor: middle; dominant-baseline: middle; pointer-events: none;
  transition: opacity .5s ease;
}
.uf-donut-card.uf-in .uf-donut-pct { opacity: 1; transition-delay: 1s; }

/* ----------------------------------------------------------------------------
   Centre text.

   This is an HTML overlay rather than an SVG <text> element. SVG text cannot
   wrap, so a long centre label rendered as a single unbreakable line and spilled
   straight out past the donut hole. As HTML it wraps, and it is constrained to
   a box that fits inside the hole.

   Hole diameter = 2 * (R - strokeWidth / 2) / viewBox
                 = 2 * (96 - 21) / 240 = 62.5% of the wrapper.
   The text box is 52% wide and 34% tall, which is the largest rectangle that
   stays inside that circle with a little breathing room. --uf-fit is an extra
   safety multiplier applied by the script for unusually long content.
   ---------------------------------------------------------------------------- */
.uf-donut-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52%;
  max-height: 34%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .3em;
  text-align: center;
  pointer-events: none;
  overflow: hidden;
  transition: opacity .55s ease;
}
.uf-donut-card.uf-in .uf-donut-center { opacity: 1; transition-delay: 1.3s; }

.uf-donut-center-label,
.uf-donut-center-value {
  display: block; max-width: 100%;
  color: var(--uf-ink);
  overflow-wrap: break-word; word-break: break-word; hyphens: auto;
}
.uf-donut-center-label {
  font-size: 13px; /* fallback for browsers without container queries */
  font-size: calc(clamp(10px, 3.4cqw, 15px) * var(--uf-fit, 1));
  font-weight: 700; line-height: 1.25;
}
.uf-donut-center-value {
  font-size: 24px; /* fallback for browsers without container queries */
  font-size: calc(clamp(16px, 8cqw, 36px) * var(--uf-fit, 1));
  font-weight: 900; line-height: 1.05; letter-spacing: -.02em;
}

.uf-donut-label {
  display: flex; flex-direction: column; gap: 8px;
  transition: opacity .5s ease, transform .5s ease;
  min-width: 0;
}
.uf-donut-card.uf-in .uf-donut-label { opacity: 1; transform: none; }
.uf-donut-label h3 {
  font-size: clamp(18px, 1.9vw, 26px); font-weight: 900; color: var(--uf-ink);
  letter-spacing: -.005em; line-height: 1.1; margin: 0; overflow-wrap: break-word;
}
.uf-donut-label p { font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--uf-ink-soft); margin: 0; overflow-wrap: break-word; }
.uf-donut-callout {
  font-size: clamp(16px, 1.5vw, 20px); font-weight: 700;
  color: var(--uf-ink-soft); line-height: 1.3; overflow-wrap: break-word;
}
.uf-donut-callout strong { font-weight: 900; color: var(--uf-ink); }

.uf-label-col { display: flex; flex-direction: column; justify-content: space-around; height: 100%; gap: 32px; min-width: 0; }
.uf-label-left  { align-items: flex-end; text-align: right; }
.uf-label-right { align-items: flex-start; text-align: left; }

.uf-donut-footnote {
  margin-top: 32px; font-size: 11px; color: var(--uf-ink-soft); line-height: 1.5;
}

/* Raised from 920px: three columns plus 56px of card padding needs more room
   than the old breakpoint allowed inside narrower theme content areas. */
@media(max-width:1040px) {
  .uf-donut-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; justify-items: center; }
  .uf-donut-card { padding: 32px 24px 40px; }
  .uf-label-col { align-items: center !important; text-align: center !important; height: auto; gap: 24px; width: 100%; max-width: 520px; }
  .uf-donut-label h3 { text-align: center; }
  .uf-donut-svg-wrap { width: min(400px, 88vw); }
}


/* ============================================================================
   4. ALACHUA IMPACT
   ============================================================================ */
.uf-alachua-card {
  position: relative; max-width: 1180px; margin: 0 auto;
  padding: 64px 56px;
  background: var(--uf-navy); color: var(--uf-cream);
  border: 3px dotted rgba(253,248,238,.3);
}
.uf-alachua-eyebrow {
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  font-weight: 900; color: var(--uf-orange); margin-bottom: 14px;
}
.uf-alachua-title {
  font-size: clamp(32px, 4.2vw, 56px); font-weight: 900;
  letter-spacing: -.015em; color: var(--uf-cream);
  text-transform: uppercase; line-height: .95; margin: 0 0 48px;
}
.uf-alachua-title em { font-style: italic; color: var(--uf-orange); font-weight: 900; }

.uf-hero-jobs {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: start;
  padding-bottom: 56px; border-bottom: 2px dotted rgba(253,248,238,.25);
  margin-bottom: 56px;
}
.uf-jobs-stat { position: relative; }
.uf-jobs-label {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 900; color: var(--uf-orange); margin-bottom: 14px;
}
.uf-jobs-value {
  font-size: clamp(64px, 9vw, 128px); font-weight: 900;
  letter-spacing: -.025em; line-height: .9; color: var(--uf-cream);
}
.uf-jobs-sub {
  font-size: 14px; letter-spacing: .06em; font-weight: 800; text-transform: uppercase;
  color: rgba(253,248,238,.78); margin-top: 14px;
}

.uf-split-block { align-self: center; min-width: 0; }
.uf-split-bar-title {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 900; color: var(--uf-orange); margin-bottom: 18px;
}
.uf-split-bar {
  position: relative; height: 54px; width: 100%;
  background: rgba(253,248,238,.08);
  display: flex; overflow: hidden; margin-bottom: 20px;
}
.uf-split-bar-seg {
  position: relative; height: 100%;
  display: flex; align-items: center; padding: 0 20px;
  font-size: 18px; font-weight: 900; color: var(--uf-cream);
  letter-spacing: -.01em;
  transform-origin: left center; transform: scaleX(1);
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
  flex-shrink: 0;
  min-width: 0;
}
.uf-split-bar-seg span { transition: opacity .4s ease .7s; }
.uf-alachua-card.uf-in .uf-split-bar-seg { transform: scaleX(1); }
.uf-alachua-card.uf-in .uf-split-bar-seg span { opacity: 1; }
.uf-split-direct { background: var(--uf-orange); transition-delay: .2s; }
.uf-split-indirect { background: var(--uf-cream); color: var(--uf-navy); transition-delay: .7s; }
.uf-alachua-card.uf-in .uf-split-indirect span { transition-delay: 1.2s; }

.uf-split-legend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.uf-split-legend-item {
  display: flex; flex-direction: column; gap: 6px;
  transition: opacity .55s ease, transform .55s ease;
}
.uf-alachua-card.uf-in .uf-split-legend-item { opacity: 1; transform: none; }
.uf-alachua-card.uf-in .uf-split-legend-item:nth-child(1) { transition-delay: 1.3s; }
.uf-alachua-card.uf-in .uf-split-legend-item:nth-child(2) { transition-delay: 1.45s; }

.uf-split-legend-item h4 {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 900;
  display: flex; align-items: center; gap: 10px; line-height: 1.1; margin: 0; flex-wrap: wrap;
}
.uf-split-legend-item h4 .uf-pct { font-size: 18px; font-weight: 900; letter-spacing: -.01em; }
.uf-split-legend-item h4 .uf-dot { width: 10px; height: 10px; flex-shrink: 0; }
.uf-split-legend-direct h4 { color: var(--uf-orange); }
.uf-split-legend-direct h4 .uf-dot { background: var(--uf-orange); }
.uf-split-legend-indirect h4 { color: var(--uf-cream); }
.uf-split-legend-indirect h4 .uf-dot { background: var(--uf-cream); }
.uf-split-legend-item p { font-size: 13px; font-weight: 600; color: rgba(253,248,238,.78); line-height: 1.5; margin: 0; }

.uf-fin-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px;
  padding-bottom: 56px; border-bottom: 2px dotted rgba(253,248,238,.25);
  margin-bottom: 56px;
}
.uf-fin-stat {
  padding: 32px 28px; border: 2px dotted rgba(253,248,238,.3);
  transition: opacity .55s ease, transform .55s ease;
}
.uf-alachua-card.uf-in .uf-fin-stat { opacity: 1; transform: none; }
.uf-alachua-card.uf-in .uf-fin-stat:nth-child(1) { transition-delay: 1.5s; }
.uf-alachua-card.uf-in .uf-fin-stat:nth-child(2) { transition-delay: 1.65s; }
.uf-fin-label {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 900; color: var(--uf-orange); margin-bottom: 14px;
}
.uf-fin-value {
  font-size: clamp(36px, 4.6vw, 58px); font-weight: 900;
  letter-spacing: -.025em; color: var(--uf-cream); line-height: .95;
}
.uf-fin-sub { font-size: 14px; font-weight: 700; color: rgba(253,248,238,.78); margin-top: 12px; line-height: 1.4; }

.uf-share-row {
  display: grid; grid-template-columns: minmax(0, 2fr) auto auto; gap: 48px; align-items: center;
}
.uf-share-heading {
  font-size: clamp(20px, 2.2vw, 30px); font-weight: 900; letter-spacing: -.01em;
  color: var(--uf-cream); text-transform: uppercase; line-height: 1.05;
}
.uf-share-heading em { font-style: italic; color: var(--uf-orange); font-weight: 900; }
.uf-share-eyebrow {
  display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 900; color: var(--uf-orange); margin-bottom: 10px;
}

.uf-gauge { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.uf-gauge-svg { width: 140px; height: 140px; }
.uf-gauge-track { fill: none; stroke: rgba(253,248,238,.12); stroke-width: 14; }
.uf-gauge-fill {
  fill: none; stroke: var(--uf-orange); stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: var(--uf-dash-to, 0 999);
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dasharray 1.3s cubic-bezier(.22,.61,.36,1);
}
.uf-alachua-card.uf-in .uf-gauge-fill { stroke-dasharray: var(--uf-dash-to, 0 999); }
.uf-gauge-alt { stroke: var(--uf-cream); }
.uf-gauge-num {
  fill: var(--uf-cream); font-family: 'Mulish', sans-serif; font-weight: 900;
  font-size: 32px; text-anchor: middle; dominant-baseline: middle;
  transition: opacity .5s ease;
}
.uf-alachua-card.uf-in .uf-gauge-num { opacity: 1; transition-delay: 2s; }
.uf-gauge-label {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 900; color: rgba(253,248,238,.78); text-align: center; line-height: 1.4;
  transition: opacity .5s ease, transform .5s ease;
}
.uf-alachua-card.uf-in .uf-gauge-label { opacity: 1; transform: none; transition-delay: 2.15s; }

@media(max-width:860px) {
  .uf-hero-jobs { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .uf-alachua-card { padding: 40px 24px; }
  .uf-share-row { grid-template-columns: minmax(0, 1fr); gap: 32px; justify-items: center; text-align: center; }
}
@media(max-width:560px) {
  .uf-fin-row { grid-template-columns: minmax(0, 1fr); }
  .uf-split-legend { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================================
   5. ANIMATION START STATES

   Everything above renders the FINISHED graphic. The start states below are the
   only thing that hides anything, and they apply only when `uf-js` is present
   on <html> - a flag set by a tiny inline script in the head, which removes
   itself again if this stylesheet's companion JS never arrives.

   The result: no JavaScript, a blocked or 404'd script file, a strict CSP, or
   an optimization plugin that mangles the bundle all end in a fully visible
   (just un-animated) infographic rather than an empty box.

   Wrapping the block in `prefers-reduced-motion: no-preference` means readers
   who ask for reduced motion never get a start state either, so there is
   nothing to animate away from.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .uf-js .uf-chev-fill          { transform: scaleX(0); }
  .uf-js .uf-chev-content       { opacity: 0; transform: translateX(-12px); }

  .uf-js .uf-pie-slice          { opacity: 0; transform: scale(.94); }
  .uf-js .uf-pie-label          { opacity: 0; }
  .uf-js .uf-legend-item        { opacity: 0; transform: translateY(6px); }
  .uf-js .uf-pie-total          { opacity: 0; transform: translateY(8px); }

  .uf-js .uf-donut-arc          { stroke-dasharray: var(--uf-dash-from, 0 9999); }
  .uf-js .uf-donut-pct          { opacity: 0; }
  .uf-js .uf-donut-center       { opacity: 0; }
  .uf-js .uf-donut-label        { opacity: 0; transform: translateY(8px); }

  .uf-js .uf-split-bar-seg      { transform: scaleX(0); }
  .uf-js .uf-split-bar-seg span { opacity: 0; }
  .uf-js .uf-split-legend-item  { opacity: 0; transform: translateY(8px); }
  .uf-js .uf-fin-stat           { opacity: 0; transform: translateY(12px); }
  .uf-js .uf-gauge-fill         { stroke-dasharray: var(--uf-dash-from, 0 999); }
  .uf-js .uf-gauge-num          { opacity: 0; }
  .uf-js .uf-gauge-label        { opacity: 0; transform: translateY(8px); }
}

/* Belt and braces: never run a transition for readers who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .uf-chev-fill, .uf-chev-content, .uf-pie-slice, .uf-pie-label, .uf-legend-item,
  .uf-pie-total, .uf-donut-arc, .uf-donut-pct, .uf-donut-center, .uf-donut-label,
  .uf-split-bar-seg, .uf-split-bar-seg span, .uf-split-legend-item, .uf-fin-stat,
  .uf-gauge-fill, .uf-gauge-num, .uf-gauge-label {
    transition: none !important;
    transition-delay: 0s !important;
  }
}