/* ==========================================================================
   member-comments.css
   Comment section under articles (member-comments.cfm), in the same
   thin-grey-border style as members.css and h2h-modern.css.

   Every rule starts with ".cmt-section", so nothing here can affect the rest
   of the article page, and the menu's stylesheet can't override it.
   ========================================================================== */

.cmt-section {
    --cmt-border:    #e5e7eb;
    --cmt-surface:   #f9fafb;
    --cmt-surface-2: #f3f4f6;
    --cmt-ink:       #1a1c27;
    --cmt-muted:     #6b7280;
    --cmt-neutral:   #868686;
    --cmt-error:     #b42318;
    --cmt-error-bg:  #fef3f2;

    /* Like / dislike colours: muted, not neon */
    --cmt-like:            #2f7a4d;
    --cmt-like-bg:         #edf6f0;
    --cmt-like-border:     #9fcdb0;
    --cmt-dislike:         #b0453c;
    --cmt-dislike-bg:      #fbf0ee;
    --cmt-dislike-border:  #e2aba5;

    margin: 40px 0 10px;
    color: var(--cmt-ink);
}


/* ----- Heading (same look as the article page's section titles) ------------ */

.cmt-section .cmt-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e0e0e0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
}

.cmt-section .cmt-count {
    min-width: 28px;
    padding: 2px 9px;
    border-radius: 14px;
    background: var(--cmt-surface-2);
    color: var(--cmt-muted);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}


/* ----- Message after a problem (too long, too fast...) --------------------- */

.cmt-section .cmt-alert {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #fecdca;
    border-left: 4px solid var(--cmt-error);
    background: var(--cmt-error-bg);
    color: var(--cmt-error);
    font-size: 15px;
    line-height: 1.5;
}


.cmt-section .cmt-alert--success {
    border-color: var(--cmt-border);
    border-left-color: #067647;
    background: var(--cmt-surface);
    color: var(--cmt-ink);
}


/* ----- Comment form --------------------------------------------------------- */

.cmt-section .cmt-form {
    margin: 0 0 25px;
    padding: 16px;
    border: 1px solid var(--cmt-border);
    background: var(--cmt-surface);
}

.cmt-section .cmt-as {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--cmt-muted);
}

.cmt-section .cmt-as strong {
    color: var(--cmt-ink);
}

.cmt-section .cmt-as-link {
    margin-left: auto;
    color: var(--cmt-muted);
    font-size: 13px;
    text-decoration: underline;
}

.cmt-section .cmt-as-link:hover {
    color: var(--cmt-ink);
}

.cmt-section .cmt-textarea {
    display: block;
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 0;
    background: #fff;
    color: var(--cmt-ink);
    font-family: inherit;
    font-size: 16px;               /* 16px stops iPhones from zooming in on focus */
    line-height: 1.5;
    resize: vertical;
}

.cmt-section .cmt-textarea:focus {
    border-color: var(--cmt-ink);
    outline: 2px solid var(--cmt-ink);
    outline-offset: -1px;
}

.cmt-section .cmt-form-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 10px;
}

.cmt-section .cmt-hint {
    margin-right: auto;
    font-size: 12px;
    color: var(--cmt-muted);
}

.cmt-section .cmt-hint a {
    color: var(--cmt-muted);
    text-decoration: underline;
}

.cmt-section .cmt-hint a:hover {
    color: var(--cmt-ink);
}

/* Reply form: lighter, lined up under the comment it answers (see .cmt-indent-*) */
.cmt-section .cmt-form--reply {
    margin-top: 4px;
    margin-bottom: 14px;
    padding: 12px;
    background: #fff;
}

.cmt-section .cmt-replying {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--cmt-muted);
}

.cmt-section .cmt-replying strong {
    color: var(--cmt-ink);
}

.cmt-section .cmt-form[hidden] {
    display: none;
}


/* ----- Logged out: invitation to log in ------------------------------------- */

.cmt-section .cmt-login {
    margin: 0 0 25px;
    padding: 20px;
    border: 1px solid var(--cmt-border);
    border-left: 4px solid var(--cmt-neutral);
    background: var(--cmt-surface);
}

.cmt-section .cmt-login p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--cmt-ink);
}

.cmt-section .cmt-login-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* ----- Buttons -------------------------------------------------------------- */

.cmt-section .cmt-button,
.cmt-section a.cmt-button {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--cmt-ink);
    border-radius: 0;
    background: var(--cmt-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cmt-section .cmt-button:hover,
.cmt-section a.cmt-button:hover,
.cmt-section a.cmt-button:focus {
    background: #2e3142;
    color: #fff;
    text-decoration: none;
}

.cmt-section .cmt-button--secondary,
.cmt-section a.cmt-button--secondary {
    background: #fff;
    color: var(--cmt-ink);
}

.cmt-section .cmt-button--secondary:hover,
.cmt-section a.cmt-button--secondary:hover,
.cmt-section a.cmt-button--secondary:focus {
    background: var(--cmt-ink);
    color: #fff;
}

.cmt-section .cmt-button:focus-visible,
.cmt-section .cmt-link:focus-visible {
    outline: 2px solid var(--cmt-ink);
    outline-offset: 2px;
}

/* Small text buttons: Reply, Cancel */
.cmt-section .cmt-link {
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--cmt-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.cmt-section .cmt-link:hover {
    color: var(--cmt-ink);
    text-decoration: underline;
}


/* ----- Comment list ---------------------------------------------------------- */

/* ----- Sort buttons: Top / Newest / Oldest (same look as the h2h filter chips) */

.cmt-section .cmt-sort {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}

.cmt-section .cmt-sort-label {
    margin-right: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--cmt-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cmt-section a.cmt-sort-option {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--cmt-border);
    background: var(--cmt-surface);
    color: var(--cmt-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cmt-section a.cmt-sort-option:hover,
.cmt-section a.cmt-sort-option:focus {
    background: var(--cmt-border);
    color: var(--cmt-ink);
    text-decoration: none;
}

/* Selected: white with a bar underneath (inset, so nothing shifts) */
.cmt-section a.cmt-sort-option.is-active,
.cmt-section a.cmt-sort-option.is-active:hover {
    background: #fff;
    color: var(--cmt-ink);
    box-shadow: inset 0 -3px 0 var(--cmt-neutral);
}

.cmt-section a.cmt-sort-option:focus-visible {
    outline: 2px solid var(--cmt-ink);
    outline-offset: 2px;
}

/* Each thread starts with a divider line above its top-level comment */
.cmt-section .cmt-list {
    border-bottom: 1px solid var(--cmt-border);
}

.cmt-section .cmt {
    padding: 16px 0;
}

.cmt-section .cmt-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 6px;
}

.cmt-section .cmt-badge {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.cmt-section .cmt-author,
.cmt-section a.cmt-author {
    font-size: 15px;
    font-weight: 800;
    color: var(--cmt-ink);
    text-decoration: none;
}

/* Usernames link to the member's profile */
.cmt-section a.cmt-author:hover,
.cmt-section a.cmt-author:focus,
.cmt-section a.cmt-as-name:hover {
    color: var(--cmt-ink);
    text-decoration: underline;
}

.cmt-section a.cmt-as-name {
    color: var(--cmt-ink);
    font-weight: 700;
    text-decoration: none;
}

/* "Official" (TrueNorthFoot's account) and "Mod" tags next to usernames */
.cmt-section .cmt-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border: 1px solid var(--cmt-border);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cmt-section .cmt-tag svg {
    width: 11px;
    height: 11px;
}

.cmt-section .cmt-tag--official {
    border-color: var(--cmt-ink);
    background: var(--cmt-ink);
    color: #fff;
}

.cmt-section .cmt-tag--mod {
    background: var(--cmt-surface-2);
    color: var(--cmt-muted);
}

.cmt-section .cmt-author--gone {
    font-weight: 600;
    font-style: italic;
    color: var(--cmt-muted);
}

.cmt-section .cmt-time {
    font-size: 13px;
    color: var(--cmt-muted);
}

.cmt-section .cmt-body {
    font-size: 16px;
    line-height: 1.6;
    color: #151515;
    white-space: pre-line;         /* keeps the line breaks people typed */
    overflow-wrap: anywhere;       /* long links never stretch the page */
}

.cmt-section .cmt-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
}

/* Like / dislike buttons with their counts */
.cmt-section .cmt-votes {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.cmt-section .cmt-vote,
.cmt-section a.cmt-vote {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--cmt-border);
    border-radius: 0;
    background: #fff;
    color: var(--cmt-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cmt-section .cmt-vote svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.cmt-section .cmt-vote:hover:not(:disabled),
.cmt-section a.cmt-vote:hover {
    border-color: var(--cmt-ink);
    color: var(--cmt-ink);
    text-decoration: none;
}

/* Hover hints which way you're voting */
.cmt-section .cmt-vote--up:hover:not(:disabled),
.cmt-section a.cmt-vote--up:hover {
    border-color: var(--cmt-like-border);
    color: var(--cmt-like);
}

.cmt-section .cmt-vote--down:hover:not(:disabled),
.cmt-section a.cmt-vote--down:hover {
    border-color: var(--cmt-dislike-border);
    color: var(--cmt-dislike);
}

/* Your own vote: soft green for a like, soft red for a dislike */
.cmt-section .cmt-vote--up.is-active,
.cmt-section .cmt-vote--up.is-active:hover {
    border-color: var(--cmt-like-border);
    background: var(--cmt-like-bg);
    color: var(--cmt-like);
}

.cmt-section .cmt-vote--down.is-active,
.cmt-section .cmt-vote--down.is-active:hover {
    border-color: var(--cmt-dislike-border);
    background: var(--cmt-dislike-bg);
    color: var(--cmt-dislike);
}

/* Your own comment: counts shown, buttons not clickable */
.cmt-section .cmt-vote:disabled {
    cursor: default;
    opacity: 0.7;
}

.cmt-section .cmt-votes.is-busy .cmt-vote {
    opacity: 0.6;
    cursor: wait;
}

/* Moderator "Hide" button sits in the row like the other links */
.cmt-section .cmt-inline-form {
    display: inline;
    margin: 0;
}

.cmt-section .cmt-link--danger:hover {
    color: var(--cmt-error);
}

.cmt-section .cmt-deleted {
    font-size: 14px;
    font-style: italic;
    color: var(--cmt-muted);
}

/* Threads: each reply is indented one step further than the comment it answers,
   with a line on its left. The indent stops at 3 steps (deeper replies say
   "Replying to ..."), so long threads still fit on a phone. */
.cmt-section .cmt--top {
    padding-top: 18px;
    border-top: 1px solid var(--cmt-border);
}

/* The space above/below a reply is margin (outside the box), not padding,
   so its left line stops short and never touches the divider lines */
.cmt-section .cmt--reply {
    margin-top: 0;
    margin-bottom: 16px;
    padding: 0 0 0 16px;
    border-left: 2px solid var(--cmt-border);
}

.cmt-section .cmt-indent-1 { margin-left: 24px; }
.cmt-section .cmt-indent-2 { margin-left: 48px; }
.cmt-section .cmt-indent-3 { margin-left: 72px; }

.cmt-section .cmt-empty {
    margin: 0;
    padding: 20px 0;
    font-size: 15px;
    font-style: italic;
    color: var(--cmt-muted);
}

/* Report form: small box with the reasons, under the comment */
.cmt-section .cmt-report-form {
    max-width: 420px;
    margin: 10px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--cmt-border);
    background: var(--cmt-surface);
}

.cmt-section .cmt-report-form[hidden] {
    display: none;
}

.cmt-section .cmt-report-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.cmt-section .cmt-report-form legend {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--cmt-ink);
}

.cmt-section .cmt-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 400;
    color: var(--cmt-ink);
    cursor: pointer;
}

.cmt-section .cmt-radio input {
    margin: 0;
    accent-color: var(--cmt-ink);
}

/* Label kept for screen readers but not shown */
.cmt-section .cmt-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Jumping to a comment (after posting) leaves room for the top of the screen */
.cmt-section .cmt {
    scroll-margin-top: 90px;
}


/* ----- Phones ----------------------------------------------------------------- */

@media (max-width: 767px) {
    .cmt-section .cmt-heading       { font-size: 22px; }
    .cmt-section .cmt--reply        { padding-left: 12px; }
    .cmt-section .cmt-indent-1      { margin-left: 10px; }
    .cmt-section .cmt-indent-2      { margin-left: 20px; }
    .cmt-section .cmt-indent-3      { margin-left: 30px; }
    .cmt-section .cmt-hint          { width: 100%; }
    .cmt-section .cmt-form-foot .cmt-button { flex: 1; }
    .cmt-section .cmt-login-actions .cmt-button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cmt-section .cmt-button,
    .cmt-section .cmt-vote,
    .cmt-section a.cmt-sort-option { transition: none; }
}



/* ----- Comment count button next to the share icons (article.cfm) ---------
   Same 36px height as the round share icons, as a soft grey pill. */

.tnf-social-share .cmt-jump {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    margin-left: 4px;
    padding: 0 14px 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #f9fafb;
    color: #1a1c27;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tnf-social-share .cmt-jump:hover,
.tnf-social-share .cmt-jump:focus {
    border-color: #d1d5db;
    background: #f3f4f6;
    color: #1a1c27;
    text-decoration: none;
}

.tnf-social-share .cmt-jump:focus-visible {
    outline: 2px solid #1a1c27;
    outline-offset: 2px;
}

.tnf-social-share .cmt-jump strong {
    font-weight: 800;
}

.tnf-social-share .cmt-jump svg {
    flex-shrink: 0;
    color: #6b7280;
}

/* Jumping to the comments leaves a little room above the heading */
.cmt-section {
    scroll-margin-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .tnf-social-share .cmt-jump { transition: none; }
}