/* ============================================================================
   CALENDAR BLOCK
   ============================================================================ */

.calendar-block {
	padding-top: var(--one-point-five-spacer);
	border-top: 1.5px solid var(--wp--preset--color--dark-gray);
    margin-bottom: var(--three-spacer);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.calendar-header h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: bold;
}

.calendar-see-more:hover {
    background-color: var(--wp--preset--color--lightest-gray);
    border-color: var(--wp--preset--color--lightest-gray);
}

.calendar-item {
    display: flex;
    align-items: center;
    gap: var(--three-spacer);
}

.calendar-item--past {
    opacity: 0.4;
}

.calendar-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--wp--preset--color--lightest-gray);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    min-width: 70px;
    text-align: center;
}

.calendar-month {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    color: var(--wp--preset--color--dark-gray);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.calendar-day {
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--wp--preset--color--off-black);
    line-height: 1;
}

.calendar-year {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    color: var(--wp--preset--color--dark-gray);
    margin-top: 0.25rem;
    line-height: 1;
}

.calendar-title {
    font-size: var(--wp--preset--font-size--large);
    font-weight: 500;
    color: var(--wp--preset--color--off-black);
    line-height: 1.4;
}

.calendar-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.calendar-badge {
    display: inline-block;
    text-decoration: none;
    font-size: var(--wp--preset--font-size--medium);
    font-family: var(--wp--preset--font-family--centra-mono), monospace;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--wp--preset--color--black);
    border-radius: 3px;
    line-height: 1.4;
}

.calendar-badge:hover {
    opacity: 0.7;
}

.calendar-edit-link {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: var(--wp--preset--font-size--small);
    font-family: var(--wp--preset--font-family--centra-mono), monospace;
    color: var(--wp--preset--color--dark-gray);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
}

.calendar-page-row--editable {
    cursor: pointer;
}

.calendar-page-row--no-district {
    background-color: var(--wp--preset--color--light-blue);
}

.calendar-page-row.calendar-page-row--no-district .cpt-col-date {
    background-color: transparent;
}

.calendar-page-row--no-district .cpt-office-link {
    background-color: var(--wp--preset--color--white);
}

.calendar-page-row--national {
    background-color: var(--wp--preset--color--light-yellow);
}

.calendar-page-row.calendar-page-row--national .cpt-col-date {
    background-color: transparent;
}

.calendar-page-row--national .cpt-office-link {
    background-color: var(--wp--preset--color--white);
}

.calendar-page-row--editable:hover {
    background-color: #f9f9f9;
}

.calendar-page-row--editable:hover .cpt-col-date {
    margin-left: 10px;
}

.calendar-page-row .cpt-col-type {
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 500;
}

.cpt-col-district,
.cpt-col-office {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.cpt-col-office {
    gap: 0.35rem;
}

.cpt-col-district {
    gap: 1rem;
}

.cpt-col-district a {
    font-size: var(--wp--preset--font-size--medium);
    font-family: var(--wp--preset--font-family--centra-mono);
    font-weight: 500;
    text-decoration: none;
}

.cpt-col-district a:hover {
    opacity: 0.7;
}

.cpt-office-link {
    font-size: var(--wp--preset--font-size--small);
    background-color: var(--wp--preset--color--lightest-gray);
    border-radius: 3px;
    padding: 3px 8px;
    font-family: var(--wp--preset--font-family--centra-mono);
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
}

.cpt-col-cycle, .cpt-col-party {
    font-size: var(--wp--preset--font-size--small);
    font-weight: normal;
    font-family: var(--wp--preset--font-family--centra-mono);
}

.calendar-page-row .cpt-col-cycle,
.calendar-page-row .cpt-col-party {
    font-weight: 500;
}

.cpt-office-link:hover {
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
}

/* ============================================================================
   FULL-PAGE CALENDAR (page-calendar.php template)
   ============================================================================ */

.calendar-full-page {
    margin-bottom: var(--six-spacer);
}

/* ── Filters ── */
.calendar-page-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.calendar-page-filters select {
    font-family: var(--wp--preset--font-family--centra-mono), monospace;
    font-size: var(--wp--preset--font-size--small);
    border: 1.5px solid var(--wp--preset--color--lightest-gray);
    border-radius: 4px;
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    cursor: pointer;
}

.calendar-page-filters select:hover, .calendar-page-filters select:focus {
    border: 1.5px solid var(--wp--preset--color--light-gray);
    outline: transparent;
}

.calendar-filter-clear {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--dark-gray);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
}

/* ── Active filter chips ── */
.calendar-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.calendar-chip-clear-all {
    font-family: var(--wp--preset--font-family--centra-mono), monospace;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    color: var(--wp--preset--color--dark-gray);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    margin-right: 0.25rem;
}

.calendar-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--wp--preset--color--lightest-gray);
    border-radius: 4px;
    padding: 0.25rem 0.6rem;
    font-size: var(--wp--preset--font-size--small);
    font-family: var(--wp--preset--font-family--centra-mono), monospace;
    color: var(--wp--preset--color--black);
    text-decoration: none;
    transition: background-color 0.15s;
}

.calendar-filter-chip:hover {
    background-color: var(--wp--preset--color--light-gray);
}

.calendar-filter-chip .chip-heading {
    font-family: var(--wp--preset--font-family--centra-mono), monospace;
    font-weight: 600;
    color: var(--wp--preset--color--dark-gray);
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--x-small);
}

.calendar-filter-chip .chip-remove {
    font-size: 1rem;
    line-height: 1;
    color: var(--wp--preset--color--dark-gray);
    margin-left: 0.1rem;
}

/* ── Grid columns ── */
.calendar-page-table {
    --cpt-cols: 80px 1fr 1fr 1fr 110px 53px;
}

/* ── Header row ── */
.calendar-page-head {
    display: grid;
    grid-template-columns: var(--cpt-cols);
    gap: 0 1.5rem;
    padding: 0.5rem 0;
    font-family: var(--wp--preset--font-family--centra-mono), monospace;
    font-size: var(--wp--preset--font-size--small);
    font-weight: normal;
    text-transform: uppercase;
    color: var(--wp--preset--color--gray);
}

/* ── Year header ── */
.calendar-page-year-header {
    grid-column: 1 / -1;
    color: var(--wp--preset--color--black);
    padding: .75rem 0 0.5rem;
    border-top: 1.5px solid var(--wp--preset--color--dark-gray);
}

/* ── Data rows ── */
.calendar-page-row {
    display: grid;
    grid-template-columns: var(--cpt-cols);
    gap: 0 1.5rem;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--wp--preset--color--lightest-gray);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    color: var(--wp--preset--color--black);
}

/* ── Date cell ── */
.calendar-page-row .cpt-col-date {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--wp--preset--color--lightest-gray);
    border-radius: 10px;
    max-width: 50px;
    height: 60px;
    gap: 0rem;
}

.calendar-page-row .cpt-month {
    font-family: var(--wp--preset--font-family--centra-no2), sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    color: var(--wp--preset--color--dark-gray);
    text-transform: uppercase;
}

.calendar-page-row .cpt-day {
    font-family: var(--wp--preset--font-family--centra-no2), sans-serif;
    font-weight: 700;
    font-size: var(--wp--preset--font-size--large);
}

/* ── Pagination ── */
.calendar-page-pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.calendar-page-pagination-info {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--dark-gray);
}

.calendar-page-no-results {
    color: var(--wp--preset--color--dark-gray);
    font-family: var(--wp--preset--font-family--centra-mono), monospace;
    font-size: var(--wp--preset--font-size--medium) !important;
    padding: 1rem 2em;
    background-color: var(--wp--preset--color--lightest-gray);
    border-radius: 5px;
}

/* ── Mobile: card layout ── */
@media (max-width: 1024px) {
    .calendar-page-head {
        display: none;
    }

    .calendar-page-year-header {
        padding-top: 1.5rem;
    }

    .calendar-page-row {
        grid-template-columns: 1fr 1fr;
        gap: 1rem 2rem;
        padding: 1.5rem 0;
        align-items: flex-start;
    }

    .calendar-page-row [data-label]::before {
        content: attr(data-label);
        display: block;
        font-family: var(--wp--preset--font-family--centra-mono), monospace;
        font-size: var(--wp--preset--font-size--small);
        font-weight: normal;
        text-transform: uppercase;
        color: var(--wp--preset--color--gray);
        letter-spacing: 0.04em;
        margin-bottom: 0.15rem;
    }

    .calendar-page-row .cpt-col-district::before,
    .calendar-page-row .cpt-col-office::before {
        flex-basis: 100%;
    }

    .calendar-page-row .cpt-col-date {
        grid-column: 1 / -1;
        gap: 0rem;
        align-items: center;
        max-width: 70px;
        height: 80px;
    }

    .calendar-page-row .cpt-col-date::before {
        display: none;
    }

    .calendar-page-row .cpt-day {
        font-size: 2rem;
    }

    .calendar-page-row .cpt-month {
        font-size: var(--wp--preset--font-size--small);
    }
}