/**
 * ARTICLE-MARGIN-COLUMN.CSS
 * Margem Tipográfica – coluna lateral ao lado do corpo do post
 *
 * A coluna marginal é uma área clássica da tipografia editorial usada para
 * notas de rodapé laterais (sidenotes), citações, glossário, etc.
 *
 * Funciona com os modos de notas de rodapé: sidenote.
 * Habilitada pelo parâmetro article_margin_column_enabled.
 */

/* -------------------------------------------------------------------------
   Variáveis de cor (sobrescritas pelo base.html se configuradas)
   ---------------------------------------------------------------------- */
:root {
    --margin-col-bg: var(--surface, #f5f5f0);
    --margin-col-text: var(--text-muted, var(--text));
    --margin-col-width: clamp(220px, 22%, 320px);
    --margin-col-gap: var(--space-xl, 2rem);
    --margin-col-padding: var(--space-md, 1rem);
    --margin-col-border-color: color-mix(in srgb, var(--margin-col-bg) 70%, var(--border-ink, #ccc) 30%);
    --margin-col-radius: var(--radius-sm, 4px);
    --margin-col-font-size: var(--text-sm, 0.875rem);
    --margin-col-line-height: 1.6;
    --sidenote-number-color: var(--accent-2, #c06a4a);
}

[data-theme="dark"] {
    --margin-col-bg: var(--surface, #1e1e1c);
    --margin-col-text: var(--text-muted, var(--text));
}

/* -------------------------------------------------------------------------
   Layout com margem tipográfica
   Envolve o post principal + coluna lateral
   ---------------------------------------------------------------------- */
.article-with-margin {
    display: grid;
    grid-template-columns: 1fr var(--margin-col-width);
    gap: clamp(var(--space-md, 1rem), 2vw, var(--space-xl, 2rem));
    align-items: start;
    position: relative;
}

/* O container do post ocupa a coluna principal */
.article-with-margin > :first-child {
    min-width: 0;
    /* Evita overflow em grids */
    padding-right: var(--space-sm, 0.5rem) !important;
}

/* -------------------------------------------------------------------------
   A coluna marginal em si
   ---------------------------------------------------------------------- */
.article-margin-column {
    align-self: stretch;
    background: var(--margin-col-bg);
    padding: var(--margin-col-padding) 0.15rem !important;
    border-radius: var(--margin-col-radius);

    font-size: var(--margin-col-font-size);
    line-height: var(--margin-col-line-height);
    color: var(--margin-col-text);
}

/* -------------------------------------------------------------------------
   Sidenotes – notas na margem
   ---------------------------------------------------------------------- */

/* Agrupador de todas as notas, posicionado na coluna */
.sidenote-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 0.5rem);
}

/* Item individual de sidenote */
.sidenote-item {
    border-left: 2px solid var(--sidenote-number-color) !important;
    border-radius: var(--margin-col-radius) !important;
    padding: var(--space-sm, 0.5rem) 0.15rem var(--space-sm, 0.5rem) 0.3rem !important;
    margin: 0 !important;
    transition: background 0.2s ease, border-color 0.2s ease;
    position: relative;
}

.sidenote-item--highlight,
.sidenote-item:target {
    background: color-mix(in srgb, var(--margin-col-bg) 60%, var(--sidenote-number-color) 40%) !important;
    border-color: var(--sidenote-number-color) !important;
}

/* Número da nota */
.sidenote-item__number {
    font-weight: var(--weight-bold, 700);
    color: var(--sidenote-number-color);
    font-size: 0.75em;
    vertical-align: super;
    line-height: 0;
    margin-right: 0.3em;
    font-variant-numeric: oldstyle-nums;
}

/* Conteúdo da nota */
.sidenote-item__content {
    display: inline;
    color: var(--margin-col-text);
}

.sidenote-item__content * {
    font-size: inherit;
    line-height: inherit;
}

.sidenote-item__content p {
    margin: 0 0 0.25em 0;
}

.sidenote-item__content p:last-child {
    margin-bottom: 0;
}

.sidenote-back {
    display: inline-block;
    margin-left: 0.4em;
    color: var(--sidenote-number-color);
    text-decoration: none;
    opacity: 0.7;
}

.sidenote-back:hover {
    opacity: 1;
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Estilo da referência no texto (modo sidenote)
   Sobrescreve o padrão de popup para ser âncora
   ---------------------------------------------------------------------- */
.footnote-ref--sidenote {
    color: var(--sidenote-number-color);
    text-decoration: none;
    font-weight: var(--weight-bold, 700);
    font-size: inherit;
    vertical-align: super;
    line-height: 0;
    margin: 0 1px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.footnote-ref--sidenote:hover {
    color: color-mix(in srgb, var(--sidenote-number-color) 80%, black 20%);
}

/* -------------------------------------------------------------------------
   Modo endnote – lista ao final do post
   ---------------------------------------------------------------------- */
.endnotes-section {
    margin-top: var(--space-2xl, 3rem);
    padding-top: var(--space-xl, 2rem);
    border-top: 1px solid var(--border-ink, var(--surface));
}

.endnotes-title {
    font-family: var(--font-display, serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--weight-bold, 700);
    color: var(--heading, var(--text));
    margin: 0 0 var(--space-md, 1rem) 0;
    letter-spacing: 0.01em;
}

.endnotes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.endnotes-item {
    display: flex;
    gap: var(--space-sm, 0.5rem);
    align-items: baseline;
    margin-bottom: var(--space-sm, 0.5rem);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.6;
    color: var(--text-muted, var(--text));
}

.endnotes-item__number {
    flex-shrink: 0;
    font-weight: var(--weight-bold, 700);
    color: var(--accent-2, #c06a4a);
    font-size: 0.8em;
    vertical-align: super;
    min-width: 1.5em;
    text-align: right;
}

.endnotes-item__content {
    flex: 1;
    min-width: 0;
}

.endnotes-item__content * {
    font-size: inherit;
}

.endnotes-item__content p {
    margin: 0;
}

/* Link de retorno ao texto */
.endnote-back {
    display: inline-block;
    margin-left: 0.4em;
    color: var(--accent-2, #c06a4a);
    text-decoration: none;
    font-size: 0.85em;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.endnote-back:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Âncora da referência no texto (modo endnote) */
.footnote-ref--endnote {
    color: var(--accent-2, #c06a4a);
    text-decoration: none;
    font-weight: var(--weight-bold, 700);
    font-size: inherit;
    vertical-align: super;
    line-height: 0;
    margin: 0 1px;
    transition: color 0.15s ease;
}

.footnote-ref--endnote:hover {
    color: color-mix(in srgb, var(--accent-2, #c06a4a) 80%, black 20%);
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Responsivo – em telas menores, coluna marginal vira endnote
   ---------------------------------------------------------------------- */
@media (max-width: 900px) {
    .article-with-margin {
        grid-template-columns: 1fr;
    }

    .article-margin-column {
        position: static;
        max-height: none;
        border-top: 1px solid var(--margin-col-border-color);
        padding-top: var(--space-md, 1rem);
    }

    .sidenote-item {
        border-left-width: 2px;
    }
}