/*
 * challenge.css
 * Styles for the BookPressed challenge system.
 * Enqueue this from functions.php or add to your existing stylesheet.
 * Brand: #dd012c red · #fcef1d yellow · #2c45fe blue · white backgrounds
 */


/* ── Page layout ──────────────────────────────────────────── */

.challenge-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 20px 60px;
}


/* ── Header ───────────────────────────────────────────────── */

.challenge-header {
    margin-bottom: 32px;
}

.challenge-meta-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.challenge-type-badge,
.challenge-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.challenge-type-badge {
    background: #fcef1d;
    color: #1a1a1a;
}

.challenge-status-badge.status-active  { background: #dd012c; color: #fff; }
.challenge-status-badge.status-voting  { background: #2c45fe; color: #fff; }
.challenge-status-badge.status-closed  { background: #e0e0e0; color: #555; }

.challenge-title {
    font-size: 28px;
    margin: 0 0 8px;
}

.challenge-word-limit {
    font-size: 13px;
    color: #666;
    margin: 0;
}


/* ── Prompt ───────────────────────────────────────────────── */

.challenge-prompt {
    background: #fff;
    border-left: 4px solid #dd012c;
    padding: 20px 24px;
    margin-bottom: 36px;
    font-size: 16px;
    line-height: 1.7;
}


/* ── Notices ──────────────────────────────────────────────── */

.challenge-notice {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 14px 18px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-size: 15px;
}

.challenge-notice--success {
    background: #edfaf1;
    border-color: #82d9a2;
    color: #1d6b3c;
}


/* ── Submission form ──────────────────────────────────────── */

.challenge-submit-form {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 28px;
    margin-bottom: 40px;
}

.challenge-submit-form h2 {
    margin: 0 0 20px;
    font-size: 20px;
}

.challenge-submit-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin: 0 0 6px;
}

.challenge-submit-form input[type="text"],
.challenge-submit-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px 12px;
    font-size: 15px;
    margin-bottom: 18px;
    font-family: inherit;
    transition: border-color 0.15s;
}

.challenge-submit-form input[type="text"]:focus,
.challenge-submit-form textarea:focus {
    outline: none;
    border-color: #2c45fe;
}

.challenge-submit-form textarea {
    resize: vertical;
    min-height: 220px;
    line-height: 1.6;
}

.word-counter {
    font-size: 13px;
    color: #888;
    text-align: right;
    margin: -12px 0 16px;
}

.word-counter #bp-word-count.over-limit {
    color: #dd012c;
    font-weight: 700;
}

.challenge-form-footer {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bp-submit-feedback {
    font-size: 14px;
}

.bp-submit-feedback.success { color: #1d6b3c; }
.bp-submit-feedback.error   { color: #dd012c; }


/* ── Buttons ──────────────────────────────────────────────── */

.bp-btn {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
}

.bp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bp-btn--primary {
    background: #dd012c;
    color: #fff;
}

.bp-btn--primary:hover:not(:disabled) {
    opacity: 0.88;
}

.bp-btn--secondary {
    background: #2c45fe;
    color: #fff;
}

.bp-btn--secondary:hover:not(:disabled) {
    opacity: 0.88;
}

.bp-btn--voted {
    background: #e0e0e0;
    color: #555;
    cursor: default;
}


/* ── Voting header ────────────────────────────────────────── */

.challenge-voting-header {
    margin-bottom: 28px;
}

.challenge-voting-header h2 {
    margin: 0 0 8px;
    font-size: 22px;
}

.votes-remaining {
    font-size: 14px;
    color: #555;
    margin: 0;
}


/* ── Submission cards (voting + results) ──────────────────── */

.challenge-submissions,
.challenge-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.challenge-results h2 {
    font-size: 22px;
    margin: 0 0 20px;
}

.submission-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.submission-card--winner {
    border-color: #fcef1d;
    box-shadow: 0 0 0 2px #fcef1d;
}

.submission-winner-badge {
    background: #fcef1d;
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 12px;
    display: inline-block;
}

.submission-rank {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 13px;
    font-weight: 700;
    color: #aaa;
}

.submission-card__body {
    padding: 20px 20px 0;
}

.submission-card__title {
    font-size: 18px;
    margin: 0 0 6px;
}

.submission-card__author {
    font-size: 13px;
    color: #888;
    margin: 0 0 14px;
}

.submission-card__text {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    max-height: 260px;
    overflow-y: auto;
    padding-bottom: 8px;
}

.submission-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    margin-top: 14px;
}

.submission-vote-count {
    font-size: 13px;
    color: #888;
}

.submission-card__own-label {
    font-size: 12px;
    color: #aaa;
    font-style: italic;
}
/* ── Archive wrapper ──────────────────────────────────────── */
 
.challenge-archive {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px 60px;
}
 
.challenge-archive__header {
    margin-bottom: 40px;
}
 
.challenge-archive__header h1 {
    font-size: 32px;
    margin: 0 0 10px;
}
 
.challenge-archive__intro {
    font-size: 16px;
    color: #555;
    margin: 0;
}
 
.challenge-archive__empty {
    color: #888;
    font-size: 15px;
}
 
 
/* ── Sections ─────────────────────────────────────────────── */
 
.challenge-archive__section {
    margin-bottom: 48px;
}
 
.challenge-archive__section-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #888;
    margin: 0 0 18px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
}
 
.challenge-archive__section--active .challenge-archive__section-title {
    color: #dd012c;
    border-color: #dd012c;
}
 
.challenge-archive__section--voting .challenge-archive__section-title {
    color: #2c45fe;
    border-color: #2c45fe;
}
 
 
/* ── Card grid ────────────────────────────────────────────── */
 
.challenge-archive__grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
    gap: 20px;
}
 
 
/* ── Challenge card ───────────────────────────────────────── */
 
.challenge-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, border-color 0.15s;
}
 
.challenge-card:hover {
    box-shadow: 0 4px 16px rgba( 0,0,0,0.08 );
    border-color: #ccc;
    text-decoration: none;
    color: inherit;
}
 
.challenge-card--active {
    border-top: 3px solid #dd012c;
}
 
.challenge-card--voting {
    border-top: 3px solid #2c45fe;
}
 
.challenge-card--closed {
    border-top: 3px solid #e0e0e0;
    opacity: 0.85;
}
 
.challenge-card__badges {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
 
.challenge-card__title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.35;
}
 
.challenge-card__excerpt {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    flex: 1;
    margin: 0 0 16px;
}
 
.challenge-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
    margin-top: auto;
}
 
.challenge-card__deadline {
    color: #2c45fe;
    font-weight: 600;
}
 
.challenge-card__winner {
    color: #1a7a3f;
    font-weight: 600;
}
 
 /* ── Timer bar (single page) ──────────────────────────────── */

.challenge-timer {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 16px;
    margin-bottom: 28px;
    font-size: 14px;
}

.challenge-timer__label {
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    white-space: nowrap;
}

.challenge-timer__countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #333;
    font-size: 18px;
    letter-spacing: 0.03em;
}

/* When under 6 hours, pulse red */
.challenge-timer--urgent .challenge-timer__countdown {
    color: #dd012c;
    animation: bp-pulse 1s ease-in-out infinite;
}

@keyframes bp-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* ── Archive card deadline ────────────────────────────────── */

.challenge-card__deadline.deadline--urgent {
    color: #dd012c;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    animation: bp-pulse 1s ease-in-out infinite;
}