/* dent.if.ua - Cassiopeia in the look of the former Protostar site: grey page, white box, blue links, grey menu panel */
/* (variables on body.site: colors_standard.css sets them on :root after this file) */
body.site {
  --cassiopeia-color-primary: #0088cc;
  --cassiopeia-color-link: #0088cc;
  --cassiopeia-color-hover: #005580;
  --link-color: #0088cc;
  --link-color-rgb: 0, 136, 204;
  --link-hover-color: #005580;
  --link-hover-color-rgb: 0, 85, 128;
  --dent-border: #dddddd;
  background: #f4f6f7; border-top: 3px solid #0088cc; color: #333;
}
body.site a { text-decoration: none; }
body.site a:hover, body.site a:focus { text-decoration: underline; }

/* boxed layout: header + content form one white box, the footer sits under it
   (body is a flex column in Cassiopeia: give the boxes a width, don't push the footer to the bottom) */
.container-header, .site-grid, .container-footer {
  box-sizing: border-box; width: calc(100% - 1.2rem); max-width: 980px; margin-left: auto; margin-right: auto;
}
body.site .site-grid { margin-bottom: 0; }
.container-header {
  margin-top: 20px; background: #fff; background-image: none; box-shadow: none;
  border: 1px solid var(--dent-border); border-bottom: 0; border-radius: 4px 4px 0 0;
}
.container-header .grid-child { padding: 1.25rem 1.25rem 0; }
.container-header .navbar-brand { padding: 0; margin: 0; }
.container-header .navbar-brand a, .container-header .brand-logo { color: #054a6b; }
.container-header .brand-logo span, .container-header .navbar-brand a { font-size: 2.6rem; font-weight: 400; line-height: 1.2; }
.container-header .site-description { color: #555; }
.site-grid {
  background: #fff; border: 1px solid var(--dent-border); border-top: 0; border-radius: 0 0 4px 4px;
  padding: 0 1.25rem 1.5rem; grid-gap: 0 1.25em;
}
.site-grid > [class^=container-], .site-grid > [class*=" container-"] { padding-left: 0; padding-right: 0; }

/* headings and articles */
h1, h2, .page-header h1, .page-header h2 { font-weight: 400; color: #333; }
.page-header { border-bottom: 1px solid #eee; margin: 1rem 0 1rem; padding-bottom: .5rem; }
.com-content-article .page-header h1, .com-content-article .page-header h2 { font-size: 1.6rem; }
.com-content-article > h1 { font-size: 1.9rem; border-bottom: 1px solid #eee; padding-bottom: .6rem; margin-top: 1rem; }
.com-content-article__body img { max-width: 100%; height: auto; }
.com-content-article__body img.dent-full { width: 100%; }
.com-content-article__body p { margin-bottom: .8rem; }
.dent-map iframe { display: block; width: 100%; border: 0; border-radius: 4px; }

/* right column: grey panel with the menu */
.container-sidebar-right .card {
  background: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,.05); margin-top: 1rem;
}
.container-sidebar-right .card-header {
  background: none; border: 0; font-size: 1.15rem; font-weight: 400; color: #333; padding: 1rem 1.25rem 0;
}
.container-sidebar-right .card-body { padding: .4rem 1.25rem 1.25rem; }
.container-sidebar-right .card-header + .card-body { border-top: 0; }
.container-sidebar-right .mod-menu { padding: .4rem 0 0; border-top: 1px solid #e3e3e3; }
.container-sidebar-right .mod-menu > li > a { padding: .1rem 0; }
.container-sidebar-right .mod-menu > li.current > a { font-weight: 600; color: #005580; }

/* footer as on the old site: plain line under the box */
.container-footer { background: none; color: #333; margin-top: 1.25rem; }
.container-footer .grid-child { border-top: 1px solid #e5e5e5; padding: 1rem 1.25rem; display: block; }
.container-footer .mod-footer { font-size: .9rem; }
.container-footer .mod-footer .footer2:empty { display: none; }

@media (max-width: 575.98px) {
  .container-header { margin-top: .6rem; }
  .container-header .grid-child { padding: .9rem .9rem 0; }
  .container-header .brand-logo span, .container-header .navbar-brand a { font-size: 1.55rem; }
  .site-grid { padding: 0 .9rem 1rem; }
  .com-content-article .page-header h1, .com-content-article .page-header h2, .com-content-article > h1 { font-size: 1.4rem; }
}
