/**
 * calendar.css — Calendar day headers, day/month cells,
 * opportunity blocks, and month opportunity pills.
 */

/* ── Calendar day header ── */
.cal-header {
    background-color: var(--color-cream);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.cal-day-label {
    padding: 0.625rem 0.5rem;
    text-align: center;
    background: var(--color-surface);
    border-radius: 0.625rem;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    margin: 0.375rem 0.25rem;
}

.cal-day-label:last-child {
    border-right: none;
}

/* Today's header: forest green */
.cal-day-label.is-today {
    background: var(--color-forest);
    border-color: var(--color-forest);
    color: var(--color-white-70);
}

.cal-day-label.is-today .cal-day-num {
    color: var(--color-surface);
}

/* Day name (small, above) */
.cal-day-name {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 0.25rem;
}

/* Day number (large) */
.cal-day-num {
    font-size: 1.4rem;
    font-weight: 600;
    display: block;
    color: var(--color-charcoal);
}

/* ── Calendar day cell ── */
.cal-cell {
    border-right: 1px solid var(--color-border);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 16rem;
}

.cal-cell:last-child {
    border-right: none;
}

.cal-cell.is-today {
    background-color: var(--color-forest-50);
}

/* ── Opportunity block (calendar card) — WHITE with tag-colored left border ── */
.opp-block {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary-300); /* color overridden inline by JS */
    border-radius: 0.5rem;
    padding: 0.75rem;
    padding-right: 2.35rem;
    cursor: pointer;
    position: relative;
    transition: box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 1px 3px var(--color-black-6);
}

.opp-block:hover {
    box-shadow: 0 4px 12px var(--color-black-10);
    transform: translateY(-1px);
}

/* Time — blue, small caps */
.opp-time {
    color: var(--color-primary-500);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Title — charcoal, bold */
.opp-title {
    color: var(--color-charcoal);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.125rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Tag — pill shaped, colors set inline by JS from TAG_COLORS */
.opp-tag {
    font-size: 0.68rem;
    color: var(--color-primary-600);       /* fallback; overridden inline */
    background: var(--color-primary-50);   /* fallback; overridden inline */
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

/* Org/location text — muted */
.opp-org {
    font-size: 0.72rem;
    color: var(--color-muted);
    margin-top: 0.125rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Rating stars div inside a calendar block */
.opp-block > div {
    margin-top: 0.3rem;
    margin-bottom: 0.1rem;
}

/* Details button */
.opp-block > button {
    margin-top: 0.375rem;
    font-size: 0.72rem;
    color: var(--color-primary-500);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.opp-block > button:hover {
    color: var(--color-navy);
}

.sdg-icon-badge-calendar {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.2rem;
    box-shadow: 0 1px 2px var(--color-black-10);
    object-fit: cover;
}

/* ── Month calendar cell ── */
.month-cell {
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 0.25rem;
    min-height: 5rem;
    background: var(--color-surface);
}

.month-cell.out-of-month {
    background-color: var(--color-cream);
}

.month-cell:last-child {
    border-right: none;
}

.month-cell-date {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--color-charcoal);
}

.month-cell-date.out-of-month {
    color: var(--color-muted);
}

/* ── Month opportunity pill ── */
.month-opp-btn {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 0.72rem;
    background-color: var(--color-primary-50); /* fallback; overridden inline */
    color: var(--color-primary-700);            /* fallback; overridden inline */
    border-left: 3px solid var(--color-primary-300); /* color overridden inline */
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0.25rem;
    padding: 0.125rem 0.4375rem;
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: opacity 0.15s;
}

.month-opp-btn:hover {
    opacity: 0.8;
}

/* ── Mobile overrides ── */
@media (max-width: 640px) {
    .cal-cell {
        min-height: 6rem;
    }
}