/*
 * UCCS — prose.css
 * Typography styles for article body content (Markdown output).
 * Loaded only on single article pages via the "head_extra" block in single.html.
 *
 * Sections:
 *   11. Article body — headings, paragraphs, lists
 *   12. Code blocks
 *   13. Tables
 *   14. Footnotes / endnotes
 *   15. TOC shortcode (sc-toc)
 */

/* ============================================================
 *  16. STANDALONE PAGES — Despre / Contact / Donează
 * ============================================================ */

/* Full-width override: remove main's side padding for standalone */
.pg-standalone main {
  max-width: 100%;
  padding-inline: 0;
  padding-block: 0;
}

.pg-standalone {
  width: 100%;
}

/* Hero and body are internally constrained for readability */
.pg-standalone__hero,
.pg-standalone__body {
  max-width: var(--site-max-w);
  margin-inline: auto;
  padding-inline: var(--side-pad);
}

.pg-standalone__hero {
  padding-top:    var(--space-16);
  padding-bottom: var(--space-12);
  max-width: 820px;         /* hero text reads better narrower */
  margin-inline: 0;         /* left-align hero, not centered */
  padding-inline: var(--side-pad);
}

.pg-standalone__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-6);
}

.pg-standalone__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-text);
  margin: 0;
}

.pg-standalone__subtitle {
  display: block;
  font-style: italic;
  color: var(--color-gold);
}

.pg-standalone__lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-top: var(--space-8);
  max-width: 56ch;
}

/* Body prose */
.pg-standalone__body {
  padding-top:    var(--space-10);
  padding-bottom: var(--space-20);
}

.pg-standalone__body p {
  margin-top: var(--space-5);
  max-width: 70ch;
  line-height: 1.78;
}

.pg-standalone__body a { color: var(--color-primary); }

/* Responsive */
@media (max-width: 640px) {
  .pg-standalone__hero       { padding-top: var(--space-10); }
  .pg-standalone__title      { font-size: var(--text-2xl); }
  .pg-standalone__lead       { font-size: var(--text-base); }
}

/* ============================================================
 *  16b. SHORTCODE — section-heading
 *  Use {{< section-heading >}} instead of ## inside standalone pages.
 *  Renders as a page-level context switch with generous space.
 * ============================================================ */

.sc-section-heading {
  max-width: var(--site-max-w);
  margin-inline: auto;
  padding-inline: var(--side-pad);
  margin-top:    var(--space-20);
  margin-bottom: var(--space-8);
}

.sc-section-heading__eyebrow {
  font-family:    var(--font-ui);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-text-faint);
  margin-bottom:  var(--space-3);
}

.sc-section-heading__title {
  font-family:    var(--font-display);
  font-size:      var(--text-2xl);
  font-weight:    500;
  letter-spacing: -0.02em;
  line-height:    1.1;
  color:          var(--color-text);
  margin:         0;
}

/* Full-width divider above each section heading */
.sc-section-heading::before {
  content:          '';
  display:          block;
  width:            100vw;
  margin-left:      calc(-1 * var(--side-pad));
  height:           1px;
  background:       var(--color-divider);
  margin-bottom:    var(--space-10);
}

@media (max-width: 640px) {
  .sc-section-heading              { margin-top: var(--space-16); }
  .sc-section-heading__title       { font-size: var(--text-xl); }
}
/* ============================================================
 1 1. ARTICLE BODY — prose typography                  *
 ============================================================ */

{
    /* width flows from parent <article> which is capped at --content-article */
}

h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-top: var(--space-12);
    margin-bottom: var(--space-3);
    color: var(--color-text);
}

h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
    margin-top: var(--space-8);
    margin-bottom: var(--space-2);
}

h4 {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
}

ul, ol {
    padding-left: var(--space-6);
    margin-top: calc(-1 * var(--space-2) + var(--space-1));
}

li {
    margin-bottom: var(--space-2);
    margin-top: calc(-1 * var(--space-2) + var(--space-1));
}

strong { font-weight: 600; }
em { font-style: italic; }

blockquote {
    margin-block: var(--space-8);
    padding: var(--space-6) var(--space-8);
    background: #f2ede4;
    border-radius: var(--radius-lg);
    position: relative;
}

blockquote::before {
    content: '\201C';
    font-family: var(--font-display);
    font-size: 4.5rem;
    line-height: 1;
    color: var(--color-primary-highlight);
    position: absolute;
    top: var(--space-2);
    left: var(--space-4);
    pointer-events: none;
    user-select: none;
}

[data-theme="dark"] blockquote::before {
    color: var(--color-surface-dynamic);
}

blockquote p {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

blockquote cite,
blockquote footer {
    display: block;
    margin-top: var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-style: normal;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}

hr {
    border: none;
    border-top: 1px solid var(--color-divider);
    margin-block: var(--space-10);
}

img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    margin-block: var(--space-6);
}

figure { margin-block: var(--space-8); }

figure img {
    margin-block: 0;
    width: 100%;
}

figcaption {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
    line-height: 1.5;
}

/* ============================================================
 1 2. CODE BLOCKS                                      *
 ============================================================ */

code {
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.875em;
    background: var(--color-surface-offset);
    color: var(--color-text);
    padding: 0.15em 0.45em;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(28, 26, 20, 0.08);
}

pre {
    background: var(--color-surface-offset);
    border: 1px solid rgba(28, 26, 20, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    overflow-x: auto;
    margin-block: var(--space-6);
    color: var(--color-text);
}

pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--text-sm);
    line-height: 1.65;
    color: inherit;
}

[data-theme="dark"] pre,
[data-theme="dark"] pre code,
[data-theme="dark"] code {
    color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) pre,
    :root:not([data-theme]) pre code,
    :root:not([data-theme]) code {
        color: var(--color-text);
    }
}

/* ============================================================
 1 3. TABLES                                           *
 ============================================================ */

table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-6);
    font-size: var(--text-sm);
    font-family: var(--font-ui);
}

th {
    text-align: left;
    padding: var(--space-2) var(--space-4);
    border-bottom: 2px solid rgba(28, 26, 20, 0.18);
    font-weight: 600;
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

td {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-divider);
    vertical-align: top;
    line-height: 1.55;
}

tr:last-child td { border-bottom: none; }

tbody tr:hover td { background: var(--color-surface); }

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--space-6);
}

.table-scroll table {
  width: 100%;
  min-width: 36rem;
  margin-block: 0;
}

/* ============================================================
 1 4. FOOTNOTES                                        *
 ============================================================ */

.footnotes {
    margin-top: var(--space-16);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-divider);
}

.footnotes::before {
    content: 'Note';
    display: block;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    margin-bottom: var(--space-4);
}

.footnotes ol { padding-left: var(--space-5); }

.footnotes li {
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    line-height: 1.6;
    max-width: 64ch;
}

sup a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    padding-inline: 1px;
    vertical-align: super;
}

sup a:hover { text-decoration: underline; }

.footnote-backref {
    margin-left: var(--space-1);
    text-decoration: none;
    color: var(--color-text-faint);
}

.footnote-backref:hover { color: var(--color-primary); }

.footnotes hr { display: none; }

/* ARTICLE TAGS */
.tag-list {
  margin-left: var(--space-1);
  text-decoration: none;
  color: var(--color-text-faint);
  padding-top: var(--space-3);
}

.tag-list:has(ol > li)::before {
  content: 'Etichete';
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}

.tag-list ol {
  padding-left: var(--space-5);
  list-style: none; /* scoate numerele */
  margin: 0;
  padding: 0;
  display: flex; /* INLINE layout */
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag-list li {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  line-height: 1.6;
  max-width: 64ch;
}

.tag-list a {
  color: var(--color-text-muted);
  text-decoration: underline; /* UNDERLINED */
  text-underline-offset: 0.1em; /* spațiu sub linie */
  border-radius: 2px;
}

.tag-list a:hover {
  text-decoration: underline wavy; /* efect hover fain */
  color: var(--color-primary-dark);
}

/* ============================================================
 * 11a. ARTICLE BODY — extended headings
 * ============================================================ */

h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.18;
  margin-top: var(--space-16);
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.22;
  margin-top: var(--space-12);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  margin-top: var(--space-8);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

h4 {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

h5,
h6 {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

/* ============================================================
 * 15. TOC SHORTCODE — sc-toc
 * ============================================================ */

.toc {
  background: #f8f9fa;
  padding: 1rem;
  border-left: 4px solid #007bff;
  margin: 2rem 0;
}

.toc ol, .toc ul {
  list-style-type: none;
  padding-left: 1rem;
}

.toc a {
  text-decoration: none;
  color: #007bff;
}

.toc a:hover {
  text-decoration: underline;
}

.toc ol {
  list-style: none;
  padding-left: 0;
}
.toc li {
  margin: 0.5rem 0;
}
.toc a {
  color: #495057;
  text-decoration: none;
  font-weight: 500;
}
.toc a:hover {
  color: #007bff;
  text-decoration: underline;
}

/*old*/


.sc-toc {
  margin-bottom: var(--space-10);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}

.sc-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--transition-fast);
}

.sc-toc__summary::-webkit-details-marker { display: none; }
.sc-toc__summary::marker               { display: none; }

.sc-toc__summary:hover { background: var(--color-surface-offset); }

.sc-toc__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  flex: 1;
}

.sc-toc__chevron {
  width: 16px;
  height: 16px;
  color: var(--color-text-faint);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.sc-toc[open] .sc-toc__chevron { transform: rotate(180deg); }

.sc-toc__body {
  padding: var(--space-3) var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-divider);
}

/* Hugo-generated TOC — nested <ul> with <li><a> */
.sc-toc__body #TableOfContents { margin: 0; }

.sc-toc__body ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sc-toc__body ul ul {
  padding-left: var(--space-4);
  margin-top: 2px;
  border-left: 1px solid var(--color-divider);
}

.sc-toc__body li { margin: 0; }

.sc-toc__body a {
  display: block;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  line-height: 1.5;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.sc-toc__body a:hover {
  color: var(--color-primary);
  background: var(--color-primary-highlight);
}

/* Nested headings slightly smaller */
.sc-toc__body ul ul a { font-size: var(--text-xs); }

/* YAML Details */

.pg-standalone__meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: hsl(0 0% 50%); /* Muted text */
  margin-top: var(--space-1)
}

.pg-standalone__author {
  font-weight: 600;
  color: hsl(0 0% 30%);
}

.pg-standalone__author a {
  color: inherit;
  text-decoration: none;
}

.pg-standalone__author a:hover {
  text-decoration: underline;
}

.pg-standalone__date,
.pg-standalone__category {
  color: inherit; /* Muted */
}

/* Dark mode support (dacă ai) */
@media (prefers-color-scheme: dark) {
  .pg-standalone__meta {
    border-bottom-color: hsl(0 0% 20%);
    color: hsl(0 0% 60%);
  }

  .pg-standalone__author {
    color: hsl(0 0% 80%);
  }
}