/* ==========================================================================
 Commentics Stylesheet for The SLOAH Chronicle
 ========================================================================== */

/* 1. Main Container & Outer Headings */
#cmtx_container {
 font-family: var(--font-body);
 color: var(--color-text);
 margin-top: 3rem;
 padding-top: 2rem;
 border-top: 1px solid var(--color-border);
}

#cmtx_container h3,
#cmtx_container .cmtx_heading {
 font-family: var(--font-heading);
 font-size: 1.4rem;
 font-weight: 700;
 color: var(--color-text);
 margin-bottom: 1.25rem;
 text-shadow: 0.03rem 0.03rem var(--color-crimson);
}

/* 2. Form Inputs & Textarea */
#cmtx_container input[type="text"],
#cmtx_container input[type="email"],
#cmtx_container input[type="url"],
#cmtx_container textarea {
 background-color: var(--color-card-bg);
 border: 1px solid var(--color-border);
 border-radius: 4px;
 padding: 0.65rem 0.85rem;
 font-family: var(--font-body);
 font-size: 0.95rem;
 color: var(--color-text);
 outline: none;
 box-sizing: border-box;
 transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#cmtx_container input[type="text"]:focus,
#cmtx_container input[type="email"]:focus,
#cmtx_container input[type="url"]:focus,
#cmtx_container textarea:focus {
 border-color: var(--color-crimson);
 box-shadow: 0 0 0 2px rgba(89, 0, 22, 0.1);
}

/* 3. Primary Button (Add Comment) - Matches Blog Search Button */
#cmtx_container .cmtx_button,
#cmtx_container .cmtx_button_primary,
#cmtx_container input[type="submit"],
#cmtx_container button[type="submit"] {
 font-family: var(--font-body);
 font-size: 0.85rem;
 font-weight: 600;
 letter-spacing: 0.02em;
 background: var(--color-text) !important;
 color: var(--color-card-bg) !important;
 border: 1px solid var(--color-text) !important;
 border-radius: 4px !important;
 padding: 0.55rem 1.25rem !important;
 cursor: pointer;
 text-shadow: none !important;
 box-shadow: none !important;
 transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

#cmtx_container .cmtx_button:hover,
#cmtx_container .cmtx_button_primary:hover,
#cmtx_container input[type="submit"]:hover,
#cmtx_container button[type="submit"]:hover {
 background: var(--color-crimson) !important;
 border-color: var(--color-crimson) !important;
 color: var(--color-card-bg) !important;
}

/* 4. Secondary Button (Preview) - Matches Blog Postnav Pills */
#cmtx_container .cmtx_button_secondary,
#cmtx_container .cmtx_preview_button,
#cmtx_container .cmtx_button_preview {
 font-family: var(--font-body);
 font-size: 0.85rem;
 font-weight: 600;
 background-color: var(--color-card-bg) !important;
 border: 1px solid var(--color-border) !important;
 border-radius: 4px !important;
 color: var(--color-text) !important;
 padding: 0.55rem 1.15rem !important;
 cursor: pointer;
 box-shadow: none !important;
 text-shadow: none !important;
 transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

#cmtx_container .cmtx_button_secondary:hover,
#cmtx_container .cmtx_preview_button:hover,
#cmtx_container .cmtx_button_preview:hover {
 background-color: var(--color-accent) !important;
 border-color: var(--color-accent) !important;
 color: var(--color-text) !important;
}

/* 5. Checkboxes, Form Labels & Links */
#cmtx_container .cmtx_checkbox_container,
#cmtx_container .cmtx_label {
 font-family: var(--font-body);
 font-size: 0.85rem;
 color: var(--color-muted);
}

#cmtx_container a {
 color: var(--color-text);
 text-decoration: underline;
 text-decoration-color: var(--color-accent);
 text-underline-offset: 3px;
 transition: background-color 0.15s ease, color 0.15s ease;
}

#cmtx_container a:hover {
 background-color: var(--color-accent);
 text-decoration: none;
}

/* 6. Comment Thread & Entry Rows */
.cmtx_comment_box {
 background: transparent;
 border-bottom: 1px solid var(--color-border);
 padding: 1.5rem 0;
}

.cmtx_comment_box:last-child {
 border-bottom: none;
}

.cmtx_user_name {
 font-family: var(--font-body);
 font-weight: 700;
 font-size: 0.95rem;
 color: var(--color-text);
}

.cmtx_date {
 font-size: 0.8rem;
 color: var(--color-muted);
}

/* Unlinked commenter name (no website provided) */
#cmtx_container .cmtx_name,
#cmtx_container .cmtx_user_name,
#cmtx_container span.cmtx_name {
 color: var(--color-crimson) !important;
 font-weight: 700;
}

/* Linked commenter name (website provided) */
#cmtx_container a.cmtx_name,
#cmtx_container a.cmtx_user_name {
 color: var(--color-text) !important;
 font-weight: 700;
 text-decoration: underline;
 text-decoration-color: var(--color-accent);
 text-underline-offset: 3px;
}

#cmtx_container a.cmtx_name:hover,
#cmtx_container a.cmtx_user_name:hover {
 color: var(--color-crimson) !important;
 background-color: transparent !important;
 text-decoration: underline;
 text-decoration-color: var(--color-crimson);
}

/* Admin Badge - Matches Site Crimson Pill Token */
.cmtx_admin_badge {
 background-color: var(--color-crimson) !important;
 color: var(--color-pill-text) !important;
 font-family: var(--font-body);
 font-size: 0.7rem !important;
 font-weight: 700;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 padding: 0.2rem 0.55rem !important;
 border-radius: 9999px !important;
 display: inline-block;
 vertical-align: middle;
}

/* Avatars */
.cmtx_avatar img {
 border-radius: 6px;
 border: 1px solid var(--color-border);
}

/* 7. Action Icons (Like, Reply, Edit) */
.cmtx_action_link,
.cmtx_like_count,
.cmtx_reply_link {
 color: var(--color-muted) !important;
 font-size: 0.85rem;
}

.cmtx_action_link:hover,
.cmtx_reply_link:hover {
 color: var(--color-crimson) !important;
 background-color: transparent !important;
}

/* 8. Powered By Footer Link */
.cmtx_powered_by {
 font-size: 0.75rem;
 color: var(--color-muted);
 margin-top: 1rem;
}

.cmtx_powered_by a {
 color: var(--color-muted) !important;
 text-decoration: none;
}

.cmtx_powered_by a:hover {
 background-color: transparent !important;
 text-decoration: underline;
 text-decoration-color: var(--color-crimson);
}