/* ==========================================================
   MWD HOSTING - GLOBAL CASSIOPEIA OVERRIDES
   Header + Navigation + Footer
========================================================== */


/* ==========================================================
   COLOURS
========================================================== */

:root{
  --mwd-dark:#071f19;
  --mwd-deep:#0b3027;
  --mwd-green:#15513f;
  --mwd-mid:#347461;
  --mwd-pale:#dfeae4;
}


/* ==========================================================
   REMOVE CASSIOPEIA BLUE HEADER
========================================================== */

.container-header{
  background:#071f19 !important;
  background-image:none !important;
  box-shadow:none !important;
  border-bottom:1px solid rgba(255,255,255,.12);
}


/* ==========================================================
   DESKTOP HEADER
   Logo left / menu centre / actions right
========================================================== */

@media (min-width:992px){

  .container-header{
    display:grid !important;
    grid-template-columns:260px minmax(0,1fr);
    align-items:center;

    width:100%;
    min-height:92px;

    padding:0 42px !important;
  }


  /* remove Cassiopeia inner width restriction */

  .container-header > .grid-child{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }


  /* logo */

  .container-header > .grid-child:first-child{
    display:flex;
    align-items:center;
    justify-content:flex-start;
  }


  .container-header .navbar-brand{
    margin:0 !important;
    padding:0 !important;
  }


  .container-header .navbar-brand img{
    display:block;
    width:auto;
    max-width:230px;
    max-height:64px;
    object-fit:contain;
  }


  /* navigation area */

  .container-header .container-nav{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:25px;

    min-height:92px;
    padding:0 !important;
  }


  /* menu */

  .container-header .navbar-collapse{
    flex:0 1 auto;
  }


  .container-header .metismenu.mod-menu{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:3px;

    margin:0;
  }


  .container-header .metismenu.mod-menu > li{
    position:relative;
  }


  .container-header .metismenu.mod-menu > li > a,
  .container-header .metismenu.mod-menu > li > button,
  .container-header .metismenu.mod-menu > li > span{
    position:relative;

    display:flex;
    align-items:center;

    padding:13px 13px !important;

    color:#e9f1ed !important;

    font-size:15px;
    line-height:1.2;
    font-weight:600;

    text-decoration:none !important;

    background:transparent !important;
    border:0 !important;

    transition:
      color .2s ease,
      background .2s ease;
  }


  /* subtle hover */

  .container-header .metismenu.mod-menu > li > a:hover,
  .container-header .metismenu.mod-menu > li > button:hover{
    color:#fff !important;
    background:#0d352b !important;
  }


  /* green underline */

  .container-header .metismenu.mod-menu > li > a:after{
    content:"";

    position:absolute;
    left:13px;
    right:13px;
    bottom:6px;

    height:2px;

    background:#76a892;

    transform:scaleX(0);
    transform-origin:left;

    transition:transform .2s ease;
  }


  .container-header .metismenu.mod-menu > li > a:hover:after,
  .container-header .metismenu.mod-menu > li.current > a:after,
  .container-header .metismenu.mod-menu > li.active > a:after{
    transform:scaleX(1);
  }


  /* current page */

  .container-header .metismenu.mod-menu > li.current > a,
  .container-header .metismenu.mod-menu > li.active > a{
    color:#fff !important;
  }

}


/* ==========================================================
   DROPDOWN MENU
========================================================== */

.container-header .metismenu.mod-menu .mm-collapse{
  background:#0b3027 !important;

  border:1px solid rgba(255,255,255,.12) !important;

  box-shadow:
    0 18px 35px rgba(0,0,0,.25) !important;

  border-radius:0 !important;
}


.container-header .metismenu.mod-menu .mm-collapse li{
  border-bottom:1px solid rgba(255,255,255,.10);
}


.container-header .metismenu.mod-menu .mm-collapse li:last-child{
  border-bottom:0;
}


.container-header .metismenu.mod-menu .mm-collapse a{
  display:block;

  padding:13px 18px !important;

  color:#dfeae4 !important;
  text-decoration:none !important;
}


.container-header .metismenu.mod-menu .mm-collapse a:hover{
  background:#15513f !important;
  color:#fff !important;
}


/* dropdown arrow */

.container-header .metismenu.mod-menu .mm-toggler{
  color:#fff !important;
}


/* ==========================================================
   HEADER CTA MODULE

   Put custom module in SEARCH position
========================================================== */

.mwd-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  white-space:nowrap;
}


.mwd-header-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:43px;

  padding:0 18px;

  font-size:14px;
  line-height:1;
  font-weight:700;

  text-decoration:none !important;

  border-radius:0 !important;

  transition:
    transform .18s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
}


/* EMAIL */

.mwd-header-email{
  color:#fff !important;

  background:transparent !important;

  border:1px solid rgba(255,255,255,.42) !important;
}


.mwd-header-email:hover{
  color:#071f19 !important;
  background:#fff !important;
  border-color:#fff !important;

  transform:translateY(-2px);
}


/* WHATSAPP */

.mwd-header-whatsapp{
  color:#071f19 !important;

  background:#dfeae4 !important;

  border:1px solid #dfeae4 !important;
}


.mwd-header-whatsapp:hover{
  color:#fff !important;

  background:#15513f !important;

  border-color:#347461 !important;

  transform:translateY(-2px);
}



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

@media(max-width:991px){

  .container-header{
    width:100%;
    padding:12px 20px !important;
  }


  .container-header > .grid-child{
    width:100% !important;
    max-width:none !important;
  }


  .container-header .navbar-brand{
    margin:0;
    padding:4px 0 10px;
  }


  .container-header .navbar-brand img{
    max-width:210px;
    max-height:58px;
    width:auto;
  }


  .container-header .container-nav{
    width:100%;
    padding:0 !important;
  }


  /* hamburger */

  .container-header .navbar-toggler{
    color:#fff !important;

    border:1px solid rgba(255,255,255,.35) !important;

    border-radius:0 !important;
  }


  .container-header .navbar-toggler-icon{
    filter:brightness(0) invert(1);
  }


  /* mobile links */

  .container-header .metismenu.mod-menu > li > a,
  .container-header .metismenu.mod-menu > li > button{
    color:#fff !important;

    padding:12px 7px !important;
  }


  /* buttons under menu */

  .mwd-header-actions{
    width:100%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;

    margin-top:13px;
    margin-bottom:5px;
  }


  .mwd-header-actions a{
    width:100%;
  }

}



/* ==========================================================
   FOOTER - REMOVE CASSIOPEIA WIDTH RESTRICTIONS
========================================================== */

.container-footer{
  width:100% !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 !important;

  background:#071f19 !important;
  background-image:none !important;
}


/* Cassiopeia puts the module inside a restricted grid-child */

.container-footer > .grid-child,
.container-footer .grid-child{
  width:100% !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 !important;
}


/* module wrapper */

.container-footer .mod-custom,
.container-footer .moduletable,
.container-footer .moduletable-custom{
  width:100% !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 !important;
}


/* our footer */

.container-footer .mwd-footer,
.mwd-footer{
  width:100% !important;
  max-width:none !important;

  margin:0 !important;

  background:#071f19 !important;
}


/* retain inner footer content width */

.mwd-footer-wrap{
  width:100%;
  max-width:1180px;

  margin-left:auto !important;
  margin-right:auto !important;
}



/* ==========================================================
   REMOVE RANDOM CASSIOPEIA FOOTER SPACING
========================================================== */

.container-footer .footer{
  margin:0 !important;
  padding:0 !important;
}


footer.container-footer{
  margin-top:0 !important;
}



/* ==========================================================
   PREVENT HORIZONTAL OVERFLOW
========================================================== */

html,
body{
  overflow-x:hidden;
}