/* =========================================================
   Mojanchi Trail - Cassiopeia Child (Joomla 5)
   Percorso: /media/templates/site/cassiopeia_mojanchi/css/user.css
   ========================================================= */

/* === Importa font Google === */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&family=Inter:wght@400;500;600&display=swap');

/* === Palette brand === */
:root {
  --brand-red: #D0021B;
  --brand-black: #000000;
  --brand-white: #FFFFFF;

  /* Hook per Cassiopeia / Bootstrap */
  --cassiopeia-color-primary: var(--brand-red);
  --cassiopeia-color-hover: color-mix(in srgb, var(--brand-red) 80%, black);
  --link-color: var(--brand-red);
  --link-hover-color: var(--cassiopeia-color-hover);
}

/* === Tipografia === */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--brand-white);
  color: var(--brand-black);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.site-title, .mod-menu a.navbar-brand {
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--brand-black);
}

/* === Link === */
a {
  color: var(--link-color);
  text-decoration: none;
  transition: color .2s ease-in-out;
}
a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* === Header === */
.container-header {
  background: var(--brand-black) !important;
  color: #fff;
  border-bottom: 3px solid var(--brand-red);
}
.container-header a {
  color: #fff !important;
}
.container-header a:hover {
  color: var(--brand-red) !important;
}

/* === Bottoni === */
.btn-primary,
.btn.btn-warning {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: #fff !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.btn-primary:hover,
.btn.btn-warning:hover {
  filter: brightness(0.9);
}
.btn-outline-light {
  border-color: #fff;
  color: #fff;
}
.btn-outline-light:hover {
  background: #fff;
  color: var(--brand-black);
}

/* === Hero section === */
.position-hero {
  position: relative;
  color: #fff;
}
.position-hero .bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.position-hero .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
}
.position-hero .content {
  position: relative;
  padding: min(8vh, 5rem) 0;
}

/* === Footer CTA === */
.footer-cta {
  background: var(--brand-black);
  color: #fff;
  padding: 2.5rem 0;
  border-top: 3px solid var(--brand-red);
}
.footer-cta a {
  color: var(--brand-red);
  font-weight: 600;
}
.footer-cta a:hover {
  color: #fff;
}

/* === Cards / moduli === */
.card {
  border: 1px solid color-mix(in srgb, var(--brand-black) 10%, #fff);
  border-radius: .75rem;
  transition: transform .2s ease;
}
.card:hover { transform: translateY(-3px); }
.card-title {
  color: var(--brand-red);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
}

/* === Tabelle / badge / alert === */
.table thead { background: var(--brand-black); color: #fff; }
.badge.bg-primary { background-color: var(--brand-red) !important; color: #fff; }
.alert-warning {
  background: var(--brand-red);
  color: #fff;
  border: none;
}

/* === Utility === */
.object-fit-cover { object-fit: cover; }
.text-brand-red { color: var(--brand-red) !important; }
.text-brand-black { color: var(--brand-black) !important; }
.bg-brand-red { background-color: var(--brand-red) !important; color: #fff; }
.bg-brand-black { background-color: var(--brand-black) !important; color: #fff; }

/* === Logo management === */
.logo-light {
  max-height: 80px;
  display: block;
  filter: brightness(0) invert(1); /* per sfondo nero */
}
.logo-dark {
  max-height: 80px;
  display: block;
}

/* === Debug (rimuovere dopo verifica) === */
body::after {
  content:'user.css attivo';
  position:fixed; bottom:10px; right:10px;
  background:var(--brand-red);
  color:#fff; padding:4px 8px;
  font:12px/1 'Inter', sans-serif;
  z-index:9999;
}
/* Collapse menu bg */
.metismenu.mod-menu .mm-collapse {
    background-color: #000;
}