/* ==========================================================================
   Custom overrides for the Flex Pelican theme
   Loaded AFTER style.min.css via CUSTOM_CSS in pelicanconf.py

   NOTE: Color scheme reverted to the theme's original palette (blue links,
   orange buttons, grey sidebar) for readability. This file now only keeps
   the structural tweaks: circular avatar + social icon circles/logos.
   ========================================================================== */

/* ==========================================================================
   Readable headings & titles (fixes low-contrast plum headings)
   Light mode: dark text.  Dark mode: light text.
   ========================================================================== */
#content article header h1,
#content article header h1 a,
#content article header h2,
#content article header h2 a,
.post-title,
.post-title a,
.single h1,
.single h1 a,
main article h1,
main article h2,
main article h3 {
  color: #242121 !important;   /* dark text for light background */
}

/* Dark mode: switch headings to light so they stay visible */
body.dark-theme #content article header h1,
body.dark-theme #content article header h1 a,
body.dark-theme #content article header h2,
body.dark-theme #content article header h2 a,
body.dark-theme .post-title,
body.dark-theme .post-title a,
body.dark-theme .single h1,
body.dark-theme .single h1 a,
body.dark-theme main article h1,
body.dark-theme main article h2,
body.dark-theme main article h3 {
  color: #eeeeee !important;   /* light text for dark background */
}
@media (prefers-color-scheme: dark) {
  #content article header h1,
  #content article header h1 a,
  #content article header h2,
  #content article header h2 a,
  .post-title,
  .post-title a,
  .single h1,
  .single h1 a,
  main article h1,
  main article h2,
  main article h3 {
    color: #eeeeee !important;
  }
}

/* ==========================================================================
   Profile avatar — perfect circle with a subtle ring, head not cropped
   Real markup: aside > div > a > img
   ========================================================================== */
aside div a img,
aside img {
  width: 200px !important;
  height: 200px !important;
  max-width: 200px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  /* Bias the crop toward the top so the head isn't clipped */
  object-position: center 15% !important;
  display: block !important;
  margin: 0 auto !important;
}

/* ==========================================================================
   Social icons — centered row of equal-sized filled circles
   ========================================================================== */
aside ul.social {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  padding-left: 0 !important;
  list-style: none !important;
}
aside ul.social li {
  display: inline-flex !important;
  margin: 0 !important;
}

aside ul.social a,
.social a {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  line-height: 36px !important;
  text-align: center !important;
}

/* Keep social glyphs white on their colored circles */
aside ul.social a,
aside ul.social a:visited,
aside ul.social a i,
.social a,
.social a:visited,
.social a i {
  color: #ffffff !important;
}

/* Substack — orange circle with the Substack bookmark mark.
   The bundled Font Awesome has NO fa-substack glyph, so we draw the mark
   as an inline SVG background and hide the empty font glyph. */
aside ul.social a.sc-substack,
.social a.sc-substack {
  background-color: #ff6719 !important;
  color: #ffffff !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M1.5 0h21v3.6h-21V0zM1.5 5.4h21V9h-21V5.4zM1.5 10.8h21V24l-10.5-6L1.5 24V10.8z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
}
aside ul.social a.sc-substack i,
.social a.sc-substack i {
  display: none !important;
}

/* Python (PyPI notes) — official two-tone Python logo on a white circle.
   Font Awesome's fa-python is single-color, so we draw the real two-color
   mark as an inline SVG background and hide the font glyph. */
aside ul.social a.sc-python,
.social a.sc-python {
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 111 111'><path fill='rgb(55,118,171)' d='M54.9 0C26.9 0 28.6 12.2 28.6 12.2l0 12.6h26.8v3.8H18C18 28.6 0 26.6 0 55.1c0 28.5 15.7 27.5 15.7 27.5h9.4V69.5s-.5-15.7 15.5-15.7h26.6s14.9.2 14.9-14.4V14.6S94.9 0 54.9 0zM40.1 8.5a4.8 4.8 0 1 1 0 9.7 4.8 4.8 0 0 1 0-9.7z'/><path fill='rgb(255,212,59)' d='M56.1 111c28 0 26.3-12.2 26.3-12.2l0-12.6H55.6v-3.8H93s18 2 18-26.5c0-28.5-15.7-27.5-15.7-27.5h-9.4v12.9s.5 15.7-15.5 15.7H43.8s-14.9-.2-14.9 14.4v24.2S16.1 111 56.1 111zM70.9 102.5a4.8 4.8 0 1 1 0-9.7 4.8 4.8 0 0 1 0 9.7z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
}
aside ul.social a.sc-python i,
.social a.sc-python i {
  display: none !important;
}