/*
 * HSJ Global Design Reset
 * Loaded globally after Bootstrap, before main.css.
 * Single source of truth for fonts, brand colors, and prose overrides.
 * ─────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════
   1.  CANONICAL DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Fonts — Poppins everywhere */
  --font-body:    'Poppins', system-ui, -apple-system, sans-serif;
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-primary: var(--font-body);   /* fixes main.css --font-primary: Jost fallback */

  /* Single text color — forced everywhere */
  --hsj-text:  #1a1a2e;
  --hsj-amber: #FBA504;
  --hsj-navy:  #1A4B89;

  /* Override all v3 fg tokens to the same value — no more muted grey */
  --fg:       #1a1a2e;
  --fg-muted: #1a1a2e;   /* was rgba(55,65,90,0.65) — now same as body */

  --accent:       var(--hsj-amber);
  --accent-light: #e09400;
}

/* ═══════════════════════════════════════════════════════════
   2.  GLOBAL BASE
   ═══════════════════════════════════════════════════════════ */
body {
  font-family: var(--font-body) !important;
  color: #1a1a2e !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════
   3.  PROSE OVERRIDE
   Strips CKEditor / TinyMCE inline font-family and color
   from every rich-text container on the frontend.
   Does NOT override text-align (kept as saved in editor).
   ═══════════════════════════════════════════════════════════ */
.v3-prose *,
.art-prose *,
.tour-content *,
.entry-content *,
.v3-day-desc *,
.hsj-prose * {
  font-family: var(--font-body) !important;
  color:       #1a1a2e !important;
  background:  transparent !important;
}

/* Callout blocks need their own background — override the transparent rule above */
.v3-prose .hsj-note-callout,
.art-prose .hsj-note-callout,
.tour-content .hsj-note-callout,
.entry-content .hsj-note-callout,
.hsj-prose .hsj-note-callout {
  background: #eef0fb !important;
}
.v3-prose .hsj-warning-callout,
.art-prose .hsj-warning-callout,
.tour-content .hsj-warning-callout,
.entry-content .hsj-warning-callout,
.hsj-prose .hsj-warning-callout {
  background: #fff8e8 !important;
}
/* Icon circles — two-class specificity beats .v3-prose * { background: transparent !important } */
.hsj-note-callout .hsj-note-icon     { background: #3d5af1 !important; color: #fff !important; }
.hsj-warning-callout .hsj-warning-icon { background: #FBA504 !important; color: #fff !important; }

/* ── Paragraph spacing: no top margin, tight bottom margin ── */
.v3-prose p,
.art-prose p,
.tour-content p,
.entry-content p,
.v3-day-desc p,
.hsj-prose p {
  font-size:     15px;
  line-height:   1.75;
  margin-top:    0 !important;
  margin-bottom: 0.65em !important;
}

.v3-prose p:last-child,
.art-prose p:last-child,
.v3-day-desc p:last-child {
  margin-bottom: 0 !important;
}

/* ── Headings inside prose ── */
.v3-prose h1, .v3-prose h2, .v3-prose h3, .v3-prose h4, .v3-prose h5,
.art-prose h1, .art-prose h2, .art-prose h3, .art-prose h4, .art-prose h5,
.tour-content h1, .tour-content h2, .tour-content h3, .tour-content h4,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
  font-family:   var(--font-body) !important;
  font-weight:   600 !important;
  line-height:   1.35 !important;
  margin-top:    1.2em !important;
  margin-bottom: 0.4em !important;
}

.v3-prose h1:first-child,
.v3-prose h2:first-child,
.v3-prose h3:first-child,
.art-prose h1:first-child,
.art-prose h2:first-child,
.art-prose h3:first-child {
  margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   4.  SUPPRESS EMPTY EDITOR PARAGRAPHS — CSS LAYER
   Hides <p></p> and <p><br></p> with pure CSS.
   The &nbsp; case is handled by hsj-prose-clean.js.
   ═══════════════════════════════════════════════════════════ */

/* Truly empty paragraph */
.v3-prose p:empty,
.art-prose p:empty,
.v3-day-desc p:empty,
.hsj-prose p:empty {
  display: none !important;
  margin:  0 !important;
  padding: 0 !important;
}

/* <p> containing only a <br> */
.v3-prose p:has(> br:only-child),
.art-prose p:has(> br:only-child),
.v3-day-desc p:has(> br:only-child),
.hsj-prose p:has(> br:only-child) {
  display: none !important;
  margin:  0 !important;
  padding: 0 !important;
}

/* Standalone <br> at the start/end of a prose block */
.v3-prose > br:first-child,
.v3-prose > br:last-child,
.art-prose > br:first-child,
.art-prose > br:last-child {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   5.  BUTTON / UI FONT
   ═══════════════════════════════════════════════════════════ */
button,
input,
select,
textarea,
.btn {
  font-family: var(--font-body) !important;
}

/* ═══════════════════════════════════════════════════════════
   6.  CALLOUT BLOCKS (inserted via TinyMCE Callout button)
   ═══════════════════════════════════════════════════════════ */
.hsj-note-callout,
.hsj-warning-callout {
  border-radius: 12px;
  padding: 16px 20px;
  margin: 1.4em 0;
}

.hsj-note-callout {
  background: #eef0fb;
}

.hsj-warning-callout {
  background: #fff8e8;
}

.hsj-note-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.hsj-note-header strong {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e !important;
}

.hsj-note-icon,
.hsj-warning-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  font-style: italic;
  flex-shrink: 0;
  line-height: 1;
}

.hsj-note-callout .hsj-note-icon {
  background: #3d5af1 !important;
}

.hsj-warning-callout .hsj-warning-icon {
  background: #FBA504 !important;
  font-style: normal;
  font-size: 16px;
}

.hsj-note-callout p,
.hsj-warning-callout p {
  font-size: 15px;
  line-height: 1.7;
  margin: 0 !important;
  color: #1a1a2e !important;
}