/* ============================================================
   COUPLE-WEBSITE.HTML — Couple's wedding-site editor dashboard
   ------------------------------------------------------------
   Page-specific styles ONLY. Sidebar, topbar, dashboard chrome,
   body, and shared button base live in layout.css / dashboard.css
   / components.css. All tokens resolve to css/variables.css.
   ============================================================ */

/* ── Page header ───────────────────────────────── */
.page-head { margin-bottom: 28px; }
.page-head h1 { font-family: var(--font-display); font-size: 2rem; font-weight: var(--fw-medium); margin-bottom: 6px; }
.page-head p { color: var(--color-mid-grey); font-size: var(--fs-sm); }

/* Topbar title + right-side controls only — sidebar/topbar
   shell itself comes from layout.css + dashboard.css. */
.topbar-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--fw-semibold); }
.topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--color-hairline);
  background: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  color: var(--color-charcoal);
  text-decoration: none;
  font-family: inherit;
}
.topbar-btn:hover { background: var(--color-champagne); }
.topbar-btn.primary { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); }
.topbar-btn.primary:hover { background: var(--color-accent-deep); }
.topbar-btn i { width: 14px; height: 14px; }
.save-indicator { font-size: var(--fs-xs); color: var(--color-mid-grey); }
.save-indicator.saved { color: var(--color-success); }

/* ── URL bar ──────────────────────────────────── */
.url-bar {
  background: var(--color-white);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.url-bar-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 280px; }
.url-bar-icon {
  width: 42px;
  height: 42px;
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.url-bar-text { flex: 1; min-width: 0; }
.url-bar-label { font-size: var(--fs-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-mid-grey); margin-bottom: 4px; }
.url-bar-value { font-family: var(--font-mono); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--color-charcoal); word-break: break-all; }
.url-bar-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.url-btn {
  padding: 9px var(--space-4);
  border-radius: var(--r-md);
  border: 1px solid var(--color-hairline);
  background: var(--color-white);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-charcoal);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-family: inherit;
}
.url-btn:hover { background: var(--color-champagne); }
.url-btn i { width: 14px; height: 14px; }

/* ── Section cards ─────────────────────────────── */
/* OVERRIDE: dashboard.css uses .section-card with .section-card-header /
   .section-card-body sub-components for padding. This page puts content
   directly inside .section-card, so we pad the card itself and use a
   shadow instead of dashboard.css's stone border. */
.section-card {
  background: var(--color-white);
  border-radius: var(--r-lg);
  padding: 28px;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.section-card h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-card h2 i { width: 22px; height: 22px; color: var(--color-accent); }
.section-card .section-desc { color: var(--color-mid-grey); font-size: var(--fs-sm); margin-bottom: 20px; }

/* ── Form bits ─────────────────────────────────── */
.field { margin-bottom: var(--space-4); }
.field-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: 6px; }
.field input[type="text"], .field input[type="date"], .field input[type="time"],
.field input[type="email"], .field input[type="tel"], .field input[type="number"],
.field textarea, .field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--color-charcoal);
  background: var(--color-champagne);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}
.field textarea { resize: vertical; min-height: 70px; }
.field-hint { font-size: var(--fs-xs); color: var(--color-mid-grey); margin-top: 4px; }

.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 14px;
  background: var(--color-champagne);
  border-radius: var(--r-md);
  cursor: pointer;
}
.toggle-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-accent); flex-shrink: 0; }
.toggle-row .toggle-label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.toggle-row .toggle-hint { font-size: var(--fs-xs); color: var(--color-mid-grey); margin-top: 2px; }

/* ── Day editor ────────────────────────────────── */
.day-edit-card {
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 14px;
  background: var(--color-champagne);
}
.day-edit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.day-edit-title { font-family: var(--font-display); font-size: 20px; font-weight: var(--fw-semibold); }
.day-edit-remove {
  background: none;
  border: none;
  color: var(--color-mid-grey);
  font-size: var(--fs-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.day-edit-remove:hover { color: var(--color-danger); }
.day-edit-remove i { width: 13px; height: 13px; }

.schedule-edit { margin-top: 14px; }
.schedule-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}
.schedule-row input {
  padding: var(--space-2) 10px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  background: var(--color-white);
  font-family: inherit;
}
.schedule-row button { background: none; border: 0; color: var(--color-mid-grey); cursor: pointer; padding: 4px; }
.schedule-row button:hover { color: var(--color-danger); }

.btn-add-row {
  background: var(--color-white);
  border: 1px dashed var(--color-accent);
  color: var(--color-accent-deep);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  margin-top: 6px;
}
.btn-add-row:hover { background: var(--color-accent-soft); }
.btn-add-row i { width: 14px; height: 14px; }

/* ── Story / FAQ repeater ──────────────────────── */
.story-para { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.story-para textarea { flex: 1; }
.story-para button { background: none; border: 0; color: var(--color-mid-grey); cursor: pointer; padding: 4px var(--space-2); align-self: flex-start; }
.story-para button:hover { color: var(--color-danger); }

.faq-item {
  background: var(--color-champagne);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 10px;
}
.faq-item input { margin-bottom: var(--space-2); }
.faq-item .remove-faq {
  background: none;
  border: 0;
  color: var(--color-mid-grey);
  font-size: var(--fs-xs);
  cursor: pointer;
  margin-top: 6px;
}

/* ── Theme / accent picker ─────────────────────── */
.theme-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-swatch {
  width: 38px;
  height: 38px;
  border-radius: var(--r-circle);
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.theme-swatch:hover { transform: scale(1.1); }
.theme-swatch.active { border-color: var(--color-charcoal); transform: scale(1.1); }

/* ── Save bar ──────────────────────────────────── */
.save-bar {
  position: sticky;
  bottom: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-hairline);
  padding: var(--space-4) var(--space-7);
  margin: var(--space-7) calc(var(--space-7) * -1) calc(var(--space-7) * -1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.save-bar .save-meta { font-size: var(--fs-sm); color: var(--color-mid-grey); }
.save-bar .save-actions { display: flex; gap: 10px; }

/* OVERRIDE: components.css ships a shared .btn but uses the
   .btn-primary / .btn--primary modifier convention. The markup on
   this page uses class="btn primary", so we re-declare .btn with
   the editor's chip styling and define .btn.primary to match. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--color-hairline);
  background: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  color: var(--color-charcoal);
  text-decoration: none;
  font-family: inherit;
}
.btn.primary { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); }
.btn.primary:hover { background: var(--color-accent-deep); }
.btn:hover { background: var(--color-champagne); }
.btn i { width: 14px; height: 14px; }

/* ── RSVP responses summary ────────────────────── */
.rsvp-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.rsvp-stat { background: var(--color-champagne); border-radius: var(--r-md); padding: 14px; text-align: center; }
.rsvp-stat-num {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--color-accent-deep);
  font-weight: var(--fw-semibold);
}
.rsvp-stat-label { font-size: var(--fs-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-mid-grey); margin-top: 4px; }