/* ==========================================================================
   Crown Forces North America 1812 — Cassiopeia child template
   Drop this in:  templates/cassiopeia_cfna/css/user.css
   Header image:  templates/cassiopeia_cfna/images/header.jpg  (1920x500)
   ========================================================================== */

:root{
  --cf-red:        #8c1414;   /* module title bars */
  --cf-red-dark:   #6d0f0f;   /* their bottom edge */
  --cf-slate:      #4a5560;   /* menu panel body */
  --cf-slate-dark: #3b444d;   /* menu panel edge */
  --cf-black:      #0d0d0d;   /* page background */
  --cf-ink:        #1a1a1a;   /* body text */
  --cf-link:       #7a1010;
}

/* ---------- page shell ------------------------------------------------ */
body.site{
  background: var(--cf-black);
  color: var(--cf-ink);
  font-family: Georgia, "Times New Roman", serif;
}

/* ---------- header: tiled grunge texture instead of Cassiopeia blue ---- */
.container-header,
.container-header .grid-child,
header.header,
.header{
  background: url("../images/vmenublockheader.png") repeat !important;
  background-color: #4a3f1e !important;   /* fallback if image fails */
  box-shadow: none !important;
  border: 0 !important;
}

/* ---------- header banner --------------------------------------------- */
.container-header .grid-child{
  max-width: none;
  padding: 0;
}
.header-banner{
  display: block;
  width: 100%;
  aspect-ratio: 1920 / 500;
  background: url("../images/header.jpg") center center / cover no-repeat;
}


/* ---------- main layout ----------------------------------------------- */
.site-grid{
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 14px 40px;
  gap: 18px;
}

/* ---------- sidebar modules (Main Menu etc.) -------------------------- */
.container-sidebar-left .card,
.container-sidebar-right .card{
  background: var(--cf-slate);
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
  margin-bottom: 18px;
  overflow: hidden;
}

/* the red title bar with the little square bullet */
.container-sidebar-left .card-header,
.container-sidebar-right .card-header{
  background: linear-gradient(to bottom, var(--cf-red) 0%, var(--cf-red-dark) 100%);
  border-bottom: 1px solid #000;
  padding: 9px 12px;
  border-radius: 0;
}
.container-sidebar-left .card-header h3,
.container-sidebar-right .card-header h3,
.container-sidebar-left .card-header .card-title,
.container-sidebar-right .card-header .card-title{
  margin: 0;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.container-sidebar-left .card-header h3::before,
.container-sidebar-right .card-header h3::before,
.container-sidebar-left .card-header .card-title::before,
.container-sidebar-right .card-header .card-title::before{
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 9px;
  background: #fff;
  vertical-align: 1px;
}

/* menu links inside the slate panel */
.container-sidebar-left .card-body,
.container-sidebar-right .card-body{ padding: 10px 12px; }

.container-sidebar-left ul.mod-menu,
.container-sidebar-right ul.mod-menu{
  list-style: none;
  margin: 0; padding: 0;
}
.container-sidebar-left ul.mod-menu li,
.container-sidebar-right ul.mod-menu li{ margin: 0; }

.container-sidebar-left ul.mod-menu li a,
.container-sidebar-right ul.mod-menu li a{
  display: block;
  padding: 4px 0 4px 16px;
  position: relative;
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.45;
}
/* the ❊-ish bullet before each item */
.container-sidebar-left ul.mod-menu li a::before,
.container-sidebar-right ul.mod-menu li a::before{
  content: "\00BB";           /* » — close to the original's marker */
  position: absolute;
  left: 0;
  color: #c9ced3;
  font-size: .8rem;
}
.container-sidebar-left ul.mod-menu li a:hover,
.container-sidebar-right ul.mod-menu li a:hover{
  color: #ffd9d9;
  text-decoration: underline;
}
.container-sidebar-left ul.mod-menu li.current > a,
.container-sidebar-right ul.mod-menu li.current > a{
  color: #ffdede;
  font-weight: 700;
}

/* ---------- main content card ----------------------------------------- */
.container-component{
  background: #fff;
  border: 1px solid #000;
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
  padding: 22px 26px 28px;
}

/* page + article headings, with the little swash rule under/beside them */
.container-component h1,
.container-component .page-header h1,
.container-component h2.article-title,
.container-component .page-header h2{
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: #111;
  font-size: 1.6rem;
  margin: 0 0 .5rem;
  padding-bottom: .45rem;
  border-bottom: 2px solid #d8d8d8;
}
.container-component h2{ font-size: 1.35rem; }
.container-component h3{ font-size: 1.15rem; }

.container-component a{ color: var(--cf-link); }
.container-component a:hover{ color: #b81c1c; }

/* article meta line (Published / Written by / Hits) */
.container-component .article-info{
  font-size: .8rem;
  color: #666;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: .35rem 0;
  margin-bottom: 1rem;
}
.container-component .article-info dd{ display: inline; margin-right: .9rem; }

/* ---------- search box (top right, like the original) ------------------ */
.container-search{
  position: absolute;
  top: 10px; right: 16px;
  z-index: 5;
}
.container-search input[type="search"],
.container-search input[type="text"]{
  border: 1px solid #888;
  padding: 3px 6px;
  font-size: .85rem;
  width: 210px;
  background: #fff;
}
.container-header{ position: relative; }

/* ---------- footer ----------------------------------------------------- */
.container-footer{
  background: transparent;
  color: #8a8a8a;
  border: 0;
}
.container-footer a{ color: #b9b9b9; }

/* ---------- JEvents: keep it readable inside the white card ------------ */
.container-component .jev_header,
.container-component .jev_toprow{
  background: var(--cf-red);
  color: #fff;
}
.container-component .jev_header a,
.container-component .jev_toprow a{ color: #fff; }
.container-component table.jev_components,
.container-component .jev_listview table{ width: 100%; }

/* ---------- mobile ----------------------------------------------------- */
@media (max-width: 768px){
  /* crop the banner from the centre rather than squashing it flat:
     keeps the engraved title plate visible, loses the outer figures */
  .header-banner{
    aspect-ratio: auto;
    height: 150px;
    background-size: auto 100%;
    background-position: center center;
  }
  .site-grid{ padding: 14px 10px 30px; }
  .container-component{ padding: 16px 15px 20px; }
  .container-search{
    position: static;
    padding: 8px 12px;
    background: #000;
  }
  .container-search input[type="search"],
  .container-search input[type="text"]{ width: 100%; }
}