/* ============================================================
   COMMENTS.CSS — Actueel365
   ------------------------------------------------------------
   Complete stylesheet voor het reactiesysteem:
   - form styling
   - character counter
   - list
   - comment item layout
   - edit mode
   - pending/deleted states
   - responsive ondersteuning
   ============================================================ */

/* ------------------------------------------------------------
   ROOT VARIABELEN
   ------------------------------------------------------------ */
:root {
    --c-border: var(--border);
    --c-text: var(--text);
    --c-muted: var(--muted);
    --c-bg: var(--bg);
    --c-bg-alt: var(--bg);

    --c-green: #0a8a0a;
    --c-red: #c00;

    --c-pending: #ff860d; /* jouw A365 accent */
    --c-edit: #0051A2;    /* jouw hoofdblauw */

    --radius: 3px;
}

html[data-theme="dark"] {
    --c-border: var(--border);
    --c-text: var(--text);
    --c-muted: #aaa;
    --c-bg: #0f141b;
    --c-bg-alt: #1a1a1a;

    --c-green: #46c746;
    --c-red: #ff5d5d;
    --c-pending: #ff9800;
    --c-edit: #4ea3ff;
}

/* ------------------------------------------------------------
   WRAPPER
   ------------------------------------------------------------ */
.comments-wrap {
    margin-top: 16px;
    padding: 0px 18px 8px 16px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);max-width:728px!important;
	margin-bottom:24px;
}

.comments-title {
    margin: -8px  0 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-text);
}

/* ------------------------------------------------------------
   STATUSMELDINGEN
   ------------------------------------------------------------ */
.comments-closed,
.comments-login-alert{
    padding: 15px;
    background: var(--c-bg-alt);
    border: 2px solid var(--c-border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    color: var(--c-text);
	margin-bottom:24px;margin-top:16px;font-weight:500;
}

.comments-login-alert a {font-size: 0.95rem;
    color: var(--c-text);
	font-weight:500;}

/* ------------------------------------------------------------
   FORMULIER NIEUWE REACTIE
   ------------------------------------------------------------ */
.comment-form {
    margin-bottom: 28px;
}

.comment-form textarea {
    width: 100%;
    min-height: 160px;
    padding: 12px;
    resize: vertical;
	font-family:inherit;  
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--c-text);
    background: var(--c-bg-alt);

    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.comment-form-footer {
   /* display: flex;*/ 
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
	/*border-bottom: 1px solid var(--c-border);*/
	padding-bottom:16px;
}

/*.char-count {
    font-size: 0.85rem;
    color: var(--c-red);
	display:block;width:100%;margin: -8px 0 24px 0;
}*/

.char-count {
    font-size: 0.85rem;
    display:block;width:100%;margin: -8px 0 24px 0;
}

.cc-current {
    font-weight: 600;color:var(--c-red);
}

.cc-total {
    color: var(--c-text); /* altijd zwart */
}

.comment-form button {
    padding: 12px 16px;
    background: var(--c-edit);
    border: none;
    border-radius: var(--radius);
    color: white;font-size:0.92rem;
    font-weight: 600;
    cursor: pointer;width:100%;
    transition: 0.2s background;
}

.comment-form button:disabled {
    background: #999;
    cursor: not-allowed;
}

.comment-form button:not(:disabled):hover {
    background: #003b77;
}

.comment-error {
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--c-red);
    background: #ffe5e5;
    border: 1px solid #ffbaba;
    padding: 8px 12px;
    border-radius: var(--radius);
}

.comment-upvote {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comment-upvote .vote-icon {
    position: relative;
    top: -4px;   /* DUWT HET DUIMPJE OMHOOG */
    font-size: 1.1em; /* optioneel: iets groter icoon */
}

.comment-rep {margin-left:-32px;color:var(--muted)!important;}
.comment-upvote {color:var(--muted)!important;}
.comment-report {color:var(--muted)!important;font-size:0.90rem!important;opacity:0.25;top: -4px;}
.comment-report:hover, .comment-upvote:hover, .comment-rep:hover {color:var(--brand)!important;opacity:1;}


/* ------------------------------------------------------------
   COMMENT LIST
   ------------------------------------------------------------ */
.comments-list {
    margin-top: 8px;border-top: 1px solid var(--border);padding-top:16px;
}

.comments-loading,
.comments-error,
.comments-none {
    padding: 12px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--c-muted);
}

/* ------------------------------------------------------------
   INDIVIDUELE REACTIE
   ------------------------------------------------------------ */
.comment {
    padding: 0;
}

.comment-divider {
    border: none;
    border-bottom: 1px solid var(--c-border);
    margin-top: 16px;
    margin-bottom: 16px;
}

.comment:last-child .comment-divider {
    display: none;
}

.comment-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;vertical-align: text-top!important;
}

.comment-user {
    font-weight: 600;
    color: var(--c-text);
}

.comment-time {
    font-size: 0.85rem;
    color: var(--c-muted);
}

.comment-status {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.75rem;
    margin-bottom: 10px;

    border-radius: var(--radius);
    color: white;
}

.comment-status--pending {
    background: var(--c-pending);
}

.comment-body {
    margin-bottom: 12px;
    line-height: 1.55;
    color: var(--c-text);
}

/* ------------------------------------------------------------
   ACTIEKNOPPEN
   ------------------------------------------------------------ */
.comment-actions {
    display: flex;
    gap: 14px;
    margin-bottom: 8px;width:100%!important;
}

.comment-actions button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;

    font-size: 0.9rem;
    color: var(--c-edit);
    font-weight: 600;

    transition: color 0.2s;
}

.comment-actions button:hover {
    color: #003b77;
}

html[data-theme="dark"] .comment-actions button:hover {
    color: #5cb2ff;
}


.explain-notice, .explain-notice a {font-size:0.91rem;font-weight:500;line-height:1.5rem;margin-bottom:8px;margin-top:16px;}


/* ------------------------------------------------------------
   EDIT MODE
   ------------------------------------------------------------ */
.comment-edit-area {
    width: 100%;
    min-height: 140px;
    padding: 10px;resize: vertical!important;

    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);

    line-height: 1.5;
    color: var(--c-text);
	
	resize: vertical;
	font-family:inherit;  
    font-size: 0.94rem;
    line-height: 1.5;
}

.comment-edit-bar {
    margin-top: 8px;
    display: flex;
    gap: 12px;
}

.comment-edit-bar button {
    padding: 6px 14px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
}

.comment-edit-save {
    background: var(--c-edit);
    color: #fff;
}

.comment-edit-cancel {
    background: var(--c-muted);
    color: #fff;
}

/* ------------------------------------------------------------
   REPLY MODE
   ------------------------------------------------------------ */
.reply-form {
    margin-top: 12px;margin-bottom:32px;
}

.reply-textarea {
    width: 100%;
    min-height: 140px;
    padding: 10px;


    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);

   resize: vertical;
	font-family:inherit;  
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--c-text);
	
	
}

.reply-actions {
    margin-top: 8px;
    display: flex;
    gap: 12px;
}

.reply-actions button {
    padding: 6px 14px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
}

.reply-submit {
    background: var(--c-edit);
    color: #fff;
}

.reply-cancel {
    background: var(--c-muted);
    color: #fff;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 600px) {
    .comments-wrap {
        padding: 0  2px 20px;
    }
	
	.comments-wrap {
    margin-top: 16px;
    
    background: var(--c-bg);
    
    border-radius: var(--radius);max-width:728px!important;
	margin-bottom:24px;border: 2px solid var(--border)!important;border-left:none!important;border-right:none!important;
}

    .comment-form textarea {
        min-height: 130px;
    }

    .comment-actions {
        gap: 10px;
        flex-wrap: wrap;
    }
	
.comment-upvote .vote-icon {
    position: relative;
    top: -2px;   /* DUWT HET DUIMPJE OMHOOG */
    font-size: 1.1em; /* optioneel: iets groter icoon */
}
	

	
	.comments-more-btn {
    padding: 13px 16px 12px 16px!important;
    font-size: 0.9rem;font-weight: 750;
  letter-spacing: .03em;
    border-radius: var(--radius);
    border: none;width:100%;
    background: var(--c-primary, #0059b2);
    color: #fff;text-transform: uppercase;
    cursor: pointer;transition: 0.5s;
	user-select: none;
  -webkit-tap-highlight-color: transparent;
}
	
}

/* Container voor "meer reacties" */
.comments-more-wrap {
    text-align: center;
    margin-top: 20px;
    position: relative;
}

/* =========================================================
   BASIS — Light mode (default)
   ========================================================= */
:root {
  --c-bg-rgb: 255, 255, 255; /* wit */
}

/* =========================================================
   DARK MODE
   (gebruik deze als je met data-theme werkt)
   ========================================================= */
[data-theme="dark"] {
  --c-bg-rgb: 15, 17, 21; /* donkergrijs / bijna zwart */
}

/* =========================================================
   Fade over de laatste zichtbare reactie
   ========================================================= */
.comments-gradient {
  position: absolute;
  top: -320px;
  left: 0;
  right: 0;
  height: 320px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(var(--c-bg-rgb), 0),
    rgba(var(--c-bg-rgb), 0.5),
    rgba(var(--c-bg-rgb), 1)
  );
}


/* Button */
.comments-more-btn {
    padding: 12px 16px;
    font-size: 0.85rem;font-weight: 550;
    border-radius: var(--radius);letter-spacing: 1.5px;
    border: none;width:100%;
    background: var(--c-primary, #0059b2);
    color: #fff;text-transform: uppercase;
    cursor: pointer;transition: 0.35s;
}

/* Button */
.comments-more-btn:hover {

    background: var(--c-primary, #004386);
   text-decoration:underline!important; text-underline-offset:4px!important; text-decoration-thickness:1px!important;
}

/* Acties op één lijn */
.comment-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Linkergroep: alleen de upvote */
.comment-actions-left {
    display: flex;
    gap: 10px;
}

/* Rechtergroep: report + edit */
.comment-actions-right {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

/* Buttons netjes */
.comment-actions button {
    background: none;
    border: none;
    padding:  4px 0px;
    cursor: pointer;
    font-size: 14px;
}

.comments-user-info {
    margin-top: 8px;
    padding: 4px 6px;
    background: var(--border);
   /* border-left: 4px solid var(--border);*/
    border-radius: 4px;
    display:block;
    color: var(--c-text);float:right;
}
.comments-user-info strong {
    color: var(--c-primary);
}

.comments-login-alert ul {
    margin: 0 16px 0 -16px !important;
}

.comments-login-alert ul li::marker {
    color: var(--brand);
}

:root {
    --scroll-offset: 120px;
}

html:focus-within {
    scroll-behavior: smooth;
}

/* Ankers (zoals #reacties) */
[id] {
    scroll-margin-top: var(--scroll-offset);
}

/* Mobiel: hogere header */
@media (max-width: 768px) {
    :root {
        --scroll-offset: 84px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

.comment-edited {
    font-size: 0.65rem;
    color: var(--muted);
    text-align: left;
    padding: 1px 3px;width:100%;
    margin: -4px 0 2px 0;
    background: var(--bg);
    border-radius: var(--radius);
    position: relative; /* nodig voor ::after */
}

.comment-edited::after {
    content: "";
    display: block;
    width: 7%;
    height: 2px;
    background: var(--border);
    margin: 3px 0 3px 0;
}

	.button-row {
    display: flex;
    justify-content: center;   /* horizontaal centreren */
    align-items: center;
    gap: 24px;                 /* ruimte tussen de buttons */
	margin-top:16px;
}

.btnl {
    padding: 10px 20px;
    border-radius: var(--radius);
    border: none;
	display: inline-flex;
 	align-items: center;      /* 👈 verticaal perfect gecentreerd */
  	justify-content: center;  /* horizontaal ook netjes */
    line-height: 1; 
	}

/* Button varianten */
a.btnl-primary  {
    background: var(--c-primary, #0059b2);font-size: 0.91rem;font-weight: 600;
    color: #fff;text-decoration: none;transition: 0.3s;letter-spacing: 0.65px;text-transform: uppercase;
}

a.btnl-primary:hover {
    background: var(--c-primary, #004386);;text-decoration: none!important;
}


/* Mobiel: hogere header */
@media (max-width: 768px) {


/* Button varianten */
a.btnl-primary  {
    font-size: 0.88rem;
    color: #fff;text-decoration: none;transition: 0.3s;letter-spacing: 0.65px;
}

.comment-edited::after {
    content: "";
    display: block;
    width: 12%;
    height: 2px;
    background: var(--border);
    margin: 3px 0 3px 0;
}

}


/* =========================================
   Replies (reacties op reacties)
   ========================================= */

/* Wrapper voor een reply */
.comment-reply {
    margin-left: 24px;
    padding-left: 16px;
    border-left: 4px solid var(--border);
}

/* De comment zelf binnen een reply */
.comment-reply .comment {
    margin: 0;
    padding-top: 12px;
    padding-bottom: 6px;
}

/* Lijn TUSSEN replies (vanaf de 2e reply) */
.comment-reply + .comment-reply {
    border-top: 1px dotted var(--border);
}

/* Onderste reply krijgt ook een onderlijn */
.comment-reply:last-of-type {
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;margin-top:12px;
}

/* =========================================
   Divider tussen reply-blok en volgende parent
   ========================================= */

/* Normale divider alleen voor parent-comments */
.comment:not(.comment-reply .comment) .comment-divider {
    display: block;
    height: 1px;
    background: var(--border);
    border: none;
    margin: 12px 0;
}

.comment-reply + .comment {
    position: relative;
    margin-top: 48px;
}

.comment-reply + .comment::before {
    content: "";
    display: block;
    height: 1px;
    background: var(--border);
    margin-bottom: 12px;
}

.comment + .comment-reply {
   margin-top: -12px;
}

.comment-reply .comment-report {
  opacity: 0.25;
  font-size: 0.9em;
}

.comment-reply .comment-report:hover {
  opacity: 1;
}

.comment-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-meta-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.comment-meta-right .comment-time {
    font-size: 0.85rem;
    color: var(--c-muted);
}

.comment-meta-right .comment-report {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.25;
    line-height: 1;
}

.comment-meta-right .comment-report:hover {
    opacity: 1;
    color: var(--brand);
}

.comment-rep {
    margin-left: auto;
}