/*
 * Flavor Calendar Sync — Frontend Stylesheet
 *
 * Zero JavaScript. All interactions use CSS-only techniques:
 *  - Month grid:       CSS Grid with custom property for first-weekday offset
 *  - Event modals:     CSS :target pseudo-class
 *  - Subscribe panel:  HTML5 <details>/<summary>
 *  - View toggle:      Plain anchor links with is-active class
 *
 * Custom properties
 * ─────────────────
 *  --fcs-primary       Brand colour (defaults to sunset rust)
 *  --fcs-radius        Border radius
 *  --fcs-font          Font stack
 *
 * Themes (sunsetDetroit palette)
 * ──────────────────────────────
 *  Default:          Sunset rust on warm neutrals (matches sunsetDetroit theme)
 *  .fcs-sandstone:   Soft sandstone accent
 *  .fcs-sage:        Sage green accent
 *  .fcs-mint:        Cool pastel blue accent
 *
 * All sizes use relative units (em / rem) so the calendar scales
 * gracefully inside any theme.
 */

/* ── Custom properties (sunsetDetroit: sunset rust) ──────────────── */
.fcs-calendar,
.fcs-atc,
.fcs-subscribe {
    --fcs-primary:     #d8613c;
    --fcs-primary-hover: #c04e2c;
    --fcs-nc-blue:     #0082c9;
    --fcs-ext-gray:    #888888;
    --fcs-today-bg:    #fdf0eb;
    --fcs-border:      #cfcabe;
    --fcs-text:        #111111;
    --fcs-muted:       #636363;
    --fcs-bg:          #f9f9f9;
    --fcs-surface:     #ffffff;
    --fcs-radius:      .33rem;
    --fcs-shadow:      0 4px 20px rgba(0,0,0,.12);
    --fcs-font:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    --fcs-font-heading: "Cardo", "Iowan Old Style", "Apple Garamond", "Baskerville", "Times New Roman", serif;
}

/* ── Theme: Sandstone ────────────────────────────────────────────── */
.fcs-calendar.fcs-sandstone,
.fcs-sandstone .fcs-atc,
.fcs-sandstone .fcs-subscribe {
    --fcs-primary:       #c2a990;
    --fcs-primary-hover: #a8906e;
    --fcs-today-bg:      #f7f0e8;
}

/* ── Theme: Sage ─────────────────────────────────────────────────── */
.fcs-calendar.fcs-sage,
.fcs-sage .fcs-atc,
.fcs-sage .fcs-subscribe {
    --fcs-primary:       #7a9e6c;
    --fcs-primary-hover: #607e54;
    --fcs-today-bg:      #edf4e9;
}

/* ── Theme: Mint ─────────────────────────────────────────────────── */
.fcs-calendar.fcs-mint,
.fcs-mint .fcs-atc,
.fcs-mint .fcs-subscribe {
    --fcs-primary:       #8aa3a1;
    --fcs-primary-hover: #6d8886;
    --fcs-today-bg:      #ecf1f0;
}

/* ── Calendar wrapper ─────────────────────────────────────────────── */
.fcs-calendar {
    font-family:    var(--fcs-font);
    color:          var(--fcs-text);
    max-width:      100%;
    margin:         0 auto;
    container-type: inline-size;
}

.fcs-calendar__title {
    font-family: var(--fcs-font-heading);
}

/* ── Month navigation ─────────────────────────────────────────────── */
.fcs-calendar__nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   1rem;
    gap:             .5rem;
}

.fcs-calendar__title {
    font-size:   1.25rem;
    font-weight: 600;
    margin:      0;
    text-align:  center;
    flex:        1;
}

.fcs-nav__prev,
.fcs-nav__next {
    display:         inline-flex;
    align-items:     center;
    gap:             .25rem;
    padding:         .35rem .75rem;
    border:          1px solid var(--fcs-border);
    border-radius:   var(--fcs-radius);
    text-decoration: none;
    color:           var(--fcs-text);
    font-size:       .875rem;
    transition:      background .15s;
}
.fcs-nav__prev:hover,
.fcs-nav__next:hover {
    background: var(--fcs-today-bg);
    border-color: var(--fcs-primary);
}

/* ── Action bar (Add Event + View toggle) ────────────────────────── */
.fcs-action-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   .75rem;
    gap:             .5rem;
}

.fcs-btn--add {
    display:         inline-flex;
    align-items:     center;
    gap:             .25rem;
    padding:         .35rem .8rem;
    background:      var(--fcs-primary);
    color:           #fff;
    border:          1px solid var(--fcs-primary);
    border-radius:   var(--fcs-radius);
    font-size:       .8125rem;
    font-weight:     600;
    text-decoration: none;
    transition:      background .15s;
    white-space:     nowrap;
}
.fcs-btn--add:hover {
    background: var(--fcs-primary-hover);
    border-color: var(--fcs-primary-hover);
    color: #fff;
    text-decoration: none;
}

/* ── View toggle ──────────────────────────────────────────────────── */
.fcs-view-toggle {
    display:         flex;
    gap:             .25rem;
    justify-content: flex-end;
    margin-bottom:   .75rem;
}

.fcs-toggle {
    padding:         .3rem .8rem;
    border:          1px solid var(--fcs-border);
    border-radius:   var(--fcs-radius);
    font-size:       .8125rem;
    text-decoration: none;
    color:           var(--fcs-muted);
    transition:      all .15s;
}
.fcs-toggle.is-active {
    background:  var(--fcs-primary);
    border-color: var(--fcs-primary);
    color:        #fff;
}

/* ── Month grid ───────────────────────────────────────────────────── */
.fcs-month-grid {
    border:        1px solid var(--fcs-border);
    border-radius: var(--fcs-radius);
    overflow:      hidden;
}

.fcs-month-grid__headers {
    display:            grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background:         var(--fcs-today-bg);
    border-bottom:      1px solid var(--fcs-border);
}

.fcs-month-grid__header {
    padding:    .5rem;
    text-align: center;
    font-size:  .75rem;
    font-weight: 600;
    color:      var(--fcs-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.fcs-month-grid__body {
    display:               grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Push first cell to the correct weekday column (Mon=1 … Sun=7) */
.fcs-month-grid__cell:first-child {
    grid-column-start: var(--fcs-first-weekday);
}

.fcs-month-grid__cell {
    min-height:    90px;
    padding:       .4rem;
    border-right:  1px solid var(--fcs-border);
    border-bottom: 1px solid var(--fcs-border);
    overflow:      hidden;
    min-width:     0;
}
.fcs-month-grid__cell:nth-child(7n) { border-right: none; }

.fcs-month-grid__cell.is-today {
    background: var(--fcs-today-bg);
}

.fcs-month-grid__day-number {
    display:     block;
    font-size:   .8125rem;
    font-weight: 500;
    color:       var(--fcs-muted);
    margin-bottom: .2rem;
    line-height:  1;
}
.fcs-month-grid__cell.is-today .fcs-month-grid__day-number {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           1.6em;
    height:          1.6em;
    background:      var(--fcs-primary);
    color:           #fff;
    border-radius:   50%;
    font-weight:     700;
}

.fcs-month-grid__event {
    display:         block;
    font-size:       .6875rem;
    color:           #fff;
    background:      var(--fcs-primary);
    border-radius:   3px;
    padding:         2px 5px;
    margin-bottom:   2px;
    text-decoration: none;
    overflow-wrap:   break-word;
    word-break:      break-word;
    hyphens:         auto;
    line-height:     1.3;
    transition:      opacity .15s;
}
.fcs-month-grid__event:hover { opacity: .85; color: #fff; }

/* ── List view ────────────────────────────────────────────────────── */
.fcs-event-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.fcs-event-list__empty {
    padding:   2rem;
    text-align: center;
    color:     var(--fcs-muted);
}

.fcs-event-list__item {
    border-bottom: 1px solid var(--fcs-border);
}
.fcs-event-list__item:last-child { border-bottom: none; }

.fcs-event-list__link {
    display:    flex;
    align-items: center;
    gap:        .75rem;
    padding:    .75rem .5rem;
    text-decoration: none;
    color:      var(--fcs-text);
    transition: background .1s;
    flex-wrap:  wrap;
}
.fcs-event-list__link:hover { background: var(--fcs-today-bg); }

.fcs-event-list__dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    flex-shrink:   0;
}

.fcs-event-list__date {
    font-size:   .8125rem;
    font-weight: 600;
    color:       var(--fcs-muted);
    min-width:   5rem;
}

.fcs-event-list__time {
    font-size: .8125rem;
    color:     var(--fcs-muted);
    min-width: 6rem;
}

.fcs-event-list__title {
    font-weight:   500;
    flex:          1;
    overflow-wrap: break-word;
    word-break:    break-word;
    min-width:     0;
}

.fcs-event-list__location {
    font-size: .8125rem;
    color:     var(--fcs-muted);
    width:     100%;
    padding-left: 1.75rem;
}

/* ── Modal (CSS :target) ──────────────────────────────────────────── */
.fcs-modal {
    display:  none;  /* hidden by default */
    position: fixed;
    inset:    0;
    z-index:  9999;
    align-items:     center;
    justify-content: center;
}
.fcs-modal:target {
    display: flex;
}

.fcs-modal__overlay {
    position: absolute;
    inset:    0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
}

.fcs-modal__content {
    position:      relative;
    z-index:       1;
    background:    var(--fcs-surface);
    border-radius: calc(var(--fcs-radius) * 1.5);
    box-shadow:    var(--fcs-shadow);
    max-width:     520px;
    width:         calc(100% - 2rem);
    max-height:    90vh;
    overflow-y:    auto;
    padding:       0;
    animation:     fcs-modal-in .2s ease;
}

@keyframes fcs-modal-in {
    from { opacity: 0; transform: translateY(1rem) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.fcs-modal__close {
    position:        absolute;
    top:             .75rem;
    right:           .75rem;
    width:           2rem;
    height:          2rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    background:      var(--fcs-today-bg);
    text-decoration: none;
    color:           var(--fcs-muted);
    font-size:       1rem;
    line-height:     1;
    z-index:         2;
    transition:      background .15s;
}
.fcs-modal__close:hover { background: var(--fcs-border); }

.fcs-modal__header {
    padding:       1.25rem 1.25rem .75rem;
}

.fcs-modal__header h3 {
    font-size:    1.125rem;
    font-weight:  600;
    margin:       0 0 .35rem;
    padding-right: 2rem;
}

.fcs-modal__meta,
.fcs-modal__location {
    font-size: .875rem;
    color:     var(--fcs-muted);
    margin:    .25rem 0 0;
}

.fcs-modal__body {
    padding:     0 1.25rem .75rem;
    font-size:   .9375rem;
    line-height: 1.6;
}

.fcs-modal__footer {
    padding:     .75rem 1.25rem 1.25rem;
    border-top:  1px solid var(--fcs-border);
}

/* ── Legend ───────────────────────────────────────────────────────── */
.fcs-legend {
    display:   flex;
    gap:       1rem;
    flex-wrap: wrap;
    margin-top: .75rem;
    font-size: .8125rem;
    color:     var(--fcs-muted);
}

.fcs-legend__item {
    display:     flex;
    align-items: center;
    gap:         .35rem;
}

.fcs-legend__dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    flex-shrink:   0;
}

/* ── Subscribe panel (HTML5 <details>) ────────────────────────────── */
.fcs-subscribe {
    margin-top:    1rem;
    border:        1px solid var(--fcs-border);
    border-radius: var(--fcs-radius);
}

.fcs-subscribe summary {
    padding:       .75rem 1rem;
    cursor:        pointer;
    font-weight:   600;
    font-size:     .9375rem;
    list-style:    none;
    user-select:   none;
}
.fcs-subscribe summary::-webkit-details-marker { display: none; }
.fcs-subscribe[open] summary { border-bottom: 1px solid var(--fcs-border); }

.fcs-subscribe__panel {
    padding: 1rem;
}

/* ── Add to Calendar widget ───────────────────────────────────────── */
.fcs-atc__heading {
    font-size:    .875rem;
    font-weight:  600;
    margin:       0 0 .6rem;
    color:        var(--fcs-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.fcs-atc__list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-wrap:  wrap;
    gap:        .5rem;
}

.fcs-atc__btn {
    display:         inline-flex;
    align-items:     center;
    gap:             .4rem;
    padding:         .45rem .9rem;
    border:          1px solid var(--fcs-border);
    border-radius:   var(--fcs-radius);
    text-decoration: none;
    font-size:       .8125rem;
    font-weight:     500;
    color:           var(--fcs-text);
    background:      var(--fcs-surface);
    white-space:     nowrap;
    transition:      background .15s, border-color .15s;
}
.fcs-atc__btn:hover                { background: var(--fcs-today-bg); }
.fcs-atc__btn--google:hover        { border-color: #4285F4; }
.fcs-atc__btn--outlook:hover       { border-color: #0078D4; }
.fcs-atc__btn--webcal:hover        { border-color: #555; }
.fcs-atc__btn--ical:hover          { border-color: #aaa; }

.fcs-atc__url-copy {
    display:        flex;
    flex-direction: column;
    gap:            .25rem;
}

.fcs-atc__url-input {
    font-family: monospace;
    font-size:   .75rem;
    padding:     .35rem .5rem;
    border:      1px solid var(--fcs-border);
    border-radius: var(--fcs-radius);
    background:  var(--fcs-bg);
    color:       var(--fcs-text);
    width:       100%;
    cursor:      text;
}

.fcs-atc__url-hint {
    font-size:   .75rem;
    color:       var(--fcs-muted);
}

.fcs-atc__note {
    font-size:  .8125rem;
    color:      var(--fcs-muted);
    margin-top: .75rem;
}

/* ── Event Grid View ──────────────────────────────────────────────── */
.fcs-event-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   1.5rem;
}

.fcs-event-grid__empty {
    grid-column:  1 / -1;
    text-align:   center;
    padding:      2rem;
    color:        var(--fcs-muted);
}

.fcs-event-card {
    border-radius:  calc(var(--fcs-radius) * 1.5);
    overflow:       hidden;
    box-shadow:     0 2px 8px rgba(0,0,0,.08);
    background:     var(--fcs-surface);
    transition:     box-shadow .2s, transform .2s;
}
.fcs-event-card:hover {
    box-shadow: var(--fcs-shadow);
    transform:  translateY(-2px);
}

.fcs-event-card__link {
    display:         block;
    text-decoration: none;
    color:           var(--fcs-text);
}

.fcs-event-card__image {
    aspect-ratio:  8 / 5;
    overflow:      hidden;
    background:    var(--fcs-today-bg);
}
.fcs-event-card__image img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
}

.fcs-event-card__body {
    padding:  1rem 1.125rem 1.125rem;
}

.fcs-event-card__category {
    display:       inline-block;
    font-size:     .6875rem;
    font-weight:   600;
    color:         #fff;
    padding:       .15rem .5rem;
    border-radius: 1rem;
    margin-bottom: .4rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.fcs-event-card__title {
    font-size:     1rem;
    font-weight:   600;
    margin:        0 0 .35rem;
    line-height:   1.3;
    overflow-wrap: break-word;
    word-break:    break-word;
}

.fcs-event-card__date {
    display:    block;
    font-size:  .8125rem;
    color:      var(--fcs-muted);
    margin-bottom: .2rem;
}

.fcs-event-card__location {
    display:    block;
    font-size:  .8125rem;
    color:      var(--fcs-muted);
}

/* ── Responsive ───────────────────────────────────────────────────── */

/* Narrow month grid: collapse day-number row, show compact events */
@container (max-width: 540px) {
    .fcs-month-grid__cell {
        min-height: 56px;
        padding:    .25rem;
    }
    .fcs-month-grid__header {
        font-size: .625rem;
        padding:   .3rem .1rem;
    }
    .fcs-month-grid__event {
        font-size: .5625rem;
        padding:   1px 3px;
    }
}

/* Below 480px: switch month grid to a list-like display */
@container (max-width: 480px) {
    .fcs-month-grid__headers { display: none; }
    .fcs-month-grid__body {
        grid-template-columns: 1fr;
    }
    .fcs-month-grid__cell:first-child {
        grid-column-start: auto;
    }
    .fcs-month-grid__cell {
        min-height:   auto;
        border-right: none;
        padding:      .5rem;
    }
    .fcs-month-grid__cell:not(.has-events) { display: none; }
}

/* Stack nav on very small screens */
@media (max-width: 420px) {
    .fcs-calendar__nav {
        flex-direction: column;
    }
    .fcs-atc__list {
        flex-direction: column;
    }
    .fcs-event-list__link {
        flex-direction: column;
        align-items:    flex-start;
        gap:            .25rem;
    }
}

/* ── Event Photo Gallery ─────────────────────────────────────────── */
.fcs-gallery {
    --fcs-gallery-columns: 3;
    font-family: var(--fcs-font, sans-serif);
}

.fcs-gallery__empty {
    text-align: center;
    padding:    2rem;
    color:      var(--fcs-muted, #636363);
}

.fcs-gallery__event {
    margin-bottom: 2.5rem;
}

.fcs-gallery__event-header {
    display:       flex;
    align-items:   baseline;
    gap:           1rem;
    flex-wrap:     wrap;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--fcs-primary, #d8613c);
}

.fcs-gallery__event-title {
    font-size:   1.25rem;
    font-weight: 700;
    margin:      0;
}
.fcs-gallery__event-title a {
    color:           inherit;
    text-decoration: none;
}
.fcs-gallery__event-title a:hover {
    color: var(--fcs-primary, #d8613c);
}

.fcs-gallery__event-meta {
    font-size: .875rem;
    color:     var(--fcs-muted, #636363);
}

.fcs-gallery__grid {
    display:               grid;
    grid-template-columns: repeat(var(--fcs-gallery-columns), 1fr);
    gap:                   .5rem;
}

.fcs-gallery__thumb {
    display:       block;
    aspect-ratio:  1;
    overflow:      hidden;
    border-radius: var(--fcs-radius, .33rem);
    background:    var(--fcs-bg, #f9f9f9);
}
.fcs-gallery__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .2s;
}
.fcs-gallery__thumb:hover img {
    transform: scale(1.05);
}

/* ── Gallery Lightbox (CSS :target) ──────────────────────────────── */
.fcs-lightbox {
    display:  none;
    position: fixed;
    inset:    0;
    z-index:  10000;
    align-items:     center;
    justify-content: center;
}
.fcs-lightbox:target {
    display: flex;
}

.fcs-lightbox__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, .85);
}

.fcs-lightbox__content {
    position:   relative;
    z-index:    1;
    max-width:  90vw;
    max-height: 90vh;
    display:    flex;
    align-items:     center;
    justify-content: center;
}
.fcs-lightbox__content img {
    max-width:     90vw;
    max-height:    90vh;
    object-fit:    contain;
    border-radius: .25rem;
    box-shadow:    0 4px 30px rgba(0, 0, 0, .4);
}

.fcs-lightbox__close {
    position:        fixed;
    top:             1rem;
    right:           1rem;
    z-index:         2;
    width:           2.5rem;
    height:          2.5rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    background:      rgba(255, 255, 255, .15);
    color:           #fff;
    text-decoration: none;
    font-size:       1.25rem;
    transition:      background .15s;
}
.fcs-lightbox__close:hover {
    background: rgba(255, 255, 255, .3);
    color:      #fff;
}

.fcs-lightbox__nav {
    position:        fixed;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         2;
    width:           3rem;
    height:          3rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    background:      rgba(255, 255, 255, .15);
    color:           #fff;
    text-decoration: none;
    font-size:       2rem;
    line-height:     1;
    transition:      background .15s;
}
.fcs-lightbox__nav:hover {
    background: rgba(255, 255, 255, .3);
    color:      #fff;
}
.fcs-lightbox__prev { left:  1rem; }
.fcs-lightbox__next { right: 1rem; }

/* Gallery responsive */
@media (max-width: 768px) {
    .fcs-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .fcs-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .25rem;
    }
    .fcs-gallery__event-header {
        flex-direction: column;
        gap: .25rem;
    }
}