@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');

:root {
  /* Brand colors, Bootstrap-derived (light mode / default) */
  --bs-primary: #800000;
  --bs-primary-rgb: 128,0,0;
  --bs-primary-text-emphasis: #330000;
  --bs-primary-bg-subtle: #e6cccc;
  --bs-primary-border-subtle: #cc9999;

  --bs-secondary: #8a6d1f;
  --bs-secondary-rgb: 138,109,31;
  --bs-secondary-text-emphasis: #372c0c;
  --bs-secondary-bg-subtle: #e8e2d2;
  --bs-secondary-border-subtle: #d0c5a5;

  --bs-success: #5f7a52;
  --bs-success-rgb: 95,122,82;
  --bs-success-text-emphasis: #263121;
  --bs-success-bg-subtle: #dfe4dc;
  --bs-success-border-subtle: #bfcaba;

  --bs-border-radius: 0.25rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.25rem;

  --bs-body-font-family: system-ui;
  --bs-body-font-size: clamp(16px, 16px + 0.3vw, 22px);
  --theme-heading-font: 'Playfair Display', system-ui;
}

/* Confirmed via direct contrast calculation: Bootstrap's plain
   .text-primary/.text-secondary/.text-success utility classes read
   color from --bs-*-rgb (the raw, admin-picked theme color) with
   !important. That raw value has no guaranteed relationship to
   readability against any particular background -- a color chosen to
   look good as a button fails routinely against Bootstrap's own fixed
   --bs-tertiary-bg (#f8f9fa), which isn't something this theme system
   controls at all. This applies in light mode unconditionally, same
   principle as the dark-mode override further below (added earlier
   after the same bug was found there first). Every plain use of these
   classes for body text anywhere on the site is fixed by this one rule
   -- no page content needs to change. */
.text-primary {
  color: #330000 !important;
}
.text-secondary {
  color: #372c0c !important;
}
.text-success {
  color: #263121 !important;
}

html {
  font-size: var(--bs-body-font-size);
}

body {
  font-family: var(--bs-body-font-family);
}

h1, h2, h3, h4, h5, h6,
.theme-preview-heading {
  font-family: var(--theme-heading-font);
}

[data-bs-theme="dark"] {
  --bs-primary-text-emphasis: #b36666;
  --bs-primary-bg-subtle: #1a0000;
  --bs-primary-border-subtle: #4d0000;

  --bs-secondary-text-emphasis: #b9a779;
  --bs-secondary-bg-subtle: #1c1606;
  --bs-secondary-border-subtle: #534113;

  --bs-success-text-emphasis: #9faf97;
  --bs-success-bg-subtle: #131810;
  --bs-success-border-subtle: #394931;
}

/* Confirmed via live DevTools inspection: Bootstrap's plain .text-primary/
   .text-secondary/.text-success utility classes read color directly from
   --bs-*-rgb (the raw, unadjusted theme color) with !important -- that
   raw value never changes between light and dark mode, only the derived
   *-emphasis/*-subtle variants above do. A theme color picked to work as
   a button/accent against a LIGHT page (e.g. a dark charcoal secondary)
   reads fine there but goes dark-on-dark and unreadable once dark mode
   flips the page background dark too, since nothing tells these utility
   classes to use the already-computed, mode-appropriate emphasis color
   instead. Overriding here fixes every page using these classes at once,
   for any theme -- no page content needs to change. !important matches
   Bootstrap's own specificity on these rules; a plain override can't
   beat an already-!important rule otherwise. */
[data-bs-theme="dark"] .text-primary {
  color: #b36666 !important;
}
[data-bs-theme="dark"] .text-secondary {
  color: #b9a779 !important;
}
[data-bs-theme="dark"] .text-success {
  color: #9faf97 !important;
}

/* -- PUBLIC SITE HEADER (topbar) ---------------------------- */
.site-topbar {
  background-color: #f8f6f0;
  border-bottom-color: #e4e2dd;
  color: #212529;
}

.site-topbar-brand {
  color: #212529;
}

/* -- PUBLIC SITE SIDEBAR / OFF-CANVAS PANEL ----------------- */
.site-sidebar {
  background-color: #f8f6f0;
  border-color: #e4e2dd;
}

.site-sidebar-nav li a {
  color: #212529;
}

.site-sidebar-nav li a:hover {
  background-color: #d3d1cc;
}

.site-sidebar-close,
.site-theme-toggle {
  color: #212529;
}

/* -- ADMIN SIDEBAR ------------------------------------------- */
[data-admin-theme] .admin-sidebar,
.admin-sidebar {
  --sidebar-bg: #14141f;
}

/* -- HAMBURGER ICON ------------------------------------------ */
.hamburger {
  color: #14141f;
}

/* -- SOCIAL ICONS -------------------------------------------- */
.social-icon {
  color: #c9b37a;
  border: 2px solid #8a6d1f;
}

/* -- PUBLIC SITE FOOTER -------------------------------------- */
.site-footer {
  background-color: #800000;
  color: #ffffff;
}

.site-footer a {
  color: #ffffff;
}

.site-footer a:hover {
  color: #a64d4d;
}

.footer-bottom,
.footer-bottom p,
.footer-year {
  color: rgba(255,255,255,0.75);
}

/* Confirmed real, visible bug: .footer-newsletter-btn in style.css
   uses background: var(--bs-primary) directly -- correct in general
   (it normally sits on a light page background where primary stands
   out), but this theme's footer_bg IS primary, so the button became
   invisible against its own background. #ffffff/#800000 are
   already guaranteed to contrast with each other (that's how
   #ffffff itself was computed), so using them here -- rather
   than the raw, theme-independent --bs-primary -- keeps this button
   visible against whatever footer_bg happens to be for any theme. */
.footer-newsletter-btn {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #800000 !important;
}

/* Cookie consent's Accept/Decline colors are applied dynamically by
   JS reading the banner's own data-btn attribute, not from static
   style.css rules (which only set border:none for both, structural
   properties only). Decline gets a visible outline from that JS logic;
   Accept doesn't, so it can visually disappear against certain
   data-bg colors, same camouflage problem as the newsletter button
   above. !important wins over the inline style JS applies, without
   needing to touch that JS logic at all. Uses the theme's own
   secondary color, so this works correctly for every preset. */
#cookieAccept {
  border: 2px solid #8a6d1f !important;
}

/* -- BUTTON COLOR OVERRIDES -----------------------------------
   Bootstrap's compiled .btn-* classes bake static colors into
   their own local variables and never read root --bs-primary --
   see bs_button_override_css() for the confirmed source detail. */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #800000;
  --bs-btn-border-color: #8a6d1f;
  --bs-btn-border-width: 2px;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #6d0000;
  --bs-btn-hover-border-color: #8a6d1f;
  --bs-btn-focus-shadow-rgb: 128,0,0;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #660000;
  --bs-btn-active-border-color: #8a6d1f;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: #800000;
  --bs-btn-disabled-border-color: #8a6d1f;
}
.btn-outline-primary {
  --bs-btn-color: #800000;
  --bs-btn-border-color: #800000;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #800000;
  --bs-btn-hover-border-color: #800000;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #800000;
  --bs-btn-active-border-color: #800000;
  --bs-btn-disabled-color: #800000;
  --bs-btn-focus-shadow-rgb: 128,0,0;
}
.btn-secondary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #8a6d1f;
  --bs-btn-border-color: #8a6d1f;
  --bs-btn-border-width: 2px;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #755d1a;
  --bs-btn-hover-border-color: #8a6d1f;
  --bs-btn-focus-shadow-rgb: 138,109,31;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #6e5719;
  --bs-btn-active-border-color: #8a6d1f;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: #8a6d1f;
  --bs-btn-disabled-border-color: #8a6d1f;
}
.btn-outline-secondary {
  --bs-btn-color: #8a6d1f;
  --bs-btn-border-color: #8a6d1f;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #8a6d1f;
  --bs-btn-hover-border-color: #8a6d1f;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #8a6d1f;
  --bs-btn-active-border-color: #8a6d1f;
  --bs-btn-disabled-color: #8a6d1f;
  --bs-btn-focus-shadow-rgb: 138,109,31;
}
.btn-success {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #5f7a52;
  --bs-btn-border-color: #8a6d1f;
  --bs-btn-border-width: 2px;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #516846;
  --bs-btn-hover-border-color: #8a6d1f;
  --bs-btn-focus-shadow-rgb: 95,122,82;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #4c6242;
  --bs-btn-active-border-color: #8a6d1f;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: #5f7a52;
  --bs-btn-disabled-border-color: #8a6d1f;
}
.btn-outline-success {
  --bs-btn-color: #5f7a52;
  --bs-btn-border-color: #5f7a52;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #5f7a52;
  --bs-btn-hover-border-color: #5f7a52;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #5f7a52;
  --bs-btn-active-border-color: #5f7a52;
  --bs-btn-disabled-color: #5f7a52;
  --bs-btn-focus-shadow-rgb: 95,122,82;
}

/* -- LINK COLOR OVERRIDES -----------------------------------
   Same underlying issue as buttons -- see bs_link_override_css(). */
:root {
  --bs-link-color-rgb: 128,0,0;
  --bs-link-hover-color-rgb: 102,0,0;
}
[data-bs-theme="dark"] {
  --bs-link-color-rgb: 179,102,102;
  --bs-link-hover-color-rgb: 194,133,133;
}