/* Datei: css/cn-styles.css */

/* Container für alle Buttons/Elemente der Comic-Navigation */
.comic-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;           /* Abstand zwischen den Items: 6 Pixel */
    margin: 0;
    font-size: 18px;    /* Schriftgröße: 18 Pixel */
}

/* Jeder einzelne Navigationsblock */
.comic-navigation > div {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gemeinsame Button-Optik für Links */
.comic-navigation a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    background-color: #fff;
    color: #000;  /* Textfarbe: Schwarz */
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

/* Sicherstellen, dass auch Pseudo-Elemente schwarz sind */
.comic-navigation a::before,
.comic-navigation a::after {
    color: #000;
}

/* Hover-Effekt für Links */
.comic-navigation a:hover {
    background-color: #f0f0f0;
}

/* 1) Erster Comic: CSS-Pseudoelement für Pfeile (immer angezeigt) */
.nav-first a::before {
    content: "« ";
}

/* 2) Vorheriger: CSS-Pseudoelement für Pfeile */
.nav-prev a::before {
    content: "‹ ";
}

/* 3) Kalender-Button: Enthält Icon und aktuelles Datum */
.nav-calendar {
    border: 2px solid #000;
    border-radius: 9999px;
    background-color: #fff;
    color: #000;
    font-weight: bold;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.nav-calendar:hover {
    background-color: #f0f0f0;
}

/* 4) Nächster: CSS-Pseudoelement für Pfeile */
.nav-next a::after {
    content: " ›";
}

/* 5) Neuester Comic: CSS-Pseudoelement für Pfeile */
.nav-latest a::after {
    content: " »";
}

/* Verstecke das Input-Feld, ohne display:none zu nutzen */
.cn-calendar-input-hidden {
    position: absolute;
    left: -9999px;
}

/* jQuery UI Datepicker Styles: Weißer Hintergrund, abgerundete Ecken */
.ui-datepicker {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Anpassung für die Tage im Datepicker */
.ui-datepicker td a {
    text-decoration: none;
    color: #0073aa;
}
.ui-datepicker td a:hover {
    background-color: #eee;
}


@media screen and (max-width: 375px) {
  .comic-navigation {
    width: 90%;
    margin: 0 auto;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /* Kalender-Button: Zeige nur das Icon, verstecke den Text */
  .nav-calendar #cn-calendar-display {
    display: none;
  }

  /* Zufällig-Button: Blende den Text aus, zeige stattdessen das Font-Awesome-Icon */
  .nav-random a {
    padding: 20px;
    position: relative;
    font-size: 0;       /* Textgröße auf 0, um den Text unsichtbar zu machen */
    width: 2.5em;       /* Breite als Anhaltspunkt für das Icon */
    white-space: nowrap;
  }
  .nav-random a::before {
    content: "\f522";  /* Unicode für fa-dice */
    font-family: "Font Awesome 5 Free"; /* Passe ggf. an, falls du FA6 nutzt */
    font-weight: 900;   /* Für Solid Icons */
    font-size: 18px;    /* Sichtbare Icon-Größe */
    color: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}