/* =========================================================
   Moon Calendar
============================================================ */
.moon-phase-calendar {
    max-width: 1000px;
    margin: 2rem auto;
    text-align: center;
}

.phase-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.phase img {
    width: 100%;
    max-width: 150px;
}

.phase-label {
    font-weight: bold;
    margin-top: 0.5rem;
}

.phase-date {
    margin-top: 0.25rem;
    color: var(--muted-text);
}

/* Mobile */
@media (max-width: 800px) {

	
	.phase img {
    max-width: 75px;
	}
}



/* =====================================================
					Calendar
======================================================== */

/* =========================
   FullCalendar Dark Theme
   ========================= */

/* Container background */
#calendar {
	max-width: 1000px; /* desktop width */
	margin: 0 auto;    /* centers horizontally */
    background-color: #111; /* match site background */
    color: #eee;
    border: 1px solid #222;
    border-radius: 8px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Header row: day names (Sun, Mon, etc.) */
#calendar .fc-col-header,
#calendar .fc-col-header-cell {
    background-color: #1a1a1a; /* dark header background */
    color: #eee;               /* light text */
    border-bottom: 1px solid #222; /* subtle divider */
    font-weight: 600;
    text-transform: uppercase;
}

/* Individual header cell padding */
#calendar .fc-col-header-cell-cushion {
    padding: 0.5rem 0.25rem;
}

/* Day cells */
#calendar .fc-daygrid-day {
    background-color: #111;  /* match site background */
    border: 1px solid #222;  /* subtle grid lines */
}

/* Today highlight */
#calendar .fc-daygrid-day.fc-day-today {
    background-color: #222; /* slightly lighter for today */
}

/* Events */
#calendar .fc-event {
    background-color: #7aa2ff; /* your accent color */
    color: #111;               /* dark text for contrast */
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* Event hover effect */
#calendar .fc-event:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Event tooltip */
.fc-event-tooltip {
    background-color: #222;
    color: #eee;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    border: 1px solid #444;
    max-width: 250px;
}

/* Optional: scroll bar for long month view */
#calendar .fc-scrollgrid {
    scrollbar-width: thin;
    scrollbar-color: #555 #111;
}

#calendar .fc-scrollgrid::-webkit-scrollbar {
    width: 8px;
}

#calendar .fc-scrollgrid::-webkit-scrollbar-track {
    background: #111;
}

#calendar .fc-scrollgrid::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 4px;
}

/* Make all links/events accessible and visible */
#calendar a.fc-event {
    text-decoration: none;
    color: inherit;
}

/* Responsive for tablets */
@media (max-width: 1024px) {
    #calendar {
        max-width: 700px;
    }
}

/* Responsive for phones */
@media (max-width: 600px) {
    #calendar {
        max-width: 100%;
        font-size: 0.85rem; /* text shrink */
    }
	
	.fc .fc-toolbar-title {
        font-size: 1.05rem; /* Toolbar test shrink */
    }
}