/**
 * Peace of Mind — simpler Cassiopeia layout inspired by the Artisteer HomeWatch template.
 * Navy header, white content sheet (~960px), red headings, dark footer.
 */

:root {
  --peace-navy: #002868;
  --peace-navy-mid: #205a81;
  --peace-red: #bf0a30;
  --peace-teal: #4ca390;
  --peace-sky: #009ee0;
  --peace-sheet: 960px;
}

/* Centered sheet like the old 960px art-sheet */
.site-grid {
  max-width: var(--peace-sheet);
  margin-left: auto;
  margin-right: auto;
}

body.site {
  background: #e8eef3;
}

.container-header {
  background: linear-gradient(180deg, var(--peace-navy) 0%, #0d293f 100%);
  border-bottom: 3px solid var(--peace-red);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.container-header .navbar-brand {
  padding: 0.35rem 0;
}

.container-header .navbar-brand img,
.container-header .navbar-brand .logo-image {
  max-height: 72px;
  max-width: min(280px, 55vw);
  width: auto;
  height: auto;
  object-fit: contain;
}

.container-header .navbar-brand .site-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.container-header .navbar-brand .site-description {
  font-size: 0.95rem;
  color: #b7d6f0;
}

.container-header .mod-menu .metismenu > li > a,
.container-header .mod-menu .metismenu > li > button {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
}

.container-header .mod-menu .metismenu > li > a:hover,
.container-header .mod-menu .metismenu > li.active > a {
  color: #fff;
}

/* Main content card */
.site-content,
#content,
.container-component {
  background: #fff;
  padding: 1.25rem 1.5rem 2rem;
}

/* Accent utility blocks from old custom.css */
.g1 { background: var(--peace-teal); color: #fff; padding: 1.25rem; }
.g2 { background: var(--peace-navy-mid); color: #fff; padding: 1.25rem; }
.g3 { background: var(--peace-sky); color: #fff; padding: 1.25rem; }

.container-footer {
  background: #2e2e2e;
  color: #fff;
  font-size: 0.95rem;
  margin-top: 0;
  border-top: 3px solid var(--peace-navy-mid);
}

.container-footer a:hover {
  color: #b7d6f0;
}

/* Blog / article cleanup — less chrome than stock Cassiopeia */
.blog-item,
.item-page {
  margin-bottom: 1.5rem;
}

.blog-item .page-header h2,
.item-page .page-header h1 {
  color: var(--peace-red);
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

@media (max-width: 991.98px) {
  .container-header .navbar-brand img,
  .container-header .navbar-brand .logo-image {
    max-height: 52px;
    max-width: min(220px, 60vw);
  }
  .site-content,
  #content,
  .container-component {
    padding: 1rem;
  }
}

/* Center logo + menu in header */
header.container-header.full-width,
.container-header.full-width,
.container-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  grid-template-columns: none !important;
}

.container-header > .grid-child,
.container-header .grid-child {
  width: 100% !important;
  max-width: var(--peace-sheet) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  grid-column: auto !important;
}

.container-header .navbar-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  margin-inline-end: auto !important;
  margin-inline-start: auto !important;
  text-align: center !important;
  float: none !important;
}

.container-header .navbar-brand .brand-logo {
  display: inline-flex !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.container-header .container-nav {
  width: 100% !important;
  max-width: var(--peace-sheet) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto 0.25rem !important;
  padding-bottom: 0.55rem !important;
  float: none !important;
}

.container-header .container-nav .mod-menu,
.container-header .container-nav .mod-list,
.container-header .container-nav .nav,
.container-header .mod-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.15rem 1rem !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0.1rem 0.5rem 0.35rem !important;
  list-style: none !important;
  text-align: center !important;
  float: none !important;
}

.container-header .mod-menu > li,
.container-header .container-nav .nav-item {
  float: none !important;
  margin-left: 0 !important;
}

.container-header .mod-menu > li + li {
  margin-left: 0 !important;
}

.container-header .container-nav .nav-item > a,
.container-header .mod-menu > li > a {
  display: inline-block !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  padding: 0.25rem 0.1rem !important;
}

.container-header .container-nav .nav-item > a:hover,
.container-header .container-nav .nav-item.active > a,
.container-header .container-nav .nav-item.current > a,
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li.active > a {
  color: #fff !important;
  text-decoration: underline !important;
  text-underline-offset: 0.2em !important;
}

@media (max-width: 700px) {
  .container-header .mod-menu,
  .container-header .container-nav .nav {
    gap: 0.1rem 0.55rem !important;
  }
  .container-header .container-nav .nav-item > a,
  .container-header .mod-menu > li > a {
    font-size: 0.88rem !important;
  }
}