/* ============================================================================
   Jeremy K. Johnson - Custom Styling
   Palm Springs mid-century palette: teal + mustard gold on warm cream
   ============================================================================ */

/* --------------------------------------------------------------------------
   Palm Springs Color Palette Definition
   -------------------------------------------------------------------------- */

:root {
  /*
   * Palm Springs Color Palette - SINGLE SOURCE OF TRUTH
   * Mid-century modern: teal + mustard gold on warm cream
   * To change the theme, only edit the RGB values below.
   * All other styles reference these variables.
   */

  /* RGB components - edit these to change colors */
  --mnemonic-midnight-rgb: 10, 75, 78;          /* Deep Teal */
  --mnemonic-primary-rgb: 13, 115, 119;         /* Teal */
  --mnemonic-primary-light-rgb: 46, 196, 182;   /* Soft Teal */
  --mnemonic-primary-dark-rgb: 10, 75, 78;      /* Deep Teal */
  --mnemonic-accent-rgb: 212, 160, 23;          /* Mustard Gold */
  --mnemonic-accent-light-rgb: 232, 184, 48;    /* Warm Gold */

  /* Computed colors - don't edit these */
  --mnemonic-midnight: #0A4B4E;
  --mnemonic-snow: #FAF3EB;
  --mnemonic-primary: rgb(var(--mnemonic-primary-rgb));
  --mnemonic-primary-light: rgb(var(--mnemonic-primary-light-rgb));
  --mnemonic-primary-dark: rgb(var(--mnemonic-primary-dark-rgb));
  --mnemonic-primary-muted: #d0eded;
  --mnemonic-accent: rgb(var(--mnemonic-accent-rgb));
  --mnemonic-accent-light: rgb(var(--mnemonic-accent-light-rgb));
  --mnemonic-accent-muted: #f5e6b8;

  /* Neutrals - warm-shifted */
  --mnemonic-slate-900: #352F2B;
  --mnemonic-slate-800: #3d3632;
  --mnemonic-slate-700: #5a534c;
  --mnemonic-slate-400: #8a7f72;
  --mnemonic-slate-200: #e0d6c8;
  --mnemonic-slate-50: #FAF3EB;

  /* Dark mode background */
  --mnemonic-dark-bg: #1C1917;
}

/* --------------------------------------------------------------------------
   Material Theme Color Overrides - Light Mode
   -------------------------------------------------------------------------- */

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--mnemonic-snow);
  --md-primary-bg-color: var(--mnemonic-midnight);
  --md-accent-fg-color: var(--mnemonic-primary);
  --md-accent-bg-color: var(--mnemonic-primary-muted);
  --md-typeset-a-color: var(--mnemonic-primary);
  --md-default-fg-color: var(--mnemonic-slate-900);
  --md-default-bg-color: var(--mnemonic-snow);
  --md-code-fg-color: var(--mnemonic-slate-700);
  --md-code-bg-color: var(--mnemonic-slate-200);
}

/* --------------------------------------------------------------------------
   Material Theme Color Overrides - Dark Mode
   -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--mnemonic-primary-light);
  --md-primary-bg-color: var(--mnemonic-dark-bg);
  --md-accent-fg-color: var(--mnemonic-primary-light);
  --md-accent-bg-color: var(--mnemonic-primary);
  --md-typeset-a-color: var(--mnemonic-primary-light);
  --md-default-bg-color: var(--mnemonic-dark-bg);
  --md-default-fg-color: var(--mnemonic-slate-50);
  --md-code-fg-color: var(--mnemonic-primary-light);
  --md-code-bg-color: rgba(var(--mnemonic-primary-rgb), 0.1);
  --md-typeset-color: var(--mnemonic-slate-50);
}

/* --------------------------------------------------------------------------
   Typography - Bold and Modern
   -------------------------------------------------------------------------- */

.md-typeset h1 {
  font-family: 'Fredoka One', cursive;
  font-weight: 400; /* Fredoka One only has one weight */
  letter-spacing: -0.02em;
  color: var(--mnemonic-accent);
  margin-bottom: 1.5rem;
}

.md-typeset h2 {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--mnemonic-slate-900);
}

[data-md-color-scheme="slate"] .md-typeset h2 {
  color: var(--mnemonic-slate-50);
}

.md-typeset h3 {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: var(--mnemonic-primary);
}

[data-md-color-scheme="slate"] .md-typeset h3 {
  color: var(--mnemonic-primary-light);
}

/* Make the homepage hero feel more welcoming */
.md-content article > h1:first-of-type {
  font-size: 3rem;
  color: var(--mnemonic-accent);
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Header - Solid Background
   -------------------------------------------------------------------------- */

.md-header {
  background: var(--mnemonic-midnight);
}

[data-md-color-scheme="slate"] .md-header {
  background: var(--mnemonic-dark-bg);
  border-bottom: 1px solid var(--mnemonic-slate-700);
}

/* Header icons and links */
.md-header__button,
.md-header__topic,
.md-header-nav__button,
.md-header a {
  color: var(--mnemonic-slate-50);
}

.md-header__button:hover {
  color: var(--mnemonic-primary-light);
}

/* --------------------------------------------------------------------------
   Admonitions - Enhanced Styling with Mnemonic palette
   -------------------------------------------------------------------------- */

/* Make the Maturity Level info box prominent */
.md-typeset .admonition.info {
  background: rgba(var(--mnemonic-primary-dark-rgb), 0.08);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.info {
  background: rgba(var(--mnemonic-primary-rgb), 0.1);
  border-left-color: var(--mnemonic-primary-light);
}

.md-typeset .admonition.info > .admonition-title {
  background-color: var(--mnemonic-primary);
  color: var(--mnemonic-snow);
  font-weight: 700;
  letter-spacing: 0.025em;
}

.md-typeset .admonition.info > .admonition-title::before {
  background-color: var(--mnemonic-snow);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.info > .admonition-title {
  background-color: var(--mnemonic-primary);
}

/* Warning admonitions */
.md-typeset .admonition.warning {
  border-left: 4px solid var(--mnemonic-accent);
  background: rgba(var(--mnemonic-accent-rgb), 0.08);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.warning {
  background: rgba(var(--mnemonic-accent-light-rgb), 0.1);
  border-left-color: var(--mnemonic-accent-light);
}

.md-typeset .admonition.warning > .admonition-title {
  background-color: var(--mnemonic-accent);
  color: var(--mnemonic-snow);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.warning > .admonition-title {
  background-color: var(--mnemonic-accent);
}

/* Custom "book" admonition - open book icon */
:root {
  --md-admonition-icon--book: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.5 14.33C18.29 14.33 19.13 14.41 20 14.57V16.07C19.38 15.91 18.54 15.83 17.5 15.83C15.6 15.83 14.11 16.16 13 16.82V15.13C14.17 14.6 15.67 14.33 17.5 14.33M13 12.46C14.29 11.93 15.79 11.67 17.5 11.67C18.29 11.67 19.13 11.74 20 11.9V13.4C19.38 13.24 18.54 13.17 17.5 13.17C15.6 13.17 14.11 13.5 13 14.15M17.5 10.5C15.6 10.5 14.11 10.82 13 11.5V9.84C14.29 9.28 15.79 9 17.5 9C18.29 9 19.13 9.08 20 9.23V10.73C19.38 10.57 18.54 10.5 17.5 10.5M21 18.5V7C19.96 6.67 18.79 6.5 17.5 6.5C15.45 6.5 13.62 7 12 8V19.5C13.62 18.5 15.45 18 17.5 18C18.69 18 19.86 18.17 21 18.5M17.5 4.5C19.85 4.5 21.69 5 23 6V20.56C23 20.68 22.95 20.8 22.84 20.91C22.73 21 22.61 21.08 22.5 21.08C22.39 21.08 22.31 21.06 22.25 21.03C20.97 20.34 19.38 20 17.5 20C15.45 20 13.62 20.5 12 21.5C10.66 20.5 8.83 20 6.5 20C4.84 20 3.25 20.36 1.75 21.07C1.72 21.08 1.67 21.08 1.63 21.1C1.59 21.11 1.55 21.12 1.5 21.12C1.39 21.12 1.27 21.08 1.16 21C1.05 20.89 1 20.78 1 20.65V6C2.34 5 4.18 4.5 6.5 4.5C8.83 4.5 10.66 5 12 6C13.34 5 15.17 4.5 17.5 4.5Z"/></svg>');
}

.md-typeset .admonition.book,
.md-typeset details.book {
  border-color: var(--mnemonic-accent);
}

.md-typeset .book > .admonition-title,
.md-typeset .book > summary {
  background-color: rgba(var(--mnemonic-accent-rgb), 0.1);
}

.md-typeset .book > .admonition-title::before,
.md-typeset .book > summary::before {
  -webkit-mask-image: var(--md-admonition-icon--book);
  mask-image: var(--md-admonition-icon--book);
  background-color: var(--mnemonic-accent);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.book,
[data-md-color-scheme="slate"] .md-typeset details.book {
  border-color: var(--mnemonic-accent-light);
}

[data-md-color-scheme="slate"] .md-typeset .book > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .book > summary {
  background-color: rgba(var(--mnemonic-accent-light-rgb), 0.1);
}

[data-md-color-scheme="slate"] .md-typeset .book > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .book > summary::before {
  background-color: var(--mnemonic-accent-light);
}

/* --------------------------------------------------------------------------
   Links and Buttons
   -------------------------------------------------------------------------- */

.md-typeset a {
  font-weight: 500;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}

.md-typeset a:hover {
  text-decoration-thickness: 3px;
  color: var(--mnemonic-accent);
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: var(--mnemonic-accent-light);
}

/* Learn More section links - make them pop */
.md-typeset ul li a strong {
  color: var(--mnemonic-slate-900);
  font-weight: 700;
}

[data-md-color-scheme="slate"] .md-typeset ul li a strong {
  color: var(--mnemonic-primary-light);
}

/* --------------------------------------------------------------------------
   Code Blocks
   -------------------------------------------------------------------------- */

/* Inline code */
.md-typeset code {
  font-weight: 500;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background-color: var(--mnemonic-slate-200);
  color: var(--mnemonic-slate-700);
}

[data-md-color-scheme="slate"] .md-typeset code {
  background-color: rgba(var(--mnemonic-primary-rgb), 0.15);
  color: var(--mnemonic-primary-light);
}

/* Fenced code blocks - dark background */
.md-typeset pre {
  background-color: var(--mnemonic-midnight);
  border-radius: 8px;
}

[data-md-color-scheme="slate"] .md-typeset pre {
  background-color: var(--mnemonic-slate-800);
  border: 1px solid var(--mnemonic-slate-700);
}

.md-typeset pre > code {
  background-color: transparent;
  color: var(--mnemonic-slate-50);
}

/* Syntax highlighting adjustments for dark background */
.md-typeset .highlight {
  background-color: var(--mnemonic-midnight);
  border-radius: 8px;
}

[data-md-color-scheme="slate"] .md-typeset .highlight {
  background-color: var(--mnemonic-slate-800);
}

/* Code block line numbers */
.md-typeset .highlighttable {
  background-color: var(--mnemonic-midnight);
  border-radius: 8px;
  overflow: hidden;
}

[data-md-color-scheme="slate"] .md-typeset .highlighttable {
  background-color: var(--mnemonic-slate-800);
}

.md-typeset .highlighttable .linenos {
  background-color: rgba(0, 0, 0, 0.2);
  color: var(--mnemonic-slate-400);
}

[data-md-color-scheme="slate"] .md-typeset .highlighttable .linenos {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--mnemonic-slate-400);
}

/* Copy button styling - always visible */
.md-clipboard {
  color: var(--mnemonic-slate-50) !important;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  opacity: 1 !important;
}

.md-typeset .highlight:hover .md-clipboard,
.md-typeset .highlighttable:hover .md-clipboard,
.highlight:hover .md-clipboard {
  opacity: 1 !important;
}

/* Override Material's default hide behavior */
.md-typeset code[data-md-copying]::before {
  color: var(--mnemonic-slate-50);
}

/* Language label for code blocks */
.md-typeset .highlight[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0.5rem;
  right: 3rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mnemonic-slate-400);
  background-color: rgba(0, 0, 0, 0.3);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  z-index: 1;
}

.md-typeset .highlight {
  position: relative;
}

/* Pygments syntax highlighting - dark theme colors */
/* Ensure all tokens are visible on dark background */
.md-typeset .highlight code {
  color: var(--mnemonic-slate-50);
}

/* Comments */
.md-typeset .highlight .c,
.md-typeset .highlight .c1,
.md-typeset .highlight .ch,
.md-typeset .highlight .cm,
.md-typeset .highlight .cp,
.md-typeset .highlight .cpf,
.md-typeset .highlight .cs {
  color: var(--mnemonic-slate-400);
  font-style: italic;
}

/* Strings */
.md-typeset .highlight .s,
.md-typeset .highlight .s1,
.md-typeset .highlight .s2,
.md-typeset .highlight .sa,
.md-typeset .highlight .sb,
.md-typeset .highlight .sc,
.md-typeset .highlight .sd,
.md-typeset .highlight .se,
.md-typeset .highlight .sh,
.md-typeset .highlight .si,
.md-typeset .highlight .sr,
.md-typeset .highlight .ss,
.md-typeset .highlight .sx {
  color: #a5d6a7;
}

/* Keywords */
.md-typeset .highlight .k,
.md-typeset .highlight .kc,
.md-typeset .highlight .kd,
.md-typeset .highlight .kn,
.md-typeset .highlight .kp,
.md-typeset .highlight .kr,
.md-typeset .highlight .kt {
  color: #c792ea;
  font-weight: 500;
}

/* Functions and methods */
.md-typeset .highlight .nf,
.md-typeset .highlight .fm,
.md-typeset .highlight .nc {
  color: #82aaff;
}

/* Variables and names */
.md-typeset .highlight .n,
.md-typeset .highlight .na,
.md-typeset .highlight .nb,
.md-typeset .highlight .ni,
.md-typeset .highlight .nl,
.md-typeset .highlight .nn,
.md-typeset .highlight .no,
.md-typeset .highlight .nv,
.md-typeset .highlight .vc,
.md-typeset .highlight .vg,
.md-typeset .highlight .vi,
.md-typeset .highlight .vm,
.md-typeset .highlight .bp {
  color: var(--mnemonic-slate-50);
}

/* Numbers */
.md-typeset .highlight .m,
.md-typeset .highlight .mb,
.md-typeset .highlight .mf,
.md-typeset .highlight .mh,
.md-typeset .highlight .mi,
.md-typeset .highlight .mo,
.md-typeset .highlight .il {
  color: #f78c6c;
}

/* Operators and punctuation - IMPORTANT for curly braces */
.md-typeset .highlight .o,
.md-typeset .highlight .ow,
.md-typeset .highlight .p {
  color: #89ddff;
}

/* Special tokens */
.md-typeset .highlight .gd {
  color: #ff5370;
}
.md-typeset .highlight .gi {
  color: #c3e88d;
}
.md-typeset .highlight .ge {
  font-style: italic;
}
.md-typeset .highlight .gs {
  font-weight: bold;
}

/* Shell/Bash specific */
.md-typeset .highlight .nb {
  color: #82aaff;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

/* Hide site name from sidebar */
.md-nav--primary > .md-nav__title {
  display: none;
}

/* Bump up top-level nav items */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item > label .md-nav__link {
  font-size: 0.9rem;
  font-weight: 600;
}

.md-tabs {
  background: var(--mnemonic-midnight);
}

[data-md-color-scheme="slate"] .md-tabs {
  background: var(--mnemonic-dark-bg);
}

.md-tabs__link {
  color: var(--mnemonic-slate-50);
  opacity: 0.7;
}

.md-tabs__link:hover {
  color: var(--mnemonic-slate-50);
  opacity: 1;
}

.md-tabs__link--active {
  font-weight: 700;
  color: var(--mnemonic-slate-50);
  opacity: 1;
  border-bottom: 3px solid var(--mnemonic-primary-light);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.md-footer {
  background: var(--mnemonic-midnight);
}

[data-md-color-scheme="slate"] .md-footer {
  background: var(--mnemonic-dark-bg);
}

.md-footer-meta {
  background-color: rgba(var(--mnemonic-midnight-rgb), 0.5);
}

/* --------------------------------------------------------------------------
   Cards and Content Blocks
   -------------------------------------------------------------------------- */

/* Style blockquotes with Mnemonic blue accent */
.md-typeset blockquote {
  border-left: 4px solid var(--mnemonic-primary);
  background: rgba(var(--mnemonic-primary-dark-rgb), 0.06);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}

[data-md-color-scheme="slate"] .md-typeset blockquote {
  border-left-color: var(--mnemonic-primary-light);
  background: rgba(var(--mnemonic-primary-rgb), 0.08);
}

/* --------------------------------------------------------------------------
   Icons and Emojis
   -------------------------------------------------------------------------- */

.md-typeset .twemoji {
  vertical-align: text-bottom;
}

/* Material icons in links */
.md-typeset a .twemoji,
.md-typeset a .md-icon {
  color: var(--mnemonic-primary);
  margin-right: 0.3rem;
  transition: transform 0.2s ease;
}

[data-md-color-scheme="slate"] .md-typeset a .twemoji,
[data-md-color-scheme="slate"] .md-typeset a .md-icon {
  color: var(--mnemonic-primary-light);
}

.md-typeset a:hover .twemoji,
.md-typeset a:hover .md-icon {
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   Table of Contents (Right Sidebar)
   -------------------------------------------------------------------------- */

.md-sidebar--secondary {
  border-left: 1px solid var(--mnemonic-slate-200);
}

[data-md-color-scheme="slate"] .md-sidebar--secondary {
  border-left-color: var(--mnemonic-slate-700);
}

/* TOC title */
.md-nav--secondary > .md-nav__title {
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mnemonic-slate-400);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--mnemonic-slate-200);
  margin-bottom: 0.5rem;
}

[data-md-color-scheme="slate"] .md-nav--secondary > .md-nav__title {
  border-bottom-color: var(--mnemonic-slate-700);
}

/* TOC links */
.md-nav--secondary .md-nav__link {
  font-size: 0.75rem;
  color: var(--mnemonic-slate-700);
  transition: all 0.2s ease;
  padding: 0.3rem 0;
  border-left: 2px solid transparent;
  padding-left: 0.75rem;
  margin-left: -0.75rem;
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link {
  color: var(--mnemonic-slate-400);
}

.md-nav--secondary .md-nav__link:hover {
  color: var(--mnemonic-primary);
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link:hover {
  color: var(--mnemonic-primary-light);
}

/* Active TOC item */
.md-nav--secondary .md-nav__link--active {
  color: var(--mnemonic-primary);
  font-weight: 600;
  border-left-color: var(--mnemonic-primary);
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
  color: var(--mnemonic-primary-light);
  border-left-color: var(--mnemonic-primary-light);
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

.md-search__input {
  border-radius: 8px;
  font-weight: 500;
}

.md-search__input::placeholder {
  font-weight: 400;
}

.md-search__input:focus {
  border-color: var(--mnemonic-primary);
}

/* --------------------------------------------------------------------------
   Buttons and Interactive Elements
   -------------------------------------------------------------------------- */

.md-typeset .md-button {
  background-color: transparent;
  color: var(--mnemonic-primary);
  border: 2px solid var(--mnemonic-primary);
  transition: all 0.2s ease;
}

.md-typeset .md-button:hover {
  background-color: var(--mnemonic-accent);
  border-color: var(--mnemonic-accent);
  color: var(--mnemonic-snow);
}

[data-md-color-scheme="slate"] .md-typeset .md-button {
  color: var(--mnemonic-primary-light);
  border-color: var(--mnemonic-primary-light);
}

[data-md-color-scheme="slate"] .md-typeset .md-button:hover {
  background-color: var(--mnemonic-accent-light);
  border-color: var(--mnemonic-accent-light);
  color: var(--mnemonic-slate-900);
}

.md-typeset .md-button--primary {
  background-color: var(--mnemonic-primary);
  border-color: var(--mnemonic-primary);
  color: var(--mnemonic-snow);
}

[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
  background-color: var(--mnemonic-primary-light);
  border-color: var(--mnemonic-primary-light);
  color: var(--mnemonic-slate-900);
}

.md-typeset .md-button--primary:hover {
  background-color: var(--mnemonic-accent);
  border-color: var(--mnemonic-accent);
}

[data-md-color-scheme="slate"] .md-typeset .md-button--primary:hover {
  background-color: var(--mnemonic-accent-light);
  border-color: var(--mnemonic-accent-light);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.md-typeset table:not([class]) th {
  background-color: var(--mnemonic-midnight);
  color: var(--mnemonic-slate-50);
  font-weight: 700;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: var(--mnemonic-slate-700);
  color: var(--mnemonic-slate-50);
}

.md-typeset table:not([class]) tr:hover {
  background-color: rgba(var(--mnemonic-primary-dark-rgb), 0.05);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover {
  background-color: rgba(var(--mnemonic-primary-rgb), 0.08);
}

/* --------------------------------------------------------------------------
   Animations and Transitions
   -------------------------------------------------------------------------- */

.md-header,
.md-tabs,
.md-footer {
  transition: background 0.3s ease;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset h1,
  .md-typeset h2,
  .md-typeset h3 {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Hero Images for Posts
   -------------------------------------------------------------------------- */

.hero-image {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.hero-image-large {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Post Metadata (Date Badge + Reading Time)
   -------------------------------------------------------------------------- */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--mnemonic-slate-200);
}

[data-md-color-scheme="slate"] .post-meta {
  border-bottom-color: var(--mnemonic-slate-700);
}

.post-date,
.post-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mnemonic-slate-700);
}

[data-md-color-scheme="slate"] .post-date,
[data-md-color-scheme="slate"] .post-reading-time {
  color: var(--mnemonic-slate-400);
}

.post-date {
  background-color: var(--mnemonic-primary-muted);
  color: var(--mnemonic-primary-dark);
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .post-date {
  background-color: rgba(var(--mnemonic-primary-rgb), 0.2);
  color: var(--mnemonic-primary-light);
}

.post-date svg,
.post-reading-time svg {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Pull Quotes
   -------------------------------------------------------------------------- */

/* Standard blockquote is already styled, this is for emphasized pull quotes */
.md-typeset blockquote.pull-quote,
.md-typeset .pull-quote {
  border-left: none;
  border-top: 3px solid var(--mnemonic-primary);
  border-bottom: 3px solid var(--mnemonic-primary);
  background: transparent;
  padding: 1.5rem 0;
  margin: 2.5rem auto;
  max-width: 85%;
  text-align: center;
}

.md-typeset blockquote.pull-quote p,
.md-typeset .pull-quote p {
  font-size: 1.4rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  color: var(--mnemonic-slate-700);
  margin: 0;
}

[data-md-color-scheme="slate"] .md-typeset blockquote.pull-quote p,
[data-md-color-scheme="slate"] .md-typeset .pull-quote p {
  color: var(--mnemonic-slate-200);
}

[data-md-color-scheme="slate"] .md-typeset blockquote.pull-quote,
[data-md-color-scheme="slate"] .md-typeset .pull-quote {
  border-top-color: var(--mnemonic-primary-light);
  border-bottom-color: var(--mnemonic-primary-light);
}

/* --------------------------------------------------------------------------
   Responsive Design
   -------------------------------------------------------------------------- */

@media screen and (max-width: 76.1875em) {
  .md-content article > h1:first-of-type {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 44.9375em) {
  .md-content article > h1:first-of-type {
    font-size: 2rem;
  }
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

/* Ensure sufficient contrast for focus states */
.md-typeset a:focus,
.md-typeset button:focus {
  outline: 2px solid var(--mnemonic-primary);
  outline-offset: 2px;
}

[data-md-color-scheme="slate"] .md-typeset a:focus,
[data-md-color-scheme="slate"] .md-typeset button:focus {
  outline-color: var(--mnemonic-primary-light);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .md-typeset code {
    background-color: var(--mnemonic-slate-200);
    border: 1px solid var(--mnemonic-slate-400);
  }

  [data-md-color-scheme="slate"] .md-typeset code {
    background-color: rgba(var(--mnemonic-primary-rgb), 0.25);
    border: 1px solid var(--mnemonic-primary-light);
  }
}

/* --------------------------------------------------------------------------
   Scrollbar Styling (Webkit browsers)
   -------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--mnemonic-slate-200);
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
  background: var(--mnemonic-dark-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--mnemonic-primary);
  border-radius: 5px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: var(--mnemonic-primary-light);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--mnemonic-accent);
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
  background: var(--mnemonic-accent-light);
}

/* --------------------------------------------------------------------------
   Blog-style Update Cards
   -------------------------------------------------------------------------- */

/* Style the horizontal rules - flat solid line */
.md-content__inner hr {
  margin: 1.5rem auto;
  border: none;
  height: 1px;
  max-width: 80%;
  background: var(--mnemonic-slate-200);
}

[data-md-color-scheme="slate"] .md-content__inner hr {
  background: var(--mnemonic-slate-700);
}

/* Target h2 headings after hr (update titles) */
.md-content__inner hr + h2 {
  color: var(--mnemonic-primary);
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

[data-md-color-scheme="slate"] .md-content__inner hr + h2 {
  color: var(--mnemonic-primary-light);
}

.md-content__inner hr + h2 a {
  text-decoration: none;
  color: var(--mnemonic-primary);
}

[data-md-color-scheme="slate"] .md-content__inner hr + h2 a {
  color: var(--mnemonic-primary-light);
}

.md-content__inner hr + h2 a:hover {
  text-decoration: underline;
}

/* Target strong/bold text after h2 (the dates) */
.md-content__inner hr + h2 + p strong {
  color: var(--md-default-fg-color);
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 1rem;
}

/* Style "Read more" links */
.md-content__inner p a[href*="updates/"] {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--mnemonic-primary);
  text-decoration: none;
  transition: all 0.2s ease;
}

[data-md-color-scheme="slate"] .md-content__inner p a[href*="updates/"] {
  color: var(--mnemonic-primary-light);
}

.md-content__inner p a[href*="updates/"]:hover {
  text-decoration: none;
  transform: translateX(4px);
  color: var(--mnemonic-accent);
}

[data-md-color-scheme="slate"] .md-content__inner p a[href*="updates/"]:hover {
  color: var(--mnemonic-accent-light);
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */

.hero {
  text-align: center;
  padding: 3rem 1rem 1rem;
  margin-bottom: 1rem;
  background: rgba(var(--mnemonic-primary-dark-rgb), 0.05);
  border-radius: 16px;
  border: 1px solid var(--mnemonic-slate-200);
}

[data-md-color-scheme="slate"] .hero {
  background: rgba(var(--mnemonic-primary-rgb), 0.06);
  border-color: var(--mnemonic-slate-700);
}

/* Hide permalinks in hero section */
.hero h1 .headerlink,
.hero h2 .headerlink,
.hero h1 a.headerlink,
.hero h2 a.headerlink {
  display: none !important;
}

/* Hero logo */
.hero-logo {
  width: 280px;
  height: auto;
  margin-bottom: 0.25rem;
  border-radius: 12px;
}

.hero h1 {
  font-family: 'Fredoka One', cursive !important;
  font-size: 3rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em;
  margin-bottom: 0 !important;
  color: var(--mnemonic-accent);
}

[data-md-color-scheme="slate"] .hero h1 {
  color: var(--mnemonic-accent-light);
}

.hero-aka {
  font-family: 'Architects Daughter', cursive;
  font-size: 1.2rem;
  color: var(--mnemonic-slate-700);
  margin-top: -0.5rem !important;
  margin-bottom: 1rem !important;
}

.hero h2 {
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  color: var(--md-default-fg-color) !important;
  opacity: 0.8;
  margin-top: 0.5rem !important;
  margin-bottom: 1.5rem !important;
}

.hero p {
  font-size: 1.25rem;
  max-width: 600px;
  margin: 0 auto 1.5rem;
  color: var(--md-default-fg-color);
  opacity: 0.9;
}

.hero p:last-of-type {
  margin-bottom: 2rem;
}

.hero .md-button {
  margin: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   About Blurb
   -------------------------------------------------------------------------- */

.about-blurb {
  text-align: left;
  max-width: 700px;
  margin: 0 auto 1rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--mnemonic-slate-700);
}

[data-md-color-scheme="slate"] .about-blurb {
  color: var(--mnemonic-slate-200);
}

/* --------------------------------------------------------------------------
   Highlight Cards
   -------------------------------------------------------------------------- */

.highlight-cards.grid.cards > ul > li,
.highlight-cards.grid.cards > * > li {
  border-left: 3px solid var(--mnemonic-accent);
}

[data-md-color-scheme="slate"] .highlight-cards.grid.cards > ul > li,
[data-md-color-scheme="slate"] .highlight-cards.grid.cards > * > li {
  border-left-color: var(--mnemonic-accent-light);
}

/* --------------------------------------------------------------------------
   Grid Cards
   -------------------------------------------------------------------------- */

.grid.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 1rem 0;
}

.grid.cards > ul {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.grid.cards > ul > li,
.grid.cards > * > li {
  list-style: none;
  background: var(--md-default-bg-color);
  border: 1px solid var(--mnemonic-slate-200);
  border-radius: 12px;
  padding: 1.5rem;
  transition: border-color 0.2s ease;
}

[data-md-color-scheme="slate"] .grid.cards > ul > li,
[data-md-color-scheme="slate"] .grid.cards > * > li {
  background: rgba(var(--mnemonic-primary-rgb), 0.03);
  border-color: var(--mnemonic-slate-700);
}

.grid.cards > ul > li:hover,
.grid.cards > * > li:hover {
  border-color: var(--mnemonic-accent);
}

[data-md-color-scheme="slate"] .grid.cards > ul > li:hover,
[data-md-color-scheme="slate"] .grid.cards > * > li:hover {
  border-color: var(--mnemonic-accent-light);
}

.grid.cards li > p:first-child {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--mnemonic-slate-900);
}

[data-md-color-scheme="slate"] .grid.cards li > p:first-child {
  color: var(--mnemonic-slate-50);
}

.grid.cards li > p:first-child .twemoji,
.grid.cards li > p:first-child .emojione,
.grid.cards li > p:first-child svg {
  width: 2rem;
  height: 2rem;
  color: var(--mnemonic-primary);
}

[data-md-color-scheme="slate"] .grid.cards li > p:first-child .twemoji,
[data-md-color-scheme="slate"] .grid.cards li > p:first-child .emojione,
[data-md-color-scheme="slate"] .grid.cards li > p:first-child svg {
  color: var(--mnemonic-primary-light);
}

.grid.cards li > hr {
  margin: 0.75rem 0;
  border: none;
  border-top: 1px solid var(--mnemonic-slate-200);
}

[data-md-color-scheme="slate"] .grid.cards li > hr {
  border-top-color: var(--mnemonic-slate-700);
}

.grid.cards li > p:last-child {
  margin-bottom: 0;
  color: var(--mnemonic-slate-700);
  font-size: 0.95rem;
  line-height: 1.6;
}

[data-md-color-scheme="slate"] .grid.cards li > p:last-child {
  color: var(--mnemonic-slate-400);
}

/* Card links - override general link hover behavior within cards */
.grid.cards li a {
  text-decoration: none !important;
  color: inherit !important;
  transform: none !important;
}

.grid.cards li a:hover {
  color: var(--mnemonic-primary) !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   Tagline
   -------------------------------------------------------------------------- */

.tagline {
  text-align: center;
  font-size: 1.15rem;
  opacity: 0.8;
  padding: 1rem 0;
}

/* --------------------------------------------------------------------------
   Tags
   -------------------------------------------------------------------------- */

/* Tag chips on posts */
.md-typeset .md-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin: 0.15rem 0.25rem 0.15rem 0;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 9999px;
  background: var(--mnemonic-primary);
  color: var(--mnemonic-snow) !important;
  text-decoration: none;
  transition: all 0.2s ease;
}

.md-typeset .md-tag:hover {
  background: var(--mnemonic-accent);
}

[data-md-color-scheme="slate"] .md-typeset .md-tag {
  background: var(--mnemonic-primary);
}

[data-md-color-scheme="slate"] .md-typeset .md-tag:hover {
  background: var(--mnemonic-accent-light);
}

[data-md-color-scheme="slate"] .md-typeset .md-tag-count {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Tags container at top of post */
.md-typeset .md-tags {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--mnemonic-slate-200);
}

[data-md-color-scheme="slate"] .md-typeset .md-tags {
  border-bottom-color: var(--mnemonic-slate-700);
}

/* Tags listing page */
.md-typeset .md-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0;
}

/* Tag count badges */
.md-typeset .md-tag-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.25);
  color: var(--mnemonic-snow);
}

/* --------------------------------------------------------------------------
   Icon sizing helpers
   -------------------------------------------------------------------------- */

.lg {
  font-size: 2rem;
}

.middle {
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Image Lightbox
   -------------------------------------------------------------------------- */

.md-typeset img:not(.hero-logo):not(.hero-image):not(.hero-image-large) {
  cursor: zoom-in;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  cursor: zoom-out;
}

.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  transform: scale(0.95);
  transition: transform 0.25s ease;
}

.lightbox-overlay.active img {
  transform: scale(1);
}

/* Responsive adjustments for hero */
@media screen and (max-width: 76.1875em) {
  .hero h1 {
    font-size: 2.5rem !important;
  }
  .hero h2 {
    font-size: 1.25rem !important;
  }
}

@media screen and (max-width: 44.9375em) {
  .hero {
    padding: 2rem 1rem;
  }
  .hero-logo {
    width: 180px;
  }
  .hero h1 {
    font-size: 2rem !important;
  }
  .hero h2 {
    font-size: 1.1rem !important;
  }
  .hero p {
    font-size: 1rem;
  }
  .grid.cards {
    grid-template-columns: 1fr;
  }
}