/*
Theme Name: Emanuel
Theme URI: https://www.emanuel-church.com/
Description: Block theme for Emanuel Romanian Pentecostal Church, Sacramento. Same look as the Minimalist + WPBakery site, built only with WordPress blocks.
Author: Emanuel RPC
Version: 0.1.18
Requires at least: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: emanuel
*/

/* ---- Top bar: dark, slightly see-through, gold marker on the current page ---- */
/* WordPress wraps the header part in its own element; that wrapper is what sticks. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } }
.em-topbar {
	background: rgba(68, 68, 68, 0.9);
	backdrop-filter: blur(4px);
}
/* No gap between the bar, the live player slot and the first banner. */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks > footer { margin-block-start: 0; }
#emc-live[hidden] + .clear, .wp-site-blocks > .clear { display: none; }

.em-topbar { min-height: 61px; align-items: center; }
.em-topbar .em-logo img { display: block; }
.em-topbar .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.85);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	font-size: 13px;
	padding: 4px 8px;
	border-bottom: 2px solid transparent;
}
/* Phones: the menu button sits at the right, as before. */
@media (max-width: 599px) { .em-topbar .em-menu { margin-left: auto; } }
/* Menu colours. The theme's link colour (#444) must not reach the menu, or the
   links vanish on the #444 bar. Other pages: 65% white. Hover: full white with a
   faint gold underline. Current page: gold text with the gold underline
   (#c9a46a on the bar is about 5.5:1 contrast). */
.em-topbar .wp-block-navigation .wp-block-navigation-item__content,
.em-topbar .wp-block-navigation .wp-block-navigation-item__content:visited {
	color: rgba(255, 255, 255, 0.65) !important;
	transition: color .15s, border-color .15s;
}
.em-topbar .wp-block-navigation .wp-block-navigation-item__content:hover,
.em-topbar .wp-block-navigation .wp-block-navigation-item__content:focus {
	color: #fff !important;
	border-bottom-color: rgba(201, 164, 106, 0.5);
}
.em-topbar .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.em-topbar .wp-block-navigation [aria-current="page"] {
	color: var(--wp--preset--color--gold) !important;
	border-bottom-color: var(--wp--preset--color--gold);
}
.em-topbar .wp-block-navigation__responsive-container.is-menu-open {
	background: #444;
	color: #fff;
}

/* ---- Page banner / home-page cards: a photo with the title over it ----
 * As on the old site: white Montserrat, 48px, regular weight, tight lines,
 * no underline, no shadow. Titles that are links dim a little on hover.
 */
.em-banner .wp-block-cover__inner-container { text-align: center; }
.em-banner :is(h1, h2) {
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: clamp(32px, 4.5vw, 48px) !important;
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -1px;
	text-transform: lowercase;
	text-shadow: none;
}
.em-banner :is(h1, h2) a,
.em-banner :is(h1, h2) a:visited {
	color: #fff !important;
	text-decoration: none !important;
	transition: opacity .15s;
}
.em-banner :is(h1, h2) a:hover,
.em-banner :is(h1, h2) a:focus-visible { opacity: .8; }
/* Home-page cards (departamente, bibliotecă, …): 383px tall, 30px apart, as before. */
.home .wp-block-post-content > .em-banner {
	min-height: 383px !important;
	margin-top: 0 !important;
	margin-bottom: 30px !important;
}

/* ---- Staff card: photo beside name and role ---- */
.em-person img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.em-person h3 { margin: 0 0 4px; }
.em-person p { margin: 0; font-style: italic; }

/* ---- Live player (Video Search plugin): 16:9, full width ---- */
.cwm-player { position: relative; padding-bottom: 56.25%; width: 100%; margin: 0; }
.cwm-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- Footer ---- */
.em-footer a { color: inherit; }
.em-footer h3 { text-transform: uppercase; letter-spacing: 1px; font-size: 14px; font-weight: 700; }
.em-footer .em-schedule p { margin: 0; }

/* ---- Home-page hero, matching the old Slider Revolution slide ----
 * Source Sans (the slider's font) at 70px, extra-light. "DUMNEZEU ESTE" slides
 * in from the left (0.75 s, 1.5 s long); then each word builds up letter by
 * letter from 80% size, softly blurred while it shows (2px; CU NOI 1.1px, as
 * on the slider), and leaves shrinking to 90%, on a 15 s loop:
 * DRAGOSTE 1.5–4.5 s, SFÂNT 4.5–7.5 s, VEȘNIC 7.5–10.5 s, CU NOI 10.5–14.4 s.
 */
/* Like the slider: it starts under the top bar and is a little taller than the screen. */
.wp-block-post-content > .em-hero:first-child { margin-top: -61px !important; min-height: calc(100vh + 60px) !important; }
.em-hero .em-hero-logo { margin-bottom: 42px; }
.em-hero h1 {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-weight: 200;
	font-size: clamp(34px, 5.5vw, 70px);
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
	text-transform: none;
}
.em-hero-lead {
	display: inline-block;
	opacity: 0;
	animation: em-lead 1.5s cubic-bezier(.25, .46, .45, .94) .75s forwards;
}
@keyframes em-lead { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: none; } }

.em-rotate { display: inline-grid; justify-items: start; text-align: left; vertical-align: top; margin-left: 7px; }
/* The slider's line sits about 40px right of centre (its words start where DRAGOSTE does). */
@media (min-width: 768px) { .em-hero h1 { padding-left: 98px; } }
.em-w { grid-area: 1 / 1; white-space: nowrap; }
.em-w:first-child { font-weight: 300; }
.em-w > span {
	display: inline-block;
	opacity: 0;
	animation: 15s infinite both;
	animation-delay: calc(var(--i) * 30ms);
}
.em-w:nth-child(1) > span { animation-name: em-w1; }
.em-w:nth-child(2) > span { animation-name: em-w2; }
.em-w:nth-child(3) > span { animation-name: em-w3; }
.em-w:nth-child(4) > span { animation-name: em-w4; }
/* In: 0.5 s ease-out from 80%, sharp, to full size with the slider's blur. Out: 0.5 s ease-in to 90%. */
@keyframes em-w1 {
	0%, 10% { opacity: 0; transform: scale(.8); filter: blur(0); animation-timing-function: cubic-bezier(.17, .84, .44, 1); }
	13.33%, 26.67% { opacity: 1; transform: none; filter: blur(2px); animation-timing-function: cubic-bezier(.55, .06, .68, .19); }
	30%, 100% { opacity: 0; transform: scale(.9); filter: blur(2px); }
}
@keyframes em-w2 {
	0%, 30.07% { opacity: 0; transform: scale(.8); filter: blur(0); animation-timing-function: cubic-bezier(.17, .84, .44, 1); }
	33.4%, 46.73% { opacity: 1; transform: none; filter: blur(2px); animation-timing-function: cubic-bezier(.55, .06, .68, .19); }
	50.07%, 100% { opacity: 0; transform: scale(.9); filter: blur(2px); }
}
@keyframes em-w3 {
	0%, 49.93% { opacity: 0; transform: scale(.8); filter: blur(0); animation-timing-function: cubic-bezier(.17, .84, .44, 1); }
	53.27%, 66.6% { opacity: 1; transform: none; filter: blur(2px); animation-timing-function: cubic-bezier(.55, .06, .68, .19); }
	69.93%, 100% { opacity: 0; transform: scale(.9); filter: blur(2px); }
}
@keyframes em-w4 {
	0%, 69.93% { opacity: 0; transform: scale(.8); filter: blur(0); animation-timing-function: cubic-bezier(.17, .84, .44, 1); }
	73.27%, 92.67% { opacity: 1; transform: none; filter: blur(1.1px); animation-timing-function: cubic-bezier(.55, .06, .68, .19); }
	96%, 100% { opacity: 0; transform: scale(.9); filter: blur(1.1px); }
}
/* Phones: as on the old slider, bold, with the word on its own line. */
@media (max-width: 767px) {
	.em-hero h1 { font-weight: 700; }
	.em-w:first-child { font-weight: 700; }
	.em-rotate { display: grid; justify-items: center; margin-top: 8px; }
	.em-hero .em-hero-logo img { width: 180px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.em-hero-lead { animation: none; opacity: 1; }
	.em-w > span { animation: none; }
	.em-w:first-child > span { opacity: 1; }
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ---- Hide on some screens (from WPBakery's "hide on device") ---- */
@media (max-width: 767px) { .em-hide-phone { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .em-hide-tablet { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .em-hide-laptop { display: none !important; } }
@media (min-width: 1200px) { .em-hide-desktop { display: none !important; } }

/* Full-width sections follow each other with no gap, as on the WPBakery site. */
.wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }

/* Buletine: a bulletin cover, its month and an OPEN button. */
.em-bulletin img { width: 100%; height: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
.em-bulletin h3 { margin: 12px 0 8px; letter-spacing: 1px; }

/* Home page: the latest services. */
.em-latest { background: var(--wp--preset--color--light); }
.em-latest h2 { margin-bottom: var(--wp--preset--spacing--40); }

/* ---- Buttons: all in the outline style of "Urmăriți serviciile" ----
 * A 2px border in the text colour, no fill: white over photos, charcoal on
 * light backgrounds. On hover they fill with the gold accent.
 */
.wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--text) !important;
	border: 2px solid currentColor !important;
	padding: 8.67px 17.29px;
	transition: background-color .15s, border-color .15s, color .15s;
}
.wp-block-cover .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff !important; }
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.wp-block-cover .wp-block-button__link:hover,
.wp-block-cover .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--gold) !important;
	border-color: var(--wp--preset--color--gold) !important;
	color: #fff !important;
}


/* =====================================================================
 * Contemporan (page template "Contemporan", body class .em-contemporan)
 * Everything here is scoped so the Clasic home page is untouched.
 * Mobile-first; breakpoints 600 / 782 / 1024.
 * ===================================================================== */
.em-contemporan { font-size: 17px; overflow-x: hidden; }
.em-contemporan .wp-block-post-content > .alignfull { margin-block-start: 0; }

/* Sections: 56px vertical on phones, 96px on desktop */
.em-contemporan .em-c-section {
	padding-top: 56px;
	padding-bottom: 56px;
	padding-left: 20px;
	padding-right: 20px;
}
@media (min-width: 782px) { .em-contemporan .em-c-section { padding-top: 96px; padding-bottom: 96px; } }
.em-contemporan .em-c-section > * { max-width: 1140px; margin-left: auto; margin-right: auto; }

/* Type */
.em-contemporan h2 {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 1.2;
	text-transform: none;
	color: var(--wp--preset--color--dark);
	margin: 0 auto 32px;
}
.em-contemporan h3 { text-transform: none; letter-spacing: 0; font-size: 20px; font-weight: 600; color: var(--wp--preset--color--dark); }
.em-contemporan .em-c-eyebrow {
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	font-weight: 600;
	margin: 0 auto 12px;
}

/* Reveal: only hidden when scripting is on and motion is welcome (no JS = visible) */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.em-c-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
	.em-c-reveal.is-visible { opacity: 1; transform: none; }
}

/* Hero: 75vh, dark gradient rising from the bottom */
.em-contemporan .wp-block-post-content > .em-hero:first-child { min-height: calc(75vh + 60px) !important; }
.em-contemporan .em-c-hero { padding-bottom: 56px; align-items: flex-end; }
.em-contemporan .em-c-hero .wp-block-cover__inner-container { text-align: center; }
.em-contemporan .em-c-hero .em-c-hero-times {
	color: rgba(255, 255, 255, .92);
	font-size: 18px;
	letter-spacing: 1px;
	margin: 28px 0 24px;
}
.em-contemporan .em-c-hero .wp-block-buttons { gap: 14px; }

/* Cards */
.em-contemporan .em-c-card {
	position: relative;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.em-contemporan .em-c-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, .12); }
.em-contemporan .em-c-card--text { padding: 32px; height: 100%; }
.em-contemporan .em-c-card--text > * { margin-block-start: 0; }
.em-contemporan .em-c-card--text h3 { margin: 0 0 12px; }
.em-contemporan .em-c-card--text p { margin: 0 0 20px; }
.em-contemporan .em-c-card figure { margin: 0; }
.em-contemporan .em-c-card img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 12px 12px 0 0;
}
.em-contemporan .em-c-card-body { padding: 20px 22px 22px; }
.em-contemporan .em-c-card-body > * { margin-block-start: 0; }
.em-contemporan .em-c-card-body h3 { margin: 0 0 8px; font-size: 19px; }
.em-contemporan .em-c-card-body h3 a { color: inherit; text-decoration: none; }
.em-contemporan .em-c-card-body h3 a::after { content: ""; position: absolute; inset: 0; }
.em-contemporan .em-c-card-body p { margin: 0 0 10px; font-size: 15px; color: var(--wp--preset--color--muted); }
.em-contemporan .em-c-card-body .em-c-arrow { color: var(--wp--preset--color--gold); font-size: 22px; margin: 0; transition: transform .2s ease; }
.em-contemporan .em-c-card:hover .em-c-arrow { transform: translateX(6px); }

/* Card grid: 1 / 2 / 4 columns */
.em-contemporan .em-c-cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
.em-contemporan .em-c-cards > * { margin: 0; }
@media (min-width: 600px) { .em-contemporan .em-c-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .em-contemporan .em-c-cards { grid-template-columns: repeat(4, 1fr); } }

/* Two-column blocks: stack under 782px (core default), equal height above */
.em-contemporan .wp-block-columns { gap: 24px; margin-bottom: 0; }
@media (min-width: 782px) { .em-contemporan .wp-block-columns { gap: 32px; } .em-contemporan .em-c-visit-cols { gap: 64px; } }
.em-contemporan .em-c-faith-cols > .wp-block-column > .em-c-card,
.em-contemporan .em-c-giving-cols > .wp-block-column > .em-c-card { height: 100%; }

/* Lists in the visit section */
.em-contemporan .em-c-times,
.em-contemporan .em-c-expect { list-style: none; padding: 0; margin: 0 0 32px; }
.em-contemporan .em-c-times li { padding: 14px 0; border-bottom: 1px solid #e5e5e5; }
.em-contemporan .em-c-expect li { padding: 10px 0 10px 28px; position: relative; }
.em-contemporan .em-c-expect li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--gold); }
.em-contemporan .em-c-visit h3 { margin: 0 0 12px; }

/* Latest services (plugin markup) */
.em-contemporan .ecvs-latest-card { border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .08); overflow: hidden; background: #fff; transition: transform .2s ease; }
.em-contemporan .ecvs-latest-card:hover { transform: translateY(-4px); }
.em-contemporan .ecvs-latest-thumb { position: relative; }
.em-contemporan .ecvs-latest-card.is-live .ecvs-latest-thumb::before {
	content: "LIVE ACUM";
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: #d62828;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 999px;
}

/* Giving */
.em-contemporan .em-c-zelle-addr { font-weight: 600; color: var(--wp--preset--color--dark); word-break: break-word; }

/* Forms: buttons wrap on phones */
.em-contemporan .em-c-forms .wp-block-buttons { gap: 14px; }

/* Contemporan footer */
.em-c-footer { background: #333; color: rgba(255, 255, 255, .7); padding: 64px 20px 32px; margin: 0; }
.em-c-footer a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.em-c-footer a:hover, .em-c-footer a:focus-visible { color: var(--wp--preset--color--gold); }
.em-c-footer h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; font-weight: 600; margin: 0 0 16px; }
.em-c-footer p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; }
.em-c-footer .em-c-footer-cols { max-width: 1140px; margin: 0 auto 40px; gap: 32px; }
.em-c-footer .em-c-footer-logo { margin: 0 0 16px; }
.em-c-footer .em-c-logorow {
	max-width: 1140px;
	margin: 0 auto 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	gap: 16px 20px;
	align-items: center;
}
.em-c-footer .em-c-footer-label { flex-basis: 100%; margin: 0; color: rgba(255, 255, 255, .5); text-transform: uppercase; letter-spacing: 2px; font-size: 12px; }
.em-c-footer .em-c-logorow figure { margin: 0; }
.em-c-footer .em-c-affiliates figure { background: #fff; border-radius: 8px; padding: 8px 12px; }
.em-c-footer .em-c-logorow img { display: block; height: 48px; width: auto; max-width: 100%; }
.em-c-footer .em-c-resources img { height: 44px; }
.em-c-footer .em-c-copyright { max-width: 1140px; margin: 16px auto 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: rgba(255, 255, 255, .5); text-align: center; }