/* Globale Typografie fuer TravelAndTech.
   Normales CSS: funktioniert direkt mit dem Tailwind-4-Browser-CDN. */

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
}

h1 {
    font-size: 2.25rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 1.875rem;
    font-weight: 300;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

h4 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

h5 {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

h6 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

p {
    margin-bottom: 1rem;
}

/* Responsive article content and embedded Markdown media. */
html { overflow-x: clip; }
body { overflow-wrap: break-word; }
#main-content { min-width: 0; }
#main-content img, #main-content video, #main-content iframe {
    max-width: 100%;
}
#main-content img { height: auto; border-radius: 0.75rem; }
#main-content :is(pre, table) { max-width: 100%; }
#main-content pre { overflow-x: auto; padding: 1rem; border-radius: 0.75rem; background: #f5f5f5; }
#main-content :not(pre) > code { overflow-wrap: anywhere; }
#main-content .article-body :is(ul, ol) { padding-left: 1.5rem; margin: 0 0 1.25rem; }
#main-content .article-body ul { list-style: disc; }
#main-content .article-body ol { list-style: decimal; }
#main-content .article-body blockquote { border-left: 3px solid #d4d4d4; padding-left: 1rem; margin: 1.5rem 0; }
#main-content .article-body a { text-decoration: underline; text-underline-offset: 3px; }
#main-content .article-body table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
#main-content .article-body th, #main-content .article-body td { padding: .6rem .8rem; border-bottom: 1px solid #e5e5e5; text-align: left; }
@media (max-width: 639px) {
    h1 { font-size: 1.8rem; line-height: 1.18; margin-bottom: .9rem; }
    h2 { font-size: 1.5rem; margin-bottom: .75rem; }
    h3 { font-size: 1.25rem; }
    body { font-size: 1rem; line-height: 1.7; }
    #main-content .article-body blockquote { margin: 1.25rem 0; }
}

/* Keep standalone article paragraphs aligned to the narrow reading column,
   even when the Markdown content contains wider image blocks. */
#main-content article .article-body > p:not(:has(img)) {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* Article images and image blocks follow the same 42rem reading width as text. */
#main-content article .article-body > :is(p:has(img), figure, .gallery, .image-gallery, .photo-gallery) {
    width: 100%;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    transform: none;
}
#main-content article .article-body > p:has(> img) > img,
#main-content article .article-body > p:has(> a > img) > a > img,
#main-content article .article-body > figure > img {
    display: block;
    max-width: 100%;
    height: auto;
}
#main-content article .article-body > p:has(> a > img) > a {
    display: block;
}

/* Grav Markdown profile photo: let the image float alongside following paragraphs.
   The Markdown image normally sits inside its own <p>; display:contents
   removes that wrapper from layout so text can wrap around the float. */
#main-content .article-body > p:has(img.profile-avatar) {
    display: contents;
}
#main-content .article-body > p:has(img.profile-avatar) > a {
    display: contents;
}
#main-content .article-body img.profile-avatar {
    float: right;
    display: block;
    width: 220px;
    max-width: 40%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 0 1.5rem 2rem;
}
@media (max-width: 639px) {
    #main-content .article-body img.profile-avatar {
        float: none;
        width: 180px;
        max-width: 100%;
        margin: 0 auto 1.5rem;
    }
}

/* Color scheme: use the html.dark class set before first paint. */
:root {
    color-scheme: light;
    --tt-bg: #ffffff;
    --tt-fg: #404040;
    --tt-strong: #171717;
    --tt-muted: #737373;
    --tt-border: rgba(0, 0, 0, .10);
    --tt-panel: #f5f5f5;
    --tt-hover: rgba(0, 0, 0, .05);
    --tt-nav: #000000;
    --tt-nav-fg: #ffffff;
    --tt-hero-end: #ffffff;
}
html.dark {
    color-scheme: dark;
    --tt-bg: #020617;
    --tt-fg: #d4d4d4;
    --tt-strong: #ffffff;
    --tt-muted: #a3a3a3;
    --tt-border: rgba(255, 255, 255, .15);
    --tt-panel: #171717;
    --tt-hover: rgba(255, 255, 255, .07);
    --tt-nav: #ffffff;
    --tt-nav-fg: #000000;
    --tt-hero-end: #020617;
}
html, body { background-color: var(--tt-bg); }
body { color: var(--tt-fg); }
#main-content h1, #main-content h2, #main-content h3,
#main-content h4, #main-content h5, #main-content h6 { color: var(--tt-strong); }
#main-content a { color: inherit; }
#main-content .article-body a:hover, #main-content a:hover { color: var(--tt-strong); }
.hero-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 45%, transparent 70%, var(--tt-hero-end) 100%);
}
/* Existing utility colors need explicit dark overrides because Tailwind is loaded from CDN. */
html.dark body.text-black\/70 { color: var(--tt-fg); }
html.dark .text-black\/80 { color: var(--tt-strong); }
html.dark .text-neutral-500 { color: var(--tt-muted); }
html.dark .border-black\/10 { border-color: var(--tt-border); }
html.dark .hover\:bg-black\/5:hover { background-color: var(--tt-hover); }
html.dark .hover\:text-black:hover { color: var(--tt-strong); }
html.dark #main-content pre { background-color: var(--tt-panel); color: var(--tt-strong); }
html.dark #main-content .article-body blockquote { border-left-color: var(--tt-border); }
html.dark #main-content .article-body th,
html.dark #main-content .article-body td { border-bottom-color: var(--tt-border); }
html.dark #main-content article footer,
html.dark footer { border-color: var(--tt-border); }
html.dark #main-content article footer nav a { border-color: var(--tt-border); }
html.dark #main-content article footer nav a:hover { background-color: var(--tt-hover); }
html.dark header > div.bg-black { background-color: var(--tt-nav); color: var(--tt-nav-fg); }
html.dark header nav.bg-black { background-color: var(--tt-nav); color: var(--tt-nav-fg); }
html.dark header nav.bg-black a.text-white { color: var(--tt-nav-fg); }
html.dark header nav.bg-black a:hover { background-color: rgba(0,0,0,.06); }
html.dark header nav.bg-black a.bg-white\\/10 { background-color: rgba(0,0,0,.07); }
html.dark footer a { color: var(--tt-muted); }
html.dark footer a:hover { color: var(--tt-strong); }
html.dark #main-content :is(input, textarea, select) {
    background: var(--tt-panel);
    color: var(--tt-strong);
    border-color: var(--tt-border);
}
@media (min-width: 768px) {
    html.dark header > div.md\:bg-transparent { background-color: transparent; }
}

/* Hero navigation overlays a photograph: always use white text/icons on desktop,
   regardless of the selected color scheme. Mobile retains its solid pill. */
@media (min-width: 768px) {
    html header > div.hero-navigation,
    html.dark header > div.hero-navigation {
        background-color: transparent;
        color: #ffffff;
    }
    html header > div.hero-navigation a,
    html.dark header > div.hero-navigation a,
    html header > div.hero-navigation button,
    html.dark header > div.hero-navigation button {
        color: #ffffff;
    }
}

/* Shared taxonomy filter chips for blog listings and individual articles. */
.taxonomy-pill {
    border-color: var(--tt-border);
    color: var(--tt-fg);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.taxonomy-pill:hover { background-color: var(--tt-hover); color: var(--tt-strong); }
.taxonomy-pill.is-active {
    background-color: var(--tt-strong);
    border-color: var(--tt-strong);
    color: var(--tt-bg);
}
.taxonomy-pill.is-active:hover { background-color: var(--tt-strong); color: var(--tt-bg); }

/* Collapsible blog taxonomy filter. */
.blog-filter { border-color: var(--tt-border); }
.blog-filter summary { color: var(--tt-strong); }
.blog-filter summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: .25rem; }
.blog-filter[open] .blog-filter-chevron { transform: rotate(180deg); }
html.dark .blog-filter nav { border-color: var(--tt-border); }