/* Custom FAMLI styles go here */

/* Deploy test */
:root {
  --deploy-test-2026-04-17: "v4";
}

usa-banner:not(:defined) {
  visibility: hidden;
}

img {
  height: auto;
}

/* this alert css can be removed once we switch over to a true web component  */
.usa-alert__text p {
  margin-top: 0;
  margin-bottom: 0;
}

.usa-site-alert--emergency .usa-alert__text a {
  color: #fff;
}

.famli-address p {
  margin-block: 0;
}

.pagefind-ui__result-excerpt::before,
.pagefind-ui__result-excerpt::after {
  content: "...";
}

.famli-search {
  min-height: 25rem;
}

/* below 'desktop' when the navigation bar gets small, set a maximum height for the header logo */
@media (width < 1240px) {
  .usa-logo img {
    max-height: 2rem;
    width: auto;
  }
}

.famli-footer-logo > img {
  height: 4rem;
  width: auto;
}

.famli-hero-card__image {
  height: 100%;
  width: auto;
  margin: auto;
  padding-block-start: 0.5rem;
  padding-block-end: 0.5rem;
}

.famli-hero-card__image--employer {
  max-width: 50%;
}

.famli-hero-card__image--employee {
  max-width: 60%;
}

.famli-in-page-nav-image {
  max-height: 13rem;
  width: auto;
}

.famli-homepage-prose p {
  font-size: 1.6em;
}

.famli-translate-link {
  margin-right: 0;
}

.famli-event-heading {
  font-size: var(--ogds-font-size-4);
  padding-block-end: var(--ogds-spacing-1);
  border-block-end: 3px solid var(--ogds-color-gray-cool-60);
  max-width: 100%;
}

@media (min-width: 20rem) {
  .famli-event-heading {
    font-size: var(--ogds-font-size-9);
    padding-block-end: var(--ogds-spacing-3);
  }
}

.famli-event-card {
  display: flex;
  align-items: center;
  margin-block-end: var(--ogds-spacing-2);
  border-radius: var(--ogds-spacing-1);
  padding: var(--ogds-spacing-05) var(--ogds-spacing-05);
  border: 1px solid var(--ogds-color-gray-cool-10);
  border-inline-start: 4px solid var(--ogds-color-blue-vivid-60);
}

@media (min-width: 10rem) {
  .famli-event-card {
    padding: var(--ogds-spacing-205) var(--ogds-spacing-205);
  }
}

@media (min-width: 15rem) {
  .famli-event-card {
    padding: var(--ogds-spacing-2) var(--ogds-spacing-205);
  }
}

.famli-event-card > div:nth-child(1) {
  display: flex;
  flex-direction: column;
}

@media (min-width: 40rem) {
  .famli-event-card > div:nth-child(1) {
    flex-grow: 1;
    border-inline-end: 2px solid var(--ogds-color-gray-20);
  }
}

/* hide the decorative date on mobile and tablet */
.famli-event-card > div:nth-child(2) {
  display: none;
}

@media (min-width: 40rem) {
  .famli-event-card > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    min-width: 20%;
    margin-inline-start: var(--ogds-spacing-2);
  }
}

.famli-event-name {
  color: var(--ogds-color-blue-warm-vivid-70);
  font-size: var(--ogds-font-size-1);
  font-weight: 700;
  line-height: normal;
  margin-block-start: 0px;
}

@media (min-width: 20rem) {
  .famli-event-name {
    font-size: var(--ogds-font-size-6);
  }
}

/* the 3 sets of icons with labels */
.famli-event-details {
  display: flex;
  flex-direction: column;
  gap: var(--ogds-spacing-05);
  padding-inline-start: 0;
  margin-block: 0;
}

@media (min-width: 20rem) {
  .famli-event-details {
    flex-direction: row;
  }
}

@media (min-width: 40rem) {
  .famli-event-details {
    gap: var(--ogds-spacing-1);
  }
}

/* each set of icon with label (date, time, location) */
.famli-event-details div {
  display: inline-flex;
  gap: var(--ogds-spacing-05);
  align-items: center;
  flex-wrap: nowrap;
}

/* icons */
.famli-event-details svg {
  display: flex;
  height: var(--ogds-font-size-5);
  width: var(--ogds-font-size-5);
}

@media (min-width: 20rem) {
  .famli-event-details svg {
    height: var(--ogds-font-size-10);
    width: var(--ogds-font-size-10);
  }
}

/* the text for date, time, and county */
.famli-event-details :is(span, time) {
  font-size: var(--ogds-font-size-micro);
  text-wrap: nowrap;
}

@media (min-width: 10rem) {
  .famli-event-details :is(span, time) {
    font-size: var(--ogds-font-size-1);
  }
}

@media (min-width: 20rem) {
  .famli-event-details :is(span, time) {
    font-size: var(--ogds-font-size-2);
  }
}

@media (min-width: 40rem) {
  .famli-event-details :is(span, time) {
    font-size: var(--ogds-font-size-6);
    font-weight: 500;
  }
}

.famli-event-description {
  overflow: hidden;
  color: var(--ogds-color-gray-90);
  font-size: var(--ogds-font-size-micro);
  font-weight: 400;
}

@media (min-width: 10rem) {
  .famli-event-description {
    font-size: var(--ogds-font-size-2);
  }
}

@media (min-width: 40rem) {
  .famli-event-description {
    font-size: var(--ogds-font-size-4);
  }
}

.clamp-text {
  display: block;
}

@media (min-width: 20rem) {
  .clamp-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

.register-link {
  font-size: var(--ogds-font-size-1);
  margin-right: 0;
}

@media (min-width: 20rem) {
  .register-link {
    font-size: var(--ogds-font-size-3);
  }
}

@media (min-width: 40rem) {
  .register-link {
    font-size: var(--ogds-font-size-4);
  }
}

.famli-event-month {
  color: var(--ogds-color-blue-warm-vivid-80);
  text-align: center;
  font-size: var(--ogds-font-size-6);
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.famli-event-day {
  color: var(--ogds-color-blue-warm-vivid-80);
  text-align: center;
  font-size: var(--ogds-font-size-15);
  font-weight: 600;
  line-height: normal;
  border-block-end: 2px solid var(--ogds-color-blue-warm-vivid-80);
}

.famli-event-year {
  color: var(--ogds-color-blue-warm-vivid-80);
  text-align: center;
  font-size: var(--ogds-font-size-4);
  font-weight: 700;
  line-height: normal;
  margin-block-start: var(--ogds-spacing-1);
}