/* ==========================================================================
   Maison — shared invitation styles. Every design has its own invitation-<design>.css; this file holds
   the base tokens, floating controls, calendar menu, RSVP status, credit line, reveal and showcase watermark.
   Mobile-first; on larger screens the invitation sits in a centred column.
   Logical properties throughout so Arabic invitations mirror correctly.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html.inv-html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html.inv-locked, html.inv-locked body { overflow: hidden; }
body.inv-body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:where(.inv) img, :where(.inv) svg { display: block; max-width: 100%; }
:where(.inv) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.inv) a { color: inherit; }
.inv [hidden] { display: none !important; }
.inv :focus-visible { outline: 2px solid var(--inv-accent); outline-offset: 3px; }
.inv .icon { display: inline-block; vertical-align: middle; flex: none; }
.inv .icon--flip-rtl:dir(rtl) { transform: scaleX(-1); }

/* ------------------------------------------------------------------ tokens */
.inv {
  --inv-bg: #F7F3EC;
  --inv-ink: #2A2622;
  --inv-muted: rgba(42, 38, 34, 0.66);
  --inv-accent: #A9824F;
  --inv-soft: #EFE8DC;
  --inv-line: rgba(169, 130, 79, 0.42);
  --inv-card: rgba(255, 255, 255, 0.42);
  --inv-paper: #EDE3D2;
  --inv-paper-2: #E2D4BD;
  --inv-paper-3: #F3ECDF;
  --inv-seal: #A9824F;
  --inv-seal-2: #8C6A3E;
  --inv-seal-ink: #F7F3EC;
  --inv-blush: #E8CFC4;
  --inv-font-display: 'Cormorant Garamond', 'Amiri', Georgia, serif;
  --inv-font-body: 'Cormorant Garamond', 'Amiri', Georgia, serif;
  --inv-font-names: 'Pinyon Script', 'Aref Ruqaa', cursive;
  --inv-font-names-ar: 'Aref Ruqaa', 'Amiri', serif;
  --inv-font-display-ar: 'Amiri', serif;
  --inv-font-body-ar: 'Amiri', serif;
  --inv-font-ui: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --inv-names-size: clamp(3.6rem, 17vw, 5.4rem);
  --inv-names-weight: 400;
  --inv-names-style: normal;
  --inv-body-size: 1.2rem;
  --inv-display-case: uppercase;
  --inv-display-tracking: 0.28em;
  --inv-radius: 2px;
  --inv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --inv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Arabic: calligraphic names, no tracking, generous line height. */
.inv[lang='ar'] {
  --inv-font-names: var(--inv-font-names-ar);
  --inv-font-display: var(--inv-font-display-ar);
  --inv-font-body: var(--inv-font-body-ar);
  --inv-display-case: none;
  --inv-display-tracking: 0;
  --inv-names-style: normal;
  --inv-body-size: 1.18rem;
}

/* ------------------------------------------------------------------ base */
.inv {
  position: relative;
  min-height: 100vh;
  background: var(--inv-bg);
  color: var(--inv-ink);
  font-family: var(--inv-font-body);
  font-size: var(--inv-body-size);
  line-height: 1.6;
  overflow-x: clip;
}
.inv[lang='ar'] { line-height: 1.95; }

@media (min-width: 700px) {
  .inv { background: radial-gradient(120% 80% at 50% 0%, var(--inv-soft), var(--inv-bg) 60%); }

}

/* ------------------------------------------------------------------ controls */
.inv-controls { position: fixed; z-index: 30; inset-block-start: max(14px, env(safe-area-inset-top)); inset-inline-end: 14px; display: flex; gap: 8px; }
@media (min-width: 700px) { .inv-controls { inset-inline-end: max(14px, calc(50vw - 280px + 14px)); } }
.inv-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 42px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--inv-line);
  background: color-mix(in srgb, var(--inv-bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--inv-ink);
  font-family: var(--inv-font-ui);
  font-size: 0.85rem;
  text-decoration: none;
}
.inv-pill--icon { padding: 0; }
.inv-pill[lang='ar'] { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 0.95rem; }
.inv-music-off { display: none !important; }
[aria-pressed='true'] .inv-music-on { display: none !important; }
[aria-pressed='true'] .inv-music-off { display: inline-block !important; }
.inv-embed .inv-controls { display: none; }

/* ------------------------------------------------------------------ calendar menu */

.inv-calendar { position: relative; }
.inv-calendar__menu { position: absolute; z-index: 5; inset-block-start: calc(100% + 8px); inset-inline-start: 50%; translate: -50% 0; display: grid; min-width: 230px; padding: 6px; border: 1px solid var(--inv-line); border-radius: 8px; background: var(--inv-bg); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.35); }
[dir='rtl'] .inv-calendar__menu { translate: 50% 0; }
.inv-calendar__menu a, .inv-calendar__menu button { display: block; padding: 12px 14px; border-radius: 6px; font-family: var(--inv-font-ui); font-size: 0.88rem; text-align: start; text-decoration: none; }
.inv-calendar__menu a:hover, .inv-calendar__menu button:hover { background: var(--inv-soft); }

/* ------------------------------------------------------------------ rsvp */

.inv-rsvp__form { display: grid; gap: 18px; text-align: start; }

.inv-rsvp__status { margin: 18px 0 0; font-size: 1.15rem; color: var(--inv-accent); }

/* ------------------------------------------------------------------ credit line */

.inv-footer__credit { display: inline-flex; align-items: center; gap: 8px; margin-block-start: 18px; font-family: var(--inv-font-ui); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--inv-muted); text-decoration: none; opacity: 0.8; }
.inv[lang='ar'] .inv-footer__credit { font-size: 0.82rem; letter-spacing: 0; }
.inv-footer__credit .brand-logo { width: 18px; height: auto; }
.inv-footer__credit:hover { opacity: 1; color: var(--inv-accent); }

@keyframes inv-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--inv-accent) 45%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }

/* ------------------------------------------------------------------ reveal */
[data-inv-reveal] { transition: opacity 1s var(--inv-ease-out), transform 1.2s var(--inv-ease-out); }
[data-inv-reveal].inv-pending { opacity: 0; transform: translateY(18px); }
.inv:not(.is-open) :is(.inv-hero, [data-inv-hero]) [data-inv-reveal].inv-hold { opacity: 0; transform: translateY(14px); }
:is(.inv-hero, [data-inv-hero]) [data-inv-reveal] { transition-delay: calc(var(--i, 0) * 0.12s); }

@media (prefers-reduced-motion: reduce) {
  html.inv-html { scroll-behavior: auto; }
  .inv *, .inv *::before, .inv *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  [data-inv-reveal].inv-pending, .inv:not(.is-open) :is(.inv-hero, [data-inv-hero]) [data-inv-reveal].inv-hold { opacity: 1; transform: none; }
}

/* Showcase watermark on demo invitations (see main-invitation.liquid). Above everything, including
   the envelope, but never in the way: it ignores clicks and taps. */
.inv-watermark {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 300px auto;
  background-position: center;
}