/* Articles Plus - site.
   Deliberately minimal: layout only, no colours or fonts, so the output
   inherits whatever template the site is running. */
.ap-articles { display: grid; gap: 1.5rem; }
.ap-articles.ap-cols-2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.ap-articles.ap-cols-3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.ap-article { display: flex; flex-direction: column; gap: .5rem; }
.ap-article__image img { width: 100%; height: auto; display: block; }
.ap-article__meta { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .85em; opacity: .75; }
.ap-article__cats { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.ap-subscribe__field { margin-bottom: .75rem; }
.ap-subscribe__topics { display: flex; flex-wrap: wrap; gap: .75rem; }
.ap-hp { position: absolute !important; left: -9999px; }
@media (prefers-reduced-motion: reduce) { .ap-article * { transition: none !important; } }

/* Search page */
.ap-search__row { display: flex; gap: .5rem; margin-bottom: .75rem; }
.ap-search__row .form-control { flex: 1 1 auto; min-width: 0; }
.ap-search__filters { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.ap-search__filters label { display: flex; flex-direction: column; gap: .2rem; font-size: .85em; }
.ap-search__results { list-style: none; margin: 0; padding: 0; }
.ap-search__result { padding: .75rem 0; }
.ap-search__result + .ap-search__result { border-top: 1px solid rgba(128,128,128,.25); }
.ap-search__result-title { margin: 0 0 .2rem; font-size: 1.1em; }
.ap-search__snippet { margin: .3rem 0 0; font-size: .9em; opacity: .85; }
.ap-search__count { font-size: .85em; opacity: .7; }

/* Categories page */
.ap-categories { list-style: none; margin: 0; padding: 0; }
.ap-categories__item { padding: .35rem 0; padding-left: calc(var(--ap-indent, 0) * 1.25rem); }
.ap-categories__count { font-size: .8em; opacity: .6; margin-left: .4rem; }
.ap-categories__description { font-size: .85em; opacity: .8; }

/* Manage page */
.ap-manage__topics { border: 0; padding: 0; margin: 1rem 0; }
.ap-manage__topics label { display: flex; gap: .5rem; align-items: flex-start; padding: .3rem 0; }
.ap-manage__optout { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(128,128,128,.25); }
.ap-manage__optout-text { font-size: .9em; opacity: .8; margin-bottom: .5rem; }
.ap-subscribe__topics label { display: flex; gap: .5rem; align-items: flex-start; padding: .3rem 0; }

/* Compact index layout */
.ap-index__table td { vertical-align: top; }

/* ---- Configurable list layouts -------------------------------------------
   Structure only. The host template supplies colour, type and button styling,
   so a list looks like the rest of the site rather than an imported widget. */

.ap-articles { display: grid; gap: 2rem; }
.ap-articles--leading { grid-template-columns: 1fr; margin-bottom: 2rem; }
.ap-cols-1 { grid-template-columns: 1fr; }
.ap-cols-2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.ap-cols-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ap-cols-4 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

.ap-article { display: flex; flex-direction: column; gap: .6rem; }
.ap-article__image img { width: 100%; height: auto; display: block; }
.ap-article__title { margin: 0; }
.ap-article__subtitle { margin: 0; opacity: .8; }
.ap-article__intro > *:first-child { margin-top: 0; }
.ap-article__intro > *:last-child { margin-bottom: 0; }
.ap-article__more { margin: .25rem 0 0; }

/* Meta line: author / category / date, separated by rules the way most
   Joomla templates do it. */
.ap-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	font-size: .85em;
	opacity: .75;
}
.ap-article__meta > * { display: inline-flex; align-items: center; gap: .3rem; }
.ap-article__meta > * + *::before {
	content: "/";
	margin-right: .7rem;
	opacity: .5;
}
.ap-article__cats a { text-decoration: none; }
.ap-sep { margin-left: -.15rem; }

/* Image beside the text instead of above it. */
.ap-article--image-left,
.ap-article--image-right { flex-direction: row; align-items: flex-start; gap: 1.25rem; }
.ap-article--image-right { flex-direction: row-reverse; }
.ap-article--image-left > .ap-article__image,
.ap-article--image-right > .ap-article__image { flex: 0 0 34%; max-width: 34%; }
.ap-article--image-left > .ap-article__content,
.ap-article--image-right > .ap-article__content { flex: 1 1 auto; min-width: 0; }

.ap-articles__links { margin: 2rem 0 0; padding-left: 1.4rem; }
.ap-articles__links li { padding: .2rem 0; }

.ap-articles__inline-modules { margin: 1rem 0; }
.ap-pagination { margin-top: 2rem; }
.ap-pagination__counter { font-size: .85em; opacity: .7; }

@media (max-width: 600px) {
	.ap-article--image-left,
	.ap-article--image-right { flex-direction: column; }
	.ap-article--image-left > .ap-article__image,
	.ap-article--image-right > .ap-article__image { flex: none; max-width: 100%; }
}

/* Share buttons */
.ap-share { margin: 1.25rem 0; }
.ap-share--top { margin-top: 0; }
.ap-share .addtoany_list a { padding: 0 .2rem 0 0; }
.ap-article .ap-share { margin: .75rem 0 0; }

/* ── WHAT GOES WITH EVERY POST ─────────────────────────────────────────────
   Share, translate, follow. Each block is optional and independently placed,
   so this styles them as a row that survives one, two or three of them being
   present, in the corner or across the foot of the article. */
.ap-extras { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; }

.ap-extras--bottom,
.ap-extras--list,
.ap-extras--comments {
    margin: 1.4rem 0 .4rem;
    padding: .8rem 0 0;
    border-top: 1px solid rgba(127, 127, 127, .25);
}

/* ⚠ THE CORNER BLOCK FLOATS, AND THE HEADER MUST CLEAR IT.
   Greg: "one of those or two of those like share buttons can go in the top
   right corner instead". It is emitted before the title so the float sits
   beside the heading rather than under it. */
.ap-extras--topright {
    float: right;
    margin: 0 0 .6rem 1.2rem;
    max-width: 55%;
    justify-content: flex-end;
}

.ap-article__header::after,
.ap-extras--bottom::after { content: ""; display: block; clear: both; }

.ap-extra { display: flex; align-items: center; gap: .45rem; }

.ap-extra__label {
    font-size: .78rem; font-weight: 600; letter-spacing: .02em;
    text-transform: uppercase; opacity: .7; white-space: nowrap;
}

.ap-extras--topright .ap-extra__label { display: none; }

/* ── FOLLOW US ─────────────────────────────────────────────────────────────
   The icon set the page builder's social block draws, as a list that comes
   from one place in the component options - so adding a network there adds
   it here, on every article, without touching an article. */
.ap-follow { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ap-follow > li { margin: 0; padding: 0; list-style: none; }

.ap-follow__link {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: rgba(127, 127, 127, .14);
    color: inherit; text-decoration: none; font-size: .95rem;
    transition: background .15s ease, transform .15s ease;
}

.ap-follow__link:hover, .ap-follow__link:focus-visible {
    background: rgba(127, 127, 127, .3); transform: translateY(-1px);
    color: inherit; text-decoration: none;
}

/* With names shown the pill grows to fit rather than clipping the word. */
.ap-follow__link:has(.ap-follow__name) { width: auto; border-radius: 999px; padding: 0 .8rem; }
.ap-follow__name { font-size: .82rem; font-weight: 600; white-space: nowrap; }

@media (max-width: 40rem) {
    .ap-extras--topright { float: none; max-width: none; margin-left: 0; justify-content: flex-start; }
    .ap-extra__label { display: none; }
}


/* ── THE SUBMISSION FORM ───────────────────────────────────────────────────
 *
 * ⚠ THE TEXTAREA HAD NO WIDTH AT ALL, so it fell back to the browser default
 * of 20 columns: 190px on a phone where every input beside it was 360px, and
 * the field people actually write their prayer in was the smallest thing on
 * the form. Greg, 2026-09-21: "what would you like prayer for box can extend
 * over to the right on phones".
 *
 * The form had no stylesheet of its own - the inputs only looked right
 * because the site template styles bare `input` and `select`, and it styles
 * no `textarea`. Fixed here rather than in one site's CSS so every Articles
 * Plus install gets a form that fits its column.
 */
.ap-submit__field { margin-bottom: 1rem; }
.ap-submit__field > label { display: block; font-weight: 600; margin-bottom: .25rem; }

.ap-submit textarea,
.ap-submit input[type="text"],
.ap-submit input[type="email"],
.ap-submit input[type="url"],
.ap-submit select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.ap-submit textarea { min-height: 9em; resize: vertical; }

/* A checkbox and its words belong on one line, and the box must not stretch. */
.ap-submit__check {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-weight: 400;
	margin-top: .4rem;
}
.ap-submit__check input[type="checkbox"] { width: auto; flex: 0 0 auto; margin-top: .2rem; }

/*
 * ⚠ THE HONEYPOT WAS VISIBLE ON EVERY SITE. The form marks it
 * `.ap-submit__hp` and trusts CSS to hide it - and this component shipped no
 * stylesheet for the form at all, so the rule never existed. A "Website" box
 * sat in the middle of the prayer form: a bot fills it and is discarded, but
 * so does a person who thinks the site wants their website, and they are
 * discarded in exactly the same silence. Found by looking at the rendered
 * form on a phone, not by reading the template - the template is correct.
 *
 * Off-screen rather than display:none, because some bots skip anything the
 * browser would not paint.
 */
.ap-submit__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}