/* =============================================================================
   Global stylesheet. Plain CSS -- no build step; BuildSite copies this verbatim
   to output/assets/css/output.css. Component-scoped styles live in their own
   <style> blocks (see resources/views/components/*). This file holds the reset,
   prose/element styling, vertical rhythm, fonts, and the highlight.js theme.
   ========================================================================== */

/* ---- Reset ----------------------------------------------------------------
   Replaces the parts of Tailwind's preflight this site relied on: border-box
   sizing, zeroed block margins (vertical spacing comes from the flow rule
   below), neutral heading size/weight (set explicitly per element), and form
   controls inheriting the page font. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, blockquote, figure, pre,
aside, ul, ol, dl, dd, hr {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

ul, ol {
    padding: 0;
}

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

hr {
    height: 0;
    border: 0;
    border-top: 1px solid currentColor;
}

/* ---- Base / prose --------------------------------------------------------- */
a[target="_blank"]:not(.header-link)::after {
    content: "↗";
    margin-left: 0.1em;
    text-decoration: none;
    display: inline-block;     /* se separa del flujo del texto subrayado */
}

h2::after,
h3::after,
h4::after {
    content: " #";
    color: #888;
    font-weight: normal;
    opacity: 0;               /* oculto por defecto */
    transition: opacity 0.5s; /* animación suave */
}

h2:hover::after,
h3:hover::after,
h4:hover::after {
    opacity: 1;               /* aparece al hacer hover */
}

body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
    min-height: 100vh;
    background: inherit; /* por si tu fondo estaba en body */
}

.grad-bg {
    background: linear-gradient(to bottom, #000022 0rem, black 24rem, black 100%) no-repeat,
    linear-gradient(to top, #000022 0rem, black 24rem, black 100%) no-repeat,
    black; /* Fallblack */
    background-size: 100% 24rem, 100% 24rem, 100%;
    background-position: top, bottom, center;
    min-height: 100vh; /* Ensures the gradient covers the full viewport height */
    background-attachment: scroll; /* Ensures the gradient scrolls properly */
    padding-bottom: env(safe-area-inset-bottom); /* Ensure compatibility with iPhone safe area */
}

a:not(header > a):not(h2 > a):not(h3 > a):not(h4 > a) {
    color: #4477FF;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

a:active,
a:focus,
a:focus-visible,
a:focus-within,
a:hover,
a:target {
    color: var(--link-hover-color);
}

/* Transition for larger screens */
@media (min-width: 640px) {
    a:hover {
        transition: color 0.5s ease-in-out;
        color: var(--link-hover-color);
    }
}

h1 > a,
h2 > a,
h3 > a,
h4 > a {
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

h1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
    color: #ffffff;
}

h2 {
    font-size: 1.5rem;
    line-height: 2rem;
}
@media (min-width: 768px) {
    h2 { font-size: 1.25rem; line-height: 1.75rem; }
}

h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
}
@media (min-width: 768px) {
    h3 { font-size: 1.125rem; line-height: 1.75rem; }
}

h4 {
    font-weight: 700;
}

strong,
li::marker,
code:not(pre > code) {
    color: #ffffff;
}

pre,
figure,
blockquote:not(figure > blockquote),
aside:not(#toc) {
    max-width: 100%;
    margin-inline: auto;
}

pre,
blockquote,
aside {
    border-radius: 0.25rem;
}

pre {
    background-color: #222222;
    border: 1px dotted #999999;
}

/* Runtime-rendered comments (see post.blade.php) reuse this box style. */
.comment-text {
    margin: 0.75rem 0;
    padding: 1rem;
    border-left: 4px solid #3366FF;
    border-radius: 0.25rem;
    background: #000033;
    color: #ffffff;
}

code:not(pre > code) {
    background-color: #444444;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

code {
    font-family: var(--font-mono);
}

blockquote,
aside {
    padding: 1rem;
    border-left: 4px solid #3366FF;
    background: #000033;
    color: #ffffff;
}

blockquote {
    font-style: italic;
}

ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ol { list-style-type: decimal; }

ul,
ol {
    padding-left: 1rem;
    list-style-position: inside;
}

li::marker {
    font-weight: 700;
}

img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin-inline: auto;
    border-radius: 0.125rem;
}
@media (min-width: 768px) {
    img { width: 50%; }
}

figcaption {
    margin: 0.5rem 0;
    color: #999999;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
}

sup {
    font-size: 1rem;
    line-height: 1.5rem;
    vertical-align: baseline;
    position: relative;
    top: 0;
    margin-left: 0.2em;
}

sup > a:before { content: "["; }
sup > a:after  { content: "]"; }
sup > a        { text-decoration: none; }

ruby {
    display: ruby;
}

/* Firefox-specific adjustment */
@-moz-document url-prefix() {
    rt {
        position: relative;
        top: 1em;
        margin-left: -2em;
    }
}

table:not(.metadata) {
    border-collapse: collapse;
    max-width: 95%;
    margin-inline: auto;
}

th,
td:not(.metadata td) {
    text-align: left;
    padding: 0.5rem;
}

td:not(.metadata td) {
    border: 1px solid #999;
}

th {
    border: 1px solid #999;
    background-color: #000033;
    font-weight: bold;
    color: #fff;
}

/* ---- Vertical rhythm ------------------------------------------------------
   One source of truth for the gap between block-level siblings -- prose
   elements and components (.c-blockquote, .c-character, .c-img are <figure>/
   <aside>, so they're covered). The lobotomized-owl selector (* + x) skips the
   first child, so there's no stray margin at the top of a container. Adjust
   --flow-space to change the spacing everywhere at once. */
:root {
    --flow-space: 1.5rem;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, "Liberation Mono", "Courier New", monospace;
    /* Cyan a link fades to on hover/focus/active. Components that pin their own
       link colour must re-assert this within scope (see posts-list partial). */
    --link-hover-color: #00ffff;
}

* + :is(h1, h2, h3, h4, p, ul, ol, pre, nav, blockquote, aside, figure, table):not(li > ul):not(li > ol) {
    margin-top: var(--flow-space);
}

/* ---- Footnotes ------------------------------------------------------------ */
/* So that subsequent <p> are display: block as normal */
.footnotes li > p:first-of-type {
    display: inline;
    margin: 0;
}

.footnotes p {
    display: block;
}

/* Parsedown inserts an <hr> in the footnotes section. */
.footnotes hr {
    display: none;
}

.footnotes ol li {
    margin-bottom: 1rem;
}

/* ---- Fonts ---------------------------------------------------------------- */
:root {
    font-family: "InterVariable", Helvetica, Arial, sans-serif;
    font-feature-settings:
        "liga" 1,
        "calt" 1; /* fix for Chrome */
    font-weight: 400;
}

/* Settings for if user's browser supports variable fonts */
@supports (font-variation-settings: normal) {
    :root {
        font-family: "InterVariable", sans-serif;
        font-optical-sizing: auto;
    }
}

@font-face {
    font-family: InterVariable;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: InterVariable;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2");
}

@font-face {
    font-family: "HanSerif";
    src:
        url("/assets/fonts/HanSerif-Regular-subset.woff2") format("woff2"),
        url("/assets/fonts/HanSerif-Regular-subset.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ---- highlight.js theme (github-dark) ------------------------------------- */
pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5rem;
}
code.hljs {
    padding: 0;
}
.hljs {
    color: #c9d1d9;
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
    color: #ff7b72;
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
    color: #d2a8ff;
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable {
    color: #79c0ff;
}
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
    color: #a5d6ff;
}
.hljs-built_in,
.hljs-symbol {
    color: #ffa657;
}
.hljs-code,
.hljs-comment,
.hljs-formula {
    color: #8b949e;
}
.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag {
    color: #7ee787;
}
.hljs-subst {
    color: #c9d1d9;
}
.hljs-section {
    color: #1f6feb;
    font-weight: 700;
}
.hljs-bullet {
    color: #f2cc60;
}
.hljs-emphasis {
    color: #c9d1d9;
    font-style: italic;
}
.hljs-strong {
    color: #c9d1d9;
    font-weight: 700;
}
.hljs-addition {
    color: #aff5b4;
    background-color: #033a16;
}
.hljs-deletion {
    color: #ffdcd7;
    background-color: #67060c;
}