@import "./ThemeColors.css";
/* Note: This file is used to declare user defined styles. These styles are used only on the website 
 and not in DataFlex CM Studio. You may expand and change these however you see fit. */

:root {
    --mn-header-height: 56px;
    --mn-notification-offset: 1.5rem;
}

/* HTML */
body {
  background-color: var(--bs-white);
  display: flex;
  flex-direction: column;
}

:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--mn-red);
  box-shadow: none;
}

.nav-link:focus {
    color: inherit;
}

/* NAVIGATION */
.navbar {
  background-color: var(--bs-white);
}

.sb-nav-fixed .sb-topnav {
  z-index: 1038;
}

.navbar a {
  text-decoration: none;
}

.navbar .fa-magnifying-glass, 
.navbar .fa-phone {
  color: var(--mn-red);
}

.navbar-nav li a {
  color: var(--bs-gray-600);
}

.navbar-nav li a:hover,
.navbar-nav li a:active,
.navbar-nav li a:focus,
.navbar-nav li.current a{
  color: var(--mn-dark-green);
}

.navbar-nav .dropdown-menu {
  left: auto;
  margin: 0;
  padding: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

.navbar-nav .dropdown-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar-nav .dropdown-toggle::after {
  display: inline-block;
  color: var(--mn-red);
}

.navbar-nav .dropdown-menu li {
  position: relative;
}

.navbar-nav .dropdown-menu .dropdown-item {
  display: flex;
  font-size: 1.1rem;
}

.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .link-icon.current .dropdown-item {
  color: var(--mn-green);
  background-color: inherit;
}

.navbar-nav .dropdown-menu li a {
  color: var(--bs-gray-700);
}

.sb-nav-fixed #layoutSidenav #layoutSidenav_nav {
  width: 320px;
}

#layoutSidenav #layoutSidenav_nav {
    flex-basis: 320px;
    transform: translateX(-320px);
}

#layoutSidenav .sb-sidenav .sb-sidenav-menu .nav .sb-sidenav-menu-nested {
  margin-left: 0;
}

#layoutSidenav .sb-sidenav .sb-sidenav-menu .nav .sb-sidenav-menu-nested .nav-link {
  padding-top: 0;
  padding-bottom: 0.5rem;
}

#layoutSidenav .sb-sidenav .sb-sidenav-menu .nav .nav-link:hover,
#layoutSidenav .sb-sidenav .sb-sidenav-menu .nav .nav-link.current {
  color: var(--mn-dark-green);
}

#mobileSearchForm {
    padding: 0px var(--bs-nav-link-padding-x);
}

/* MAIN */
main {
  margin-top: var(--mn-header-height);
  background-color: var(--bs-white);
  flex: 1;
}

/* BANNER */
.banner {
  background-color: var(--mn-light-green);
}

.banner h1 {
  color: var(--bs-white);
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .banner .textblock-wrapper {
    margin-top: 3rem;
    margin-left: -6rem;
  }
}

.banner .textblock {
  background-color: var(--mn-green);
  display: flex;
  flex-direction: column;
}

.banner .textblock a {
  color: var(--mn-white);
  align-self: flex-start;
}

/* CTA */
.cta {
  background-color: var(--mn-light-green);
}

/* FORM */
select {
  background: url('../assets/img/angle-down-solid-full.svg') no-repeat;
  background-position: center right 0.5rem;
  background-size: 20px;
  height: auto;
}

input.form-control,
select.form-control,
textarea.form-control {
  border-radius: 0;
}

/* FOOTER */
footer {
   background-color: var(--mn-green);
}

footer .footer-end {
  background-color: var(--mn-dark-green);
}

footer h5 {
  color: var(--bs-white);
}

footer .nav-link,
footer a {
  color: var(--bs-white);
}

footer .nav-link:hover,
footer a:hover{
  color: var(--bs-gray-200);
}

/* TEXT */
body {
  font-family: "PT Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "EB Garamond", serif;
  color: var(--mn-green);
  font-weight: bold;
}

h1.underline::after,
h2.underline::after {
  content: '';
  display:block;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 4px solid var(--mn-red);
  width: 90px;
}

h1.underline.underline-center::after,
h2.underline.underline-center::after {
  margin-left: auto;
  margin-right: auto;
}

h6 {
  font-size: 0.9rem;
  color: var(--bs-gray-500);
}

/* LINK */
a {
  color: var(--mn-green);
}

a:hover {
  color: var(--mn-dark-green);
}

a.link, 
a.stretched-link {
  text-decoration: none;  
}

/* a.link::before,
a.stretched-link::before {
  content: url(../assets/img/angles-right-solid-full.svg);
  display: block;
  width: 14px;
  height: 14px;
  position: absolute;
  right: -1.1rem;
  top: 1px;
} */

.link-span-icon {
  width: 14px;
  height: 14px;
  background: url(../assets/img/angles-right-solid-full.svg) no-repeat center;
  background-size: contain;
  display: inline-block;
  vertical-align: -3px;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}

.link:hover .link-span-icon,
.stretched-link:hover .link-span-icon {
  transform: translateX(4px);
}

/* BUTTONS */
.btn {
  border-radius: 0;
}

.btn-cta {
  font-weight: bold;
  border: 0;
  color: var(--bs-white);
  background-color: var(--mn-green);
}

a.btn-cta.dark-green, button.btn-cta.dark-green {
    color: var(--bs-white);
    background-color: var(--mn-dark-green);
}

a.btn-cta:hover, button.btn-cta:hover {
  color: var(--bs-white);
  background: var(--mn-dark-green);
}

a.btn-cta.btn-white {
    color: var(--mn-green);
    background-color: var(--mn-light-green);
}

a.btn-cta.btn-white:hover {
    background-color: var(--mn-dark-green);
    color: var(--mn-light-green);
}

a.btn-cta.btn-white:focus {
    background-color: var(--mn-dark-green);
    color: var(--mn-light-green);
}

a.btn-cta.search-overlay, button.btn-cta.search-overlay {
    color: var(--bs-white);
    background-color: var(--mn-red);
    margin-left: 1rem;
}

a.btn-cta.search-overlay:active, button.btn-cta.search-overlay:active {
    background-color: var(--mn-dark-red);
    color: var(--bs-white);
} 

/* TIMELINE */
.timeline {
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 6px;
  background-color: var(--mn-light-green);
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  margin-bottom: 60px;
  pointer-events: none;
}

.timeline-item .content {
    pointer-events: auto;
}

/* Optional: Bootstrap placeholder glow */
.placeholder-glow {
    animation: placeholder-glow 1.5s infinite;
}

@keyframes placeholder-glow {
    0% { background-color: #eee; }
    50% { background-color: #ddd; }
    100% { background-color: #eee; }
}


.timeline-item.left:nth-child(n+2) {
  margin-top: -10%;
}

.timeline-item.right {
  margin-top: -60%;
  justify-content: end;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .timeline-item.left:nth-child(n+2) {
    margin-top: -15%;
  }

  .timeline-item.right {
    margin-top: -50%;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .timeline-item.left:nth-child(n+2) {
    margin-top: -15%;
  }

  .timeline-item.right {
    margin-top: -40%;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .timeline-item.left:nth-child(n+2) {
    margin-top: -10%;
  }

  .timeline-item.right {
    margin-top: -30%;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .timeline-item.left:nth-child(n+2) {
    margin-top: -10%;
  }

  .timeline-item.right {
    margin-top: -30%;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .timeline-item.left:nth-child(n+2) {
    margin-top: -10%;
  }

  .timeline-item.right {
    margin-top: -30%;
  }
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40px;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background-color: var(--mn-green);
  border-radius: 50%;
  z-index: 2;
}

.timeline-item .content {
  position: relative;
}

.timeline-item .content.left::after {
  content: "";
  position: absolute;
  top: 48px;
  right: -10px;
  width: 10px;
  height: 1px;
  border-top: 1px dotted #000000;
}

.timeline-item .content.right::before {
  content: "";
  position: absolute;
  top: 48px;
  left: -10px;
  width: 10px;
  height: 1px;
  border-top: 1px dotted #000000;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .timeline-item .content.left::after {
    right: -25px;
    width: 25px;
  }

  .timeline-item .content.right::before {
    left: -25px;
    width: 25px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .timeline-item .content.left::after {
    right: -40px;
    width: 40px;
  }

  .timeline-item .content.right::before {
    left: -40px;
    width: 40px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .timeline-item .content.left::after {
    right: -60px;
    width: 60px;
  }

  .timeline-item .content.right::before {
    left: -60px;
    width: 60px;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .timeline-item .content.left::after {
    right: -75px;
    width: 75px;
  }

  .timeline-item .content.right::before {
    left: -75px;
    width: 75px;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .timeline-item .content.left::after {
    right: -90px;
    width: 90px;
  }

  .timeline-item .content.right::before {
    left: -90px;
    width: 90px;
  }
}

/* NORMALIZE */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Image wrapper (Skeleton loading) */
.image-wrapper {
    width: 100%;
    height: 340px;
    background-color: #e6e6e6;   /* Skeleton color */
    overflow: hidden;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* fills container, crops if needed */
    display: block;
}

.download-file.image-wrapper {
    aspect-ratio: 2/3;
    box-shadow: 0px 3px 6px #00000029;
}

/* Testimonial carousel */
.primary-background {
    background-color: var(--mn-green);
}

.carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.carousel-track {
    display: flex;
    transition: transform 0.35s ease;
}

.testimonial {
    min-width: 100%;
    box-sizing: border-box;
    text-align: center;
    user-select: none;
    font-family: sans-serif;
}

.testimonial h2 {
  color: var(--bs-white);
}

.testimonial .fa-star,
.testimonial .fa-star-half-stroke {
  color: var(--bs-orange);
}

/* Testimonial Arrows */
.carousel-arrow {
  color: var(--bs-white);
  z-index: 10;
}

.carousel-arrow:hover {
    color: var(--bs-gray-500);
}

/* gmp-map */
gmp-map {
    min-height: 320px;
}

/* Notifications */
#notifications{
  position: absolute;
  top: calc(var(--mn-header-height, 56px) + var(--mn-notification-offset, 1.5rem));
  right: var(--mn-notification-offset, 1.5rem);
  z-index: 1040; /* the sb-topnav has a z-index of 1038 */
  min-width: 240px;
  width: 20vw;
}

#notifications .notification {
    position: relative;
}

#notifications .success, 
#notifications .error
{
    color: #fff;
    padding: 24px;
    margin: 8px;
}

#notifications .success {
    background: var(--mn-green);
}

#notifications .error{
    background: var(--mn-red);
}

#notifications p {
    margin: 0;
}

#notifications .close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    font-weight: bold;
    opacity: 0.7;
    font-size: 2rem; 
}

#notifications .close-btn:hover {
    opacity: 1;
}

/* DCM Styles */
span.header {
    color: var(--mn-green);
    font-weight: bold;
}

/* Schedule meeting */
.schedule-meeting {
    background-color: var(--mn-light-green);
}

/* UL LI*/
main ul > li {
    position: relative;
    margin-bottom: 0.5em;
    padding-left: 1.2em;       /* space for custom bullet */
}

main ul > li::before {
    content: "•";               /* custom bullet */
    position: absolute;
    left: 0;
    color: var(--mn-green);             /* bullet color */
    font-weight: bold;
}

/* Search Results */
.searchresults {
    max-width: 300px;
}

.totalsearch .highlight {
    font-weight: bold;
    color: var(--bs-black);
}

/* Container */
#pagination {
  display: flex;
  gap: 0.5rem; /* spacing between page items */
  flex-wrap: wrap; /* responsive wrapping if many pages */
  margin: 1rem 0;
  font-family: Arial, sans-serif;
}

/* Page items */
#pagination .EachItem a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: var(--mn-green);
  border: 1px solid var(--mn-green);
  border-radius: 0.25rem;
  transition: all 0.2s ease;
}

/* Hover state */
#pagination .EachItem a:hover {
  background-color: var(--mn-dark-green);
  color: #fff;
}

/* Active page */
#pagination .EachItem a.CurrentPageNum {
  background-color: var(--mn-green);
  color: #fff;
  cursor: default;
  pointer-events: none; /* prevent clicking the active page */
  font-weight: bold;
  border-color: var(--mn-green);
}

/* Optional: Disabled page items if you have prev/next */
#pagination .EachItem a.disabled {
  color: #aaa;
  border-color: #ccc;
  cursor: not-allowed;
  pointer-events: none;
}

#searchoverlay {
    position: fixed;
    top: -100%;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 1039;
    transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
    pointer-events: none; /* only enable when open */
}

#searchoverlay::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background-color: var(--mn-green);
    opacity: 0; 
    transition: opacity 0.5s cubic-bezier(0.785, 0.135, 0.150, 0.860);
    z-index: -1; /* behind content */
}

#searchoverlay.open::before {
    opacity: 0.96;
}

#searchoverlay.open {
    top: 0;
    pointer-events: auto;
}