/* 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: #E07020;
    --brand-alt: #C45A10;
    --highlight: #FFEEDD;
    --highlight-text: #474747;
    --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: #F08030;
    --brand-alt: #E06010;
    --highlight: #4A3015;
    --highlight-text: #F5E6D3;
    --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;
}

/* Bio Section */
.bio {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: var(--text-column);
    margin: 2em auto 3em;
    padding: 1.5em;
    border: 1px solid var(--lines);
    border-radius: 4px;
    background: var(--background);
}

.bio-avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--lines);
}

.bio-content {
    flex: 1;
}

.bio-tagline {
    font: var(--h3-title);
    margin: 0 0 0.5em 0;
    text-align: left;
}

.bio-description {
    font: var(--base-text);
    color: var(--text-lighter);
    margin: 0;
}

@media (max-width: 768px) {
    .bio {
        flex-direction: column;
        text-align: center;
    }

    .bio-tagline {
        text-align: center;
    }
}

/* Site Description (legacy, kept for compatibility) */
.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) {
    html, body {
        font-size: 21px;
        line-height: 1.8;
    }

    body {
        padding: 2rem 1em 1rem;
    }

    /* Ensure all list items and content have proper font size */
    li,
    .content-body li,
    ul li,
    ol li {
        font-size: 21px !important;
        line-height: 1.8;
    }

    p,
    .content-body p {
        font-size: 21px;
        line-height: 1.8;
    }

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

    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.2rem;
    }
}

/* Search Modal */
.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10vh;
    z-index: 1000;
}

.search-modal-content {
    background: var(--background);
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.search-close {
    display: none;
}

/* Pagefind UI Customization */
.pagefind-ui {
    --pagefind-ui-scale: 1;
    --pagefind-ui-primary: var(--brand);
    --pagefind-ui-text: var(--text);
    --pagefind-ui-background: var(--background);
    --pagefind-ui-border: var(--lines);
    --pagefind-ui-tag: var(--background-code);
    --pagefind-ui-border-width: 1px;
    --pagefind-ui-border-radius: 4px;
    --pagefind-ui-font: var(--font-family);
    padding: 1em 2em;
}

/* Hide the "Clear" text button */
.pagefind-ui__search-clear {
    font-size: 0 !important;
    width: 2rem;
    height: 2rem;
}

.pagefind-ui__search-clear::before {
    content: "×";
    font-size: 1.5rem;
}

.pagefind-ui__search-input {
    font-family: var(--font-family) !important;
    font-size: 1rem !important;
}

/* Remove orange link styling from search results */
.pagefind-ui__result-link {
    color: var(--text) !important;
    font-family: var(--font-family) !important;
    background-image: none !important;
    text-decoration: none !important;
}

.pagefind-ui__result-link:hover {
    color: var(--brand) !important;
    opacity: 1 !important;
}

.pagefind-ui__result-excerpt {
    font-family: var(--font-family) !important;
    color: var(--text-lighter) !important;
}

.pagefind-ui__result mark {
    background: var(--highlight) !important;
    color: var(--highlight-text) !important;
}

/* Dark mode adjustments for Pagefind */
[data-theme="dark"] .pagefind-ui {
    --pagefind-ui-primary: var(--brand);
    --pagefind-ui-text: var(--text);
    --pagefind-ui-background: var(--background);
    --pagefind-ui-border: var(--lines);
    --pagefind-ui-tag: var(--background-code);
}