/*
Theme Name: Ric Good Gather
Author: RicWork
Author URI: https://www.ricwork.net
Description: A lightweight block theme for community organizations and nonprofits that bring people together. Modern sans-serif typography, an evergreen and sage palette on warm off-white, full Site Editor customization, and a purpose-built pattern library.
Version: 1.0.1
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ric-good-gather
Tags: full-site-editing, block-patterns, block-styles, style-variations, wide-blocks, editor-style
*/

/*
 * Ric Good Gather is a block theme: nearly all styling lives in theme.json
 * and is edited through the Site Editor. The rules below cover only what
 * theme.json cannot express (focus rings, link underlines, small helpers).
 */

/* Text selection. */
::selection {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

/* Visible keyboard focus everywhere. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 1px;
}

/* Comfortable inline links: always underlined, gently, with a soft decoration color. */
a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

a:hover,
a:focus-visible {
	text-decoration-color: currentColor;
}

/* Interface links that should never carry an underline. */
.wp-block-navigation a,
.wp-block-button a,
.wp-block-site-title a,
.wp-block-post-title a,
.wp-block-social-links a,
.wp-block-query-pagination a,
.wp-block-latest-posts a,
.wp-block-post-date a,
.wp-block-post-author-name a,
.wp-block-post-terms a,
.wp-block-tag-cloud a,
.wp-block-comments-navigation a {
	text-decoration: none;
}

.wp-block-navigation a:hover,
.wp-block-site-title a:hover,
.wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
}

/* Brand and title links keep the surrounding text color. */
.wp-block-navigation a,
.wp-block-site-title a,
.wp-block-post-title a {
	color: inherit;
}

/* Buttons: gentle color transition, pointer cursor. */
.wp-element-button {
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Small uppercase label, used as section eyebrows throughout patterns.
 * Registered on core/paragraph as the "Label" block style. Size and weight
 * give the section name clear presence above the heading; vertical spacing
 * to the heading comes from the section-heading group's blockGap, so the
 * label-to-heading and heading-to-description gaps stay equal. */
.is-style-label {
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}

/* A centered section label expands to fill its line so the centered text
 * sits in the middle of the heading container instead of shrinking to the
 * label's own width. Used by centered section-heading groups. */
.is-style-label.has-text-align-center {
	display: block;
}

/* Filled button that reads as light-on-dark regardless of palette:
 * used for the primary action on inverse (dark) sections.
 * Specificity is raised above the global button styles from theme.json. */
.wp-block-button.is-style-inverse .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-inverse .wp-block-button__link:hover,
.wp-block-button.is-style-inverse .wp-block-button__link:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 88%, var(--wp--preset--color--contrast));
}

/* Monogram avatars used in team patterns until real photos are added. */
.wp-block-group.is-style-monogram {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--accent-1);
}

/* Icons used inside patterns: a small, consistent line-art system built on the
 * core Icon block and the theme's own icon collection (assets/icons, registered
 * in functions.php). The icon sanitizer keeps shape data only, so the stroke
 * properties that give the set its look are applied here. The chip gives each
 * icon a uniform tile that aligns cleanly next to headings and paragraphs, and
 * the icons are tinted with the accent color. */
.wp-block-icon.ric-good-gather-icon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
}

.wp-block-icon.ric-good-gather-icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--wp--preset--color--accent-1);
}

.ric-good-gather-icon-chip {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	flex: none;
}

/* Footer contact rows use bare inline icons (no tile or border) so the rows
 * stay compact: the glyph is small, sits in the text line, and adds no extra
 * row height or visual weight between contact items. */
.ric-good-gather-footer-icon {
	display: grid;
	place-items: center;
	flex: none;
}

.ric-good-gather-footer-icon .wp-block-icon.ric-good-gather-icon {
	width: 1rem;
	height: 1rem;
}

/* The theme runs on WordPress 6.9, while the Icons API its icon set is
 * registered with arrived in 7.1. On an older release the core Icon block
 * renders nothing, which would leave the two wrappers above as empty boxes:
 * the chip in particular carries a background and a border, so it would read
 * as a broken tile rather than a missing icon. functions.php adds the body
 * class only when the API is missing, so these rules never apply to a site
 * where the icons render. */
.ric-good-gather-no-icons .ric-good-gather-icon-chip,
.ric-good-gather-no-icons .ric-good-gather-footer-icon {
	display: none;
}

/* Purely decorative connecting line between the numbered steps in the
 * "How We Make an Impact" pattern. It runs through the column gap at the
 * height of each step's icon chip, is hidden below the mobile breakpoint
 * (where steps stack), and is never exposed to assistive technology. */
.ric-good-gather-steps > .wp-block-column {
	position: relative;
}

@media (min-width: 782px) {
	.ric-good-gather-steps > .wp-block-column + .wp-block-column::before {
		content: "";
		position: absolute;
		top: 1.25rem;
		left: calc(-1 * var(--wp--preset--spacing--lg));
		width: var(--wp--preset--spacing--lg);
		height: 1px;
		background: var(--wp--preset--color--base-3);
	}
}

/* FAQ rows built on the native Details block: question rows share the
 * theme's section rhythm, with a separator under each item and the native
 * disclosure marker tinted with the accent color. The marker stays visible so
 * the collapsed/expanded state remains announced by assistive technology;
 * keyboard interaction and focus rings are native to <summary>. */
.ric-good-gather-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--base-3);
}

.ric-good-gather-faq .wp-block-details summary {
	padding: var(--wp--preset--spacing--sm) 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.ric-good-gather-faq .wp-block-details summary::marker {
	color: var(--wp--preset--color--accent-1);
	font-size: 1.25em;
}

.ric-good-gather-faq .wp-block-details summary:hover {
	color: var(--wp--preset--color--accent-1);
}

.ric-good-gather-faq .wp-block-details > :not(summary) {
	padding: 0 0 var(--wp--preset--spacing--sm);
}

/* Outline buttons use the surrounding text color so they stay readable on
 * light bands, on base-2 bands, and on dark/accent bands alike. The border
 * width is subtracted from the vertical padding so outline buttons match the
 * height of filled buttons placed next to them. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid currentColor;
	color: inherit;
	padding-top: calc(0.9rem - 1px);
	padding-bottom: calc(0.9rem - 1px);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: color-mix(in srgb, currentColor 10%, transparent);
	color: inherit;
}

/* The active page in the main menu stays clearly marked without relying on
 * color alone: it is tinted with the accent color and underlined. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

/* Understated text/link-style button. */
.wp-block-button.is-style-text-link .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--accent-1);
	padding-left: 0;
	padding-right: 0;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
	text-underline-offset: 0.22em;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover,
.wp-block-button.is-style-text-link .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--accent-1);
	text-decoration-color: currentColor;
}

/* The Read More block inside post grids reads as a small accent link,
 * matching the theme's text-link button style. */
.wp-block-read-more {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.4;
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
	text-underline-offset: 0.22em;
}

.wp-block-read-more:hover,
.wp-block-read-more:focus-visible {
	text-decoration-color: currentColor;
}

/* Images inherit any radius applied to their figure/block wrapper. */
.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: inherit;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}