/*
Theme Name: Ministry Child Theme (Twenty Twenty)
Theme URI: https://elderlyministry.com
Description: Child theme of Twenty Twenty for the Macedonia Independent Methodist Church / Elderly Ministry site. Adds a three-column footer widget area and light, low-risk styling refinements. Keeps Classic Editor and Classic Widgets fully intact.
Author: Jolene's Web Designs and More
Author URI: https://joleneswebdesigns.com
Template: twentytwenty
Version: 1.0.0
Requires at least: 5.6
Tested up to: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwenty-ministry-child
*/

/* =========================================================================
   ONE KNOB YOU CAN CHANGE
   This tints the footer's top accent bar and the underline under each
   footer widget title. It is separate from the Customizer "Accent Color"
   (which controls links and buttons across the site). Set the Customizer
   accent under Appearance > Customize > Colors, and if you want the footer
   trim to match, change the hex on the next line to the same value.
   Dignified options: deep red #8a3324, calm teal #34697a, navy #2c3e56.
   ========================================================================= */
:root {
	--footer-accent: #34697a;
}

/* =========================================================================
   1. READABILITY  (gentle, for an older audience)
   ========================================================================= */
.entry-content {
	line-height: 1.65;
}

/* Photos in page content get a soft rounded edge so snapshots
   (like the church photo) look a little more finished. */
.entry-content img {
	border-radius: 6px;
}

/* =========================================================================
   2. RESPONSIVE YOUTUBE
   Ken's pages use raw <iframe> embeds, which can overflow on phones and
   tablets. This makes any YouTube iframe scale to a clean 16:9 box.
   ========================================================================= */
.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="youtu.be"] {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 1.5rem auto;
	border: 0;
}

/* =========================================================================
   3. FOOTER WIDGET AREA  (the "more flattering" part)
   ========================================================================= */

/* A warm off-white band with a slim colored top edge to set the
   footer apart from the page without shouting. */
.footer-nav-widgets-wrapper {
	background-color: #f6f4ef;
	border-top: 4px solid var(--footer-accent);
}

/* Turn the two-column footer into a responsive grid that grows to
   three columns on wider screens. Stacks to one column on phones. */
.footer-widgets-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem 4rem;
	margin: 0 auto;
}

@media (min-width: 700px) {
	.footer-widgets-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.footer-widgets-wrapper {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Reset the parent's fixed column widths/margins so the grid controls layout.
   !important is needed here to beat the parent's percentage-width rules. */
.footer-widgets-wrapper .footer-widgets {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Footer widget titles: small accent underline for a tidy, intentional look. */
.footer-widgets .widget-title {
	padding-bottom: 0.4em;
	margin-bottom: 0.75em;
	border-bottom: 2px solid var(--footer-accent);
	display: inline-block;
}

/* A touch more breathing room around the widget columns. */
.footer-widgets-outer-wrapper {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* =========================================================================
   4. DE-EMPHASIZE THE CREDIT BAR
   Quiets "Powered by WordPress" and the copyright line so the church
   information above it is what draws the eye. (Ken's "Webmaster: Jolene's
   Web Designs and More" line is a WIDGET, not this bar, so shrink/move that
   one in Appearance > Widgets using the small Custom HTML snippet.)
   ========================================================================= */
.footer-credits {
	font-size: 0.8em;
	opacity: 0.7;
}

.footer-credits .powered-by-wordpress {
	opacity: 0.6;
}