/**
 * Mobile Comments Collapse Styles
 * 
 * YouTube-ähnliche Kommentar-Darstellung für mobile Geräte
 */

/* Mobile-Only Elemente standardmäßig verstecken auf Desktop */
@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }
}

/* Mobile Ansicht (max. 768px) */
@media (max-width: 768px) {
  
  /* Name und Datum untereinander in mobiler Ansicht - spezifischer Selektor */
  .page-node-type-multipurpose .list-comments-form .comment .heading > .layout__region--content {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  .page-node-type-multipurpose .list-comments-form .comment .heading > .layout__region--content .block-field-blockcommentcommentname::after {
    display: none !important;
  }
  
  /* Antworten-Toggle Button */
  .comment-replies-toggle {
    margin-top: 15px;
    margin-bottom: 10px;
  }

  .replies-toggle-btn {
    background: transparent;
    border: none;
    color: #005c78;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
  }

  .replies-toggle-btn:hover {
    color: #005c78;
    text-decoration: underline;
  }

  .replies-toggle-btn:active {
    color: #005c78;
  }

  .replies-count {
    display: inline-block;
  }

  /* Zurück-Button */
  .comment-back-to-top {
    margin-bottom: 15px;
    padding: 10px 0;
    border-bottom: 2px solid #e0e0e0;
  }

  .back-to-top-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .back-to-top-btn:hover {
    background: #e8e8e8;
    border-color: #ccc;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  }

  .back-to-top-btn:active {
    background: #ddd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  /* Expanded Parent Comment (keine visuellen Änderungen) */
  .comment-parent.comment-expanded {
    /* Keine visuellen Änderungen */
  }

  .comment-parent.comment-expanded .heading {
    /* Keine Farbänderung */
  }

  /* Antworten-Styling ohne Einrückung, stattdessen Farbabstufung je Ebene */
  .indented {
    margin-top: 10px;
    margin-top: 0px;
  }

  .list-comments-form .indented {
    background-image: none !important;
    padding-left: 0;
    margin-left: 0;
  }

  .indented .comment {
    background-color: #f8fbff;
    margin-bottom: 10px;
    margin-bottom: 0px;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    border-bottom: 0px;
    border-top: 0px;
  }

  .indented .indented .comment {
    background-color: #f3f8ff;
  }

  .indented .indented .indented .comment {
    background-color: #eef5ff;
  }

  /* Visueller Indikator für Antworten */
  .indented .comment .heading {
    display: inline-flex;
    align-items: center;
    width: 100%;
  }

  .indented .comment .heading::before {
    content: "↳";
    color: #005c78;
    font-size: 18px;
    margin-right: 8px;
    font-weight: bold;
    flex-shrink: 0;
  }

  /* Verschachtelte .indented Container */
  .indented .indented {
    padding-left: 20px;
  }

  .indented .indented .comment .heading::before {
    content: "↳↳";
  }
  .indented .indented .indented .comment .heading::before {
    content: "↳↳↳";
  } 

  /* Animation für Übergänge */
  .comment {
    transition: all 0.3s ease;
  }

  /* Kommentarfeld-Abstände anpassen */
  .list-comments-form > .comment {
    margin-bottom: 20px;
    margin-bottom: 0px;
  }
}

/* Tablet Ansicht (max. 800px) */
@media (max-width: 800px) {
  .page-node-type-multipurpose .layout-content>.region-content>.node--type-multipurpose>.node__content>.layout--twocol-section--75-25.content>.layout__region--first>.block-layout-builder.block-field-blocknodemultipurposefield-comments>section .list-comments-form .indented {
    padding-left: 0px !important;
  }
}

/* Mobile Ansicht (max. 767px) */
@media (max-width: 767px) {
  .page-node-type-multipurpose .layout-content>.region-content>.node--type-multipurpose>.node__content>.layout--twocol-section--75-25.content>.layout__region--first>.block-layout-builder.block-field-blocknodemultipurposefield-comments>section .list-comments-form {
    margin-left: -50px !important;
  }
  
  .page-node-type-multipurpose .layout-content>.region-content>.node--type-multipurpose>.node__content>.layout--twocol-section--75-25.content>.layout__region--first>.block-layout-builder.block-field-blocknodemultipurposefield-comments>section .comment-form {
    margin-left: 0px !important;
  }
}

/* Kontrast-Modus Unterstützung für mobile Ansicht */
@media (max-width: 768px) {
  /* Yellow Contrast Mode */
  body.highcontrast.yellowcontrast .comment-parent.comment-expanded {
    /* Keine visuellen Änderungen */
  }

  body.highcontrast.yellowcontrast .replies-toggle-btn {
    color: #c19300;
  }

  body.highcontrast.yellowcontrast .replies-toggle-btn:hover {
    color: #8f6d00;
  }

  body.highcontrast.yellowcontrast .comment-reply::before,
  body.highcontrast.yellowcontrast .indented .comment::before {
    color: #c19300;
  }

  /* White Contrast Mode */
  body.highcontrast.whitecontrast .comment-parent.comment-expanded {
    /* Keine visuellen Änderungen */
  }

  body.highcontrast.whitecontrast .replies-toggle-btn {
    color: #000000;
  }

  body.highcontrast.whitecontrast .replies-toggle-btn:hover {
    color: #333333;
  }

  body.highcontrast.whitecontrast .back-to-top-btn {
    background: #ffffff;
    border-color: #000000;
    color: #000000;
  }

  body.highcontrast.whitecontrast .comment-reply::before,
  body.highcontrast.whitecontrast .indented .comment::before {
    color: #000000;
  }
}

/* Zusätzliche Kommentar-Styles für Multipurpose-Seiten */

/* Desktop Ansicht */
/* Alle Haupt-Kommentare: keine Linien */
.page-node-type-multipurpose .layout-content>.region-content>.node--type-multipurpose>.node__content>.layout--twocol-section--75-25.content>.layout__region--first>.block-layout-builder.block-field-blocknodemultipurposefield-comments>section .list-comments-form>.comment {
  border-bottom: 0px solid #4b4b4d !important;
  border-top: 0px solid #4b4b4d !important;
  padding-bottom: 20px !important;
  padding-top: 20px !important;
  margin-bottom: 20px !important;
}

/* Antworten: keine Linien */
.page-node-type-multipurpose .layout-content>.region-content>.node--type-multipurpose>.node__content>.layout--twocol-section--75-25.content>.layout__region--first>.block-layout-builder.block-field-blocknodemultipurposefield-comments>section .list-comments-form .indented .comment {
  border-top: 0px solid #4b4b4d !important;
  border-bottom: 0px solid #4b4b4d !important;
}

/* Mobile Ansicht */
@media (max-width: 767px) {
  /* Alle Haupt-Kommentare: keine untere Linie */
  .page-node-type-multipurpose .layout-content>.region-content>.node--type-multipurpose>.node__content>.layout--twocol-section--75-25.content>.layout__region--first>.block-layout-builder.block-field-blocknodemultipurposefield-comments>section .list-comments-form>.comment {
    border-bottom: 0px solid #4b4b4d !important;
    border-top: 0px solid #4b4b4d !important;
    padding-bottom: 0px !important;
    padding-top: 15px !important;
    margin-bottom: 0px !important;
  }

  /* Haupt-Kommentare ab dem zweiten: obere Trennlinie */
  .page-node-type-multipurpose .layout-content>.region-content>.node--type-multipurpose>.node__content>.layout--twocol-section--75-25.content>.layout__region--first>.block-layout-builder.block-field-blocknodemultipurposefield-comments>section .list-comments-form>.comment:not(:first-child) {
    border-top: 1px solid #4b4b4d !important;
  }

  /* Antworten: keine Linien */
  .page-node-type-multipurpose .layout-content>.region-content>.node--type-multipurpose>.node__content>.layout--twocol-section--75-25.content>.layout__region--first>.block-layout-builder.block-field-blocknodemultipurposefield-comments>section .list-comments-form .indented .comment {
    border-top: 0px solid #4b4b4d !important;
    border-bottom: 0px solid #4b4b4d !important;
  }

  .comment-back-to-top {
    margin-bottom: 15px !important;
    padding: 10px 0 !important;
    border-bottom: 0px solid #e0e0e0 !important;
  }
}