/* ==============================
   Favorited Help Center — Custom CSS
   Last updated: 2025-11-05
   ============================== */

/* --- Optional font import (remove if you already load Inter elsewhere) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* ==============================
   Global Typography & Links
   ============================== */
body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.6;
  color: #222;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600;
  color: #000;
  line-height: 1.2;
  margin-top: 1.2em;
  margin-bottom: .6em;
}

a {
  color: #111;
  text-decoration: none;
}
a:hover { text-decoration: underline; }

.button { font-family: 'Inter', sans-serif; }

/* ==============================
   Reusable Callout System
   - Use .callout-box for bordered white info blocks
   - Use .callout-note for the pink inner note
   - Use .callout-box--filled for the pink quote/reminder block
   ============================== */

/* Bordered white container (used for the Gift Value diagram + note) */
.callout-box {
  background-color: #FFFFFF;
  border: 3px solid #FF5A5F;
  border-radius: 10px;
  color: #2B2B2B;
  font-family: 'Source Sans Pro','Inter','Segoe UI',sans-serif;
  font-size: 15px;
  line-height: 1.7;
  padding: 20px 24px;
}

/* Monospace diagram inside the bordered container */
.callout-box .ascii {
  white-space: pre-wrap;             /* allow wrapping */
  overflow-wrap: anywhere;           /* break long runs if needed */
  word-break: break-word;
  font-family: ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-variant-ligatures: none;      /* keep tree glyphs crisp */
  line-height: 1.5;
  letter-spacing: 0;
  tab-size: 2;
  font-size: clamp(13px, 3.6vw, 15px);
  margin: 0;
}

/* Editor upsizing fix: keep "Large" spans normal inside the diagram only */
.callout-box .ascii .wysiwyg-font-size-large {
  font-size: 1em !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

/* Pink inner note that follows the diagram (inside .callout-box) */
.callout-note {
  background-color: #FFF8F8;
  border-left: 4px solid #FF5A5F;
  border-radius: 6px;
  color: #2B2B2B;
  font-family: 'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size: 15px;
  line-height: 1.7;
  padding: 14px 18px;
  margin-top: 12px;
}
.callout-note a {
  color: #FF5A5F;
  font-weight: 500;
  text-decoration: underline;
  word-break: break-word;
}

/* Filled pink quote/reminder (standalone block) */
.callout-box--filled {
  background-color: #FFF8F8;         /* soft brand pink */
  border: 1px solid #FF5A5F33;       /* faint perimeter */
  border-left: 6px solid #FF5A5F;    /* strong quote bar */
  border-radius: 10px;
  color: #2B2B2B;
  font-family: 'Source Sans Pro','Inter','Segoe UI',sans-serif;
  font-size: 15px;
  line-height: 1.7;
  padding: 20px 24px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.callout-box--filled .icon {
  font-size: 20px;
  line-height: 1;
  margin-top: 2px;
}
.callout-box--filled .content { flex: 1; }
.callout-box--filled strong {
  color: #FF5A5F;
  font-weight: 600;
}
.callout-box--filled a {
  color: #FF5A5F;
  text-decoration: underline;
  font-weight: 500;
  word-break: break-word;
}

/* ==============================
   Mobile Refinements
   ============================== */
@media (max-width: 600px) {
  .callout-box {
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    border-width: 2px;               /* lighten border on small screens */
  }
  .callout-box .ascii {
    white-space: pre-line;           /* collapse stray spaces, keep line breaks */
    font-size: clamp(12px, 3.2vw, 14px);
    line-height: 1.45;
  }
  .callout-note {
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.6;
  }
  .callout-box--filled {
    padding: 14px 16px;
    gap: 8px;
    font-size: 14px;
    line-height: 1.6;
    border-left-width: 4px;
  }
  .callout-box--filled .icon {
    font-size: 18px;
    margin-top: 1px;
  }
}

/* ==============================
   Safety Nets / Compatibility
   ============================== */

/* Fallback: if someone leaves inline white-space: pre; inside .callout-box,
   force it to wrap nicely anyway. */
.callout-box [style*="white-space: pre"] {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  font-family: ui-monospace,'SF Mono',Menlo,Consolas,monospace !important;
  line-height: 1.5 !important;
}

/* Back-compat for older blocks that used .callout / .callout--filled / .callout--border */
.callout { /* treat as a bordered box */
  background-color: #FFFFFF;
  border: 3px solid #FF5A5F;
  border-radius: 10px;
  color: #2B2B2B;
  font-family: 'Source Sans Pro','Inter','Segoe UI',sans-serif;
  font-size: 15px;
  line-height: 1.7;
  padding: 20px 24px;
}
.callout--border { border-color: #FF5A5F; }
.callout--filled { /* map to filled variant look */
  background-color: #FFF8F8;
  border: 1px solid #FF5A5F33;
  border-left: 6px solid #FF5A5F;
  border-radius: 10px;
  padding: 20px 24px;
}

/* Tiny phones */
@media (max-width: 375px) {
  .callout, .callout-box { padding: 12px 14px; }
}
/* === Final fix: make the ASCII diagram consistent & wrap cleanly === */

/* 1) Force monospace + consistent sizing on the diagram AND all its descendants */
.callout-box .ascii,
.callout-box .ascii * {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 1em !important;         /* undo WYSIWYG up-sizing on spans */
  line-height: 1.45 !important;      /* tighter, prevents odd breaks */
  letter-spacing: 0 !important;
  font-weight: 400 !important;       /* avoid bold width shifts */
  font-variant-ligatures: none !important;
  tab-size: 2;
}

/* Remove stray margins the editor might inject */
.callout-box .ascii p { margin: 0 !important; }

/* Keep colored spans colored, but don't let color styles change layout */
.callout-box .ascii [style*="color"] { font-weight: 400 !important; }

/* 2) Desktop/tablet wrapping behavior */
.callout-box .ascii {
  white-space: pre-wrap;             /* preserve line breaks, allow wrapping */
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: clamp(13px, 3.6vw, 15px);  /* fluid size up to your base */
}

/* 3) Phone behavior (broader breakpoint to actually catch modern phones) */
@media (max-width: 600px) {
  .callout-box {                     /* a little less padding on phones */
    padding: 14px 16px;
    border-width: 2px;
    font-size: 14px;
    line-height: 1.6;
  }
  .callout-box .ascii {
    white-space: pre-line !important;  /* collapse stray spaces, keep breaks */
    font-size: clamp(12px, 3.2vw, 14px);
    line-height: 1.45 !important;
  }
}

/* 4) Fallback: if someone pastes inline white-space: pre; instead of using .ascii */
.callout-box [style*="white-space: pre"],
.callout-box [style*="white-space:pre"] {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  line-height: 1.45 !important;
}

/* 5) Neutralize the editor's "Large" class ONLY inside the diagram */
.callout-box .ascii .wysiwyg-font-size-large {
  font-size: 1em !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}
.ascii .accent { color: #FF5A5F; }
/* Fix ASCII alignment and wrapping */
.callout-box .ascii,
.callout-box .ascii * {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  font-variant-ligatures: none !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 400 !important;
}

/* Keep color but no layout change */
.callout-box .ascii [style*="color"] { font-weight: 400 !important; }

/* Mobile refinement */
@media (max-width: 600px) {
  .callout-box .ascii {
    white-space: pre-line !important;
    font-size: clamp(12px, 3.2vw, 14px);
    line-height: 1.45 !important;
  }
}
/* Baseline: make standard body text consistent */
.article .article-body {
  font-family: 'Inter','Helvetica Neue',Arial,sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* Normalize common body elements (not headings) */
.article .article-body p,
.article .article-body li,
.article .article-body dd,
.article .article-body td,
.article .article-body blockquote {
  font-size: 1em;          /* inherits 16px from container */
  line-height: 1.6;        /* matches baseline */
  font-family: inherit;    /* ensure Inter */
}

/* Kill editor-injected size bumps inside body text */
.article .article-body .wysiwyg-font-size-large,
.article .article-body .wysiwyg-font-size-small {
  font-size: 1em !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}

/* Keep headings distinct (adjust if you like) */
.article .article-body h2 { font-size: 1.375rem; line-height: 1.3; font-weight: 650; } /* ~22px */
.article .article-body h3 { font-size: 1.125rem; line-height: 1.35; font-weight: 600; } /* ~18px */

/* Don’t let nested spans revert fonts */
.article .article-body p span,
.article .article-body li span {
  font-family: inherit !important;
  font-size: 1em !important;
}

/* Preserve special fonts where intended */
.callout-box .ascii,
.callout-box .ascii * { font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace !important; }
.callout-note, .callout-box--filled { font-family: 'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
/* Force white background for Zendesk dropdowns (nesty elements) */
.nesty-input {
  background-color: #fff !important;
  color: #2b2b2b !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* The dropdown list itself */
.nesty-panel {
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Dropdown options */
.nesty-option {
  background-color: #fff !important;
  color: #2b2b2b !important;
}
.nesty-option:hover,
.nesty-option:focus {
  background-color: #f7f7f7 !important;
}