@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Inter:wght@400;600;700&display=swap');

/* Layout variables using Obsidian defaults - DO NOT CUSTOMIZE unless user specifically requests layout changes */
.published-container {
  --page-width: 800px;
  --page-side-padding: 48px;
  --sidebar-left-width: 280px;
  --sidebar-right-width: 240px;
  --header-height: 60px;
  --border-width: 1px;
  --radius-s: 4px; --radius-m: 8px; --radius-l: 12px; --radius-xl: 16px;
  --size-4-1: 4px; --size-4-2: 8px; --size-4-3: 12px; --size-4-4: 16px; --size-4-5: 20px; --size-4-6: 24px; --size-4-8: 32px;
  --button-radius: var(--radius-s); --input-radius: var(--radius-s); --modal-radius: var(--radius-m);
  --callout-radius: var(--radius-s); --pill-radius: var(--radius-l); --tag-radius: var(--radius-s);
  --nav-item-padding: 8px 10px;
  --item-spacing: 10px;
  --input-height: 30px;
  --link-decoration: underline;
  --link-decoration-hover: underline;
  --toggle-size: 20px;
  --toggle-border-radius: 10px;
  --toggle-thumb-size: 14px;
  --toggle-thumb-border-radius: 7px;
  --toggle-gap: 4px;
  --checkbox-size: 16px;
  --checkbox-radius: var(--radius-s);
  --button-padding: 8px 12px;
  --code-block-padding: 16px;
  --code-block-radius: var(--radius-s);
  --embed-max-height: 480px;
  --embed-border-radius: var(--radius-m);
  --table-border-radius: var(--radius-s);
  --table-cell-padding: 8px 12px;
  --table-header-background-color: var(--background-modifier-hover);
  --blockquote-border-width: 4px;
  --blockquote-padding: 8px 16px;
  --image-border-radius: var(--radius-s);
  --hr-color: var(--background-modifier-border);
  --hr-thickness: 1px;
  --hr-margin: 20px 0;
  --admonition-padding: 16px;
  --admonition-border-radius: var(--radius-s);
  --admonition-title-font-weight: var(--font-semibold);
  --admonition-icon-size: 20px;
  --admonition-icon-margin: 0 8px 0 0;
  --scroll-bar-thickness: 8px;
  --scroll-bar-thumb-radius: 4px;
  --scroll-bar-track-color: transparent;
  --scroll-bar-thumb-color: var(--background-modifier-hover);
  --search-result-background-hover: var(--background-modifier-hover);
  --search-result-background-active: var(--background-modifier-active);
  --graph-node-color: var(--interactive-accent);
  --graph-node-label-color: var(--text-normal);
  --graph-line-color: var(--background-modifier-border);
  --tooltip-background: var(--background-secondary);
  --tooltip-color: var(--text-normal);
  --tooltip-padding: 4px 8px;
  --tooltip-border-radius: var(--radius-s);
  --callout-padding: 16px;
  --callout-border-radius: var(--radius-s);
  --callout-title-font-weight: var(--font-semibold);
  --callout-icon-size: 20px;
  --callout-icon-margin: 0 8px 0 0;
  --tag-padding: 4px 8px;
  --tag-border-radius: var(--radius-s);
  --prompt-border-radius: var(--radius-m);
  --prompt-padding: 16px;
  --prompt-button-padding: 8px 12px;
  --prompt-button-radius: var(--radius-s);
}

/* Typography - CUSTOMIZE fonts based on user requests, keep sizes as defaults unless requested */
body {
  --font-text-theme: 'Inconsolata', monospace;
  --font-interface-theme: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-monospace-theme: 'Inconsolata', monospace;
  --font-text-size: 18px;
  --font-smallest: 0.8em; --font-ui-small: 13px; --font-ui-medium: 15px;
  --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700;
  --line-height-normal: 1.5; --line-height-tight: 1.3;
  --h1-size: 2.2em; --h2-size: 1.8em; --h3-size: 1.5em; --h4-size: 1.25em; --h5-size: 1.12em; --h6-size: 1em;
  --h1-weight: var(--font-bold); --h2-weight: var(--font-semibold); --h3-weight: var(--font-semibold);
  --h4-weight: var(--font-semibold); --h5-weight: var(--font-medium); --h6-weight: var(--font-medium);
  --text-selection-color: rgba(var(--color-purple-rgb), 0.3);
}

/* Responsive font sizes */
@media screen and (max-width: 768px) {
  body {
    --font-text-size: 16px;
    --h1-size: 1.8em;
    --h2-size: 1.5em;
    --h3-size: 1.3em;
    --h4-size: 1.1em;
    --h5-size: 1em;
    --h6-size: 0.9em;
  }
}

/* LIGHT THEME - CUSTOMIZE colors based on user theme description */
.theme-light {
  /* Base color system - keep defaults for proper contrast */
  --color-base-00: #fafafa; /* Soft cream for better accessibility */
  --color-base-10: #f5f5f5; /* Very light grey */
  --color-base-20: #ebebeb; /* Light grey */
  --color-base-30: #d6d6d6; /* Medium light grey */
  --color-base-50: #b0b0b0; /* Grey */
  --color-base-70: #707070; /* Dark grey */
  --color-base-100: #303030; /* Very dark grey */

  /* CUSTOMIZE: Accent colors based on theme request (e.g., purple theme: --accent-h: 280) */
  --accent-h: 280; --accent-s: 70%; --accent-l: 75%; /* Pastel Lavender */

  /* CUSTOMIZE: Extended colors to match theme (e.g., for blue theme, emphasize blues) */
  --color-red: #e00000; /* Bold Red */
  --color-orange: #e06000; /* Bold Orange */
  --color-yellow: #e0e000; /* Bold Yellow */
  --color-green: #00e000; /* Bold Green */
  --color-cyan: #00e0e0; /* Bold Cyan */
  --color-blue: #0000e0; /* Bold Blue */
  --color-purple: #6000e0; /* Bold Purple */
  --color-pink: #e000e0; /* Bold Pink */

  /* RGB variants for opacity effects and callouts */
  --color-red-rgb: 224, 0, 0;
  --color-orange-rgb: 224, 96, 0;
  --color-yellow-rgb: 224, 224, 0;
  --color-green-rgb: 0, 224, 0;
  --color-cyan-rgb: 0, 224, 224;
  --color-blue-rgb: 0, 0, 224;
  --color-purple-rgb: 96, 0, 224;
  --color-pink-rgb: 224, 0, 224;

  /* Surface colors using base system */
  --background-primary: var(--color-base-00);
  --background-secondary: var(--color-base-10);
  --background-modifier-hover: var(--color-base-20);
  --background-modifier-active: var(--color-base-30);
  --background-modifier-border: var(--color-base-30);

  /* CUSTOMIZE: Text and interactive colors based on theme */
  --text-normal: var(--color-base-100);
  --text-muted: var(--color-base-70);
  --text-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --text-accent-hover: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 5%));
  --text-faint: var(--color-base-50);
  --text-highlight-bg: rgba(var(--color-yellow-rgb), 0.4);
  --text-highlight-bg-active: rgba(var(--color-yellow-rgb), 0.6);
  --text-selection: var(--text-selection-color);
  --text-success: var(--color-green);
  --text-warning: var(--color-orange);
  --text-error: var(--color-red);
  --interactive-accent: var(--text-accent);
  --interactive-accent-hover: var(--text-accent-hover);
  --interactive-hover: var(--color-base-20);
  --interactive-file: var(--text-normal);
  --interactive-file-hover: var(--text-accent);

  /* CUSTOMIZE: Component colors to match theme */
  --h1-color: var(--color-blue);
  --h2-color: var(--color-green);
  --h3-color: var(--color-orange);
  --h4-color: var(--color-purple);
  --h5-color: var(--color-pink);
  --h6-color: var(--color-red);
  --link-color: #00008b; /* Darker blue for better legibility */
  --link-hover-color: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 10%));
  --link-external-color: var(--color-cyan);
  --link-external-hover-color: var(--color-blue);
  --code-background: var(--color-base-10);
  --code-color: var(--text-normal);
  --nav-item-color: var(--text-normal);
  --nav-item-color-hover: var(--color-purple);
  --nav-item-color-active: var(--color-blue);
  --nav-item-background-hover: var(--background-modifier-hover);
  --nav-item-background-active: rgba(var(--color-blue-rgb), 0.1);
  --callout-info: var(--color-blue-rgb);
  --callout-warning: var(--color-orange-rgb);
  --callout-error: var(--color-red-rgb);
  --callout-success: var(--color-green-rgb);
  --callout-note: var(--color-purple-rgb);
  --callout-tip: var(--color-cyan-rgb);
  --callout-quote: 158, 158, 158; /* Grey for quote */
  --callout-important: var(--color-pink-rgb);
  --callout-caution: var(--color-yellow-rgb);
  --callout-question: var(--color-blue-rgb);
  --callout-abstract: var(--color-green-rgb);
  --callout-bug: var(--color-red-rgb);
  --callout-example: var(--color-orange-rgb);
  --callout-todo: var(--color-purple-rgb);
  --callout-background-alpha: 0.2;

  --tag-background: rgba(var(--color-blue-rgb), 0.15);
  --tag-color: var(--color-blue);
  --tag-hover-background: rgba(var(--color-blue-rgb), 0.25);

  --table-border-color: var(--color-base-30);
  --table-header-background: rgba(var(--color-purple-rgb), 0.1);
  --table-row-alt-background: rgba(var(--color-pink-rgb), 0.05);
  --table-cell-background: transparent;
  --table-header-color: var(--color-base-100);

  --blockquote-color: var(--color-base-70);
  --blockquote-border-color: var(--color-pink);

  --hr-color: var(--color-base-30);

  --button-background: var(--interactive-accent);
  --button-background-hover: var(--interactive-accent-hover);
  --button-color: var(--color-base-00);
  --button-border-color: var(--interactive-accent);

  --input-background: var(--background-primary);
  --input-border-color: var(--background-modifier-border);
  --input-color: var(--text-normal);
  --input-placeholder-color: var(--text-muted);
  --input-focus-border-color: var(--interactive-accent);

  --modal-background: var(--background-primary);
  --modal-border-color: var(--background-modifier-border);
  --modal-title-color: var(--text-normal);

  --card-background: var(--background-secondary);
  --card-border-color: var(--background-modifier-border);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.08);

  --item-background-hover: var(--background-modifier-hover);
  --item-background-active: var(--background-modifier-active);
  --item-color: var(--text-normal);
  --item-color-active: var(--text-accent);

  --background-modifier-success: rgba(var(--color-green-rgb), 0.15);
  --background-modifier-error: rgba(var(--color-red-rgb), 0.15);
  --background-modifier-warning: rgba(var(--color-orange-rgb), 0.15);

  --mermaid-theme: light;
}

/* DARK THEME - CUSTOMIZE colors based on user theme description */
.theme-dark {
  /* Base color system for dark mode */
  --color-base-00: #1a1a2e; /* Dark Blue-Purple */
  --color-base-10: #1f203a; /* Slightly lighter dark blue-purple */
  --color-base-20: #2a2c4e; /* Darker blue-purple */
  --color-base-30: #3f426a; /* Medium dark blue-purple */
  --color-base-50: #7e82ac; /* Muted blue-purple */
  --color-base-70: #c1c4e0; /* Light blue-purple */
  --color-base-100: #e0e2f5; /* Very light blue-purple */

  /* CUSTOMIZE: Same accent as light mode or adjust for dark mode readability */
  --accent-h: 300; --accent-s: 70%; --accent-l: 75%; /* Pastel Lilac */

  /* CUSTOMIZE: Adjust extended colors for dark mode visibility */
  --color-red: #ffb3ba; /* Pastel Red */
  --color-orange: #ffdfba; /* Pastel Orange */
  --color-yellow: #ffffba; /* Pastel Yellow */
  --color-green: #baffba; /* Pastel Green */
  --color-cyan: #baffff; /* Pastel Cyan */
  --color-blue: #b3baff; /* Pastel Blue */
  --color-purple: #dfb3ff; /* Pastel Purple */
  --color-pink: #ffb3ff; /* Pastel Pink */

  /* RGB variants for dark mode opacity effects and callouts */
  --color-red-rgb: 255, 179, 186;
  --color-orange-rgb: 255, 223, 186;
  --color-yellow-rgb: 255, 255, 186;
  --color-green-rgb: 186, 255, 186;
  --color-cyan-rgb: 186, 255, 255;
  --color-blue-rgb: 179, 186, 255;
  --color-purple-rgb: 223, 179, 255;
  --color-pink-rgb: 255, 179, 255;

  /* Apply same pattern as light mode with dark base colors */
  --background-primary: var(--color-base-00);
  --background-secondary: var(--color-base-10);
  --background-modifier-hover: var(--color-base-20);
  --background-modifier-active: var(--color-base-30);
  --background-modifier-border: var(--color-base-30);

  --text-normal: var(--color-base-100);
  --text-muted: var(--color-base-70);
  --text-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --text-accent-hover: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 5%));
  --text-faint: var(--color-base-50);
  --text-highlight-bg: rgba(var(--color-yellow-rgb), 0.3);
  --text-highlight-bg-active: rgba(var(--color-yellow-rgb), 0.5);
  --text-selection: var(--text-selection-color);
  --text-success: var(--color-green);
  --text-warning: var(--color-orange);
  --text-error: var(--color-red);
  --interactive-accent: var(--text-accent);
  --interactive-accent-hover: var(--text-accent-hover);
  --interactive-hover: var(--color-base-20);
  --interactive-file: var(--text-normal);
  --interactive-file-hover: var(--text-accent);

  /* Component colors using RGB variables for callouts */
  --h1-color: var(--color-blue);
  --h2-color: var(--color-green);
  --h3-color: var(--color-orange);
  --h4-color: var(--color-purple);
  --h5-color: var(--color-pink);
  --h6-color: var(--color-red);
  --link-color: var(--color-blue);
  --link-hover-color: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 10%));
  --link-external-color: var(--color-cyan);
  --link-external-hover-color: var(--color-blue);
  --code-background: var(--color-base-10);
  --code-color: var(--text-normal);
  --nav-item-color: var(--text-normal);
  --nav-item-color-hover: var(--color-purple);
  --nav-item-color-active: var(--color-blue);
  --nav-item-background-hover: var(--background-modifier-hover);
  --nav-item-background-active: rgba(var(--color-blue-rgb), 0.1);
  --callout-info: var(--color-blue-rgb);
  --callout-warning: var(--color-orange-rgb);
  --callout-error: var(--color-red-rgb);
  --callout-success: var(--color-green-rgb);
  --callout-note: var(--color-purple-rgb);
  --callout-tip: var(--color-cyan-rgb);
  --callout-quote: 158, 158, 158;
  --callout-important: var(--color-pink-rgb);
  --callout-caution: var(--color-yellow-rgb);
  --callout-question: var(--color-blue-rgb);
  --callout-abstract: var(--color-green-rgb);
  --callout-bug: var(--color-red-rgb);
  --callout-example: var(--color-orange-rgb);
  --callout-todo: var(--color-purple-rgb);
  --callout-background-alpha: 0.2;

  --tag-background: rgba(var(--color-blue-rgb), 0.2);
  --tag-color: var(--color-blue);
  --tag-hover-background: rgba(var(--color-blue-rgb), 0.3);

  --table-border-color: var(--color-base-30);
  --table-header-background: rgba(var(--color-purple-rgb), 0.15);
  --table-row-alt-background: rgba(var(--color-pink-rgb), 0.1);
  --table-cell-background: transparent;
  --table-header-color: var(--color-base-100);

  --blockquote-color: var(--color-base-70);
  --blockquote-border-color: var(--color-pink);

  --hr-color: var(--color-base-30);

  --button-background: var(--interactive-accent);
  --button-background-hover: var(--interactive-accent-hover);
  --button-color: var(--color-base-100);
  --button-border-color: var(--interactive-accent);

  --input-background: var(--background-primary);
  --input-border-color: var(--background-modifier-border);
  --input-color: var(--text-normal);
  --input-placeholder-color: var(--text-muted);
  --input-focus-border-color: var(--interactive-accent);

  --modal-background: var(--background-primary);
  --modal-border-color: var(--background-modifier-border);
  --modal-title-color: var(--text-normal);

  --card-background: var(--background-secondary);
  --card-border-color: var(--background-modifier-border);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.08);

  --item-background-hover: var(--background-modifier-hover);
  --item-background-active: var(--background-modifier-active);
  --item-color: var(--text-normal);
  --item-color-active: var(--text-accent);

  --background-modifier-success: rgba(var(--color-green-rgb), 0.2);
  --background-modifier-error: rgba(var(--color-red-rgb), 0.2);
  --background-modifier-warning: rgba(var(--color-orange-rgb), 0.2);

  --mermaid-theme: dark;
}

/* Additional decorative styles for a wacky 00's feel */
.published-container {
  border: 4px dashed var(--color-base-30);
  padding: var(--size-4-4);
  box-shadow: 8px 8px 0px var(--color-base-30);
  margin: var(--size-4-8) auto;
}

.theme-light .published-container {
  box-shadow: 8px 8px 0px var(--color-base-30);
}
.theme-dark .published-container {
  box-shadow: 8px 8px 0px var(--color-base-20);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-interface-theme);
  text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
  padding-bottom: 5px;
  border-bottom: 2px solid;
  margin-bottom: 1em;
}

.theme-light h1 { border-color: var(--color-blue); text-shadow: 2px 2px 0px rgba(0,0,0,0.1); }
.theme-light h2 { border-color: var(--color-green); text-shadow: 2px 2px 0px rgba(0,0,0,0.1); }
.theme-light h3 { border-color: var(--color-orange); text-shadow: 2px 2px 0px rgba(0,0,0,0.1); }
.theme-light h4 { border-color: var(--color-purple); text-shadow: 2px 2px 0px rgba(0,0,0,0.1); }
.theme-light h5 { border-color: var(--color-pink); text-shadow: 2px 2px 0px rgba(0,0,0,0.1); }
.theme-light h6 { border-color: var(--color-red); text-shadow: 2px 2px 0px rgba(0,0,0,0.1); }

.theme-dark h1 { border-color: var(--color-blue); text-shadow: 0 0 5px var(--color-blue), 0 0 10px var(--color-blue), 2px 2px 0px rgba(0,0,0,0.1); }
.theme-dark h2 { border-color: var(--color-green); text-shadow: 0 0 5px var(--color-green), 0 0 10px var(--color-green), 2px 2px 0px rgba(0,0,0,0.1); }
.theme-dark h3 { border-color: var(--color-orange); text-shadow: 0 0 5px var(--color-orange), 0 0 10px var(--color-orange), 2px 2px 0px rgba(0,0,0,0.1); }
.theme-dark h4 { border-color: var(--color-purple); text-shadow: 0 0 5px var(--color-purple), 0 0 10px var(--color-purple), 2px 2px 0px rgba(0,0,0,0.1); }
.theme-dark h5 { border-color: var(--color-pink); text-shadow: 0 0 5px var(--color-pink), 0 0 10px var(--color-pink), 2px 2px 0px rgba(0,0,0,0.1); }
.theme-dark h6 { border-color: var(--color-red); text-shadow: 0 0 5px var(--color-red), 0 0 10px var(--color-red), 2px 2px 0px rgba(0,0,0,0.1); }

.callout {
  background-color: rgba(var(--callout-rgb), var(--callout-background-alpha));
  border: 2px solid rgba(var(--callout-rgb), 0.4);
  box-shadow: 4px 4px 0px rgba(var(--callout-rgb), 0.2);
  padding: var(--callout-padding);
  border-radius: var(--callout-border-radius);
  margin-top: 1em;
  margin-bottom: 1em;
}

.callout-title {
  color: rgb(var(--callout-rgb));
  font-weight: var(--callout-title-font-weight);
  display: flex;
  align-items: center;
}

.callout-icon {
  color: rgb(var(--callout-rgb));
  margin-right: var(--callout-icon-margin);
  width: var(--callout-icon-size);
  height: var(--callout-icon-size);
}

/* Callout type-specific RGB variables */
.callout[data-callout="info"] { --callout-rgb: var(--callout-info); }
.callout[data-callout="warning"] { --callout-rgb: var(--callout-warning); }
.callout[data-callout="error"] { --callout-rgb: var(--callout-error); }
.callout[data-callout="success"] { --callout-rgb: var(--callout-success); }
.callout[data-callout="note"] { --callout-rgb: var(--callout-note); }
.callout[data-callout="tip"] { --callout-rgb: var(--callout-tip); }
.callout[data-callout="quote"] { --callout-rgb: var(--callout-quote); }
.callout[data-callout="important"] { --callout-rgb: var(--callout-important); }
.callout[data-callout="caution"] { --callout-rgb: var(--callout-caution); }
.callout[data-callout="question"] { --callout-rgb: var(--callout-question); }
.callout[data-callout="abstract"] { --callout-rgb: var(--callout-abstract); }
.callout[data-callout="bug"] { --callout-rgb: var(--callout-bug); }
.callout[data-callout="example"] { --callout-rgb: var(--callout-example); }
.callout[data-callout="todo"] { --callout-rgb: var(--callout-todo); }

table {
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 1em;
  margin-bottom: 1em;
  width: 100%;
  border: 1px solid var(--table-border-color);
  border-radius: var(--table-border-radius);
  overflow: hidden;
}

table th,
table td {
  padding: var(--table-cell-padding);
  border: 1px solid var(--table-border-color);
}

table th {
  background-color: var(--table-header-background);
  color: var(--table-header-color);
  font-weight: var(--font-semibold);
  text-align: left;
  border-bottom: 2px solid var(--table-border-color);
}

table tr:nth-child(even) {
  background-color: var(--table-row-alt-background);
}

blockquote {
  border-left: var(--blockquote-border-width) solid var(--blockquote-border-color);
  padding: var(--blockquote-padding);
  margin: 1em 0;
  background-color: rgba(var(--color-pink-rgb), 0.1);
  color: var(--blockquote-color);
}

code {
  background-color: var(--code-background);
  color: var(--code-color);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-s);
}

pre code {
  display: block;
  padding: var(--code-block-padding);
  border-radius: var(--code-block-radius);
  overflow-x: auto;
}

.tag {
  background-color: var(--tag-background);
  color: var(--tag-color);
  padding: var(--tag-padding);
  border-radius: var(--tag-border-radius);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: background-color 0.2s ease;
}

.tag:hover {
  background-color: var(--tag-hover-background);
}

/* Basic scrollbar styling for a vintage look */
::-webkit-scrollbar {
  width: var(--scroll-bar-thickness);
  height: var(--scroll-bar-thickness);
}

::-webkit-scrollbar-track {
  background: var(--scroll-bar-track-color);
  border-radius: var(--scroll-bar-thumb-radius);
}

.theme-light ::-webkit-scrollbar-thumb {
  background: var(--color-base-30);
  border-radius: var(--scroll-bar-thumb-radius);
  border: 1px solid var(--color-base-20);
}

.theme-light ::-webkit-scrollbar-thumb:hover {
  background: var(--color-base-50);
}

.theme-dark ::-webkit-scrollbar-thumb {
  background: var(--color-base-30);
  border-radius: var(--scroll-bar-thumb-radius);
  border: 1px solid var(--color-base-20);
}

.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: var(--color-base-50);
}

/* General link styling */
a {
  color: var(--link-color);
  text-decoration: var(--link-decoration);
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: var(--link-decoration-hover);
}

.internal-link {
  color: var(--link-color);
}

.internal-link:hover {
  color: var(--link-hover-color);
}

.external-link {
  color: var(--link-external-color);
}

.external-link:hover {
  color: var(--link-external-hover-color);
}

/* Image styling */
img {
  max-width: 100%;
  height: auto;
  border-radius: var(--image-border-radius);
  margin: 1em auto;
}

/* Center standalone images/embeds without affecting multi-image rows */
p > img:only-child,
p > a:only-child > img {
  display: inline-block;
}

p > span.image-embed:only-child,
p > span.internal-embed:only-child {
  display: inline-block;
}

/* Add text-align center to paragraphs with only images */
p:has(> img:only-child),
p:has(> a:only-child > img),
p:has(> span.image-embed:only-child),
p:has(> span.internal-embed:only-child) {
  text-align: center;
}

/* Wacky border for embeds */
.markdown-embed {
  border: 3px double var(--color-cyan);
  border-radius: var(--embed-border-radius);
  background-color: rgba(var(--color-cyan-rgb), 0.05);
  padding: 1em;
  margin: 1em 0;
  box-shadow: 6px 6px 0px rgba(var(--color-cyan-rgb), 0.2);
}

.markdown-embed-title {
  color: var(--color-cyan);
  font-family: var(--font-interface-theme);
  font-weight: var(--font-bold);
  text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
}

/* Horizontal Rule - use a fun divider image */
hr {
  border: none;
  height: 60px;
  margin: var(--hr-margin);
  background: transparent;
}

hr::before {
  content: "";
  display: block;
  width: 320px;
  max-width: 80%;
  height: 40px;
  margin: 0 auto;
  background: url('attachments/divider2b.gif') no-repeat center / contain;
}

.emoji-image {
  padding: 0;
}