/* J5 Cassiopeia: logo truly flush left, menu inline & centered */
@media (min-width: 992px) {
  /* Simple two-column header with no side gutters */
  .container-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo nav";
    align-items: center;
    column-gap: 1rem;
    padding-left: 10px !important;    /* kill header padding */
    padding-right: 0;
  }

/* Apply max width to all articles *
.com-content-article__body { max-width: 1200px; margin-left:0 !important; margin-right: 50px !important; }
/*/
/* keep the left align + right gutter even on narrow screens */
.com-content-article__body {
  max-width: 1200px;
  margin-left: 0 !important;
  margin-right: 50px !important;
  padding-right: 50px !important;
  box-sizing: border-box; /* prevents horizontal scroll when padding is added */
}


/*  .container-header .grid-child:has(.navbar-brand) { padding-left: 10px !important; } */
  
  /* Map elements to areas */
  .container-header .grid-child:has(.navbar-brand) { grid-area: logo; }
  .container-header .container-nav { grid-area: nav; }

  /* Remove Bootstrap container padding inside the header (the usual culprit) */
  .container-header > .container,
  .container-header .grid-child,
  .container-header .container-nav {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Tidy brand block */
  .container-header .navbar-brand {
    display: flex;
    align-items: center;
    margin: 0;           /* no stray margins */
    padding: 0;          /* no stray padding */
  }

  .container-header .navbar-brand img {
    max-height: 48px;    /* adjust as you like */
    height: auto;
  }

  .container-header .mod-menu > ul {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
  } 
}

:root{
/*  --cassiopeia-color-primary:#adc2db; */
  --cassiopeia-color-primary:#60933e;
//    --cassiopeia-color-primary:#00933e;

  --cassiopeia-color-link:#224faa;
/*  --cassiopeia-color-link:#60933e; */
  --link-color:#224faa;
  --link-color-rgb:34,79,170;
/*  --cassiopeia-color-hover:#376193; */

  --cassiopeia-color-hover:#60933e;
  
  --link-hover-color:#424077;
  --link-hover-color-rgb:66,64,119;
}

.footer {
  background-color: #376193 !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
  background-position: initial !important;
  background: #376193 !important;
  margin-top: 0px !important;
}

.footer .grid-child {
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px!important;
}

body.wrapper-fluid.has-sidebar-left .site-grid {
	grid-template-columns: minmax(0,1fr) 10% repeat(2,minmax(0,70%)) 10% minmax(0,1fr);
}

body.wrapper-fluid.has-sidebar-right .site-grid {
/*	grid-template-columns: minmax(0,1fr) 12% repeat(2,minmax(0,70%)) 5% minmax(0,1fr);
*/
}
body:is(.has-sidebar-right, .has-sidebar-left) .site-grid {
/*	grid-template-columns: minmax(0,1fr) 12% repeat(2,minmax(0,70%)) 5% minmax(0,1fr);
*/
}
body.wrapper-fluid:not(.has-sidebar-right, .has-sidebar-left) .site-grid {
/*  grid-template-columns: minmax(0,1fr) 20% repeat(2,minmax(0,70%)) 40% minmax(0,1fr);
*/
}

.container-sidebar-left, .sidebar-left{
    background-color: #dce5f0; /* Replace #yourcolor with your desired color */
    padding: 0;
}

/* Hide the sitebar menu on smaller devices. According to Cassiopeia: Large devices (larger desktops): ≥992px */
@media (max-width: 992px) {
    .hidden-phone {
        display: none !important;
    }
}

/* Card should not have a visible border */
.card
{
--card-border-color: #00000;  
}


/*-----------------------------------------------------------------------------------------------*/
/* Styles bellow to be checked */

/* Change the background color of the dropdown menu */

/*
.nav ul {
    background-color: #f0f0f0;
}
*/


/*
.header .mod-menu > li {
  position: relative;
}

.header .mod-menu li:hover > ul {
  background-color: #fff;
  border: 1px solid #dfe3e7;  
  border-radius: 5px;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  padding: 16px;
}

.header .mod-menu li:hover > ul li {
  display: block;
}

*/




/* The following is possibly not working */


/* Custom CSS for Cassiopeia Menu */

/* Adjust the width of the top-level menu items */
.navbar-nav > li {
    width: 250px; /* Set your desired width */
}

/* Adjust the width of the dropdown submenu items */
.navbar-nav .dropdown-menu {
    width: 500px; /* Set your desired width */
}

/* Optionally, ensure that the text inside menu items doesn't overflow */
.navbar-nav > li > a,
.navbar-nav .dropdown-menu > li > a {
    white-space: normal; /* Allows text to wrap */
}







/* Adjust the width of the sidebar */
.cassiopeia-sidebar {
    width: 300px; /* Adjust the width as needed */
}

/* Adjust the width of the main content to accommodate the new sidebar width */
.cassiopeia-content {
    margin-left: 320px; /* Adjust this value based on the new sidebar width */
}


/* Headings are html elements, the main heading is an h1, then comes h2, h3, h4 and so on. You control an html element by simply writing the name in front of it */

h1, h2, h3, h4, h5, h6 {
/*  color: #535353; */

  color: #535353;
}