/*
    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;
	}
	/* Translate close button not visible in mobile view */
	#overlay {
		position:relative !important;
	}
}


#mdgov-accessMenu a {
    background-color: #fff;
    padding: 1rem;
    display: block;
    position: absolute;
    outline: 5px solid #005EA2;
    outline-offset: -5px;
}

/*footer*/
:root {
    --mdgov-footer-bg-color: #000;
  }
.mdgov-footer__agency__address address {
    max-width: 450px;
  }
/*20250225 - update the header color to #162E51*/
.mdgov-masthead {
	background-image: none;
	background-color: #162E51;
}

/* 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;
}
*/
/* 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;
}

/*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: 700;
	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);
}

/* 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;
}

/* Bug fix: List Viewer webpart with hyperlink column doesnt display full text. Ex: /contracts/DoIT-Contracts/Pages/DoIT-Contracts.aspx */
.lvField-url {
    overflow: visible !important;
    white-space: normal !important;
    max-width: 350px !important;
}

/* List Viewer webpart Search bar buttons needs spacing between them. */
.input-group .form-control {
	margin-right: 5px;
}
.input-group .btn {
	margin-right: 5px;
}