/* ==========================================================================
   Elim / Grace Community Church: "the welcome card at the door"  (church-nine template 3)
   Site CSS only: real layouts + custom classes (.el .el-<band>). Section padding stays in ACF.
   Built from tools/css/*.css by tools/publish-css.sh into the theme's css/screen.css.
   ========================================================================== */
:root {
	--el-forest: var(--color-main, #2F5D3A);
	--el-deep: #24472D;
	--el-cream: #FBF7EE;
	--el-beige: #E7DCC8;
	--el-brown: #8B6B4F;       /* frond, rules, hover underline (never small body text) */
	--el-brown-ink: #6B4F37;   /* brown text on cream/beige: 7.0:1 / 5.6:1 */
	--el-ink: #2A2A24;
	--el-hair: rgba(47, 93, 58, .18);
	--el-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
	--el-sans: 'Nunito Sans', system-ui, sans-serif;
	--el-radius: 10px;
	--el-ease: cubic-bezier(.22, .61, .36, 1);
	--el-frond: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-10 18 124 62%22%3E%3Cg transform=%22rotate%2850 50 50%29%22 fill=%22none%22 stroke=%22%238B6B4F%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10.0,95.0 L11.9,91.4 L13.8,87.9 L15.6,84.3 L17.5,80.8 L19.4,77.3 L21.2,73.9 L23.1,70.5 L25.0,67.1 L26.9,63.8 L28.8,60.6 L30.6,57.5 L32.5,54.4 L34.4,51.4 L36.2,48.5 L38.1,45.7 L40.0,43.0 L41.9,40.4 L43.8,37.9 L45.6,35.5 L47.5,33.2 L49.4,31.0 L51.2,28.9 L53.1,26.9 L55.0,25.0 L56.9,23.2 L58.8,21.5 L60.6,19.9 L62.5,18.4 L64.4,17.0 L66.2,15.6 L68.1,14.3 L70.0,13.1 L71.9,12.0 L73.8,10.9 L75.6,9.8 L77.5,8.8 L79.4,7.8 L81.2,6.9 L83.1,5.9 L85.0,5.0%22/%3E%3Cpath d=%22M15.6,84.3 L20.3,85.3 L24.9,86.0 L29.4,86.4 L33.7,86.3 L37.8,85.7 L41.8,84.7 L45.5,83.2 L49.3,81.6%22/%3E%3Cpath d=%22M15.6,84.3 L13.1,81.9 L10.6,79.4 L8.3,76.4 L6.1,73.0 L4.1,69.0 L2.4,64.6 L0.7,59.9 L-0.9,54.9%22/%3E%3Cpath d=%22M23.1,70.5 L27.4,71.4 L31.6,72.2 L35.7,72.6 L39.7,72.6 L43.4,72.2 L47.0,71.3 L50.4,70.0 L53.8,68.6%22/%3E%3Cpath d=%22M23.1,70.5 L20.9,68.3 L18.7,65.9 L16.6,63.1 L14.7,60.0 L13.0,56.3 L11.4,52.3 L10.0,47.9 L8.7,43.3%22/%3E%3Cpath d=%22M30.6,57.5 L34.5,58.5 L38.4,59.3 L42.1,59.8 L45.7,59.9 L49.0,59.7 L52.3,59.0 L55.3,58.0 L58.4,56.9%22/%3E%3Cpath d=%22M30.6,57.5 L28.7,55.4 L26.8,53.2 L25.0,50.7 L23.4,47.8 L22.0,44.4 L20.7,40.7 L19.6,36.7 L18.5,32.5%22/%3E%3Cpath d=%22M38.1,45.7 L41.6,46.8 L45.1,47.7 L48.4,48.3 L51.6,48.6 L54.6,48.6 L57.5,48.1 L60.2,47.4 L62.9,46.6%22/%3E%3Cpath d=%22M38.1,45.7 L36.5,43.8 L35.0,41.8 L33.5,39.4 L32.2,36.8 L31.1,33.7 L30.2,30.3 L29.4,26.7 L28.6,22.9%22/%3E%3Cpath d=%22M45.6,35.5 L48.7,36.6 L51.8,37.7 L54.7,38.4 L57.5,38.9 L60.1,39.0 L62.6,38.9 L65.0,38.5 L67.2,37.9%22/%3E%3Cpath d=%22M45.6,35.5 L44.4,33.8 L43.2,31.9 L42.1,29.8 L41.1,27.3 L40.4,24.6 L39.8,21.5 L39.3,18.2 L38.9,14.8%22/%3E%3Cpath d=%22M53.1,26.9 L55.8,28.1 L58.5,29.2 L61.0,30.1 L63.3,30.7 L65.6,31.1 L67.6,31.2 L69.6,31.1 L71.5,30.8%22/%3E%3Cpath d=%22M53.1,26.9 L52.2,25.3 L51.4,23.7 L50.6,21.8 L50.0,19.6 L49.6,17.2 L49.3,14.5 L49.2,11.6 L49.0,8.6%22/%3E%3Cpath d=%22M60.6,19.9 L62.9,21.1 L65.1,22.3 L67.1,23.2 L69.1,24.0 L70.9,24.5 L72.5,24.8 L74.1,24.9 L75.6,24.9%22/%3E%3Cpath d=%22M60.6,19.9 L60.0,18.6 L59.5,17.1 L59.1,15.5 L58.8,13.7 L58.6,11.6 L58.6,9.3 L58.7,6.8 L58.9,4.3%22/%3E%3Cpath d=%22M68.1,14.3 L69.9,15.5 L71.6,16.6 L73.3,17.5 L74.8,18.2 L76.2,18.8 L77.4,19.2 L78.6,19.4 L79.7,19.6%22/%3E%3Cpath d=%22M68.1,14.3 L67.8,13.2 L67.5,12.1 L67.3,10.7 L67.2,9.2 L67.3,7.5 L67.5,5.7 L67.8,3.7 L68.1,1.6%22/%3E%3Cpath d=%22M75.6,9.8 L77.0,10.8 L78.2,11.7 L79.5,12.5 L80.6,13.2 L81.6,13.7 L82.5,14.0 L83.4,14.3 L84.2,14.5%22/%3E%3Cpath d=%22M75.6,9.8 L75.5,9.0 L75.3,8.1 L75.3,7.1 L75.3,5.9 L75.5,4.6 L75.7,3.2 L76.0,1.7 L76.4,0.1%22/%3E%3C/g%3E%3C/svg%3E");
}
body { background: var(--el-cream); }
body, body p, body li, body input, body textarea { font-family: var(--el-sans); }
#main-content .wysiwyg p, #main-content .wysiwyg li, #main-content .ct2-hero-sentence { font-size: 20px; line-height: 1.6; text-wrap: pretty; color: var(--el-ink); }
#main-content .wysiwyg p { max-width: 65ch; }

/* ---------- Titles: Fraunces 600, soft, sentence case ---------- */
#main-content h2.titles, #main-content h1.ct2-hero-title, #main-content h3.titles {
	font-family: var(--el-serif); font-weight: 600; letter-spacing: -.015em; line-height: 1.08; text-transform: none; text-wrap: balance;
	font-variation-settings: "SOFT" 100, "WONK" 0;
}
#main-content .el h2.titles:not(.medium):not(.small) { font-size: clamp(40px, 2.4vw + 26px, 64px) !important; color: var(--el-forest); }
#main-content .el-sermon h2.titles:not(.medium):not(.small) { color: var(--el-cream); }

/* ---------- Eyebrows: plain, friendly, one line, sentence case ---------- */
#main-content .el h3.small-titles, #main-content .ct2-hero-eyebrow {
	font-family: var(--el-sans) !important; font-weight: 700; font-size: 18px !important; letter-spacing: 0 !important; text-transform: none !important;
	color: var(--el-brown-ink); line-height: 1.3; white-space: nowrap;
}
#main-content .el-sermon h3.small-titles { color: var(--el-beige); }

/* ---------- Buttons: rounded 10px, 56px tall, solid forest ---------- */
#main-content a.button, #main-content .ct2-hero-buttons a.button, .header a.button, #main-content .gform_wrapper .gform_button {
	display: inline-flex !important; align-items: center; justify-content: center; min-height: 56px; height: auto !important; line-height: 1.2 !important;
	padding: 0 28px !important; border-radius: var(--el-radius) !important; border: 2px solid var(--el-forest) !important;
	background: var(--el-forest) !important; color: var(--el-cream) !important;
	font-family: var(--el-sans) !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important;
	box-shadow: none !important; transition: background .25s var(--el-ease), color .25s, border-color .25s;
}
#main-content a.button:hover, #main-content a.button:focus-visible, .header a.button:hover { background: var(--el-deep) !important; border-color: var(--el-deep) !important; }
#main-content a.button + a.button { margin-left: 14px; }
/* on forest: cream button + cream outline */
#main-content a.button.button-white { background: var(--el-cream) !important; border-color: var(--el-cream) !important; color: var(--el-forest) !important; }
#main-content a.button.button-white + a.button.button-white { background: transparent !important; color: var(--el-cream) !important; }
#main-content a.button.button-white:hover, #main-content a.button.button-white:focus-visible { background: var(--el-beige) !important; border-color: var(--el-beige) !important; color: var(--el-deep) !important; }
:focus-visible { outline: 3px solid var(--el-brown); outline-offset: 3px; }

/* ---------- Header: logo + five plain links + phone + Plan Your Visit, all visible (option B restyled) ---------- */
.option-b .header { display: flex; align-items: center; gap: 12px 36px; height: auto !important; min-height: 96px; padding: 18px 40px !important; box-shadow: none !important; border-bottom: 1px solid var(--el-hair); }
.option-b .header .logo { position: static !important; transform: none !important; flex: 0 0 auto; display: block; margin-right: auto; }
.option-b .header .desktop, .option-b .header .multiple-header-buttons, .option-b .header .menu-main-navigation-container { display: contents !important; }
.option-b .header .btn-menu { display: none !important; }
.option-b .header .main-nav { display: flex !important; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; order: 2; }
.option-b .header .main-nav li { float: none; margin: 0; padding: 0; }
.option-b .header .main-nav > li > a { display: block; padding: 12px 14px; font-family: var(--el-sans); font-size: 18px; font-weight: 700; color: var(--el-ink); text-decoration: none; letter-spacing: 0; text-transform: none; position: relative; }
.option-b .header .main-nav > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--el-brown); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--el-ease); }
.option-b .header .main-nav > li > a:hover::after, .option-b .header .main-nav > li.current-menu-item > a::after, .option-b .header .main-nav > li > a:focus-visible::after { transform: scaleX(1); }
.option-b .header .main-nav > li.current-menu-item > a { color: var(--el-forest); }
.option-b .header .multiple-header-buttons a.button { position: static !important; float: none !important; transform: none !important; margin: 0 !important; display: inline-flex !important; }
.option-b .header .multiple-header-buttons a.button:not(.button-2) { order: 3; background: transparent !important; border-color: transparent !important; color: var(--el-forest) !important; padding: 0 6px !important; white-space: nowrap; }
.option-b .header .multiple-header-buttons a.button:not(.button-2)::before { content: "Call"; font-weight: 400; color: var(--el-ink); margin-right: 8px; }
.option-b .header .multiple-header-buttons a.button:not(.button-2):hover { text-decoration: underline; text-decoration-color: var(--el-brown); text-underline-offset: 5px; }
.option-b .header .multiple-header-buttons a.button.button-2, .option-b .header .multiple-header-buttons a.button.button-2:hover { order: 4; background: var(--el-forest) !important; border-color: var(--el-forest) !important; color: var(--el-cream) !important; white-space: nowrap; }
.option-b .header .multiple-header-buttons a.button.button-2:hover { background: var(--el-deep) !important; }
@media (max-width: 1180px) {
	.option-b .header .multiple-header-buttons a.button.button-2 { display: none !important; }
}
@media (max-width: 900px) {
	/* phones/tablets: logo + call on row one, the five links wrap on row two; nothing hidden behind a menu */
	.option-b .header { flex-wrap: wrap; padding: 14px 20px 6px !important; gap: 4px 12px; }
	.option-b .header .main-nav { order: 5; flex: 1 0 100%; flex-wrap: wrap; justify-content: space-between; gap: 0; margin: 2px -10px 0; }
	.option-b .header .main-nav > li > a { padding: 11px 10px; font-size: 17px; }
	.option-b .header .main-nav > li > a::after { left: 10px; right: 10px; bottom: 5px; }
	.option-b .header .multiple-header-buttons a.button:not(.button-2) { min-height: 44px; padding: 0 16px !important; border: 2px solid var(--el-forest) !important; font-size: 0 !important; width: auto !important; flex: 0 0 auto; }
	.option-b .header .multiple-header-buttons a.button:not(.button-2)::before { font-size: 17px; font-weight: 700; color: var(--el-forest); margin: 0; }
}
@media (max-width: 380px) { .option-b .header .main-nav > li > a { padding: 11px 6px; font-size: 16px; } #main-content .ct2-hero-split .ct2-hero-eyebrow { white-space: normal; } }

/* ---------- Hero: Split, forest copy half, warm photo half ---------- */
.ct2-hero-split .ct2-hs { min-height: min(78vh, 760px); }
.ct2-hero-split .ct2-hs-img { object-position: 58% 40%; }
.ct2-hero-split .ct2-hs-copy { background: var(--el-forest); }
.ct2-hero-split .ct2-hs-inner { max-width: 640px; }
#main-content .ct2-hero-split h1.ct2-hero-title, .ct2-hero-split h1.ct2-hero-title { font-size: clamp(48px, 3.6vw + 24px, 92px) !important; line-height: 1.02; color: var(--el-cream) !important; letter-spacing: -.02em; }
.ct2-hero-split .ct2-hero-eyebrow { color: var(--el-beige) !important; }
.ct2-hero-split .ct2-hero-sentence, #main-content .ct2-hero-split .ct2-hero-sentence {
	color: var(--el-cream) !important; font-size: 22px !important; line-height: 1.5; font-weight: 700; margin-top: 22px;
	padding-left: 18px; border-left: 3px solid var(--el-beige);
}
.ct2-hero-split .ct2-hero-buttons { margin-top: 34px; }
@media (max-width: 1000px) {
	.ct2-hero-split .ct2-hs { min-height: 0; display: flex; flex-direction: column-reverse; }
	.ct2-hero-split .ct2-hs-media, .ct2-hero-split .ct2-hs-copy { width: 100% !important; max-width: none !important; box-sizing: border-box; }
}
@media (max-width: 767px) {
	.ct2-hero-split .ct2-hs-media { aspect-ratio: 4 / 3; height: auto; position: relative; }
	.ct2-hero-split .ct2-hs-copy { padding: 40px 20px 44px; }
	.ct2-hero-split .ct2-hero-sentence { font-size: 20px !important; }
	#main-content .ct2-hero-split .ct2-hero-buttons a.button { flex: 1 1 auto; }
	#main-content .ct2-hero-split .ct2-hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
	#main-content .ct2-hero-split .ct2-hero-buttons a.button + a.button { margin-left: 0; }
}

/* ---------- 02 What Sunday looks like: the times card ---------- */
#main-content .el-sunday .right { box-sizing: border-box; background: var(--el-beige); border-radius: 14px; padding: 40px 40px 34px; align-self: start; }
#main-content .el-sunday .right > h3.small-titles {
	font-family: var(--el-serif) !important; font-weight: 600; font-size: 30px !important; letter-spacing: -.01em; text-transform: none !important; color: var(--el-forest); margin-bottom: 8px !important; white-space: normal;
}
@media (max-width: 1180px) { #main-content .el-sunday .right ul li { grid-template-columns: 1fr; gap: 2px; padding: 14px 0 !important; } }
@media (max-width: 767px) { #main-content .el-sunday .right { padding: 28px 22px 24px; margin-top: 36px; } }
#main-content .el-sunday ul { list-style: none; margin: 0; padding: 0; }
#main-content .el-sunday ul li {
	display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; align-items: baseline; margin: 0 !important; padding: 18px 0 !important;
	border-bottom: 1px solid rgba(139, 107, 79, .35); font-size: 20px !important; line-height: 1.4;
}
#main-content .el-sunday ul li::before { display: none !important; }
#main-content .el-sunday ul li strong { font-family: var(--el-serif); font-weight: 600; font-size: 22px; color: var(--el-forest); }
#main-content .el-sunday .el-where { margin-top: 22px; }
#main-content .el-sunday .el-where a { font-weight: 700; color: var(--el-forest); text-decoration: underline; text-decoration-color: var(--el-brown); text-underline-offset: 5px; }

/* ---------- 03 Who we are: the palm frond, then a centered statement ---------- */
#main-content .el-intro .section_titles_width, #main-content .el-intro .ta-center { position: relative; }
#main-content .el-intro h3.small-titles::before {
	content: ""; display: block; width: 170px; height: 90px; margin: 0 auto 22px; background: var(--el-frond) center / contain no-repeat;
}
#main-content .el-intro h2.titles:not(.medium):not(.small) { font-size: clamp(30px, 1.6vw + 22px, 46px) !important; line-height: 1.18; font-weight: 500; }
#main-content .el-intro .wysiwyg p { margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: no-preference) {
	#main-content .el-intro h3.small-titles.ccm-in::before { animation: el-frond-draw 1.6s var(--el-ease) .15s both; }
}
@keyframes el-frond-draw { from { clip-path: inset(0 100% 0 0); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

/* ---------- 04 Latest sermon: the one forest band; video beside its title ---------- */
#main-content .el-sermon .grid-flex > .panel { flex: 0 0 100% !important; max-width: 100% !important; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: 48px; align-items: end; text-align: left !important; }
#main-content .el-sermon .grid-flex > .panel > .relative { grid-row: 1 / span 4; border-radius: var(--el-radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--el-deep); }
#main-content .el-sermon .grid-flex > .panel > .relative iframe { width: 100% !important; height: 100% !important; position: absolute; inset: 0; }
#main-content .el-sermon .panel h2.titles.medium { font-size: clamp(26px, 1vw + 20px, 36px) !important; color: var(--el-cream) !important; margin-top: 0 !important; text-align: left; }
#main-content .el-sermon .panel h2.titles.medium a { color: inherit !important; text-decoration: none; }
#main-content .el-sermon .panel h2.titles.medium a:hover { text-decoration: underline; text-decoration-color: var(--el-beige); text-underline-offset: 6px; }
#main-content .el-sermon .panel .job-title, #main-content .el-sermon .panel .post-date, #main-content .el-sermon .panel [class*="below"] { color: var(--el-beige) !important; font-size: 18px !important; text-align: left; }
#main-content .el-sermon .panel a.button { background: var(--el-cream) !important; border-color: var(--el-cream) !important; color: var(--el-forest) !important; justify-self: start; margin-top: 22px !important; }
@media (max-width: 900px) {
	#main-content .el-sermon .grid-flex > .panel { grid-template-columns: 1fr; }
	#main-content .el-sermon .grid-flex > .panel > .relative { grid-row: auto; margin-bottom: 24px; }
}

/* ---------- 05 Contact: big tappable reach lines + the short form on beige ---------- */
#main-content .el-contact ul.el-reach { list-style: none; margin: 28px 0 0; padding: 0; }
#main-content .el-contact ul.el-reach li { display: grid; grid-template-columns: 1fr; gap: 0; align-items: baseline; padding: 14px 0 !important; margin: 0 !important; border-top: 1px solid var(--el-hair); }
#main-content .el-contact ul.el-reach li::before { display: none !important; }
#main-content .el-contact ul.el-reach li span { font-size: 17px; color: var(--el-brown-ink); font-weight: 700; }
#main-content .el-contact ul.el-reach li a { font-family: var(--el-serif); font-weight: 600; font-size: 24px; color: var(--el-forest); text-decoration: none; }
@media (max-width: 1180px) { #main-content .el-contact ul.el-reach li a { font-size: 20px; overflow-wrap: break-word; } #main-content .el-contact ul.el-reach li a[href^=mailto] { overflow-wrap: anywhere; } }
#main-content .el-contact ul.el-reach li a:hover { text-decoration: underline; text-decoration-color: var(--el-brown); text-underline-offset: 5px; }
#main-content .el-contact .gform_wrapper { background: var(--el-beige); border-radius: 14px; padding: 36px 36px 30px; }
#main-content .el-contact .gform_wrapper input:not([type=submit]):not([type=checkbox]):not([type=radio]), #main-content .el-contact .gform_wrapper textarea {
	background: var(--el-cream) !important; border: 1px solid #CDBFA6 !important; border-radius: 8px !important; font-size: 19px !important; min-height: 52px;
}
#main-content .el-contact .gform_wrapper label, #main-content .el-contact .gform_wrapper legend { font-size: 18px !important; font-weight: 700 !important; color: var(--el-ink) !important; }
#main-content .el-contact .gform_wrapper .gform_footer { margin-top: 10px; }
@media (max-width: 767px) { #main-content .el-contact .gform_wrapper { padding: 24px 18px 20px; margin-top: 36px; } }

/* ---------- Footer: Visit on deep forest, frond beside the title ---------- */
.cc-footer-visit { background: var(--el-deep) !important; }
.cc-footer-visit .cc-fvisit-title { font-family: var(--el-serif) !important; font-weight: 600; color: var(--el-cream) !important; letter-spacing: -.01em; }
.cc-footer-visit .cc-fvisit-title::after { content: ""; display: inline-block; width: 74px; height: 40px; margin-left: 16px; vertical-align: middle; background: var(--el-frond) center / contain no-repeat; filter: brightness(2.2) saturate(.5); width: 110px; height: 58px; }
.cc-footer-visit .cc-fvisit-label { color: var(--el-beige) !important; font-family: var(--el-sans) !important; font-size: 16px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 700; }
.cc-footer-visit .cc-fvisit-map iframe { border-radius: var(--el-radius); }
.cc-footer-visit .cc-fvisit-phone { font-family: var(--el-serif); font-weight: 600; white-space: nowrap; }
/* reCAPTCHA is a fixed 304px box: shrink it on the narrowest phones so the beige form panel never scrolls sideways */
@media (max-width: 400px) { #main-content .el-contact .gfield--type-captcha .ginput_recaptcha { transform: scale(.8); transform-origin: 0 0; height: 64px; } #main-content .el-contact .gform_wrapper { padding-left: 14px; padding-right: 14px; } }
/* Hero: the palm frond again, large and faint in the forest panel's lower corner (decorative, behind the copy) */
.ct2-hero-split .ct2-hs-copy { position: relative; overflow: clip; }
.ct2-hero-split .ct2-hs-copy::after {
	content: ""; position: absolute; right: -130px; bottom: -50px; width: min(46vw, 560px); aspect-ratio: 2 / 1; pointer-events: none;
	background: var(--el-frond) center / contain no-repeat; filter: brightness(2.6) saturate(.4); opacity: .16; transform: rotate(-12deg);
}
.ct2-hero-split .ct2-hs-inner { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
	.ct2-hero-split .ct2-hs-copy::after { animation: el-frond-sway 9s ease-in-out infinite alternate; }
}
@keyframes el-frond-sway { from { transform: rotate(-12deg); } to { transform: rotate(-8deg) translateY(-6px); } }
@media (max-width: 767px) { .ct2-hero-split .ct2-hs-copy::after { width: 300px; right: -70px; bottom: -30px; } }