/* Weber calendar — SHARED, cascading component styles (front-end + back-end).
   Theme by overriding the --weber-cal-* / --weber-color-* variables on .weber-cal;
   no rule needs duplicating. Namespaced .weber-cal__*. Depends on no WP-admin CSS. */

.weber-cal {
	/* chrome */
	--weber-cal-border:   #e3e0d8;
	--weber-cal-bg:       #fff;
	--weber-cal-blank:    #fbfbf9;
	--weber-cal-head:     #faf9f6;
	--weber-cal-muted:    #8a8a8a;
	--weber-cal-accent:   #7a2e2e;
	--weber-cal-today:    #fff7e6;
	--weber-cal-selected: #2271b1;
	--weber-cal-on-white: #808080;   /* date text when the day's accent is White (else invisible) */
	--weber-cal-gap:      1px;
	--weber-cal-cell-min: 5.6rem;
	/* liturgical colours (shared palette) */
	--weber-color-white:  #ffffff;
	--weber-color-red:    #b4232a;
	--weber-color-green:  #2e7d4f;
	--weber-color-violet: #6c3a8e;
	--weber-color-rose:   #e6a6bd;
	--weber-color-black:  #222222;
	--weber-color-gold:   #c8a93a;   /* festal accent: White on Solemnities/Feasts → Gold */
	--weber-color-none:   transparent;

	font-size: 14px;
	color: #2b2b2b;
}

/* header bar: prev/next, title, jump form */
.weber-cal__bar   { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.weber-cal__title { font-weight: 700; font-size: 1.1rem; min-width: 9rem; text-align: center; }
.weber-cal__nav   { text-decoration: none; font-size: 1.4rem; line-height: 1; padding: 0 .4rem; color: var(--weber-cal-accent); }
.weber-cal__jump  { display: flex; gap: .3rem; margin-left: auto; align-items: center; }
.weber-cal__sel, .weber-cal__go { padding: .2rem .35rem; font: inherit; }

/* the month grid */
.weber-cal__grid {
	display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--weber-cal-gap); background: var(--weber-cal-border);
	border: 1px solid var(--weber-cal-border); border-radius: 6px; overflow: hidden;
}
.weber-cal__wdh { background: var(--weber-cal-head); text-align: center; font-size: .7rem;
	text-transform: uppercase; letter-spacing: .04em; color: var(--weber-cal-muted); padding: .35rem 0; font-weight: 600; }

.weber-cal__cell { background: var(--weber-cal-bg); min-height: var(--weber-cal-cell-min);
	padding: .3rem .35rem; display: flex; flex-direction: column; gap: .2rem;
	border-top: 3px solid var(--cell-accent, transparent); }   /* season (or overriding celebration) colour */
.weber-cal__cell--blank    { background: var(--weber-cal-blank); border-top-color: transparent; }
.weber-cal__cell--today    { background: var(--weber-cal-today); }
.weber-cal__cell--selected { outline: 2px solid var(--weber-cal-selected); outline-offset: -2px; }

.weber-cal__date { display: flex; align-items: baseline; gap: .3rem; }
.weber-cal__wd   { display: none; font-size: .65rem; text-transform: uppercase; color: var(--weber-cal-muted); }
.weber-cal__dom  { font-weight: 700; font-size: .85rem; color: var(--cell-accent, inherit); }
.weber-cal__cell--on-white .weber-cal__dom { color: var(--weber-cal-on-white); }   /* white accent → grey, not invisible */

.weber-cal__cels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.weber-cal__cel  { display: flex; align-items: flex-start; gap: .35rem; font-size: .72rem; line-height: 1.25; }
.weber-cal__cel--option { opacity: .8; }                /* options dimmed, NOT italic */
.weber-cal__cel-text { display: flex; flex-direction: column; min-width: 0; }
.weber-cal__name { white-space: normal; overflow-wrap: anywhere; }   /* wrap, never truncate */
.weber-cal__cel--high .weber-cal__name { font-weight: 700; }         /* Sundays/Feasts/Solemnities */
.weber-cal__rank { font-style: italic; font-size: .64rem; color: var(--weber-cal-muted); line-height: 1.15; }

.weber-cal__dot { width: .6rem; height: .6rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); flex: 0 0 auto; margin-top: .15rem; }
.weber-cal__dot--white  { background: var(--weber-color-white); }
.weber-cal__dot--red    { background: var(--weber-color-red); }
.weber-cal__dot--green  { background: var(--weber-color-green); }
.weber-cal__dot--violet { background: var(--weber-color-violet); }
.weber-cal__dot--rose   { background: var(--weber-color-rose); }
.weber-cal__dot--black  { background: var(--weber-color-black); }
.weber-cal__dot--gold   { background: var(--weber-color-gold); }
.weber-cal__dot--none   { background: var(--weber-color-none); border-style: dashed; }

/* view-mode toggle (Grid / List) */
.weber-cal__modes { display: inline-flex; border: 1px solid var(--weber-cal-border); border-radius: 5px; overflow: hidden; }
.weber-cal__mode  { border: 0; background: var(--weber-cal-bg); padding: .25rem .65rem; cursor: pointer; font: inherit; font-size: .8rem; color: var(--weber-cal-muted); }
.weber-cal__mode + .weber-cal__mode { border-left: 1px solid var(--weber-cal-border); }
.weber-cal__mode.is-active { background: var(--weber-cal-accent); color: #fff; }

/* per-celebration "View Resources" button */
.weber-cal__res { margin-top: .2rem; align-self: flex-start; border: 1px solid var(--weber-cal-border); background: var(--weber-cal-bg);
	border-radius: 4px; padding: .08rem .35rem; font: inherit; font-size: .62rem; line-height: 1.3; cursor: pointer; color: var(--weber-cal-accent); white-space: nowrap; }
.weber-cal__res:hover { background: var(--weber-cal-today); }

/* List mode: the 7-column grid collapses to a single-column day list. Applied when the user
   forces List (.weber-cal--list at any width) OR, by default, on narrow screens (unless the
   user has forced Grid). The two share the same declarations below. */
.weber-cal--list .weber-cal__grid { grid-template-columns: 1fr; }
.weber-cal--list .weber-cal__wdh,
.weber-cal--list .weber-cal__cell--blank { display: none; }
.weber-cal--list .weber-cal__cell { min-height: 0; flex-direction: row; align-items: flex-start; gap: .6rem; }
.weber-cal--list .weber-cal__date { flex: 0 0 3.2rem; }
.weber-cal--list .weber-cal__wd   { display: inline; }
.weber-cal--list .weber-cal__cels { flex: 1; }

@media (max-width: 680px) {
	.weber-cal:not(.weber-cal--grid) .weber-cal__grid { grid-template-columns: 1fr; }
	.weber-cal:not(.weber-cal--grid) .weber-cal__wdh,
	.weber-cal:not(.weber-cal--grid) .weber-cal__cell--blank { display: none; }
	.weber-cal:not(.weber-cal--grid) .weber-cal__cell { min-height: 0; flex-direction: row; align-items: flex-start; gap: .6rem; }
	.weber-cal:not(.weber-cal--grid) .weber-cal__date { flex: 0 0 3.2rem; }
	.weber-cal:not(.weber-cal--grid) .weber-cal__wd   { display: inline; }
	.weber-cal__jump { margin-left: 0; }
}

/* "View Resources" modal: 10px corners, a 15%-white underlay, dismiss via X / Esc / outside click */
.weber-cal__modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.weber-cal__modal[hidden] { display: none; }
.weber-cal__modal-backdrop { position: absolute; inset: 0; background: rgba(255, 255, 255, .15); }
.weber-cal__modal-box { position: relative; background: #fff; border-radius: 10px; box-shadow: 0 12px 44px rgba(0, 0, 0, .28);
	width: calc(100% - 2rem); max-width: 28rem; max-height: 80vh; overflow: auto; padding: 1.2rem 1.3rem 1.4rem; }
.weber-cal__modal-x { position: absolute; top: .55rem; right: .55rem; width: 1.8rem; height: 1.8rem; border-radius: 50%;
	border: 1px solid var(--weber-cal-border); background: #fff; cursor: pointer; font-size: 1.15rem; line-height: 1; color: #555; }
.weber-cal__modal-x:hover { background: #f3f3f3; }
.weber-cal__modal-title { margin: 0 1.6rem .6rem 0; font-size: 1.05rem; }
.weber-cal__modal-list { list-style: none; margin: 0; padding: 0; }
.weber-cal__modal-list li { padding: .35rem 0; border-top: 1px solid #f0efe9; }
.weber-cal__modal-list li:first-child { border-top: 0; }
.weber-cal__modal-list a { text-decoration: none; color: var(--weber-cal-accent); }
.weber-cal__modal-list a:hover { text-decoration: underline; }
.weber-cal__modal-edit { display: inline-block; margin: 0 1em; padding: .1rem .6rem; border: 1px solid var(--weber-cal-border);
	border-radius: 4px; background: var(--weber-cal-bg); font-size: .76rem; color: var(--weber-cal-muted) !important; text-decoration: none; }
.weber-cal__modal-edit:hover { background: var(--weber-cal-today); }
.weber-cal__modal-parts { display: block; margin-top: .1rem; color: var(--weber-cal-muted); font-size: .8rem; }
.weber-cal__modal-empty { color: var(--weber-cal-muted); font-style: italic; }