/* =============================================================
   CHRISTIAN DISCUSSIONS — custom style overlay
   Layered on top of prosilver + our replaced colours.css.
   Adds: typography, custom masthead (St. Agnes + stained glass banner).
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg:              #18253d;
  --bg-soft:         #1f2e48;
  --parchment:       #f3ead2;
  --parchment-deep:  #ece2c8;
  --parchment-edge:  #b3a684;
  --marian:          #2a4870;
  --marian-deep:     #1d3656;
  --red:             #b34a4a;
  --red-card:        #7a1818;
  --gold:            #c8a04d;
  --ink:             #1f1a14;
  --on-dark:         #d8cdb1;
  --on-dark-muted:   #9a8f73;
}

body { font-family: 'Inter', system-ui, sans-serif !important; }

/* Prosilver wrap — strip frame */
#wrap, .wrap, #page-body, .page-body,
#page-header, #page-footer {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ---------- Masthead: stained glass apse window ---------- */
#page-header .headerbar {
  background: url('images/stained-glass-banner.jpg') center / cover !important;
  border-top: 3px solid var(--gold) !important;
  border-bottom: 3px solid var(--gold) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45) !important;
  position: relative;
}
#page-header .headerbar > .inner {
  padding: 32px 36px 28px !important;
  background: transparent !important;
}

#christian-masthead {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 36px;
  align-items: center;
}
#christian-masthead .saint {
  width: 160px;
  height: auto;
  display: block;
  border: 2px solid var(--gold);
  box-shadow: 0 4px 16px rgba(0,0,0,0.65);
}

#christian-masthead .title-plate {
  background: rgba(24, 37, 61, 0.86);
  border: 1px solid var(--gold);
  padding: 18px 24px 16px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.45);
}
#christian-masthead h1.sitetitle {
  font-family: 'EB Garamond', serif;
  font-weight: 500;
  font-size: 38px;
  letter-spacing: 0.01em;
  color: var(--on-dark);
  margin: 0;
  line-height: 1.05;
}
#christian-masthead .title-rule {
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: 12px 0 10px;
}
#christian-masthead p.memorial {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--red);
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}
#christian-masthead p.memorial .em {
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--gold);
}
#christian-masthead p.tagline {
  font-size: 12px;
  color: var(--on-dark-muted);
  margin: 8px 0 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Hide prosilver default site-description (kept for a11y) */
#site-description { display: none !important; }

/* ---------- Navbar ---------- */
.navbar {
  border-top: 1px solid var(--marian-deep) !important;
  border-bottom: 1px solid var(--marian-deep) !important;
}
.nav-main a, #nav-main a {
  color: var(--on-dark) !important;
  font-family: 'EB Garamond', serif !important;
  font-size: 16px;
}
.nav-main a:hover { color: var(--gold) !important; }

/* Card heads in EB Garamond */
.forabg .header a, .forumbg .header a, th a,
li.header dt, li.header dd {
  font-family: 'EB Garamond', serif !important;
  font-size: 18px;
  letter-spacing: 0.02em;
}

/* Forum titles in serif */
ul.topiclist dt a.forumtitle, ul.topiclist dt a.topictitle {
  font-family: 'EB Garamond', serif !important;
  font-size: 19px;
  font-weight: 500;
  color: var(--ink) !important;
}
ul.topiclist dt a.forumtitle:hover, ul.topiclist dt a.topictitle:hover {
  color: var(--red-card) !important;
}

/* Postbody text in readable serif */
.postbody .content, .post .content, .content {
  font-family: 'Inter', sans-serif !important;
  color: var(--ink) !important;
}
.postbody h3 a { font-family: 'EB Garamond', serif !important; color: var(--marian-deep) !important; }

/* Breadcrumbs */
.breadcrumbs, .breadcrumbs a {
  font-family: 'EB Garamond', serif !important;
  font-style: italic;
}
.breadcrumbs a { color: var(--gold) !important; }

/* Action bars */
.action-bar, .action-bar-bottom {
  background: transparent !important;
  color: var(--on-dark-muted) !important;
  font-family: 'EB Garamond', serif !important;
}
.action-bar a { color: var(--gold) !important; }

/* Footer */
#page-footer { color: var(--on-dark-muted) !important; }
#page-footer a { color: var(--gold) !important; }

/* ============ Contrast fixes on dark page surfaces ============ */

/* Page-level titles sit directly on the dark blue body.
   Prosilver paints them with dark ink, so force cream. */
#page-body > h2,
#page-body > .action-bar + h2,
#page-body > h2.topic-title,
#page-body > h2.forum-title,
.headerbar h2 {
  color: var(--on-dark) !important;
}

/* Section headers on dark body: LOGIN / WHO IS ONLINE / STATISTICS. */
#page-body > h3,
#page-body > div > h3,
.stat-block h3 {
  color: var(--on-dark) !important;
  border-bottom-color: var(--gold) !important;
}

/* Links in stat/login blocks that sit directly on dark blue.
   (Links inside .panel / .forabg stay dark-red on cream — untouched.) */
.stat-block a,
#page-body > div > p > a {
  color: var(--gold) !important;
}
.stat-block a:hover,
#page-body > div > p > a:hover {
  color: var(--red) !important;
}

/* Forum-list row header ("THE MEETING PLACE" / TOPICS / POSTS / LAST POST):
   put a marian-blue band behind it so the cream labels are readable. */
.forabg li.header,
.forabg li.header dl,
.forumbg li.header,
.forumbg li.header dl {
  background-color: var(--marian) !important;
}
.forabg li.header dt,
.forabg li.header dd,
.forabg li.header a,
.forumbg li.header dt,
.forumbg li.header dd,
.forumbg li.header a {
  color: var(--on-dark) !important;
}