/**
 * LRE Event Occurrences Styles
 * 
 * Styles for [lre_occurrences] shortcode and Bricks element
 */

/* ==========================================================================
   List Display
   ========================================================================== */

.lre-occurrences-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Layout variations */
.lre-layout-vertical .lre-occurrences-list {
    flex-direction: column;
}

.lre-layout-horizontal .lre-occurrences-list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

/* List item */
.lre-occurrence-item {
    /* Default no border - controlled via Bricks */
    border-bottom-style: none;
    border-bottom-width: 0;
    border-bottom-color: transparent;
}

/* Horizontal layout item spacing */
.lre-layout-horizontal .lre-occurrence-item {
    border-bottom: none !important;
}

.lre-layout-horizontal .lre-occurrence-item:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1em;
    background: var(--lre-list-separator-color, rgba(0, 0, 0, 0.15));
    margin: 0 0.75em;
    vertical-align: middle;
}

.lre-occurrence-weekday {
    font-weight: 600;
}

.lre-occurrence-date {
    /* Base date styling */
}

.lre-occurrence-time {
    color: var(--lre-time-color, #666);
    font-size: 0.9em;
}

.lre-occurrence-time::before {
    content: "•";
    margin: 0 0.5em;
    opacity: 0.5;
}

.lre-occurrence-link {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
    display: block;
}

.lre-layout-horizontal .lre-occurrence-link {
    display: inline;
}

.lre-occurrence-link:hover {
    opacity: 0.7;
}

/* ==========================================================================
   Mini Calendar Display - Month Grid
   ========================================================================== */

.lre-occurrences-mini-calendar {
    display: flex;
    flex-direction: column;
}

/* Individual month container */
.lre-month-calendar {
    background: var(--lre-cal-bg, #ffffff);
    border-radius: var(--lre-cal-radius, 12px);
    box-shadow: var(--lre-cal-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
    overflow: hidden;
    width: 320px;
    max-width: 100%;
}

/* Month header with navigation */
.lre-month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--lre-cal-header-bg, transparent);
    border-bottom: 1px solid var(--lre-cal-separator-color, rgba(0, 0, 0, 0.08));
}

.lre-month-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--lre-cal-header-color, #1a1a1a);
    margin: 0;
    line-height: 1.3;
}

.lre-month-year {
    font-weight: 400;
    color: var(--lre-cal-year-color, #666);
    margin-left: 0.35em;
}

/* Navigation buttons */
.lre-mini-cal-nav {
    display: flex;
    gap: 4px;
}

.lre-mini-cal-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: var(--lre-cal-nav-bg, transparent);
    color: var(--lre-cal-nav-color, #666);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lre-mini-cal-nav button:hover {
    background: var(--lre-cal-nav-hover-bg, rgba(0, 0, 0, 0.05));
    color: var(--lre-cal-nav-hover-color, #1a1a1a);
}

.lre-mini-cal-nav button:active {
    transform: scale(0.95);
}

.lre-mini-cal-nav .lre-nav-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.lre-mini-cal-nav button svg {
    width: 18px;
    height: 18px;
}

/* Calendar grid */
.lre-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0.75rem 1rem 1rem;
    gap: 2px;
}

/* Weekday headers */
.lre-weekday-header {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--lre-cal-weekday-color, #999);
    text-align: center;
    padding: 0.5rem 0;
}

/* Day cells */
.lre-day-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    font-size: 0.9375rem;
    color: var(--lre-cal-day-color, #333);
    border-radius: var(--lre-cal-day-radius, 8px);
    transition: all 0.15s ease;
}

.lre-day-cell.lre-day-empty {
    color: transparent;
}

.lre-day-cell.lre-day-today {
    background: var(--lre-cal-today-bg, #f0f0f0);
    font-weight: 600;
}

.lre-day-cell.lre-day-today .lre-day-number {
    color: var(--lre-cal-today-color, #1a1a1a);
}

/* Day number */
.lre-day-number {
    position: relative;
    z-index: 1;
    line-height: 1;
    font-size: 0.9375rem;
}

/* Occurrence dot indicator - fixed 6px size */
.lre-day-cell.lre-has-occurrence::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background: var(--lre-cal-dot-color, #4f6bed);
    border-radius: 50%;
    z-index: 2;
}

/* Occurrence date styling */
.lre-day-cell.lre-has-occurrence {
    cursor: pointer;
}

.lre-day-cell.lre-has-occurrence:hover {
    background: var(--lre-cal-hover-bg, #f5f5f5);
}

/* Linked occurrence */
a.lre-day-cell {
    text-decoration: none;
    color: inherit;
}

a.lre-day-cell.lre-has-occurrence:hover {
    background: var(--lre-cal-hover-bg, rgba(79, 107, 237, 0.1));
}

/* ==========================================================================
   Color Theme Variations
   ========================================================================== */

/* Dark theme support */
.lre-occurrences-element.lre-theme-dark .lre-month-calendar {
    --lre-cal-bg: #1e1e1e;
    --lre-cal-header-color: #ffffff;
    --lre-cal-year-color: #999;
    --lre-cal-weekday-color: #666;
    --lre-cal-day-color: #e0e0e0;
    --lre-cal-today-bg: #333;
    --lre-cal-today-color: #ffffff;
    --lre-cal-hover-bg: #2a2a2a;
    --lre-cal-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    --lre-cal-separator-color: rgba(255, 255, 255, 0.1);
    --lre-cal-nav-color: #999;
    --lre-cal-nav-hover-bg: rgba(255, 255, 255, 0.1);
    --lre-cal-nav-hover-color: #ffffff;
}

/* ==========================================================================
   Bricks Element Specific - List Layout
   ========================================================================== */

.lre-occurrences-element.lre-layout-horizontal .lre-occurrences-list {
    flex-direction: row;
    flex-wrap: wrap;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.lre-occurrences-empty {
    color: var(--lre-empty-color, #999);
    font-style: italic;
    padding: 1rem;
    text-align: center;
}