/*
Theme Name: Mukova SDA
Theme URI: https://mukovhasda.co.za
Author: Fhulutech
Description: A calm, mobile-first block theme for Mukovha Seventh-day Adventist Church, Mukovhawabale, Limpopo. Content logic lives in the mukova-church plugin.
Version: 0.6.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mukova-sda
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
img { height: auto; max-width: 100%; }
:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--wp--preset--color--primary); color: #fff; padding: .6rem 1rem; z-index: 10000; }
.skip-link:focus { left: 1rem; top: 1rem; }
p { margin-block-start: 0; }
.wp-block-post-content > * + * { margin-block-start: 1.1rem; }
.wp-block-post-content h2 { margin-block-start: 2.2rem; }
.wp-block-post-content h3 { margin-block-start: 1.6rem; }
hr.wp-block-separator { border: 0; border-top: 1px solid var(--wp--preset--color--line); width: 100%; margin: 2rem auto; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(251,250,247,.96); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
/* No backdrop-filter/transform on the header: they would turn the mobile menu's position:fixed overlay into a box clipped to the header. */
.site-header .wp-block-navigation__responsive-container.is-menu-open { position: fixed; inset: 0; z-index: 100000; overflow-y: auto; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem; width: 100%; align-items: flex-start; justify-content: flex-start; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: .4rem; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: .65rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.site-header.is-scrolled { border-color: var(--wp--preset--color--line); box-shadow: 0 6px 20px -16px rgba(0,92,132,.35); }
.site-header .site-brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.site-header .site-logo { display: block; width: 44px; height: 44px; color: var(--wp--preset--color--primary); flex-shrink: 0; }
.site-header .site-logo svg { width: 100%; height: 100%; display: block; }
.site-footer .footer-logo { width: 56px; height: 56px; color: #fff; opacity: .9; margin-bottom: .6rem; }
.site-footer .footer-logo svg { width: 100%; height: 100%; display: block; }
.site-header .wp-block-site-title { margin: 0; line-height: 1.15; }
.site-header .wp-block-site-title a { color: var(--wp--preset--color--primary); }
.site-header .site-tagline { display: block; font-size: .72rem; color: var(--wp--preset--color--muted); letter-spacing: .04em; }
.site-header .wp-block-navigation a { text-decoration: none; padding: .35rem .2rem; border-bottom: 2px solid transparent; }
.site-header .wp-block-navigation .current-menu-item > a, .site-header .wp-block-navigation a:hover { border-bottom-color: var(--wp--preset--color--accent); }
.site-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base); padding: 2rem 1.5rem; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: .6rem; }
.site-header .wp-block-navigation__responsive-container.is-menu-open a { font-family: var(--wp--preset--font-family--heading); font-size: 1.4rem; }
.site-header .header-cta { display: none; }
@media (min-width: 900px) { .site-header .header-cta { display: inline-flex; } }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--primary); }

/* ---------- Hero ---------- */
/* Photo-first and clean: the congregation photo is shown whole with no overlay or fade (the elders asked for the
   blue haze at the foot of the picture to go). A thin gold rule separates the photo from a deep-blue welcome band
   that holds the copy. --hero-h is the photo height per breakpoint; --hero-pos keeps the group in frame when narrow
   screens crop the sides. */
.mukova-hero { --hero-h: 100vw; --hero-pos: 37% 50%; position: relative; background: var(--wp--preset--color--primary-deep); color: #fff; overflow: hidden; }
.mukova-hero__media { position: relative; margin: 0; height: var(--hero-h); border-bottom: 4px solid var(--wp--preset--color--accent); }
.mukova-hero__media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--hero-pos); }
.mukova-hero > .mukova-hero__inner { position: relative; padding: clamp(1.75rem, 4vw, 2.75rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.mukova-hero .mukova-eyebrow, .mukova-hero .is-style-eyebrow { color: var(--wp--preset--color--accent); }
.mukova-hero .mukova-eyebrow { font-size: .8rem; margin-bottom: .6rem; }
.mukova-hero h1 { color: #fff; font-size: clamp(2rem, 3.9vw, 2.9rem); line-height: 1.12; margin: 0; text-wrap: balance; max-width: 16ch; }
.mukova-hero .mukova-hero__lead { margin-top: .9rem; }
.mukova-hero .mukova-hero__lead > p { color: rgba(255,255,255,.88); font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.55; max-width: 48ch; margin: 0; }
.mukova-hero .wp-block-buttons { margin-top: 1.2rem; }
.mukova-hero .mukova-hero__caption { font-size: .76rem; letter-spacing: .02em; color: rgba(255,255,255,.55); margin: 1.4rem 0 0; }
.mukova-hero .wp-block-button.is-style-outline .wp-block-button__link, .is-style-ghost .wp-block-button__link { background: transparent; border: 2px solid rgba(255,255,255,.7); color: #fff; }
.mukova-hero .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-deep); font-size: .95rem; padding: .72em 1.3em; }
.mukova-hero .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--primary-deep); }
.mukova-hero .wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgba(255,255,255,.15); color: #fff; }
@media (min-width: 600px) { .mukova-hero { --hero-h: 66.7vw; --hero-pos: 15% 50%; } }
@media (min-width: 900px) {
	.mukova-hero { --hero-h: min(40vw, 700px); --hero-pos: 35% 50%; }
	/* Two columns on wide screens: eyebrow + heading left, paragraph + buttons right, both resting on the same baseline. */
	.mukova-hero .mukova-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: end; }
	.mukova-hero .mukova-hero__copy > .mukova-hero__lead { margin-top: 0; }
	.mukova-hero h1 { max-width: 24ch; font-size: clamp(2rem, 3.6vw, 2.7rem); }
	.mukova-hero .wp-block-buttons { margin-top: 1.3rem; }
	.mukova-hero .mukova-hero__caption { text-align: right; }
}

/* ---------- Special service hero (invitation) ---------- */
/* Takes the hero's place while a special Sabbath is switched on. Deliberately plain: one deep-blue field, the
   guest's portrait in a rounded frame with a gold foot, the invitation copy and a quiet countdown. No gradients,
   no textures, no motion beyond the ticking numbers. Three parts: head (eyebrow, title, date), portrait, body
   (message, countdown, buttons). Phones read them top to bottom with a square portrait so the invitation comes
   before the photo; from 900px the head and body share the left column and the portrait stands on the right. */
.mukova-hero.is-special { overflow: visible; }
/* Raw HTML, not a group block, so the wide column and root gutters are applied here by hand. */
.mukova-hero.is-special > .mukova-special { position: relative; box-sizing: border-box; display: grid; gap: 1.4rem; max-width: calc(var(--wp--style--global--wide-size, 1120px) + 2 * var(--wp--preset--spacing--30, 1rem)); margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.5rem) var(--wp--preset--spacing--30, 1rem) clamp(2rem, 5vw, 3.5rem); text-align: center; }
.mukova-special__portrait { margin: 0 auto; width: min(100%, 320px); }
.mukova-special__portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 70%; border-radius: 18px; border-bottom: 4px solid var(--wp--preset--color--accent); box-shadow: 0 24px 48px -28px rgba(0,0,0,.7); }
.mukova-special__portrait figcaption { display: grid; gap: .15rem; margin-top: .8rem; }
.mukova-special__portrait figcaption strong { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.15rem; color: #fff; }
.mukova-special__portrait figcaption span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--accent); font-weight: 700; }
.mukova-special__head .mukova-eyebrow { color: var(--wp--preset--color--accent); font-size: .78rem; margin: 0 0 .7rem; }
.mukova-special__head h1 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.1; margin: 0 auto; max-width: 18ch; text-wrap: balance; }
.mukova-special__when { margin: .9rem 0 0; color: #fff; font-size: clamp(1rem, 1.4vw, 1.15rem); font-weight: 600; line-height: 1.5; }
.mukova-special__when span { color: rgba(255,255,255,.66); font-weight: 400; }
.mukova-special__lead { margin: 0 auto; color: rgba(255,255,255,.86); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.55; max-width: 48ch; }
.mukova-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; max-width: 24rem; margin: 1.3rem auto 0; }
.mukova-special__lead + .mukova-countdown { margin-top: 1.2rem; }
.mukova-countdown > div { border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: .7rem .2rem .55rem; }
.mukova-countdown b { display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.mukova-countdown span { display: block; margin-top: .35rem; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.mukova-countdown__live { grid-column: 1 / -1; margin: 0; padding: .8rem 1rem; border: 1px solid rgba(212,167,44,.5); border-radius: 12px; color: var(--wp--preset--color--accent); font-weight: 600; }
/* Phones: two equal full-width buttons, the same width as the countdown. Wider screens: side by side. */
.mukova-hero.is-special .wp-block-buttons { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; width: 100%; max-width: 24rem; margin: 1.3rem auto 0; }
.mukova-hero.is-special .wp-block-button { margin: 0; }
.mukova-hero.is-special .wp-block-button__link { display: block; box-sizing: border-box; width: 100%; min-width: 0; text-align: center; font-size: .95rem; padding: .78em 1.4em; }
@media (min-width: 600px) {
	.mukova-hero.is-special .wp-block-buttons { display: flex; flex-wrap: wrap; justify-content: center; max-width: none; }
	.mukova-hero.is-special .wp-block-button__link { width: auto; }
}
.mukova-special.has-no-photo .mukova-special__head, .mukova-special.has-no-photo .mukova-special__body { max-width: 60ch; margin: 0 auto; }
@media (min-width: 900px) {
	.mukova-hero.is-special > .mukova-special { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: auto auto; column-gap: clamp(2rem, 4vw, 3.5rem); row-gap: 1.2rem; align-items: center; text-align: left; }
	.mukova-special__head { grid-column: 1; grid-row: 1; align-self: end; }
	.mukova-special__body { grid-column: 1; grid-row: 2; align-self: start; }
	.mukova-special__portrait { grid-column: 2; grid-row: 1 / 3; margin: 0 0 0 auto; width: min(100%, 400px); }
	.mukova-special__portrait img { aspect-ratio: 4 / 5; object-position: 50% 15%; }
	.mukova-special__head h1 { margin: 0; max-width: 16ch; }
	.mukova-special__lead, .mukova-countdown { margin-left: 0; margin-right: 0; }
	.mukova-hero.is-special .wp-block-buttons { justify-content: flex-start; }
	.mukova-special.has-no-photo .mukova-special__head, .mukova-special.has-no-photo .mukova-special__body { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .mukova-special__portrait img { box-shadow: none; } }

/* ---------- After a special service: thank-you hero, moments, notes ---------- */
/* A different mood from the invitation: instead of a framed portrait on a plain field, a photo from the day
   bleeds in (on top on phones, the right half on desktop) and fades into the deep blue; the copy sits over the
   fade with one big gold play button for the sermon. Soft ripple rings on the button invite a press; while the
   message plays the rings stop and a gold ring fills with the progress. */
.mukova-hero.is-recap { position: relative; overflow: hidden; background: var(--wp--preset--color--primary-deep); }
.mukova-recap__photo { position: relative; margin: 0; height: clamp(240px, 68vw, 440px); }
.mukova-recap__photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
.mukova-recap__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,58,84,0) 30%, rgba(0,58,84,.6) 68%, var(--wp--preset--color--primary-deep) 100%); }
.mukova-hero.is-recap > .mukova-recap { position: relative; box-sizing: border-box; max-width: calc(var(--wp--style--global--wide-size, 1120px) + 2 * var(--wp--preset--spacing--30, 1rem)); margin: 0 auto; padding: 0 var(--wp--preset--spacing--30, 1rem) clamp(2rem, 5vw, 3.5rem); }
.mukova-hero.is-recap.has-no-photo > .mukova-recap { padding-top: clamp(1.5rem, 5vw, 3.5rem); }
.mukova-recap__copy { position: relative; margin-top: -2.6rem; }
.mukova-hero.is-recap.has-no-photo .mukova-recap__copy { margin-top: 0; }
.mukova-recap__copy .mukova-eyebrow { color: var(--wp--preset--color--accent); font-size: .78rem; margin: 0 0 .7rem; }
.mukova-recap__copy h1 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.08; margin: 0; max-width: 18ch; text-wrap: balance; }
.mukova-recap__meta { margin: .8rem 0 0; color: rgba(255,255,255,.7); font-size: .95rem; line-height: 1.5; }
.mukova-recap__lead { margin: 1rem 0 0; color: rgba(255,255,255,.88); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.55; max-width: 52ch; }
.mukova-hero:is(.is-recap, .is-feature) .mukova-player { grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem 1.1rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 1rem 1.1rem 1rem 1.2rem; margin: 1.5rem 0 0; max-width: 34rem; }
.mukova-hero:is(.is-recap, .is-feature) .mukova-player__play { position: relative; isolation: isolate; width: 76px; height: 76px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-deep); box-shadow: 0 12px 30px -10px rgba(212,167,44,.9); transition: background .2s, transform .2s; }
.mukova-hero:is(.is-recap, .is-feature) .mukova-player__play:hover { background: #fff; transform: scale(1.04); }
.mukova-hero:is(.is-recap, .is-feature) .mukova-player__icon { border-width: 11px 0 11px 19px; border-color: transparent transparent transparent var(--wp--preset--color--primary-deep); margin-left: 5px; }
.mukova-hero:is(.is-recap, .is-feature) .mukova-player.is-playing .mukova-player__icon { width: 17px; height: 20px; border: 0; margin: 0; background: linear-gradient(90deg, var(--wp--preset--color--primary-deep) 0 6px, transparent 6px 11px, var(--wp--preset--color--primary-deep) 11px 17px); }
.mukova-hero:is(.is-recap, .is-feature) .mukova-player.is-loading .mukova-player__icon { width: 18px; height: 18px; border: 3px solid rgba(0,58,84,.25); border-top-color: var(--wp--preset--color--primary-deep); border-radius: 50%; margin: 0; background: none; }
.mukova-ripple__ring { position: absolute; inset: 0; z-index: -1; border-radius: 50%; border: 2px solid var(--wp--preset--color--accent); opacity: 0; pointer-events: none; animation: mk-ripple 3.2s ease-out infinite; }
.mukova-ripple__ring:nth-child(2) { animation-delay: 1.05s; }
.mukova-ripple__ring:nth-child(3) { animation-delay: 2.1s; }
.mukova-player.is-playing .mukova-ripple__ring, .mukova-player.is-loading .mukova-ripple__ring { animation: none; }
@keyframes mk-ripple { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(2.15); opacity: 0; } }
.mukova-ripple__progress { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); transform: rotate(-90deg); pointer-events: none; }
.mukova-ripple__progress circle { fill: none; stroke-width: 3; stroke: rgba(255,255,255,.14); }
.mukova-ripple__progress circle[data-progress] { stroke: var(--wp--preset--color--accent); stroke-linecap: round; stroke-dasharray: 295.3; stroke-dashoffset: 295.3; transition: stroke-dashoffset .5s linear; }
.mukova-hero:is(.is-recap, .is-feature) .mukova-player__title { color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: 1.15rem; white-space: normal; margin: 0; }
.mukova-hero:is(.is-recap, .is-feature) .mukova-player__sub { display: block; color: rgba(255,255,255,.65); font-size: .85rem; margin: .15rem 0 .55rem; }
.mukova-hero:is(.is-recap, .is-feature) .mukova-player__seek input { accent-color: var(--wp--preset--color--accent); }
.mukova-hero:is(.is-recap, .is-feature) .mukova-player__times { color: rgba(255,255,255,.6); }
.mukova-hero:is(.is-recap, .is-feature) .mukova-player__download { color: rgba(255,255,255,.8); }
.mukova-hero:is(.is-recap, .is-feature) .mukova-player__download:hover { color: var(--wp--preset--color--accent); }
.mukova-hero:is(.is-recap, .is-feature) .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.mukova-hero:is(.is-recap, .is-feature) .wp-block-button { margin: 0; }
@media (max-width: 599px) {
	.mukova-hero:is(.is-recap, .is-feature) .mukova-player { grid-template-columns: auto minmax(0, 1fr); }
	.mukova-hero:is(.is-recap, .is-feature) .mukova-player__download { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: .5rem; }
	.mukova-hero:is(.is-recap, .is-feature) .mukova-player__dl-icon { margin-top: 0; }
	.mukova-hero:is(.is-recap, .is-feature) .wp-block-buttons { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 24rem; }
	.mukova-hero:is(.is-recap, .is-feature) .wp-block-button__link { display: block; box-sizing: border-box; width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .mukova-ripple__ring { animation: none; opacity: .3; transform: scale(1.3); } .mukova-hero:is(.is-recap, .is-feature) .mukova-player__play:hover { transform: none; } }
@media (min-width: 900px) {
	.mukova-recap__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; height: auto; }
	.mukova-recap__photo img { object-position: 50% 35%; }
	.mukova-recap__photo::after { background: linear-gradient(90deg, var(--wp--preset--color--primary-deep) 0%, rgba(0,58,84,.45) 30%, rgba(0,58,84,0) 65%), linear-gradient(180deg, rgba(0,58,84,0) 55%, rgba(0,58,84,.7) 100%); }
	.mukova-hero.is-recap > .mukova-recap { display: grid; align-items: center; min-height: 600px; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
	.mukova-recap__copy { margin-top: 0; width: 54%; max-width: 580px; }
	.mukova-hero.is-recap.has-no-photo .mukova-recap__copy { width: auto; max-width: 64ch; }
}

/* This week's message: an ordinary Sabbath's sermon at the top of the home page. No gradients and no fades: a solid
   deep-blue field with thin gold rings (an echo of the ripple button), the preacher in an arched window frame with a
   solid gold block set behind it, and a row of sound bars in the player that come alive while the message plays. */
.mukova-hero.is-feature::before { content: none; position: absolute; width: 760px; height: 760px; right: -330px; top: -300px; border-radius: 50%; border: 1px solid rgba(212,167,44,.22); box-shadow: 0 0 0 64px var(--wp--preset--color--primary-deep), 0 0 0 65px rgba(212,167,44,.14), 0 0 0 128px var(--wp--preset--color--primary-deep), 0 0 0 129px rgba(212,167,44,.08); pointer-events: none; }
.mukova-feature { position: relative; box-sizing: border-box; display: grid; gap: 2.4rem; align-items: center; max-width: calc(var(--wp--style--global--wide-size, 1120px) + 2 * var(--wp--preset--spacing--30, 1rem)); margin: 0 auto; padding: clamp(2rem, 6vw, 4.5rem) var(--wp--preset--spacing--30, 1rem) clamp(2.5rem, 6vw, 4.5rem); }
.mukova-feature__photo { position: relative; margin: 0 auto; width: min(64vw, 270px); }
.mukova-feature__photo::before { content: ""; position: absolute; inset: 0; transform: translate(14px, 14px); border-radius: 50% 50% 14px 14px / 40% 40% 14px 14px; background: var(--wp--preset--color--accent); }
.mukova-feature__arch { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50% 50% 14px 14px / 40% 40% 14px 14px; border: 3px solid #fff; background: var(--wp--preset--color--primary); }
.mukova-feature__arch img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 22%; }
.mukova-feature__photo figcaption { position: absolute; left: 50%; bottom: -1rem; transform: translateX(-50%); white-space: nowrap; background: var(--wp--preset--color--primary-deep); color: #fff; border: 2px solid var(--wp--preset--color--accent); border-radius: 999px; padding: .35rem 1rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.mukova-feature__photo.is-stage { width: min(62vw, 280px); }
.mukova-feature__photo.is-stage::before { inset: -12px -12px 0; transform: none; background: none; border: 2px solid rgba(212,167,44,.55); border-bottom: 0; border-radius: 50% 50% 0 0 / 38% 38% 0 0; }
.mukova-feature__photo.is-stage .mukova-feature__arch { border: 0; border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: var(--wp--preset--color--accent-soft); }
.mukova-feature__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mukova-feature__art path { fill: none; stroke: var(--wp--preset--color--accent); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mukova-feature__art g:first-child path:first-child { fill: var(--wp--preset--color--primary-deep); }
.mukova-feature__photo.is-stage figcaption { bottom: 1.1rem; }
.mukova-feature__copy .mukova-eyebrow { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin: 0 0 .8rem; }
.mukova-feature__copy h1 { font-size: clamp(2.2rem, 5.4vw, 3.9rem); line-height: 1.04; max-width: 14ch; }
.mukova-feature__meta { margin: .9rem 0 0; color: var(--wp--preset--color--accent); font-size: .98rem; font-weight: 600; }
.mukova-feature__lead { margin: 1rem 0 0; color: rgba(255,255,255,.88); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6; max-width: 52ch; }
.mukova-feature__bars { display: flex; align-items: center; gap: 3px; height: 24px; margin: .35rem 0 .5rem; }
.mukova-feature__bars i { flex: 1 1 0; max-width: 5px; height: 100%; border-radius: 3px; background: rgba(255,255,255,.3); transform: scaleY(.35); transform-origin: 50% 50%; transition: background .3s; }
.mukova-feature__bars i:nth-child(7n+1) { transform: scaleY(.45); }
.mukova-feature__bars i:nth-child(7n+2) { transform: scaleY(.8); }
.mukova-feature__bars i:nth-child(7n+3) { transform: scaleY(.55); }
.mukova-feature__bars i:nth-child(7n+4) { transform: scaleY(1); }
.mukova-feature__bars i:nth-child(7n+5) { transform: scaleY(.3); }
.mukova-feature__bars i:nth-child(7n+6) { transform: scaleY(.7); }
.mukova-player.is-playing .mukova-feature__bars i { background: var(--wp--preset--color--accent); animation: mk-bars .9s ease-in-out infinite alternate; }
.mukova-player.is-playing .mukova-feature__bars i:nth-child(3n+2) { animation-duration: .7s; animation-delay: -.3s; }
.mukova-player.is-playing .mukova-feature__bars i:nth-child(4n+3) { animation-duration: 1.1s; animation-delay: -.6s; }
.mukova-player.is-playing .mukova-feature__bars i:nth-child(5n) { animation-duration: .8s; animation-delay: -.15s; }
@keyframes mk-bars { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .mukova-player.is-playing .mukova-feature__bars i { animation: none; } }
@media (min-width: 900px) {
	.mukova-feature { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(2.5rem, 6vw, 5rem); min-height: 560px; }
	.mukova-feature__photo { order: 2; width: 100%; max-width: 360px; }
	.mukova-feature:has(.is-stage) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
	.mukova-feature__photo.is-stage { align-self: end; width: 100%; max-width: 440px; margin-bottom: calc(-1 * clamp(2.5rem, 6vw, 4.5rem)); }
	.mukova-hero.is-feature::before { content: ""; }
}

/* Moments from the day: one big photo and eight small ones; tap opens the plugin's lightbox. */
.mukova-moments { background: var(--wp--preset--color--base); padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 4vw, 3rem); }
.mukova-moments__inner, .mukova-notes__inner { box-sizing: border-box; max-width: calc(var(--wp--style--global--wide-size, 1120px) + 2 * var(--wp--preset--spacing--30, 1rem)); margin: 0 auto; padding: 0 var(--wp--preset--spacing--30, 1rem); }
.mukova-moments .mukova-eyebrow, .mukova-notes .mukova-eyebrow { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--accent); font-weight: 700; margin: 0 0 .4rem; }
.mukova-moments .mukova-section__head h2, .mukova-notes__head h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; }
.mukova-moments .mukova-link-arrow { text-decoration: none; font-weight: 600; color: var(--wp--preset--color--primary); white-space: nowrap; }
.mukova-moments .mukova-link-arrow::after { content: " \2192"; }
.mukova-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.mukova-mosaic a { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: var(--wp--preset--color--primary-soft); }
.mukova-mosaic a:first-child { grid-column: span 2; grid-row: span 2; }
.mukova-mosaic img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transition: transform .45s ease; }
.mukova-mosaic a:hover img, .mukova-mosaic a:focus-visible img { transform: scale(1.04); }
.mukova-moments__more { margin: 1.2rem 0 0; text-align: center; }
.mukova-moments__more .wp-block-button__link { display: inline-block; }
@media (min-width: 700px) { .mukova-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; } .mukova-moments__more { display: none; } }

/* From the message: the key points, numbered in gold, beside the title and the listen button. */
.mukova-notes { background: var(--wp--preset--color--accent-soft); padding: clamp(2rem, 5vw, 3.5rem) 0; }
.mukova-notes__inner { display: grid; gap: 1.5rem; }
.mukova-notes__head h2 { max-width: 22ch; }
.mukova-notes__ref { margin: .5rem 0 0; color: var(--wp--preset--color--muted); }
/* Two equal buttons: full-width rows on phones, side by side from 600px (they never wrap unevenly). */
.mukova-notes__head .wp-block-buttons { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; width: 100%; max-width: 24rem; margin: 1.2rem 0 0; }
.mukova-notes__head .wp-block-button { margin: 0; min-width: 0; }
.mukova-notes__head .wp-block-button__link { display: block; box-sizing: border-box; width: 100%; min-width: 0; text-align: center; font-size: .95rem; padding: .78em 1.2em; white-space: nowrap; }
.mukova-notes__head .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border: 2px solid var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
@media (min-width: 600px) { .mukova-notes__head .wp-block-buttons { grid-template-columns: auto auto; justify-content: start; max-width: none; } }
.mukova-notes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.mukova-notes__list li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .8rem; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgba(0,92,132,.06), 0 8px 24px -12px rgba(0,92,132,.18); }
.mukova-notes__list li > span { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.5rem; color: var(--wp--preset--color--accent); line-height: 1; padding-top: .15rem; }
.mukova-notes__list li p { margin: 0; line-height: 1.55; }
.mukova-notes__list li strong { display: block; color: var(--wp--preset--color--primary); margin-bottom: .2rem; }
@media (min-width: 900px) { .mukova-notes__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; } }

/* ---------- Page header (inner pages) ---------- */
.mukova-page-header { padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem); }
.mukova-page-header .wp-block-post-title, .mukova-page-header .wp-block-query-title, .mukova-page-header h1 { margin: 0; }
.mukova-page-header p { color: var(--wp--preset--color--muted); margin-top: .5rem; max-width: 60ch; }
.mukova-page-header.has-image { position: relative; color: #fff; min-height: 260px; display: grid; align-items: end; }
.mukova-page-header.has-image h1, .mukova-page-header.has-image p { color: #fff; }

/* ---------- Sections & panels ---------- */
.mukova-section { padding-block: var(--wp--preset--spacing--50); }
.mukova-section + .mukova-section { padding-block-start: 0; }
.mukova-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.2rem; }
.mukova-section__head h2 { margin: 0; }
.mukova-section__head .wp-block-heading + p { margin: 0; color: var(--wp--preset--color--muted); }
.is-style-eyebrow { font-family: var(--wp--preset--font-family--body) !important; font-size: .76rem !important; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--accent) !important; font-weight: 700 !important; margin-bottom: .4rem; }
.wp-block-group.is-style-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: clamp(1rem, 3vw, 1.6rem); box-shadow: 0 1px 2px rgba(0,92,132,.06), 0 8px 24px -12px rgba(0,92,132,.18); }
.wp-block-group.is-style-soft { background: var(--wp--preset--color--primary-soft); border-radius: 14px; padding: clamp(1rem, 3vw, 1.6rem); }
.wp-block-group.is-style-gold { background: var(--wp--preset--color--accent-soft); border-radius: 14px; padding: clamp(1rem, 3vw, 1.6rem); }
.mukova-band { background: var(--wp--preset--color--primary); color: #fff; }
.mukova-band h2, .mukova-band h3, .mukova-band a { color: #fff; }
.mukova-band .is-style-eyebrow { color: var(--wp--preset--color--accent) !important; }
.mukova-band .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-deep); }
.mukova-band .mukova-programme, .mukova-band .mukova-card { color: var(--wp--preset--color--contrast); }
.mukova-band .mukova-progress__stage, .mukova-band .mukova-progress__pct, .mukova-band .mukova-progress__latest, .mukova-band .mukova-muted { color: rgba(255,255,255,.8); }
.mukova-band .mukova-progress__bar { background: rgba(255,255,255,.15); }
.mukova-band .mukova-progress .mukova-eyebrow { display: none; }
.mukova-band .mukova-programme h2, .mukova-band .mukova-programme h3 { color: var(--wp--preset--color--primary); }
.mukova-band .mukova-link-arrow { color: #fff; }
.mukova-verse { font-family: var(--wp--preset--font-family--heading); font-style: italic; font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--primary); text-align: center; max-width: 40ch; margin: 0 auto; }
.mukova-verse cite { display: block; font-style: normal; font-family: var(--wp--preset--font-family--body); font-size: .85rem; color: var(--wp--preset--color--muted); margin-top: .6rem; letter-spacing: .05em; }

/* Columns stack nicely on phones with tighter gap. */
@media (max-width: 781px) { .wp-block-columns { gap: 1.25rem; } }

/* Post cards in query loops (events archive fallback etc.) */
.wp-block-post-template .wp-block-post { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 1rem; }
.wp-block-post-featured-image img { border-radius: 10px; }

/* Single */
.mukova-single .wp-block-post-featured-image img { border-radius: 14px; }
.mukova-single .wp-block-post-terms a { text-decoration: none; }
.mukova-back { font-size: .9rem; }
.mukova-back a { text-decoration: none; color: var(--wp--preset--color--muted); }
.mukova-back a::before { content: "\2190  "; }

/* ---------- Footer ---------- */
.site-footer { background: var(--wp--preset--color--primary-deep); color: rgba(255,255,255,.85); margin-top: var(--wp--preset--spacing--60); padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
.site-footer h2, .site-footer h3, .site-footer a, .site-footer strong { color: #fff; }
.site-footer h3 { font-size: 1rem; margin: 0 0 .6rem; letter-spacing: .04em; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--wp--preset--color--accent); }
.site-footer .mukova-times span, .site-footer .mukova-muted { color: rgba(255,255,255,.65); }
.site-footer .mukova-contact__address { color: rgba(255,255,255,.85); }
.site-footer .mukova-button.is-whatsapp { color: #fff !important; }
.site-footer .site-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1.2rem; font-size: .82rem; color: rgba(255,255,255,.55); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; }
.site-footer .site-footer__bottom a { color: rgba(255,255,255,.75); }
.site-footer .wp-block-navigation a { padding: .15rem 0; }

/* ---------- Editor tweaks ---------- */
.editor-styles-wrapper .mukova-hero { --hero-h: 380px; }