/*
 * Home Page Styles
 * Home layout, calendar sidebar, office cards, observance cards
 */

/* ==========================================================================
   Home Page Layout
   ========================================================================== */

.home-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.calendar-sidebar {
    order: -1;
}

.home-content {
    flex: 1;
}

/* ==========================================================================
   Day Navigation
   ========================================================================== */

.day-nav {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.day-nav a[role="button"] {
    padding: 0.25rem 0.75rem;
    margin: 0;
    font-size: 0.85em;
}

/* ==========================================================================
   Collect of the Day
   ========================================================================== */

.collect-of-day {
    font-size: 0.9em;
    margin: 1rem 0 0 0;
    padding: 0.75rem 1rem;
    font-style: italic;
    border-left: 3px solid var(--pico-muted-border-color);
}

.collect-of-day p {
    margin: 0;
}

/* ==========================================================================
   Commemoration Banner
   ========================================================================== */

.commemoration-banner {
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    font-size: 0.95em;
}

/* ==========================================================================
   Special Observance Cards (Ember Days, Rogation Days)
   ========================================================================== */

.observance-card {
    background: var(--pico-card-background-color);
    border-left: 4px solid var(--pico-muted-color);
}

.observance-card header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.observance-card header small {
    color: var(--pico-muted-color);
    font-weight: normal;
}

.observance-card p {
    color: var(--pico-muted-color);
    font-size: 0.9em;
    margin-bottom: 0;
}

.observance-card.ember-day {
    border-left-color: rgb(var(--color-lent));
}

.observance-card.rogation-day {
    border-left-color: rgb(var(--color-easter));
}

/* ==========================================================================
   Offices Section
   ========================================================================== */

.offices-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Suggested office highlighting */
.offices-section article.suggested-office {
    border: 2px solid var(--pico-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.offices-section article.suggested-office header::after {
    content: "Suggested";
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pico-primary);
    background: var(--pico-primary-focus);
    padding: 0.25rem 0.5rem;
    border-radius: var(--pico-border-radius);
    margin-left: auto;
}

/* Office cards on home page */
.offices-section article,
.litany-card {
    padding: 0;
}

.offices-section article header,
.litany-card header {
    padding: 1.5rem 2rem 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.offices-section article header h2,
.litany-card header h2 {
    margin: 0;
}

.offices-section article > *:not(header):not(footer),
.litany-card > *:not(header):not(footer) {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Add spacing to first content element after header */
.offices-section article > header + *,
.litany-card > header + * {
    margin-top: 1rem;
}

/* Add spacing before footer */
.offices-section article > footer,
.litany-card > footer {
    margin-top: 1rem;
}

.offices-section article footer,
.litany-card footer {
    padding: 1rem 2rem 1.5rem;
    margin: 0;
}

/* ==========================================================================
   Sunday Illustration
   ========================================================================== */

.sunday-illustration {
    margin: 1.5rem 0 0 0;
    text-align: center;
}

.sunday-illustration img {
    max-width: 100%;
    height: auto;
    border-radius: var(--pico-border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sunday-illustration figcaption {
    margin-top: 0.75rem;
    font-size: 0.9em;
    font-style: italic;
    color: var(--pico-muted-color);
}

/* ==========================================================================
   Responsive Home Layout
   ========================================================================== */

@media (min-width: 992px) {
    .home-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .calendar-sidebar {
        flex: 0 0 380px;
        position: sticky;
        top: 1rem;
        order: 0;
    }

    .home-content {
        flex: 1 1 auto;
        min-width: 0;
    }
}