/*
 * Casnezer Forum Engine — Core CSS
 * Uses CSS custom properties defined in the theme (and injected by cfe_inject_css_vars).
 * Zero hardcoded colors — everything references var(--cf-*).
 */

/* ── Reset box model for all CFE elements ────────────────────── */
[class^="cfe-"],[class^="csf-"],[class^="cst-"],[class^="cfe-fi-"]{
    box-sizing:border-box;
}

/* ── Material Symbols defaults ───────────────────────────────── */
.material-symbols-outlined.ms {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    font-style: normal;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
}

/* ── Pagination (shared) ─────────────────────────────────────── */
.cfe-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}
.cfe-pagination a,
.cfe-pagination span {
    padding: 8px 14px;
    border: 1px solid rgba(68,71,72,.3);
    color: var(--cf-on-sv);
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.cfe-pagination a:hover,
.cfe-pagination .current {
    border-color: var(--cf-gold);
    color: var(--cf-gold);
}

/* ── Form elements (shared across forum + topic templates) ───── */
.cfe-form input[type="text"],
.cfe-form input[type="email"],
.cfe-form textarea,
.cfe-form select {
    width: 100%;
    box-sizing: border-box;
    background: var(--cf-s-least);
    border: 1px solid rgba(68,71,72,.3);
    border-bottom: 2px solid rgba(68,71,72,.3);
    padding: 14px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--cf-on-s);
    outline: none;
    transition: border-color .2s, border-bottom-color .2s;
    -webkit-appearance: none;
    appearance: none;
    display: block;
}
.cfe-form textarea { resize: vertical; min-height: 140px; }
.cfe-form input:focus,
.cfe-form textarea:focus,
.cfe-form select:focus {
    border-color: rgba(68,71,72,.5);
    border-bottom-color: var(--cf-gold);
}
.cfe-form input::placeholder,
.cfe-form textarea::placeholder { color: var(--cf-outline); }

.cfe-form label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cf-outline);
    margin-bottom: 8px;
}
.cfe-form-row { margin-bottom: 20px; }

.cfe-form-submit {
    background: var(--cf-gold);
    color: var(--cf-gold-on);
    border: none;
    padding: 14px 36px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter .2s;
}
.cfe-form-submit:hover  { filter: brightness(1.1); }
.cfe-form-submit:disabled { opacity: .55; cursor: not-allowed; }

/* ── Inline messages ─────────────────────────────────────────── */
.cfe-msg {
    padding: 14px 20px;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    border: 1px solid;
    line-height: 1.5;
}
.cfe-msg-error   { background: rgba(255,64,64,.06);   border-color: rgba(255,64,64,.3);   color: #ff9999; }
.cfe-msg-success { background: rgba(233,195,73,.07); border-color: rgba(233,195,73,.3); color: var(--cf-gold); }

/* ── Like button state ───────────────────────────────────────── */
.cfe-like-btn.liked {
    color: var(--cf-gold) !important;
    background: var(--cf-s-high) !important;
}
.cfe-like-btn .ms {
    transition: font-variation-settings .15s;
}

/* ── Subscribe button ────────────────────────────────────────── */
.cst-sub-btn.subscribed {
    border-color: rgba(233,195,73,.4);
    color: var(--cf-gold);
}

/* ── Search result dropdown ──────────────────────────────────── */
#cfe-search-results {
    position: absolute;
    top: calc(100% + 2px);
    left: 0; right: 0;
    background: var(--cf-s-low);
    border: 1px solid rgba(68,71,72,.4);
    z-index: 200;
    display: none;
    max-height: 320px;
    overflow-y: auto;
}
#cfe-search-results a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    border-bottom: 1px solid rgba(68,71,72,.1);
    transition: background .15s;
}
#cfe-search-results a:last-child { border-bottom: none; }
#cfe-search-results a:hover { background: rgba(233,195,73,.06); }
#cfe-search-results .sr-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--cf-on-s);
    display: block;
}
#cfe-search-results .sr-meta {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--cf-outline);
    margin-top: 2px;
    display: block;
}
#cfe-search-results .sr-empty {
    padding: 16px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--cf-outline);
}

/* ── Reply quote preview ─────────────────────────────────────── */
#cfe-quote-preview {
    padding: 12px 16px;
    background: var(--cf-s-cont);
    border-left: 2px solid var(--cf-gold);
    margin-bottom: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--cf-on-sv);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#cfe-quote-preview button {
    background: none;
    border: none;
    color: var(--cf-outline);
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    line-height: 1;
    transition: color .15s;
}
#cfe-quote-preview button:hover { color: var(--cf-on-s); }

/* ── Newly appended reply card (AJAX) ────────────────────────── */
.cfe-reply-new {
    animation: cfe-slide-in .3s ease-out;
}
@keyframes cfe-slide-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Closed topic notice ─────────────────────────────────────── */
.cfe-closed-notice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(68,71,72,.12);
    border: 1px solid rgba(68,71,72,.3);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cf-outline);
}

/* ── Hot topic pulse ─────────────────────────────────────────── */
.csf-row-badge-hot {
    animation: cfe-pulse 2.5s ease-in-out infinite;
}
@keyframes cfe-pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: .65; }
}

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 640px) {
    .cfe-form-submit { width: 100%; text-align: center; padding: 14px 24px; }
    .cst-acts { flex-wrap: wrap; gap: 8px; }
}

/* ── New Topic Form wrap — luxury styling ───────────────────── */
.csf-form-wrap {
    margin-top: 48px;
    padding: 40px 40px 48px;
    background: var(--cf-s-least);
    border: 1px solid var(--cf-outv);
    border-top: 3px solid var(--cf-gold);
}
.csf-form-h {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--cf-on-s);
    margin: 0 0 28px;
    letter-spacing: -0.01em;
}
/* Upgrade form inputs inside csf-form-wrap too */
.csf-form-wrap .cfe-form input[type="text"],
.csf-form-wrap .cfe-form textarea {
    padding: 16px 18px;
    font-size: 16px;
    background: var(--cf-s-low);
    border: 1px solid var(--cf-outv);
    border-bottom: 2px solid var(--cf-outv);
    color: var(--cf-on-s);
}
.csf-form-wrap .cfe-form input[type="text"]:focus,
.csf-form-wrap .cfe-form textarea:focus {
    border-bottom-color: var(--cf-gold);
}
.csf-form-wrap .cfe-form label { margin-bottom: 10px; }
.csf-form-wrap .cfe-form-row   { margin-bottom: 24px; }
.csf-form-wrap .cfe-form-submit {
    padding: 16px 48px;
    font-size: 12px;
    letter-spacing: 0.15em;
}
/* Login prompt inside form wrap */
.csf-form-wrap > p { font-family: 'Inter', sans-serif; color: var(--cf-on-sv); padding: 24px 0; font-size: 16px; }

@media(max-width:600px) {
    .csf-form-wrap { padding: 24px 20px 32px; }
    .csf-form-wrap .cfe-form-submit { width: 100%; text-align: center; }
}

/* ── Global mobile full-width fix ───────────────────────────── */
@media (max-width: 768px) {
    /* Ensure no horizontal overflow / empty right space */
    .cst-page,
    .fi-page,
    .cf-fp-container,
    .cf-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden;
    }
    /* Single topic: post cards fill full width */
    .cst-post { 
        width: 100%; 
        box-sizing: border-box; 
        margin-left: 0 !important; 
        margin-right: 0 !important; 
    }
    /* Author column compact on mobile */
    .cst-author {
        width: 52px !important;
        flex-shrink: 0;
    }
    .cst-author-sm {
        width: 40px !important;
    }
    /* Hide verbose author stats on mobile */
    .cst-author-stats { display: none !important; }
    /* Post content takes all available space */
    .cst-post-body { min-width: 0; flex: 1; overflow-wrap: break-word; }
    /* Post inner direction: keep row on mobile but tight gap */
    .cst-post-inner { 
        flex-direction: row !important; 
        gap: 12px !important; 
        align-items: flex-start;
    }
    /* Hide sidebar on mobile, shown below */
    /* Topic actions row wrap nicely */
    .cst-topic-actions { flex-wrap: wrap; gap: 8px; }
    /* Forum index page cards stack on mobile */
    .fi-grid,
    .cfe-forums-grid { grid-template-columns: 1fr !important; }
    /* Forum row takes full width */
    .hp-fc-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 400px) {
    .hp-fc-grid { grid-template-columns: 1fr !important; }
}