/*
Theme Name: ROS4N6 Themehttps://ros4n6.de/wp-admin/theme-editor.php?file=style.css&theme=ros4n6-theme
Author: Mirko Stern | ros4n6.de
Description: Minimalistisches IT-Security Theme im Person of Interest & Parrot OS Look mit Tabellen-Übersicht & Blog-Support.
Version: 1.5
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: url('bg.jpg') no-repeat center center fixed;
  background-size: cover;
  font-family: 'Courier New', Courier, monospace;
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic Viewport Height für mobile Browser */
  position: relative;
  color: #00ffcc;
  overflow-x: hidden;
}

/* -------------------------------------------------------------------------- */
/* RECHTES TERMINAL CONTAINER (Hauptansicht / Navigation / Info)             */
/* -------------------------------------------------------------------------- */
.ros4n6-terminal {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 460px;
  max-width: calc(100vw - 60px);
  max-height: calc(100vh - 60px);
  background: rgba(10, 15, 20, 0.94);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(204, 0, 0, 0.6);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 15px rgba(204, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 20;
}

/* -------------------------------------------------------------------------- */
/* LINKES TERMINAL CONTAINER (Blog-Beiträge, Tutorials & Suchergebnisse)      */
/* -------------------------------------------------------------------------- */
.ros4n6-content-terminal {
  position: absolute;
  top: 10vh;
  left: 30px;
  width: calc(100vw - 540px);
  max-width: 850px;
  max-height: 80vh;
  background: rgba(8, 12, 16, 0.97);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 229, 255, 0.6);
  border-radius: 6px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 229, 255, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
}

.ros4n6-content-terminal .terminal-header {
  border-bottom: 1px solid rgba(0, 229, 255, 0.3);
}

.latest-post-badge {
  display: inline-block;
  background: rgba(0, 229, 255, 0.15);
  color: #00e5ff;
  border: 1px solid #00e5ff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 8px;
}

.post-terminal-title {
  color: #00e5ff;
  font-size: 18px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #333;
  padding-bottom: 5px;
}

.post-meta {
  color: #888888;
  font-size: 11px;
  margin-bottom: 15px;
}

/* Links innerhalb der Meta-Zeile (z. B. Kategorie) */
.post-meta a {
  color: #888888;
  text-decoration: underline;
}

.post-meta a:hover {
  color: #cc0000;
  text-decoration: underline;
}

.terminal-post-thumbnail {
  margin-bottom: 15px;
  border: 1px solid #333;
  padding: 4px;
  background: rgba(0, 0, 0, 0.5);
  display: inline-block;
}

.terminal-post-thumbnail img {
  max-width: 100%;
  height: auto;
  display: block;
  filter: grayscale(30%) contrast(110%);
}

/* -------------------------------------------------------------------------- */
/* GEMEINSAME TERMINAL-ELEMENTE                                              */
/* -------------------------------------------------------------------------- */
.terminal-header {
  background: #141414;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #2a2a2a;
  flex-shrink: 0;
}

.terminal-title {
  color: #888888;
  font-size: 12px;
  font-weight: bold;
}

.window-buttons {
  display: flex;
  gap: 6px;
}

.btn {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.btn-close { background: #ff5f56; }
.btn-min { background: #ffbd2e; }
.btn-max { background: #27c93f; }

.terminal-body {
  padding: 20px;
  font-size: 13px;
  line-height: 1.7;
  overflow-y: auto;
}

/* Prompts */
.prompt {
  color: #cc0000;
  font-weight: bold;
}

.prompt-user { color: #00e5ff; }
.prompt-path { color: #ffffff; }

.command-line {
  margin-bottom: 14px;
}

.terminal-section-title {
  color: #888888;
  margin-top: 15px;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: 11px;
  border-bottom: 1px dashed #333;
}

/* -------------------------------------------------------------------------- */
/* TERMINAL SEARCH FORM                                                      */
/* -------------------------------------------------------------------------- */
.terminal-search-form {
  margin-top: 10px;
  margin-bottom: 10px;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #333;
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 4px;
}

.search-input-wrapper:focus-within {
  border-color: #00e5ff;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

.search-prefix {
  color: #cc0000;
  font-weight: bold;
  font-size: 12px;
  margin-right: 6px;
  user-select: none;
}

.terminal-search-input {
  background: transparent;
  border: none;
  outline: none;
  color: #00ffcc;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  width: 100%;
}

.terminal-search-input::placeholder {
  color: #666666;
}

/* -------------------------------------------------------------------------- */
/* TABELLARISCHE BEITRAGSÜBERSICHT (Log Index)                               */
/* -------------------------------------------------------------------------- */
.terminal-table-wrapper {
  margin-top: 10px;
  overflow-x: auto;
}

.terminal-posts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.terminal-posts-table th {
  text-align: left;
  color: #888888;
  border-bottom: 1px solid #333;
  padding: 4px 6px;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 10px;
}

.terminal-posts-table td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: top;
}

.terminal-posts-table tr:hover td {
  background: rgba(0, 229, 255, 0.05);
}

.col-date {
  color: #888888;
  white-space: nowrap;
  font-size: 11px;
  width: 80px;
}

.col-thumb {
  width: 50px;
}

.col-thumb a {
  text-decoration: none;
}

.table-thumb-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid #00e5ff;
  border-radius: 2px;
  display: block;
}

.no-thumb-placeholder {
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,0.5);
  border: 1px dashed #444;
  color: #888888;
  text-decoration: underline;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.col-thumb a:hover .no-thumb-placeholder {
  color: #cc0000;
  border-color: #cc0000;
}

.col-content {
  vertical-align: top;
}

.table-post-title {
  color: #00e5ff;
  text-decoration: none;
  font-weight: bold;
  display: block;
  margin-bottom: 2px;
}

.table-post-title:hover {
  color: #ffffff;
  text-decoration: underline;
}

.table-post-excerpt {
  color: #aaa;
  font-size: 11px;
  line-height: 1.3;
}

/* -------------------------------------------------------------------------- */
/* WORDPRESS NAVIGATION / MENÜ STYLING                                       */
/* -------------------------------------------------------------------------- */
.ros4n6-nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
}

.ros4n6-nav-menu li {
  margin-bottom: 4px;
}

.ros4n6-nav-menu a {
  color: #00e5ff;
  text-decoration: none;
  display: inline-block;
}

.ros4n6-nav-menu a:hover {
  text-decoration: underline;
  color: #ffffff;
}

.ros4n6-nav-menu a::before {
  content: "-> ";
  color: #cc0000;
}

/* Terminal Navigation - Untermenüs */
.terminal-nav ul li {
    position: relative;
    display: inline-block;
}

/* Versteckt das Sub-Menü standardmäßig */
.terminal-nav ul .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #0d0d0d;
    border: 1px solid #00e5ff;
    padding: 8px 0;
    min-width: 220px;
    z-index: 9999;
    list-style: none;
}

/* Blendet das Sub-Menü beim Hover ein */
.terminal-nav ul li:hover > .sub-menu {
    display: block;
}

/* Styling für die einzelnen Unterpunkte */
.terminal-nav ul .sub-menu li {
    display: block;
    padding: 4px 12px;
}

/* Terminal-Pfeil vor den Unterpunkten */
.terminal-nav ul .sub-menu li a::before {
    content: "└─> ";
    color: #00e5ff;
}


/* Seiteninhalt */
.wp-page-content {
  color: #e0e0e0;
}

.wp-page-content a {
  color: #00e5ff;
}

.wp-page-content h1, 
.wp-page-content h2, 
.wp-page-content h3 {
  color: #00ffcc;
  margin-top: 15px;
  margin-bottom: 8px;
}

.wp-page-content p {
  margin-bottom: 12px;
}

.search-results-list {
  list-style: none;
  padding: 0;
}

.search-results-list li {
  margin-bottom: 12px;
  border-bottom: 1px solid #222222;
  padding-bottom: 10px;
}

/* Blinking Cursor */
.cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background-color: #00ffcc;
  vertical-align: middle;
  animation: blink 0.8s infinite;
  margin-left: 4px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* -------------------------------------------------------------------------- */
/* MOBILE ANPASSUNG (Responsive & Safe-Area Fixes für Smartphones)             */
/* -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body {
    display: flex !important;
    flex-direction: column !important; /* Stapelt beide Terminals sauber untereinander */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ros4n6-content-terminal,
  .ros4n6-terminal {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: none !important; /* Aufgehoben, damit Inhalte nicht abgeschnitten werden */
    height: auto !important;
    margin: 0 0 15px 0 !important;
    box-sizing: border-box !important;
  }

  .ros4n6-terminal {
    margin-bottom: calc(25px + env(safe-area-inset-bottom)) !important;
  }

  /* Tabellen im Firefox Mobile horizontal scrollbar machen */
  .terminal-table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
  }

  /* Verhindert Text-Überlauf auf kleinen Xiaomi-Displays */
  .post-terminal-title,
  .terminal-title {
    font-size: 12px !important;
    word-break: break-word !important;
  }
}

/* -------------------------------------------------------------------------- */
/* TERMINAL NAVIGATION & HIERARCHIE (SUB-MENÜS)                               */
/* -------------------------------------------------------------------------- */

/* Setzt Standard-Listenabstände im Navigationsbereich zurück */
.ros4n6-nav-menu ul.terminal-nav-list,
.ros4n6-nav-menu ul.sub-menu {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* Hauptpunkte */
.ros4n6-nav-menu ul.terminal-nav-list > li {
    margin-bottom: 6px;
}

.ros4n6-nav-menu ul.terminal-nav-list > li > a::before {
    content: "- ";
    color: #ff5f56; /* Roter Bindestrich für Hauptkategorien */
}

/* Untermenü (Verschachtelung) */
.ros4n6-nav-menu ul.sub-menu {
    padding-left: 18px !important; /* Rückt das Untermenü deutlich nach rechts ein */
    margin-top: 4px !important;
    margin-bottom: 8px !important;
}

/* Unterpunkte mit Terminal-Pfeil */
.ros4n6-nav-menu ul.sub-menu li {
    margin-bottom: 4px;
}

.ros4n6-nav-menu ul.sub-menu li a::before {
    content: "└─> ";
    color: #00e5ff; /* Cyan-Farbe für Terminal-Unterpunkte */
    font-weight: bold;
}