/**
 * First Church Seattle — mobile UX improvements
 *
 * Targets the Maranatha 2.6 mobile breakpoint (max-width: 700px) and the
 * meanmenu plugin Maranatha uses for the mobile drawer. Goals:
 *
 *   1. ≥44×44 tap targets on every primary control (hamburger, "+" expanders,
 *      menu items, pagination).
 *   2. Skin the meanmenu dropdown into a full-screen drawer instead of a
 *      cramped top-right panel.
 *   3. Lighter touches: skip-link styling, button min-height, breadcrumb
 *      trimming, sermon-archive filter row breathing room.
 *
 * Convention: every rule is scoped to a mobile media query unless the
 * change is intentionally cross-viewport (the skip link, breadcrumb cleanup).
 *
 * Brand maroon: #70334e. Defined locally so we don't depend on parent vars.
 */

:root {
	--fcs-maroon: #70334e;
	--fcs-maroon-dark: #5a2940;
	--fcs-text-light: #ffffff;
	--fcs-tap-min: 44px;
}

/* -------------------------------------------------------------------------
 * SITE POLISH — cross-viewport visual cleanup
 *
 * Applies at all widths (no @media wrapper). Targets the visual rhythm of
 * interior pages so the hero isn't a giant faded photo, action buttons
 * read as primary CTAs instead of orphan outlined pills, and the embed
 * region has a clear container.
 *
 * Scope: every page except the homepage (which uses a different template
 * with the widget-based hero sections — these rules don't apply there
 * because the homepage doesn't render #maranatha-banner).
 * --------------------------------------------------------------------- */

/* -- Hero / banner --
   Original behavior: full-width strip with a maroon background and a
   faded photo overlay (#maranatha-banner-image) sized to ~289px tall.
   The photo is often an arbitrary frame-grab and the banner eats too
   much of the viewport. Cap height, drop the photo, center the title. */

#maranatha-banner {
	min-height: 0 !important;
	max-height: 152px !important;
	height: auto !important;
	padding: 36px 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

#maranatha-banner-image {
	display: none !important; /* drop the faded photo overlay */
}

/* Parent uses display:table with 8% top/bottom padding (which on a
   1000px viewport adds ~160px). Reset both. */
#maranatha-banner-inner {
	display: flex !important;
	width: 100% !important;
	height: auto !important;
	padding: 0 !important;
	align-items: center !important;
	justify-content: center !important;
}

#maranatha-banner-title {
	display: block !important;
	padding: 0 !important;
}

#maranatha-banner-title .maranatha-h1,
#maranatha-banner .maranatha-h1 {
	font-size: 36px !important;
	line-height: 1.15 !important;
	font-weight: 300 !important;
	letter-spacing: 0.01em !important;
	margin: 0 !important;
}

/* -- Article spacing --
   Parent applies `margin-top: 63px` to <main #maranatha-content> and
   `margin-bottom: 90px` after it. Collapse both so the breadcrumb sits
   tight against the action card. */

#maranatha-content,
.maranatha-content,
main#maranatha-content {
	margin-top: 0 !important;
	margin-bottom: 32px !important;
	padding-top: 20px !important;
	min-height: 0 !important;
}

.maranatha-entry-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.maranatha-entry-content > *:first-child {
	margin-top: 0 !important;
}

/* The breadcrumb strip itself often gets extra padding from the parent
   theme — tighten that too. */
#maranatha-header-bottom {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

/* -- Action button card --
   The first wp-block-buttons group on a page acts as the primary action
   row. Wrap it in a soft card and make the buttons solid maroon. */

.maranatha-entry-content > .wp-block-buttons:first-child {
	background: #faf6f8;
	border: 1px solid #ebe1e5;
	border-radius: 14px;
	padding: 24px;
	margin: 0 0 40px 0 !important;
	gap: 12px !important;
	justify-content: center !important;
	box-shadow: 0 1px 3px rgba(112, 51, 78, 0.04);
}

/* Solid maroon CTA — Maranatha uses .maranatha-button on action links
   inside .wp-block-buttons. The parent theme defaults to outlined; we
   fill them so they read as primary CTAs. */
.maranatha-entry-content .wp-block-buttons a.maranatha-button {
	background-color: #70334e !important;
	color: #ffffff !important;
	border: 1px solid #70334e !important;
	font-weight: 600 !important;
	letter-spacing: 0.03em !important;
	border-radius: 999px !important;
	box-shadow: 0 1px 2px rgba(112, 51, 78, 0.18);
	transition: background-color 0.12s ease-out, transform 0.12s ease-out;
	text-decoration: none !important;
}

.maranatha-entry-content .wp-block-buttons a.maranatha-button:hover,
.maranatha-entry-content .wp-block-buttons a.maranatha-button:focus {
	background-color: #5a2940 !important;
	border-color: #5a2940 !important;
	color: #ffffff !important;
}

.maranatha-entry-content .wp-block-buttons a.maranatha-button:active {
	transform: translateY(1px);
}

/* CTC archive light buttons + the theme's own .ctc-button-light keep
   their outlined treatment so primary CTAs stand out by contrast. */
.maranatha-entry-content .ctc-button-light,
.maranatha-entry-content a.ctc-button-light {
	background-color: transparent !important;
	color: #70334e !important;
	border: 1px solid #70334e !important;
	box-shadow: none !important;
}

/* -- YouTube / livestream embed framing --
   The "livestream" element on /worship/live/ is a wp-block-image figure
   wrapping a link to YouTube (not a real embed). Treat the figure that
   contains a YouTube link as a framed callout. */

.maranatha-entry-content figure.wp-block-image:has(a[href*="youtube.com"]),
.maranatha-entry-content figure.wp-block-image:has(a[href*="youtu.be"]) {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
	margin: 8px 0 32px !important;
}

.maranatha-entry-content figure.wp-block-image:has(a[href*="youtube.com"]) img,
.maranatha-entry-content figure.wp-block-image:has(a[href*="youtu.be"]) img {
	display: block;
	width: 100%;
	height: auto;
}

/* -- Separators --
   The theme renders <hr.wp-block-separator> as a tiny 200px line floating
   in space. Hide them entirely on interior pages — the visual grouping
   between sections (image + p + button as one unit) does the work. */

.maranatha-entry-content hr.wp-block-separator {
	display: none !important;
}

/* -- Section grouping --
   Each repeated CTA section on /worship/live/ (and similar) follows the
   pattern:
       <figure.wp-block-image>     ← banner image
       <p>                          ← description
       <div.wp-block-buttons>       ← solid CTA
   They're flat siblings in the DOM. To make them read as one visual unit
   rather than three floating elements, we use tight inter-element margins
   and a generous margin BEFORE each figure (which marks the start of the
   next section). */

.maranatha-entry-content figure.wp-block-image.size-large {
	margin: 40px auto 0 !important; /* gap above (between sections) */
	max-width: 480px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.maranatha-entry-content figure.wp-block-image.size-large img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 180px;
	object-fit: cover;
}

/* The YouTube embed figure: don't crop its image. */
.maranatha-entry-content figure.wp-block-image.size-large:has(a[href*="youtube.com"]) img,
.maranatha-entry-content figure.wp-block-image.size-large:has(a[href*="youtu.be"]) img {
	max-height: none !important;
	object-fit: contain !important;
}

/* The paragraph that follows a section image: snug to image, breathing
   room before the button. */
.maranatha-entry-content figure.wp-block-image + p {
	max-width: 540px;
	margin: 16px auto 16px !important;
	line-height: 1.55;
	text-align: center;
}

/* Continuation paragraph(s) between the first <p> and the button: stay snug */
.maranatha-entry-content figure.wp-block-image + p + p {
	margin-top: -4px !important;
}

/* The buttons block that closes a section: snug to the paragraph above,
   centered, with breathing room only on the top of the next figure. */
.maranatha-entry-content p + .wp-block-buttons {
	margin-top: 4px !important;
	margin-bottom: 0 !important;
	justify-content: center !important;
}

/* -- Default paragraph rhythm -- */

.maranatha-entry-content p {
	line-height: 1.6;
	margin-bottom: 1em;
}

/* -- Compact CTA section layout at desktop --
   At ≥768px width, lay the repeated "image | (paragraph + button)"
   sections side-by-side. Uses CSS grid via :has() to detect the pattern
   without changing the HTML. Falls back to stacked at narrower widths. */

@media (min-width: 768px) {
	/* Each "section image" gets the same float-left-ish layout. Because
	   the items are flat siblings, we use a grid container only on the
	   entry-content itself and rely on auto-flow + spans. Simpler approach:
	   limit the image width and pull the following <p> and buttons to its
	   right with grid-template via subgrid... ✗ too fragile.
	   Pragmatic: make each figure narrower and float it left, then let
	   the paragraph + button wrap to its right. */

	/* Section-banner figures (NOT the YouTube/livestream embed) become a
	   240px image floated to the left of their following paragraph + CTA. */
	.maranatha-entry-content figure.wp-block-image.size-large:not(:has(a[href*="youtube.com"])):not(:has(a[href*="youtu.be"])) {
		float: left;
		width: 240px;
		max-width: 240px;
		margin: 40px 24px 8px 0 !important;
	}

	/* The YouTube embed figure stays full-width and centered. */
	.maranatha-entry-content figure.wp-block-image.size-large:has(a[href*="youtube.com"]),
	.maranatha-entry-content figure.wp-block-image.size-large:has(a[href*="youtu.be"]) {
		max-width: 720px;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Clear the float after each button group so sections don't bleed. */
	.maranatha-entry-content p + .wp-block-buttons {
		overflow: hidden; /* establishes BFC, clears float */
		padding-bottom: 8px;
		justify-content: flex-start !important;
	}

	.maranatha-entry-content figure.wp-block-image + p {
		text-align: left;
		max-width: none;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* -------------------------------------------------------------------------
 * Skip-to-content link — visible on focus, off-screen otherwise.
 * Cross-viewport: useful at any size.
 * --------------------------------------------------------------------- */

.fcs-skip-link {
	position: absolute;
	left: 8px;
	top: -100px;
	z-index: 100000;
	padding: 12px 18px;
	background: var(--fcs-maroon);
	color: var(--fcs-text-light);
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	transition: top 0.15s ease-out;
}

.fcs-skip-link:focus,
.fcs-skip-link:focus-visible {
	top: 8px;
	outline: 3px solid #ffd54d;
	outline-offset: 2px;
	clip: auto !important;
	width: auto !important;
	height: auto !important;
	white-space: nowrap !important;
}

/* The hidden span we inject as the actual jump target */
#main-content:focus {
	outline: none;
}

/* -------------------------------------------------------------------------
 * Breadcrumb: drop the final segment when it duplicates the page H1
 * (which it does on every CTC archive + interior page in Maranatha).
 * Cross-viewport — the redundancy is ugly on desktop too.
 * --------------------------------------------------------------------- */

/* Maranatha's breadcrumb structure (rendered by Church Theme Framework):
   <div class="ctfw-breadcrumbs">
     <a>Home</a> <span>/</span> <a>Worship</a> <span>/</span> <a>Worship</a>
   </div>
   The trailing <a> repeats the page H1. Hide it plus the trailing separator. */
.ctfw-breadcrumbs > a:last-child {
	display: none !important;
}
.ctfw-breadcrumbs > .maranatha-breadcrumb-separator:last-of-type {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * MOBILE ONLY — everything below targets the Maranatha mobile breakpoint.
 * --------------------------------------------------------------------- */

@media (max-width: 700px) {

	/* -- Hamburger reveal: enlarge tap target without enlarging the icon -- */

	a.meanmenu-reveal {
		/* Original was 22×18. meanmenu's .mean-bar wraps the reveal in a
		   block-level container that stretches; we explicitly size to
		   44×44 (with !important to beat meanmenu's inline styles) and
		   use inline-flex so the anchor doesn't expand to fill .mean-bar. */
		width: var(--fcs-tap-min) !important;
		height: var(--fcs-tap-min) !important;
		min-width: var(--fcs-tap-min) !important;
		min-height: var(--fcs-tap-min) !important;
		padding: 13px !important;
		box-sizing: border-box !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		top: 8px !important;
	}

	/* meanmenu uses inline styles for the three bars; the resulting glyph
	   sits in the top-left of the padded box. Re-center it. */
	a.meanmenu-reveal span {
		margin: 0 auto !important;
	}

	/* -- Mobile drawer ----------------------------------------------------
	   Meanmenu structure:
	     <div class="mean-bar">
	       <a class="meanmenu-reveal">… hamburger</a>
	       <nav class="mean-nav">
	         <ul>…</ul>          <-- inline display:none/block toggled by JS
	       </nav>
	     </div>
	   .mean-nav is always rendered; the inner <ul> is the toggled element.
	   We size & color the <ul> as the drawer, and keep .mean-nav itself
	   layout-only. Note: we deliberately avoid the child-combinator (> ul)
	   here — an earlier attempt with `.mean-nav > ul` was mis-parsed by the
	   browser, causing the drawer styles to bleed onto .mean-nav. Using a
	   plain descendant selector + tag scoping works reliably. */

	#maranatha-header-mobile-menu nav.mean-nav {
		background-color: transparent !important;
		float: none !important;
		width: auto !important;
		height: auto !important;
	}

	/* The actual drawer — only painted when meanmenu shows the list
	   (meanmenu toggles inline display:none/block on this ul). */
	#maranatha-header-mobile-menu nav.mean-nav ul {
		list-style: none !important;
	}

	#maranatha-header-mobile-menu nav.mean-nav > ul {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		left: auto !important;
		width: 88vw !important;
		max-width: 360px !important;
		height: 100vh !important;
		margin: 0 !important;
		padding-top: 72px !important;
		padding-bottom: 24px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		background-color: #70334e !important;
		box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35) !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		z-index: 99990 !important;
		box-sizing: border-box !important;
	}

	/* Each top-level link gets a comfortable tap row */
	#maranatha-header-mobile-menu .mean-nav ul li {
		display: block !important;
		width: 100% !important;
		border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
	}

	#maranatha-header-mobile-menu .mean-nav ul li:first-child {
		border-top: none !important;
	}

	#maranatha-header-mobile-menu .mean-nav ul li a {
		display: block !important;
		padding: 16px 24px !important;
		min-height: var(--fcs-tap-min) !important;
		font-size: 17px !important;
		font-weight: 500 !important;
		color: var(--fcs-text-light) !important;
		text-transform: uppercase !important;
		letter-spacing: 0.04em !important;
		line-height: 1.3 !important;
		text-decoration: none !important;
		box-sizing: border-box !important;
		width: auto !important;
		float: none !important;
	}

	/* Nested sub-items: indent and soften */
	#maranatha-header-mobile-menu .mean-nav ul li ul li a {
		padding-left: 40px !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		color: rgba(255, 255, 255, 0.85) !important;
		background: rgba(0, 0, 0, 0.15) !important;
	}

	#maranatha-header-mobile-menu .mean-nav ul li ul li ul li a {
		padding-left: 56px !important;
		font-size: 14px !important;
	}

	/* Hover/focus/active feedback */
	#maranatha-header-mobile-menu .mean-nav ul li a:hover,
	#maranatha-header-mobile-menu .mean-nav ul li a:focus {
		background: var(--fcs-maroon-dark) !important;
		outline: none !important;
	}

	#maranatha-header-mobile-menu .mean-nav ul li a:focus-visible {
		outline: 2px solid #ffd54d !important;
		outline-offset: -2px !important;
	}

	/* The "+ / -" expanders for sub-menus: 44×44 minimum, right-aligned */
	#maranatha-header-mobile-menu .mean-nav ul li a.mean-expand {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		width: 56px !important;
		height: 56px !important;
		min-height: 56px !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-size: 22px !important;
		font-weight: 300 !important;
		background: transparent !important;
		border: none !important;
		border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
	}

	/* The expanders share .mean-clicked when open — flip + to -, rotate icon */
	#maranatha-header-mobile-menu .mean-nav ul li a.mean-clicked {
		background: rgba(0, 0, 0, 0.25) !important;
	}

	/* meanmenu's close (X) button is rendered as an <i> inside meanmenu-reveal.
	   Make sure it's centered + visible against the maroon header. */
	a.meanmenu-reveal i {
		color: var(--fcs-text-light) !important;
		font-size: 22px !important;
	}

	/* Search field meanmenu drops into the menu — make it usable */
	#maranatha-header-mobile-menu .mean-nav form,
	#maranatha-header-mobile-menu .mean-nav .searchform,
	#maranatha-header-mobile-menu .mean-nav #searchform {
		padding: 16px 24px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	#maranatha-header-mobile-menu .mean-nav input[type="text"],
	#maranatha-header-mobile-menu .mean-nav input[type="search"] {
		width: 100% !important;
		min-height: var(--fcs-tap-min) !important;
		padding: 10px 14px !important;
		font-size: 16px !important; /* iOS won't zoom on focus if ≥16px */
		border: 1px solid rgba(255, 255, 255, 0.3) !important;
		border-radius: 4px !important;
		background: rgba(255, 255, 255, 0.95) !important;
		color: #222 !important;
	}

	/* -- Body lock when drawer is open (added by us via JS below… or rely on
	      meanmenu's .mean-nav being position:fixed which already neutralizes
	      most overflow). Skipping a JS lock for now; the fixed drawer handles
	      it well enough on iOS/Android. -- */

	/* -- Buttons: enforce 44px min everywhere -- */

	.button,
	.btn,
	a.button,
	a.btn,
	input[type="submit"],
	input[type="button"],
	button,
	.ctc-button,
	.ctfw-button,
	.wp-block-button__link {
		min-height: var(--fcs-tap-min) !important;
		padding: 12px 20px !important;
		font-size: 15px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* -- Pagination dots/arrows: enforce 44px -- */

	.pagination a,
	.pagination span,
	.nav-links a,
	.page-numbers,
	a.page-numbers,
	.maranatha-pagination a {
		min-width: var(--fcs-tap-min) !important;
		min-height: var(--fcs-tap-min) !important;
		padding: 10px 14px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
	}

	/* -- Sermon / event archive filter row: stack the dropdown headers on
	      narrow screens instead of squishing them into one tight row -- */

	.ctc-archive-nav,
	.ctc-sermon-filters,
	.ctc-event-filters,
	#maranatha-archives {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
		justify-content: center !important;
	}

	.ctc-archive-nav > *,
	#maranatha-archives > * {
		flex: 1 1 calc(50% - 8px) !important;
		min-height: var(--fcs-tap-min) !important;
	}

	/* -- Worship page hero CTAs (Bulletin / Communication Card / Prayer
	      Request / Give): currently rendered as four small pills in a 2×2.
	      Bump touch area and let "Communication Card" sit on one line. -- */

	.ctfw-section-buttons a,
	.entry-content .wp-block-buttons .wp-block-button a {
		min-height: 52px !important;
		padding: 14px 18px !important;
		font-size: 14px !important;
		white-space: nowrap !important;
	}

	/* -- Homepage circle CTAs: keep them circular but bump tap area + readable
	      label sizes. The theme renders these via .ctfw-section-button. -- */

	.ctfw-section-button,
	.ctfw-section .ctfw-button-link {
		min-width: 96px !important;
		min-height: 96px !important;
	}

	.ctfw-section-button .ctfw-section-button-text,
	.ctfw-section-button span {
		font-size: 12px !important;
		line-height: 1.25 !important;
	}

	/* -- Header logo: cap its file-rendered height on mobile so a huge source
	      PNG doesn't paint a giant logo. (Real fix is to upload a smaller
	      logo file; this just bounds the display dimensions.) -- */

	#maranatha-header .maranatha-header-logo img,
	#maranatha-header img.maranatha-header-logo,
	#maranatha-header-logo img {
		max-height: 36px !important;
		width: auto !important;
	}

	/* -- Footer social icons: make sure they hit 44px -- */

	#maranatha-footer .maranatha-footer-social a,
	.maranatha-footer-social li a {
		min-width: var(--fcs-tap-min) !important;
		min-height: var(--fcs-tap-min) !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* -- General: prevent iOS auto-zoom on form focus by ensuring ≥16px on
	      every text input. -- */

	input[type="text"],
	input[type="email"],
	input[type="search"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	textarea,
	select {
		font-size: 16px !important;
	}

	/* -- Body content: a touch more horizontal breathing room.
	      The default theme padding feels tight against the screen edges. -- */

	.entry-content,
	.maranatha-content > article {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}

/* -------------------------------------------------------------------------
 * Reduced-motion preference — turn off the drawer transition.
 * --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fcs-skip-link {
		transition: none !important;
	}
}