/* CSS Custom Properties */
:root {
  /*
    NEW ACCENT COLORS - Muted Bright Pink & Yellow
    Used for both light and dark themes.
  */
  --color-accent-pink: #E684AE;
  --color-accent-yellow: #E6B450;
  
  /* 
    Light Theme (Kanagawa Lotus)
    A warm, off-white background with the new pink/yellow accents.
  */
  --color-primary: var(--color-accent-pink);
  --color-primary-hover: var(--color-accent-yellow);
  --color-border: #A09DA8;
  --color-callout: #5A7777;
  --color-text: #393552;
  --color-text-muted: #646178;
  --color-text-meta: #A09DA8;
  --color-background: #FBF9F4;
  --color-background-code: #E6E6E1;
  --color-background-pre: #EFEFE6;
  --color-background-toc: #EFEFE6;
  --color-background-draft: #F9F2F4;
  
  /* 
    Dark Theme (Kanagawa Wave - Muted)
    Pitch black with the new pink/yellow accents.
  */
  --color-primary-dark: var(--color-accent-pink);
  --color-primary-hover-dark: var(--color-accent-yellow);
  --color-border-dark: #363646;
  --color-text-dark: #FAF4E1;
  --color-text-muted-dark: #938E7B;
  --color-background-dark: #000000;
  --color-background-code-dark: #1F1F28;
  --color-background-pre-dark: #16161D;
  --color-background-toc-dark: #16161D;
  --color-background-draft-dark: #7E6273;

  /* Spacing and sizing - Font sizes reduced */
  --content-max-width: 800px;
  --content-padding: 1ch;
  --border-radius: 5px;
  --font-size-base: 16px; /* Reduced from 18px */
  --line-height-base: 1.7;
  --line-height-content: 1.6;
}

/* Reset and base styles */
*, *::before, *::after { box-sizing: border-box; }

html {
  color: var(--color-text, #393552);
  font-family: 'PP Editorial New', Georgia, serif;
  font-size: var(--font-size-base, 16px);
  line-height: var(--line-height-base, 1.7);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 8px;
  background-color: var(--color-background, #FBF9F4);
  transition: background-color 0.2s ease, color 0.2s ease;
}

* { -webkit-tap-highlight-color: transparent; }

/* Selection styles */
::selection { background: var(--color-primary, #E684AE); color: var(--color-background, #FBF9F4); }
::-moz-selection { background: var(--color-primary, #E684AE); color: var(--color-background, #FBF9F4); }

/* Typography */
p { font-family: 'PP Editorial New', Georgia, serif; line-height: var(--line-height-content, 1.6); margin-block: 0.5em; }
hr { border: 0; border-block-start: 3px dotted var(--color-border, #A09DA8); margin-block: 1em; }
blockquote { border-inline-start: 3px solid var(--color-border, #A09DA8); padding-inline-start: 1em; color: var(--color-text-muted, #646178); margin: 0; font-style: italic; font-weight: 200; font-family: 'PP Editorial New', Georgia, serif; }

/*
========================================
NEW ANIMATED UNDERLINE FOR LINKS
========================================
*/
a {
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease;
  padding-bottom: 2px; /* Add some space for the underline */
}

/* The pseudo-element that will become the underline */
a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary, #E684AE);
  
  /* Animation setup */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease-in-out;
}

/* On hover/focus, animate the underline and change text color */
a:hover, a:focus {
  color: var(--color-primary-hover, #E6B450);
  outline: none; /* Removed the rectangle outline */
}

a:hover::after, a:focus::after {
  transform: scaleX(1); /* Animate the underline to full width */
}

/* Lists */
ul { list-style: none; padding-inline-start: 2ch; }
ul li { text-indent: -2ch; }
ul > li::before { content: '→ '; font-weight: bold; color: var(--color-primary, #E684AE); }

/* Images */
img { border: 3px solid var(--color-background-pre, #EFEFE6); max-inline-size: 100%; block-size: auto; border-radius: var(--border-radius, 5px); }
figure { display: inline-block; margin: 0; max-inline-size: 100%; }
figure img { max-block-size: 500px; }
@media screen and (min-width: 37.5em) { figure { padding-inline: 2.5rem; } }
figure h4 { font-size: 1rem; margin: 0; margin-block-end: 1em; font-style: italic; font-weight: 200; }
figure h4::before { content: '↳ '; color: var(--color-primary, #E684AE); }

/* Code blocks */
code { background-color: var(--color-background-code, #E6E6E1); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.85em; font-family: 'Roboto Mono', monospace; }
pre { background-color: var(--color-background-pre, #EFEFE6); line-height: 1.4; overflow-x: auto; padding: 1em; border-radius: var(--border-radius, 5px); border: 1px solid var(--color-border, #A09DA8); font-family: 'Roboto Mono', monospace; }
.highlight pre ::selection { background: rgba(0, 0, 0, 0.1); color: inherit; }
pre code { background-color: transparent; color: inherit; font-size: 100%; padding: 0; }

/* Layout containers */
.content { margin-block-end: 4em; margin-inline: auto; max-inline-size: var(--content-max-width, 800px); padding-inline: var(--content-padding, 1ch); word-wrap: break-word; overflow-wrap: break-word; }

/* Header */
header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-block: 1em; line-height: 2.5em; gap: 1rem; }
header .main { font-size: 1.5rem; font-weight: bold; }

/* Headings - Using PP Editorial, sizes reduced */
h1, h2, h3, h4, h5, h6 { font-family: 'PP Editorial New', Georgia, serif; margin-block-start: 2em; margin-block-end: 0.5em; line-height: 1.2; font-weight: 400; }
h1 { font-size: 2.2rem; } /* Reduced from 2.5rem */
h2 { font-size: 1.8rem; } /* Reduced from 2rem */
h3 { font-size: 1.6rem; } /* Reduced from 1.75rem */
h4 { font-size: 1.4rem; } /* Reduced from 1.5rem */
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before { color: var(--color-primary, #E684AE); content: ''; margin-right: 0; }
.meta { color: var(--color-text-meta, #A09DA8); letter-spacing: -0.5px; font-size: 0.9em; font-family: 'Roboto Mono', monospace; }

/* Post layout */
.post-container { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: flex-start; }
@media screen and (min-width: 60em) { .post-container { grid-template-columns: 1fr auto; } }
.post-content { min-inline-size: 0; overflow-wrap: break-word; }
.toc { background-color: var(--color-background-toc, #EFEFE6); border-radius: var(--border-radius, 5px); color: var(--color-text, #393552); max-inline-size: 18.75rem; overflow-y: auto; padding: 0.75rem; border: 1px solid var(--color-border, #A09DA8); }
@media screen and (min-width: 60em) { .toc { position: sticky; inset-block-start: 1.25rem; } }
@media screen and (max-width: 59.99em) { .toc { margin-block-end: 1.5rem; order: -1; } }

/* Footer */
footer { display: flex; align-items: center; border-block-start: 0.4rem dotted var(--color-border, #A09DA8); padding-block: 2rem; margin-block-start: 2rem; gap: 0.5rem; flex-wrap: wrap; }
.border { margin-inline: 0.5rem; border: 1px solid var(--color-border, #A09DA8); }
.soc { /* Inherits the new 'a' styles */ }
.soc:hover, .soc:focus { color: var(--color-primary, #E684AE); }

/* Common elements */
.title h1 { margin-block-end: 0; }
time { color: var(--color-text-muted, #646178); font-size: 0.9em; }
article .title { margin-block-end: 1em; }

/* Callouts */
.callout { background-color: var(--color-callout, #5A7777); color: var(--color-background, #FBF9F4); padding: 1em; border-radius: var(--border-radius, 5px); margin-block: 1em; }
.callout p { font-family: 'IBM Plex Mono', monospace; margin: 0; }
/* Override for callout links */
.callout a { color: inherit; }
.callout a::after { background-color: var(--color-background, #FBF9F4); }
.callout a:hover, .callout a:focus { color: var(--color-accent-yellow); }

/* Callout variants */
.callout-alert { color: #721c24; background-color: #f8d7da; border: 3px solid #f5c2c7; }
.callout-tip { color: #055160; background-color: #d1ecf1; border: 3px solid #b8daff; }
.callout-warning { color: #664d03; background-color: #fff3cd; border: 3px solid #ffecb5; }
.callout-custom { color: inherit; }
.site-description { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }

/* Tags - Now use the animated underline */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }
.tags li::before { content: "🏷 "; margin-inline-start: 2rem; }
.tags a { padding: 0.25rem 0.5rem; transition: all 0.2s ease; }
.tags a:hover, .tags a:focus { color: var(--color-primary-hover, #E6B450); }

/* Icons and media */
svg { max-block-size: 1rem; max-inline-size: 1rem; }
.feather { inline-size: 1.5rem; block-size: 1.5rem; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; display: inline-block; vertical-align: middle; }
.draft-label { color: var(--color-border, #A09DA8); text-decoration: none; padding: 0.125rem 0.25rem; border-radius: 4px; margin-inline-start: 0.375rem; background-color: var(--color-background-draft, #F9F2F4); font-size: 0.8em; font-weight: bold; }

/* Code highlighting */
.highlight { position: relative; -webkit-overflow-scrolling: touch; border-radius: var(--border-radius, 5px); overflow: hidden; }
.highlight pre code[class*="language-"] { -webkit-overflow-scrolling: touch; }
.highlight pre code[class*="language-"]::before { background: #000000; border-radius: 0 0 0.25rem 0.25rem; color: #ffffff; font-size: 0.75rem; font-weight: bold; letter-spacing: 0.025rem; padding: 0.1rem 0.5rem; position: absolute; inset-inline-end: 1rem; inset-block-start: 0; text-align: right; text-transform: uppercase; }
.highlight pre code[class*="language-js"]::before, .highlight pre code[class="language-javascript"]::before { content: "js"; background: #f7df1e; color: #000000; }
.highlight pre code[class*="language-ts"]::before { content: "ts"; background: #3178c6; color: #ffffff; }
.highlight pre code[class*="language-py"]::before, .highlight pre code[class*="language-python"]::before { content: "python"; background: #3776ab; color: #ffffff; }
.highlight pre code[class*="language-go"]::before { content: "go"; background: #00add8; color: #ffffff; }
.highlight pre code[class*="language-css"]::before { content: "css"; background: #1572b6; color: #ffffff; }
.highlight pre code[class*="language-html"]::before { content: "html"; background: #e34f26; color: #ffffff; }
.highlight pre code[class*="language-json"]::before { content: "json"; background: #000000; color: #ffffff; }
.highlight pre code[class*="language-yml"]::before, .highlight pre code[class*="language-yaml"]::before { content: "yaml"; background: #cc1018; color: #ffffff; }
.highlight pre code[class*="language-shell"]::before, .highlight pre code[class*="language-bash"]::before, .highlight pre code[class*="language-sh"]::before { content: "shell"; background: #4eaa25; color: #ffffff; }
.highlight pre code[class*="language-md"]::before, .highlight pre code[class*="language-markdown"]::before { content: "markdown"; background: #083fa1; color: #ffffff; }

/* Tables */
table { border-spacing: 0; border-collapse: collapse; inline-size: 100%; margin-block: 1rem; border-radius: var(--border-radius, 5px); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
table th { padding: 0.75rem; border: 1px solid var(--color-border, #A09DA8); font-weight: bold; background-color: var(--color-background-pre, #EFEFE6); text-align: start; }
table td { padding: 0.75rem; border: 1px solid var(--color-border, #A09DA8); }
table tr:nth-child(even) { background-color: var(--color-background-code, #E6E6E1); }

/* Navigation and theme toggle */
nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.nav-toggle { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: none; background: none; margin: 0; font: inherit; cursor: pointer; padding: 0.5rem; border-radius: 4px; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; }
.nav-toggle { color: var(--color-text, #393552); }
.nav-toggle:hover, .nav-toggle:focus { background-color: var(--color-primary, #E684AE); color: #ffffff; outline: none; }
.nav-toggle:focus { box-shadow: 0 0 0 2px var(--color-primary); } /* Accessible focus state */
.nav-toggle:active { transform: scale(0.95); }

/* Media queries for responsive design */
@media (max-width: 37.4em) {
  .content { padding-inline: 0.5rem; }
  header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .site-description { flex-direction: column; align-items: flex-start; }
}