@charset "UTF-8";
/* ---------------------------------------------------------
 * CADIR Mega Menu Layout
 * --------------------------------------------------------- */
@media (width >= 992px) {
  /**
   * The second row contains the fifth and sixth mega menu
   * links. Each link occupies half of the available row.
   */
  .sub-nav .second-level-nav.with-border > .second-level-link {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
  }
  /**
   * Links 1–4:
   * Keep each link as a vertical column with the image at
   * the top and the link content pushed toward the bottom.
   */
  .second-level-nav.flex:not(.with-border) > .second-level-link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 167px;
  }
  /**
   * Mega Menu image sizes (links 1–6).
   * Set by the Image size field; Large is the default.
   * Large keeps the State Template's 96px (6rem) width.
   */
  .second-level-nav.flex > .second-level-link.mega-image-large .image-icon {
    height: 75px;
    object-fit: contain;
    margin-top: 0;
  }
  .second-level-nav.flex > .second-level-link.mega-image-small .image-icon {
    width: 48px;
    height: 38px;
    object-fit: contain;
    margin-top: 0;
  }
  /**
   * Center image position on links 5–6: place the image above
   * the title. Links 1–4 already center it in their column.
   */
  .second-level-nav.with-border > .second-level-link.mega-image-center .image-icon {
    display: block;
    margin: 0 auto 0.5rem;
  }
  .second-level-nav.flex:not(.with-border) > .second-level-link .sub-nav-link {
    margin-top: auto;
  }
  /* CADIR Mega Menu Layout overrides CAgov css */
  .sub-nav {
    left: 0;
    right: 0;
  }
}
/* ---------------------------------------------------------
 * CADIR Mega Menu — Mobile
 * Match first four links to the normal fourth-link
 * presentation.
 * --------------------------------------------------------- */
@media (width <= 991px) {
  .second-level-nav.flex > a.second-level-link {
    text-align: left !important;
    font-size: var(--font-size-regular);
  }
  .second-level-nav.flex > a.second-level-link .sub-nav-link {
    display: inline;
    margin: 0 !important;
    font-size: inherit;
  }
  /**
   * Match the normal icon size used by links 5–6 (1.375rem, set by the
   * State Template). This overrides the desktop large-icon class on
   * mobile only.
   */
  .second-level-nav.flex > a.second-level-link [class^=ca-gov-icon-].font-size-40 {
    font-size: 1.375rem !important;
  }
}
/* ---------------------------------------------------------
 * CADIR Mega Menu — Image position: Right
 * Set by the Image position field. Places the image in a
 * right-hand column beside the icon, title, and description.
 * Kept after the layout rules above so it overrides the
 * links 1–4 flex column.
 * --------------------------------------------------------- */
.second-level-nav.flex > .second-level-link.mega-image-right {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  align-content: start;
  align-items: center;
}

.second-level-nav.flex > .second-level-link.mega-image-right .image-icon {
  grid-column: 2;
  grid-row: 1/span 3;
  margin: 0;
}

.second-level-nav.flex > .second-level-link.mega-image-right .sub-nav-link {
  margin-top: 0;
}

@media (width <= 991px) {
  .second-level-nav.flex > .second-level-link.mega-image-small .image-icon {
    width: 2.5rem;
  }
}
/* ---------------------------------------------------------
 * DIR Figma "Mega Header": menu bar (desktop)
 *
 * DIR Blue 20px menu items with 16px padding, in a bar with
 * 1px DIR Light Blue (15%) lines above and below. Menu and
 * dropdown links use DIR Blue instead of the State Template's
 * teal. Hover, the current page highlight and the rest of the
 * dropdown panels are not in this Figma frame, so the State
 * Template and existing CADIR styles stay.
 *
 * #navigation and #header keep these rules more specific
 * than the State Template's.
 * --------------------------------------------------------- */
@media (width >= 992px) {
  /* The menu items, their dropdown arrows and the dropdown panel links
     all use --main-nav-color (the State Template's teal by default, which
     is not in the DIR design). */
  #navigation {
    --main-nav-color: #25408f;
  }
  #navigation .top-level-nav > li > .first-level-link,
  #navigation .top-level-nav > li > .first-level-btn,
  #navigation .top-level-nav > li > .has-sub-btn > .first-level-btn {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.25rem;
    line-height: 1.35;
  }
  /* The lines above and below the menu bar. */
  #header .section-default,
  #header.global-header {
    border-bottom-color: rgba(77, 110, 180, 0.15);
  }
  /*
   * The State Template draws a phone-only line with .section-default::after
   * and turns it off from 992px, but a stray character in cagov.core.css
   * breaks that rule, so the line shows 55px above the bottom of the header,
   * just under the line above the menu bar.
   */
  #header .section-default::after {
    border-bottom: 0;
  }
}
/*
 * Phone menu: the State Template colors the drawer and the menu
 * (hamburger) icon with its teal, which is not in the DIR design.
 * Figma has no phone menu, so the DIR palette is used instead:
 * DIR Dark Blue drawer, DIR Blue for the selected item and the
 * icon. Set on #header, where the State Template reads them.
 */
#header {
  --mobile-drawer: #10115e;
  --mobile-drawer-active: #25408f;
  --mobile-menu-icon-color: #25408f;
}