/*
 * COP Church Content — default front-end styles.
 *
 * Used when a theme does not style things itself. Modern, neutral and easy to
 * recolour: set any of these on :root (or a wrapper) in your theme, no !important needed.
 *
 *   --copc-accent            buttons, links, highlights   (defaults to the theme's primary colour)
 *   --copc-accent-contrast   text on the accent colour
 *   --copc-text              body text (inherits by default)
 *   --copc-text-muted        dates, meta, help text
 *   --copc-border            hairlines
 *   --copc-surface           soft panels and badges
 *   --copc-card              card background
 *   --copc-radius            corners of cards, boxes and players
 *   --copc-font              font family (inherits by default)
 *   --copc-gap               spacing between blocks
 *   --copc-shadow            card shadow on hover
 *
 * Defaults are declared with :where() so they have zero specificity and any theme value wins.
 * Image figures set their own --copc-radius inline from the Featured Images settings.
 */
:where(:root) {
	--copc-accent: var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #1f4e8c));
	--copc-accent-contrast: var(--wp--preset--color--base, #fff);
	--copc-text: inherit;
	--copc-text-muted: #6b7280;
	--copc-border: rgba(15, 23, 42, .12);
	--copc-surface: rgba(15, 23, 42, .035);
	--copc-card: transparent;
	--copc-radius: 12px;
	--copc-font: inherit;
	--copc-gap: 1.5rem;
	--copc-shadow: 0 10px 30px -12px rgba(15, 23, 42, .25);
}

:where(.copc-single, .copc-single-after, .copc-grid, .copc-archive, .copc-filters, .copc-latest, .copc-card, .copc-event-box, .copc-transcript) {
	font-family: var(--copc-font);
}

/* ---------- Featured image framing ---------- */
.copc-image {
	margin: 0 0 var(--copc-gap, 1.5rem);
	max-width: var(--copc-max, 100%);
	border-radius: var(--copc-radius, 0);
	overflow: hidden;
}
.copc-image--single { margin-inline: auto; }
.copc-image a { display: block; }
.copc-image__img { display: block; width: 100%; height: auto; }

/* Fixed shape: crop or letterbox to the chosen aspect ratio, honouring the focal point. */
.copc-image--framed { aspect-ratio: var(--copc-ratio, 16/9); }
.copc-image--framed a,
.copc-image--framed .copc-image__img { width: 100%; height: 100%; }
.copc-image--framed .copc-image__img { object-fit: cover; object-position: var(--copc-focus, 50% 50%); }
.copc-image--fit-contain.copc-image--framed { background: var(--copc-letterbox, #000); }
.copc-image--fit-contain .copc-image__img { object-fit: contain; }

/* ---------- Players ---------- */
.copc-video { position: relative; aspect-ratio: 16/9; margin-bottom: var(--copc-gap); background: #000; border-radius: var(--copc-radius, 12px); overflow: hidden; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .45); }
.copc-video iframe, .copc-video video, .copc-video .wp-video, .copc-video .copc-lite-yt { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
.copc-lite-yt { background: #000 center / cover no-repeat; cursor: pointer; padding: 0; }
.copc-lite-yt::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .35)); transition: opacity .2s; }
.copc-lite-yt__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 50px; transform: translate(-50%, -50%); z-index: 1; background: rgba(15, 15, 15, .72); border-radius: 14px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 8px 24px rgba(0, 0, 0, .35); transition: background .2s, transform .2s; }
.copc-lite-yt__play::after { content: ""; position: absolute; left: 29px; top: 15px; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; }
.copc-lite-yt:hover .copc-lite-yt__play, .copc-lite-yt:focus-visible .copc-lite-yt__play { background: #f00; transform: translate(-50%, -50%) scale(1.06); }
.copc-lite-yt:focus-visible { outline: 3px solid var(--copc-accent); outline-offset: -3px; }
.copc-audio { margin-bottom: var(--copc-gap); }
.copc-audio audio, .copc-audio .wp-audio-shortcode { width: 100%; }

/* ---------- Meta ---------- */
.copc-meta { list-style: none; margin: 0 0 var(--copc-gap); padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 2rem; color: var(--copc-text-muted); }
.copc-meta > li { margin: 0; }
.copc-meta--stacked { flex-direction: column; gap: 1.1rem; }
.copc-meta__label { display: block; margin-bottom: .2em; font-size: .72em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: inherit; opacity: .8; }
.copc-meta a { color: var(--copc-accent); text-underline-offset: .18em; }
.copc-meta--terms { font-size: .92em; padding-top: var(--copc-gap); border-top: 1px solid var(--copc-border); }

/* ---------- Buttons ---------- */
.copc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .7em 1.3em;
	border-radius: calc(var(--copc-radius, 12px) * .66);
	background: var(--copc-accent);
	color: var(--copc-accent-contrast);
	text-decoration: none;
	font-weight: 600;
	font-family: inherit;
	font-size: .95em;
	border: 1px solid var(--copc-accent);
	cursor: pointer;
	line-height: 1.2;
	transition: filter .15s, transform .15s, background-color .15s;
}
.copc-button:hover { filter: brightness(1.1); color: var(--copc-accent-contrast); }
.copc-button:active { transform: translateY(1px); }
.copc-button:focus-visible { outline: 2px solid var(--copc-accent); outline-offset: 3px; }
.copc-button--secondary { background: transparent; color: var(--copc-accent); }
.copc-button--secondary:hover { color: var(--copc-accent); background: var(--copc-surface); filter: none; }
.copc-downloads, .copc-event-box__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: var(--copc-gap) 0; }

/* ---------- Cards & grids ---------- */
.copc-grid { display: grid; gap: calc(var(--copc-gap) * 1.33) var(--copc-gap); grid-template-columns: repeat(var(--copc-columns, 3), minmax(0, 1fr)); margin-bottom: var(--copc-gap); }
@media (max-width: 900px) { .copc-grid { grid-template-columns: repeat(min(var(--copc-columns, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 600px) { .copc-grid { grid-template-columns: minmax(0, 1fr); } }
.copc-card { position: relative; display: flex; flex-direction: column; background: var(--copc-card); border-radius: var(--copc-radius); }
.copc-card .copc-image { margin-bottom: .9rem; transition: box-shadow .25s, transform .25s; }
.copc-card .copc-image__img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.copc-card:hover .copc-image { box-shadow: var(--copc-shadow); }
.copc-card:hover .copc-image__img { transform: scale(1.03); }
.copc-card__body { display: flex; flex-direction: column; flex: 1; }
.copc-card__eyebrow { margin: 0 0 .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--copc-accent); }
.copc-card__title { margin: 0 0 .4rem; font-size: 1.15rem; line-height: 1.3; letter-spacing: -.01em; }
.copc-card__title a { text-decoration: none; color: inherit; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s; }
.copc-card__title a:hover, .copc-card__title a:focus-visible { background-size: 100% 1px; }
.copc-card__title a::after { content: ""; position: absolute; inset: 0; } /* Whole card is clickable. */
.copc-card__title a:focus-visible { outline: none; }
.copc-card:focus-within { outline: 2px solid var(--copc-accent); outline-offset: 6px; }
.copc-card .copc-image a { position: relative; z-index: 1; }
.copc-card__meta { margin: 0 0 .35rem; font-size: .9rem; color: var(--copc-text-muted); }
.copc-card__sep { margin: 0 .3em; opacity: .7; }
.copc-card__excerpt { font-size: .95rem; color: var(--copc-text-muted); }
.copc-card__excerpt p { margin: 0 0 .5rem; }
.copc-card__media { margin: auto 0 0; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.copc-badge { display: inline-flex; align-items: center; gap: .3em; font-size: .7rem; font-weight: 600; letter-spacing: .02em; padding: .25em .65em; border-radius: 99px; background: var(--copc-surface); border: 1px solid var(--copc-border); color: var(--copc-text-muted); }
.copc-card--event .copc-card__body { position: static; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-content: start; }
.copc-card--event .copc-card__body > :not(.copc-date-chip) { grid-column: 2; }
.copc-card--event .copc-date-chip { grid-row: 1 / span 4; align-self: start; }
.copc-date-chip {
	float: left; /* Older theme overrides expect a float; the grid above takes over where supported. */
	margin: 0 .75rem .25rem 0;
	width: 3.4rem;
	text-align: center;
	border: 1px solid var(--copc-border);
	border-radius: calc(var(--copc-radius, 12px) * .66);
	overflow: hidden;
	line-height: 1.1;
	background: var(--copc-card, transparent);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.copc-card--event .copc-date-chip { float: none; margin: 0; }
.copc-date-chip span { display: block; background: var(--copc-accent); color: var(--copc-accent-contrast); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3em 0; }
.copc-date-chip strong { display: block; font-size: 1.45rem; font-weight: 700; padding: .25em 0 .3em; }

/* ---------- Archives ---------- */
.copc-archive { max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) 1.25rem; }
.copc-archive__header { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.copc-archive__title { margin: 0 0 .5rem; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -.02em; }
.copc-archive__description { max-width: 46rem; color: var(--copc-text-muted); }
.copc-filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1.25rem 0; padding: .6rem; border: 1px solid var(--copc-border); border-radius: var(--copc-radius); background: var(--copc-surface); }
.copc-filters__field { display: block; flex: 1 1 10rem; min-width: 0; margin: 0; }
.copc-filters__search { flex: 2 1 14rem; }
.copc-filters__select, .copc-filters input[type="search"] {
	width: 100%;
	min-height: 2.75rem;
	padding: .55em .85em;
	border: 1px solid var(--copc-border);
	border-radius: calc(var(--copc-radius, 12px) * .66);
	background-color: var(--wp--preset--color--base, #fff);
	color: inherit;
	font: inherit;
	font-size: .95rem;
	max-width: 100%;
	box-sizing: border-box;
}
.copc-filters__select:focus, .copc-filters input[type="search"]:focus { outline: 2px solid var(--copc-accent); outline-offset: 1px; border-color: transparent; }
.copc-filters .copc-button { min-height: 2.75rem; flex: none; }
.copc-tabs { display: inline-flex; gap: .25rem; margin-top: 1rem; padding: .3rem; border-radius: 999px; background: var(--copc-surface); border: 1px solid var(--copc-border); }
.copc-tabs a { text-decoration: none; padding: .45rem 1.1rem; border-radius: 999px; color: var(--copc-text-muted); font-weight: 600; font-size: .92rem; border-bottom: 0; }
.copc-tabs a:hover { color: inherit; }
.copc-tabs a[aria-current="page"] { background: var(--copc-accent); color: var(--copc-accent-contrast); font-weight: 700; }
.copc-pagination, .copc-pagination .nav-links { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; align-items: center; }
.copc-pagination { margin-top: calc(var(--copc-gap) * 1.5); }
.copc-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem; border-radius: 999px; border: 1px solid var(--copc-border); text-decoration: none; color: inherit; font-weight: 600; font-size: .92rem; box-sizing: border-box; }
.copc-pagination .page-numbers.current { background: var(--copc-accent); border-color: var(--copc-accent); color: var(--copc-accent-contrast); }
.copc-pagination .page-numbers.dots { border-color: transparent; }
.copc-pagination a.page-numbers:hover { background: var(--copc-surface); }
.copc-empty { padding: 2.5rem 1.5rem; text-align: center; color: var(--copc-text-muted); border: 1px dashed var(--copc-border); border-radius: var(--copc-radius); }
.copc-related { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--copc-border); }
.copc-related__title { margin: 0 0 1.25rem; font-size: 1.4rem; letter-spacing: -.01em; }

/* ---------- Events ---------- */
.copc-event-box { padding: clamp(1.1rem, 3vw, 1.6rem); border: 1px solid var(--copc-border); border-radius: var(--copc-radius); background: var(--copc-surface); margin-bottom: var(--copc-gap); }
.copc-event-box .copc-meta { color: inherit; margin-bottom: 0; }
.copc-event-box .copc-meta--stacked { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem 2rem; }
.copc-event-box .copc-meta__label { color: var(--copc-text-muted); }
.copc-event-box__actions { margin-bottom: 0; padding-top: 1.1rem; border-top: 1px solid var(--copc-border); }
.copc-calendar-menu { position: relative; }
.copc-calendar-menu summary { list-style: none; }
.copc-calendar-menu summary::-webkit-details-marker { display: none; }
.copc-calendar-menu summary::after { content: ""; width: .45em; height: .45em; margin-left: .2em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-.15em); transition: transform .15s; }
.copc-calendar-menu[open] summary::after { transform: rotate(-135deg) translateY(-.05em); }
.copc-calendar-menu[open] > a { display: block; padding: .6em .9em; }
.copc-calendar-menu__items { position: absolute; z-index: 20; left: 0; top: calc(100% + .4rem); min-width: 13rem; padding: .35rem; background: var(--wp--preset--color--base, #fff); color: #111; border: 1px solid var(--copc-border); border-radius: calc(var(--copc-radius, 12px) * .66); box-shadow: 0 12px 32px rgba(15, 23, 42, .16); }
.copc-calendar-menu__items a { display: block; padding: .55em .8em; border-radius: 6px; color: inherit; text-decoration: none; font-size: .92rem; }
.copc-calendar-menu__items a:hover, .copc-calendar-menu__items a:focus-visible { background: var(--copc-surface); color: var(--copc-accent); }
.copc-notice { margin: 1rem 0 0; padding: .6rem .9rem; border-radius: calc(var(--copc-radius, 12px) * .5); background: var(--copc-card, transparent); border: 1px dashed var(--copc-border); font-style: normal; color: var(--copc-text-muted); }
.copc-map { aspect-ratio: 16/9; margin: var(--copc-gap) 0; border-radius: var(--copc-radius); overflow: hidden; border: 1px solid var(--copc-border); background: var(--copc-surface); }
.copc-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Single sermon ---------- */
.copc-single--sermon > .copc-meta { padding: 1rem 0; border-bottom: 1px solid var(--copc-border); }
.copc-single--sermon > .copc-meta .copc-meta__label { display: inline; margin: 0 .35em 0 0; }

/* ---------- Latest sermon ---------- */
.copc-latest .copc-video, .copc-latest .copc-image { margin-bottom: 1rem; }

/* ---------- Transcript ---------- */
.copc-transcript { margin: var(--copc-gap, 1.5rem) 0; border: 1px solid var(--copc-border, rgba(0, 0, 0, .12)); border-radius: var(--copc-radius, 12px); background: var(--copc-card, transparent); overflow: hidden; }
.copc-transcript summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; list-style: none; }
.copc-transcript summary::-webkit-details-marker { display: none; }
.copc-transcript summary::after { content: ""; flex: none; width: .55em; height: .55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; opacity: .7; }
.copc-transcript[open] summary::after { transform: rotate(-135deg); }
.copc-transcript summary:hover { background: var(--copc-surface); }
.copc-transcript summary:focus-visible { outline: 2px solid var(--copc-accent); outline-offset: -2px; }
.copc-transcript[open] summary { border-bottom: 1px solid var(--copc-border, rgba(0, 0, 0, .12)); }
.copc-transcript__text { padding: 1rem 1.25rem 1.25rem; max-height: 32rem; overflow-y: auto; line-height: 1.75; }

@media (prefers-reduced-motion: reduce) {
	.copc-card .copc-image, .copc-card .copc-image__img, .copc-button, .copc-lite-yt__play, .copc-transcript summary::after { transition: none; }
	.copc-card:hover .copc-image__img { transform: none; }
}