/* ---------------------------
    MTKBTI style sheet
    Authors: Brian May Waruwu
    (c) 2025 MTKBTI
   --------------------------- */


/* -- Fonts -- */

@font-face
{
  font-family: Ubuntu-Sans; font-style: normal; font-weight: normal;
  font-display: swap;
  src: url("/media/templates/site/mtkbti/fonts/ubuntu-sans-regular.woff2") format("woff2");
}

@font-face
{
  font-family: Ubuntu-Sans; font-style: normal; font-weight: bold;
  font-display: swap;
  src: url("/media/templates/site/mtkbti/fonts/ubuntu-sans-bold.woff2") format("woff2");
}

@font-face
{
  font-family: Ubuntu-Sans; font-style: italic; font-weight: normal;
  font-display: swap;
  src: url("/media/templates/site/mtkbti/fonts/ubuntu-sans-italic.woff2") format("woff2");
}

@font-face
{
  font-family: Ubuntu-Sans; font-style: italic; font-weight: bold;
  font-display: swap;
  src: url("/media/templates/site/mtkbti/fonts/ubuntu-sans-bolditalic.woff2") format("woff2");
}


/* -- Variables -- */

:root,
[data-bs-theme="light"]
{
  --body-font-family: Ubuntu-Sans, sans-serif;
  --banner-max-width: 1320px;

  font-size: 13px;
}


/* -- Header -- */

.container-header { background: none; }

.container-header .grid-header
{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.header-right
{
  display: flex;
  grid-column: 2; grid-row: 2;
  justify-content: flex-end;
}

.header-menu { grid-column: 1; grid-row: 2; }


/* -- Logo -- */

.container-header .header-logo
{
}

.brand-logo img { height: 3.84rem; }


/* -- Menu -- */

.container-header .navbar-toggler
{
  color: var(--primary);
  border: none;
  box-shadow: none;
}

.container-header .mod-menu,
.metismenu.mod-menu .mm-toggler
{
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span
{
  color: var(--orange);
}

.metismenu.mod-menu .metismenu-item > a:focus,
.metismenu.mod-menu .metismenu-item > button:focus
{
  outline: none;
}

.container-header .metismenu > li > a::after,
.container-header .metismenu > li > button::before
{
  content: none;
}

.metismenu.mod-menu .metismenu-item > span,
.metismenu.mod-menu .metismenu-item > a,
.metismenu.mod-menu .metismenu-item > button
{
  color: var(--primary);
}

.container-header .metismenu > li.level-1.active > a,
.container-header .metismenu > li.level-1.active > button,
.container-header .metismenu > li.level-1 > a:hover,
.container-header .metismenu > li.level-1 > button:hover
{
}

.metismenu.mod-menu .metismenu-item.active > a,
.metismenu.mod-menu .metismenu-item.active > button,
.metismenu.mod-menu .metismenu-item > a:hover,
.metismenu.mod-menu .metismenu-item > button:hover
{
  color: var(--orange);
}

.metismenu.mod-menu .mm-collapse > li.parent > ul
{
  background-color: var(--white);
}


/* -- Container -- */

.site-grid
{
  min-height: 45rem;
  grid-template-areas:
    ". banner banner banner banner ."
    ". top top top top ."
    ". comp comp comp comp ."
    ". side-r side-r side-r side-r ."
    ". bottom bottom bottom bottom .";
}

.container-top { grid-area: top; }
.container-bottom { grid-area: bottom; }
.container-top, .container-bottom { position: relative; }
.container-top > *, .container-bottom > * { flex: 1; margin: .5em 0; }


/* -- Content -- */

.site-grid main
{
}

h1, .h1  { margin-bottom: 3rem; }
h2, .h2 { margin: 2rem 0; }
h3, .h3 { margin: 1.5rem 0 1rem; }

.com-content-article__body li { margin-bottom: 0.5rem; }
.com-content-article ol, .com-content-article ul { overflow: visible; }


/* -- Banner -- */

.container-banner .banner-overlay
{
  height: 35rem;
  color: var(--white);
  background-color: var(--primary);
  background-size: auto auto;
  background-attachment: scroll;
  background-image: url("/images/home/background.svg");
  background-position: right 25% center;
}

.container-banner .banner-overlay .overlay
{
  text-align: start;
  align-items: normal;
  max-width: var(--banner-max-width);
  background: unset;
  margin-left: auto; margin-right: auto;
  padding-left: 5rem;
}


/* -- Footer -- */

.footer { background-image: none; }

.footer .grid-child
{
  align-items: stretch;
  padding: 2.5rem;
}

.footer .mod-articles-item-content {  }


/* -- Search results -- */

.result__item + .result__item { border-top: 1px solid var(--border-color-translucent); }


/* -- Media -- */

@media (min-width: 992px)
{
  .header-right { grid-row: 1; }
  .header-menu { grid-column: 1 / span 2; }

  .site-grid
  {
    grid-template-areas:
      ". banner banner banner banner ."
      ". top top top top ."
      ". comp comp comp side-r ."
      ". bottom bottom bottom bottom .";
  }

  .container-top, .container-bottom {  flex-direction: column; }
  .container-top > *, .container-bottom > * { flex: 0 auto; }
}

@media (max-width: 768px)
{

  .container-banner .banner-overlay
  {
    background-position-x: right -25rem;
  }

  .com-content-article__body
  {
    padding: 0 1rem;
  }

}