/*
 * Shared by every Allison Community Church option theme.
 * Structure and helpers only. Colors, fonts and layout live in each option's theme.css.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

/* The themes set their own spacing, so start every text block from zero. */
:where(.wp-site-blocks, .editor-styles-wrapper) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote) {
	margin: 0;
}

:where(.wp-site-blocks, .editor-styles-wrapper) :where(h1, h2, h3) {
	text-wrap: balance;
}

:where(.wp-site-blocks, .editor-styles-wrapper) p {
	text-wrap: pretty;
}

a {
	text-underline-offset: 0.18em;
}

/* A light ring inside a dark one, so keyboard focus shows on every background. */
:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 8px #14233b;
}

/* Phone numbers and other links that sit on a line of their own get a taller
   tap area without moving anything around them. */
:where(.acc-visit__v, .acc-strip p, .acc-footer p, p.acc-i) > a {
	display: inline-block;
	padding-block: 0.7rem;
	margin-block: -0.7rem;
}

.acc-nowrap,
a[href^="tel:"] {
	white-space: nowrap;
}

/* Wide and narrow labels inside one button, so a phone shows "Call" and a desktop shows the number. */
.acc-narrow {
	display: none;
}

@media (max-width: 30rem) {
	.acc-wide {
		display: none;
	}

	.acc-narrow {
		display: inline;
	}
}

/* ---------- Solid icons ---------- */
/* Put acc-i plus one acc-i-NAME class on a paragraph, list item, group or button. */

.acc-i::before,
.wp-block-button.acc-i > .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--acc-icon) center / contain no-repeat;
	mask: var(--acc-icon) center / contain no-repeat;
}

:where(p, li).acc-i {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.wp-block-button.acc-i::before {
	content: none;
}

.wp-block-button.acc-i > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
}

.acc-i-pin{--acc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a7.5 7.5 0 0 0-7.5 7.5c0 5.6 6.5 12.6 6.8 12.9a1 1 0 0 0 1.4 0c.3-.3 6.8-7.3 6.8-12.9A7.5 7.5 0 0 0 12 1.5Zm0 10.5a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z'/%3E%3C/svg%3E")}
.acc-i-phone{--acc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6.6 2.2 9 2a1.5 1.5 0 0 1 1.5 1l1.2 3.4a1.5 1.5 0 0 1-.4 1.6L9.6 9.6a12 12 0 0 0 4.8 4.8L16 12.7a1.5 1.5 0 0 1 1.6-.4l3.4 1.2a1.5 1.5 0 0 1 1 1.5l-.2 2.4A3.5 3.5 0 0 1 18.3 21C9.8 20.6 3.4 14.2 3 5.7a3.5 3.5 0 0 1 3.6-3.5Z'/%3E%3C/svg%3E")}
.acc-i-clock{--acc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Zm1 10.6 4 2.4-1 1.7-5-3V6h2Z'/%3E%3C/svg%3E")}
.acc-i-cal{--acc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 1.5h2V4h6V1.5h2V4h2.5A1.5 1.5 0 0 1 21 5.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 20.5v-15A1.5 1.5 0 0 1 4.5 4H7Zm-2 8V20h14V9.5Zm2 2.5h3v3H7Z'/%3E%3C/svg%3E")}
.acc-i-book{--acc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 4.5C4.8 3.6 8.3 3.7 11 5.6v15.2c-2.7-1.8-6.2-1.9-9-1Zm11 1.1c2.7-1.9 6.2-2 9-1.1v15.3c-2.8-.9-6.3-.8-9 1Z'/%3E%3C/svg%3E")}
.acc-i-cup{--acc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 2h14l-.6 6.2A6.5 6.5 0 0 1 13 14v5h4v3H7v-3h4v-5a6.5 6.5 0 0 1-5.4-5.8Z'/%3E%3C/svg%3E")}
.acc-i-hands{--acc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.4 1.8c-.75 0-1.35.5-1.6 1.2L6.5 12.3c-.25.7-.4 1.45-.4 2.2v2.3h5.3Zm1.2 0c.75 0 1.35.5 1.6 1.2l3.3 9.3c.25.7.4 1.45.4 2.2v2.3h-5.3ZM5.2 18h6.2v4H5.2Zm7.4 0h6.2v4h-6.2Z'/%3E%3C/svg%3E")}
.acc-i-people{--acc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8 3a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm8.5 1a3 3 0 1 1 0 6 3 3 0 0 1 0-6ZM1.5 19c0-4 2.9-7 6.5-7s6.5 3 6.5 7v2h-13Zm14.5 2v-2c0-2-.6-3.8-1.7-5.2a5.7 5.7 0 0 1 2.2-.5c3 0 6 2.4 6 6.2V21Z'/%3E%3C/svg%3E")}
.acc-i-cross{--acc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10 1.5h4V7h5.5v4H14v11.5h-4V11H4.5V7H10Z'/%3E%3C/svg%3E")}

/* ---------- The church photo ---------- */

/* The figure sets the shape; the photo fills it and is cropped to fit. */
.wp-block-image.acc-church-photo {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.wp-block-image.acc-church-photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 46% 72%;
}

/* ---------- Things the church still has to supply ---------- */

mark.acc-todo {
	background: #fff1b8;
	color: #3a2f00;
	outline: 1.5px dashed #7a5a00;
	outline-offset: 1px;
	border-radius: 2px;
	padding: 0 0.3em;
	margin-inline: 0.1em;
	font-style: normal;
	font-weight: 400;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.acc-photo {
	display: grid;
	place-items: center;
	min-height: 12rem;
	padding: 1.25rem;
	border: 1.5px dashed currentColor;
	border-radius: 2px;
	background: repeating-linear-gradient(135deg, rgba(127, 127, 127, 0.16) 0 10px, rgba(127, 127, 127, 0.05) 10px 20px);
	text-align: center;
}

.acc-photo p {
	max-width: 22rem;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---------- Upcoming events list (markup comes from the Allison Church plugin) ---------- */

.acc-events {
	list-style: none;
	margin: 0;
	padding: 0;
}

.acc-event__date {
	display: grid;
	justify-items: start;
	align-content: start;
}

.acc-event__title,
.acc-event__note,
.acc-event__tag,
.acc-event__meta p {
	margin: 0;
}

.acc-event__meta {
	display: grid;
	gap: 0.3rem;
	align-content: start;
}

.acc-events-empty {
	margin: 0;
}

/* ---------- Plain pages (anything that is not one of the three designed pages) ---------- */

.acc-plain {
	max-width: 46rem;
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4.6vw, 3.5rem);
}

.acc-plain > * + *,
.acc-plain .wp-block-post-content > * + * {
	margin-block-start: 1.25rem;
}

.acc-plain li + li {
	margin-block-start: 0.4rem;
}

/* ---------- Inside the WordPress editor only ---------- */

/* Header, page and footer sit flush, as they do on the live site. */
.is-root-container > * {
	margin-block: 0;
}