@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap');

/* STEP 1: Reset the strange formatting */
body h3,
html h3,
div h3,
section h3,
article h3,
main h3 {
    /* Remove all the theme.scss formatting */
    background: none !important;
    border: none !important;
    border-left: none !important;
    border-bottom: none !important;
    
    /* Remove any padding/margin from theme */
    padding: 0 !important;
    margin: 1em 0 !important;
}

/* STEP 2: Add your simple formatting */
body h3,
html h3,
div h3,
section h3,
article h3,
main h3 {
    font-weight: bold !important;
    text-align: center !important;
    font-size: 1.5em !important;
    color: #000000 !important; /* Pure black */
    
    /* Optional: Add some spacing */
    margin-top: 1.5em !important;
    margin-bottom: 0.5em !important;
}

/* Shared base styles for ALL info-* classes (avoids repetition) */
[class^="info-"] {
  cursor: help;
  opacity: 0.8;
  transition: all 0.2s;
  font-size: 1.1em;
  position: relative;
  top: -0.1em;
}

/* Unique color and hover effects for each class */
.info-r { color: #ff0000; } /* Your existing red */
.info-b { color: #0000ff; } /* Your existing blue */
.info-d { color: #d46b08; } /* DeepSeek orange */
.info-g { color: green; }

/* Shared hover/focus effects (applies to all) */
[class^="info-"]:hover,
[class^="info-"]:focus {
  opacity: 1;
  text-shadow: 0 0 2px currentColor; /* Uses each class's color */
}

/* Tooltip box */
.tippy-box[data-theme~='light'] {
  color: #26323d;
  background-color: #fff;
  box-shadow: 0 0 20px 4px rgba(154,161,177,.15),
              0 4px 80px -8px rgba(36,40,47,.25),
              0 4px 4px -2px rgba(91,94,105,.15);
}

/* Optional: slightly tighter line-height for note-style tooltips */
.tippy-box[data-theme~='light'] .tippy-content {
  line-height: 1.35;
}

/* Arrow triangles (border trick) — matches your original approach */
.tippy-box[data-theme~='light'][data-popper-placement^='top'] > .tippy-arrow {
  border-top: 8px solid #fff;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.tippy-box[data-theme~='light'][data-popper-placement^='bottom'] > .tippy-arrow {
  border-bottom: 8px solid #fff;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.tippy-box[data-theme~='light'][data-popper-placement^='left'] > .tippy-arrow {
  border-left: 8px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.tippy-box[data-theme~='light'][data-popper-placement^='right'] > .tippy-arrow {
  border-right: 8px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* Ensure arrow is visible (v6 arrow uses ::before by default in some builds) */
.tippy-box[data-theme~='light'] > .tippy-arrow::before {
  color: #fff;
}

/* Accessibility: visible focus ring on tooltip triggers (adjust selector to your markup) */
.info-g:focus {
  outline: 2px solid rgba(0, 95, 204, 0.55);
  outline-offset: 2px;
  border-radius: 3px;
}