/* Roman Catholic Liturgical Calendar: shared, cascading component styles (front end and wp-admin).
   Theme by overriding the --ia-litcal-* and --ia-litcal-color-* variables on .ia-litcal / .ia-litcal-upcoming;
   no rule needs duplicating. Depends on no wp-admin CSS. */

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

/* header bar: prev/next, title, jump form */
.ia-litcal__bar   { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.ia-litcal__title { font-weight: 700; font-size: 1.1rem; min-width: 9rem; text-align: center; }
.ia-litcal__nav   { text-decoration: none; font-size: 1.4rem; line-height: 1; padding: 0 .4rem; color: var(--ia-litcal-accent); }
.ia-litcal__jump  { display: flex; gap: .3rem; margin-left: auto; align-items: center; }
.ia-litcal__sel, .ia-litcal__go { padding: .2rem .35rem; font: inherit; }

/* the month grid */
.ia-litcal__grid {
	display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--ia-litcal-gap); background: var(--ia-litcal-border);
	border: 1px solid var(--ia-litcal-border); border-radius: 6px;   /* no overflow:hidden — the details tooltip must escape the grid */
}
.ia-litcal__wdh { background: var(--ia-litcal-head); text-align: center; font-size: .7rem;
	text-transform: uppercase; letter-spacing: .04em; color: var(--ia-litcal-muted); padding: .35rem 0; font-weight: 600; }

.ia-litcal__cell { background: var(--ia-litcal-bg); min-height: var(--ia-litcal-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 */
.ia-litcal__grid > :first-child { border-top-left-radius: 5px; }
.ia-litcal__grid > :nth-child(7) { border-top-right-radius: 5px; }
.ia-litcal__cell--blank    { background: var(--ia-litcal-blank); border-top-color: transparent; }
.ia-litcal__cell--today    { background: var(--ia-litcal-today); }
.ia-litcal__cell--selected { outline: 2px solid var(--ia-litcal-selected); outline-offset: -2px; }

.ia-litcal__date { display: flex; align-items: baseline; gap: .3rem; }
.ia-litcal__wd   { display: none; font-size: .65rem; text-transform: uppercase; color: var(--ia-litcal-muted, #6b5f55); }
.ia-litcal__dom  { font-weight: 700; font-size: .85rem; color: var(--cell-accent, inherit); }
.ia-litcal__cell--on-white .ia-litcal__dom { color: var(--ia-litcal-on-white); }   /* white accent → grey, not invisible */

.ia-litcal__cels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.ia-litcal__cel  { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; font-size: .72rem; line-height: 1.25; }
.ia-litcal__cel--option { opacity: .8; }                /* options dimmed, NOT italic */
/* the dot is INLINE, so a wrapped name returns to the left edge under the dot */
.ia-litcal__line { display: block; min-width: 0; outline-offset: 2px; }
.ia-litcal__name { white-space: normal; overflow-wrap: anywhere; }   /* wrap, never truncate */
/* details tooltip (rank · colour · optional): hover or focus */
.ia-litcal__info { display: none; position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 20; width: max-content; max-width: 15rem;
	padding: .3rem .5rem; border: 1px solid var(--ia-litcal-border); border-radius: 4px; background: #fff;
	box-shadow: 0 4px 14px rgba(0,0,0,.14); font-size: .7rem; line-height: 1.3; color: #2b2b2b; pointer-events: none; }
.ia-litcal__line:hover .ia-litcal__info, .ia-litcal__line:focus .ia-litcal__info { display: block; }
.ia-litcal__grid > :nth-child(7n) .ia-litcal__info, .ia-litcal__grid > :nth-child(7n-1) .ia-litcal__info { left: auto; right: 0; }   /* Fri/Sat: open leftwards */
.ia-litcal__cel--high .ia-litcal__name { font-weight: 700; }         /* Sundays/Feasts/Solemnities */
.ia-litcal__rank { font-style: italic; }

.ia-litcal__dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); margin-right: .35em; vertical-align: .02em; box-sizing: border-box; }
.ia-litcal__dot--white  { background: var(--ia-litcal-color-white); }
.ia-litcal__dot--red    { background: var(--ia-litcal-color-red); }
.ia-litcal__dot--green  { background: var(--ia-litcal-color-green); }
.ia-litcal__dot--violet { background: var(--ia-litcal-color-violet); }
.ia-litcal__dot--rose   { background: var(--ia-litcal-color-rose); }
.ia-litcal__dot--black  { background: var(--ia-litcal-color-black); }
.ia-litcal__dot--gold   { background: var(--ia-litcal-color-gold); }
.ia-litcal__dot--none   { background: var(--ia-litcal-color-none); border-style: dashed; }

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

/* particular calendars: the "Also show" switch and the tag on their feasts */
.ia-litcal__pcal { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; margin: 0 0 .75rem; font-size: .9rem; color: var(--ia-litcal-muted, #6b5f55); }
.ia-litcal__pcal-label { font-style: italic; }
.ia-litcal__pcal-opt { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; color: inherit; }
.ia-litcal__pcal-box { width: 1rem; height: 1rem; margin: 0; accent-color: var(--ia-litcal-accent, #a80000); }
.ia-litcal__pcal-tag { display: inline-block; margin-left: .25rem; padding: 0 .35rem; border: 1px solid var(--ia-litcal-border, #d9c98f); border-radius: 3px;
	font-size: .78em; font-style: normal; line-height: 1.35; color: var(--ia-litcal-muted, #6b5f55); white-space: nowrap; vertical-align: .05em; }

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

/* List mode: the 7-column grid collapses to a single-column day list. Applied when the user
   forces List (.ia-litcal--list at any width) OR, by default, below 900px (unless the
   user has forced Grid). The two share the same declarations below. */
.ia-litcal--list .ia-litcal__grid { grid-template-columns: 1fr; }
.ia-litcal--list .ia-litcal__wdh,
.ia-litcal--list .ia-litcal__cell--blank { display: none; }
.ia-litcal--list .ia-litcal__cell { min-height: 0; flex-direction: row; align-items: flex-start; gap: .6rem; }
.ia-litcal--list .ia-litcal__date { flex: 0 0 3.2rem; }
.ia-litcal--list .ia-litcal__wd   { display: inline; }
.ia-litcal--list .ia-litcal__cels { flex: 1; }

/* Below 900px List is the default (tablet and phone), unless the user has chosen Grid. */
@media (max-width: 899.98px) {
	.ia-litcal:not(.ia-litcal--grid) .ia-litcal__grid { grid-template-columns: 1fr; }
	.ia-litcal:not(.ia-litcal--grid) .ia-litcal__wdh,
	.ia-litcal:not(.ia-litcal--grid) .ia-litcal__cell--blank { display: none; }
	.ia-litcal:not(.ia-litcal--grid) .ia-litcal__cell { min-height: 0; flex-direction: row; align-items: flex-start; gap: .6rem; }
	.ia-litcal:not(.ia-litcal--grid) .ia-litcal__date { flex: 0 0 3.2rem; }
	.ia-litcal:not(.ia-litcal--grid) .ia-litcal__wd   { display: inline; }
	.ia-litcal:not(.ia-litcal--grid) .ia-litcal__cels { flex: 1; }
}
@media (max-width: 680px) {
	.ia-litcal__pcal { font-size: .85rem; gap: .25rem .9rem; }
	.ia-litcal__jump { margin-left: 0; }
}

/* "View Resources" modal: 10px corners, a 15%-white underlay, dismiss via X / Esc / outside click */
.ia-litcal__modal { position: fixed; inset: 0; z-index: 2147483000;   /* above any theme header; lifted to <body> by the JS */ display: flex; align-items: center; justify-content: center; }
.ia-litcal__modal[hidden] { display: none; }
.ia-litcal__modal-backdrop { position: absolute; inset: 0; background: rgba(255, 255, 255, .15); }
.ia-litcal__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: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
	display: flex; flex-direction: column; overflow: hidden; padding: 1.2rem 1.3rem 1.4rem; }
/* only the list scrolls, so the title and the close button never scroll out of reach */
.ia-litcal__modal-box .ia-litcal__modal-list { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.ia-litcal__modal-x { position: absolute; top: .55rem; right: .55rem; width: 1.8rem; height: 1.8rem; border-radius: 50%;
	border: 1px solid var(--ia-litcal-border); background: #fff; cursor: pointer; font-size: 1.15rem; line-height: 1; color: #555; }
.ia-litcal__modal-x:hover { background: #f3f3f3; }
.ia-litcal__modal-title { margin: 0 1.6rem .6rem 0; font-size: 1.05rem; }
.ia-litcal__modal .ia-litcal__modal-list { list-style: none; margin: 0; padding: 0; }   /* scoped: beats theme rules like ".et-l--body ul" */
.ia-litcal__modal-list li { padding: .35rem 0; border-top: 1px solid #f0efe9; }
.ia-litcal__modal-list li:first-child { border-top: 0; }
.ia-litcal__modal-list a { text-decoration: none; color: var(--ia-litcal-accent); }
.ia-litcal__modal-list a:hover { text-decoration: underline; }
.ia-litcal__modal-edit { display: inline-block; margin: 0 1em; padding: .1rem .6rem; border: 1px solid var(--ia-litcal-border);
	border-radius: 4px; background: var(--ia-litcal-bg); font-size: .76rem; color: var(--ia-litcal-muted) !important; text-decoration: none; }
.ia-litcal__modal-edit:hover { background: var(--ia-litcal-today); }
.ia-litcal__modal-parts { display: block; margin-top: .1rem; color: var(--ia-litcal-muted); font-size: .8rem; }
.ia-litcal__modal-empty { color: var(--ia-litcal-muted); font-style: italic; }
.ia-litcal__modal-list li.ia-litcal__modal-group { padding-top: .7rem; border-top: 0; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ia-litcal-muted); }
.ia-litcal__modal-list li.ia-litcal__modal-group + li { border-top: 0; }

/* month swapped in over REST: a brief dim while the next month loads */
.ia-litcal.is-loading { opacity: .55; transition: opacity .15s; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ia-litcal.is-loading { transition: none; } }
.ia-litcal__modal-about { display: inline-block; margin-left: .4em; font-size: .8rem; font-weight: 400; font-variant: normal; text-transform: none; }
@media (max-width: 680px) { .ia-litcal__modal-about { display: block; margin: .2rem 0 0; } }

/* a resource's file name, after its title */
.ia-litcal__modal-file, .ia-litcal-up-file { color: var(--ia-litcal-muted); font-size: .85em; }

/* [ia_litcal_upcoming] */
.ia-litcal-empty { color: #888; font-style: italic; }
.ia-litcal-upcoming { display: flex; flex-direction: column; }
.ia-litcal-up-row { display: flex; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid #eee; }
.ia-litcal-up-date { flex: 0 0 3.4rem; text-align: center; line-height: 1.1; }
.ia-litcal-up-dow { display: block; font-size: .7rem; text-transform: uppercase; color: #999; }
.ia-litcal-up-dom { display: block; font-weight: 700; color: #444; }
.ia-litcal-up-main { flex: 1; min-width: 0; }
.ia-litcal-up-cel { display: flex; align-items: center; gap: .45rem; }
.ia-litcal-up-name { font-weight: 600; }
.ia-litcal-up-rank { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #8a7a55; }
.ia-litcal-up-cycle { font-size: .68rem; color: #9a9a9a; margin-left: auto; white-space: nowrap; padding-left: .5rem; }
.ia-litcal-up-dot { width: .7rem; height: .7rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); flex: 0 0 auto; }
.ia-litcal-color-white { background: #fff; } .ia-litcal-color-red { background: #b4232a; }
.ia-litcal-color-green { background: #2e7d4f; } .ia-litcal-color-violet { background: #6c3a8e; }
.ia-litcal-color-rose { background: #e6a6bd; } .ia-litcal-color-black { background: #222; }
.ia-litcal-color-gold { background: #c8a93a; } /* festal: White on Solemnities/Feasts → Gold */
.ia-litcal-upcoming .ia-litcal-up-res { list-style: none; margin: .3rem 0 0; padding: 0; }   /* scoped: beats theme rules like ".entry-content ul" */
.ia-litcal-up-res li { padding: .12rem 0; font-size: .9rem; }
.ia-litcal-up-parts { color: #888; font-size: .8rem; }
.ia-litcal-up-edit { display: inline-block; margin: 0 1em; padding: .05rem .55rem; border: 1px solid #ddd; border-radius: 4px;
	background: #fafafa; font-size: .72rem; color: #8a7a55; text-decoration: none; }
.ia-litcal-up-edit:hover { background: #f0eee6; }
.ia-litcal-up-none { color: #b0b0b0; font-size: .85rem; font-style: italic; margin-top: .2rem; }
.ia-litcal-up-evening { margin-top: .35rem; padding-left: .55rem; border-left: 2px solid #e7e0cf; }
.ia-litcal-up-eve-label { display: block; font-size: .8rem; font-style: italic; color: #8a7a55; }
.ia-litcal-up-evening .ia-litcal-up-res { margin-top: .15rem; }
.ia-litcal-up-common { margin-top: .35rem; }
.ia-litcal-up-common-label { display: block; font-size: .8rem; font-weight: 600; color: #8a7a55; }
.ia-litcal-up-common .ia-litcal-up-res { margin-top: .1rem; }
@media (max-width: 640px) { .ia-litcal-up-date { flex-basis: 2.8rem; } .ia-litcal-up-cycle { display: none; } .ia-litcal-up-common-label { font-size: .78rem; } }
.ia-litcal-up-pager { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin: .5rem 0; }
.ia-litcal-up-pager .is-disabled { opacity: .4; }

/* a consumer's Details link on a resource (data-ia-litcal-detail) */
.ia-litcal-detail-link { margin-left: .35em; font-size: .8em; }