/* ============================================================
   Mbiame Heritage Media — custom theme overrides
   Loaded last via EXTRA_CSS_PATHS, so it wins over _commons.css
   ============================================================ */

:root {
  --mbiame-primary: #1f4d3a;        /* deep heritage green */
  --mbiame-primary-hover: #2a664d;
  --mbiame-accent: #c97f3a;         /* warm earth (baked-bronze) */
  --mbiame-bg: #f8f5ef;             /* warm cream */
  --mbiame-bg-card: #ffffff;
  --mbiame-text: #1d1d1d;
  --mbiame-text-muted: #5a5a5a;
  --mbiame-border: #e6dfd3;
  --mbiame-danger: #b3261e;
}

/* ---------- Global surfaces ---------- */
body,
.app-shell,
.layout {
  background: var(--mbiame-bg) !important;
  color: var(--mbiame-text) !important;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif !important;
}

/* ---------- Header / top bar ---------- */
header,
.top-bar,
.navbar,
header.app-header,
.main-header {
  background: var(--mbiame-primary) !important;
  border-bottom: 3px solid var(--mbiame-accent) !important;
}

header a,
.top-bar a,
.navbar a,
header .menu-item,
header .nav-link {
  color: #fff !important;
}

header a:hover,
.top-bar a:hover,
.navbar a:hover {
  color: var(--mbiame-accent) !important;
}

/* ---------- Primary buttons ---------- */
.btn,
button.primary,
button.submit,
input[type="submit"],
.btn-primary {
  background: var(--mbiame-primary) !important;
  border-color: var(--mbiame-primary) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  transition: background 0.15s ease !important;
}

.btn:hover,
button.primary:hover,
input[type="submit"]:hover,
.btn-primary:hover {
  background: var(--mbiame-primary-hover) !important;
  border-color: var(--mbiame-primary-hover) !important;
}

/* ---------- Login page ---------- */
body.login,
.account-login,
body.account_login {
  background: linear-gradient(135deg, var(--mbiame-primary) 0%, #2a664d 100%) !important;
  min-height: 100vh !important;
}

body.login .container,
body.login main,
body.account_login .container,
body.account_login main,
.account-login .card,
.account-login form {
  background: var(--mbiame-bg-card) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
  padding: 40px !important;
  max-width: 440px !important;
  margin: 80px auto !important;
}

body.login h1,
body.login h2,
body.account_login h1,
body.account_login h2,
.account-login h1 {
  color: var(--mbiame-primary) !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 8px !important;
}

body.login .subtitle,
body.account_login .subtitle,
.account-login .subtitle {
  color: var(--mbiame-text-muted) !important;
  text-align: center !important;
  margin-bottom: 32px !important;
  font-size: 15px !important;
}

body.login form input[type="text"],
body.login form input[type="email"],
body.login form input[type="password"],
body.account_login form input[type="text"],
body.account_login form input[type="email"],
body.account_login form input[type="password"],
.account-login input[type="text"],
.account-login input[type="email"],
.account-login input[type="password"] {
  border: 1px solid var(--mbiame-border) !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  width: 100% !important;
  font-size: 15px !important;
  background: #fff !important;
  color: var(--mbiame-text) !important;
  margin-bottom: 14px !important;
  box-sizing: border-box !important;
}

body.login form input:focus,
body.account_login form input:focus,
.account-login input:focus {
  outline: none !important;
  border-color: var(--mbiame-primary) !important;
  box-shadow: 0 0 0 3px rgba(31, 77, 58, 0.15) !important;
}

body.login form button[type="submit"],
body.account_login form button[type="submit"],
.account-login button[type="submit"] {
  width: 100% !important;
  background: var(--mbiame-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: 12px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin-top: 8px !important;
}

body.login form button[type="submit"]:hover,
body.account_login form button[type="submit"]:hover,
.account-login button[type="submit"]:hover {
  background: var(--mbiame-primary-hover) !important;
}

body.login .help,
body.login .form-footer,
body.account_login .help,
body.account_login .form-footer,
.account-login .help,
.account-login .form-footer {
  text-align: center !important;
  margin-top: 20px !important;
  color: var(--mbiame-text-muted) !important;
  font-size: 13px !important;
}

body.login .help a,
body.account_login .help a,
.account-login .help a {
  color: var(--mbiame-primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

body.login .help a:hover,
body.account_login .help a:hover,
.account-login .help a:hover {
  color: var(--mbiame-accent) !important;
}

/* hide register/signup if any still visible */
body.login .signup-link,
body.login a[href*="signup"],
body.account_login a[href*="signup"] {
  display: none !important;
}

/* ---------- Cards / lists ---------- */
.card,
.media-card,
.tile {
  background: var(--mbiame-bg-card) !important;
  border: 1px solid var(--mbiame-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.card:hover,
.media-card:hover,
.tile:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}

/* ---------- Footer ---------- */
footer,
.app-footer,
.footer {
  background: var(--mbiame-primary) !important;
  color: #e6dfd3 !important;
  border-top: 3px solid var(--mbiame-accent) !important;
  padding: 24px 16px !important;
  text-align: center !important;
}

footer a,
.app-footer a,
.footer a {
  color: var(--mbiame-accent) !important;
}

/* ---------- Links ---------- */
a {
  color: var(--mbiame-primary) !important;
}

a:hover {
  color: var(--mbiame-accent) !important;
}

/* ---------- Page titles ---------- */
h1, h2, h3, .page-title {
  color: var(--mbiame-primary) !important;
  font-weight: 700 !important;
}

/* ---------- Badges / pills ---------- */
.badge,
.tag,
.category-pill {
  background: var(--mbiame-accent) !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* ============================================================
   Removed MediaCMS boilerplate pages (About / Terms)
   The sidebar items are hardcoded in the compiled frontend
   bundle (CustomMenuSection). MediaCMS assigns stable classes
   to each, so we hide them here. URLs also 301 → / at nginx.
   ============================================================ */
.nav-item-about,
.nav-item-terms,
.sidebar .nav-item-about,
.sidebar .nav-item-terms {
  display: none !important;
}