/* ==========================================================================
   THE CHURCH CALENDAR — monthly landscape glass calendar
   Public layer: holidays + biblical feasts. Member layer: private days.
   The backdrop changes between twelve original landscapes as the viewer
   moves month to month (body[data-month="1|2|...|12"]).
   ========================================================================== */

/* ---------------------------------------------------------- seasonal sky */
.calendar-body [hidden]{display:none!important}

.season-backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden}
.season-backdrop .season-sky,
.season-backdrop .month-art,
.season-backdrop .season-veil{position:absolute;inset:0}

.season-sky{background:radial-gradient(120% 90% at 50% -10%,#12352a 0%,#0a1f18 45%,#06130d 100%)}

.month-art{background-repeat:no-repeat;background-size:cover;background-position:center bottom}

/* Twelve original monthly landscapes — no human figures or faces. */
body[data-month="1"] .month-art{background-image:url("../assets/calendar/calendar-01-january.webp")}
body[data-month="2"] .month-art{background-image:url("../assets/calendar/calendar-02-february.webp")}
body[data-month="3"] .month-art{background-image:url("../assets/calendar/calendar-03-march.webp")}
body[data-month="4"] .month-art{background-image:url("../assets/calendar/calendar-04-april.webp")}
body[data-month="5"] .month-art{background-image:url("../assets/calendar/calendar-05-may.webp")}
body[data-month="6"] .month-art{background-image:url("../assets/calendar/calendar-06-june.webp")}
body[data-month="7"] .month-art{background-image:url("../assets/calendar/calendar-07-july.webp")}
body[data-month="8"] .month-art{background-image:url("../assets/calendar/calendar-08-august.webp")}
body[data-month="9"] .month-art{background-image:url("../assets/calendar/calendar-09-september.webp")}
body[data-month="10"] .month-art{background-image:url("../assets/calendar/calendar-10-october.webp")}
body[data-month="11"] .month-art{background-image:url("../assets/calendar/calendar-11-november.webp")}
body[data-month="12"] .month-art{background-image:url("../assets/calendar/calendar-12-december.webp")}

.season-veil{background:linear-gradient(180deg,rgba(6,19,13,.55) 0%,rgba(6,19,13,.72) 55%,rgba(6,19,13,.9) 100%)}

/* -------------------------------------------------------------- page frame */
.calendar-page{max-width:1180px;margin:0 auto;padding:34px 20px 90px}

.calendar-intro{text-align:center;margin:26px auto 30px;max-width:760px}
.calendar-intro .eyebrow{color:var(--gold-pale);letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;margin:0 0 10px}
.calendar-intro h1{font-family:var(--serif);font-size:clamp(2.1rem,5vw,3.2rem);margin:0 0 14px;color:var(--ink)}
.calendar-intro h1 span{color:var(--gold)}
.calendar-intro p{color:var(--muted);line-height:1.65;margin:0}
.calendar-intro a{color:var(--gold-pale)}

/* ------------------------------------------------------------------ shell */
.calendar-shell{border-radius:var(--radius);padding:22px clamp(12px,3vw,30px) 26px;background:var(--glass-strong);border:1px solid var(--glass-border);box-shadow:var(--shadow)}

.calendar-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.calendar-toolbar button{background:var(--glass);border:1px solid var(--glass-border);color:var(--ink);border-radius:var(--radius-sm);padding:10px 16px;font:600 1rem var(--sans);cursor:pointer;transition:background var(--speed)}
.calendar-toolbar button:hover{background:var(--emerald-soft)}
.calendar-title{flex:1;text-align:center}
.calendar-title h2{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem);margin:0;color:var(--ink)}
.calendar-title p{margin:2px 0 0;color:var(--gold-pale);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase}
.today-button{white-space:nowrap}

.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.calendar-weekdays span{text-align:center;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 0}

.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calendar-cell{position:relative;height:84px;min-height:0;overflow:hidden;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);padding:8px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:background var(--speed),border-color var(--speed);text-align:left;font:inherit;color:inherit}
.calendar-cell:hover{background:var(--emerald-soft);border-color:var(--glass-border)}
.calendar-cell.is-empty{background:transparent;border-color:transparent;cursor:default;pointer-events:none}
.calendar-cell.is-today{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 6px 24px var(--gold-glow)}
.cell-number{font:600 .95rem var(--sans);color:var(--ink)}
.calendar-cell.is-today .cell-number{color:var(--gold-pale)}
.cell-dots{display:flex;gap:4px;flex-wrap:wrap;max-width:56px}
.cell-dot{width:7px;height:7px;border-radius:50%}
.cell-dot.kind-holiday{background:var(--gold)}
.cell-dot.kind-feast{background:var(--emerald)}
.cell-dot.kind-remembrance{background:#b58ea0}
.cell-dot.kind-personal{background:#d98aa3}
.cell-count{position:absolute;right:7px;bottom:6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:var(--muted);font-size:.68rem}

.calendar-legend{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:18px}
.legend-item{font-size:.78rem;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.legend-item::before{content:"";width:10px;height:10px;border-radius:3px;display:inline-block}
.legend-holiday::before{background:var(--gold)}
.legend-feast::before{background:var(--emerald)}
.legend-remembrance::before{background:#b58ea0}
.legend-personal::before{background:linear-gradient(135deg,var(--gold),#d98aa3)}

/* -------------------------------------------------------------- below fold */
.calendar-below{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.month-list,.personal-panel{border-radius:var(--radius);padding:22px 24px;background:var(--glass-strong);border:1px solid var(--glass-border)}
.month-list h3,.personal-panel h3{font-family:var(--serif);margin:0 0 14px;color:var(--gold-pale);font-size:1.25rem}
.month-list ul,#personal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.month-list li,#personal-list li{display:flex;gap:12px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px}
.month-list .day-date{font:700 .85rem var(--sans);color:var(--gold);min-width:56px}
.month-list .day-name{color:var(--ink);font-size:.95rem}
.month-list .day-meaning{display:block;color:var(--muted);font-size:.8rem;margin-top:2px;line-height:1.5}
.month-list .empty-month{color:var(--muted);border:none}

.personal-hint{color:var(--muted);line-height:1.65;font-size:.95rem}
.personal-signin{display:inline-block;margin-top:8px;color:var(--gold-pale);font-weight:600}

#personal-form{display:flex;flex-direction:column;gap:12px}
#personal-form label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:.85rem}
#personal-form small{color:var(--muted);font-weight:400}
#personal-form input[type=text],#personal-form input[type=number],#personal-form select,#personal-form textarea{background:rgba(255,255,255,.08);border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--ink);padding:9px 11px;font:400 .95rem var(--sans)}
#personal-form textarea{resize:vertical}
.personal-date-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px}
.personal-repeat{flex-direction:row!important;align-items:center;gap:8px!important;color:var(--ink)!important;font-size:.9rem!important}
.personal-colors{border:none;margin:0;padding:0;display:flex;gap:10px;align-items:center}
.personal-colors legend{color:var(--muted);font-size:.85rem;padding:0;margin-bottom:6px;float:left;margin-right:12px}
.personal-colors label{flex-direction:row!important;cursor:pointer}
.personal-colors input{position:absolute;opacity:0;pointer-events:none}
.swatch{width:22px;height:22px;border-radius:50%;display:inline-block;border:2px solid transparent;transition:transform var(--speed)}
.personal-colors input:checked + .swatch{border-color:var(--ink);transform:scale(1.15)}
.swatch-gold{background:var(--gold)}
.swatch-emerald{background:var(--emerald)}
.swatch-rose{background:#d98aa3}
.swatch-sky{background:#7fb2d9}
.personal-actions{display:flex;gap:10px}
.personal-actions button{background:var(--gold);border:none;color:#231a08;border-radius:var(--radius-sm);padding:11px 18px;font:700 .95rem var(--sans);cursor:pointer}
.personal-actions #personal-cancel{background:var(--glass);color:var(--ink);border:1px solid var(--glass-border);font-weight:600}
.personal-status{margin:0;min-height:1.2em;color:var(--gold-pale);font-size:.85rem}

#personal-list{margin-top:18px}
#personal-list .personal-when{font:700 .85rem var(--sans);color:var(--gold);min-width:56px}
#personal-list .personal-what{flex:1;color:var(--ink);font-size:.95rem}
#personal-list .personal-what small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
#personal-list .personal-tools{display:flex;gap:6px}
#personal-list .personal-tools button{background:var(--glass);border:1px solid var(--glass-border);color:var(--muted);border-radius:8px;padding:4px 9px;font-size:.75rem;cursor:pointer}
#personal-list .personal-tools button:hover{color:var(--ink)}

.calendar-note{max-width:760px;margin:26px auto 0;text-align:center;color:var(--muted);font-size:.85rem;line-height:1.7}

/* -------------------------------------------------------------- day sheet */
.day-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(3,10,7,.65);backdrop-filter:blur(6px);padding:20px}
.day-sheet-card{position:relative;max-width:460px;width:100%;border-radius:var(--radius);padding:26px 28px;background:var(--glass-strong);border:1px solid var(--glass-border);box-shadow:var(--shadow)}
.day-sheet-card h3{font-family:var(--serif);margin:0 0 14px;color:var(--gold-pale);font-size:1.3rem}
.day-sheet-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-height:50vh;overflow:auto}
.day-sheet-card li{border-left:3px solid var(--gold);padding-left:12px}
.day-sheet-card li.kind-feast{border-left-color:var(--emerald)}
.day-sheet-card li.kind-remembrance{border-left-color:#b58ea0}
.day-sheet-card li.kind-personal{border-left-color:#d98aa3}
.day-sheet-card .sheet-name{color:var(--ink);font-weight:600}
.day-sheet-card .sheet-detail{display:block;color:var(--muted);font-size:.85rem;line-height:1.55;margin-top:3px}
.day-sheet-card .sheet-empty{border:none;color:var(--muted)}
.day-sheet-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer;line-height:1}
.day-sheet-close:hover{color:var(--ink)}
.day-sheet-add{margin-top:18px;width:100%;background:var(--glass);border:1px solid var(--glass-border);color:var(--gold-pale);border-radius:var(--radius-sm);padding:11px;font:600 .9rem var(--sans);cursor:pointer}
.day-sheet-add:hover{background:var(--emerald-soft)}

/* ------------------------------------------------------------- responsive */
@media (max-width:900px){
  .calendar-below{grid-template-columns:1fr}
}
@media (max-width:700px){
  .calendar-cell{height:62px;padding:5px}
  .calendar-toolbar{flex-wrap:wrap}
  .calendar-title{order:-1;flex-basis:100%}
}