/* ==========================================================================
   The party invitation creator (inc/invitation.php)

   The card itself is drawn on a canvas by invitation-draw.js; this styles
   only the page around it, in the site's own form and button styles.

   The two fonts the invitation has always used. A font face costs nothing
   until something asks for it, so declaring them on every page is free.
   ========================================================================== */

@font-face {
  font-family: 'CA Le Petit Cochon';
  src: url('../fonts/le-petit-cochon.woff') format('woff');
  font-display: block;
}

@font-face {
  font-family: 'CA Dosis ExtraBold';
  src: url('../fonts/dosis-extrabold.woff') format('woff');
  font-display: block;
}

.ca-invite { --ca-invite-accent: var(--ca-orange); }

/* Hidden means hidden, whatever display a part has. */
.ca-invite [hidden] { display: none; }

.ca-invite__prompt {
  margin: 0 0 18px;
  text-align: center;
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ca-ink);
}

/* The designs: as big as they fit, two or more a row. */
.ca-invite__designs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
}

.ca-invite__design {
  display: block;
  padding: 0;
  border: 4px solid transparent;
  border-radius: var(--ca-r-md);
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--ca-dur-fast) var(--ca-ease), transform var(--ca-dur-fast) var(--ca-ease);
}

.ca-invite__design:hover,
.ca-invite__design:focus-visible {
  border-color: var(--ca-invite-accent);
  transform: translateY(-2px);
  outline: none;
}

.ca-invite__design img,
.ca-invite__thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.ca-invite__back { margin-bottom: 18px; }

/* Making it: the details beside the card, the card first on a phone. */
.ca-invite__work {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--ca-sec-gap, 32px);
  align-items: start;
}

.ca-invite .ca-invite__form { max-width: none; margin: 0; }

.ca-invite__card { position: sticky; top: calc(var(--ca-logo-height, 56px) + 92px); }

.ca-invite__canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ca-r-md);
  box-shadow: var(--ca-shadow-sm);
  background: var(--ca-sand);
}

.ca-invite__error {
  display: block;
  margin-top: 6px;
  color: #B3261E;
  font-size: 14px;
}

.ca-invite [aria-invalid="true"] { border-color: #B3261E; }

.ca-invite__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 0;
}

/* Emailing it. */
.ca-invite .ca-invite__send {
  max-width: none;
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(20, 25, 43, 0.12);
}

.ca-invite__send-title { margin: 0 0 8px; font-size: 22px; }

.ca-invite__guests {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 10px 14px;
  margin: 14px 0;
}

.ca-invite__guest {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.ca-invite__guest label { flex: 1; }
.ca-invite__guest .ca-input { width: 100%; }

.ca-invite__remove {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--ca-sand);
  color: var(--ca-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ca-invite__status { margin: 12px 0 0; min-height: 1.5em; font-weight: 600; }

.ca-invite__sent { text-align: center; padding: 24px 0; }
.ca-invite__sent:focus { outline: none; }

@media (max-width: 820px) {
  .ca-invite__work { grid-template-columns: minmax(0, 1fr); }
  .ca-invite__card { position: static; order: -1; }
}

/* In the editor: the card preview above the designs, and each design's name. */
.ca-invite-edit__preview { max-width: 420px; margin: 0 auto 24px; text-align: center; }
.ca-invite-edit__preview .ca-note { margin-top: 8px; }
.ca-invite-edit__design { position: relative; }
.ca-invite-edit__design.is-chosen { border-color: var(--ca-invite-accent); }
.ca-invite-edit__label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 10px;
  border-radius: var(--ca-r-pill);
  background: rgba(20, 25, 43, 0.75);
  color: #fff;
  font-size: 13px;
}
.ca-invite-edit__label:empty { display: none; }