/* =========================================================
   planting-calendar.css  (FutureSprouts planting calendar module)

   Styles for the widget rendered by planting-calendar.js.
   Everything is scoped under the single root class .fs-pcal so
   nothing leaks into site styles. Uses the site palette custom
   properties with hardcoded fallbacks so the demo works standalone.

   Mobile-first: the month picker plus a filtered crop list render
   by default; the full 12-column grid appears at >= 760px.
   ========================================================= */

.fs-pcal {
  --pcal-bg: var(--bg, #F8F3E7);
  --pcal-bg2: var(--bg2, #EFE6CF);
  --pcal-card: var(--card, #FFFDF6);
  --pcal-text: var(--text, #29321F);
  --pcal-muted: var(--muted, #5D6450);
  --pcal-green: var(--green, #3E7C4B);
  --pcal-green-dark: var(--greenDark, #275634);
  --pcal-soil: var(--soil, #7A5233);
  --pcal-harvest: var(--harvest, #C3752B);
  --pcal-sun: var(--sun, #E7B75F);

  font-family: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--pcal-text);
  background: var(--pcal-card);
  border: 1.5px solid color-mix(in oklab, var(--pcal-soil, #7A5233) 32%, transparent);
  box-shadow: 0 8px 22px rgba(74, 58, 34, 0.09);
  border-radius: 14px;
  padding: 1rem;
  max-width: 100%;
  box-sizing: border-box;
}

.fs-pcal *,
.fs-pcal *::before,
.fs-pcal *::after {
  box-sizing: border-box;
}

.fs-pcal__title {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0 0 0.15rem;
  color: var(--pcal-text);
}

.fs-pcal__zone {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: var(--pcal-muted);
}

/* ---------- month picker ---------- */

.fs-pcal__months {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  padding: 0;
  list-style: none;
}

.fs-pcal__month-btn {
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  border: 1.5px solid color-mix(in oklab, var(--pcal-soil, #7A5233) 26%, transparent);
  background: var(--pcal-bg);
  color: var(--pcal-text);
  cursor: pointer;
  flex: 1 1 44px;
}

.fs-pcal__month-btn:hover {
  border-color: var(--pcal-green);
}

.fs-pcal__month-btn[aria-pressed="true"] {
  background: var(--pcal-green);
  border-color: var(--pcal-green-dark);
  color: #FFFDF6;
}

/* dark theme lightens --green, so the pressed label flips to a dark ink
   to keep WCAG AA contrast on the lighter green fill */
:root[data-theme="dark"] .fs-pcal .fs-pcal__month-btn[aria-pressed="true"] {
  color: #14170F;
}

.fs-pcal__month-btn:focus-visible,
.fs-pcal button:focus-visible {
  outline: 3px solid var(--pcal-green-dark);
  outline-offset: 2px;
}

/* ---------- legend ---------- */

.fs-pcal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: var(--pcal-bg);
  font-size: 0.88rem;
  color: var(--pcal-text);
}

.fs-pcal__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---------- state glyphs: shape + color, never color alone ----------
   start indoors = green circle
   direct sow    = brown diamond
   harvest       = orange triangle */

.fs-pcal-glyph {
  display: inline-block;
  flex: none;
}

.fs-pcal-glyph--indoors {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--pcal-green);
  border: 1.5px solid var(--pcal-green-dark);
}

.fs-pcal-glyph--sow {
  width: 10px;
  height: 10px;
  background: var(--pcal-soil);
  transform: rotate(45deg);
}

.fs-pcal-glyph--harvest {
  width: 0;
  height: 0;
  border-left: 6.5px solid transparent;
  border-right: 6.5px solid transparent;
  border-bottom: 11px solid var(--pcal-harvest);
}

/* ---------- live summary ---------- */

.fs-pcal__summary {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.75rem;
  border-left: 5px solid var(--pcal-green);
  border-radius: 0 10px 10px 0;
  background: var(--pcal-bg);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--pcal-text);
}

.fs-pcal__summary strong {
  font-family: "Fraunces", Georgia, serif;
}

/* ---------- narrow layout: filtered list (default, mobile-first) ---------- */

.fs-pcal__list {
  display: grid;
  gap: 0.75rem;
}

.fs-pcal__group {
  background: var(--pcal-bg);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
}

.fs-pcal__group-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--pcal-text);
}

.fs-pcal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-pcal__chip {
  font-size: 0.85rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: var(--pcal-card);
  border: 1px solid var(--pcal-bg2);
  color: var(--pcal-text);
}

.fs-pcal__none {
  margin: 0;
  font-size: 0.85rem;
  color: var(--pcal-muted);
}

/* ---------- wide layout: 12-column grid (table) ---------- */

.fs-pcal__tablewrap {
  display: none;
}

.fs-pcal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.fs-pcal__table caption {
  text-align: left;
}

.fs-pcal__table th,
.fs-pcal__table td {
  border: 1px solid var(--pcal-bg2);
  padding: 0.3rem 0.25rem;
  text-align: center;
}

.fs-pcal__table thead th {
  font-weight: 800;
  color: var(--pcal-muted);
  background: var(--pcal-bg);
  font-size: 0.8rem;
}

.fs-pcal__table th[scope="row"] {
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  background: var(--pcal-card);
}

.fs-pcal__cell-glyphs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 13px;
}

/* selected month column */
.fs-pcal__table .is-selmonth {
  background: rgba(62, 124, 75, 0.14);
  background: color-mix(in oklab, var(--pcal-green) 16%, transparent);
}

.fs-pcal__table thead th.is-selmonth {
  color: var(--pcal-green-dark);
  box-shadow: inset 0 -3px 0 var(--pcal-green);
}

/* rows with no activity in the selected month: keep full AA contrast,
   just shift the crop name to the muted (still AA) tone */
.fs-pcal__table tr.is-quiet th[scope="row"] {
  color: var(--pcal-muted);
  font-weight: 600;
}

.fs-pcal__table tr.is-hit th[scope="row"] {
  background: rgba(62, 124, 75, 0.10);
  background: color-mix(in oklab, var(--pcal-green) 10%, var(--pcal-card));
}

/* ---------- screen reader only helper ---------- */

.fs-pcal .fs-pcal-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- breakpoint: grid replaces list on wide screens ---------- */

@media (min-width: 760px) {
  .fs-pcal__list {
    display: none;
  }

  .fs-pcal__tablewrap {
    display: block;
    overflow-x: auto;
  }

  .fs-pcal__month-btn {
    flex: none;
  }
}

/* ---------- motion: transitions only when motion is welcome ---------- */

@media (prefers-reduced-motion: no-preference) {
  .fs-pcal__month-btn {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  }

  .fs-pcal__table td,
  .fs-pcal__table th {
    transition: background-color 160ms ease;
  }
}

:root[data-theme="dark"] .fs-pcal {
  border-color: color-mix(in oklab, var(--sun, #E7C77F) 24%, transparent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}