@import url('./fonts.css'); /* Load font definitions */

/* --- CSS Variables --- */
:root {
  /* Colors */
  --bg-color: #E2E0CA; /* Eggshell - A nice subtle beige */
  --primary-color: #143552; /* Prussian Blue */
  --text-color: #0C2032; /* Oxford Blue */
  --text-light: #143552; /* Lighter text for meta info */
  --border-color: #6F4954; /* Eggplant */
  --link-color: #EB7270; /* Light Coral */

  /* Typography */
  --font-serif: 'PT Serif', Georgia, serif; 
  --font-sans: 'Figtree', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --base-font-size: 16px;
  --base-line-height: 1.7;

  /* Layout */
  --content-max-width: 1200px;
  --main-padding-v: 3rem;
  --main-padding-h: 1rem;

  /* Spacing */
  --spacing-unit: 1rem;
}

/* --- Basic Reset & Body Styles --- */
*,
*::before,
*::after {
  box-sizing: border-box; /* More intuitive box model */
}

html {
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--text-color);
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Site header and footer */
.site-header, .site-footer {
  flex-shrink: 0;
  padding: calc(var(--spacing-unit) / 2) var(--main-padding-h);
  text-align: left;
}

.site-header {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
  padding-top: var(--spacing-unit);
}

.site-footer {
  margin-top: auto;
  font-size: 0.9rem;
  color: var(--text-light);
  padding-bottom: var(--spacing-unit);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: var(--spacing-unit);
}

/* Basic link styling */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

/* --- Main Content Area --- */
main {
  width: 100%; /* Take full width initially */
  padding: var(--main-padding-v) var(--main-padding-h); /* Padding top/bottom, and side for small screens */
  flex-grow: 1; /* Allow main to take up remaining vertical space */
}

/* On wider screens, maybe add a max-width to main itself,
   but it should be wider than the text column */
@media (min-width: 1024px) { /* Adjust breakpoint as needed */
  main {
     width: 90%;
     max-width: 1200px; /* Wider than --content-max-width */
     margin-left: auto;
     margin-right: auto;
     padding-left: 0; /* Remove horizontal padding if centered */
     padding-right: 0;
  }
}

/* --- Text Content Column --- */
article { /* Or use a class like .content-column if preferred */
  max-width: var(--content-max-width); /* CRUCIAL for readability */
  margin-left: auto; /* Center the article within the main container */
  margin-right: auto;
  counter-reset: section-counter;
}

/* Article header */
.article-header {
  margin-bottom: calc(var(--spacing-unit) * 2);
  text-align: center;
}

.article-header h1 {
  margin-bottom: 0.25em;
  text-align: center;
}

/* Basic paragraph styling */
article p {
  /* Inherits font-size and line-height from body/html */
  margin-top: 0;
  margin-bottom: var(--spacing-unit); /* Space between paragraphs */
}

/* Basic heading styling */
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  font-family: var(--font-serif); /* Using sans-serif for headings for contrast */
  color: var(--primary-color);
  margin-top: 2.5em; /* More space above headings */
  margin-bottom: 1em; /* Space below headings */
  line-height: 1.3; /* Tighter line height for headings */
  font-weight: 600; /* Or adjust as needed */
}

article h1 { font-size: 1.8rem; }
article h2 { font-size: 1.5rem; }
article h3 { font-size: 1.2rem; }
article h4 { font-size: 1.0rem; }

/* Ensure first element in article doesn't have excessive top margin */
article > *:first-child {
  margin-top: 0;
}

/* --- Article Meta Styling --- */

.article-meta {
  margin-top: calc(var(--spacing-unit) * 0.5); /* Space below H1 */
  margin-bottom: calc(var(--spacing-unit) * 1.5); /* More space before main content */
  text-align: center; /* Center the meta block */
  line-height: 1.25; /* Slightly tighter line height than body text */
}

.article-meta p {
  margin: 0.1em 0; /* Small vertical spacing between meta items */
  font-size: 0.75rem; /* Slightly smaller than base, or keep at base? Let's try 1rem */
}

.subtitle {
  font-style: italic;
  color: var(--text-light); /* Less prominent than the main title */
  font-weight: 400; /* Ensure it's not bold */
}

.author {
  font-weight: 600; /* Make author slightly more prominent */
  font-family: var(--font-sans);
  margin: 0.5em 0;
  font-style: normal;
}

address.author {
  font-style: normal;
  display: block;
}

.date {
  font-size: 0.6rem !important; /* Smallest element */
  color: var(--text-light);
  font-family: var(--font-serif); /* Sans-serif often works well for small meta text */
  font-style: italic;
}

.article-meta + h2,
.article-meta + p, /* Add other potential first elements if needed */
.article-meta + figure {
   margin-top: calc(var(--spacing-unit) * 0.5);
}

/* Sections */
section {
  margin-bottom: var(--spacing-unit) * 2;
}

section > h2:first-child {
  margin-top: 1.5em;
}

/* Asides for special content */
aside {
  margin: var(--spacing-unit) 0;
  padding: calc(var(--spacing-unit) * 0.75);
  border-radius: 4px;
  font-size: 0.9em;
}

.key-point {
  background-color: rgba(235, 114, 112, 0.1); /* Light coral background */
  border-left: 3px solid var(--link-color);
}

.challenge, .future-direction {
  background-color: rgba(20, 53, 82, 0.1); /* Light primary color background */
  border-left: 3px solid var(--primary-color);
}

/* Add styling for code elements */
code {
  font-family: var(--font-mono);
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
  color: var(--primary-color);
}

/* Style for code examples that need to pop more */
code.highlight, .code-example {
  background-color: rgba(235, 114, 112, 0.15);
  color: var(--border-color);
  font-weight: 500;
}

/* Quoted examples styling */
.quoted-example {
  display: inline-block;
  background-color: rgba(20, 53, 82, 0.05);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-style: italic;
  position: relative;
}

/* Underlined text for emphasis */
.underlined {
  text-decoration: underline;
  text-decoration-color: var(--link-color);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Highlighted keywords */
.keyword {
  font-weight: 600;
  color: var(--border-color);
}

/* Visual separator for reducing wall-of-text */
.text-divider {
  display: block;
  width: 30%;
  margin: 1.5rem auto;
  height: 1px;
  background-color: rgba(111, 73, 84, 0.2);
}

/* Improved list styling for tiered approaches */
.tiered-list li {
  margin-bottom: calc(var(--spacing-unit) * 0.8);
  position: relative;
}

.tiered-list li strong {
  color: var(--border-color);
}

/* Make sections visually distinct */
section {
  margin-bottom: calc(var(--spacing-unit) * 3);
  position: relative;
}

/* Variable references like 'X' and 'Y' */
.variable-ref {
  font-family: var(--font-mono);
  font-weight: bold;
  padding: 0 0.2em;
  color: var(--border-color);
}

/* Add a subtle break between paragraphs in dense sections */
section p + p {
  margin-top: calc(var(--spacing-unit) * 1.2);
}

/* Enhance asides to pop more */
aside {
  margin: var(--spacing-unit) 0;
  padding: calc(var(--spacing-unit) * 0.75);
  border-radius: 4px;
  font-size: 0.9em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.key-point {
  background-color: rgba(235, 114, 112, 0.1); /* Light coral background */
  border-left: 5px solid var(--link-color);
}

.challenge, .future-direction {
  background-color: rgba(20, 53, 82, 0.1); /* Light primary color background */
  border-left: 5px solid var(--primary-color);
}

/* --- Multi-Column Content Styling --- */

/* Apply columns only on wider screens */
@media (min-width: 900px) { /* Adjust this breakpoint as needed */

  .content-columns {
    column-count: 2; /* Create two columns */
    column-gap: calc(var(--spacing-unit) * 3); /* Adjust gap between columns (e.g., 3rem) */

    /* Optional: Add a subtle rule between columns */
    /* column-rule: 1px solid var(--border-color); */
  }

  /* Try to prevent elements from breaking awkwardly across columns */
  .content-columns h2,
  .content-columns h3,
  .content-columns h4,
  .content-columns h5,
  .content-columns h6,
  .content-columns blockquote,
  .content-columns figure,
  .content-columns table,
  .content-columns pre, /* Code blocks */
  .content-columns ul, /* Lists */
  .content-columns ol {
    break-inside: avoid;
    /* For broader compatibility, you might include the older version: */
    /* page-break-inside: avoid; */
  }

  /* Optional: Allow specific elements like wide figures/tables to span columns */
  /*
  .content-columns figure.wide,
  .content-columns table.wide {
    column-span: all;
    width: 100%; // Ensure it takes the full width within the article boundary
    margin-left: 0;
    margin-right: 0;
  }
  */
}

/* Ensure paragraphs, lists etc inside columns have appropriate margins */
.content-columns p {
  margin-top: 0;
  margin-bottom: var(--spacing-unit);
}

.content-columns ul,
.content-columns ol {
  margin-top: 0;
  margin-bottom: var(--spacing-unit);
  padding-left: 1.5em; /* Standard list indentation */
}

.content-columns li {
  margin-bottom: calc(var(--spacing-unit) / 3);
}

/* Ensure the article itself still centers correctly */
article {
  max-width: var(--content-max-width); /* Keep this - it defines the total width available for columns */
  margin-left: auto;
  margin-right: auto;
}

/* --- Abstract Styling --- */
.abstract {
  margin-top: calc(var(--spacing-unit) * 1.5); /* Space after meta */
  margin-bottom: calc(var(--spacing-unit) * 2); /* Space before preface/content */
  margin-left: auto;  /* Center the block if narrower than article */
  margin-right: auto; /* Center the block */
  max-width: calc(var(--content-max-width) * 0.95); /* Make abstract slightly narrower */
  padding: var(--spacing-unit); /* Add some padding inside */
  background-color: rgba(0, 0, 0, 0.02); /* Very subtle background hint */
  font-size: 0.85em; /* Slightly smaller than base text */
  line-height: 1.6; /* Slightly tighter line height */
}

.abstract p {
  margin: 0; /* Remove default paragraph margins within abstract */
  font-weight: 600; /* Make text slightly heavier than normal, but less than bold */
}

/* --- Blockquote Styling (General) --- */
article blockquote { /* Style for ALL blockquotes in the article */
  margin-top: calc(var(--spacing-unit) * 1.5);
  margin-bottom: calc(var(--spacing-unit) * 1.5);
  margin-left: calc(var(--spacing-unit) * 1.5); /* Default indentation */
  margin-right: 0;
  padding-left: calc(var(--spacing-unit) * 1.5);
  border-left: 3px solid var(--border-color); /* Standard blockquote border */
  font-style: italic;
  font-size: 1em; /* Same size as body text */
  color: var(--text-light); /* Slightly lighter text for quotes */
}

article blockquote p {
  margin-bottom: calc(var(--spacing-unit) / 2); /* Spacing within the quote */
}

article blockquote p:last-child {
  margin-bottom: 0;
}

article blockquote footer,
article blockquote cite {
  font-style: normal;
  font-size: 0.9em;
  color: var(--text-light);
  text-align: right; /* Align attribution to the right */
}

/* --- Preface Blockquote Specific Styling --- */
article blockquote.preface-quote {
  margin-top: 0; /* Already has margin from abstract */
  margin-bottom: calc(var(--spacing-unit) * 2.5); /* More space before main content */
  margin-left: auto; /* Center the preface quote */
  margin-right: auto;
  max-width: calc(var(--content-max-width) * 0.8); /* Control width */
  border-left: none; /* Remove the standard left border */
  border-top: 1px solid var(--border-color); /* Add top/bottom borders instead? */
  border-bottom: 1px solid var(--border-color);
  padding: var(--spacing-unit) 0; /* Vertical padding, no horizontal */
  font-style: normal; /* Maybe preface isn't italic? */
  font-size: 0.9em; /* Slightly larger */
  text-align: center; /* Center the text */
  color: var(--text-color); /* Use standard text color, not lighter */
}

article blockquote.preface-quote p {
  font-style: italic; /* Keep quote text italic if desired */
}

article blockquote.preface-quote footer {
  text-align: center; /* Center attribution too */
  margin-top: var(--spacing-unit);
}

/* Section separator for content columns */
.section-separator {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-color), transparent);
  margin: 3rem auto;
  width: 80%;
  opacity: 0.7;
  position: relative;
  counter-increment: section-counter;
}

.section-separator::before {
  content: counter(section-counter);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--bg-color);
  padding: 0 1rem;
  color: var(--border-color);
  font-size: 1rem;
  font-family: var(--font-serif);
  font-weight: 600;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 50%;
}