/* ============================================
   Lythtlorn - MyBB Theme
   Einbinden über: ACP -> Templates & Style -> Themes -> [euer Theme]
   -> Style -> Add New Stylesheet ("lythtlorn.css"), und dieser Datei
   an "global.css" (oder "header.css") anhängen, damit sie auf allen
   Seiten geladen wird.

   Gleiche Palette wie die Hauptseite (siehe dort css/tokens.css).
   Deckt die gängigsten Stock-Selektoren ab - je nachdem, wie stark euer
   aktuelles Theme vom MyBB-Standard abweicht, kann an der ein oder
   anderen Stelle noch was nachjustiert werden.
   ============================================ */

@import url(https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap);

:root {
    --void: #080c0a;
    --void-panel: #0d1510;
    --void-panel-2: #0f2318;
    --ink: #c8bfa8;
    --ink-dim: #7a7060;
    --ember: #c9a84c;
    --ember-soft: #e8c97a;
    --line: #1a2e1f;
}

body {
    background: var(--void) !important;
    color: var(--ink) !important;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
}
html { background: var(--void) !important; margin: 0; padding: 0; }

/* MyBBs "Schnelllinks"-Kasten (Benutzer-CP/Moderator-CP/Admin-CP-Liste) und
   ähnliche Panels - unterschiedliche Themes nennen das unterschiedlich,
   deshalb hier möglichst viele bekannte Varianten gleichzeitig abdecken. */
#panel, .panel, .qlinks, ul.menu, .dropdown_menu, #header, #footer, .footer, .lower, .upper {
    background: var(--void-panel) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}
#panel a, .panel a, .qlinks a, ul.menu a, .dropdown_menu a, .lower a, .upper a { color: var(--ember-soft) !important; }
li { color: var(--ink); }

a {
    color: var(--ember-soft) !important;
    text-decoration: underline;
}
a:hover { color: var(--ember) !important; }

h1, h2, h3, h4, h5 {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    color: var(--ink) !important;
}

#container, .bgcolor, .container, #content, .panel {
    background: var(--void) !important;
    color: var(--ink) !important;
}

/* Tabellen-Header (Forenliste, Threadliste etc.) */
.thead, .tcat, thead td, thead th {
    background: var(--void-panel-2) !important;
    color: var(--ember) !important;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}
.thead a, .tcat a { color: var(--ember) !important; text-decoration: none; }

/* Normale Zeilen (abwechselnd) - deckt auch die Willkommens-/Navigationsleiste
   und "Benutzer-CP/Moderator-CP/Admin-CP"-Zeile ab, die im Standard-Theme
   dieselben Klassen wiederverwenden */
.trow1, .trow2, .altbg1, .altbg2, .navigation, .welcomeblock, table.tborder td {
    background: var(--void-panel) !important;
    border-bottom: 1px solid var(--line);
    color: var(--ink) !important;
}
.trow1:hover, .trow2:hover { background: var(--void-panel-2) !important; }
.trow1 a, .trow2 a, .navigation a, .welcomeblock a { color: var(--ember-soft) !important; }

.tborder {
    border: 1px solid var(--line) !important;
    background: var(--void-panel) !important;
}

/* Breadcrumb ("Lythtlorn - Forum" o.ä.) war zu dunkel/kontrastarm */
.title, #pun-crumbs1, .pagetitle, .navigation_breadcrumb {
    color: var(--ink) !important;
}

/* Such-/Textfelder generell ans Farbschema anpassen (traf vorher nicht alles) */
input[type="text"], input[type="password"], input[type="search"], textarea, select {
    background: var(--void-panel) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
}
button, input[type="submit"], input[type="button"], .searchbutton {
    font-family: 'Cinzel', serif !important;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--ember) !important;
    color: var(--void) !important;
    border: 1px solid var(--ember) !important;
    padding: 0.5rem 1.1rem;
    cursor: pointer;
}
button:hover, input[type="submit"]:hover, .searchbutton:hover { background: var(--ember-soft) !important; }

/* --- Lythtlorn-Header (siehe header-Template) ---
   #header/#logo sind MyBBs eigene Container, in denen unser #lythtlorn-header
   steckt - deren eigener (heller) Hintergrund muss mit eingefärbt werden,
   sonst scheint er als Rahmen um unseren Header durch. */
#header, #logo, #logo .wrapper {
    background: var(--void-panel-2) !important;
}
/* MyBB erzwingt über #container min-width:990px - auf schmaleren Fenstern/
   Bildschirmen (z.B. Hochkant-Monitor, nicht maximiertes Fenster) sorgt das
   für erzwungenen horizontalen Überschuss, der rechts als leerer/schwarzer
   Bereich sichtbar wird. Aufheben, Container darf mitschrumpfen. */
#container {
    min-width: 0 !important;
    max-width: 100vw;
    overflow-x: hidden;
}
/* Sticky/Fixed: Header bleibt beim Scrollen oben stehen. position:sticky
   hätte hier nur innerhalb des eigenen Eltern-Containers geklebt (und ist
   rausgescrollt, sobald der endete) - fixed ist unabhängig davon immer
   oben, dafür braucht der Inhalt darunter etwas Abstand, damit er nicht
   drunter verschwindet. */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
#container {
    padding-top: 118px; /* ungefähre Header-Höhe - falls oben eine Lücke oder
                            Überlappung zu sehen ist, diesen Wert anpassen */
}
#lythtlorn-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--void-panel-2);
    border-bottom: 1px solid var(--ember);
}
#lythtlorn-header .brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.3rem;
    color: var(--ember);
    text-decoration: none;
    letter-spacing: 0.03em;
}
#lythtlorn-header .brand img {
    height: 32px;
    width: 32px;
    object-fit: contain;
}
#lythtlorn-header .brand:hover { color: var(--ember-soft); }
#lythtlorn-header nav { display: flex; gap: 1.5rem; }
#lythtlorn-header nav a {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
    text-decoration: none;
}
#lythtlorn-header nav a:hover { color: var(--ember); }