/**
 * Promotion page content CSS — shared by TinyMCE editor and live page.
 *
 * EDITOR: Used as content_css in page-editor; iframe body gets body{} and utilities.
 * LIVE PAGE: Loaded on /domain/[slug]; body{} is overridden below so header/footer stay full-width.
 * Tailwind preflight would flatten h1–h6/p margins; .promo-content scope restores them so WYSIWYG matches.
 * See docs/rendering-editor-html.md and .cursor/rules/editor-content-css.mdc.
 */
:root {
  --tw-slate-50: #f8fafc;
  --tw-slate-100: #f1f5f9;
  --tw-slate-200: #e2e8f0;
  --tw-slate-500: #64748b;
  --tw-slate-600: #475569;
  --tw-slate-900: #0f172a;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #374151;
  max-width: 896px;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 1.5rem;
  background: #fafafa;
  min-height: 100%;
  box-sizing: border-box;
}

body * { box-sizing: border-box; }

/* Layout */
.promo-template { max-width: 100%; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.pt-4 { padding-top: 1rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-14 { padding-bottom: 3.5rem; }
.pb-16 { padding-bottom: 4rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.pt-2 { padding-top: 0.5rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.gap-3 { gap: 0.75rem; }
.max-w-lg { max-width: 32rem; }
.text-base { font-size: 1rem; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-xl { max-width: 36rem; }
.border-l { border-left-width: 1px; }
.border-r { border-right-width: 1px; }
.inline-flex { display: inline-flex; }
.flex-wrap { flex-wrap: wrap; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-9 { width: 2.25rem; }
.h-9 { height: 2.25rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-11 { width: 2.75rem; }
.h-11 { height: 2.75rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-14 { width: 3.5rem; }
.h-14 { height: 3.5rem; }
.rounded-lg { border-radius: 0.5rem; }
.gap-12 { gap: 3rem; }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.italic { font-style: italic; }
.not-italic { font-style: normal; }
.overflow-hidden { overflow: hidden; }
.transition { transition: all 0.2s ease; }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.hover\:bg-slate-50:hover { background-color: var(--tw-slate-50); }
.uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-tight { line-height: 1.25; }
.text-5xl { font-size: 3rem; }

/* Typography */
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.tracking-tight { letter-spacing: -0.025em; }
.leading-relaxed { line-height: 1.625; }
.text-slate-500 { color: var(--tw-slate-500); }
.text-slate-600 { color: var(--tw-slate-600); }
.text-slate-700 { color: #334155; }
.text-slate-900 { color: var(--tw-slate-900); }
.text-white { color: #fff; }

/* Flexbox & Grid */
.flex { display: flex; }
.flex-shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.grid { display: grid; }
.font-medium { font-weight: 500; }

@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .sm\:pb-14 { padding-bottom: 3.5rem; }
  .sm\:pb-16 { padding-bottom: 4rem; }
  .sm\:text-3xl { font-size: 1.875rem; }
  .sm\:text-4xl { font-size: 2.25rem; }
  .sm\:text-5xl { font-size: 3rem; }
  .sm\:text-xl { font-size: 1.25rem; }
  .sm\:gap-8 { gap: 2rem; }
  .sm\:mb-16 { margin-bottom: 4rem; }
  .sm\:mb-20 { margin-bottom: 5rem; }
  .sm\:p-7 { padding: 1.75rem; }
  .sm\:p-8 { padding: 2rem; }
  .sm\:p-10 { padding: 2.5rem; }
  .sm\:p-12 { padding: 3rem; }
  .sm\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (min-width: 768px) {
  .md\:text-5xl { font-size: 3rem; }
}

/* Cards & borders */
.bg-white { background-color: #fff; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.border { border-width: 1px; }
.border-slate-100 { border-color: var(--tw-slate-100); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

/* Button-style links: apply in editor (body has no .promo-content) and on live page so TinyMCE matches formal page */
a.btn-primary,
a.btn-secondary { text-decoration: none; }
a.btn-secondary { background-color: #fff; }

/* Inline merchant color is set via style="background: var(--merchant-color)" - ensure variable exists */
body { --merchant-color: #0d9488; }

/* Live page only: when body has .promo-page-live (set by PromoPageBodyClass), undo body layout so header/footer stay full-width */
body.promo-page-live { max-width: none; margin: 0; padding: 0; background: transparent; min-height: auto; }

/* Live page: override Tailwind preflight inside .promo-content so all elements match editor (iframe has no preflight) */

/* Headings */
.promo-content h1 { font-size: 2em; font-weight: 700; margin: 0.67em 0; line-height: 1.2; }
.promo-content h2 { font-size: 1.5em; font-weight: 700; margin: 0.83em 0; line-height: 1.3; }
.promo-content h3 { font-size: 1.17em; font-weight: 700; margin: 1em 0; line-height: 1.4; }
.promo-content h4, .promo-content h5, .promo-content h6 { font-size: 1em; font-weight: 700; margin: 1em 0; }

/* Paragraphs & block-level (preflight sets margin: 0). Only set margin-bottom so utilities (e.g. mt-0.5 on step text) and mx-auto / text-center work. */
.promo-content p { margin-bottom: 1em; }
.promo-content blockquote { margin: 1em 0; padding-left: 1em; border-left: 4px solid var(--tw-slate-200); }
.promo-content hr { margin: 1em 0; border: 0; border-top: 1px solid var(--tw-slate-200); }
.promo-content figure { margin: 1em 0; }
.promo-content pre { margin: 1em 0; padding: 0.75em 1em; overflow-x: auto; background: var(--tw-slate-100); border-radius: 0.375rem; font-size: 0.875em; }

/* Lists (preflight sets list-style: none, margin: 0, padding: 0) */
.promo-content ul { margin: 1em 0; padding-left: 2em; list-style-type: disc; list-style-position: outside; }
.promo-content ol { margin: 1em 0; padding-left: 2em; list-style-type: decimal; list-style-position: outside; }
.promo-content li { margin: 0.25em 0; display: list-item; }

/* Lists with custom markers (e.g. "How it works" teal circles, "What you get" checkmarks): hide default list-style so only custom span shows; keep flex layout and left indent */
.promo-content ol:has(> li.flex),
.promo-content ul:has(> li.flex) {
  list-style: none;
  padding-left: 1.5em;
}
.promo-content ol:has(> li.flex) li,
.promo-content ul:has(> li.flex) li {
  display: flex;
  margin: 0;
}

/* Definition lists (preflight sets margin: 0 on dd) */
.promo-content dl { margin: 1em 0; }
.promo-content dt { font-weight: 600; margin-top: 0.5em; }
.promo-content dd { margin: 0.25em 0 0 2em; }

/* Tables (preflight only sets border-collapse; restore borders and spacing) */
.promo-content table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.promo-content th, .promo-content td { border: 1px solid var(--tw-slate-200); padding: 0.5em 0.75em; text-align: left; }
.promo-content th { font-weight: 600; background: var(--tw-slate-50); }

/* Links (preflight: color/text-decoration inherit; restore visible link style). Exclude button-style links so hero CTA keeps teal/outline look. */
.promo-content a:not(.btn-primary):not(.btn-secondary) { color: var(--tw-slate-900); text-decoration: underline; }
.promo-content a:not(.btn-primary):not(.btn-secondary):hover { color: var(--tw-slate-700); }
.promo-content a.btn-primary,
.promo-content a.btn-secondary { text-decoration: none; }

/* Inline code (preflight sets mono font; add background so it stands out) */
.promo-content code { font-family: ui-monospace, monospace; font-size: 0.875em; padding: 0.125em 0.375em; background: var(--tw-slate-100); border-radius: 0.25rem; }
.promo-content pre code { padding: 0; background: transparent; }

/* Images */
.promo-content img { max-width: 100%; height: auto; margin: 0.5em 0; vertical-align: middle; }

.promo-content section + section { margin-top: 1.5em; }

/* Force centering when template uses .text-center so live page matches TinyMCE */
.promo-content .text-center { text-align: center; }
.promo-content .mx-auto { margin-left: auto; margin-right: auto; }