/**
 * KAVANA CHICAGO - Stage A custom styles for the Cassiopeia template.
 *
 * Approved palette, drawn from the live Kavana site:
 *   body background ......... #bf9668 (warm brown)
 *   main content area ....... #fdf9ef (warm ivory)
 *   header / menu links ..... #4a3220 (deep espresso)
 *   link hover / active ..... #8a5a2b (warm bronze)
 *   sidebar module border .. #b98d54 (bronze), 3px solid, 8px radius
 *   sidebar module bg ...... #fffdf7
 *   footer ................. dark bar with light text
 *
 * Selectors follow Cassiopeia's rendered markup
 * (header.container-header, .site-grid, .container-component,
 *  .sidebar-right/.sidebar-left cards, footer.container-footer).
 */

/* 1. Page background: warm brown -------------------------------------- */
body.site {
  background-color: #bf9668;
}

/* 2. Header: blend into the brown page, espresso links ------------------ */
.header.container-header {
  background: transparent;
  box-shadow: none;
}
.header .navbar-brand .site-title,
.header .site-description {
  color: #4a3220;
}
.header a,
.header .mod-menu .nav-link {
  color: #4a3220;
}
.header a:hover,
.header a:focus,
.header .mod-menu .nav-link:hover,
.header .mod-menu .nav-link:focus,
.header .mod-menu .active > .nav-link,
.header .mod-menu .nav-link.active {
  color: #8a5a2b;
}

/* Keep the circular logo at a sensible header size */
.header .brand-logo img {
  max-height: 110px;
  width: auto;
}

/* 3. Main content area: warm ivory -------------------------------------- */
.site-grid > .container-component {
  background-color: #fdf9ef;
  border-radius: 8px;
  padding: 1.5rem;
}

/* Breadcrumb bar inside the ivory content area */
.container-component .breadcrumb {
  background-color: transparent;
}

/* Content links: espresso, bronze on hover */
.container-component a {
  color: #4a3220;
}
.container-component a:hover,
.container-component a:focus {
  color: #8a5a2b;
}

/* 4. Sidebar module boxes ---------------------------------------------- */
.sidebar-right .card,
.sidebar-left .card {
  border: 3px solid #b98d54;
  border-radius: 8px;
  background-color: #fffdf7;
}
.sidebar-right .card > .card-header,
.sidebar-left .card > .card-header {
  background-color: transparent;
  border-bottom: 3px solid #b98d54;
  color: #4a3220;
}
.sidebar-right .card a,
.sidebar-left .card a {
  color: #4a3220;
}
.sidebar-right .card a:hover,
.sidebar-right .card a:focus,
.sidebar-left .card a:hover,
.sidebar-left .card a:focus {
  color: #8a5a2b;
}

/* 5. Footer: dark bar with light text ----------------------------------- */
.footer.container-footer {
  background-color: #141414;
  background-image: none;
  color: #f2ede4;
}
.footer.container-footer a {
  color: #f2ede4;
}
.footer.container-footer a:hover,
.footer.container-footer a:focus {
  color: #8a5a2b;
}

/* 6. Header brand: logo left, tagline beside it (added 2026-10-20) ------- */
/* Actual markup (from cassiopeia/index.php): header.header > div.navbar-brand
   > a.brand-logo (the logo image) + div.site-description (the tagline).
   No .site-title element is rendered, so the tagline is the only text block. */
.header .navbar-brand {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: nowrap;
}
.header .navbar-brand .brand-logo {
  flex: 0 0 auto;
}
.header .navbar-brand .site-description {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
/* Small screens: let the tagline wrap below the logo so nothing overlaps. */
@media (max-width: 575.98px) {
  .header .navbar-brand {
    flex-wrap: wrap;
  }
}