/* =============================================================
   OUR FAMILY HERITAGE — custom style overlay
   Adds: tartan page bg, typography, custom masthead (Baird arms + title plate).
   Layered on top of prosilver + our replaced colours.css.
   ============================================================= */

@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 {
  --forest:       #3b5737;
  --forest-deep:  #253a23;
  --petrol:       #4a567e;
  --petrol-deep:  #2f3757;
  --violet:       #7d2d8f;
  --ink:          #1b1b13;
  --ink-muted:    #525247;
  --cream-card:   #ede5cf;
  --cream-light:  #e6decb;
  --cream-edge:   #b8ad92;
}

/* Page bg — Baird tartan tile */
html, body {
  background: #ddd5bf url('images/tartan-tile.png') repeat !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* Wrap — let tartan bleed through (no bright frame) */
#wrap, .wrap, #page-body, .page-body,
#page-header, #page-footer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ---------- Masthead (solid forest panel) ---------- */
#page-header .headerbar {
  background: var(--forest-deep) !important;
  position: relative;
  padding: 0 !important;
  border-top: 3px solid var(--cream-edge);
  border-bottom: 3px solid var(--cream-edge);
  box-shadow: 0 3px 14px rgba(0,0,0,0.35);
}
#page-header .headerbar::after {
  content: "";
  position: absolute;
  left: 36px; right: 36px; bottom: -1px;
  height: 1px;
  background: var(--violet);
  opacity: 0.55;
}
#page-header .headerbar > .inner {
  padding: 28px 36px 22px !important;
  background: transparent !important;
}

#heritage-masthead {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  align-items: center;
}
#heritage-masthead .arms {
  width: 180px;
  height: auto;
  display: block;
  box-shadow: 0 3px 14px rgba(0,0,0,0.40);
  border: 1px solid rgba(0,0,0,0.50);
}

#heritage-masthead .title-plate {
  background: var(--cream-card);
  border: 1px solid var(--cream-edge);
  padding: 14px 22px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}
#heritage-masthead h1.sitetitle {
  font-family: 'EB Garamond', serif;
  font-weight: 500;
  font-size: 38px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}
#heritage-masthead p.motto {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--petrol-deep);
  margin: 4px 0 0;
}
#heritage-masthead p.motto .plain { font-style: normal; }
#heritage-masthead p.tagline {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 6px 0 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Hide prosilver default site-description */
#site-description { display: none !important; }

/* ---------- Nav ---------- */
.nav-main a, #nav-main a {
  color: #ede5cf !important;
  font-family: 'EB Garamond', serif !important;
  font-size: 16px;
}
.nav-main a:hover { color: var(--violet) !important; }

/* ---------- Forum index cards ---------- */
/* Card heads in forest green */
.forabg .header, .forumbg .header,
.forabg .header dt, .forumbg .header dt,
ul.topiclist.forums li.header dt,
ul.topiclist.topics li.header dt {
  background-color: var(--forest) !important;
  background-image: none !important;
  color: #ede5cf !important;
}
.forabg .header a, .forumbg .header a,
li.header dt, li.header dd, th a {
  font-family: 'EB Garamond', serif !important;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: #ede5cf !important;
}

/* 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(--violet) !important;
  border-bottom: 1px solid var(--violet);
}

/* Cards should NOT be transparent (text needs cream bg to read on tartan) */
.forabg, .forumbg, .panel,
section, .forumbg .inner, .forabg .inner {
  background-color: var(--cream-card) !important;
  border: 1px solid var(--cream-edge) !important;
}

/* Postbody */
.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(--forest-deep) !important; }

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

/* ---------- Give every text area a cream plate on the tartan ---------- */
.action-bar, .action-bar-bottom,
.stat-block, .display-actions, .topic-actions,
.panel-container, .forumbg-table,
.navbar, ul.navlinks,
.quick-login, fieldset.quick-login,
.login-box,
.notice, .rules,
#page-footer, #page-footer .navbar,
.copyright {
  background-color: var(--cream-card) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--cream-edge) !important;
  padding: 10px 18px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.action-bar a, .action-bar-bottom a,
.stat-block a, #page-footer a, .copyright a {
  color: var(--petrol-deep) !important;
  font-weight: 500;
}
.action-bar a:hover, #page-footer a:hover { color: var(--violet) !important; }

/* Nav strip — slate blue panel, cream text (keep it distinct from cream plates) */
.navbar, #nav-main {
  background-color: var(--petrol) !important;
  color: #ede5cf !important;
  border-color: var(--petrol-deep) !important;
}
.navbar .nav-main a, #nav-main a { color: #ede5cf !important; }
/* Hover on petrol blue — bright white (readable). Purple accent is on dropdown items (cream bg). */
.navbar .nav-main a:hover, #nav-main a:hover {
  color: #ffffff !important;
  text-decoration: none;
  border-bottom: 1px solid #ffffff;
}

/* ---------- Dropdown menus (Quick Links, notifications, etc.) ----------
   Use #nav-main in selectors so ID specificity (0,1,x,x) beats the
   #nav-main a navbar link rule (0,1,0,1). */
#nav-main .dropdown .dropdown-contents,
#nav-main .dropdown-extended .dropdown-contents {
  background: var(--cream-card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--cream-edge) !important;
}

#nav-main .dropdown-contents li,
#nav-main .dropdown-contents li a,
#nav-main .dropdown-contents li strong,
#nav-main .dropdown-contents li p {
  color: var(--ink) !important;
  background-color: transparent !important;
}

#nav-main .dropdown-contents li:hover,
#nav-main .dropdown-contents li:hover a,
#nav-main .dropdown-contents li:hover strong,
#nav-main .dropdown-contents li:hover p {
  color: var(--violet) !important;
  background-color: var(--cream-light) !important;
  border-bottom: none !important;
}

/* Keep the dark "header" region of extended dropdowns (notifications etc.) readable */
#nav-main .dropdown-extended .header,
#nav-main .dropdown-extended .footer,
.dropdown-extended .header, .dropdown-extended .footer {
  color: #ede5cf !important;
  background-color: var(--forest) !important;
}
#nav-main .dropdown-extended .header a,
#nav-main .dropdown-extended .footer a {
  color: #ede5cf !important;
}

/* Footer copyright/powered-by block needs its plate even when nested */
#page-footer .copyright, #page-footer p, #page-footer div {
  color: var(--ink) !important;
}

/* Stat block inner text */
.stat-block p, .stat-block div, .stat-block strong,
.action-bar p, .action-bar div {
  color: var(--ink) !important;
}