/* Manuel Moreale inspired design for garbas.si */
/* Clean, content-first minimalism */

/* Reset and Configuration */
*,*::before,*::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern", "liga", "clig", "calt";
}

/* Light Theme (Default) */
:root {
    --background: #fff;
    --background-media: #f9f9f9;
    --background-code: #f9f9f9;
    --text: #474747;
    --text-lighter: #767676;
    --lines: #eee;
    --marks: #bbb;
    --lists: #888;
    --brand: #FFCC66;
    --brand-alt: #FFAA33;
    --shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

/* Dark Theme */
[data-theme="dark"] {
    --background: #1a1a1a;
    --background-media: #222;
    --background-code: #2a2a2a;
    --text: #e0e0e0;
    --text-lighter: #a0a0a0;
    --lines: #333;
    --marks: #555;
    --lists: #888;
    --brand: #FFAA33;
    --brand-alt: #FF8800;
    --shadow: rgba(0, 0, 0, 0.3) 0px 10px 10px -10px;
}

/* Typography Variables */
:root {
    /* Fluid Typography 450px -> 3500px */
    --font-size: clamp(14px, 0.45vi + 12.42px, 26px);
    --line-height: clamp(26px, 0.72vi + 22.75px, 48px);

    /* Font Families */
    --font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
    --font-family-sans: system-ui, sans-serif;
    --font-family-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;

    /* Font Styles */
    --base-text: 400 1rem/1.85 var(--font-family);
    --h1-title: 700 1.6rem/1.5 var(--font-family);
    --h2-title: 700 1.3rem/1.6 var(--font-family);
    --h3-title: 700 1.15rem/1.7 var(--font-family);
    --caption: 400 0.86rem/1.85 var(--font-family);
    --code: 400 0.86rem/1.85 var(--font-family-mono);
    --small-text: 400 0.889rem/0.889rlh var(--font-family);

    /* Layout Variables */
    --text-column: 700px;
    --text-column-wider: 770px;
}

/* Base Styles */
html {
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-family: var(--font-family);
    background: var(--background);
    color: var(--text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    font-size: var(--font-size);
    line-height: var(--line-height);
    padding: 3rem 1rem 1rem;
    margin: 0;
    background: var(--background);
    color: var(--text);
}

::selection {
    background: var(--brand);
    color: var(--text);
}

/* Main Content Container */
main {
    max-width: var(--text-column);
    margin-left: auto;
    margin-right: auto;
}

/* Header */
header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 2em;
    line-height: 2.5em;
    gap: 1rem;
    max-width: var(--text-column);
}

header .main {
    font-size: 1.5rem;
    font-weight: bold;
}

header .main a {
    border: none;
    text-decoration: none;
    color: var(--text);
}

header .main a:hover {
    opacity: 0.75;
}

/* Logo */
.logo-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-logo {
    height: 3rem;
    width: auto;
    border: none;
    border-radius: 0.25rem;
}

.site-name {
    font-size: 1.5rem;
    font-weight: bold;
}

/* Navigation */
nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

nav a {
    font: var(--small-text);
    font-variant-caps: all-small-caps;
    transition: opacity 150ms ease-out;
    border: none !important;
    text-decoration: none !important;
    background: none !important;
    color: var(--text);
}

nav a:hover {
    opacity: 0.75;
}

/* Dark Mode Toggle */
.nav-toggle {
    appearance: none;
    border: none;
    background: none;
    padding: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    transition: opacity 150ms ease-out;
}

.nav-toggle:hover {
    opacity: 0.75;
}

.nav-toggle .feather {
    width: 1.2rem;
    height: 1.2rem;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Typography */
h1, h2, h3, h4, h5, h6, p, ol, ul, blockquote, pre {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--text-column);
}

h1 {
    font: var(--h1-title);
    margin-bottom: 0.5em;
    margin-top: 0;
}

article .title h1 {
    margin-bottom: 0.3em;
}

h2 {
    font: var(--h2-title);
    margin-bottom: 1em;
    margin-top: 3em;
    text-align: center;
}

h3, h4, h5, h6 {
    font: var(--h3-title);
    margin-bottom: 1em;
    margin-top: 2em;
    text-align: center;
}

p {
    font: var(--base-text);
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

/* Text indent for consecutive paragraphs */
.content-body p + p {
    text-indent: 2ch;
}

/* Lists */
ul, ol {
    padding-left: 2ch;
}

ul {
    list-style-type: circle;
}

li::marker {
    color: var(--lists);
}

/* Links - Gradient underline with slide animation */
[data-md] :where(p, li, small, .description) a,
.content-body a {
    color: inherit;
    background-image: linear-gradient(to right, var(--brand), var(--brand-alt));
    background-repeat: no-repeat;
    background-position: 0% 100%;
    background-size: 300% 40%;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-decoration-thickness: 0.5em;
    text-underline-offset: -0.25em;
    text-decoration-color: var(--brand);
    transition: background-position 150ms ease-out;
}

[data-md] :where(p, li, small, .description) a:hover,
.content-body a:hover {
    background-position: 100% 100%;
}

/* Other links (header, nav, footer, titles) */
a {
    color: inherit;
    text-decoration: none;
    transition: opacity 150ms ease-out;
}

a:hover {
    opacity: 0.75;
}

/* Code */
code {
    background: var(--background-code);
    font: var(--code);
    padding: 0.1em 0.4em;
    border-radius: 3px;
}

pre {
    background: var(--background-code);
    font: var(--code);
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding: 1em;
    border: 2px dashed var(--lines);
    overflow: auto;
    border-radius: 2px;
}

pre code {
    background: none;
    padding: 0;
}

/* Horizontal Rules */
hr {
    border: none;
    margin: 2em 0;
    text-align: center;
}

hr::before {
    content: "✽ ✽ ✽";
    white-space: pre;
    color: var(--marks);
}

/* Blockquotes */
blockquote {
    border: 1px solid var(--lines);
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    position: relative;
    font-style: italic;
    border-radius: 2px;
    box-shadow: var(--shadow);
    padding: 1em;
    max-width: var(--text-column-wider);
    background: var(--background);
}

blockquote::before {
    content: "❊ ❈ ❊";
    color: var(--marks);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--background);
    padding: 0 0.25rem;
    font-style: normal;
}

blockquote:nth-child(odd)::before {
    content: "❈ ❊ ❈";
}

blockquote p {
    font-style: inherit;
    margin: 0;
}

/* Site Description */
.site-description {
    text-align: center;
    max-width: var(--text-column);
    margin: 3em auto;
}

.site-description p {
    font-style: italic;
    margin: 0;
}

/* List Items (Blog Posts on Homepage) */
.list-item {
    margin-bottom: 3em;
}

.list-item .title {
    margin-bottom: 0.3em;
}

.list-item .title h1,
.list-item .title h2 {
    font: var(--h2-title);
    margin: 0;
    text-align: left;
}

.list-item .title a {
    border: none;
}

.list-item .title a:hover {
    opacity: 0.75;
}

.list-item time {
    color: var(--text-lighter);
    font: var(--caption);
    display: block;
    margin-bottom: 0.5em;
}

.list-item .description {
    font: var(--base-text);
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.list-item .readmore {
    font: var(--small-text);
    font-variant-caps: all-small-caps;
    border: none !important;
    background: none !important;
    text-decoration: none !important;
}

/* Meta Information */
.meta, time {
    color: var(--text-lighter);
    font: var(--caption);
}

article time {
    display: block;
    margin-bottom: 2em;
}

/* Footer */
footer {
    padding: 3em 0 1.5em;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    max-width: var(--text-column);
    margin: 3em auto 0;
}

footer a {
    font: var(--small-text);
    font-variant-caps: all-small-caps;
    transition: opacity 150ms ease-out;
    border: none !important;
    background: none !important;
    text-decoration: none !important;
}

footer a:hover {
    opacity: 0.75;
}

footer a:not(:last-child)::after {
    content: " — ";
    white-space: pre;
    opacity: 0.25;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--lines);
    border-radius: 2px;
}

/* Featured Image */
.featured-image {
    margin: 1.5em 0 2em 0;
    padding: 0;
}

.featured-image img {
    width: 100%;
    border-radius: 4px;
}

/* Tags */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin-top: 2em;
}

.tags li {
    margin: 0;
}

.tags a {
    font: var(--small-text);
    font-variant-caps: all-small-caps;
    border: none !important;
    background: var(--background-code) !important;
    text-decoration: none !important;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    display: inline-block;
    transition: background-color 150ms ease-out;
}

.tags a:hover {
    background: var(--brand) !important;
    opacity: 1;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: space-between;
    max-width: var(--text-column);
    margin: 3em auto;
}

.pagination ul {
    display: flex;
    width: 100%;
    justify-content: space-between;
    list-style: none;
    padding: 0;
}

.pagination a {
    font: var(--small-text);
    font-variant-caps: all-small-caps;
    border: none !important;
    background: none !important;
    text-decoration: none !important;
}

/* Draft Label */
.draft-label {
    color: var(--brand-alt);
    font-size: 0.8em;
    font-weight: bold;
    padding: 0.125rem 0.25rem;
    background: var(--background-code);
    border-radius: 3px;
    margin-left: 0.5em;
}

/* Strong and Emphasis */
strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    body {
        padding: 2rem 0.5rem 1rem;
    }

    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.2rem;
    }
}