/* ==========================================================================
   Music Obscura chrome over Astra
   Header: Astra's Header Builder markup, restyled. Your menu stays wired
   through Astra, so menu edits keep working in Appearance -> Menus.
   Footer + banner: rendered by the child theme, Astra's own footer rows hidden.
   ========================================================================== */

/* ---------- Header ---------- */

.site-header,
.ast-primary-header-bar,
.ast-primary-header-bar .site-primary-header-wrap,
.main-header-bar {
  background: var(--mo-dark) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.ast-primary-header-bar {
  position: sticky;
  top: 0;
  z-index: 40;
}

.ast-primary-header-bar .ast-container,
.main-header-bar .ast-container {
  max-width: 1280px;
  padding-inline: 24px;
}

.ast-primary-header-bar .site-primary-header-wrap {
  padding-block: 16px;
}

/* Logo: cream keyline, and the 2px red rule after it */
.site-header .custom-logo-link img,
.site-header .site-logo-img img,
.ast-site-identity img {
  height: 64px !important;
  width: auto !important;
  max-height: none !important;
  display: block;
  border: 2px solid var(--mo-cream);
  box-sizing: content-box;
}

.ast-site-identity {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
  padding: 0;
}

.ast-site-identity .site-logo-img,
.ast-site-identity .custom-logo-link {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: clamp(10px, 1.6vw, 18px);
  margin: 0;
}

.ast-site-identity .site-logo-img::after {
  content: "";
  position: absolute;
  right: 0;
  width: 2px;
  height: 56px;
  background: var(--mo-accent);
}

/* Wordmark + tagline */
.site-header .site-title,
.site-header .site-title a,
.site-header .site-title a:hover,
.site-header .site-title a:focus {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(19px, 2.6vw, 28px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--mo-cream) !important;
  margin: 0 0 6px;
  white-space: nowrap;
}

.site-header .site-description {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mo-cream-dim) !important;
  margin: 0;
  white-space: nowrap;
}

/* Menu — your site menu, restyled */
.ast-builder-menu .main-header-menu,
.ast-builder-menu .main-header-menu .sub-menu {
  background: transparent !important;
  border: 0 !important;
}

.ast-builder-menu .main-header-menu > .menu-item > .menu-link,
.main-header-menu > .menu-item > .menu-link,
.ast-header-break-point .main-header-menu .menu-link {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.65vw, 19px);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--mo-cream) !important;
  padding-block: 6px;
  background: transparent !important;
}

.ast-builder-menu .main-header-menu > .menu-item > .menu-link:hover,
.ast-builder-menu .main-header-menu > .current-menu-item > .menu-link,
.ast-builder-menu .main-header-menu > .current_page_item > .menu-link {
  color: var(--mo-accent) !important;
}

.ast-builder-menu .main-header-menu > .menu-item + .menu-item {
  margin-left: clamp(13px, 2.3vw, 28px);
}

/* Submenus sit flat on the dark ground */
.ast-builder-menu .sub-menu .menu-link {
  background: var(--mo-dark) !important;
  color: var(--mo-cream) !important;
  border-bottom: 1px solid rgba(242, 232, 213, 0.18) !important;
}

.ast-builder-menu .sub-menu .menu-link:hover {
  color: var(--mo-accent) !important;
}

/* Mobile toggle */
.ast-mobile-menu-trigger-minimal,
.ast-button-wrap .menu-toggle {
  background: transparent !important;
  color: var(--mo-cream) !important;
  border: 1px solid rgba(242, 232, 213, 0.4) !important;
  border-radius: 0 !important;
}

.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-header-wrap .main-header-bar {
  background: var(--mo-dark) !important;
}

@media (max-width: 620px) {
  .site-header .site-title,
  .site-header .site-description { display: none; }

  .ast-site-identity .site-logo-img::after,
  .ast-site-identity .custom-logo-link::after { display: none; }

  .ast-site-identity .site-logo-img,
  .ast-site-identity .custom-logo-link { padding-right: 0; }
}

/* ---------- Astra's own footer rows, replaced by ours ---------- */

.site-footer .site-above-footer-wrap,
.site-footer .site-primary-footer-wrap,
.site-footer .site-below-footer-wrap {
  display: none !important;
}

/* ---------- Assignments banner ---------- */

.mo-banner {
  background: var(--mo-accent);
  color: var(--mo-bg);
}

.mo-banner__shell,
.mo-footer__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: 24px;
}

.mo-banner__shell {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  padding-block: 14px;
}

.mo-banner__lead {
  font-weight: 800;
  font-size: clamp(12px, 1.35vw, 14px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.mo-banner__sep {
  font-size: 13px;
  opacity: 0.55;
  flex: none;
}

.mo-banner__detail {
  font-size: clamp(11px, 1.15vw, 13px);
  opacity: 0.9;
  margin: 0;
}

.mo-banner a,
.mo-banner a:hover { color: inherit; }

/* ---------- Footer ---------- */

.mo-footer {
  background: var(--mo-dark);
  color: var(--mo-cream);
}

.mo-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  padding-block: 48px;
}

.mo-footer__lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.mo-footer__logo {
  height: 52px;
  width: auto;
  display: block;
  flex: none;
  border: 2px solid var(--mo-cream);
}

.mo-footer__rule {
  width: 2px;
  height: 42px;
  background: var(--mo-accent);
  flex: none;
}

.mo-footer__name {
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mo-cream);
  margin: 0;
}

.mo-footer h2 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mo-tan);
  margin: 0 0 10px;
}

.mo-footer__links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mo-footer__links a {
  font-size: 14px;
  color: var(--mo-cream);
  text-decoration: none;
}

.mo-footer__links a:hover { color: var(--mo-accent); }

.mo-footer__note {
  font-size: 13px;
  color: var(--mo-cream-dim);
  margin: 0;
  max-width: 32ch;
}

/* The footer menu mirrors the header menu if one is assigned to mo_footer */
.mo-footer__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}