/* ========================================
   BASE MOBILE STYLES (Mobile First)
   ======================================== */

/* Header Base */
.usa-header.usa-header--extended {
  background-color: var(--ojp-header__background);
}

.usa-header.usa-header--extended .usa-navbar {
  height: auto;
  padding: 0.625rem 1rem;
}

.usa-header.usa-header--extended .usa-navbar .usa-logo {
  align-items: center;
  display: flex;
  height: 100%;
  margin: 1rem 0.9375rem 1rem 0;
}

.usa-header.usa-header--extended .usa-navbar .usa-logo .ojp-seal {
  margin-right: 1rem;
}

.usa-header.usa-header--extended .usa-navbar .usa-logo .ojp-seal img {
  height: auto;
  max-width: 100%;
}

.usa-header.usa-header--extended .usa-navbar .usa-logo > * {
  align-items: center;
  display: flex;
  flex-grow: 0;
  flex-shrink: 1;
  justify-content: center;
}

.usa-header.usa-header--extended .usa-navbar .usa-logo > * > a {
  line-height: 0;
  overflow: hidden;
}

.usa-header.usa-header--extended .usa-navbar .usa-menu-btn {
  margin-left: auto;
  order: 90;
  text-transform: none;
  width: auto;
}

/* Mobile Navigation Base */
.usa-header--extended .usa-nav {
  background: var(--ojp-header__primary);
  position: fixed;
}

.usa-header--extended
  .usa-nav
  .usa-nav__primary
  > .usa-nav__primary-item:first-child {
  border-top: 0 none;
}

.usa-header--extended
  .usa-nav
  .usa-nav__primary
  > .usa-nav__primary-item
  .usa-accordion__button {
  background-position: right 0.5rem center;
}

.usa-header--extended
  .usa-nav
  .usa-nav__primary
  > .usa-nav__primary-item
  .usa-nav__link {
  color: var(--ojp-header__white);
  font-size: 1.0625rem;
}

.usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-nav__link span {
  font-family: 'Roboto', sans-serif;
}

@media (min-width: 55em) {
  .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item .usa-nav__link span {
    font-size: 0.9375rem;
  }
}

.usa-header--extended
  .usa-nav
  .usa-nav__primary
  > .usa-nav__primary-item
  .usa-nav__link:hover {
  color: var(--ojp-header__primary);
}

.usa-header--extended
  .usa-nav
  .usa-nav__primary
  > .usa-nav__primary-item
  .usa-nav__link.usa-current::after {
  background-color: var(--ojp-header__active-nav);
  border-radius: 0;
  bottom: 0;
  height: auto;
  left: 1rem;
  top: auto;
  width: calc(100% - 2rem);
}

/* Mobile Submenu */
.usa-header--extended
  .usa-nav
  .usa-nav__primary
  > .usa-nav__primary-item
  .usa-nav__submenu
  .usa-nav__submenu-item {
  border: 0 none;
  font-size: 0.9375rem;
}

.usa-header--extended
  .usa-nav
  .usa-nav__primary
  > .usa-nav__primary-item
  .usa-nav__submenu
  .usa-nav__submenu-item
  a {
  color: var(--ojp-color__white);
  font-family: 'Roboto', sans-serif;
}

.usa-nav__submenu > li {
  margin-bottom: 0;
  max-width: unset;
}

.usa-nav__submenu-item {
  border-top: 1px solid var(--ojp-color__submenu-border);
  font-size: 0.87rem;
}

/* Mobile Secondary Navigation */
.usa-header--extended
  .usa-nav
  .usa-nav__secondary
  .usa-nav__secondary-links
  .usa-nav__secondary-item {
  margin-bottom: .25rem;
}

.usa-header--extended
  .usa-nav
  .usa-nav__secondary
  .usa-nav__secondary-links
  .usa-nav__secondary-item
  a,
.usa-header--extended
  .usa-nav
  .usa-nav__secondary
  .usa-nav__secondary-links
  .usa-nav__secondary-item
  a:visited {
  color: var(--ojp-header__white);
  font-size: 0.9375rem;
  padding: 0.375rem 0;
}

.region-secondary-menu {
  display: flex;
  flex-direction: column-reverse;
}

/* No Main Nav Mobile */
.usa-header--extended.usa-header--no-main-nav .usa-navbar {
  border-bottom: 1px solid var(--ojp-header__background);
}

/* Navigation Icons - Mobile Base */
.usa-nav__primary button[aria-expanded] span::after {
  content: "";
  display: inline-block;
  margin-left: auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  vertical-align: middle;
}

/* Navigation Icons - Mobile Collapsed */
.usa-nav__primary button[aria-expanded="false"] span::after {
  background-image: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/add.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
  height: 1.25rem;
  width: 1.25rem;
}

/* Navigation Icons - Mobile Expanded */
.usa-nav__primary button[aria-expanded="true"] span::after {
  background-image: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/remove.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
  height: 1.25rem;
  width: 1.25rem;
}

/* Mobile specific icon colors for extended header */
.usa-header--extended .usa-nav .usa-nav__primary button[aria-expanded="false"] span::after {
  background-color: var(--ojp-color__white) !important;
  filter: brightness(0) invert(1) !important;
}

.usa-header--extended .usa-nav .usa-nav__primary button[aria-expanded="true"] span::after {
  background-color: var(--ojp-color__black) !important;
  filter: none !important;
}

/* Navigation Icons - Mobile (Mask Support) */
@supports ((-webkit-mask: url()) or (mask: url())) {
  .usa-header--extended
    .usa-nav
    .usa-nav__primary
    button[aria-expanded="false"]
    span::after {
    -webkit-mask-image: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/add.svg);
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 1.25rem 1.25rem;
    background: 0 0 !important;
    background-color: var(--ojp-color__white) !important;
    mask-image: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/add.svg);
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: 1.25rem 1.25rem;
  }

  .usa-header--extended
    .usa-nav
    .usa-nav__primary
    button[aria-expanded="true"]
    span::after {
    -webkit-mask-image: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/remove.svg);
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 1.25rem 1.25rem;
    background-color: var(--ojp-color__black) !important;
    mask-image: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/remove.svg);
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: 1.25rem 1.25rem;
  }
}

/* Close Button */
.usa-nav__close img {
  width: 0.75rem;
}

/* Language Switcher */
html:lang(en) .usa-nav__primary li.menu-lang-switcher-en,
html:lang(es) .usa-nav__primary li.menu-lang-switcher-es {
  display: none;
}

/* Social Sharing */
.usa-header--extended .usa-nav .usa-nav__secondary button.doj-sharing__toggle {
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  border: 0;
  bottom: -7px;
  color: transparent;
  display: inline-block;
  height: 24px;
  position: relative;
  width: 24px;
}

.usa-header--extended .usa-nav .usa-nav__secondary .doj-sharing {
  display: inline-block;
}

.usa-header--extended .usa-nav .usa-nav__secondary .doj-sharing__list {
  background-color: var(--ojp-color__black-transparent);
  border-radius: 0.375rem;
  columns: 2;
  font-size: 1.125rem;
  list-style: none;
  margin: 0;
  padding: 1.125rem;
  right: 0;
  text-align: left;
  top: 1.5rem;
}

.usa-header--extended .usa-nav .usa-nav__secondary .doj-sharing__list li {
  display: inline-block;
  margin-bottom: 1.125rem;
}

/* ========================================
   GOOGLE CUSTOM SEARCH - MOBILE FIRST
   ======================================== */

/* Search Container Base */
.usa-search.usa-search--small,
.gsc-search-box {
  table,
  tr,
  td {
    background-color: transparent;
    border: 0;
    margin: 0;
    padding: 0;
  }
}

.gsc-control-searchbox-only,
.gsc-control-searchbox-only-en {
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
}

/* Search Input Field - Mobile */
.usa-search.usa-search--small input,
.gsc-search-box input,
.gsc-input input {
  background: transparent !important;
  border: 1px solid var(--ojp-color__search-border) !important;
  border-radius: 0 !important;
  border-right: 0 none !important;
  border-style: solid !important;
  color: var(--ojp-color__text-dark) !important;
  display: block !important;
  height: 2.4rem !important;
  margin: 0 !important;
  max-width: 30rem !important;
  padding: 0.5rem !important;
  text-indent: 0 !important;
  width: 18ch !important;
}

.usa-search.usa-search--small input:focus,
.gsc-search-box input:focus,
.gsc-input input:focus {
  outline: 0.25rem solid var(--ojp-color__focus-outline);
  outline-offset: 0.25rem;
}

/* Search Button */
.gsc-search-button button,
.gsc-search-button-v2 {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--ojp-header__secondary);
  background-image: url("/themes/custom/ojp_uswds_sdc/color-theme-scss/assets-legacy/ojp/search-icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  border: 1px solid var(--ojp-header__secondary);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--ojp-header__white);
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  height: 100%;
  line-height: 1;
  margin: 0;
  min-width: 2.5rem;
  outline-offset: 0.25rem;
  padding: 0.75rem 1rem;
  text-align: center;
  text-decoration: none;
  text-transform: none;
}

.gsc-search-button button:hover,
.gsc-search-button-v2:hover {
  background-image: url("/themes/custom/ojp_uswds_sdc/color-theme-scss/assets-legacy/ojp/search-icon.svg");
  background-color: var(--ojp-header__secondary-darker);
  border-color: var(--ojp-header__secondary-darker);
  color: var(--ojp-header__white);
}

.gsc-search-button button:active,
.gsc-search-button-v2:active {
  background-color: var(--ojp-header__secondary-darker);
  border-color: var(--ojp-header__secondary-darker);
  color: var(--ojp-header__white);
}

.gsc-search-button button:not([disabled]):focus {
  outline: 0.25rem solid var(--ojp-color__focus-outline);
  outline-offset: 0.25rem;
}

.gsc-search-button button:disabled {
  background-color: var(--ojp-color__gray-disabled);
  border-color: var(--ojp-color__gray-disabled);
  color: var(--ojp-color__gray-disabled-text);
  cursor: not-allowed;
}

/* Google Search Elements to Hide */
.gsc-search-button svg,
.gsc-search-button button svg,
.gsib_b,
.gsst_b,
.gsst_a,
.gscb_a,
.gsc-clear-button {
  display: none !important;
}

/* Google Search Input Components */
.gsc-input {
  background: none;
  padding-right: 0 !important;
}

.gsc-input-box {
  border: 0;
  padding: 0;
}

.gstl_50 {
  padding: 0;
  width: 100%;
}

.gsib_a {
  background: transparent;
}

/* Google Search Results Dropdown - Mobile */
.gssb_c {
  position: fixed !important;
}

.gsc-completion-container {
  border-top: 0.1875rem solid var(--ojp-header__secondary) !important;
  border-bottom: 0.1875rem solid var(--ojp-header__secondary) !important;
}

.gssb_c .gssb_a, .gssb_c .gssb_a td {
  background-color: #fcfcfc;
}

.gssb_c .gssb_a:hover, .gssb_c .gssb_a:hover td {
  background-color: #efefef;
}

/* Safari bug fix for Google search box */
.gsc-search-box tr {
  display: flex;
}

/* ========================================
   TABLET AND LARGER (55em+)
   ======================================== */
@media (min-width: 55em) {
  /* Search Input - Tablet */
  .usa-search.usa-search--small input,
  .gsc-search-box input,
  .gsc-input input {
    width: 27ch !important;
  }

  /* Search Button - Tablet */
  .usa-search.usa-search--small .usa-button,
  .usa-search.usa-search--small
    .layout--node-event
    .field--name-field-event-url
    a,
  .layout--node-event
    .field--name-field-event-url
    .usa-search.usa-search--small
    a,
  .usa-search.usa-search--small .gsc-search-button button,
  .gsc-search-box .gsc-search-button .usa-search.usa-search--small button {
    border-radius: 0 4px 4px 0;
  }

  /* Header - Desktop */
  .usa-header.usa-header--extended .usa-navbar {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .usa-header.usa-header--extended .usa-navbar .usa-logo {
    margin-right: 20.25rem;
    max-width: unset;
    min-height: 80px;
  }

  .usa-header.usa-header--extended .usa-navbar .usa-logo .ojp-seal {
    min-width: 98px;
  }

  /* Navigation Desktop */
  .usa-header--extended .usa-nav {
    background-color: var(--ojp-header__base-lightest);
    position: relative;
  }

  .usa-header--extended .usa-nav::before {
    background: var(--ojp-header__base-lightest);
    bottom: 0;
    content: " ";
    height: 0.3125rem;
    position: absolute;
    width: 100%;
  }

  .usa-header--extended .usa-nav .usa-nav__inner {
    padding-left: 1rem;
  }

  .usa-header--extended .usa-nav .usa-nav__primary {
    margin-left: 0;
  }

  .usa-header--extended .usa-nav .usa-nav__primary > .usa-nav__primary-item {
    font-size: 0.9375rem;
  }

  .usa-header--extended
    .usa-nav
    .usa-nav__primary
    > .usa-nav__primary-item
    .usa-accordion__button {
    font-size: inherit;
  }

  .usa-header--extended
    .usa-nav
    .usa-nav__primary
    > .usa-nav__primary-item
    .usa-accordion__button[aria-expanded="true"] {
    background-color: var(--ojp-header__primary);
    border-bottom: 0.03125rem solid var(--ojp-header__white);
  }

  .usa-header--extended
    .usa-nav
    .usa-nav__primary
    > .usa-nav__primary-item
    .usa-accordion__button[aria-expanded="true"]
    span {
    color: var(--ojp-header__white);
  }


  .usa-header--extended
    .usa-nav
    .usa-nav__primary
    > .usa-nav__primary-item
    .usa-nav__submenu {
    background-color: var(--ojp-header__primary);
  }

  .usa-header--extended
    .usa-nav
    .usa-nav__primary
    > .usa-nav__primary-item
    .usa-nav__submenu
    a {
    color: var(--ojp-header__white);
    display: block;
  }

  .usa-header--extended
    .usa-nav
    .usa-nav__primary
    > .usa-nav__primary-item
    .usa-nav__submenu
    a.usa-current {
    font-weight: bold;
  }

  .usa-header--extended
    .usa-nav
    .usa-nav__primary
    > .usa-nav__primary-item
    .usa-nav__submenu
    a.usa-current::after {
    display: none;
  }

  .usa-header--extended
    .usa-nav
    .usa-nav__primary
    > .usa-nav__primary-item
    .usa-nav__link {
    color: var(--ojp-header__primary);
  }

  .usa-header--extended
    .usa-nav
    .usa-nav__primary
    > .usa-nav__primary-item
    .usa-nav__link:hover::after,
  .usa-header--extended
    .usa-nav
    .usa-nav__primary
    > .usa-nav__primary-item
    .usa-nav__link.usa-current::after {
    background-color: var(--ojp-header__active-nav);
    height: 0.3125rem;
  }

  /* Secondary Navigation Desktop */
  .usa-header--extended .usa-nav .usa-nav__secondary {
    top: -8rem;
    display: flex;
    flex-direction: column-reverse;
  }

  .usa-header--extended .usa-nav .usa-nav__secondary .usa-nav__secondary-links {
    text-align: right;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }

  .usa-header--extended
    .usa-nav
    .usa-nav__secondary
    .usa-nav__secondary-links
    a,
  .usa-header--extended
    .usa-nav
    .usa-nav__secondary
    .usa-nav__secondary-links
    a:visited {
    color: var(--ojp-header__white);
    font-size: 0.9375rem;
    padding: 0.375rem 0;
  }

  .usa-header--extended
    .usa-nav
    .usa-nav__secondary
    .usa-nav__secondary-links
    .usa-current::after {
    background-color: transparent;
  }

  /* Navigation Positioning Desktop */
  .usa-header.usa-header--extended .usa-nav .no-header .region-secondary-menu {
    bottom: 2rem;
    inset-inline-end: 2rem;
    position: absolute;
  }

  .usa-header.usa-header--extended
    .usa-nav
    .no-header
    .region-secondary-menu
    .usa-nav__secondary {
    bottom: 2rem;
  }

  .usa-header.usa-header--extended .usa-nav .region-secondary-menu {
    top: -7.5rem;
    inset-inline-end: 2rem;
    position: absolute;
  }

  .usa-header.usa-header--extended
    .usa-nav
    .region-secondary-menu
    .usa-nav__secondary {
    bottom: 2rem;
  }

  .usa-header.usa-header--extended
    .usa-nav:not(:has(.region-primary-menu))
    .region-secondary-menu {
    bottom: 2rem;
  }

  .usa-header.usa-header--extended
    .usa-nav
    .region-primary-menu
    + .region-secondary-menu
    .usa-nav__secondary {
    bottom: 5rem;
  }

  /* No Main Nav Desktop */
  .usa-header--extended.usa-header--no-main-nav .usa-nav {
    border-top: 1px solid var(--ojp-header__background);
  }

  .usa-header--extended.usa-header--no-main-nav .usa-nav::before {
    content: none;
  }

  .usa-header--extended.usa-header--no-main-nav .usa-nav .usa-nav__secondary {
    bottom: 2rem;
  }

  /* Region Secondary Menu - Desktop */
  .region-secondary-menu {
    display: flex;
    flex-direction: column;
  }

  /* Google Search Results Dropdown Desktop */
  .gssb_c {
    position: absolute !important;
  }

  /* Navigation Icons - Desktop Position */
  .usa-nav__primary button[aria-expanded] span::after {
    right: 0.75rem;
  }

  /* Navigation Icons - Desktop Fallback (without mask support) */
  .usa-nav__primary button[aria-expanded="false"] span::after {
    background-image: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/expand_more.svg);
  }

  .usa-nav__primary button[aria-expanded="true"] span::after {
    background-image: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/expand_less.svg);
  }

  .usa-header--extended .usa-nav .usa-nav__primary button[aria-expanded="false"] span::after {
    filter: brightness(0) invert(0) !important;
  }

  .usa-header--extended .usa-nav .usa-nav__primary button[aria-expanded="true"] span::after {
    filter: brightness(0) invert(1) !important;
  }

  /* Navigation Icons - Desktop (Mask Support) */
  @supports ((-webkit-mask: url("")) or (mask: url(""))) {
    .usa-nav__primary button[aria-expanded="false"] span::after {
      -webkit-mask: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/expand_more.svg) no-repeat center / contain !important;
      -webkit-mask-image: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/expand_more.svg) !important;
      background: var(--ojp-color__black) !important;
      background-color: var(--ojp-color__black) !important;
      background-image: none !important;
      mask: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/expand_more.svg) no-repeat center / contain !important;
      mask-image: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/expand_more.svg) !important;
    }
    
    .usa-nav__primary button[aria-expanded="true"] span::after {
      -webkit-mask: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/expand_less.svg) no-repeat center / contain !important;
      -webkit-mask-image: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/expand_less.svg) !important;
      background: var(--ojp-color__white) !important;
      background-color: var(--ojp-color__white) !important;
      background-image: none !important;
      mask: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/expand_less.svg) no-repeat center / contain !important;
      mask-image: url(/themes/custom/ojp_uswds_sdc/assets/img/usa-icons/expand_less.svg) !important;
    }
  }
}

/* ========================================
   LARGE DESKTOP (75em+)
   ======================================== */
@media (min-width: 75em) {
  .usa-header.usa-header--extended .usa-navbar {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .usa-header--extended
    .usa-nav
    .usa-nav__primary
    > .usa-nav__primary-item
    .usa-accordion__button[aria-expanded="true"]::after {
    background-color: var(--ojp-header__white);
    bottom: 0;
    content: "";
    display: block;
    height: 0.25rem;
    position: absolute;
    width: calc(100% - 2rem);
    z-index: 2;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
  .usa-header.usa-header--extended .usa-navbar .usa-logo {
    max-height: 65px;
  }

  .usa-header.usa-header--extended .usa-navbar .usa-menu-btn {
    display: none;
  }
}