/**
 * 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.2.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;
	}
}