@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --joke-primary: #144494;
    /* Dark Blue */
    --joke-title-color: #FF3B3B;
    /* Red */
    --joke-text-desc: #555555;
    /* Grey */
    --joke-white: #FFFFFF;
    --joke-bg-light: #F8FAFC;
    --joke-border: #E2E8F0;
    --joke-radius: 8px;
    --joke-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --joke-font: 'Nunito Sans', sans-serif;
}

.jokes-feed-wrapper {
    max-width: 800px;
    margin: 40px auto;
    font-family: var(--joke-font);
    color: var(--joke-primary);
}

/* 1. Header Section */
.jokes-feed-header {
    background-color: var(--joke-primary) !important;
    color: var(--joke-white) !important;
    padding: 15px 20px;
    border-radius: var(--joke-radius) var(--joke-radius) 0 0;
    text-align: center;
    /* "on top of that container i want 'Jokes of the Day'" - usually headers are centered or left, assuming block */
    margin-bottom: 0;
}

.jokes-feed-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--joke-white) !important;
    font-family: var(--joke-font);
}

/* 2. Control Row (Sort & Date) */
.jokes-control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    padding: 15px 0;
    margin-bottom: 20px;
    flex-wrap: wrap;
    /* Handle smaller screens */
    gap: 15px;
}

.jokes-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-label {
    font-weight: 600;
    color: var(--joke-primary);
    font-size: 16px;
}

.joke-filter-dropdown {
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid var(--joke-border);
    font-family: var(--joke-font);
    color: var(--joke-text-desc);
}

.jokes-sort {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-label {
    font-weight: 600;
    color: var(--joke-primary);
    font-size: 16px;
}

.joke-sort-dropdown {
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid var(--joke-border);
    font-family: var(--joke-font);
    color: var(--joke-text-desc);
}

.jokes-current-date {
    text-align: right;
    font-weight: 600;
    color: var(--joke-primary);
    font-size: 16px;
}

/* 3. Joke Card */
.jokes-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.joke-card {
    background: var(--joke-white);
    padding: 24px;
    border-radius: var(--joke-radius);
    box-shadow: var(--joke-shadow);
    border: 1px solid transparent;
    /* cleaner look */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Row 1: Title */
.joke-row-title h3.joke-title {
    color: var(--joke-title-color) !important;
    /* FF3B3B */
    font-size: 22px !important;
    font-family: var(--joke-font) !important;
    margin: 0;
    line-height: 1.3;
}

/* Row 2: Description */
.joke-row-content {
    color: var(--joke-text-desc) !important;
    /* 555555 */
    font-size: 18px !important;
    font-weight: 500 !important;
    /* Medium */
    font-family: var(--joke-font) !important;
    line-height: 1.6;
}

/* Row 1b: Subject Text */
.joke-subject-text {
    display: inline-block;
    color: var(--joke-primary);
    font-size: 0.9rem;
    margin-left: 10px;
    vertical-align: middle;
    font-weight: 600;
}

/* Row 2: Prompt */
.joke-row-prompt {
    font-size: 0.9rem;
    color: #64748b;
    /* Muted text */
    background: #f1f5f9;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--joke-primary);
    margin-bottom: 5px;
    font-style: italic;
}

/* Row 3: Dashed Line */
.joke-dashed-separator {
    width: 100%;
    border-top: 1px dashed var(--joke-primary);
    /* 144494 */
    margin: 5px 0;
    opacity: 0.5;
}

/* Row 4: Author & Date */
.joke-row-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.joke-author {
    text-align: left;
    color: var(--joke-primary) !important;
    /* 144494 */
    font-size: 20px !important;
    font-weight: 600;
}

.joke-publish-date {
    text-align: right;
    color: var(--joke-primary);
    /* Assuming same color usage or text-desc */
    font-size: 14px;
    opacity: 0.8;
}

/* Row 5: Actions */
.joke-row-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

/* Like/Dislike */
.joke-votes {
    display: flex;
    gap: 12px;
}

.vote-btn {
    background: #fff;
    border: 1px solid var(--joke-border);
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--joke-text-desc);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
    font-family: var(--joke-font);
}

.vote-btn:hover {
    background: var(--joke-bg-light);
}

.vote-btn.like-btn:hover,
.vote-btn.voted.like-btn {
    color: #10B981;
    background: #ecfdf5;
    border-color: #10B981;
}

.vote-btn.dislike-btn:hover,
.vote-btn.voted.dislike-btn {
    color: var(--joke-title-color);
    background: #fef2f2;
    border-color: var(--joke-title-color);
}

/* Share Options */
.joke-share {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.share-btn {
    background-color: var(--joke-text-desc) !important;
    /* 555555 */
    color: #fff !important;
    text-decoration: none;
    font-size: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* standard for circular icons */
    transition: all 0.2s;
}

.share-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Form Styles fallback (if enabled) */
.joke-submission-container {
    max-width: 600px;
    margin: 40px auto;
    text-align: center;
}

/* Responsive adjustment */
@media (max-width: 600px) {

    .joke-row-meta,
    .joke-row-actions {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .joke-publish-date,
    .joke-share {
        align-self: flex-start;
    }
}