/* === APL Header + Navigation (full rebuild for new markup) ============= */
/* This file assumes the updated header markup with:
   - #horizontal_rule (top bar)
   - #new_logo, #new_logo_image
   - #apl-nav and #sub-aplmenu
   - #new_search (desktop) and #sub-search / #new_search2 (mobile)
   - nav-button anchors used for primary nav + mobile toggles
*/

/* === Base tweaks ======================================================= */
span.menucopy { padding: 0; }
.aplmenu { padding-top: 16px !important; }
div.usa-layout-docs__main.desktop\:grid-col-fill {
  background-image: url(/library/ii/logo_blue_bg.svg) !important;
  background-repeat: repeat-x;
  background-position-y: 0 !important;
}
:root { --logo-blue:#44499c; --logo-blue-dk:#3b3f8b; }

/* === Top bar / layout ================================================== */
.top_row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#horizontal_rule {
  border-bottom: 5px solid var(--logo-blue);
}
#horizontal_rule .grid-container {
  padding-left: 0;
  padding-right: 0;
}
.toprow > *,
.toprow__right > * {
  height: auto !important;
  text-decoration: none;
}
.grid-container .onlysmall {
  margin: 0 !important;
  padding: 0;
}

/* === Main nav / logo =================================================== */
#apl-nav {
  background: #fff;
  min-height: auto;
}
#apl-nav a {
  color: #000;
  text-align: center;
  padding: 10px 0 !important;
}
#new_logo_image {
  width: 246px;
  height: auto;
  background: #fff !important;
}
.apllinks {
  justify-content: left !important;
}
.nav-button {
  display: flex;
}
.nav-button > * {
  display: flex;
  align-items: center;
}
ul.apllinks {
  margin: 0 !important;
  padding: 0 !important;
}
#apl-nav .grid-row.left {
  padding: 0 !important;
}
.first.apllogo {
  margin: 0 !important;
  display: block;
  height: 113px;
}

.header-main-row {
  display: flex;
  align-items: center;
  gap: 28px;
}
#new_logo {
  display: flex;
  align-items: center;
}
#new_search {
  flex: 1;
  display: flex;
  align-items: center;
}

/* === Account button ==================================================== */
.toprow__account {
  background: transparent;
  padding: 0;
  margin: 0;
  height: auto;
  display: flex;
  align-items: center;
}
.toprow__account .btn-primary,
.toprow__account .btn.btn-primary,
.toprow__account a.btn.btn-primary,
#bibliocommons_user_nav_trigger {
  background: var(--logo-blue) !important;
  color: #fff !important;
  border: 1px solid var(--logo-blue) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#bibliocommons_user_nav_trigger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0 16px !important;
  line-height: 1;
  text-decoration: none;
  gap: .5rem;
}
#bibliocommons_user_nav_trigger .caret {
  width: 0;
  height: 0;
  margin-left: .5rem;
  display: inline-block;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
}
#bibliocommons_user_nav_trigger:hover {
  background: var(--logo-blue-dk) !important;
  border-color: var(--logo-blue-dk) !important;
}
#bibliocommons_user_nav_trigger:focus {
  outline: 2px solid color-mix(in srgb, var(--logo-blue), transparent 70%);
  outline-offset: 2px;
}
.toprow__account .bc_core_external,
.toprow__account .dropdown,
.toprow__account .btn-flat {
  background: transparent !important;
  border-color: transparent !important;
}
.toprow__account.bc-widget {
  margin-top: 0;
  margin-left: 16px;
}

/* === BiblioCommons search (generic) ==================================== */
.bc-search {
  --bc-gap: .5rem;
  --bc-border: #c9c9d6;
  --bc-primary: var(--logo-blue);
  --bc-muted: #6b7280;
}
.bc-search .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.bc-search .pull-right { float: right; }
.bc-search .small { font-size: .875rem; }
.bc-search .collapsible_search_form {
  display: flex;
  align-items: center;
  gap: var(--bc-gap);
  flex-wrap: nowrap;
  width: 100%;
  margin-top: 13px;
}
.bc-search .search_type_block {
  display: flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}
.bc-search .connector {
  color: var(--bc-muted);
  font-size: .95rem;
}
.bc-search .form-control {
  padding: 6px 12px;
  border: 1px solid var(--bc-border);
  line-height: 1.4;
  background: #fff;
  min-width: 0;
  height: auto;
  border-radius: 3px;
}
.bc-search .btn {
  border-radius: 3px;
  padding: 7px 14px;
  border: 1px solid var(--logo-blue);
  cursor: pointer;
  background: #fff;
}
.bc-search .btn-link {
  background: none;
  border: none;
  padding: 0;
}
.bc-search .btn-primary {
  background: var(--logo-blue);
  color: #fff;
  border-color: var(--logo-blue);
}
.bc-search .btn:focus,
.bc-search .form-control:focus {
  outline: 2px solid color-mix(in srgb, var(--logo-blue), transparent 70%);
  outline-offset: 2px;
}
.bc-search .header_search_box {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  position: relative;
  flex: 1 1 auto;
}
.bc-search .main_search_input_wrapper {
  position: relative;
  display: block;
  flex: 1 1 auto;
  align-self: flex-start;
}
.bc-search .header_search_clear_button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  color: var(--bc-muted);
}
.bc-search .header_search_clear_button:hover {
  color: #111;
}
.bc-search .dropdown-menu {
  position: absolute;
  z-index: 1000;
  display: none;
  min-width: 12rem;
  padding: .25rem 0;
  margin: .25rem 0 0;
  border: 1px solid var(--bc-border);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.bc-search .adv_search a {
  color: var(--logo-blue);
  text-decoration: none;
}
.bc-search .adv_search a:hover {
  text-decoration: underline;
}
.bc-search .svg_icon {
  display: inline-block;
  vertical-align: middle;
}

/* Books button hover */
.bc-search .header_search_box .btn-primary[data-role="btn-books"] {
  background: #44499c !important;
  border-color: #44499c !important;
  color: #fff;
}
.bc-search .header_search_box .btn-primary[data-role="btn-books"]:hover,
.bc-search .header_search_box .btn-primary[data-role="btn-books"]:focus {
  background: #3b3f8b !important;
  border-color: #3b3f8b !important;
}

/* Keep APL header grid for generic BC instances */
.bc-search .header_search_box .input-group-btn {
  display: grid !important;
  grid-template-columns: auto auto;
  grid-template-areas: "books apl" "adv apl";
  column-gap: .25rem;
  row-gap: 2px;
  align-items: start;
  white-space: normal;
}
.bc-search .header_search_box .input-group-btn [data-role="btn-books"] {
  grid-area: books;
}
.bc-search .header_search_box .input-group-btn [data-role="btn-apl"] {
  grid-area: apl;
}
.bc-search .header_search_box .input-group-btn .adv_search {
  grid-area: adv;
  justify-self: end;
  align-self: start;
  margin-top: 2px;
  float: none;
}

/* Align bits at top */
.bc-search .collapsible_search_form { align-items: flex-start; }
.bc-search .search_type_block { align-self: flex-start; margin-top: 0; }
.bc-search #search-type-select { align-self: flex-start; }

/* === Menu / color accents ============================================= */
.aplmenu.onlysmall,
.last.aplsearch {
  position: relative !important;
}
.aplmenu .onlyActive { display: none; }
.aplmenu.active .onlyActive { display: inline; }
.aplmenu.active img:not(.onlyActive) { display: none; }

.layout.layout--onecol a { color: #44499C !important; }
body div.apl-event {
  border: 1px solid #44499C !important;
}
.news--card a.news--card-button {
  background: #44499C !important;
  color: #fff !important;
}
div.news--card,
div.news-card-row.grid-col-12.tablet-grid-col-6.desktop-grid-col-3,
div.news-card .news-card-row {
  border: 1px solid #44499C !important;
}
.more-link a,
.usa-button {
  background-color: #44499C !important;
}
#aplmenu {
  color: #000;
  text-decoration: none;
}
#search {
  position: absolute !important;
  right: 16px;
  color: #000;
  text-decoration: none;
}
#search.active span { display: block !important; }
.layout.layout--onecol a.usa-button.usa-button-outline {
  color: #fff !important;
}
#books-movies-more.active,
#research-learning.active,
#services.active {
  border-bottom: 4px solid #44499C;
}

/* === Narrow top-row ==================================================== */
@media (max-width:1040px){
  #horizontal_rule .grid-container { padding-right:16px; }
  #horizontal_rule .top_row {
    display:flex !important;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 16px;
    padding-top:6px;
    padding-bottom:0;
  }
  #horizontal_rule .top_row::after {
    content:"";
    order:2;
    flex-basis:100%;
  }
  #horizontal_rule .top_row a.onlysmall {
    order:1;
    display:inline-flex;
    align-items:center;
    padding:6px 0;
  }
  #horizontal_rule .top_row a.onlysmall:first-of-type {
    margin-left:auto;
  }
  #horizontal_rule .top_row a.onlysmall img {
    margin-right:6px;
  }
  #horizontal_rule .top_row a#lang {
    order:3;
    padding:0 !important;
    margin:0 !important;
    display:inline-flex;
    align-items:center;
  }
  #horizontal_rule .top_row .toprow__account {
    order:3;
    margin:0 !important;
    display:flex;
    justify-content:flex-end;
  }
}

/* === Hidden-sm exception at mid widths ================================ */
@media (min-width:768px) and (max-width:1040px){
  .bc-search .hidden-sm { display:none !important; }
  #new_search2 .bc-search .hidden-sm { display:block !important; }
}

/* === Second mount (#new_search2) — base layout ========================= */
#sub-search { padding-right:16px; }
#new_search2 {
  display:flex;
  justify-content:flex-end;
}
#new_search2 .main_search_input_wrapper {
  position:relative;
  display:block;
  flex:1 1 auto;
  min-width:260px;
}
#new_search2 .main_search_input_wrapper .main_search_input {
  width:100%;
  display:block;
}
#new_search2 .header_search_clear_button {
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
}
#new_search2 form.collapsible_search_form {
  margin-left:auto;
  width:auto;
  display:flex;
  align-items:start;
  column-gap:.75rem;
  row-gap:.5rem;
  justify-content:end;
  grid-template-columns:max-content minmax(360px,640px) max-content;
  grid-template-areas:"type input buttons";
}
#new_search2 .search_type_block { grid-area:type; }
#new_search2 .header_search_box { grid-area:input; }
#new_search2 #search_buttons { grid-area:buttons; }

/* Buttons cluster (generic, non-sub-search) */
#search_buttons .input-group-btn {
  display:inline-grid;
  grid-template-columns:auto auto;
  grid-template-areas:"btn-books btn-apl" "adv-search btn-apl";
  column-gap:.5rem;
  row-gap:.25rem;
  align-items:start;
  justify-items:end;
}
#search_buttons [data-role="btn-books"] {
  grid-area:btn-books;
  white-space:nowrap;
}
#search_buttons [data-role="btn-apl"] {
  grid-area:btn-apl;
  white-space:nowrap;
  width:max-content;
}
#search_buttons .adv_search {
  grid-area:adv-search;
  justify-self:end;
  float:none !important;
  white-space:nowrap;
  font-size:.875rem;
  line-height:1.2;
}
#search_buttons .btn,
#search_buttons .btn > span {
  white-space:nowrap;
}

/* Responsive for #new_search2 block */
@media (max-width:980px){
  #new_search2 form.collapsible_search_form{
    grid-template-columns:max-content minmax(360px,1fr);
    grid-template-areas:"type input" "buttons buttons";
  }
  #search_buttons .input-group-btn{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    column-gap:.5rem;
    row-gap:.25rem;
  }
  #search_buttons [data-role="btn-books"]{ order:1; }
  #search_buttons .adv_search{
    order:2;
    flex:0 0 100%;
    display:flex;
    justify-content:flex-end;
  }
  #search_buttons [data-role="btn-apl"]{
    order:3;
    flex:0 0 auto;
  }
}
@media (max-width:700px){
  #new_search2 form.collapsible_search_form{
    grid-template-columns:max-content minmax(280px,1fr);
    grid-template-areas:"type input" "buttons buttons";
  }
  #search_buttons .input-group-btn{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  #search_buttons [data-role="btn-books"]{ order:1; }
  #search_buttons .adv_search{
    order:2;
    flex:0 0 100%;
    display:flex;
    justify-content:flex-end;
  }
  #search_buttons .input-group-btn::after{
    content:"";
    order:2;
    flex-basis:100%;
  }
  #search_buttons [data-role="btn-apl"]{
    order:3;
    flex:0 0 auto;
    width:max-content;
    align-self:flex-start;
    margin-top:8px;
  }
}

/* Portrait stack variant */
@media (max-width:700px) and (orientation:portrait){
  #new_search2 form.collapsible_search_form{
    grid-template-columns:minmax(260px,1fr);
    grid-template-areas:"type" "input" "buttons";
    justify-content:end;
    justify-items:end;
    column-gap:.5rem;
    row-gap:.5rem;
  }
  #new_search2 .search_type_block{ justify-self:end; }
  #new_search2 .header_search_box{
    justify-self:end;
    width:min(100%,640px);
  }
  #new_search2 .main_search_input_wrapper{ width:100%; }
  #new_search2 .main_search_input_wrapper .main_search_input{ width:100%; }
}

/* Submenu mobile nav buttons */
@media (max-width:1040px){
  #sub-aplmenu{
    padding:12px 16px;
    padding-left:40px !important;
  }
  #sub-aplmenu.is-open,
  #sub-aplmenu.active{
    display:block !important;
  }
  #sub-aplmenu li{
    display:block;
    margin:6px 0;
  }
  #sub-aplmenu .onlybig{ display:none !important; }
  #sub-research-learning img{ display:none; }
  #sub-aplmenu li{
    display:block;
    margin:14px 0;
  }
  #sub-aplmenu .nav-button{
    display:inline-flex !important;
    flex-direction:row;
    align-items:center;
    gap:12px;
    white-space:nowrap;
    text-align:left;
  }
  #sub-aplmenu .nav-button img{
    display:block;
    width:24px;
    height:24px;
    flex:0 0 24px;
    margin:0;
  }
  #sub-aplmenu .nav-button span{
    display:inline-block;
    line-height:1.2;
  }
  @supports not (gap:1rem){
    #sub-aplmenu .nav-button img{ margin-right:12px; }
  }
}

/* Misc */
li .nav-button img{ margin-right:6px; }

/* Small-only APL menu block size */
.aplmenu.onlysmall{
  height:auto !important;
  width:auto !important;
}

/* === Onlywide/Onlynarrow default + switches =========================== */
.onlywide,
.onlynarrow,
.onlysmall{ display:none !important; }

@media (min-width:1041px){
  #sub-aplmenu{
    display:flex !important;
    gap:12px;
    align-items:center;
    flex-wrap:nowrap;
    width:100%;
    margin-left:22px;
    padding-left:40px !important;
  }
  #sub-aplmenu li{ display:inline-block; }
  #sub-aplmenu.is-open,
  #sub-aplmenu.active{ display:flex !important; }
  #sub-search{ display:none; }
  #sub-search.is-open,
  #sub-search.active{ display:block; }
  #new_search{
    display:flex !important;
    justify-content:right;
  }
  .aplmenu.onlysmall{ display:none !important; }
  .onlynarrow,
  .onlysmall{ display:none !important; }
  .onlywide{ display:initial !important; }
  #horizontal_rule .top_row a.onlysmall{ display:none !important; }
}
@media (max-width:1040px){
  #new_search{ display:none !important; }
  .aplmenu.onlysmall{ display:inline-flex !important; }
  .onlynarrow,
  .onlysmall{ display:inline-flex !important; }
  #horizontal_rule .top_row a.onlysmall{
    display:inline-flex !important;
    align-items:center;
  }
  .onlywide{ display:none !important; }
}

/* Undo 3rd-party hidden/visible-sm helpers */
[class*="hidden-sm"],
[class*="visible-sm"]{
  display:revert !important;
}

/* Small APL menu inside #new_logo (explicit breakpoints only) */
@media (max-width:1040px){
  #new_logo .aplmenu.onlysmall{
    display:inline-flex !important;
    gap:8px;
    align-items:center;
  }
}
@media (min-width:1041px){
  #new_logo .aplmenu.onlysmall{ display:none !important; }
}

/* Misc */
a#search.active img.onlyActive{ padding:0 !important; }

/* === NARROW VIEW OVERRIDES: left-align mobile mount =================== */
@media (max-width:1040px){
  #sub-search,
  #new_search2,
  #new_search2 form.collapsible_search_form,
  #new_search2 .search_type_block,
  #new_search2 .header_search_box,
  #search_buttons{
    justify-content:flex-start !important;
    justify-items:start !important;
    text-align:left !important;
  }
  #new_search2{
    display:flex !important;
    justify-content:flex-start !important;
  }
  #search_buttons .input-group-btn [data-role="btn-apl"]{
    margin-top:0 !important;
  }
}
@media (max-width:980px){
  #new_search2 form.collapsible_search_form{
    justify-content:flex-start !important;
    justify-items:start !important;
  }
  #search_buttons .adv_search{
    justify-self:start !important;
  }
  #search_buttons [data-role="btn-apl"]{
    margin-top:0 !important;
  }
}
@media (max-width:700px){
  #new_search2 form.collapsible_search_form{
    justify-content:flex-start !important;
    justify-items:start !important;
  }
  #search_buttons [data-role="btn-apl"]{
    flex:0 0 auto !important;
    width:max-content !important;
    margin-top:0 !important;
  }
}

/* === APL narrow search: toggle + ADV under BOOKS ====================== */
@media (max-width:1040px){
  #sub-search:not(.is-open):not(.active){
    display:none !important;
  }
  #sub-search.is-open,
  #sub-search.active{
    display:block !important;
  }
}
@media (max-width:1040px){
  #sub-search #new_search2{ display:block; }
  #sub-search form.collapsible_search_form{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
    gap:.75rem !important;
    justify-content:flex-start !important;
  }
  #sub-search .header_search_box{
    flex:1 1 360px !important;
    min-width:0 !important;
  }
  #sub-search .main_search_input_wrapper{ width:100% !important; }
  #sub-search .main_search_input{ width:100% !important; }
  #sub-search #search_buttons .input-group-btn{
    display:inline-grid !important;
    grid-template-columns:max-content max-content !important;
    grid-template-areas:"books apl" "advb apl" !important;
    column-gap:.5rem !important;
    row-gap:.25rem !important;
    align-items:start !important;
    justify-items:start !important;
    white-space:nowrap !important;
  }
  #sub-search #search_buttons [data-role="btn-books"]{
    grid-area:books !important;
  }
  #sub-search #search_buttons [data-role="btn-apl"]{
    grid-area:apl !important;
    margin-top:0 !important;
  }
  #sub-search #search_buttons .adv_search{
    grid-area:advb !important;
    justify-self:end !important;
    float:none !important;
    margin-top:2px !important;
  }
}
@media (max-width:980px){
  #sub-search form.collapsible_search_form{ flex-wrap:wrap !important; }
  #sub-search #search_buttons{ flex:0 0 100% !important; }
}
@media (max-width:700px){
  #sub-search #search_buttons .input-group-btn{
    grid-template-columns:max-content max-content !important;
  }
}

/* Hide horizontal nav when Menu/Search icons appear */
@media (max-width:1040px){
  #sub-aplmenu,
  #apl-nav .apllinks{
    display:none !important;
  }
  #sub-aplmenu.is-open,
  #sub-aplmenu.active{
    display:block !important;
  }
}

/* === Brand + utility rules from original custom CSS ==================== */

/* Fragger icon alignment */
.fragger {
  display:inline-block !important;
  background-position-y:3px;
}

/* Accordion content padding */
.accordion h2.section-heading.active + div.details {
  padding:1em 0 1em 20px;
}

/* Current link and more button */
.layout.layout--onecol a.usa-current,
.grid-gap div.more-link a {
  background-color:#44499C !important;
  color:#ffffff !important;
}

/* Quotation font */
p#quotation {
  font-family:Geist, "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !important;
}

/* Menu-style buttons */
a.menu-button {
  background:#44499c !important;
}

/* Outline button styling */
a.usa-button.usa-button-outline,
a.usa-button.usa-button-outline:hover,
a.usa-button.usa-button-outlined,
a.usa-button.usa-button-outlined:hover {
  background-color:#ffffff !important;
  color:#44499c !important;
}

/* Brand color for various links */
div.usa-footer__return-to-top a,
span.facet-item__value,
.facet-item__value,
.facets-soft-limit-link,
.roomBoxes .roomBox h1,
.layout.layout--onecol a {
  color:#44499c !important;
}

/* Base bottom border for primary nav items only (not toggles) */
#books-movies-more,
#research-learning,
#services,
#sub-aplmenu > li > .nav-button {
  border-bottom:4px solid #ffffff;
}

/* Active state already handled above (#books-movies-more.active etc.) */

/* Card borders */
div.roomBox,
.facet-item,
.grid-offset-1.grid-col-10.digital-resource-card,
.apl_location_teaser {
  border:1px solid #44499c !important;
  border-radius:3px;
}

/* Docs background (for interior pages) */
.usa-layout-docs__main.desktop\:grid-col-fill {
  background:#C6C5C4 !important;
  background-repeat:repeat-x !important;
  background-position-y:0 !important;
}

/* Accordion background */
.usa-accordion__button,
.accordion h2.section-heading {
  background-color:#dcf2fd !important;
}

/* Highlight frame */
#f-1 { border:4px solid #dcf2fd !important; }

/* Hero + HH icons */
span.hero-action a,
.hh_icon a,
.hh_icon img {
  background:#44499c !important;
}

/* Solid primary buttons */
.layout.layout--onecol a.usa-button {
  color:#ffffff !important;
}

/* Language switcher / alert outline buttons */
.apl-language-switcher .usa-button.usa-button-outline,
.alert-title .usa-button.usa-button-outline {
  background:transparent !important;
  color:#44499c !important;
}
div.layout.layout--onecol a.usa-button.usa-button-outline {
  color:#44499c !important;
  background:transparent !important;
}

/* Fragger link text hidden */
.layout.layout--onecol a.fragger {
  color:transparent !important;
}

/* Alert title button spacing */
.alert-title .usa-button.usa-button-outline {
  margin:8px 0;
}

/* === 2025-11-13 refinements: nav buttons & widths ===================== */

/* Make nav-button elements look like plain text links even when <button> */
a.nav-button,
button.nav-button {
  background: transparent;
  border: none;
  padding: 10px 0 !important;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Prevent wrapping on primary nav labels like "Get a Card" */
#sub-aplmenu .nav-button,
#sub-aplmenu .nav-button span {
  white-space: nowrap;
}

/* Mobile Menu and Search icon triggers share the same plain styling */
#new_logo .aplmenu.nav-button {
  background: transparent;
  border: none;
  padding: 0;
}


/* Skip link for keyboard users */
.apl-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.5rem 1rem;
  background: #44499c;
  color: #ffffff;
  z-index: 10000;
  text-decoration: none;
}
.apl-skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}