/**
 * T26 Toolbar Modul - WBCE CMS
 * @author      Thodde26 (Thorsten)
 * @link        https://www.thodde26.de
 * @file        frontend.css
 * @license     http://www.gnu.org/licenses/gpl.html
 *              GNU General Public License v3.0
 */

/* ── CSS-Variablen (werden durch Skin-CSS überschrieben) ───────────────── */
:root {
    --t26-toolbar-bg:         #1a1a2e;
    --t26-toolbar-color:      #f0f0f0;
    --t26-toolbar-link:       #a0c4ff;
    --t26-toolbar-link-hover: #ffffff;
    --t26-toolbar-border:     rgba(255,255,255,0.2);
    --t26-toolbar-hover:      rgba(255,255,255,0.1);
    --t26-toolbar-menu-bg:    #1a1a2e;
    --t26-toolbar-active:     #7eb8f7;
}

/* ── Toolbar Grundstruktur ──────────────────────────────────────────────── */
#t26-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 16px;
    background-color: var(--t26-toolbar-bg);
    color: var(--t26-toolbar-color);
    font-family: var(--t26-font, sans-serif);
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: background-color 0.3s, color 0.3s;
}

body {
    padding-top: 40px;
}

/* ── Links: Domain-Dropdown ─────────────────────────────────────────────── */
.t26-toolbar__domains {
    flex-shrink: 0;
}

.t26-toolbar__dropdown {
    position: relative;
}

.t26-toolbar__dropdown-btn {
    background: none;
    border: 1px solid var(--t26-toolbar-border);
    border-radius: 4px;
    color: var(--t26-toolbar-color);
    cursor: pointer;
	padding: 4px 10px;  /* Vorher 4px 10px. Die 8px machen ihn HÖHER, die 20px BREITER */
    min-width: 130px;   /* Erzwingt eine feste Grundbreite, auch wenn wenig Text drin steht */
    font-size: 13px;
    white-space: nowrap;
    transition: background 0.2s;
}

.t26-toolbar__dropdown-btn:hover,
.t26-toolbar__dropdown-btn[aria-expanded="true"] {
    background: var(--t26-toolbar-hover);
}

.t26-toolbar__dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--t26-toolbar-menu-bg);
    border: 1px solid var(--t26-toolbar-border);
    border-radius: 4px;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    min-width: 280px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 10000;
}

/* Domain-Dropdown: leicht nach rechts versetzt */
.t26-toolbar__domains .t26-toolbar__dropdown-menu {
    left: 8px;
}

.t26-toolbar__dropdown-menu.is-open {
    display: block;
}

.t26-toolbar__dropdown-menu li a {
    display: block;
    padding: 8px 16px;
    color: var(--t26-toolbar-color);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}

.t26-toolbar__dropdown-menu li a:hover {
    background: var(--t26-toolbar-hover);
    color: var(--t26-toolbar-link-hover);
}

/* ── Mitte: Laufschrift ─────────────────────────────────────────────────── */
.t26-toolbar__ticker {
    width: 800px;
    max-width: 100%; /* Verhindert, dass es auf dem Handy übersteht */
    overflow: hidden;
    margin: 0 auto; /* Zentriert den 800px Block perfekt in der Mitte */
}

.t26-toolbar__ticker-inner {
    display: inline-block;
    white-space: nowrap;
    animation: t26-ticker-scroll 20s linear infinite;
}

@keyframes t26-ticker-scroll {
    0%   { transform: translateX(60vw); }
    100% { transform: translateX(-100%); }
}

/* ── Rechts: Farb-Switcher + Darkmode ───────────────────────────────────── */
.t26-toolbar__controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Farb-Dropdown: öffnet nach links, nicht nach rechts */
.t26-toolbar__dropdown--right .t26-toolbar__dropdown-menu {
    left: auto;
    right: 0;
    min-width: 250px;
}

.t26-toolbar__color-link {
    display: block;
    padding: 8px 16px;
    color: var(--t26-toolbar-color);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}

.t26-toolbar__color-link:hover {
    background: var(--t26-toolbar-hover);
}

.t26-toolbar__color-link.is-active {
    font-weight: bold;
    color: var(--t26-toolbar-active);
}

/* Darkmode-Button */
.t26-toolbar__darkmode-btn {
    background: none;
    border: 1px solid var(--t26-toolbar-border);
    border-radius: 4px;
    color: var(--t26-toolbar-color);
    cursor: pointer;
    padding: 4px 10px;
    font-size: 14px;
    transition: background 0.2s;
}

.t26-toolbar__darkmode-btn:hover {
    background: var(--t26-toolbar-hover);
}

/* ── Responsive Abstände für große Bildschirme ──────────────────────────── */
@media (min-width: 768px) {
    .t26-toolbar__domains {
        margin-left: 80px;
    }
    .t26-toolbar__controls {
        margin-right: 80px;
    }
}

    #t26-dm-sun { display: <?php echo $is_dark ? 'block' : 'none'; ?>; }
    #t26-dm-moon { display: <?php echo $is_dark ? 'none' : 'block'; ?>; }