/*
    Use this file to customize your site CSS. Do not modify the core css files.
*/
/*.mdgov-footer {
    background-color: #000;
}*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 



:root {
    --mdgov-footer-bg-color:#002868;
}

.mdgov-search__button {
  background-color: #000;
}
.mdgov-search__button:hover {
  background-color: #5c5c5c;
}

.mdgov-masthead {
    background-image: none !important;
    background-color: #002868 !important;
}

#home_section_1 {
  padding-bottom: 0px;
}

#home_section_2 {
    background-color: white !important;
}

#home_section_3 {
    max-width: 1400px; /* Or match the max-width of your slider container */
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;  /* Optional: for mobile spacing */
    padding-right: 16px;
    box-sizing: border-box;
    margin-top: -6%;
  }
  #home_section_3 a[href^="http"]:not([href*="maryland.gov"])::after {
    content: none !important;
    display: none !important;
  }

  #home_section_4 .usa-button--primary {
    background-color: #fff;
    color: #000;
    border-radius: 0.5rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    text-transform: none;
    transition: all 0.3s ease-in-out;
  }
  
  #home_section_4 .usa-button--primary:hover {
    background-color: #d2d2d2;
  }

  #home_section_7 {
    background-color: white !important;
}
 
  #home_section_5 {
    background: #fff !important;
    padding-bottom: 0px !important;
  }

  #home_section_6 {
    background-color: #fff !important;  
    display: flex;
    justify-content: center;
    padding-top: 0px !important;    
    padding-bottom: 0px !important;                        
  }

  #home_section_6 > div {
    width: 1000px;                       
    max-width: 100%;                    
    text-align: left;                   
  }


  @media (max-width: 768px) {
    #home_section_3 {
      padding-left: 10px;
      padding-right: 10px;
    }
  }

  h2 {
  color: #000 !important;
  }

  h4 {
    color: #000 !important;
  }

  .ewf-footer__heading {
  color: inherit !important;
 }

/*
    Use this file to customize your site CSS. Do not modify the core css files.
*/

/* Styles for mobile screens (max-width: 768px) */
@media (max-width: 768px) {
	/* breadcrumb are not wrapping on the mobile view */
    .breadcrumb {
		flex-wrap: wrap;
    }
	.breadcrumb-item {
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* 20250305 Sprint 5, Task 10. Add more spacing to H1 in mobile view only. */
	h1 {
	  margin-top: 2rem;
	}
}

.mdgov-footer__agency__address address {
    max-width: 450px;
  }


/* Custom hover effect to change the entire card color */
.Card-ContainerDiv-class:hover, .Card-ContainerDiv-class:focus{
  background-color: #f2f2f2; /* New background color */
  /* 20250227 - the Title should be black*/
  /* color: #005EA2; */
  transition: background-color 0.3s ease; /* Smooth background color transition */
}

.CardMain-class ul>li>a {
	text-decoration	: none;
}
/* For external links, the "after" image mask icon should be inside the card */
.Card-li-class a[target="_blank"]::after {
    position: absolute !important;  /* Keeps it inside the card */
    bottom: 10px !important;  /* Adjusts to ensure it stays inside */
    right: 20px !important;
    z-index: 10 !important;  /* Ensures it doesn't get hidden */
    transform: none !important;  /* Removes unwanted transformations */
    max-width: 20px !important;  /* Prevents oversized mask images */
}

/* For Cards, the font color and style should match as mentioned in the Figma */
/* 20250227 - the Title should be black. Delete this later.
.usa-card__container{
	color: #005EA2;
}
*/
/*
.mdgov-heroSlider__content {
  text-align: left;
}

.mdgov-heroSlider__content h3.h2.mb-2 {
  text-align: left !important;
  margin-left: 0 !important;
}*/

.usa-card .usa-card__heading {
  font-family: 'Montserrat', sans-serif !important;
  text-align: left;
}

/* Target only cards where the anchor tag has an href (i.e., clickable cards) */
.usa-card a[href] .usa-card__heading {
    color: #005EA2 !important;
}

/* Ensure non-clickable card titles remain unchanged */
.usa-card a:not([href]) .usa-card__heading {
    color: inherit !important;
}

.usa-card__body{
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
}

/*20250210 - commenting this because of the issue reported related to Accessibility test failure*/
/*
.usa-button.usa-button--hover, .usa-button:hover {
    background-color: #0050d8;
}
*/

/* 20250127 - change the hyperlink to match the new requirements. */
a {
    color: #005EA2;
    text-decoration: none;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/* Ensuring equal width and height for all buttons */
/* Button container using flexbox */
.usa-button-group {
  display: flex;
  gap: 1rem; /* Space between buttons */
  flex-wrap: wrap; /* Allows buttons to wrap dynamically */
  justify-content: center; /* Centers buttons when wrapping */
  margin: auto; /* Center the group */
  align-items: stretch; /* Ensures all buttons are the same height */
}

/* Wrapper for each button + label */
.button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1; /* Makes all button containers equal width */
  min-width: 100px; /* Prevents shrinking too much */
}

/* Style for the labels */
.button-label {
  margin-bottom: 0.5rem; /* Space between label and button */
}

/* Dynamic buttons */
.custom-button {
  flex: 1; /* Ensures equal width among buttons */
  min-width: 100px; /* Prevents buttons from shrinking too much */
  max-width: 100%; /* Prevents overflow */
  width: 100%; /* Makes buttons fill container width */
  height: 50px;
  padding: 1rem; /* Adds padding for spacing */
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal; /* Allows text wrapping */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Added margin-top to headings */
h6, .h6, .mdgov-newsCarousel__item h3, .mdgov-newsCarousel__item .h3, h5, .h5, h4, .h4, h3, .h3, h2, .h2 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-family: "Public Sans Web",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-weight: 700;
    line-height: 1.2;
    color: var(--mdgov-heading-color);
}

.custom-section-nav a::after {
  display: none !important;
  content: none !important;
}

a::after {
  display: none !important;
  content: none !important;
}

/* ===== Custom Section Nav Wrapper Styles ===== */
.custom-section-nav-wrapper {
  font-family: "Public Sans Web", sans-serif;
  border: 1px solid #ccc;
  background-color: #fff;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  margin-top: 1rem;
}

.custom-section-nav-wrapper a {
  display: block;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  text-decoration: none;
  border-bottom: 1px solid #ececec;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.custom-section-nav-wrapper a:hover {
  color: #1A4480;
  background-color: #f2f2f2;
  font-weight: 700;
}

.custom-section-nav-wrapper a.active {
  color: #1A4480;
  font-weight: 700;
}

/* These styles apply to ALL screen sizes */
.custom-section-nav-wrapper .usa-accordion__button {
  background-color: #333 !important;
  color: white !important;
}

.custom-section-nav-wrapper .usa-accordion__button::before,
.custom-section-nav-wrapper .usa-accordion__button::after {
  content: none !important;
  display: none !important;
}

.custom-section-nav-wrapper .custom-chevron::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg) translateY(-50%);
  transition: transform 0.3s ease;
}

.custom-section-nav-wrapper .custom-chevron[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateY(-50%);
}

/* ===== Mobile Accordion Styles Only ===== */
@media (max-width: 768px) {
  .custom-section-nav-wrapper.usa-accordion {
    border: 1px solid #ccc;
  }

  .custom-section-nav-wrapper .usa-accordion__content {
    margin: 0;
    padding: 0;
    border-top: 1px solid #ccc;
    background-color: white;
  }

  .custom-section-nav-wrapper a {
    padding: 14px 16px;
    font-size: 1rem;
    border-bottom: 1px solid #e5e5e5;
    background-color: white;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-accordion-wrapper {
    display: block !important;
  }
}

/* ===== Desktop Only Styles ===== */
@media (min-width: 769px) {
  .desktop-only {
    display: block !important;
  }

  .mobile-accordion-wrapper {
    display: none !important;
  }
}


/* ==== Use these styles for wide image responsivness ==== */
.responsive-image-wrapper {
width:100%;
max-width:100%;
overflow-x:auto;
}

.responsive-image {
display:block;
width:100%;
height:auto;
max-width:100%;
border:1px solid #ccc;
}



/* Bug fix: Paging numbers are not visible 
https://stg-doitnw.maryland.gov/About-DoIT/Portfolio-Officers/Pages/Portfolio-Officers.aspx?page=2 
.page-link[aria-current="true"] {
   color: #fff !important;
}*/