/* Monthly Bulletin stylesheet — self-contained, mobile-first.
   Shared across every month's page (see plan KTD1). Do not link
   css/church.css here; palette values are copied below (KTD5). */

:root {
  --color-primary: #E95D00;
  --color-primary-dark: #CA5100;
  --color-royal: #3B1F4D;
  --color-royal-dark: #271433;
  --color-gold: #C9A227;
  --color-gold-light: #F1E3B3;
  --color-text: #2c2c2a;
  --color-text-muted: #6F6A66;
  --color-bg: #ffffff;
  --color-bg-alt: #FAF6F0;
  --color-bg-alt-2: #FFF1E4;
  --color-border: #E7E0D6;
  --font-heading: 'Montserrat', Arial, sans-serif;
  --font-body: 'Droid Serif', Arial, serif;
  --max-width: 900px;
  --gap: 1rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-alt);
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  margin: 0 0 0.5rem;
}

section {
  padding: 2.25rem 1rem;
  max-width: var(--max-width);
  margin: 0 auto;
  /* small breathing room above a jumped-to heading */
  scroll-margin-top: 16px;
}

/* Footer watermark — a faint church-sketch mark in the bottom-right
   corner of every page (section) except the cover, which already has
   its own full design. Deliberately painted above content rather than
   behind it (no negative z-index): some sections (e.g. Flyers) have a
   large opaque image filling that corner, and others (e.g. Birthdays &
   Anniversaries) establish their own stacking context for an unrelated
   reason (its clip-path background band), either of which would hide a
   negative-z-index layer. At 15% opacity, painting on top is harmless —
   pointer-events is off so it never blocks clicks or text selection. */
section:not(.cover) {
  position: relative;
}

section:not(.cover)::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 140px;
  max-width: 22%;
  aspect-ratio: 1086 / 1448;
  background: url(church-pencil.png) no-repeat right bottom;
  background-size: contain;
  opacity: 0.15;
  pointer-events: none;
}

section h2 {
  display: block;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1rem 0 0.1rem 0.7rem;
  border-left: 5px solid var(--color-primary);
  margin: 0 0 1.25rem;
}

/* Cover — a single supplied design image, no composed text overlay (KD9).
   Constrained to the same width as the rest of the page and centered,
   rather than full-bleed, so it reads as part of the same bulletin. */

.cover {
  text-align: center;
  padding: 1.5rem 1rem 0;
}

.cover img {
  max-width: min(100%, var(--max-width));
  margin: 0 auto;
  border-radius: 8px;
}

/* Table of Contents — page 2, directly after the cover (KD7/KTD4).
   The page's only in-page navigation aid (no separate quick-nav). */

.toc {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.25rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.toc h2 {
  border-left: none;
  padding-left: 0;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.3rem;
  color: var(--color-primary-dark);
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.toc a {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-royal);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold);
}

.toc a:hover,
.toc a:focus {
  color: var(--color-primary);
}

/* Back-to-site link — the bulletin is otherwise a self-contained page with
   no site header/nav, so this is the one explicit way back to the main
   church website. Floats fixed at the bottom (out of the way of the
   cover image/content up top) so it stays reachable while scrolling,
   and opens in a new tab (see markup) so reading the bulletin isn't
   interrupted. Hidden until the reader reaches the closing section
   (bulletin.js toggles .is-visible via IntersectionObserver watching
   #closing, the last section on every month's page), so it doesn't
   compete with content the rest of the way down. */

.toc .site-link {
  position: fixed;
  bottom: 0.6rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 500;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.55rem;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  text-decoration: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.toc .site-link.is-visible {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 480px) {
  .toc .site-link {
    bottom: 1rem;
    left: auto;
    right: 1rem;
    transform: none;
    padding: 0.45rem 0.85rem;
    font-size: 0.78rem;
  }
}

.toc .site-link:hover,
.toc .site-link:focus {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Memories — one .memories-group per event, each with its own label
   above a dedicated .memories-photos grid (KD10/KTD2). The label lives
   outside the multi-column flow entirely, so it can never end up
   visually separated from its own event's photos. Every supplied
   photo renders, no numeric cap, no JS masonry library. Photos keep
   their natural aspect ratio (capped at a max-height) rather than
   being forced into a uniform crop, so the grid reads like a real
   photo collage. */

.memories-group {
  margin-bottom: 1.5rem;
}

.memories-group-label {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0 0 0.6rem;
}

.memories-photos {
  column-count: 2;
  column-gap: var(--gap);
}

@media (min-width: 700px) {
  .memories-photos {
    column-count: 3;
  }
}

@media (min-width: 1000px) {
  .memories-photos {
    column-count: 4;
  }
}

.memories-photos a {
  display: block;
  margin-bottom: var(--gap);
  break-inside: avoid-column;
}

.memories-photos img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  cursor: pointer;
}

/* Lightbox — memories photos open enlarged in an overlay on the same
   page (bulletin.js), instead of navigating to the image in a new tab.
   Falls back to normal same-tab navigation if JS doesn't run. */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  background: rgba(20, 12, 6, 0.9);
}

.lightbox.is-open {
  display: flex;
}

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus {
  background: rgba(255, 255, 255, 0.3);
}

/* Flyer grid — flyers must be fully visible without cropping and without
   a click to expand (per feedback: click-to-view is disabled for flyers,
   unlike the memories photos above, which keep click-to-enlarge). */

.flyer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

@media (min-width: 480px) {
  .flyer-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* Fixed height (not auto) so multiple flyers in the same row line up at
   the same height instead of each keeping its own natural aspect ratio —
   object-fit: contain still shows the whole flyer, letterboxed if needed. */
.flyer-grid img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

/* Birthdays & Anniversaries — a full-bleed tinted band (box-shadow spread
   trick, no wrapper markup needed) gives this section its own visual
   identity the way the closing section's dark background does, instead
   of blending into the plain page background on either side of it. */

.birthdays-anniversaries {
  background: var(--color-bg-alt-2);
  box-shadow: 0 0 0 100vw var(--color-bg-alt-2);
  clip-path: inset(0 -100vw);
}

.birthdays-anniversaries h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
}

.birthdays-anniversaries h3 .icon {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

.birthdays,
.wedding-anniversaries,
.death-anniversaries {
  margin-bottom: 1.75rem;
}

.birthdays-anniversaries > div:last-child {
  margin-bottom: 0;
}

/* Person cards — birthdays, wedding anniversaries, death anniversaries.
   Full photo visible (object-fit: contain), not cropped to a circle.
   Centered (rather than left-packed) so a subsection with only one or
   two entries — e.g. a single "In Memory Of" card — reads as deliberately
   placed instead of stranded against a wall of empty space. */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 1.25rem;
}

@media (min-width: 480px) {
  .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.person-card {
  text-align: center;
  font-size: 0.9rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1rem 1rem 1.15rem;
  box-shadow: 0 2px 10px rgba(59, 31, 77, 0.06);
}

.person-card .initials-badge {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  margin: 0 auto 0.85rem;
}

/* Photos keep their natural aspect ratio (no forced square + object-fit,
   which was letterboxing/cropping heads) — sized up to use the card's
   full width (min() keeps them from ever overflowing a narrower card),
   with soft rounded corners and no border, per feedback. */
.person-card img {
  width: auto;
  height: auto;
  max-width: min(220px, 100%);
  max-height: 260px;
  border-radius: 12px;
  margin: 0 auto 0.85rem;
  background: var(--color-bg-alt);
}

/* Fallback when a person has no supplied photo (never a broken-image icon) */
.person-card .initials-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 2rem;
}

.person-card .date {
  color: var(--color-primary-dark);
  font-weight: bold;
}

.person-card .name {
  color: var(--color-text);
}

.person-card .years {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-style: italic;
}

/* Pastor's Message photo (R10) */

.pastor-photo {
  float: right;
  width: min(220px, 40%);
  height: auto;
  margin: 0 0 0.75rem 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

@media (max-width: 479px) {
  .pastor-photo {
    float: none;
    display: block;
    width: min(220px, 70%);
    margin: 0 auto 1rem;
  }
}

/* Events */

.events ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.events li {
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.events .event-date {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-weight: bold;
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  margin-right: 0.5rem;
  font-size: 0.85rem;
}

/* Content-pending placeholder — kept for the Collections figure only.
   Every other section now omits entirely instead of showing pending
   text (see KD6); Collections isn't a standalone section with its own
   heading/TOC entry, so it keeps this inline placeholder treatment. */

.content-pending {
  color: var(--color-text-muted);
  font-style: italic;
  border: 1px dashed var(--color-border);
  padding: 0.75rem;
  border-radius: 4px;
  background: #fff;
}

/* Closing section — a set of clearly-bordered modules (Mass Schedule,
   Sunday Readings, Collections, Trustees, Editorial Board) instead of
   a plain definition list, so each is easy to scan on its own. Stacks
   to a single column on mobile; widens to a multi-column grid once
   there's room. */

.closing {
  background: var(--color-royal-dark);
  color: #fff;
  /* extra breathing room so the page's last section doesn't end flush
     against the browser edge */
  padding-bottom: 3.5rem;
}

.closing h2 {
  color: var(--color-gold-light);
  border-left-color: var(--color-gold);
}

/* Bible verse — a proper centered pull-quote: a card matching the closing
   modules below it (same bg/border/radius), flanking decorative quotation
   marks, and the citation set apart below a short gold rule instead of
   run into the verse as trailing text. */

.closing blockquote {
  position: relative;
  border-left: none;
  margin: 0 0 1.75rem;
  padding: 2.5rem 1.5rem 1.75rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  text-align: center;
}

@media (min-width: 500px) {
  .closing blockquote {
    padding: 2.5rem 3rem 1.75rem;
  }
}

.closing blockquote:before,
.closing blockquote:after {
  position: absolute;
  font-family: Georgia, serif;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-gold);
  opacity: 0.6;
}

.closing blockquote:before {
  content: "\201C";
  left: 0.9rem;
  top: 0.5rem;
}

.closing blockquote:after {
  content: "\201D";
  right: 0.9rem;
  bottom: 0.1rem;
}

.closing blockquote p {
  margin: 0;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.7;
}

.closing blockquote cite {
  display: block;
  margin-top: 1.1rem;
  font-style: normal;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-gold-light);
}

.closing blockquote cite:before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin: 0 auto 0.75rem;
  background: var(--color-gold);
  border-radius: 2px;
}

/* Weekly quote carousel — one quote per Sunday that month, each drawn
   directly from that Sunday's own Gospel reading (see Sunday Readings
   below), instead of a single separately-curated verse. Each slide is
   still a plain <blockquote> so it inherits all the card styling above;
   only one is shown at a time (bulletin.js toggles .is-active). Without
   JS, whichever slide already has .is-active in the markup (the first)
   is what displays — never a broken/empty state. */

.verse-slide {
  display: none;
}

.verse-slide.is-active {
  display: block;
}

.verse-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: -0.75rem 0 1.75rem;
}

.verse-nav {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-gold-light);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.verse-nav:hover,
.verse-nav:focus {
  background: rgba(255, 255, 255, 0.2);
}

.verse-dots {
  display: flex;
  gap: 0.5rem;
}

.verse-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
}

.verse-dot.is-active {
  background: var(--color-gold);
}

/* Closing modules are two explicit rows rather than one auto-placed
   grid, so the two very different shapes of content here — Sunday
   Readings (structurally long: every Sunday that month) vs. the five
   short reference modules — each get a layout suited to them instead of
   fighting over shared row/column tracks:
     Top row:    Sunday Readings (3/4 width) + Mass Schedule/Collections
                 stacked in the remaining 1/4 (.closing-side)
     Bottom row: Trustees, Bulletin Editorial Board, Feedback — 3 equal
                 columns, all comparable, short lengths */

.closing-modules {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.closing-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

.closing-side {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 600px) {
  .closing-row--bottom {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .closing-row--top {
    /* 3/4 width for Sunday Readings, 1/4 for the Mass Schedule +
       Collections stack */
    grid-template-columns: 3fr 1fr;
  }

  .closing-side {
    grid-template-columns: 1fr;
  }

  .closing-row--bottom {
    grid-template-columns: repeat(3, 1fr);
  }
}

.closing-module {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
}

.closing-module h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gold-light);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-gold);
}

.closing-module p {
  margin: 0;
}

.closing-module a {
  color: var(--color-gold-light);
}

/* Icons — clean, monochrome line icons (inherit currentColor), no icon
   font/library dependency (KTD1: no new tooling). */
.icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.closing-module .contact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
}

.closing-module .contact-line:last-child {
  margin-bottom: 0;
}

.closing-module .contact-line .icon {
  color: var(--color-gold-light);
}

.closing-module .phone {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
  /* Forces the phone number onto its own line (flex-wrap above) instead
     of running the name+number together off the edge of a narrow
     module — a name-only line always fits, but "Name (XXX) XXX-XXXX"
     together often doesn't. Indented to align under the name, not the
     icon. */
  flex-basis: 100%;
  margin-left: 1.4rem;
}

.closing .content-pending {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* Sunday Readings — each Sunday is its own scannable block: a date
   badge, then First/Second/Gospel each on its own line with a bold
   label, instead of one long run-on sentence per Sunday. */

.closing .readings-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Multi-column instead of one long stack, so this module's height stays
   in the same ballpark as its neighbors instead of towering over them —
   2 columns once there's some room, 3 once Sunday Readings gets its
   3/4-width slot in .closing-row--top (≥900px, see .closing-row--top). */
@media (min-width: 600px) {
  .closing .readings-list {
    column-count: 2;
    column-gap: 1.5rem;
  }
}

@media (min-width: 900px) {
  .closing .readings-list {
    column-count: 3;
  }
}

.reading-entry {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  break-inside: avoid-column;
}

.reading-entry:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.reading-date {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.reading-line {
  display: block;
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

.reading-line .reading-label {
  display: inline-block;
  min-width: 3.6rem;
  color: var(--color-gold-light);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Holy Mass Schedule — one entry per day, echoing the Sunday Readings
   module's date-badge-then-lines pattern exactly, instead of a plain
   <br>-separated paragraph, so the two modules read as part of the same
   system. Each day can carry one or more service lines. */

.mass-schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mass-day-entry {
  margin-bottom: 1rem;
}

.mass-day-entry:last-child {
  margin-bottom: 0;
}

.mass-day {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.mass-line {
  display: block;
  font-size: 0.9rem;
  margin-top: 0.3rem;
}