/* ============================================================================
   cda-availability.css — styles for the availability widget.

   Uses the Case d'Arte design tokens (warm plaster paper, Ruche wine, clay);
   swap the custom properties below to re-skin the widget for any other site.
   The widget is a plain block element: it inherits the page's fonts and
   adapts to its container width (3 months -> 2 -> 1 as space shrinks).
   ========================================================================== */

[data-cda-availability] {
  --cda-paper: #fbf8f1;
  --cda-ink: #211c16;
  --cda-ink-soft: #5d5347;
  --cda-accent: #7c2b27;      /* wine: interactive */
  --cda-busy: #b0633e;        /* clay: the strike-through */
  --cda-line: #e3d9c8;
  --cda-radius: 12px;
  display: block;
}

/* ── header row: summary + month navigation ─────────────────────────────── */
.cda-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cda-summary { margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.35rem; color: var(--cda-ink); }
.cda-nav { display: flex; gap: .4rem; }
.cda-nav button {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1.5px solid var(--cda-line);
  background: var(--cda-paper); color: var(--cda-ink); font-size: 1rem; cursor: pointer;
  transition: border-color .2s, color .2s, transform .2s;
}
.cda-nav button:hover:not([disabled]) { border-color: var(--cda-accent); color: var(--cda-accent); transform: translateY(-1px); }
.cda-nav button[disabled] { opacity: .35; cursor: default; }

/* ── month grid ─────────────────────────────────────────────────────────── */
.cda-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.3rem; }
.cda-month h4 {
  margin: 0 0 .5rem; font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: 1.05rem; color: var(--cda-ink); text-transform: capitalize;
}
.cda-month table {
  width: 100%; border-collapse: collapse; background: var(--cda-paper);
  border: 1px solid var(--cda-line); border-radius: var(--cda-radius); overflow: hidden;
  box-shadow: 0 1px 2px rgba(33, 28, 22, .05);
}
.cda-month th {
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cda-ink-soft); padding: .55rem 0 .35rem;
}
.cda-month td { text-align: center; padding: .38rem 0; font-size: .92rem; width: 14.28%; color: var(--cda-ink); }
.cda-month td.past { color: #c9bda9; }
.cda-month td.free { font-weight: 600; }
.cda-month td.busy { color: #b6a896; position: relative; }
.cda-month td.busy span { position: relative; }
.cda-month td.busy span::after {
  content: ""; position: absolute; left: -3px; right: -3px; top: 52%; height: 1.5px;
  background: var(--cda-busy); transform: rotate(-14deg);
}
.cda-month td.is-today span { outline: 1.5px solid var(--cda-accent); outline-offset: 3px; border-radius: 50%; }

/* ── legend + meta line ─────────────────────────────────────────────────── */
.cda-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; margin-top: 1rem; font-size: .85rem; color: var(--cda-ink-soft); }
.cda-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.cda-dot-free { width: 9px; height: 9px; border-radius: 50%; background: var(--cda-ink); }
.cda-dot-busy { width: 14px; height: 1.5px; background: var(--cda-busy); transform: rotate(-14deg); }
.cda-meta { margin-left: auto; font-style: italic; font-size: .8rem; }

/* ── compact chip (house cards, overviews) ──────────────────────────────── */
.cda-chip {
  display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1.05rem;
  background: var(--cda-paper); border: 1.5px solid var(--cda-line); border-radius: 999px;
  font-size: .95rem; color: var(--cda-ink);
}
.cda-chip b { font-weight: 700; }
.cda-chip i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cda-chip.is-free i { background: #3e7c3a; }
.cda-chip.is-later i { background: #c9a227; }
.cda-chip.is-full i { background: var(--cda-busy); }

/* ── loading skeleton (respects reduced motion) ─────────────────────────── */
.cda-skel-line { width: 40%; height: 1.6rem; border-radius: 6px; margin-bottom: 1rem; }
.cda-skel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.3rem; }
.cda-skel-month { height: 220px; border-radius: var(--cda-radius); }
.cda-skel-line, .cda-skel-month {
  background: linear-gradient(100deg, #efe7d8 40%, #f7f1e6 50%, #efe7d8 60%);
  background-size: 200% 100%; animation: cda-shimmer 1.4s infinite linear;
}
@keyframes cda-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .cda-skel-line, .cda-skel-month { animation: none; } }

/* ── graceful failure ───────────────────────────────────────────────────── */
.cda-error {
  background: var(--cda-paper); border: 1px solid var(--cda-line); border-left: 4px solid var(--cda-busy);
  border-radius: var(--cda-radius); padding: 1.2rem 1.4rem; color: var(--cda-ink);
}
.cda-error b { display: block; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.08rem; margin-bottom: .3rem; }
.cda-error span { color: var(--cda-ink-soft); font-size: .98rem; }