/*
Theme Name:   GeneratePress Child - Mikvah Chana
Theme URI:    https://generatepress.com
Description:  Child theme of GeneratePress for the Mikvah Chana website. All customizations (CSS, PHP hooks, templates, patterns) live here so the parent theme can be updated safely.
Author:       Mikvah Chana
Template:     generatepress
Version:      2.10.0
Requires at least: 6.5
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:  generatepress-child
*/

/*
 * GeneratePress enqueues this file automatically after its own stylesheet,
 * on the front end and inside the block editor.
 *
 * How the design system fits together (see README.md):
 *   1. Tokens   - colors come from GeneratePress Global Colors (Customizer >
 *                 Colors). They exist as --contrast, --accent, --pink, ...
 *                 The --mc-* names below are readable aliases of those.
 *   2. Buttons  - .mc-btn + .mc-btn--variant. Same CSS for GenerateBlocks
 *                 buttons, core Buttons block styles, GeneratePress .button
 *                 and form submit buttons.
 *   3. Sections - .mc-section + .mc-section--background, .mc-container.
 *   4. Patterns - /patterns/*.php insert sections that already use 1-3.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
	/* Colors: aliases of the GeneratePress Global Colors */
	--mc-navy: var(--contrast, #1a3d51);
	--mc-text: var(--contrast-2, #54595f);
	--mc-blue-soft: var(--contrast-3, #7ca0b4);
	--mc-light-blue: var(--base, #d3e2ec);
	--mc-cream: var(--base-2, #fff8f6);
	--mc-white: var(--base-3, #ffffff);
	--mc-blue: var(--accent, #5a88a2);
	--mc-pink: var(--pink, #f2c1bd);
	--mc-pale-blue: var(--pale-blue, #e2eff8);
	--mc-peach: var(--peach, #feece2);
	--mc-blush: var(--blush, #fff4f0);

	/* Typography */
	--mc-font: "Raleway", "Helvetica Neue", Arial, sans-serif;
	--mc-size-xs: 13px;
	--mc-size-sm: 14px;
	--mc-size-base: 16px;
	--mc-size-md: 18px;
	--mc-size-lg: 25px;
	--mc-size-xl: 35px;
	--mc-size-2xl: 44px;

	/* Layout */
	--mc-container: 1140px;
	--mc-container-narrow: 900px;
	--mc-gutter: 20px;
	--mc-section-pad: 90px;
	--mc-section-pad-sm: 50px;

	/* Shape and effects */
	--mc-radius: 6px;
	--mc-radius-card: 15px;
	--mc-radius-pill: 25px;
	--mc-shadow: 0 0 28px -6px rgba(0, 0, 0, 0.32);
	--mc-shadow-card: 0 10px 30px -18px rgba(0, 0, 0, 0.25);
	--mc-shadow-card-hover: 0 16px 34px -18px rgba(0, 0, 0, 0.35);
	--mc-surface: #f9f9f9;
	--mc-border: #e8e8e8;
	--mc-transition: 0.2s ease;

	/* Backgrounds used by section variants */
	--mc-bg-water: url("../../uploads/2022/12/water-texture-1-scaled.jpg");
	--mc-bg-wave: url("../../uploads/2022/12/pink-wave-1.png");
	--mc-bg-wave-top: url("../../uploads/2022/12/pink-wave-2.png");
	--mc-swirl: url("../../uploads/2022/12/swirl2.png");
	--mc-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12M8 3l5 5-5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
	:root {
		--mc-section-pad: var(--mc-section-pad-sm);
		--mc-size-xl: 28px;
		--mc-size-2xl: 34px;
	}
}

/* ==========================================================================
   2. Base typography
   ========================================================================== */
body {
	background-color: var(--mc-white);
	font-variant-numeric: lining-nums;
	font-family: var(--mc-font);
	font-size: var(--mc-size-base);
	color: var(--mc-text);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mc-font);
	color: var(--mc-navy);
	font-weight: 600;
	line-height: 1.25;
}

h1 { font-size: var(--mc-size-2xl); }
h2 { font-size: var(--mc-size-xl); }
h3 { font-size: var(--mc-size-lg); }
h4 { font-size: var(--mc-size-md); }

a {
	color: var(--mc-blue);
	transition: color var(--mc-transition);
    text-decoration:none;
}

a:hover,
a:focus {
	color: var(--mc-navy);
}

/* Text helpers usable on any block via Additional CSS class */
.mc-eyebrow {
	font-size: var(--mc-size-sm);
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--mc-blue);
}

.mc-label {
	font-size: var(--mc-size-md);
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--mc-blue);
}

.mc-label a {
	color: inherit;
	text-decoration: none;
}

.mc-label a:hover {
	color: var(--mc-navy);
}

.grid-container,
.inside-header,
.inside-navigation,
.inside-site-info {
	max-width: var(--mc-container);
}

/* ==========================================================================
   3. Buttons
   --------------------------------------------------------------------------
   .mc-btn            base (blue pill)
   .mc-btn--navy      dark
   .mc-btn--outline   transparent with blue border
   .mc-btn--pink      pink with navy text
   .mc-btn--white     white with navy text (for dark/photo backgrounds)
   .mc-btn--sm / --lg sizes
   The same rules cover the core Buttons block (is-style-mc-*), GeneratePress
   .button links and Gravity Forms submit buttons.
   ========================================================================== */
.mc-btn,
.wp-block-button a.wp-block-button__link,
a.wp-block-button__link.wp-element-button,
.button,
a.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.gform_wrapper .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--mc-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	background: var(--mc-blue);
	color: var(--mc-white);
	border: 2px solid var(--mc-blue);
	border-radius: var(--mc-radius-pill);
	padding: 12px 32px;
	cursor: pointer;
	transition: background var(--mc-transition), color var(--mc-transition), border-color var(--mc-transition);
}

.mc-btn:hover,
.mc-btn:focus,
.wp-block-button a.wp-block-button__link:hover,
a.wp-block-button__link.wp-element-button:hover,
.wp-block-button a.wp-block-button__link:focus,
.button:hover,
.button:focus,
a.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
	background: var(--mc-navy);
	border-color: var(--mc-navy);
	color: var(--mc-white);
}

/* Navy */
.mc-btn--navy,
.wp-block-button.is-style-mc-navy a.wp-block-button__link {
	background: var(--mc-navy);
	border-color: var(--mc-navy);
}

.mc-btn--navy:hover,
.mc-btn--navy:focus,
.wp-block-button.is-style-mc-navy a.wp-block-button__link:hover {
	background: var(--mc-blue);
	border-color: var(--mc-blue);
}

/* Outline */
.mc-btn--outline,
.wp-block-button.is-style-mc-outline a.wp-block-button__link {
	background: transparent;
	color: var(--mc-blue);
	border-color: var(--mc-blue);
}

.mc-btn--outline:hover,
.mc-btn--outline:focus,
.wp-block-button.is-style-mc-outline a.wp-block-button__link:hover {
	background: var(--mc-blue);
	color: var(--mc-white);
}

/* Pink */
.mc-btn--pink,
.wp-block-button.is-style-mc-pink a.wp-block-button__link {
	background: var(--mc-pink);
	border-color: var(--mc-pink);
	color: var(--mc-navy);
}

.mc-btn--pink:hover,
.mc-btn--pink:focus,
.wp-block-button.is-style-mc-pink a.wp-block-button__link:hover {
	background: var(--mc-navy);
	border-color: var(--mc-navy);
	color: var(--mc-white);
}

/* White */
.mc-btn--white,
.wp-block-button.is-style-mc-white a.wp-block-button__link {
	background: var(--mc-white);
	border-color: var(--mc-white);
	color: var(--mc-navy);
}

.mc-btn--white:hover,
.mc-btn--white:focus,
.wp-block-button.is-style-mc-white a.wp-block-button__link:hover {
	background: var(--mc-navy);
	border-color: var(--mc-navy);
	color: var(--mc-white);
}

/* Sizes */
.mc-btn--sm {
	font-size: 13px;
	padding: 8px 20px;
}

.mc-btn--lg {
	font-size: 17px;
	padding: 16px 40px;
}

/* Core Buttons block: keep the pill and remove core's own radius/padding */
.wp-block-button .wp-block-button__link {
	border-radius: var(--mc-radius-pill);
}

/* ==========================================================================
   4. Sections and containers
   --------------------------------------------------------------------------
   .mc-section                 vertical padding + side gutter
   .mc-section--water          water texture with blue overlay (hero, footer)
   .mc-section--wave           pink wave (photo gallery)
   .mc-section--cream          flat cream
   .mc-section--pale           flat pale blue
   .mc-section--navy           flat navy, white text
   .mc-section--tight          half padding
   .mc-container               centered, max 1140px
   .mc-container--narrow       centered, max 900px
   ========================================================================== */
.mc-section {
	padding: var(--mc-section-pad) var(--mc-gutter);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.mc-section--tight {
	padding-top: calc(var(--mc-section-pad) / 2);
	padding-bottom: calc(var(--mc-section-pad) / 2);
}

.mc-section--water {
	background-image: linear-gradient(rgba(124, 160, 180, 0.49), rgba(124, 160, 180, 0.49)), var(--mc-bg-water);
}

/* Wave images are 3334x1140 with a transparent band (~15%) at one edge.
   They sit at natural width against that edge, pink fills the rest, and the
   edge padding grows with the viewport so content never overlaps the wave. */
.mc-section--wave {
	/* layer 1: wave image at natural width (height = 34.2vw); layer 2: pink fill below it */
	background-image: var(--mc-bg-wave), linear-gradient(var(--mc-pink), var(--mc-pink));
	background-size: 100% auto, 100% calc(100% - 33.8vw);
	background-position: top center, bottom center;
	padding-top: calc(var(--mc-section-pad) + 4.5vw);
}

.mc-section--cream {
	background-color: var(--mc-blush);
}

.mc-section--pale {
	background-color: var(--mc-pale-blue);
}

.mc-section--pink {
	background-color: var(--mc-pink);
}

.mc-section--navy {
	background-color: var(--mc-navy);
	color: var(--mc-white);
}

.mc-section--navy h1,
.mc-section--navy h2,
.mc-section--navy h3,
.mc-section--navy h4,
.mc-section--navy a {
	color: var(--mc-white);
}

.mc-container {
	max-width: var(--mc-container);
	margin-left: auto;
	margin-right: auto;
}

.mc-container--narrow {
	max-width: var(--mc-container-narrow);
	margin-left: auto;
	margin-right: auto;
}

.mc-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* ==========================================================================
   5. Header + navigation
   ========================================================================== */
.site-header {
	background: var(--mc-white);
	position: relative;
	z-index: 10;
}

.site-header .inside-header {
	padding: 10px var(--mc-gutter);
	position: relative;
}

.site-header .site-logo img {
	max-height: 74px;
	width: auto;
}

.mc-bsd {
	position: absolute;
	top: 6px;
	right: var(--mc-gutter);
	font-size: var(--mc-size-xs);
	font-weight: 600;
	color: var(--mc-navy);
	line-height: 1;
}

.main-navigation,
.main-navigation .inside-navigation {
	background: transparent;
}

.main-navigation .main-nav ul li a {
	font-family: var(--mc-font);
	font-size: var(--mc-size-sm);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--mc-blue);
	padding: 0 7px;
	line-height: 74px;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--mc-navy);
	background: transparent;
}

.main-navigation .main-nav ul ul li a {
	font-size: 12px;
	line-height: 1.4;
	padding: 12px 15px;
	color: var(--mc-navy);
	border-bottom: 1px solid var(--mc-border);
}

.main-navigation ul ul {
	background: var(--mc-white);
	box-shadow: var(--mc-shadow);
}

.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items a {
	color: var(--mc-navy);
	line-height: 60px;
}

/* GeneratePress's own button reset must not restyle the menu toggle */
.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--mc-navy);
	padding: 0 20px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

@media (max-width: 1024px) {
	.main-navigation .main-nav ul li a {
		line-height: 1.4;
		padding: 12px 20px;
		border-bottom: 1px solid var(--mc-border);
	}

	.site-header .site-logo img {
		max-height: 56px;
	}

	.mc-bsd {
		top: 4px;
		right: 16px;
	}
}

/* ==========================================================================
   6. Carousel (GenerateBlocks track + arrows from assets/js/main.js)
   ========================================================================== */
[data-carousel] {
	position: relative;
}

[data-carousel-track] {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

[data-carousel-track]::-webkit-scrollbar {
	display: none;
}

.mc-carousel__btn,
.mc-carousel__btn:hover {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.85);
	color: var(--mc-navy);
	font-size: 26px;
	line-height: 44px;
	text-align: center;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	z-index: 2;
}

.mc-carousel__btn:hover {
	background: var(--mc-white);
	color: var(--mc-blue);
}

.mc-carousel__btn--prev {
	left: -22px;
}

.mc-carousel__btn--next {
	right: -22px;
}

@media (max-width: 767px) {
	.mc-carousel__btn--prev {
		left: 4px;
	}

	.mc-carousel__btn--next {
		right: 4px;
	}
}

/* ==========================================================================
   7. Footer (markup in template-parts/footer.php)
   ========================================================================== */
.mc-footer {
	background-image: linear-gradient(rgba(83, 131, 158, 0.63), rgba(83, 131, 158, 0.63)), var(--mc-bg-water);
	background-size: cover;
	background-position: center center;
	color: var(--mc-white);
	padding: var(--mc-section-pad-sm) var(--mc-gutter);
}

.mc-footer__inner {
	max-width: var(--mc-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: 40px;
}

.mc-footer__logo img {
	max-width: 200px;
	height: auto;
}

.mc-footer p {
	font-size: var(--mc-size-xs);
	line-height: 1.7;
	margin-top: 18px;
}

.mc-footer h3 {
	font-size: var(--mc-size-lg);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--mc-navy);
	margin-bottom: 18px;
}

.mc-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mc-footer li {
	font-size: var(--mc-size-sm);
	line-height: 1.6;
	margin-bottom: 8px;
}

.mc-footer a {
	text-decoration: none;
	color: var(--mc-white);
}

.mc-footer a:hover {
	color: var(--mc-navy);
}

.mc-footer__contact li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 15px;
}

.mc-footer__contact svg {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	margin-top: 4px;
	fill: var(--mc-navy);
}

.site-info {
	background: var(--mc-navy);
	color: var(--mc-white);
	font-weight: 500;
	font-size: var(--mc-size-sm);
	padding: 20px;
	text-align: center;
}

.site-info a {
	color: var(--mc-white);
	text-decoration: none;
}

@media (max-width: 900px) {
	.mc-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.mc-footer__inner {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   8. Components (used by the patterns in /patterns)
   --------------------------------------------------------------------------
   .mc-title            uppercase section title with the swirl underneath
   .mc-section--wave-top pink section whose wave is at the bottom edge
   .mc-frame            white photo frame with soft shadow
   .mc-text-blue        blue emphasised paragraph
   .mc-price-card       pricing card (head / price band / foot)
   .mc-price-grid       responsive grid of pricing cards
   ========================================================================== */
.mc-title {
	font-size: var(--mc-size-xl);
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--mc-navy);
	margin-bottom: 24px;
}

.mc-title::after {
	content: "";
	display: block;
	width: 125px;
	height: 26px;
	margin-top: 10px;
	background: var(--mc-swirl) left center / contain no-repeat;
}

.mc-title--center {
	text-align: center;
}

.mc-center .mc-title::after,
.mc-title.mc-title--center::after {
	margin-left: auto;
	margin-right: auto;
}

.mc-section--wave-top {
	/* layer 1: wave image at natural width against the bottom; layer 2: pink fill above it */
	background-image: var(--mc-bg-wave-top), linear-gradient(var(--mc-pink), var(--mc-pink));
	background-size: 100% auto, 100% calc(100% - 33.8vw);
	background-position: bottom center, top center;
	padding-bottom: calc(var(--mc-section-pad) + 5.5vw);
}

/* Matches the frame baked into the site photos: white mat, soft white glow. */
.mc-frame {
	background: var(--mc-white);
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0 0 26px 8px rgba(255, 255, 255, 0.7), 0 6px 20px rgba(0, 0, 0, 0.06);
}

.mc-frame img {
	border-radius: 4px;
}

.mc-text-blue {
	color: var(--mc-blue);
}

.mc-text-navy {
	color: var(--mc-navy);
}

/* Pricing card */
.mc-price-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 20px;
	align-items: stretch;
}

.mc-price-card {
	display: flex;
	flex-direction: column;
	background: var(--mc-white);
	border-radius: var(--mc-radius-card);
	box-shadow: var(--mc-shadow-card);
	overflow: hidden;
	text-align: center;
}

.mc-price-card__head {
	background: var(--mc-surface);
	padding: 24px 16px 18px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 96px;
}

.mc-price-card__title {
	font-size: var(--mc-size-md);
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--mc-blue);
	margin: 0;
}

.mc-price-card__sub {
	font-size: var(--mc-size-sm);
	color: var(--mc-blue);
	margin: 4px 0 0;
}

.mc-price-card__price {
	background: var(--mc-pink);
	color: var(--mc-navy);
	padding: 22px 16px;
	font-size: 40px;
	font-weight: 400;
	line-height: 1;
	margin: 0;
	flex: 1 0 auto;
}

.mc-price-card__price sup {
	font-size: 0.45em;
	top: -0.9em;
	margin-right: 2px;
}

.mc-price-card__price small {
	display: block;
	font-size: var(--mc-size-sm);
	margin-top: 8px;
}

.mc-price-card__foot {
	padding: 22px 16px 26px;
}

.mc-price-card__foot .mc-btn {
	padding: 10px 26px;
	font-size: var(--mc-size-sm);
}

/* ==========================================================================
   9. Motion (light: CSS transitions + ~2 KB of JS in assets/js/main.js)
   --------------------------------------------------------------------------
   Sticky header on desktop with a shadow only once scrolled; sections and
   pricing cards fade up on first view; cards and buttons lift on hover.
   Disabled for visitors who prefer reduced motion.
   ========================================================================== */
@media (min-width: 1025px) {
	.site-header {
		position: sticky;
		top: 0;
		transition: box-shadow 0.3s ease;
	}

	.admin-bar .site-header {
		top: 32px;
	}

	.site-header.is-scrolled {
		box-shadow: var(--mc-shadow);
	}
}

.mc-js .mc-section > .mc-container,
.mc-js .mc-section > .mc-container--narrow,
.mc-js .mc-price-card {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.mc-js .mc-price-card:nth-child(2) { transition-delay: 0.08s; }
.mc-js .mc-price-card:nth-child(3) { transition-delay: 0.16s; }
.mc-js .mc-price-card:nth-child(4) { transition-delay: 0.24s; }
.mc-js .mc-price-card:nth-child(5) { transition-delay: 0.32s; }

.mc-js .is-visible,
.mc-js .mc-section > .mc-container.is-visible,
.mc-js .mc-section > .mc-container--narrow.is-visible,
.mc-js .mc-price-card.is-visible {
	opacity: 1;
	transform: none;
}

/* Cards keep their reveal transition and gain a lift on hover once visible */
.mc-price-card.is-visible {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mc-price-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--mc-shadow-card-hover);
}

.mc-btn:hover,
.wp-block-button a.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.mc-frame {
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.mc-js .mc-section > .mc-container,
	.mc-js .mc-section > .mc-container--narrow,
	.mc-js .mc-price-card {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.mc-price-card:hover,
	.mc-btn:hover {
		transform: none;
	}
}

/* ==========================================================================
   10. Info cards and small titles
   --------------------------------------------------------------------------
   .mc-title--sm   20px title with a smaller swirl (card headings)
   .mc-card-grid   responsive grid of .mc-card
   .mc-card        white rounded card: small linked title + short text
   ========================================================================== */
.mc-title--sm {
	font-size: 20px;
	margin-bottom: 14px;
}

.mc-title--sm::after {
	width: 80px;
	height: 17px;
	margin-top: 6px;
}

.mc-title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--mc-transition);
}

.mc-title a:hover,
.mc-title a:focus {
	color: var(--mc-blue);
}

.mc-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 30px;
}

.mc-card {
	background: var(--mc-white);
	border-radius: var(--mc-radius-card);
	padding: 30px 30px 26px;
	box-shadow: var(--mc-shadow-card);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mc-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--mc-shadow-card-hover);
}

.mc-card p {
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mc-card:hover {
		transform: none;
	}
}

/* ==========================================================================
   11. Arrow list
   --------------------------------------------------------------------------
   .mc-list   bullet list with a pale-blue arrow marker and navy text
   ========================================================================== */
.mc-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.mc-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 14px;
	font-size: var(--mc-size-base);
	font-weight: 500;
	line-height: 1.5;
	color: var(--mc-navy);
}

.mc-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 16px;
	height: 16px;
	background: currentColor;
	color: var(--mc-blue-soft);
	-webkit-mask: var(--mc-icon-arrow) center / contain no-repeat;
	mask: var(--mc-icon-arrow) center / contain no-repeat;
}

.mc-section--navy .mc-list li {
	color: var(--mc-white);
}

/* ==========================================================================
   12. Action card (.mc-card--cta)
   --------------------------------------------------------------------------
   Card with a pink arrow before a title-case heading, blue text and a small
   button pinned to the bottom. Used on Donations & Payments.
   ========================================================================== */
.mc-card--cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 28px 28px 26px;
}

.mc-card--cta .mc-card__title {
	position: relative;
	padding-left: 44px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mc-navy);
	margin: 0;
}

.mc-card--cta .mc-card__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 30px;
	height: 30px;
	background: currentColor;
	color: var(--mc-pink);
	-webkit-mask: var(--mc-icon-arrow) center / contain no-repeat;
	mask: var(--mc-icon-arrow) center / contain no-repeat;
}

.mc-card--cta p {
	padding-left: 44px;
	color: var(--mc-blue);
}

.mc-card--cta .mc-btn {
	margin-left: 44px;
}

@media (max-width: 480px) {
	.mc-card--cta .mc-card__title,
	.mc-card--cta p,
	.mc-card--cta .mc-btn {
		padding-left: 0;
		margin-left: 0;
	}

	.mc-card--cta .mc-card__title::before {
		position: static;
		display: block;
		margin-bottom: 10px;
	}
}

/* ==========================================================================
   13. Contact list, form card, forms, map
   --------------------------------------------------------------------------
   .mc-contact        icon + label + value list (phone, email, map icons)
   .mc-form-card      white rounded card holding a form
   .gform_wrapper     Gravity Forms fields in the site style
   .mc-map            full-width map embed
   ========================================================================== */
.mc-contact {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.mc-contact__item {
	position: relative;
	padding-left: 78px;
	margin-bottom: 28px;
	min-height: 52px;
}

.mc-contact__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 52px;
	height: 52px;
	background: var(--mc-navy);
	-webkit-mask: var(--mc-icon) center / contain no-repeat;
	mask: var(--mc-icon) center / contain no-repeat;
}

.mc-contact__item--phone { --mc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.4 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.7 370.7 0 0 1 130.6 204.1l60.6-49.6a23.9 23.9 0 0 0 6.9-28l-48-112A24.2 24.2 0 0 0 122.6.6l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.3 24.3 0 0 0-14-27.6z'/%3E%3C/svg%3E"); }
.mc-contact__item--email { --mc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z'/%3E%3C/svg%3E"); }
.mc-contact__item--map { --mc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M172.3 501.7C27 291 0 269.4 0 192 0 86 86 0 192 0s192 86 192 192c0 77.4-27 99-172.3 309.7-9.5 13.8-29.9 13.8-39.4 0zM192 272c44.2 0 80-35.8 80-80s-35.8-80-80-80-80 35.8-80 80 35.8 80 80 80z'/%3E%3C/svg%3E"); }

.mc-contact__label {
	font-size: 25px;
	font-weight: 600;
	color: var(--mc-navy);
	margin: 0 0 2px;
}

.mc-contact__value {
	font-size: var(--mc-size-base);
	line-height: 1.5;
	color: var(--mc-navy);
	margin: 0;
}

.mc-contact__value a {
	color: inherit;
	text-decoration: none;
}

.mc-contact__value a:hover {
	color: var(--mc-blue);
}

/* Form card */
.mc-form-card {
	background: var(--mc-white);
	border-radius: var(--mc-radius-card);
	padding: 40px;
	box-shadow: var(--mc-shadow-card);
}

.mc-form-card .mc-title {
	font-size: 28px;
}

.mc-form-card .mc-title strong {
	font-weight: 700;
}

@media (max-width: 600px) {
	.mc-form-card {
		padding: 24px 20px;
	}
}

/* Gravity Forms in the site style (labels are hidden in the form settings, placeholders carry the names) */
.gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.gform_wrapper textarea,
.gform_wrapper select {
	width: 100%;
	font-family: var(--mc-font);
	font-size: 15px;
	color: var(--mc-navy);
	background: var(--mc-white);
	border: 1px solid var(--mc-light-blue);
	border-radius: 20px;
	padding: 10px 16px;
	transition: border-color var(--mc-transition), box-shadow var(--mc-transition);
}

.gform_wrapper textarea {
	min-height: 120px;
	border-radius: 15px;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--mc-blue);
	box-shadow: 0 0 0 3px rgba(90, 136, 162, 0.2);
}

.gform_wrapper ::placeholder {
	color: var(--mc-text);
	opacity: 0.8;
}

.gform_wrapper .gfield_label,
.gform_wrapper .gfield_required {
	font-family: var(--mc-font);
	color: var(--mc-navy);
}

.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer {
	padding: 8px 0 0;
	margin: 0;
}

.mc-form-card .gform_wrapper .gform_button,
.mc-form-card .gform_wrapper input[type="submit"] {
	width: 100%;
}

.gform_wrapper .gform_validation_errors,
.gform_wrapper .gfield_validation_message {
	font-family: var(--mc-font);
	border-radius: calc(var(--mc-radius-card) - 3px);
}

/* Section breaks inside a form (Gravity Forms Section field) */
.gform_wrapper.gravity-theme .gsection {
	border-bottom: 1px solid var(--mc-border);
}

.gform_wrapper.gravity-theme .gsection_title {
	font-family: var(--mc-font);
	color: var(--mc-navy);
}

/* Map */
.mc-map iframe {
	display: block;
	width: 100%;
	height: 450px;
	border: 0;
}

/* Form 11 is set to "left label" placement with hidden labels. Gravity Forms
   then reserves 30% for the label; give every field the full width instead. */
.mc-form-card .gform_wrapper.gravity-theme .left_label .gfield:not(.gsection):not(.gfield_html):not(fieldset) {
	display: block;
}

.mc-form-card .gform_wrapper.gravity-theme .left_label div.gfield > div:not(.ui-resizable-handle):not(.gfield-admin-icons),
.mc-form-card .gform_wrapper.gravity-theme .gform_fields.left_label fieldset .ginput_container,
.mc-form-card .gform_wrapper.gravity-theme .left_label .ginput_complex .ginput_container {
	float: none;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
}

.mc-form-card .gform_wrapper.gravity-theme .ginput_complex .name_first,
.mc-form-card .gform_wrapper.gravity-theme .ginput_complex .name_last {
	width: 100%;
	padding: 0;
	margin: 0;
}

.mc-form-card .gform_wrapper.gravity-theme .gform_footer.left_label {
	padding-left: 0;
	margin-left: 0;
	width: 100%;
}

/* ==========================================================================
   14. Media + text column width, embedded forms
   ========================================================================== */
/* Text beside a photo reads best at about 480px, like the live site's columns. */
.mc-media-text__body {
	max-width: 480px;
}

/* Form cards that hold a third-party embed (JotForm): tighter padding, iframe fills the card. */
.mc-form-card--embed {
	width: 100%;
	padding: 24px;
}

.mc-form-card--embed iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
}

@media (max-width: 600px) {
	.mc-form-card--embed {
		padding: 12px;
	}
}

/* Gravity Forms groups radio/checkbox choices in a fieldset; drop the browser's default border and spacing. */
.gform_wrapper fieldset.gfield {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}