/* =====================================================
   Varion (Cassiopeia child) - user.css
   Author: Craig Mitchell   Date: 2025-08-24
====================================================== */

/* ---- Brand tokens ---- */
:root {
  --varion-purple: #4B2BBF;
  --varion-navy:   #0F2D52;
  --varion-grey:   #646A73;
  --varion-light:  #F5F7FA;

  --cassiopeia-color-primary: var(--varion-purple);
  --cassiopeia-color-link:    var(--varion-purple);
  --cassiopeia-color-hover:   var(--varion-navy);
}

/* ---- Header / Nav / Footer ---- */
.container-header {               /* remove gradient */
  background-image: none !important;
  background-color: #fff;
}
.container-nav {
  background-color: var(--varion-navy) !important;
}
.container-footer {
  background-image: none !important;
  background-color: var(--varion-navy) !important;
  color: #fff;
}
.container-footer a { color: #fff; }
.container-footer a:hover { color: var(--varion-light); }

/* Brand logo padding (optional) */
.logo img {
  background-color: #fff;
  padding: 6px;
}

/* ---- Menu (horizontal) ---- */
.menu-container { display: flex; gap: 0; }
.menu-container .module { flex: 1; text-align: center; margin: 0; padding: 0; list-style: none; }
.menu-container .module ul { display: inline-block; margin: 0; padding: 0; }
.menu-container .module li { display: inline-block; padding: 10px 18px; }
.menu-container .module a {
  color: #fff;
  text-decoration: none;
}
.container-nav .metismenu-item,
.container-nav .metismenu-item a {
  background: var(--varion-navy);
  color: #fff !important;
}

/* ---- Typography ---- */
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  color: #333;
}
/* Lighter headings without using invalid 'Thin' */
h1, h2, h3, h4, h5, h6 { font-weight: 300 !important; }
.clientcardheading { font-size: 25px; font-weight: 300 !important; }

/* Links */
a { text-decoration: none !important; }

/* ---- Forms (lighter, consistent) ---- */
select,
input[type=text],
input[type=email],
input[type=number],
input[type=date],
input[type=time],
input[type=tel],
textarea {
  max-width: 800px;
  width: 90%;
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  transition: border-color .15s ease;
}
select:focus,
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--varion-purple);
  box-shadow: 0 0 0 3px rgba(75, 43, 191, .15);
}

/* Buttons */
.mybutton {
  display: inline-block;
  width: 400px; max-width: 90%;
  padding: 14px 24px;
  border: 0; border-radius: 6px;
  background: var(--varion-purple);
  color: #fff; font-size: 16px; text-align: center;
  cursor: pointer; opacity: .95; transition: opacity .2s ease, transform .06s ease;
}
.mybutton:hover { opacity: 1; }
.mybutton:active { transform: translateY(1px); }

/* ---- Tables ---- */
.tableclass { border: 1px solid #e2e2e2; border-radius: 6px; border-collapse: separate; border-spacing: 0; }
.tableclass tr:nth-child(even) { background: #f7f8fa; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px; }
th { background: #f5f5f5; }

/* ---- Notifications ---- */
.myNotification {
  border-radius: 6px;
  border: 1px solid #e8c24a;
  color: #555;
  padding: 10px 12px;
  background: #fff8db;
}

/* ---- Utility / fixes ---- */
/* Correct selector (was `.navbar-brand grid-child`) */
.navbar-brand .grid-child { background: transparent; }

/* Example outline test (toggle when needed) */
/* html body { outline: 4px solid magenta !important; } */

/* Center Joomla banner(s) on mobile */
@media (max-width: 768px) {
  /* 1) Center the module contents */
  .mod-banners { 
    text-align: center;
  }

  /* 2) Make each banner act like a centered block */
  .mod-banners .banneritem,
  .mod-banners .banneritem a {
    display: inline-block;   /* shrink to image width */
    float: none;             /* kill any floats a template may add */
  }

  /* 3) Ensure the image actually centers */
  .mod-banners .banneritem img {
    display: block;
    margin: 0 auto;          /* horizontal centering */
    max-width: 100%;
    height: auto;
  }
}