/*
 * comments-style.css
 * Facebook-style comment section — Publisher Child Theme
 * Paste into your child theme's style.css or @import this file.
 * All selectors are prefixed with .fbc- to avoid Publisher conflicts.
 * ─────────────────────────────────────────────────────────────────
 */

/* ─────────────────────────────────────────────
   DESIGN TOKENS
   ───────────────────────────────────────────── */
:root {
    --fbc-bg:            #f0f2f5;   /* page/section background — light gray */
    --fbc-bubble:        #ffffff;   /* comment bubble background */
    --fbc-border:        #e4e6eb;   /* subtle borders */
    --fbc-line:          #ccd0d5;   /* nested reply left border line */
    --fbc-text-primary:  #1c1e21;   /* main text */
    --fbc-text-secondary:#65676b;   /* timestamps, meta */
    --fbc-text-muted:    #8a8d91;   /* placeholder, hints */
    --fbc-accent:        #1877f2;   /* Facebook-style blue — links, active reply */
    --fbc-accent-hover:  #166fe5;
    --fbc-radius-bubble: 0px;      /* bubble corner radius */
    --fbc-radius-input:  0px;      /* form input radius */
    --fbc-radius-btn:    6px;       /* submit button radius */
    --fbc-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fbc-font-size:     1rem; /* 16px — matches Publisher body */
    --fbc-gap:           8px;
}

/* ─────────────────────────────────────────────
   SECTION WRAPPER
   ───────────────────────────────────────────── */
.fbc-comments {
    padding:       0px 20px;
    margin:        40px 0;
}

/* Section heading — "5 Comments" */
.fbc-comments__title {
    color:         var(--fbc-text-primary);
    margin:        0 0 20px;
    padding-bottom:12px;
    border-bottom: 1px solid var(--fbc-border);
}

/* Comments closed notice */
.fbc-comments__closed {
    color:       var(--fbc-text-secondary);
    text-align:  center;
    padding:     16px 0;
}

/* ─────────────────────────────────────────────
   COMMENT LIST — reset WordPress defaults
   ───────────────────────────────────────────── */
.fbc-comments__list,
.fbc-comments__list ul.children {
    list-style:  none;
    margin:      0;
    padding:     0;
}

/* Root-level comment item */
.fbc-comments__list > li.fbc-comment {
    margin-bottom: 12px;
}

/* ─────────────────────────────────────────────
   NESTED REPLIES — indented + left border line
   ───────────────────────────────────────────── */
.fbc-comments__list ul.children {
    margin-top:    6px;
    margin-right:   40px;   
    padding-right:  14px;
    border-right:   2px solid var(--fbc-line);
}

.fbc-comments__list ul.children li.fbc-comment {
    margin-bottom: 8px;
}

/* Deeper nesting — progressively narrower line */
.fbc-comments__list ul.children ul.children {
    margin-right:  28px;
    border-right-color: #dde0e4;
}

.fbc-comments__list ul.children ul.children ul.children {
    margin-right:  20px;
    border-right-color: #e9ebee;
}

/* ─────────────────────────────────────────────
   COMMENT BUBBLE
   ───────────────────────────────────────────── */
.fbc-comment__bubble {
    display:       inline-block;     /* shrink-wraps to content */
    max-width:     100%;
    background:    var(--fbc-bubble);
    border-radius: var(--fbc-radius-bubble);
    padding:       10px 14px;
    box-shadow:    none;
    border:        1px solid var(--fbc-border);
}

/* ─────────────────────────────────────────────
   COMMENT HEADER — author + timestamp
   ───────────────────────────────────────────── */
.fbc-comment__header {
    display:        flex;
    align-items:    baseline;
    flex-wrap:      wrap;
    gap:            6px;
    margin-bottom:  4px;
}

.fbc-comment__author {
    font-weight:  700;
    font-size:    1.25rem; /* 20px */
    color:        var(--fbc-text-primary);
    line-height:  1.2;
}

.fbc-comment__time {
    font-size:   1rem;   /* 12px */
    color:       var(--fbc-text-secondary);
}

.fbc-comment__time:hover {
    text-decoration: underline;
    cursor:          pointer;
}

/* ─────────────────────────────────────────────
   COMMENT BODY
   ───────────────────────────────────────────── */
.fbc-comment__body {
    font-size:   var(--fbc-font-size);
    color:       var(--fbc-text-primary);
    margin:      0;
    word-break:  break-word;
}

.fbc-comment__body p {
    margin: 0;
}

.fbc-comment__body p + p {
    margin-top: 6px;
}

/* Moderation notice */
.fbc-comment__moderation {
    font-size:    0.75rem;
    color:        var(--fbc-text-secondary);
    font-style:   italic;
    margin:       0 0 4px;
}

/* ─────────────────────────────────────────────
   COMMENT ACTIONS — reply, edit links
   ───────────────────────────────────────────── */
.fbc-comment__actions {
    display:     flex;
    align-items: center;
    gap:         14px;
    margin-top:  4px;
    padding-right: 4px;
}

/* Reply link — WordPress outputs <a class="comment-reply-link"> */
.fbc-comment__actions .comment-reply-link,
.fbc-comment__actions a {
    font-size:       0.875rem; /* 13px */
    font-weight:     700;
    color:           var(--fbc-text-secondary);
    text-decoration: none;
    background:      none;
    border:          none;
    padding:         0;
    cursor:          pointer;
    transition:      color 0.15s ease;
}

.fbc-comment__actions .comment-reply-link:hover,
.fbc-comment__actions a:hover {
    color:           var(--fbc-accent);
    text-decoration: none;
}

/* Edit link */
.fbc-comment__edit {
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--fbc-text-muted);
}

/* ─────────────────────────────────────────────
   PAGINATION
   ───────────────────────────────────────────── */
.fbc-comments__pagination {
    display:         flex;
    justify-content: center;
    gap:             8px;
    margin:          20px 0 0;
}

.fbc-comments__pagination .page-numbers {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    min-width:        36px;
    height:           36px;
    padding:          0 10px;
    border-radius:    8px;
    font-size:        0.875rem;
    font-weight:      600;
    color:            var(--fbc-text-secondary);
    text-decoration:  none;
    border:           1px solid var(--fbc-border);
    background:       var(--fbc-bubble);
    transition:       background 0.15s ease, color 0.15s ease;
}

.fbc-comments__pagination .page-numbers:hover {
    background: var(--fbc-border);
    color:      var(--fbc-text-primary);
}

.fbc-comments__pagination .page-numbers.current {
    background: var(--fbc-accent);
    color:      #ffffff;
    border-color: var(--fbc-accent);
}

/* ─────────────────────────────────────────────
   FORM WRAPPER
   ───────────────────────────────────────────── */
#fbc-comment-form {
    margin-top: 24px;
    margin-bottom: 16px;
}

/* Form title — "Leave a Reply" / "Reply to X" */
.fbc-form__title {
    font-size:    1.5rem;
    font-weight:  700;
    color:        var(--fbc-text-primary);
    margin:       0 0 16px;
    display:      flex;
    align-items:  center;
    justify-content: space-between;
    flex-wrap:    wrap;
}

/* Cancel reply link */
.fbc-form__cancel a {
    font-size:       0.875rem;
    font-weight:     400;
    color:           var(--fbc-accent);
    text-decoration: none;
}

.fbc-form__cancel a:hover {
    text-decoration: underline;
}

/* Logged-in notice */
.fbc-form__logged-in {
    font-size:    0.875rem;
    color:        var(--fbc-text-secondary);
    margin:       0 0 14px;
}

.fbc-form__logged-in a {
    color:           var(--fbc-accent);
    text-decoration: none;
    font-weight:     600;
}

.fbc-form__logged-in a:hover {
    text-decoration: underline;
}

/* Must login */
.fbc-form__must-login {
    font-size: 0.875rem;
    color:     var(--fbc-text-secondary);
    margin:    0;
}

.fbc-form__must-login a {
    color:           var(--fbc-accent);
    font-weight:     600;
    text-decoration: none;
}

/* ─────────────────────────────────────────────
   FORM FIELDS
   ───────────────────────────────────────────── */
.fbc-field {
    margin-bottom: 12px;
}

.fbc-field label {
    display:       block;
    font-size:     1rem;
    font-weight:   600;
    color:         var(--fbc-text-secondary);
    margin-bottom: 5px;
}

/* Required star */
.fbc-field .required {
    color:       #e53e3e;
    margin-right: 2px;
}

/* Text input */
.fbc-field input[type="text"] {
    width:            100%;
    height:           40px;
    padding:          0 16px;
    font-size:        var(--fbc-font-size);
    color:            var(--fbc-text-primary);
    background:       var(--fbc-bubble);
    border:           1px solid var(--fbc-border);
    border-radius:    var(--fbc-radius-input);
    outline:          none;
    transition:       border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing:       border-box;
    -webkit-appearance: none;
    appearance:       none;
}

.fbc-field input[type="text"]::placeholder {
    color: var(--fbc-text-muted);
}

.fbc-field input[type="text"]:focus {
    border-color: var(--fbc-accent);
    box-shadow:   0 0 0 3px rgba(24, 119, 242, 0.15);
}

/* Textarea */
.fbc-field textarea {
    width:            100%;
    padding:          12px 16px;
    font-family:      var(--fbc-font);
    font-size:        var(--fbc-font-size);
    color:            var(--fbc-text-primary);
    background:       var(--fbc-bubble);
    border:           1px solid var(--fbc-border);
    border-radius:    var(--fbc-radius-input);
    outline:          none;
    resize:           vertical;
    min-height:       88px;
    transition:       border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing:       border-box;
    line-height:      1.5;
    -webkit-appearance: none;
    appearance:       none;
}

.fbc-field textarea::placeholder {
    color: var(--fbc-text-muted);
}

.fbc-field textarea:focus {
    border-color: var(--fbc-accent);
    box-shadow:   0 0 0 3px rgba(24, 119, 242, 0.15);
}

/* ─────────────────────────────────────────────
   SUBMIT BUTTON
   ───────────────────────────────────────────── */
.fbc-form__submit {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    height:           38px;
    padding:          0 22px;
    font-family:      var(--fbc-font);
    font-size:        1rem;
    font-weight:      700;
    color:            #ffffff;
    background:       var(--fbc-accent);
    border:           none;
    border-radius:    var(--fbc-radius-btn);
    cursor:           pointer;
    transition:       background 0.15s ease, transform 0.1s ease;
    -webkit-appearance: none;
    appearance:       none;
    outline:          none;
}

.fbc-form__submit:hover {
    background: var(--fbc-accent-hover);
}

.fbc-form__submit:focus-visible {
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.35);
}

.fbc-form__submit:active {
    transform: scale(0.98);
}

/* ─────────────────────────────────────────────
   PENDING COMMENT STATE
   ───────────────────────────────────────────── */
.fbc-comment.comment--pending > .fbc-comment__bubble {
    background:  #fffbf0;
    border-color:#f5e8a0;
}

/* ─────────────────────────────────────────────
   RESPONSIVE — narrow screens
   ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .fbc-comments {
        padding: 0px 20px;
    }

    .fbc-comments__list ul.children {
        margin-right:  24px;
        padding-right: 10px;
    }

    .fbc-comments__list ul.children ul.children {
        margin-right: 16px;
    }

    .fbc-comment__bubble {
        border-radius: 14px;
        padding:       8px 12px;
    }
}

/* ─────────────────────────────────────────────
   PUBLISHER THEME OVERRIDES
   Neutralize Publisher's default comment styles
   so they don't bleed into .fbc- elements.
   ───────────────────────────────────────────── */
.fbc-comments ol.comment-list,
.fbc-comments ul.comment-list {
    padding: 0;
    margin:  0;
}

.fbc-comments .comment-body {
    padding:    0;
    background: none;
    border:     none;
}

.fbc-comments .comment-meta,
.fbc-comments .comment-metadata {
    padding:  0;
    margin:   0;
    background: none;
}

.fbc-comments .comment-content {
    background: none;
    padding:    0;
    margin:     0;
}

.fbc-comments .comment-respond {
    background: #ffffff;
    padding:    24px 12px;
    border-radius: 12px;
    box-shadow: none;
}