/**
 * T26 Retro & Terminal Template Stylesheet (t26_retro) - T26 Web-Ökosystem
 * @author      Thodde26 (Thorsten)
 * @version     1.0.0
 * @link        https://www.thodde26.de
 * @file        template.css
 * @license     http://www.gnu.org/licenses/gpl.html GNU General Public License v3.0
 */

.t26-tpl-t26_retro {
    --t26-radius-sm: 2px;
    --t26-radius-md: 2px;
    --t26-radius-lg: 4px;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--t26-border) 12%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--t26-border) 12%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* Monospace-Typografie für Überschriften, Badges & Navigation im Retro-Terminal-Look */
.t26-tpl-t26_retro h1,
.t26-tpl-t26_retro h2,
.t26-tpl-t26_retro h3,
.t26-tpl-t26_retro .t26-badge,
.t26-tpl-t26_retro .t26-btn,
.t26-tpl-t26_retro .t26-nav__link,
.t26-tpl-t26_retro .t26-toolbar__badge {
    font-family: var(--t26-font-mono);
    letter-spacing: 0.03em;
}

.t26-tpl-t26_retro .t26-section-header h2 {
    text-transform: uppercase;
}

/* Kantige Terminal-Karten mit markantem Rahmen & Ecken-Akzent */
.t26-tpl-t26_retro .t26-card,
.t26-tpl-t26_retro .t26-news-card,
.t26-tpl-t26_retro .t26-dl-card,
.t26-tpl-t26_retro .t26-faq-item,
.t26-tpl-t26_retro .t26-retro-photo-card {
    border: 2px solid var(--t26-border);
    border-radius: var(--t26-radius-sm);
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--t26-primary) 35%, transparent);
}

.t26-tpl-t26_retro .t26-card:hover,
.t26-tpl-t26_retro .t26-news-card:hover,
.t26-tpl-t26_retro .t26-dl-card:hover,
.t26-tpl-t26_retro .t26-retro-photo-card:hover {
    border-color: var(--t26-accent);
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--t26-accent) 45%, transparent);
}

.t26-tpl-t26_retro .t26-btn {
    border-radius: var(--t26-radius-sm);
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* Mobile Optimierung (<= 768px) */
@media (max-width: 768px) {
    .t26-tpl-t26_retro h1,
    .t26-tpl-t26_retro h2,
    .t26-tpl-t26_retro h3 {
        letter-spacing: 0.01em;
        overflow-wrap: break-word;
    }

    .t26-tpl-t26_retro .t26-card,
    .t26-tpl-t26_retro .t26-news-card,
    .t26-tpl-t26_retro .t26-dl-card,
    .t26-tpl-t26_retro .t26-faq-item,
    .t26-tpl-t26_retro .t26-retro-photo-card {
        box-shadow: 3px 3px 0 color-mix(in srgb, var(--t26-primary) 35%, transparent);
    }
}