/* =========== © 2025 Centroarts.com - https://magenta.su =========== */

body, html { height: 100%; }
body {
  --mg-header-h: 4.5rem;
  --mg-container-pad-x: 1.25rem;
  --mg-container-pad-y: 1.25rem;
  display: flex; flex-direction: column;
}
.mg-container { padding: var(--mg-container-pad-y) var(--mg-container-pad-x); }

/* --- Header --- */
.mg-header {
  --mg-header-bg: var(--bs-body-bg);
  --mg-header-bg-rgb: var(--bs-body-bg-rgb);
  --mg-header-sw: 0 0.125rem 1rem -0.125rem rgba(0, 0, 0, 0.1);
  --mg-header-gap: 0.5rem;

  height: var(--mg-header-h);
  user-select: none;
}

.mg-header { gap: var(--mg-header-gap); }
.mg-header *, .mg-header { display: flex; align-items: center; justify-content: center; }
.mg-header-light .mg-hmenu { display: none !important; } 

@media (min-width: 992px) {
  body {
    --mg-container-pad-y: 2.5rem;
    padding-top: var(--mg-header-h); --mg-header-h: 3.5rem;
  }
  .wrp { margin: 0 auto; width: 100%; max-width: 60rem; }

  .mg-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
  .mg-header:not(.mg-header-light) {
    background-color: var(--mg-header-bg); box-shadow: var(--mg-header-sw);
  }
  .mg-header-light::after {
    content: ""; position: absolute; inset: 0; bottom: -2rem; z-index: -1; pointer-events: none;
    background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 1), rgba(var(--bs-body-bg-rgb), 0));
  }
  .mg-logo, .mg-logout { width: var(--mg-header-h); min-width: var(--mg-header-h); aspect-ratio: 1/1; }
  .mg-hmenu { margin: 0 auto; }
  .mg-hmenu > a { padding: 1rem; }

  .mg-logout { margin-left: auto; }
  .mg-logo { margin-right: auto; }
}

.mg-header a { transition: color .15s ease; }
.mg-hmenu > a {
  color: inherit; line-height: 1.5rem; gap: .5rem;
  text-decoration: none !important;
}
.mg-hmenu > a:hover { color: var(--mg-primary); }

.mg-logo { color: var(--mg-primary); }
.mg-logo .im { --im-size: 26px; }
.mg-logout { color: inherit; }
.mg-logout:hover { color: var(--mg-primary); }

@media (min-width: 992px) {
  .mg-hmenu:not(:hover) > a.active { color: var(--mg-primary); }
}
@media (max-width: 991px) {
  .mg-header {
    height: var(--mg-header-h); min-height: var(--mg-header-h); padding: 1rem; justify-content: start;
    overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mg-header::-webkit-scrollbar { display: none; }

  .mg-logo, .mg-logout { justify-content: center; flex: 0 0 2.5rem; height: 2.5rem; }
  .mg-logout { margin-left: auto; }

  .mg-hmenu { gap: .5rem; }
  .mg-hmenu > a { padding: .5rem; border-radius: 1.5rem; }
  .mg-hmenu > a > span { padding-right: .25rem; }
  .mg-hmenu > a.active { order: -1; background-color: rgba(var(--mg-primary-rgb), 0.1); color: var(--mg-primary); }
}

/* --- Footer --- */
.mg-footer {
  margin-top: auto;
  border-top: 1px solid var(--mg-border);
  padding: 1.25rem var(--mg-container-pad-x);
}
.mg-footer a { color: inherit; }

.mg-fmenu { display: flex; align-items: center; margin: -.5rem -.75rem; margin-right: auto; }
.mg-fmenu a { padding: .5rem .75rem; text-decoration: none; opacity: .6; transition: opacity .15s ease; }
.mg-fmenu a:hover { opacity: 1; }

.mg-copyright { opacity: .6; }

@media (max-width: 575px) {
  .mg-copyright { margin-top: .5rem; }
}
@media (min-width: 576px) {
  .mg-footer {
    --mg-footer-h: 3.5rem;
    padding-top: 0; padding-bottom: 0;
    height: var(--mg-footer-h); flex: 0 0 var(--mg-footer-h);
    display: flex; align-items: center;
  }
  .mg-copyright { margin-left: auto; text-align: right; }
}