/* Cassiopeia child theme: Beez3 Personal layout and original association branding.
 * Original Beez3 palette: Angie Radtke / Joomla Project, GPL-2.0-or-later.
 */
:root {
  --cassiopeia-color-primary: #0c1a3e;
  --cassiopeia-color-link: #095197;
  --cassiopeia-color-hover: #063b70;
  --cassiopeia-font-family-body: Arial, Helvetica, sans-serif;
  --cassiopeia-font-family-headings: Arial, Helvetica, sans-serif;
  --body-color: #444;
  --body-bg: #eee;
  --link-color: #095197;
  --link-color-rgb: 9, 81, 151;
}
html { background: #eee; }
body.site {
  max-width: 1050px;
  margin: 20px auto;
  padding: 10px;
  background: #fff;
  color: #444;
  box-shadow: 0 8px 24px #0003;
  font: 14px/1.6 Arial, Helvetica, sans-serif;
}
a { color: #095197; text-underline-offset: .15em; }
a:hover, a:focus-visible { color: #063b70; }
a:focus-visible, button:focus-visible { outline: 3px solid #2873ae; outline-offset: 3px; }
.container-header {
  min-height: 250px;
  margin: 0;
  padding: 30px 28px 45px;
  background: #0c1a3e url('../images/beez3-personal.png') no-repeat right bottom;
  background-size: cover;
  box-shadow: none;
  color: #fff;
}
.container-header > .grid-child { width: 100%; max-width: 100%; padding: 0; }
.container-header .navbar-brand {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 0;
  white-space: normal;
}
.container-header .brand-logo { flex: 0 0 160px; padding: 0; }
.container-header .brand-logo img { display: block; width: 160px; height: 160px; object-fit: contain; }
.container-header .site-description {
  max-width: 570px;
  margin: 0;
  color: #fff;
  font-size: clamp(21px, 2.3vw, 29px);
  line-height: 1.35;
  font-weight: 400;
  text-shadow: 0 1px 2px #0006;
}
.site-grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  grid-template-areas: 'topa topa' 'topb topb' 'sidebar component' 'bottoma bottoma' 'bottomb bottomb';
  gap: 0 24px;
  width: 100%;
  max-width: 100%;
  margin: 20px 0 0;
  padding: 0 10px 20px;
}
.site-grid > .grid-child { min-width: 0; max-width: 100%; }
.container-top-a { grid-area: topa; }
.container-top-b { grid-area: topb; }
.container-sidebar-left { grid-area: sidebar; align-self: start; }
.container-component { grid-area: component; }
.container-bottom-a { grid-area: bottoma; }
.container-bottom-b { grid-area: bottomb; }
.container-sidebar-left > div { width: 100%; }
.container-sidebar-left .card { border: 0; border-radius: 0; }
.container-sidebar-left .card-header,
.container-sidebar-left h3 {
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: #eee;
  color: #444;
  font-size: 16px;
}
.container-sidebar-left .card-body { padding: 0; }
.container-sidebar-left ul.mod-menu { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.container-sidebar-left .mod-menu > li { margin: 0; padding: 0; border-bottom: 1px solid #ddd; }
.container-sidebar-left .mod-menu > li > a {
  display: block;
  width: 100%;
  padding: 8px 12px;
  color: #095197;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.container-sidebar-left .mod-menu > li.active > a,
.container-sidebar-left .mod-menu > li.current > a,
.container-sidebar-left .mod-menu > li > a:hover { background: #095197; color: #fff; }
.container-sidebar-left .mod-menu__sub { margin: 0; padding: 4px 0 4px 14px; list-style: none; }
.container-sidebar-left .mod-menu__sub a { display: block; padding: 7px 10px; font-size: 13px; overflow-wrap: anywhere; }
.breadcrumb { margin: 0 0 18px; padding: 7px 10px; border-bottom: 1px solid #ddd; border-radius: 0; background: #f7f7f7; font-size: 12px; }
main { min-width: 0; overflow-wrap: anywhere; }
h1, h2, h3, h4 { color: #444; font-family: inherit; font-weight: 400; }
h1 { font-size: 26px; line-height: 1.25; }
h2 { font-size: 21px; line-height: 1.35; }
h3 { font-size: 18px; }
.page-header h1, .page-header h2 { margin-bottom: 18px; padding-bottom: 8px; border-bottom: 1px solid #ddd; }
.page-header a { text-decoration: none; }
.article-info { color: #666; font-size: 12px; }
.blog-featured .blog-item, .com-content-category-blog .blog-item { padding-bottom: 18px; border-bottom: 1px solid #ddd; }
.blog-item, .blog-items { min-width: 0; }
.blog-featured .blog-items { column-gap: 20px; row-gap: 20px; }
main img { max-width: 100%; height: auto; }
main table { width: 100% !important; max-width: 100%; table-layout: fixed; }
main td, main th { overflow-wrap: anywhere; }
main iframe { max-width: 100%; }
.readmore .btn, .btn-secondary { border-color: #ccc; border-radius: 3px; background: linear-gradient(#fff, #ddd); color: #095197; }
.pagination { flex-wrap: wrap; }
.back-to-top-link { background: #095197; }
@media (max-width: 767.98px) {
  body.site { width: 100%; margin: 0; padding: 8px; box-shadow: none; }
  .container-header { min-height: 170px; padding: 20px 16px 30px; background-position: center bottom; }
  .container-header .navbar-brand { gap: 14px; }
  .container-header .brand-logo { flex-basis: 88px; }
  .container-header .brand-logo img { width: 88px; height: 88px; }
  .container-header .site-description { font-size: 20px; }
  .site-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'topa' 'topb' 'sidebar' 'component' 'bottoma' 'bottomb'; gap: 20px 0; margin-top: 16px; padding: 0 6px 16px; }
  .container-sidebar-left ul.mod-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .container-sidebar-left .mod-menu > li { display: block; }
  .container-sidebar-left .mod-menu > li > a { padding: 9px 10px; }
  .blog-featured .blog-items, .com-content-category-blog .blog-items { grid-template-columns: minmax(0, 1fr) !important; }
  h1 { font-size: 24px; }
  h2 { font-size: 21px; }
}
@media (max-width: 359px) {
  .container-header { padding: 18px 12px 28px; }
  .container-header .site-description { font-size: 17px; }
  .container-header .brand-logo { flex-basis: 72px; }
  .container-header .brand-logo img { width: 72px; height: 72px; }
}