/* ==========================================================================
   Emmaus Bible Church — homepage styles (Elementor)
   Lives in the “Emmaus styles & scripts” HTML widget at the top of the page.
   Colours, fonts and text are set on each widget in the Elementor panel;
   this file handles layout details, button states and the motion system.
   ========================================================================== */
:root {
  --eb-ink: #2D2A52;
  --eb-acc: #EFA53A;
  --eb-soft: #F2C27C;
  --eb-sub: #B2572F;
  --eb-paper: #FAF6EF;
  --eb-muted: #5C5976;
  --eb-line: #E2D8C8;
  --eb-h: "EB Garamond", Georgia, serif;
  --eb-b: "Instrument Sans", system-ui, sans-serif;
  --eb-ease: cubic-bezier(.2, .7, .2, 1);
}
html { scroll-behavior: smooth; }
body { background: var(--eb-paper); }
.eb-page p { margin: 0; }
.eb-page .elementor-widget:not(:last-child) { margin-block-end: 0; }
.eb-page .elementor-heading-title { text-wrap: balance; }
.eb-page .elementor-widget-text-editor p,
.eb-page .elementor-widget-text-editor li { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.eb-page em { font-style: italic; }
.eb-page .elementor-widget-image { line-height: 0; }
.eb-page .elementor-widget-image img { display: block; }
.eb-page a { text-decoration: none; }

/* ---------- Buttons (component sheet) ---------- */
.eb-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.eb-btn .elementor-button-text { display: inline-flex; align-items: center; gap: 10px; }
.eb-btn .arr { display: inline-block; transition: transform .25s ease; }
.eb-btn .elementor-button:hover .arr { transform: translateX(4px); }
/* Ghost buttons: outline drawn inside so the size never changes */
.eb-ghost .elementor-button { box-shadow: inset 0 0 0 1.5px currentColor; }
.eb-ghost .elementor-button:hover,
.eb-ghost .elementor-button:focus-visible { color: var(--eb-acc) !important; }

/* Calendar dropdown (Add to my calendar) */
.eb-cal { position: relative; }
.eb-cal-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 220px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid var(--eb-line);
  box-shadow: 0 14px 34px rgba(45, 42, 82, .14);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.eb-cal.is-open .eb-cal-menu { opacity: 1; transform: none; pointer-events: auto; }
.eb-cal-menu a {
  display: block;
  padding: 10px 16px;
  font: 500 14.5px/1.3 var(--eb-b);
  color: var(--eb-ink);
  transition: background .15s, color .15s;
}
.eb-cal-menu a:hover, .eb-cal-menu a:focus-visible { background: #f6efe2; color: var(--eb-sub); }

/* ---------- Hero: sunrise brightens as you scroll ---------- */
.eb-dawn.e-con { position: relative; overflow: clip; }
.eb-sky.e-con {
  position: sticky !important;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.eb-sky-img.elementor-widget {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  margin: 0 !important;
  z-index: 0;
}
.eb-sky-img .elementor-widget-container { height: 100%; }
.eb-sky-img img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center 62%;
  filter: brightness(calc(.32 + var(--p, 0) * .72)) saturate(calc(.45 + var(--p, 0) * .65)) contrast(1.05);
  transform: scale(calc(1.14 - var(--p, 0) * .1));
  will-change: transform, filter;
}
.eb-sky.e-con::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #1b1940;
  mix-blend-mode: multiply;
  opacity: calc(.72 - var(--p, 0) * .72);
  pointer-events: none;
}
.eb-sky.e-con::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  z-index: 1;
  background: linear-gradient(0deg, rgba(20, 18, 43, .7), transparent);
  pointer-events: none;
}
.eb-lines.e-con {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 16vh;
  z-index: 2;
}
.eb-lines > .e-con-inner { position: relative; height: 340px; }
.eb-ln.e-con { position: absolute !important; left: 0; right: 0; bottom: 0; }
.eb-ln-b { opacity: 0; visibility: hidden; }
.eb-hero-title em { color: var(--eb-soft); }
.eb-cue.elementor-widget {
  position: absolute !important;
  right: 24px;
  bottom: 28px;
  z-index: 2;
  width: auto !important;
  opacity: calc(1 - var(--p, 0) * 3);
}
.eb-cue .elementor-heading-title { display: flex; align-items: center; gap: 12px; }
.eb-cue .elementor-heading-title::after {
  content: "";
  display: block;
  flex: none;
  width: 1px;
  height: 46px;
  background:
    linear-gradient(#fff, #fff) 0 -23px / 1px 23px no-repeat,
    rgba(255, 255, 255, .5);
  animation: eb-drip 1.8s infinite;
}
@keyframes eb-drip { to { background-position: 0 46px, 0 0; } }
@media (max-width: 1024px) {
  .eb-lines.e-con { bottom: 12vh; }
  .eb-lines > .e-con-inner { height: 380px; }
}
@media (max-width: 767px) {
  .eb-lines > .e-con-inner { height: 420px; }
  .eb-cue.elementor-widget { display: none; }
}

/* ---------- Countdown: a printed timetable ---------- */
.eb-cd { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--eb-ink); font-family: var(--eb-b); }
.eb-cd > div { padding: 18px 0 0 18px; border-right: 1px solid var(--eb-line); }
.eb-cd > div:first-child { padding-left: 0; }
.eb-cd > div:nth-child(4) { border-right: 0; }
.eb-cd b {
  display: block;
  font-family: var(--eb-h);
  font-size: clamp(54px, 6vw, 92px);
  line-height: .95;
  font-weight: 400;
  color: var(--eb-ink);
  font-variant-numeric: tabular-nums;
}
.eb-cd span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--eb-sub); }
.eb-cd .eb-live-note { display: none; grid-column: 1 / -1; font-family: var(--eb-h); font-size: 34px; color: var(--eb-sub); margin: 16px 0 0; }
.eb-cd.is-live > div { display: none; }
.eb-cd.is-live .eb-live-note { display: block; }
@media (max-width: 1024px) {
  .eb-cd b { font-size: 46px; }
  .eb-cd > div { padding-left: 10px; }
}

/* ---------- First visit list ---------- */
.eb-first-title em, .eb-first-title i { color: var(--eb-sub); }
.eb-dl.e-con { border-top: 1px solid var(--eb-line); }
.eb-dl-item.e-con { border-bottom: 1px solid var(--eb-line); }
.eb-sticky.e-con { position: sticky !important; top: 110px; }
@media (max-width: 1024px) { .eb-sticky.e-con { position: relative !important; top: 0; } }
.eb-ratio-first img { width: 100% !important; aspect-ratio: 4 / 5.4; height: auto !important; object-fit: cover; }
.eb-ratio-32 img { width: 100% !important; aspect-ratio: 3 / 2; height: auto !important; object-fit: cover; }
.eb-ratio-34 img { width: 100% !important; aspect-ratio: 3 / 4; height: auto !important; object-fit: cover; }
.eb-ratio-45 img { width: 100% !important; aspect-ratio: 4 / 5; height: auto !important; object-fit: cover; }
.eb-fig { overflow: hidden; background: #d9d1c4; }
.eb-fig img { transition: transform 1.2s var(--eb-ease); }
a:hover .eb-fig img { transform: scale(1.03); }

/* ---------- Quote band with parallax photo ---------- */
.eb-band.e-con { position: relative; overflow: hidden; }
.eb-band-img.elementor-widget {
  position: absolute !important;
  inset: -10% 0;
  width: 100% !important;
  max-width: none !important;
  height: 120%;
  margin: 0 !important;
  z-index: 0;
}
.eb-band-img .elementor-widget-container { height: 100%; }
.eb-band-img img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center 40%; }
.eb-band.e-con::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(20, 15, 10, .65), rgba(20, 15, 10, .1) 60%);
  pointer-events: none;
}
.eb-band.e-con { display: flex; flex-direction: column; justify-content: center; }
.eb-band > .e-con-inner { position: static; justify-content: center; }
.eb-band .elementor-widget:not(.eb-band-img) { position: relative; z-index: 2; }

/* ---------- Through the week collage ---------- */
.eb-week-grid.e-con { --g: 24px; }
.eb-week-grid > .e-con-inner, .eb-week-grid.e-con-full { display: flex; flex-wrap: wrap; align-items: flex-start; }
.eb-week-a.e-con { width: calc((100% - 11 * var(--g)) / 12 * 7 + 6 * var(--g)); }
.eb-week-b.e-con { width: calc((100% - 11 * var(--g)) / 12 * 4 + 3 * var(--g)); margin-left: calc((100% - 11 * var(--g)) / 12 + 2 * var(--g)); margin-top: 120px; }
.eb-week-c.e-con { width: calc((100% - 11 * var(--g)) / 12 * 4 + 3 * var(--g)); margin-left: calc((100% - 11 * var(--g)) / 12 * 2 + 2 * var(--g)); margin-top: -80px; }
.eb-week-d.e-con { width: calc((100% - 11 * var(--g)) / 12 * 5 + 4 * var(--g)); margin-left: calc((100% - 11 * var(--g)) / 12 + 2 * var(--g)); margin-top: 40px; }
.eb-week-item.e-con { color: inherit; }
.eb-week-title .arr { color: var(--eb-acc); display: inline-block; transition: transform .3s; }
.eb-week-item:hover .eb-week-title .arr { transform: translateX(6px); }
@media (max-width: 1024px) {
  .eb-week-a.e-con, .eb-week-b.e-con, .eb-week-c.e-con, .eb-week-d.e-con { width: 100%; margin: 0 0 44px; }
  .eb-week-d.e-con { margin-bottom: 0; }
}

/* ---------- Motion system (front end only; never in the editor) ---------- */
.eb-anim .eb-rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--eb-ease), transform .8s var(--eb-ease); }
.eb-anim .eb-rv.eb-in { opacity: 1; transform: none; }
.eb-anim .eb-d1 { transition-delay: .08s; }
.eb-anim .eb-d2 { transition-delay: .16s; }
.eb-anim .eb-d3 { transition-delay: .24s; }
/* photos wipe into view */
.eb-anim .eb-wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s cubic-bezier(.7, 0, .2, 1); }
.eb-anim .eb-wipe.eb-left { clip-path: inset(0 100% 0 0); }
.eb-anim .eb-wipe.eb-in { clip-path: inset(0 0 0 0); }
.eb-anim .eb-wipe img { transform: scale(1.18); transition: transform 1.8s var(--eb-ease); }
.eb-anim .eb-wipe.eb-in img { transform: scale(1); }
/* headlines rise word by word */
.eb-anim .eb-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.eb-anim .eb-split .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.2, .75, .2, 1); }
.eb-anim .eb-split.eb-in .w > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .eb-page *, .eb-page *::before, .eb-page *::after { animation: none !important; transition: none !important; }
}

/* ---------- Editor view: show every block plainly ---------- */
body.elementor-editor-active .eb-dawn.e-con { min-height: 100vh !important; }
body.elementor-editor-active .eb-sky.e-con { position: relative !important; }
body.elementor-editor-active .eb-sky { --p: 1; }
body.elementor-editor-active .eb-ln-a { display: none !important; }
body.elementor-editor-active .eb-ln-b { opacity: 1; visibility: visible; }

/* Emmaus header — travels with the header container */
.eb-hd.e-con {
  position: fixed !important;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
  z-index: 50;
  transition: background-color .4s, padding .4s, box-shadow .4s;
}
.eb-hd-row.e-con { position: relative; z-index: 49; }
body.eb-lit .eb-hd.e-con {
  background: rgba(250, 246, 239, .97);
  box-shadow: 0 1px 0 #E2D8C8;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.eb-hd .elementor-widget:not(:last-child) { margin-block-end: 0; }
.eb-hd .elementor-widget-image { line-height: 0; }
.eb-logo-dark { display: none; }
body.eb-lit .eb-logo-light { display: none; }
body.eb-lit .eb-logo-dark { display: block; }
body.eb-menu-open .eb-logo-light { display: block !important; }
body.eb-menu-open .eb-logo-dark { display: none !important; }

/* WordPress menu (Elementor Pro Nav Menu widget) */
.eb-navmenu .elementor-menu-toggle,
.eb-navmenu .elementor-nav-menu--dropdown,
.eb-ovmenu .elementor-menu-toggle,
.eb-ovmenu .elementor-nav-menu--dropdown { display: none !important; }
.eb-navmenu .elementor-nav-menu--main { display: block !important; }
.eb-navmenu .elementor-nav-menu { display: flex; flex-wrap: nowrap; align-items: center; gap: 30px; }
.eb-navmenu .elementor-nav-menu > li { margin: 0 !important; }
.eb-navmenu a.elementor-item { position: relative; padding: 4px 0 !important; transition: color .2s; }
.eb-navmenu a.elementor-item::after {
  content: "" !important;
  position: absolute; left: 0 !important; right: 0 !important; bottom: -1px !important; top: auto !important;
  width: auto !important; height: 1.5px !important; opacity: 1 !important;
  background: #EFA53A !important;
  transform: scaleX(0); transition: transform .3s;
}
.eb-navmenu a.elementor-item:hover::after,
.eb-navmenu a.elementor-item.elementor-item-active::after,
.eb-navmenu .current-menu-item > a.elementor-item::after { transform: scaleX(1); }
body.eb-lit .eb-navmenu a.elementor-item { color: #2D2A52 !important; }
.eb-ovmenu .elementor-nav-menu--main { display: block !important; }
.eb-ovmenu .elementor-nav-menu { display: flex; flex-direction: column; gap: 4px; }
.eb-ovmenu a.elementor-item,
.eb-ov-give .elementor-heading-title a { display: inline-block; padding: 0 !important; transform: translateY(20px); transition: transform .5s, color .2s; }
.eb-ovmenu a.elementor-item::before, .eb-ovmenu a.elementor-item::after { display: none !important; }
.eb-ovmenu a.elementor-item:hover, .eb-ov-give .elementor-heading-title a:hover { color: #EFA53A !important; font-style: italic; }
body.eb-menu-open .eb-ovmenu a.elementor-item,
body.eb-menu-open .eb-ov-give .elementor-heading-title a { transform: none; }
.eb-ov-give .elementor-heading-title a { color: inherit; }

.eb-nav-link .elementor-heading-title a { position: relative; color: inherit; text-decoration: none; transition: color .2s; }
.eb-nav-link .elementor-heading-title a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1.5px;
  background: #EFA53A;
  transform: scaleX(0);
  transition: transform .3s;
}
.eb-nav-link .elementor-heading-title a:hover::after,
.eb-nav-link.is-active .elementor-heading-title a::after { transform: scaleX(1); }
body.eb-lit .eb-nav-link .elementor-heading-title { color: #2D2A52 !important; }

.eb-give .elementor-button { transition: background-color .2s, color .2s; }

.eb-burger { display: none; flex: none !important; width: auto !important; }
.eb-burger .elementor-heading-title { white-space: nowrap; }
.eb-burger .elementor-heading-title { cursor: pointer; user-select: none; }
body.eb-lit .eb-burger .elementor-heading-title { color: #2D2A52 !important; }
body.eb-menu-open .eb-burger .elementor-heading-title { color: #fff !important; }
body.eb-menu-open .eb-hd.e-con { background: transparent !important; box-shadow: none !important; }

.eb-overlay.e-con {
  position: fixed !important;
  inset: 0;
  z-index: 48;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}
.eb-overlay .elementor-heading-title a { color: inherit; text-decoration: none; display: inline-block; transform: translateY(20px); transition: transform .5s, color .2s; }
.eb-overlay .elementor-heading-title a:hover { color: #EFA53A; font-style: italic; }
body.eb-menu-open .eb-overlay.e-con { opacity: 1; pointer-events: auto; }
body.eb-menu-open .eb-overlay .elementor-heading-title a { transform: none; }
body.eb-menu-open { overflow: hidden; }

@media (max-width: 1024px) {
  .eb-nav.e-con { display: none !important; }
  .eb-burger { display: block; }
}

/* Editor: keep the header in the flow and show the mobile menu as a block */
body.elementor-editor-active .eb-hd.e-con { position: relative !important; top: 0; background: #2D2A52; }
body.elementor-editor-active .eb-overlay.e-con { position: relative !important; opacity: 1; pointer-events: auto; min-height: 0 !important; }
body.elementor-editor-active .eb-overlay .elementor-heading-title a { transform: none; }

/* Footer */
.eb-ft .elementor-widget:not(:last-child){margin-block-end:0}
.eb-ft p{margin:0}
.eb-ft ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.eb-ft.e-con a{color:inherit !important;text-decoration:none;opacity:.85;transition:opacity .2s}
.eb-ft.e-con a:hover{opacity:1;text-decoration:underline}
.eb-ft .elementor-widget-image{line-height:0}