/* ============================================================
   Pollen Count – Albany NY  |  Widget Styles  v1.1
   Single-row responsive horizontal layout
   ============================================================ */

/* ── CSS Custom Properties ───────────────────────────────────── */
:root {
  --pca-card-bg:    #ffffff;
  --pca-card-text:  #333333;
  --pca-label:      #666666;
  --pca-track:      #e0e0e0;
  --pca-radius:     14px;
  --pca-shadow:     0 4px 20px rgba(0, 0, 0, 0.08);
  --pca-transition: 0.6s ease;
}

/* ── Widget card ─────────────────────────────────────────────── */
.pca-widget {
  background:    var(--pca-card-bg);
  color:         var(--pca-card-text);
  border-radius: var(--pca-radius);
  padding:       16px 20px 14px;
  width:         100%;
  box-sizing:    border-box;
  font-family:   inherit;
}

/* ── Slim header bar ─────────────────────────────────────────── */
.pca-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   12px;
}

.pca-location {
  font-size:   0.8rem;
  font-weight: 600;
  color:       var(--pca-card-text);
}

.pca-updated-inline {
  font-size: 0.68rem;
  color:     var(--pca-label);
  opacity:   0.75;
}

/* ── Main horizontal row ─────────────────────────────────────── */
.pca-row {
  display:     flex;
  align-items: center;
  gap:         0;
  width:       100%;
  min-width:   0;
}

/* ── Pollen rings group ──────────────────────────────────────── */
.pca-rings {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-around;
  gap:             4px;
  flex:            3;          /* rings take 3× the space of each weather column */
  min-width:       0;
}

/* ── Individual ring wrapper ─────────────────────────────────── */
.pca-ring-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
  flex:           1 1 0;
  min-width:      0;
}

/* ── SVG ring container ──────────────────────────────────────── */
.pca-ring {
  position:      relative;
  width:         100%;
  aspect-ratio:  1 / 1;
  /* Cap size so rings don't get enormous on wide widgets */
  max-width:     90px;
}

.pca-ring svg {
  width:   100%;
  height:  100%;
  display: block;
}

/* Animated fill arc */
.pca-ring-fill {
  transition: stroke-dasharray var(--pca-transition),
              stroke            var(--pca-transition);
}

/* ── Centre text inside ring ─────────────────────────────────── */
.pca-ring-inner {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  pointer-events:  none;
}

.pca-ring-index {
  font-size:      1.55rem;
  font-weight:    800;
  line-height:    1;
  color:          var(--pca-card-text);
  letter-spacing: -0.03em;
}

/* ── Ring label & category ───────────────────────────────────── */
.pca-ring-label {
  font-size:   0.75rem;
  font-weight: 600;
  color:       var(--pca-card-text);
  text-align:  center;
  white-space: nowrap;
}

.pca-ring-category {
  font-size:      0.65rem;
  font-weight:    600;
  text-align:     center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space:    nowrap;
  /* Colour set inline from PHP */
}

.pca-out-of-season {
  font-size:  0.58rem;
  color:      var(--pca-label);
  text-align: center;
  opacity:    0.75;
  font-style: italic;
  white-space: nowrap;
}

/* ── Column divider (between rings and weather) ──────────────── */
.pca-col-divider {
  width:      1px;
  height:     70px;
  background: var(--pca-track);
  flex-shrink: 0;
  margin:     0 12px;
}

/* ── Weather columns ─────────────────────────────────────────── */
.pca-weather-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3px;
  flex:           1 1 0;
  min-width:      0;
}

.pca-weather-icon {
  font-size:   1.2rem;
  line-height: 1;
}

.pca-weather-value {
  font-size:   0.95rem;
  font-weight: 700;
  color:       var(--pca-card-text);
  white-space: nowrap;
}

.pca-weather-label {
  font-size:      0.65rem;
  color:          var(--pca-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space:    nowrap;
}

.pca-weather-error {
  font-size: 0.75rem;
  color:     var(--pca-label);
  margin:    0;
}

/* ── Error state ─────────────────────────────────────────────── */
.pca-widget.pca-error {
  border:        1px solid #f5c6cb;
  background:    #fff5f5;
  color:         #721c24;
  padding:       16px 20px;
  border-radius: var(--pca-radius);
}

.pca-widget.pca-error p {
  margin:    0;
  font-size: 0.875rem;
}

/* ── Responsive scaling ──────────────────────────────────────── */

/* Tablet portrait + mobile (≤768px):
   Stack weather below rings instead of sitting beside them.       */
@media (max-width: 768px) {
  .pca-row {
    flex-wrap: wrap;
  }

  /* Rings row takes full width */
  .pca-rings {
    flex: 0 0 100%;
    justify-content: space-around;
  }

  /* Repurpose the vertical divider as a full-width horizontal rule */
  .pca-col-divider {
    flex:    0 0 100%;
    width:   100%;
    height:  1px;
    margin:  12px 0;
  }

  /* Weather items form a centred row below */
  .pca-weather-item {
    flex:            1 1 0;
    justify-content: center;
    padding:         0 12px;
  }

  /* Subtle vertical rule between the two weather columns */
  .pca-weather-item + .pca-weather-item {
    border-left: 1px solid var(--pca-track);
  }
}

/* Narrow mobile (≤400px): tighten padding and shrink text slightly */
@media (max-width: 400px) {
  .pca-widget {
    padding: 14px 14px 12px;
  }

  .pca-ring-index {
    font-size: 1.25rem;
  }

  .pca-ring-label,
  .pca-ring-category {
    font-size: 0.62rem;
  }

  .pca-weather-value {
    font-size: 0.88rem;
  }

  .pca-weather-label {
    font-size: 0.6rem;
  }
}

/* ============================================================
   DARK MODE  –  .pca-widget--dark
   Designed for placement on dark blue / navy backgrounds.
   Shortcode:  [pollen_count theme="dark"]
   Breakdance: select "Dark" from the Colour Theme dropdown.
   ============================================================ */

.pca-widget--dark {
  /* Frosted-glass card over a dark background */
  background:    rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:        1px solid rgba(255, 255, 255, 0.12);
  box-shadow:    0 8px 32px rgba(0, 0, 0, 0.35),
                 inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* CSS variable overrides (also set inline by PHP as fallback) */
  --pca-card-bg:    rgba(255, 255, 255, 0.07);
  --pca-card-text:  #FFFFFF;
  --pca-label:      #94A3B8;
  --pca-track:      rgba(255, 255, 255, 0.12);
}

/* Ring track – override SVG presentation attribute with CSS */
.pca-widget--dark .pca-ring-track {
  stroke: rgba(255, 255, 255, 0.12);
}

/* Divider */
.pca-widget--dark .pca-col-divider {
  background: rgba(255, 255, 255, 0.15);
}

/* Weather strip background */
.pca-widget--dark .pca-weather-item {
  /* inherit text colour already handled by --pca-card-text */
}

/* Out-of-season badge */
.pca-widget--dark .pca-out-of-season {
  color: #64748B;
}

/* Error state in dark mode */
.pca-widget--dark.pca-error {
  background:  rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color:        #FCA5A5;
}