/* Wepic — text content: page title band, articles, text pages (legal, policies), contact. */

/* Title band */
.page-hero { padding-block: clamp(20px, 3vw, 32px) clamp(32px, 5vw, 56px); background: var(--sand); }
.page-hero .eyebrow { margin-top: clamp(12px, 3vw, 28px); }
.page-hero .eyebrow a:hover { color: var(--accent-text); }
.page-hero__title { max-width: 22ch; margin: clamp(12px, 3vw, 28px) 0 .2em; font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); text-wrap: balance; }
.page-hero .eyebrow + .page-hero__title { margin-top: 0; }
.page-hero__lead { margin: 0; color: var(--text); font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); }
.page-hero__meta { margin: 0; color: var(--muted); font-size: .9rem; }

/* Reading column. Covers the blocks used in articles: paragraphs, headings, lists, images,
   galleries, buttons, columns. */
.prose { max-width: 720px; color: var(--text); font-size: clamp(1rem, .97rem + .15vw, 1.08rem); line-height: 1.75; }
.prose > * + * { margin-top: 1.1em; }
.prose p { margin: 0; }
.prose :is(h2, h3) { margin: 2em 0 .5em; color: var(--ink); scroll-margin-top: calc(var(--header-h) + 20px); }
.prose h2 { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.25rem); }
.prose h3 { font-family: var(--font); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.prose > :first-child { margin-top: 0; }
.prose a:not(.wp-block-button__link) { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:not(.wp-block-button__link):hover { color: var(--ink); }
.prose strong { color: var(--ink); }
.prose :is(ul, ol) { margin-bottom: 0; padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .45em; }
.prose ul li::marker { color: var(--accent); }
.prose figure { margin: 1.6em 0; }
.prose img { border-radius: var(--radius); }
.prose figcaption { margin-top: 8px; font-size: .85rem; color: var(--muted); text-align: center; }
.prose .wp-block-gallery, .prose .wp-block-jetpack-tiled-gallery .tiled-gallery__row {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.prose .wp-block-gallery > figure, .prose .wp-block-gallery .wp-block-image { margin: 0; }
.prose .wp-block-gallery img, .prose .tiled-gallery__item img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.prose .wp-block-gallery a, .prose .tiled-gallery__item a { display: block; overflow: hidden; border-radius: var(--radius); }
.prose .wp-block-gallery a img { transition: transform .5s; }
.prose .wp-block-gallery a:hover img { transform: scale(1.04); }
@media (min-width: 600px) {
	.prose .wp-block-gallery.columns-3, .prose .wp-block-gallery.columns-4, .prose .wp-block-gallery.columns-default { grid-template-columns: repeat(3, 1fr); }
	.prose .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
	.prose .wp-block-columns { display: flex; gap: 24px; }
	.prose .wp-block-column { flex: 1; }
}
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.prose .wp-block-button__link {
	display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: var(--radius);
	background: var(--charcoal); color: var(--white); font-weight: 700; font-size: .95rem; text-decoration: none;
}
.prose .wp-block-button__link:hover { background: var(--accent-text); color: var(--white); }

/* Article */
.article__head { max-width: calc(1000px + 2 * var(--gutter)); }
.article__title { max-width: none; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); }
.article__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; color: var(--muted); font-size: .9rem; }
.article__cover { max-width: calc(1000px + 2 * var(--gutter)); margin-top: clamp(-24px, -2vw, -12px); }
.article__cover img { width: 100%; max-height: 640px; object-fit: cover; border-radius: var(--radius-lg); }
.article__content, .article__share { margin-inline: auto; }
.article__content { padding-block: clamp(32px, 5vw, 56px) 0; }
.article__share {
	display: flex; align-items: center; gap: 8px; max-width: 720px; margin-block: 40px var(--section-space); padding-top: 24px;
	border-top: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: .9rem;
}
.article__share span:first-child { margin-right: 6px; }
.article__share a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); transition: background-color .15s, color .15s; }
.article__share a:hover { background: var(--charcoal); color: var(--white); box-shadow: none; }

/* Text pages with a table of contents */
.text-page__layout { display: grid; gap: 32px; }
.toc { align-self: start; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--sand); }
.toc__title { margin: 0 0 12px; color: var(--ink); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.toc a { display: block; padding: 6px 0; color: var(--text); font-size: .92rem; line-height: 1.35; transition: color .15s; }
.toc a:hover { color: var(--accent-text); }
/* Phones: the table of contents folds (toggle added by site.js), so the text starts on screen. */
@media (max-width: 767px) {
	.toc { padding-block: 4px; }
	.toc__title { margin: 0; }
	.toc .footer-fold { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
	.toc .footer-fold::after { content: ""; width: 8px; height: 8px; margin: -4px 4px 0 0; border: solid var(--accent); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); transition: transform .25s, margin .25s; }
	.toc .footer-fold[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); }
	.toc ol { padding-bottom: 16px; }
	.js .toc[data-fold]:not(.is-open) ol { display: none; }
}
@media (min-width: 1024px) {
	.text-page__layout.has-toc { grid-template-columns: 280px minmax(0, 720px); gap: clamp(48px, 6vw, 96px); }
	.toc { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* Contact form notices (shared with any future form) */
.notice { margin: 0 0 20px; padding: 14px 16px; border-radius: var(--radius); font-size: .95rem; }
.notice--success { background: #e9f6ee; color: #165c32; }
.notice--error { background: #fbeaea; color: #8a1f1f; }