/* =========================================================
   SIFTIO TECHNOLOGIES — Corporate user.css
   Based on FamilyNet Standard CSS
   ========================================================= */

/* =========================================================
   DESIGN TOKENS
   ========================================================= */

:root{

  /* Primary Corporate Palette */
  --sf-primary: #163A5F;        /* Deep Trust Blue */
  --sf-secondary: #2E5B88;      /* Slate Blue */
  --sf-accent: #3AA6A0;         /* Soft Teal */

  /* Text + Background */
  --sf-text: #243447;           /* Dark Slate */
  --sf-muted: rgba(36,52,71,.72);

  --sf-bg: #F7F9FB;             /* Soft White */
  --sf-border: #DCE3EA;         /* Soft Gray */

  /* Headings */
  --sf-heading-1: #163A5F;
  --sf-heading-2: #2E5B88;

  /* Footer */
  --sf-footer-bg: #eef2f6;
  --sf-footer-bg2: #f7f9fb;

  --sf-radius: 12px;

  /* Shadows */
  --sf-shadow-soft: 0 4px 18px rgba(0,0,0,.05);
  --sf-shadow-hover: 0 8px 28px rgba(0,0,0,.08);
}

/* =========================================================
   BASE
   ========================================================= */

body{
  color: var(--sf-text);
  background: var(--sf-bg);
  line-height: 1.65;
  margin-left: 35px;
  margin-right: 35px;
  font-family: Inter, Arial, sans-serif;
}

p{
  margin-bottom: 1rem;
}

a{
  color: var(--sf-secondary);
  text-decoration: none;
  text-underline-offset: .18em;
  transition: all .15s ease;
}

a:hover,
a:focus{
  color: var(--sf-primary);
  text-decoration: underline;
}

/* =========================================================
   HEADER
   ========================================================= */

.container-header{
  background-color: #ffffff;
  background-image: none;
  box-shadow:
    0 1px 0 rgba(0,0,0,.05),
    0 6px 18px rgba(0,0,0,.03);
  line-height: 1.3;
}

.container-header .navbar,
.container-header .grid-child{
  padding-top: 12px;
  padding-bottom: 12px;
}

/* =========================================================
   DESKTOP MENU
   FIXED HORIZONTAL LAYOUT
   ========================================================= */

.container-header .mod-menu{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;

  list-style: none;
  margin: 0;
  padding: 0;

  background: transparent;
}

/* REMOVE vertical stacking issue */
.container-header .mod-menu > li + li{
  padding-top: 0 !important;
}

.container-header .mod-menu a{
  color: var(--sf-primary);
  font-weight: 500;
  text-decoration: none;
  transition: all .15s ease;
}

.container-header .mod-menu a:hover,
.container-header .mod-menu a:focus{
  color: var(--sf-accent);
  text-decoration: none;
}

/* Active menu item */
.container-header .mod-list li.active > a,
.container-header .mod-menu li.active > a{
  color: var(--sf-accent);
  border-bottom: 2px solid var(--sf-accent);
  padding-bottom: 2px;
}

/* =========================================================
   BREADCRUMBS
   ========================================================= */

.breadcrumb{
  font-size: .85rem;
  color: var(--sf-muted);
}

.breadcrumb a{
  color: var(--sf-secondary);
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,h2,h3,h4,h5{
  margin-top: 1.2em;
  margin-bottom: .55em;
}

h1{
  font-size: clamp(2rem, 2.8vw, 2.8rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--sf-heading-1);
}

h2{
  font-size: clamp(1.65rem, 2.2vw, 2.1rem);
  font-weight: 600;
  line-height: 1.22;
  color: var(--sf-heading-1);
}

h3{
  font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  font-weight: 600;
  line-height: 1.28;
  color: var(--sf-heading-2);
}

h4{
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--sf-heading-2);
}

h5{
  font-size: 1rem;
  font-weight: 600;
  color: var(--sf-heading-2);
}

/* =========================================================
   CONTENT CONTAINERS
   ========================================================= */

.item-content,
.com-content-article,
.card,
.moduletable{
  border-radius: var(--sf-radius);
}

/* Optional subtle card appearance */
.card{
  border: 1px solid var(--sf-border);
  box-shadow: var(--sf-shadow-soft);
  background: #ffffff;
}

.card:hover{
  box-shadow: var(--sf-shadow-hover);
}

/* =========================================================
   TABLES
   ========================================================= */

table{
  width: 100%;
  border-collapse: collapse;
}

table td,
table th{
  padding: .75rem;
  border-bottom: 1px solid var(--sf-border);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  --btn-padding-x: 1.1rem;
  --btn-padding-y: .7rem;

  font-weight: 500;
  border-radius: .45rem;

  transition:
    color .15s ease-in-out,
    background-color .15s ease-in-out,
    border-color .15s ease-in-out,
    box-shadow .15s ease-in-out,
    transform .08s ease-in-out;
}

/* Primary Button */

.btn-primary{
  background-color: var(--sf-primary);
  border-color: var(--sf-primary);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--sf-secondary);
  border-color: var(--sf-secondary);
  color: #ffffff;
  box-shadow: var(--sf-shadow-hover);
}

/* Accent CTA */

.btn-success,
.btn-accent{
  background-color: var(--sf-accent);
  border-color: var(--sf-accent);
  color: #ffffff;
}

.btn-success:hover,
.btn-accent:hover{
  opacity: .92;
  color: #ffffff;
}

/* Outline */

.btn-outline-primary{
  color: var(--sf-primary);
  border-color: var(--sf-primary);
  background: transparent;
}

.btn-outline-primary:hover{
  background: var(--sf-primary);
  color: #ffffff;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer,
footer.footer,
footer .grid-child,
.fn-footer{

  background-color: var(--sf-footer-bg) !important;
  background-image:
    linear-gradient(
      180deg,
      var(--sf-footer-bg2) 0%,
      var(--sf-footer-bg) 100%
    ) !important;

  border-top: 1px solid var(--sf-border);
  color: var(--sf-text);
}

footer .grid-child{
  display: block !important;
  width: 100%;
}

footer .container,
footer .container-fluid{
  max-width: 1320px;
  width: 100%;
}

footer p,
footer li,
footer small{
  color: var(--sf-text);
}

footer a{
  color: var(--sf-primary);
}

footer a:hover{
  color: var(--sf-accent);
}

/* Footer headings */

.fn-footer .fn-footer-heading{
  font-weight: 600;
  color: var(--sf-primary);
}

/* =========================================================
   MOBILE MENU CK
   ========================================================= */

.mobilemenuck a,
.mobilemenuck a:visited{
  color: var(--sf-primary);
}

/* =========================================================
   MOBILE RESPONSIVE
   ========================================================= */

@media (max-width: 768px){

  body{
    margin-left: 14px;
    margin-right: 14px;
  }

  h1{
    line-height: 1.2;
  }

  .btn{
    padding: .75rem 1.25rem;
  }

  footer .container{
    padding-left: 14px;
    padding-right: 14px;
  }
}
/* =========================================================
   FORCE TOP MENU VISIBILITY
   ========================================================= */

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu .nav-link{
    color: #163A5F !important;
    opacity: 1 !important;
}

/* Hover */

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > span:hover,
.container-header .mod-menu .nav-link:hover{
    color: #3AA6A0 !important;
}

/* Active item */

.container-header .mod-menu li.active > a,
.container-header .mod-menu li.active > span{
    color: #3AA6A0 !important;
    border-bottom: 2px solid #3AA6A0;
}