/*
Theme Name: Mar Odisho
Theme URI: https://www.saintodishochurch.org
Author: Mar Odisho Church
Description: A custom block theme for the Ancient Church of the East — Mar Odisho Parish. Brand navy and gold (from the parish banner), warm and welcoming, fully editable in the WordPress Site Editor.
Version: 0.3.2
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marodisho
*/

/* Remove WordPress's default vertical gap between the top-level sections (header / main /
   footer) so the navy header sits flush against the navy hero — no cream strip showing through. */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

/* Guard against any horizontal overflow that would reveal the parchment body as "side bars". */
html, body { overflow-x: hidden; max-width: 100%; }
.wp-site-blocks { overflow-x: clip; }

/* ---- Lapidary buttons: small engraved caps, like a carved inscription ---- */
.wp-element-button {
  font-family: var(--wp--preset--font-family--sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
  font-weight: 600;
}

/* ---- Signature: the gilded cross-divider (the Church-of-the-East cross is the motif) ----
   A thin gold rule interrupted by a centered cross. Used to separate sections. */
.gilt-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto;
  max-width: 320px;
  color: var(--wp--preset--color--gold);
}
.gilt-rule::before,
.gilt-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.gilt-rule::after { background: linear-gradient(90deg, currentColor, transparent); }
.gilt-rule span { font-size: 1.1rem; line-height: 1; }

/* ---- Signature: the illuminated icon-frame around the hero content ---- */
.icon-frame {
  border: 1px solid rgba(227, 167, 47, 0.55);
  outline: 1px solid rgba(227, 167, 47, 0.55);
  outline-offset: 5px;
}

/* Gold line icon above each worship card title. */
.card-icon { display: block; margin: 0 0 0.6rem; }

/* Donate page: group each section by proximity — generous space BEFORE a section heading, tight
   spacing between a heading, its blurb, and its button (so each block reads as one unit). */
.marodisho-donate h2 { margin-top: 3rem; margin-bottom: 0.35rem; }
.marodisho-donate h2 + p { margin-top: 0.35rem; margin-bottom: 0; }
.marodisho-donate p:has(.marodisho-btn) { margin-top: 0.75rem; margin-bottom: 0; }

/* Upcoming events list (from the church API via [upcoming_events]). */
.marodisho-events { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.marodisho-event { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-top: 1px solid var(--line); }
.marodisho-event:first-child { border-top: none; }
.marodisho-event-date {
  flex: 0 0 auto; width: 58px; text-align: center; line-height: 1;
  background: var(--brand); color: #fff; border-radius: 8px; padding: 8px 0;
}
.marodisho-event-date .m { display: block; font-size: .72rem; letter-spacing: .08em; color: var(--gold-soft); }
.marodisho-event-date .d { display: block; font-family: var(--display); font-size: 1.4rem; font-weight: 600; margin-top: 2px; }
.marodisho-event-body { display: flex; flex-direction: column; gap: 2px; }
.marodisho-event-title { font-family: var(--display); color: var(--brand); font-weight: 600; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.marodisho-event-title .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.marodisho-event-meta, .marodisho-event-loc { color: var(--muted); font-size: .95rem; }
.marodisho-events-empty { color: var(--muted); margin-top: 1.5rem; }

/* Worship schedule list (from the church API via [service_schedule]). */
.marodisho-services { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.marodisho-service { display: flex; flex-direction: column; gap: 2px; padding: 1rem 0; border-top: 1px solid var(--line); }
.marodisho-service:first-child { border-top: none; }
.marodisho-service-name { font-family: var(--display); color: var(--brand); font-weight: 600; font-size: 1.2rem; }
.marodisho-service-when { color: var(--gold, #7a4f0e); font-weight: 600; letter-spacing: 0.02em; }
.marodisho-service-note { color: var(--muted); font-size: .95rem; }
.marodisho-services-empty { color: var(--muted); margin-top: 1.5rem; }

/* Full calendar (FullCalendar via [events_calendar]) — brand the toolbar + accents in navy/gold. */
.marodisho-calendar { margin: 1.5rem 0 0; --fc-button-bg-color: var(--brand, #16294f);
  --fc-button-border-color: var(--brand, #16294f); --fc-button-hover-bg-color: var(--navy-dark, #0e1a36);
  --fc-button-hover-border-color: var(--navy-dark, #0e1a36);
  /* selected view = GOLD (so the active button is obvious against the navy inactive ones) */
  --fc-button-active-bg-color: var(--gold, #e3a72f); --fc-button-active-border-color: var(--gold, #e3a72f);
  --fc-today-bg-color: rgba(227, 167, 47, 0.12); --fc-event-border-color: transparent;
  --fc-page-bg-color: transparent; }
/* Events page: widen the whole content column to the theme's wide size so the page title, intro
   paragraph, and the calendar all share the same edges (the calendar simply fills this column,
   giving day cells room for longer event titles). */
body.marodisho-events { --wp--style--global--content-size: min(1140px, 94vw); }
/* Keep the email-reminder signup a comfortable width instead of stretching across the wide column. */
body.marodisho-events .marodisho-reminders { max-width: 640px; }
/* Keep each toolbar button group together on one line (the long week title was squeezing
   Today/List onto a second row). If the whole bar can't fit, chunks wrap as whole units. */
.marodisho-calendar .fc .fc-toolbar.fc-header-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.6rem 1rem; }
.marodisho-calendar .fc .fc-toolbar-chunk {
  display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 0.5rem; }
.marodisho-calendar .fc-toolbar-title { font-family: var(--display, "Cinzel", serif); color: var(--brand, #16294f);
  font-size: 1.3rem; line-height: 1.2; white-space: nowrap; }
.marodisho-calendar .fc .fc-button { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; font-weight: 600; }
.marodisho-calendar .fc .fc-button-primary:focus-visible { outline: 2px solid var(--gold, #e3a72f); outline-offset: 2px; }
/* The selected view = gold (clearly stands out from the navy inactive buttons). Covers both the
   built-in view buttons (.fc-button-active) and the custom List button (.is-list-active). */
.marodisho-calendar .fc .fc-button-primary.fc-button-active,
.marodisho-calendar .fc .fc-button-primary.fc-button-active:hover,
.marodisho-calendar .fc .fc-button-primary.fc-button-active:focus,
.marodisho-calendar .fc .fc-button-primary.is-list-active,
.marodisho-calendar .fc .fc-button-primary.is-list-active:hover {
  background: var(--gold, #e3a72f) !important;
  border-color: var(--gold, #e3a72f) !important;
  color: var(--navy-dark, #0e1a36) !important;
  font-weight: 700;
  box-shadow: inset 0 -3px 0 rgba(14, 26, 54, 0.22);
}
/* In a list view, the grid button matching the list's scope (e.g. Month for a monthly list) stays
   navy but gets a gold ring — signalling "the list is for this period" without looking selected. */
.marodisho-calendar .fc .fc-button-primary.is-scope-active {
  box-shadow: inset 0 0 0 2px var(--gold, #e3a72f);
  color: var(--gold-soft, #f3d27a) !important;
}
.marodisho-calendar .fc-event { padding: 1px 3px; cursor: pointer; }
/* Let month-view event titles wrap to a couple of lines instead of truncating to one, and use a
   slightly smaller font so more of each title fits per cell (kept ~12.5px for legibility). */
.marodisho-calendar .fc-daygrid-event { white-space: normal; font-size: 0.78rem; }
.marodisho-calendar .fc-daygrid-event .fc-event-title { white-space: normal; overflow: hidden; line-height: 1.2; }
.marodisho-calendar .fc-daygrid-event .fc-event-time { font-size: 0.78rem; opacity: 0.85; }
.marodisho-calendar .fc-col-header-cell-cushion,
.marodisho-calendar .fc-daygrid-day-number { color: var(--ink, #20242e); text-decoration: none; }

/* Event details popup (shown when an event on the calendar is clicked). */
.marodisho-em-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center;
  justify-content: center; padding: 1rem; background: rgba(8, 14, 30, 0.55); }
.marodisho-em-card { width: 100%; max-width: 460px; background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(8, 14, 30, 0.35); animation: marodisho-em-in .12s ease-out; }
@keyframes marodisho-em-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.marodisho-em-head { display: flex; align-items: flex-start; gap: .5rem; padding: .9rem 1.1rem; color: #fff; }
.marodisho-em-title { margin: 0; font-family: var(--display, "Cinzel", serif); font-size: 1.15rem; line-height: 1.25; color: #fff; flex: 1; }
.marodisho-em-close { background: transparent; border: 0; color: #fff; font-size: 1.6rem; line-height: 1;
  cursor: pointer; padding: 0 .15rem; opacity: .85; }
.marodisho-em-close:hover { opacity: 1; }
.marodisho-em-body { padding: 1rem 1.1rem 1.2rem; color: var(--ink, #20242e); }
.marodisho-em-when { margin: 0 0 .6rem; font-weight: 600; color: var(--brand, #16294f); }
.marodisho-em-row { margin: .35rem 0; }
.marodisho-em-desc { margin: .7rem 0 0; white-space: pre-wrap; color: #333; }
.marodisho-em-chip { display: inline-block; padding: .12rem .55rem; margin-right: .35rem; border-radius: 999px;
  background: var(--gold-soft, #f3d27a); color: var(--navy-dark, #0e1a36); font-size: .78rem; font-weight: 600; }

/* Photo hero: a soft text-shadow keeps the title/subtitle readable over the clergy image. */
.hero-cover .wp-block-heading,
.hero-cover p { text-shadow: 0 1px 12px rgba(8, 14, 30, 0.55); }

/* Hero CTAs (Donate + Member Portal, rendered by shortcodes as .marodisho-btn). Style them for the
   dark cover: Member Portal = gold outline, Donate = solid gold. The .marodisho-btn-gold rule must
   come AFTER the plain one so the gold button keeps its fill (equal specificity). */
.hero-cta .marodisho-btn { background: transparent; border: 1px solid var(--gold, #e3a72f); color: #fff !important; }
.hero-cta .marodisho-btn:hover { background: rgba(227, 167, 47, 0.18); }
.hero-cta .marodisho-btn-gold { background: var(--gold, #e3a72f); border-color: var(--gold, #e3a72f); color: #0e1a36 !important; }
.hero-cta .marodisho-btn-gold:hover { background: #c8901f; }

/* Hero layout (flexbox column, no absolute positioning — the earlier absolute attempt caused
   overlapping elements). The content group fills the hero height; the title/subtitle (.hero-top)
   auto-center in the space above, and the worship-times + CTA cluster (.hero-bottom) is anchored
   at the bottom via normal flow, so nothing can overlap. */
.hero-cover .hero-content { display: flex; flex-direction: column; align-items: center; }
/* Nudge the title cluster (rubric + headline + subtitle) DOWN. Paired with the reduced .hero-bottom
   margin below (3rem push + 3rem gap = the original 6rem), so the total block height is unchanged and
   the worship-times + CTA cluster stays exactly where it was. */
.hero-cover .hero-top { padding-top: 3rem; }
/* A fixed, generous gap separates the title/subtitle from the worship + CTA cluster below.
   Flow-based (no overlap) and viewport-robust — the gap is always there regardless of height. */
.hero-cover .hero-bottom { display: flex; flex-direction: column; align-items: center; gap: 1.75rem;
  margin-top: 3rem; }

/* Hero worship schedule (compact [service_schedule]) — services laid out side by side, each a
   small centered column (name on top, day/time beneath), with a subtle divider between them. */
.hero-services-title { margin: 0 0 .4rem !important; color: #fff; font-family: var(--display, "Cinzel", serif);
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82rem; opacity: 0.9; line-height: 1.2; }
.hero-services .marodisho-services-compact { list-style: none; margin: 0 !important; padding: 0;
  display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; gap: 0.6rem 2.5rem; }
.hero-services .marodisho-service { display: flex; flex-direction: column; align-items: center;
  gap: 0.1rem; text-align: center; padding: 0; border-top: none; }
.hero-services .marodisho-service-name { color: #fff; font-weight: 600; font-size: 1.05rem; }
.hero-services .marodisho-service-when { color: var(--gold-soft, #f3d27a); font-weight: 700;
  letter-spacing: 0.03em; font-size: 0.85rem; }

/* ---- Home page: transparent header floating over the hero photo (no bar, no seam). Inner
   pages keep the solid navy header. ---- */
body.home .wp-site-blocks { position: relative; }
body.home header.wp-block-template-part {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
}
body.home header.wp-block-template-part .has-navy-background-color {
  background-color: transparent !important;
}
/* Keep the logo wordmark + menu legible over the photo. */
body.home header .brand-name,
body.home header .wp-block-navigation a { text-shadow: 0 1px 8px rgba(8, 14, 30, 0.55); }
/* A gentle top scrim on the hero just behind the header (subtle — not a dark band). */
.hero-cover { position: relative; }
.hero-cover::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 14, 30, 0.45), rgba(8, 14, 30, 0));
}
.hero-cover .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* The eyebrow over the hero headline: spaced caps, gold, like a manuscript rubric. */
.rubric {
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 600;
  font-size: 0.78rem;
}

/* ---- Quality floor ---- */
a:focus-visible,
.wp-element-button:focus-visible,
:focus-visible {
  outline: 2px solid var(--wp--preset--color--gold);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Hamburger icon: replace WordPress's default 2-bar SVG with a 3-line icon (matches the
   member portal). Hide the built-in svg and draw three bars with background gradients. ---- */
.wp-block-navigation__responsive-container-open svg { display: none; }
.wp-block-navigation__responsive-container-open {
  width: 26px; height: 18px;
  background:
    linear-gradient(currentColor, currentColor) top    / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
}

/* ---- Mobile nav overlay: left-aligned column (matches the member portal; consistent left
   edge is easier to scan). !important overrides the nav's generated justify-content. ---- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100%;
  padding: 2.5rem 1.75rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 1.6rem !important;
  width: 100%;
  text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { justify-content: flex-start; width: auto; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.3rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--gold); }

/* ---- Mobile ---- */
@media (max-width: 781px) {
  /* Hero: lighter vertical padding + a tighter gold frame so its outline never overflows.
     (Do NOT add horizontal padding to all groups — it pads <main>, whose transparent bg then
     shows the parchment body as side bars beside the full-bleed sections.) */
  .icon-frame { padding: 2.25rem 1.25rem !important; outline-offset: 3px; }
  /* Keep the engraved eyebrow from overflowing on narrow screens. */
  .rubric { letter-spacing: 0.22em; }
}
@media (max-width: 480px) {
  .icon-frame { padding: 1.75rem 1rem !important; }
  .gilt-rule { max-width: 220px; }
}