/**
 * Theme Name:  GeneratePress Child - Step 2
 * Description: GeneratePress child theme for Step 2 Men's Group. Holds site CSS ported from the mai-success theme; all business logic lives in the step-2-custom plugin.
 * Template:    generatepress
 * Version:     1.3.0
 * Author:      Mark Chouinard
 * License:     GPL-2.0-or-later
 * Text Domain: generatepress-child
 */

/* ---------------------------------------------------------------------------
 * GenerateBlocks Shape dividers (waves, etc.) render position:absolute with
 * z-index:auto. Per CSS painting order, an absolutely positioned element
 * with z-index:auto paints ABOVE static in-flow siblings regardless of DOM
 * order — so a shape placed before a heading covers it even without any
 * z-index conflict. Give element wrappers their own stacking context and
 * keep shapes behind everything else inside it, site-wide.
 * ------------------------------------------------------------------------ */
.gb-element {
	isolation: isolate;
}

.gb-shape {
	z-index: -1;
}

/* border-radius only rounds a box's own background — it doesn't clip
 * children. A shape divider is a rectangular child painting flush to the
 * section's edges, so it squares off any rounded corner it overlaps unless
 * the section also clips its overflow. Scoped to elements that actually
 * contain a shape divider, so unrelated .gb-element blocks (shadows,
 * intentionally-overflowing content) aren't affected. */
.gb-element:has(> .gb-shape) {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * TSML meetings page (ported from mai-success)
 * ------------------------------------------------------------------------ */
.post-type-archive-tsml_meeting .site-footer {
	margin-top: 100px;
}

.tsml .page-header {
	justify-content: space-between;
	align-items: flex-end;
}

#tsml .page-header h1 {
	color: #3b3b3b;
}

#tsml #meetings .results #table-wrapper {
	margin-bottom: 200px;
}

/* ---------------------------------------------------------------------------
 * Homepage counters (ported from mai-success)
 * ------------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {
	#s2-counters {
		flex-direction: column !important;
	}
	.s2-counter {
		padding-bottom: 20px;
	}
	.s2-counter:last-of-type {
		padding-bottom: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Misc content styles (ported from mai-success)
 * ------------------------------------------------------------------------ */
ol.step2-lettered {
	list-style: upper-alpha;
}

/* ---------------------------------------------------------------------------
 * Birthday archive cards (ported from mai-success; Mai CSS variables replaced
 * with GeneratePress global colors + fixed fallbacks)
 * ------------------------------------------------------------------------ */
article.birthday.entry,
article.birthday {
	border: 2px solid var(--accent, #8693a6);
	padding: 1em;
	margin-bottom: 0.5em;
	border-radius: 10px;
}

article.birthday .entry-title {
	font-size: 1.5rem;
	cursor: default;
}

article.birthday .entry-title a {
	color: inherit;
	text-decoration: none;
	cursor: default;
}

article.birthday .entry-content h2 {
	font-size: 1.25rem;
	cursor: help;
}

article.birthday .entry-content h2 span {
	font-size: 1rem;
	color: var(--accent, #066aab);
}

article.birthday .entry-content .num-days {
	display: none;
}

/* Hide entry meta (date/author) on birthday archives; the card content is the data. */
.post-type-archive-birthday .entry-meta {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Dark-background text utility (ported from the retired step2-birthdays
 * plugin's common.scss). General-purpose — add "step2-dark-bg" as an
 * additional CSS class on any block sitting on a dark background. Still
 * used by content authored before this class had a home in the theme.
 * ------------------------------------------------------------------------ */
.step2-dark-bg {
	color: #f4f4f4;
}

.step2-dark-bg h2 {
	color: #f4f4f4;
	text-shadow: 2px 2px 2px #6c747d;
}

/* ---------------------------------------------------------------------------
 * Daily Reflection block: its inner container is capped at 600px by the
 * plugin's inline style but never given auto side margins, so it sits left.
 * ------------------------------------------------------------------------ */
.wp-block-step2-daily-reflection .daily-container {
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------------
 * Homepage post cards (query loop + featured-image cover)
 * ------------------------------------------------------------------------ */
.s2-post-card .s2-card-title a {
	color: inherit;
	text-decoration: none;
}

.s2-post-card .s2-card-title a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * FacetWP (ported from mai-success)
 * ------------------------------------------------------------------------ */
input.facetwp-slider-reset {
	background-color: var(--accent, #066aab);
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Stack the tagline under the logo on tablet and below.
 *
 * The site title is rendered as the logo image, not text — .site-branding
 * holds only .site-description. GeneratePress lays the container out as
 * `display:inline-flex; align-items:center`, so logo and tagline sit side by
 * side and the tagline is pushed off to the right on narrow screens.
 *
 * Switching to a column puts the tagline directly beneath the logo. The
 * theme's `margin-right: 1em` on .site-logo is horizontal spacing that no
 * longer applies once stacked, so it becomes bottom spacing instead.
 *
 * 1024px is GeneratePress's own tablet breakpoint (it also uses 768px and
 * 1200px), so this switches where the rest of the theme already reflows.
 * ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.site-branding-container {
		flex-direction: column;
		align-items: flex-start;
	}

	.site-branding-container .site-logo {
		margin-right: 0;
		margin-bottom: 0.25em;
	}
}

/* ---------------------------------------------------------------------------
 * Body typography for readability.
 *
 * GeneratePress defaults to 17px / 1.5. Most of the group's members are older
 * and several have failing eyesight, so the patterns used to compensate by
 * setting whole paragraphs bold — which backfires: bold signals by contrast
 * against normal weight, so when half the page is bold nothing stands out, and
 * bold-italic letterforms are harder to read than plain text at a larger size.
 *
 * Size, leading and measure do the job properly, and unlike per-paragraph
 * markup they also improve the existing Gazette archive.
 *
 * Kept here rather than in the Customizer deliberately: Customizer typography
 * is stored as theme mods in the database, which bin/deploy-staging.sh does not
 * carry, so it would drift between local, staging and production.
 * ------------------------------------------------------------------------ */
body {
	font-size: 18px;
	line-height: 1.6;
}

/* Cap the measure so long paragraphs stay scannable. ch is relative to the
 * font, so this tracks any future size change. Applied to the text flow only,
 * leaving full-width sections and grids alone. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote {
	max-width: 70ch;
}

/* Blockquotes carry the Step 2 Statement and the Step Two quotation, so give
 * them a visible edge rather than relying on italics. */
.entry-content blockquote.wp-block-quote {
	border-left: 4px solid var(--accent, #066aab);
	padding-left: 1em;
}

/* ---------------------------------------------------------------------------
 * Featured images.
 *
 * The size filter in functions.php decides which FILE is served; this decides
 * how much room it takes on the page. Without a cap, a tall or square upload
 * pushes the article text below the fold — the Gazette headers are 4:3, so a
 * full-width one ran about 700px tall on a desktop.
 *
 * object-fit: cover crops to the box instead of squashing the image, and
 * needs an explicit height to work against.
 * ------------------------------------------------------------------------ */
/* Single post: the image sits at its natural size, centred, with a height cap.
 *
 * GeneratePress only sets `line-height: 0` on this wrapper, and an <img> is
 * inline, so anything narrower than the container aligns left by default.
 *
 * Deliberately NOT width:100% here. The filter in functions.php serves a 768px
 * file, and stretching that across a wider container upscales it — visibly soft
 * on the Gazette headers. Capping the height and letting the width follow keeps
 * it sharp; margin-inline centres it once it is a block. */
.featured-image img {
	display: block;
	margin-inline: auto;
	max-width: 100%;
	max-height: 320px;
	width: auto;
	height: auto;
}

/* Archives keep the full-width card crop: these are uniform tiles in a list, so
 * a consistent box matters more than showing the whole image. */
.post-image img {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
}

@media (max-width: 768px) {
	.featured-image img,
	.post-image img {
		max-height: 200px;
	}
}