/*
  Mo-ichido public website facelift layer.
  Sits after the existing theme/user CSS so it can modernise the public site without rewriting all pages at once.
*/

:root {
  --mo-navy: #07152f;
  --mo-blue: #0b5ed7;
  --mo-red: #d71920;
  --mo-white: #ffffff;
  --mo-soft: #f4f7fb;
  --mo-ink: #172033;
  --mo-muted: #6b7280;
  --mo-radius: 22px;
  --mo-shadow: 0 20px 45px rgba(7, 21, 47, 0.14);
}

html {
  scroll-behavior: smooth;
}

body {
  background: linear-gradient(180deg, #ffffff 0%, var(--mo-soft) 100%);
  color: var(--mo-ink);
}

.mo-public-nav {
  box-shadow: 0 12px 35px rgba(7, 21, 47, 0.08);
  border-bottom: 1px solid rgba(7, 21, 47, 0.08);
}

.mo-public-nav .nav-link {
  font-weight: 700;
  letter-spacing: .02em;
}

.mo-public-nav .nav-link.active,
.mo-public-nav .nav-link:hover,
.mo-public-nav .dropdown-item:hover {
  color: var(--mo-red) !important;
}

.mo-public-brand img {
  filter: drop-shadow(0 8px 18px rgba(7, 21, 47, 0.15));
}

.header {
  position: relative;
}

.header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 8px;
  background: linear-gradient(90deg, var(--mo-red), var(--mo-blue), var(--mo-navy));
  z-index: 2;
}

section:not(.header) .container {
  position: relative;
}

section:not(.header) h2,
section:not(.header) h3,
section:not(.header) h4 {
  color: var(--mo-navy);
}

section:not(.header) h2 {
  font-size: clamp(2rem, 4vw, 3.6rem);
  letter-spacing: -0.04em;
}

section:not(.header) h3 {
  color: var(--mo-red);
}

section:not(.header) p,
section:not(.header) li {
  font-size: 1.04rem;
  line-height: 1.8;
}

.img-thumbnail {
  border: 0;
  border-radius: var(--mo-radius);
  box-shadow: var(--mo-shadow);
  padding: 0;
}

.btn,
.btn.rounded-capsule {
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 999px !important;
  box-shadow: 0 12px 25px rgba(7, 21, 47, 0.12);
}

.btn-light {
  background: var(--mo-red);
  color: #fff;
  border-color: var(--mo-red);
}

.btn-light:hover {
  background: var(--mo-navy);
  color: #fff;
  border-color: var(--mo-navy);
}

.mo-public-footer {
  background: radial-gradient(circle at top left, #163b7a 0%, var(--mo-navy) 48%, #030914 100%) !important;
  border-top: 8px solid var(--mo-red);
}

.mo-footer-logo {
  width: min(150px, 42vw);
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.24));
}

.mo-footer-links a,
.mo-footer-credit a {
  font-weight: 800;
  text-decoration: none;
}

.mo-footer-links a:hover,
.mo-footer-credit a:hover {
  text-decoration: underline;
}

.mo-footer-credit {
  color: rgba(255,255,255,.82);
  font-size: .95rem;
}

@media (max-width: 991.98px) {
  .mo-public-nav .navbar-collapse {
    background: #fff;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 18px;
    box-shadow: var(--mo-shadow);
  }

  .mo-public-brand img {
    width: 96px;
  }
}

.mo-footer-members-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: .7rem .75rem 0;
  padding: .72rem 1.18rem;
  border-radius: 999px;
  background: #ffffff;
  color: var(--mo-navy) !important;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 25px rgba(0,0,0,.18);
  border: 2px solid rgba(255,255,255,.35);
}

.mo-footer-members-btn:hover {
  background: var(--mo-red);
  color: #ffffff !important;
  text-decoration: none;
}