/* Font family override - apply to entire site */
html, body {
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
}

/* Titles */
h1, h2, h3, h4, h5, h6 {
  font-family: "Times New Roman", Times, serif;
}

h1 { font-size: 2.65rem; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.85rem; }
h4 { font-size: 1.6rem; }
h5 { font-size: 1.35rem; }
h6 { font-size: 1.2rem; }

/* Navbar */
.hextra-nav-container,
nav,
.hextra-nav-container a {
  font-family: "Times New Roman", Times, serif;
}

.hextra-nav-container a {
  font-size: 1.0rem;
}

.hextra-nav-brand .hextra-logo-title {
  font-size: 1.45rem;
}

/* Content area - target paragraphs directly */
article .content p {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 19px !important;
  line-height: 1.7;
}

/* Footnotes - smaller than main content */
article .footnotes,
article section.footnotes,
article #footnotes,
article[data-footnotes],
section[data-footnotes],
article .footnotes *,
article section.footnotes *,
article #footnotes *,
article[data-footnotes] *,
section[data-footnotes] *,
article .footnotes p,
article section.footnotes p,
section[data-footnotes] p {
  font-size: 16px !important;
}

/* Footnote tooltip */
.footnote-tooltip {
  position: fixed;
  background: #1a1a1a !important;
  color: #ffffff !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  max-width: 320px !important;
  z-index: 9999 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
  border: 1px solid #444 !important;
  text-align: left;
  line-height: 1.4;
  pointer-events: none;
  font-family: "Times New Roman", Times, serif !important;
}

/* Image captions */
figure {
  margin: 2rem 0;
  text-align: center;
}

html body main article div article .content figure figcaption p,
article .content figure figcaption p,
main article .content figure figcaption p,
article div.content figure figcaption p,
.content figure figcaption p,
figure figcaption p,
figcaption p {
  font-size: 16px !important;
  color: #666 !important;
  font-style: italic !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
}

html body main article div article .content figure figcaption,
article .content figure figcaption,
main article .content figure figcaption,
article div.content figure figcaption,
.content figure figcaption,
figure figcaption,
figcaption {
  font-size: 16px !important;
}

/* External link icons based on URL */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 1.15rem;
  line-height: 1.5;
}

th,
td {
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  text-align: left;
}

thead th {
  background-color: #f1f5f9;
  font-weight: 600;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

tbody tr:nth-child(even) {
  color: #1e293b;
  background-color: #f1f5f9;
}

tbody tr:hover {
  background-color: #f1f5f9;
  color: #1e293b;
  transition: background-color 0.15s;
}

@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* External link icons based on URL */
article .content :where(a[href*="github.com"])::after,
article .content :where(a[href*="gitlab.com"])::after,
article .content :where(a[href*="x.com"])::after,
article .content :where(a[href*="twitter.com"])::after,
article .content :where(a[href*="linkedin.com"])::after,
article .content :where(a[href*="medium.com"])::after,
article .content :where(a[href*="dev.to"])::after,
article .content :where(a[href*="google.com"])::after,
article .content :where(a[href*="reddit.com"])::after,
article .content :where(a[href*="youtube.com"])::after,
article .content :where(a[href*="youtu.be"])::after,
article .content :where(a[href*="tiktok.com"])::after,
article .content :where(a[href*="instagram.com"])::after {
  content: "";
  display: inline-block;
  width: .95em;
  height: .95em;
  margin-left: .25em;
  vertical-align: -.12em;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

article .content :where(a[href*="github.com"])::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5C5.73.5.5 5.73.5 12c0 5.08 3.29 9.39 7.86 10.9.58.11.79-.25.79-.56 0-.28-.01-1.2-.02-2.17-3.2.7-3.87-1.37-3.87-1.37-.52-1.33-1.27-1.68-1.27-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.75 1.18 1.75 1.18 1.02 1.75 2.68 1.25 3.33.96.1-.74.4-1.25.73-1.54-2.55-.29-5.23-1.28-5.23-5.7 0-1.26.45-2.28 1.18-3.09-.12-.29-.51-1.46.11-3.05 0 0 .96-.31 3.14 1.18a10.9 10.9 0 0 1 5.72 0c2.18-1.49 3.14-1.18 3.14-1.18.62 1.59.23 2.76.11 3.05.73.81 1.18 1.83 1.18 3.09 0 4.43-2.69 5.41-5.25 5.69.41.36.78 1.08.78 2.18 0 1.57-.01 2.84-.01 3.22 0 .31.21.68.8.56A11.51 11.51 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5z'/%3E%3C/svg%3E");
}

article .content :where(a[href*="gitlab.com"])::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.1 4.3 16.1l-2.2-6.8 3.9-12.1c.1-.3.6-.3.7 0l2.6 8.1h7.4l2.6-8.1c.1-.3.6-.3.7 0l3.9 12.1-2.2 6.8L12 21.1zm0-2.2 5.7-3.7-2-6.1H8.3l-2 6.1L12 18.9z'/%3E%3C/svg%3E");
}

article .content :where(a[href*="x.com"])::after,
article .content :where(a[href*="twitter.com"])::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2H22l-6.8 7.8L23 22h-6.8l-5.3-6.6L4.9 22H2l7.3-8.3L1 2h6.9l4.8 6.1L18.9 2zm-1.1 18h1.9L6.2 4H4.2l13.6 16z'/%3E%3C/svg%3E");
}

article .content :where(a[href*="linkedin.com"])::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.9 8.4V21H3.6V8.4h3.3zM5.2 3.4a1.9 1.9 0 1 1 0 3.8 1.9 1.9 0 0 1 0-3.8zM20.4 13.2V21h-3.3v-6.7c0-1.7-.6-2.9-2.2-2.9-1.2 0-1.9.8-2.2 1.6-.1.3-.1.8-.1 1.2V21H9.3V8.4h3.2v1.7c.4-.8 1.4-2 3.4-2 2.5 0 4.4 1.7 4.4 5.1z'/%3E%3C/svg%3E");
}

article .content :where(a[href*="medium.com"])::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.2 7.4c.1 0 .3-.1.4-.2l2.1-2.1V18l-2.4 2.4c-.1.1-.2.3-.2.4h5.2c0-.1-.1-.3-.2-.4L6.5 18V6.2l5.7 14.6h.6l5.2-14.6v10.6c0 .2 0 .3-.2.4l-2.1 2.2c-.1.1-.2.3-.2.4h6.5c0-.1-.1-.3-.2-.4l-2.1-2.2c-.1-.1-.2-.3-.2-.4V6.2c0-.2 0-.3.2-.4l2.1-2.2c.1-.1.2-.3.2-.4h-5.7l-4.7 13.2L6.7 3.2H3.1c0 .1.1.3.2.4l2.1 2.2c.1.1.2.3.2.4v.3L3.2 7.4z'/%3E%3C/svg%3E");
}

article .content :where(a[href*="dev.to"])::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 7.3h2.9c2.4 0 4.1 1.6 4.1 4.7 0 3-1.7 4.7-4.1 4.7H7.2V7.3zm2.7 7.2c1.3 0 2.1-.9 2.1-2.5 0-1.6-.8-2.5-2.1-2.5H9.3v5h.6zM16 7.3h2.1v7.4H21v1.8h-5V7.3zM3 7.3h2.1v9.2H3V7.3z'/%3E%3C/svg%3E");
}

article .content :where(a[href*="google.com"])::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 10.2h6.5c.1.4.2.8.2 1.4 0 3.9-2.6 6.7-6.7 6.7A7.2 7.2 0 1 1 12 4.5c1.9 0 3.5.7 4.7 1.9l-1.9 1.9c-.5-.5-1.4-1.1-2.8-1.1a4.9 4.9 0 1 0 0 9.8c2.3 0 3.9-1.3 4.2-3.1H12v-2.7z'/%3E%3C/svg%3E");
}

article .content :where(a[href*="reddit.com"])::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.5 10.4c.9 0 1.7.8 1.7 1.7a1.7 1.7 0 0 1-2.8 1.3c-1.3 1-3.2 1.7-5.4 1.7s-4.1-.7-5.4-1.7a1.7 1.7 0 1 1-1.1-3c.7 0 1.3.4 1.5 1 1.3-.9 3.1-1.4 5-1.5l1-3.2 3.5.8a1.6 1.6 0 1 1 .5-1.2l-4-.9-1.2 3.8c2 .1 3.7.6 5.1 1.5.2-.6.8-1 1.5-1zm-9.6 2.6a1.1 1.1 0 1 0-2.2 0 1.1 1.1 0 0 0 2.2 0zm8.3 0a1.1 1.1 0 1 0-2.2 0 1.1 1.1 0 0 0 2.2 0zm-7.2 2.8c.8.6 2 .9 3.2.9s2.4-.3 3.2-.9c.2-.1.4 0 .4.2s-.2.4-.3.5c-.9.7-2.2 1.1-3.6 1.1s-2.7-.4-3.6-1.1c-.1-.1-.2-.3-.1-.5 0-.2.2-.3.4-.2z'/%3E%3C/svg%3E");
}

article .content :where(a[href*="youtube.com"])::after,
article .content :where(a[href*="youtu.be"])::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2a3.1 3.1 0 0 0-2.2-2.2C19.4 3.5 12 3.5 12 3.5s-7.4 0-9.3.5a3.1 3.1 0 0 0-2.2 2.2A32.7 32.7 0 0 0 0 12a32.7 32.7 0 0 0 .5 5.8 3.1 3.1 0 0 0 2.2 2.2c1.9.5 9.3.5 9.3.5s7.4 0 9.3-.5a3.1 3.1 0 0 0 2.2-2.2A32.7 32.7 0 0 0 24 12a32.7 32.7 0 0 0-.5-5.8zM9.6 15.5v-7l6.4 3.5-6.4 3.5z'/%3E%3C/svg%3E");
}

article .content :where(a[href*="tiktok.com"])::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.3 3c.4 2.3 2.1 4.1 4.4 4.4v3.2c-1.6.1-3.1-.4-4.4-1.2v6.3c0 3.1-2.5 5.6-5.6 5.6S5.1 18.8 5.1 15.7s2.5-5.6 5.6-5.6c.5 0 1 .1 1.5.2v3.4c-.4-.2-.9-.3-1.5-.3-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5V3h3.6z'/%3E%3C/svg%3E");
}

article .content :where(a[href*="instagram.com"])::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2.5h10A4.5 4.5 0 0 1 21.5 7v10A4.5 4.5 0 0 1 17 21.5H7A4.5 4.5 0 0 1 2.5 17V7A4.5 4.5 0 0 1 7 2.5zm0 1.5A3 3 0 0 0 4 7v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm5 3.2A5.3 5.3 0 1 1 6.7 12 5.3 5.3 0 0 1 12 7.2zm0 1.5A3.8 3.8 0 1 0 15.8 12 3.8 3.8 0 0 0 12 8.7zm6-2.1a1.1 1.1 0 1 1-1.1-1.1 1.1 1.1 0 0 1 1.1 1.1z'/%3E%3C/svg%3E");
}