/**
 * TAMU-inspired header styles for tamu_theme.
 *
 * Table of contents:
 *  1. Institutional top bar (#tamu-top-bar)
 *  2. Main navbar
 *  3. Branding
 *  4. Navigation links
 *  5. Mobile toggler
 *
 * Targets the two <nav> elements in page.html.twig:
 *  - header#header nav (top utility bar + main navbar)
 *
 * TAMU brand colors:
 *  Maroon:       #500000
 *  Dark maroon:  #3d0000  (used for top utility bar)
 *  White:        #ffffff
 */

/* ============================================================
   1. Institutional top bar
   Sticky strip above all theme regions.
   ============================================================ */
#tamu-top-bar {
  background-color: var(--primary-brand-dark);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 1400;
  isolation: isolate;
  will-change: transform;
  width: 100%;
  font-size: 0.8rem;
  font-family: sans-serif;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.tamu-top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0.4rem 1.5rem;
}

.tamu-top-bar__brand {
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.tamu-top-bar__brand svg {
  height: 100px;
  width: auto;
}

.tamu-top-bar__brand:hover {
  color: var(--white);
  text-decoration: none;
}

.tamu-top-bar__nav {
  display: flex;
  gap: 1rem;
  align-items: center;
  min-height: 100px;
  padding: 0 0.5rem;
}

.tamu-top-bar__link {
  color: var(--link-on-dark);
  text-decoration: none;
  white-space: nowrap;
  font-size: 1rem;
}

.tamu-top-bar__link:hover {
  color: var(--link-on-dark-hover);
  text-decoration: underline;
}

/* Collapse nav links on small screens */
@media (max-width: 575px) {
  .tamu-top-bar__nav {
    display: none;
  }
}

/* ============================================================
   2. Main navbar — maroon background
   Overrides Bootstrap's bg-white utility (!important needed)
   ============================================================ */
/* Create a stacking context on the header so nav links can't escape above #tamu-top-bar */
header#header {
  isolation: isolate;
  position: relative;
  z-index: 10;
}

header#header nav.navbar > .container-fluid,
header#header nav.navbar > .container-lg,
header#header nav.navbar > .container {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}

header#header nav.navbar,
header#header nav.navbar.bg-white {
  background-color: var(--primary-brand, #500000) !important;
  border-bottom: 3px solid var(--gray-400, #a7a7a7);
}

header#header nav#navbar-main {
  background-color: var(--white, #ffffff) !important;
}

/* Top utility bar (secondary_menu / top_header region) */
header#header nav.navbar:first-of-type {
  background-color: var(--white, #ffffff) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================================
   Branding — logo and site name
   ============================================================ */
header#header .navbar-brand,
header#header .navbar-brand span,
header#header a.navbar-brand,
header#header a.navbar-brand:hover,
header#header a.navbar-brand:focus {
  color: var(--white) !important;
}

/* Tighten the logo area vertical padding */
header#header .page-header {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* ============================================================
   Primary navigation links
   ============================================================ */
header#header nav.navbar .nav-link {
  color: var(--black) !important;
  font-weight: 500;
  padding-left: 1rem;
  padding-right: 1rem;
}

header#header nav.navbar .nav-link:hover,
header#header nav.navbar .nav-link:focus,
header#header nav.navbar .nav-link.active {
  color: var(--black) !important;
  text-decoration: underline;
}

/* Dropdown menus */
header#header nav.navbar .dropdown-menu {
  background-color: var(--primary-brand);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

header#header nav.navbar .dropdown-item {
  color: var(--link-on-dark);
}

header#header nav.navbar .dropdown-item:hover,
header#header nav.navbar .dropdown-item:focus {
  background-color: var(--primary-brand-dark);
  color: var(--white);
}

/* ============================================================
   Mobile toggler — white icon on dark background
   ============================================================ */
header#header nav.navbar .navbar-toggler-icon {
  filter: invert(1) grayscale(100%) brightness(200%);
}

header#header nav.navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Collapsed mobile menu background */
header#header .bg-white.to-be-collapsed,
header#header div.bg-white.pb-2 {
  background-color: var(--primary-brand) !important;
}

/* ============================================================
   Hero section (highlighted region, front page only)
   ============================================================ */
body.path-frontpage .highlighted {
  position: relative;
  background-image: url('https://api.library.tamu.edu/iiif/2/a4b6714b-7e05-3146-a174-b047bd396f48/full/full/0/default.jpg');
  background-size: cover;
  background-position: center;
  min-height: 400px;
  display: flex;
  align-items: center;
  padding: 0;
}

/* Dark overlay */
body.path-frontpage .highlighted::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* Keep content above overlay */
body.path-frontpage .highlighted > * {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Center text and search content */
body.path-frontpage .highlighted .section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--white);
  gap: 1.5rem;
  padding: 3rem 1.5rem;
}

body.path-frontpage .highlighted .section h1,
body.path-frontpage .highlighted .section h2,
body.path-frontpage .highlighted .section p {
  color: var(--white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  margin: 0;
}

/* Search bar inside hero */
body.path-frontpage .highlighted input[type="text"],
body.path-frontpage .highlighted input[type="search"] {
  max-width: 600px;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  border: none;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.path-frontpage .highlighted .form-item,
body.path-frontpage .highlighted form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1.title {
  color: var(--gray-900);
  padding: 1rem 1rem;
  font-size: 2rem;
}

.highlighted {
  padding-top: 0;
}

.card-body {
  color: var(--primary-brand);
  font-family: var(--oswald);
}

:root .archipelago-chiloe-theme .navbar-dark ul.dropdown-menu .dropdown-item a {
  color: white;
}

.front-page-content {
  padding-bottom: 3rem;
}

#navbar-top .navbar-nav {
  height: auto;
  align-items: center;
}

.hero-gradient {
  background: linear-gradient(
    135deg,
    rgba(80, 0, 0, 0.85),
    rgba(115, 47, 47, 0.85)   /* var(--primary-brand-light) with opacity */
  );
  border-radius: 15px;
}

header #block-tamu-theme-useraccountmenu a {
  color: white !important;
  font-size: 1rem !important;
}

/* Preserve AUX h3 styling */
h3 {
  font-family: var(--work-sans);
  font-weight: 600;
  color: var(--primary-brand-light);
  font-size: 1.6rem;
  line-height: 1.2;
}

/* ============================================================
   Facets — brand alignment and accessibility fixes
   ============================================================ */

/* Fix: date slider form-control had white text, making inputs invisible.
   Exclude submit buttons — they share the .form-control class but need white text. */
.facets-widget-sbf_range_date_slider .form-control:not([type="submit"]) {
  color: var(--gray-900) !important;
}

/* Update Facet button — match standard TAMU button (square, standard maroon, border) */
.block-facets input[type="submit"],
.block-facets button[type="submit"] {
  background: var(--primary-brand) !important;
  color: var(--white) !important;
  border: 2px solid var(--primary-brand-dark) !important;
  border-radius: 0 !important;
  font-family: var(--work-sans) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 0.65rem 2rem !important;
  width: 100% !important;
  transition: background 0.1s ease !important;
}

.block-facets input[type="submit"]:hover,
.block-facets button[type="submit"]:hover {
  background: var(--primary-brand-light) !important;
  color: var(--white) !important;
}

/* Fix: global slim.css span rule (font-style:italic; color:gray) bleeds into
   accordion headers and facet item labels — restore normal text rendering */
.block-facets .accordion-button span {
  font-style: normal !important;
  color: var(--white) !important;
  font-family: var(--oswald) !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
}

.block-facets .facet-item__value,
.block-facets .facet-item__count {
  font-style: normal;
  color: inherit;
  font-family: var(--open-sans);
}

.block-facets .facet-item__count {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875em;
  font-weight: 400;
}

/* Facet items: maroon background / white text at rest; darken on hover */
.block-facets .facet-item a {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  padding: 0.3rem 0.75rem;
  border-radius: 3px;
  margin-left: 0;
  background: var(--primary-brand);
  color: var(--white) !important;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease;
}

.block-facets .facet-item a:hover,
.block-facets .facet-item a:active {
  background: var(--primary-brand-dark);
  color: var(--white) !important;
  text-decoration: none;
}

.block-facets .facet-item a:focus {
  color: var(--white) !important;
  text-decoration: none;
  outline: none;
}

.block-facets .facet-item a:focus-visible {
  outline: 2px dotted var(--gold);
  outline-offset: 2px;
  background: var(--primary-brand-dark);
}

.block-facets .facet-item.is-active a {
  background: var(--primary-brand-dark);
  color: var(--white) !important;
  font-weight: 700;
}

/* Fix: Bootstrap Barrio sets 1rem top+bottom margin on each facet item —
   tighten spacing to match AUX compact list density */
:root .block-facets ul li.facet-item {
  margin-top: 0.125rem !important;
  margin-bottom: 0.125rem !important;
}

/* Accordion buttons: maroon background + white text in all states.
   Without background-color here, collapsed buttons revert to Bootstrap's
   white background and our white text becomes invisible. */
.block-facets .accordion-button,
.block-facets .accordion-button.collapsed {
  background-color: var(--primary-brand) !important;
  color: var(--white) !important;
  box-shadow: none;
}

/* Invert the Bootstrap chevron icon so it stays white on dark bg */
.block-facets .accordion-button::after {
  filter: brightness(0) invert(1);
}

.block-facets .accordion-button:hover,
.block-facets .accordion-button:focus {
  background-color: var(--primary-brand-dark) !important;
  color: var(--white) !important;
}

.block-facets .accordion-button:focus-visible {
  outline: 2px dotted var(--gold);
  outline-offset: -4px;
  box-shadow: none;
}


.aux-components {
  @import"https://fonts.googleapis.com/css2?family=Work+Sans:wght@100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap";@import"https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap";*{box-sizing:border-box}div,h2,p,a,img{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}:root{}p{font-family:"Open Sans",Arial,sans-serif;line-height:1.5;margin-bottom:1rem;font-size:1rem}a{color:#500000;text-decoration:underline;text-decoration-thickness:2px;font-weight:bold;transition:.2s ease;display:inline;font-size:inherit;font-family:inherit;line-height:inherit;position:relative;cursor:pointer}a:hover,a:focus,a:active{color:#732f2f;text-decoration:none}a:focus-visible{outline:dotted #af8846 2px;outline-offset:3px}.heading-group a:not(.tag){font-size:1.1rem;font-family:"Open Sans",Arial,sans-serif;display:inline-block}.heading-group a:not(.tag)::after{content:"";transition:.2s ease;display:inline-block;background-color:#500000;-webkit-mask-repeat:no-repeat;-webkit-mask-size:.8rem;-webkit-mask-position:bottom;mask-repeat:no-repeat;mask-position:bottom;mask-size:.8rem;width:1.1rem;height:1rem;-webkit-mask-image:url("https://aux.tamu.edu/icons/aux-prod-icons/angles-right.svg");mask-image:url("https://aux.tamu.edu/icons/aux-prod-icons/angles-right.svg");margin-left:.3rem}.heading-group a:not(.tag):hover::after,.heading-group a:not(.tag):focus::after,.heading-group a:not(.tag):active::after{background-color:#732f2f}.heading-group a:not(.tag){font-size:inherit;font-family:inherit;font-weight:inherit}[class*=elegant] .heading-group a:not(.tag){font-family:Georgia,Times,serif;font-size:1.25rem;display:inline-block}[class*=elegant] .heading-group a:not(.tag)::after{-webkit-mask-image:url("https://aux.tamu.edu/icons/aux-prod-icons/arrow-right-long.svg");mask-image:url("https://aux.tamu.edu/icons/aux-prod-icons/arrow-right-long.svg");margin-left:.3rem}[class*=elegant] .heading-group a:not(.tag):hover::after,[class*=elegant] .heading-group a:not(.tag):focus::after,[class*=elegant] .heading-group a:not(.tag):active::after{background-color:#732f2f}[class*=elegant] .heading-group a:not(.tag){font-size:inherit;font-family:inherit;font-weight:inherit}h2{font-family:"Oswald",Arial,sans-serif;font-weight:400;color:#500000;font-size:2rem;line-height:1.2}h2 a::after{mask-size:1.25rem;-webkit-mask-size:1.25rem;width:1.25rem;height:1.25rem}.card .heading-group h2{font-family:"Work Sans",Arial,sans-serif;font-weight:600;color:#732f2f;font-size:1.6rem;line-height:1.2}.card .heading-group h2 a::after{mask-size:1.1rem;-webkit-mask-size:1.1rem;width:1.1rem;height:1.1rem}[class*=elegant] .card .heading-group h2,.card--elegant .heading-group h2{font-family:Georgia,Times,serif;font-weight:400;color:#500000;font-size:2rem}[class*=elegant] .card .heading-group h2 a::after,.card--elegant .heading-group h2 a::after{mask-size:1.25rem;-webkit-mask-size:1.25rem;width:1.5rem;height:1.25rem}a h2{color:currentColor}.card{display:flex;flex-direction:column;word-wrap:break-word}.card .heading-group{margin-bottom:.3rem}.card .heading-group h2{color:#500000}.card p{margin-bottom:0;margin-top:0}.card .card__image{display:flex;width:100%;margin-bottom:.75rem}.card .card__image img{aspect-ratio:16/9;width:100%;max-width:100%;object-fit:cover}.card .card__image a{display:flex;clip-path:polygon(0% 0, 100% 0%, 100% 100%, 0 100%);width:100%}.card .card__image a::before{transition:.2s ease;position:absolute;content:"";display:block;width:100%;height:100%;outline:solid rgba(0,0,0,0) 8px;outline-offset:0px}.card .card__image a img{transition:.3s ease}.card .card__image a:hover img,.card .card__image a:active img{transform:scale(1.03);cursor:pointer}.card .card__image a:focus-visible{position:relative}.card .card__image a:focus-visible::before{outline:solid #af8846 8px;outline-offset:-8px}[tabindex="-1"]:focus{outline:none !important}
}

/* Hide the BEF sort-by dropdown — it leaks "Changed Descending" text into
   the hero search bar. The wrapper already has visually-hidden but the
   Bootstrap dropdown button escapes the clip via absolute positioning. */
.form-item-sort-bef-combine {
  display: none !important;
}

/* Fix Top Menu */
li.nav-item {
  margin-bottom: 9.6px !important;
}

a:hover {
  text-decoration: none;
}

body.scrolled .back-to-top {
  background-color: rgba(80, 0, 0, 0.85); /* var(--primary-brand) with opacity */
}

.form-checkbox.form-check-input:checked {
  background-color: rgba(80, 0, 0, 0.85); /* var(--primary-brand) with opacity */
  color: var(--white);
}

/* Skip link — high contrast on focus */
.skip-link {
  background-color: var(--primary-brand) !important;
  color: var(--white) !important;
}

/* Views display switcher links — parent theme sets color to transparent */
.views-display-link {
  color: var(--primary-brand) !important;
}

/* Breadcrumb — force left alignment (overrides chiloe justify-content: end) */
#main-breadcrumbs,
:root .archipelago-chiloe-theme #main-breadcrumbs {
  justify-content: flex-start !important;
}

#main-breadcrumbs nav[role="navigation"],
#main-breadcrumbs .breadcrumb {
  text-align: left;
}

.sr-only {
  background-color: var(--primary-brand) !important;
  color: var(--white) !important;
}

/* ============================================================
   Pager / pagination — TAMU brand treatment
   ============================================================ */

/* Fix global span italic/gray bleeding into "next ›" and "Last »" labels */
.pagination .page-link span {
  font-style: normal;
  color: inherit;
  font-family: var(--open-sans);
  font-weight: inherit;
}

/* Rest: maroon border + maroon text on white */
.pagination .page-link {
  color: var(--primary-brand);
  background-color: var(--white);
  border-color: var(--primary-brand);
  font-family: var(--open-sans);
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Active page: white text on maroon (already working, reinforce) */
.pagination .page-item.active .page-link {
  background-color: var(--primary-brand);
  border-color: var(--primary-brand-dark);
  color: var(--white);
}

/* Hover / focus: white text on maroon — clear, consistent, high contrast */
.pagination .page-link:hover,
.pagination .page-link:focus {
  background-color: var(--primary-brand);
  border-color: var(--primary-brand-dark);
  color: var(--white) !important;
  text-decoration: none;
}

.pagination .page-link:focus-visible {
  outline: 2px dotted var(--gold);
  outline-offset: 2px;
  box-shadow: none;
}