/* ============================================================
   emrjackson.com — cassiopeia_emrjackson child template
   ============================================================ */

/* --- CSS custom property overrides ---
   These run after colors_standard.css but before the inline
   block in index.php. The inline block only sets --hue,
   --template-bg-light, --template-text-dark/light,
   --template-link-color, and --template-special-color, so
   everything here is safe to override via :root.
------------------------------------------------------------ */
:root {
  /* System font stacks — no external requests */
  --cassiopeia-font-family-headings:
    'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  --cassiopeia-font-family-body:
    Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
  --cassiopeia-font-weight-normal:   400;
  --cassiopeia-font-weight-headings: 400;

  /* Leaf green replaces Cassiopeia's default blue */
  --cassiopeia-color-primary:  #3d6b30;
  --cassiopeia-color-link:     #3d6b30;
  --cassiopeia-color-hover:    #2a4e20;
  --link-color:                #3d6b30;
  --link-color-rgb:            61, 107, 48;
  --link-hover-color:          #2a4e20;
  --link-hover-color-rgb:      42, 78, 32;

  /* Local tokens */
  --emr-green:      #3d6b30;
  --emr-green-dark: #2a4e20;
  --emr-rule:       #c4d4be;
  --emr-faint:      #edf3eb;
  --emr-bg:         #f5f8f4;
  --emr-text:       #1c2118;
  --emr-muted:      #4a5244;
}

/* --- Body --- */
body {
  background-color: var(--emr-bg);
  font-size: 1.0625rem;   /* 17px */
  line-height: 1.7;
  color: var(--emr-text);
}

/* --- Content width: 900 px centered --- */
.grid-child {
  max-width: 900px;
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 400;
  line-height: 1.25;
  color: var(--emr-text);
}

/* --- Header: replace the dark gradient with a clean light bar --- */
.container-header {
  background-color: var(--emr-bg);
  background-image: none;
  box-shadow: none;
  border-bottom: 1px solid var(--emr-rule);
}

/* Brand / site title */
.container-header .navbar-brand {
  color: var(--emr-text);
  font-size: 1.5rem;
}

.container-header .navbar-brand a.brand-logo,
.container-header .navbar-brand a.brand-logo:hover,
.container-header .navbar-brand a.brand-logo:focus {
  color: var(--emr-text);
  text-decoration: none;
}

/* Tagline */
.container-header .site-description {
  color: var(--emr-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

/* --- Navigation --- */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  color: var(--emr-text);
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.active > span {
  color: var(--emr-green);
}

/* Active / hover underline indicator */
.container-header .mod-menu > li.active:after,
.container-header .mod-menu > li:hover:after {
  background-color: var(--emr-green);
}

/* Mobile hamburger */
.container-header .navbar-toggler {
  color: var(--emr-text);
  border-color: var(--emr-rule);
}

/* --- Main content spacing --- */
.container-component {
  padding-block: 2rem;
}

/* --- Footer --- */
.container-footer {
  background-color: var(--emr-bg);
}

.footer .grid-child {
  padding-block: 1.25rem;
  font-size: 0.875rem;
  color: var(--emr-muted);
}

/* --- Horizontal rules --- */
hr {
  border-color: var(--emr-rule);
  opacity: 1;
}

/* --- Card modules (sidebar, top-a/b, etc.) --- */
.card {
  border-color: var(--emr-rule);
  background-color: var(--emr-faint);
}