/* ==========================================================================
   AB 1572 Non-Functional Turf compliance countdown
   yourscvwater.com

   Brand tokens below were read off the live site:
     /css/main.css                    — Poppins, #015989, #0e1827, #009dc8, #f9d930
     /themes/civic/dist/custom-1.css  — #002838, #72b061, #9fcf62

   If the civic theme exposes its own custom properties, delete this block and
   point the --nft-* names at those instead so the countdown tracks any future
   palette change automatically.
   ========================================================================== */
.nft-cd {
  --nft-primary:   #015989;
  --nft-primary-d: #014d6e;
  --nft-deep:      #002838;
  --nft-cyan:      #009dc8;
  --nft-yellow:    #f9d930;
  --nft-green:     #72b061;
  --nft-ink:       #0e1827;
  --nft-pale:      #ecf8fd;
  --nft-rule:      #dee2e6;
  --nft-muted:     #5b6b78;

  /* Layout constants. These are declared ONCE, here. The JS reads no widths —
     it only ever sets a percentage — so a breakpoint or a longer translated
     label can change --nft-labelw freely and the Today line follows. */
  --nft-labelw: 208px;
  --nft-gap:    16px;

  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--nft-ink);
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom:50px;
  -webkit-font-smoothing: antialiased;
}



.nft-cd *, .nft-cd *::before, .nft-cd *::after { box-sizing: border-box; }

/* ---------- heading ---------- */
.nft-cd__kicker {
  font-weight: 700; font-size: 14px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--nft-cyan); margin: 0 0 8px;
}
.nft-cd__title {
  font-weight: 500; font-size: clamp(28px, 1.4rem + 1.8vw, 42px);
  line-height: 1.2; color: var(--nft-primary); margin: 0 0 12px;
}
.nft-cd__lede { font-size: 16px; max-width: 760px; margin: 0 0 40px; }

.nft-cd__sub {
  font-weight: 600; font-size: 14px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nft-primary);
  margin: 0 0 18px; padding-bottom: 10px;
  border-bottom: 2px solid var(--nft-cyan);
}

/* ==========================================================================
   TIMELINE
   One lane per customer group on a shared 2024–2031 axis. Each lane is green
   from the start of the law to that group's own deadline, then blue after it.
   ========================================================================== */
.nft-tl__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nft-tl__inner  { min-width: 620px; }

.nft-tl__grid {
  position: relative;                    /* the overlay anchors to this */
  display: grid;
  grid-template-columns: var(--nft-labelw) 1fr;
  column-gap: var(--nft-gap);
  row-gap: 10px;
  align-items: center;
  padding-top: 30px;                     /* room for the Today flag */
}

/* Track-area wrapper. Covers exactly the lane column, so anything inside can
   use a plain left:N% with no knowledge of the label column at all. */
.nft-tl__overlay {
  position: absolute;
  left: calc(var(--nft-labelw) + var(--nft-gap));
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 3;
}

.nft-tl__today {
  position: absolute;
  top: 24px; bottom: -4px;
  width: 2px;
  background: var(--nft-deep);
  transform: translateX(-1px);
}
.nft-tl__today::before {
  content: '';
  position: absolute; top: -5px; left: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--nft-deep); transform: translateX(-50%);
}
.nft-tl__todaylabel {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  background: var(--nft-deep); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 30px; white-space: nowrap;
}

.nft-tl__axis { position: relative; height: 20px; }
.nft-tl__year {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 12px; font-weight: 600; color: var(--nft-muted); white-space: nowrap;
}
.nft-tl__year--first { transform: translateX(0); }
.nft-tl__year--last  { transform: translateX(-100%); }

.nft-tl__name {
  font-size: 13px; font-weight: 500; line-height: 1.35;
  text-align: right; color: var(--nft-ink); margin: 0;
}

.nft-tl__lane {
  position: relative; height: 22px; border-radius: 11px;
  overflow: hidden; background: var(--nft-primary);
}
.nft-tl__allowed {                        /* potable irrigation still permitted */
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--nft-green);
  transition: width .8s cubic-bezier(.2,.7,.3,1);
}
.nft-tl__deadline {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: #fff; transform: translateX(-1px);
}

.nft-tl__key {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin: 18px 0 44px; font-size: 13px;
}
.nft-tl__key span { display: inline-flex; align-items: center; gap: 8px; }
.nft-tl__key i { width: 22px; height: 10px; border-radius: 30px; flex: none; }

/* ==========================================================================
   CARDS — cyan border echoes the table borders used elsewhere on the site
   ========================================================================== */
.nft-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.nft-card {
  border: 1px solid var(--nft-cyan);
  border-top: 5px solid var(--nft-green);
  border-radius: 6px; padding: 22px 20px 24px; background: #fff;
  display: flex; flex-direction: column; gap: 8px;
}
.nft-card--passed { background: var(--nft-pale); border-top-color: var(--nft-primary); }

.nft-card__date {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nft-primary); margin: 0;
}
.nft-card__count { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.nft-card__num {
  font-weight: 600; font-size: 52px; line-height: .95;
  color: var(--nft-primary); font-variant-numeric: tabular-nums;
}
.nft-card__unit {
  font-weight: 500; font-size: 15px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--nft-ink);
}
.nft-card__who { font-size: 14px; line-height: 1.45; margin: 0; }
.nft-card__who strong { font-weight: 600; }

.nft-cd__foot {
  margin: 32px 0 0; padding: 20px 22px;
  background: var(--nft-pale); border-radius: 6px; font-size: 14px;
}
.nft-cd__foot a { color: var(--nft-primary); font-weight: 600; }

/* ---------- responsive ----------
   On narrow screens the label column is dropped entirely and each group name
   sits above its own lane, so the chart fits without horizontal scrolling.
   Note that --nft-labelw and --nft-gap both go to 0 here and the overlay
   follows automatically — the JS is untouched by any of this. */
@media (max-width: 640px) {
  .nft-cd { --nft-labelw: 0px; --nft-gap: 0px; }

  .nft-tl__inner  { min-width: 0; }
  .nft-tl__grid   { grid-template-columns: 1fr; row-gap: 0; }
  .nft-tl__spacer { display: none; }

  .nft-tl__axis   { margin-bottom: 6px; }
  .nft-tl__name   { text-align: left; margin: 14px 0 5px; font-size: 12px; }

  /* Show every other year so the ticks don't collide. The axis is decorative
     and aria-hidden; every deadline date is spelled out in the cards below. */
  .nft-tl__year:nth-child(even) { display: none; }

  .nft-card__num  { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .nft-tl__allowed { transition: none; }
}