/*
 * DSPACE-UH R3
 * Home parity remediation based on recovered Legacy visual contract.
 * Golden Angular bundles remain untouched.
 */

/* =========================================================
   HEADER
   ========================================================= */

.uh-header-logo {
  display: block;
  width: auto !important;
  max-width: min(360px, 70vw) !important;
  max-height: 88px !important;
  object-fit: contain;
}

/* =========================================================
   GLOBAL NAV
   ========================================================= */

#uh-nav-howto .nav-link,
a#uh-nav-howto-link {
  white-space: nowrap;
}

/* =========================================================
   HOME
   ========================================================= */

body.uh-home ds-home-news,
body.uh-home ds-home-news .jumbotron,
body.uh-home ds-home-news .credits {
  display: none !important;
}

body.uh-home #main-content {
  background: #ffffff;
}

.uh-home-shell {
  display: block;
  padding: 1.25rem 0 2.75rem;
}

.uh-home-search-wrap {
  margin: 0 auto 2rem;
  max-width: 1140px;
  padding: 0 1rem;
}

.uh-home-search-panel {
  background: #10a0d6;
  border-radius: 0.25rem;
  padding: 2.25rem 2rem;
}

.uh-home-search-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.uh-home-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  border: none;
  border-radius: 0;
  padding: 0 1rem;
  font-size: 1.15rem;
  outline: none;
}

.uh-home-search-button {
  flex: 0 0 58px;
  width: 58px;
  height: 56px;
  border: none;
  border-radius: 0;
  background: #ff1f17;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.uh-home-title {
  margin: 0 0 2rem;
  text-align: center;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.1;
  color: #213b84;
  font-weight: 500;
}

.uh-home-cards {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1rem;
}

.uh-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.uh-card-column {
  min-width: 0;
}

.uh-home-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.uh-home-card:hover,
.uh-home-card:focus {
  text-decoration: none;
  color: inherit;
}

.uh-home-card-box {
  border: 1px solid rgba(32, 60, 132, 0.45);
  border-radius: 0.3rem;
  background: #fff;
  overflow: hidden;
  min-height: 92px;
}

.uh-home-card-image {
  width: 100%;
  min-height: 92px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #ffffff;
}

.uh-home-card-title {
  display: block;
  margin-top: 1rem;
  text-align: center;
  color: #213b84;
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700;
}

/* =========================================================
   SAPIENCIA /procedi
   ========================================================= */

.uh-hidden-for-procedi {
  display: none !important;
}

.uh-procedi-page {
  display: block;
  padding: 1.5rem 0 3rem;
}

.uh-procedi-content {
  max-width: 1000px;
  margin: 0 auto;
}

.uh-procedi-content h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
}

.uh-procedi-content h2 {
  margin: 0 0 2rem;
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  line-height: 1.45;
  font-weight: 500;
}

.uh-procedi-content h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.uh-procedi-content ul {
  padding-left: 1.5rem;
}

.uh-procedi-content li {
  margin: 0.65rem 0;
  line-height: 1.7;
}

.uh-procedi-content a {
  font-weight: 600;
}

/* =========================================================
   FOOTER
   ========================================================= */

.uh-footer-brand {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1.2rem 1rem;
}

.uh-footer-brand a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.uh-footer-logo {
  display: block;
  width: auto;
  max-width: min(300px, 75vw);
  max-height: 90px;
  object-fit: contain;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
  .uh-card-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .uh-home-search-panel {
    padding: 1.5rem 1rem;
  }
}

@media (max-width: 575.98px) {
  .uh-header-logo {
    max-height: 60px !important;
  }

  .uh-home-search-input {
    font-size: 1rem;
  }

  .uh-home-card-title {
    font-size: 1.05rem;
  }

  .uh-procedi-page {
    padding-top: 1rem;
  }
}

/* =========================================================
   R4 FINAL VISUAL DELTA
   ========================================================= */

/*
 * Cómo Publicar must live inside the same navigation row
 * as Comunidades / Todo DSpace / Estadísticas.
 */
#uh-nav-howto {
  display: list-item !important;
  position: static !important;
  float: none !important;
  margin: 0 !important;
}

#uh-nav-howto > a,
#uh-nav-howto-link {
  display: block !important;
  position: static !important;
  margin: 0 !important;
  white-space: nowrap;
}

/*
 * Legacy footer: UH logo over the dark footer area,
 * aligned left with restrained proportions.
 */
.uh-footer-brand {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;

  width: 100% !important;
  box-sizing: border-box !important;

  margin: 0 !important;
  padding: 0.85rem max(1rem, calc((100% - 1140px) / 2)) !important;

  background: #202020 !important;
}

.uh-footer-brand a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.uh-footer-logo {
  display: block !important;

  width: auto !important;
  max-width: min(285px, 72vw) !important;
  max-height: 76px !important;

  object-fit: contain !important;
}

@media (max-width: 575.98px) {
  .uh-footer-brand {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .uh-footer-logo {
    max-width: min(240px, 75vw) !important;
    max-height: 68px !important;
  }
}


/* =========================================================
   R8 — exact live DOM header logo
   Real DOM:
   #main-site-header #header-left img#header-logo
   ========================================================= */

#main-site-header #header-left img#header-logo.uh-header-logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-height: 50px !important;
  max-width: 260px !important;
  object-fit: contain !important;
}

@media (max-width: 575.98px) {
  #main-site-header #header-left img#header-logo.uh-header-logo {
    max-height: 50px !important;
    max-width: 210px !important;
  }
}


/* =========================================================
   R9 — Sapiencia legacy logo visibility
   Compact cyan background ONLY around the logo link.
   Header structure / navbar / right controls remain untouched.
   ========================================================= */

#main-site-header #header-left > a:has(img#header-logo.uh-header-logo) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #19a9cf !important;
  padding: 5px 10px !important;
  margin-right: 14px !important;
  border-radius: 0 !important;
  min-height: 60px !important;
  box-sizing: border-box !important;
}

#main-site-header #header-left img#header-logo.uh-header-logo {
  display: block !important;
  width: auto !important;
  height: 50px !important;
  max-height: 50px !important;
  max-width: 180px !important;
  object-fit: contain !important;
  margin: 0 !important;
}

@media (max-width: 575.98px) {
  #main-site-header #header-left > a:has(img#header-logo.uh-header-logo) {
    padding: 4px 7px !important;
    min-height: 54px !important;
    margin-right: 8px !important;
  }

  #main-site-header #header-left img#header-logo.uh-header-logo {
    height: 44px !important;
    max-height: 44px !important;
    max-width: 150px !important;
  }
}


/* ============================================================
   R10 — LEGACY UH HEADER PARITY

   Legacy evidence:
   TOP:  cyan #019ad4
         Sapiencia left
         search / language / auth right

   BOTTOM: white navbar
           Comunidades / Todo DSpace / Estadísticas / Cómo Publicar

   Current Angular DOM is preserved.
   NO NODE MOVEMENT.
   ============================================================ */


/* ---- Full header: two visual rows ---- */

#main-site-header {
  background:
    linear-gradient(
      to bottom,
      #019ad4 0,
      #019ad4 80px,
      #ffffff 80px,
      #ffffff 129px
    ) !important;

  min-height: 129px !important;
  height: 129px !important;
}


/* ---- Existing container becomes 2-row grid ---- */

#main-site-header #main-site-header-container {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  grid-template-rows:
    80px
    49px !important;

  align-items: center !important;

  min-height: 129px !important;
  height: 129px !important;

  gap: 0 !important;
}


/*
  header-left currently owns BOTH:
    - Sapiencia anchor
    - desktop-navbar

  display:contents lets those existing Angular children
  participate in the parent grid without moving DOM nodes.
*/

#main-site-header #header-left {
  display: contents !important;
}


/* ============================================================
   ROW 1 — SAPIENCIA
   ============================================================ */

#main-site-header #header-left > a {
  grid-column: 1 !important;
  grid-row: 1 !important;

  align-self: center !important;
  justify-self: start !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  background: transparent !important;

  padding: 0 !important;
  margin: 0 !important;

  min-height: 0 !important;
}


/* R9 compact-background is intentionally overridden */

#main-site-header #header-left > a:has(img#header-logo.uh-header-logo) {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}


/* Sapiencia logo */

#main-site-header #header-left img#header-logo.uh-header-logo {
  display: block !important;

  width: auto !important;
  height: 64px !important;

  max-height: 64px !important;
  max-width: 280px !important;

  object-fit: contain !important;

  margin: 0 !important;
}


/* ============================================================
   ROW 1 — SEARCH / LANGUAGE / LOGIN
   ============================================================ */

#main-site-header #header-right {
  grid-column: 2 !important;
  grid-row: 1 !important;

  align-self: center !important;
  justify-self: end !important;

  display: flex !important;
  align-items: center !important;

  margin: 0 !important;
}


/* Match Legacy white controls on cyan header */

#main-site-header #header-right,
#main-site-header #header-right a,
#main-site-header #header-right button,
#main-site-header #header-right i,
#main-site-header #header-right em,
#main-site-header #header-right .submit-icon,
#main-site-header #header-right .dropdown-toggle,
#main-site-header #header-right .loginLink,
#main-site-header #header-right .dropdownLogin,
#main-site-header #header-right .logoutLink,
#main-site-header #header-right .dropdownLogout {
  color: #ffffff !important;
}


/* ============================================================
   ROW 2 — WHITE NAVIGATION
   ============================================================ */

#main-site-header #header-left > nav#desktop-navbar {
  grid-column: 1 / 3 !important;
  grid-row: 2 !important;

  align-self: stretch !important;

  display: flex !important;
  align-items: center !important;

  width: 100% !important;
  height: 49px !important;

  background: #ffffff !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}


/* Existing navigation links stay intact */

#main-site-header #desktop-navbar .navbar-nav {
  align-items: center !important;
}


/* Keep original link colors */

#main-site-header #desktop-navbar a.nav-link {
  color: var(--ds-navbar-link-color) !important;
}

#main-site-header #desktop-navbar a.nav-link:hover,
#main-site-header #desktop-navbar a.nav-link:focus {
  color: var(--ds-navbar-link-color-hover) !important;
}


/* ============================================================
   MOBILE SAFETY
   ============================================================ */

@media (max-width: 767.98px) {

  #main-site-header {
    height: auto !important;
    min-height: 80px !important;

    background: #019ad4 !important;
  }

  #main-site-header #main-site-header-container {
    display: flex !important;
    min-height: 80px !important;
    height: auto !important;
  }

  #main-site-header #header-left {
    display: flex !important;
  }

  #main-site-header #header-left img#header-logo.uh-header-logo {
    height: 54px !important;
    max-height: 54px !important;
    max-width: 220px !important;
  }

  #main-site-header #header-left > nav#desktop-navbar {
    display: none !important;
  }
}


/* ============================================================
   R11 — exact Legacy vertical geometry

   Legacy:
     header cyan = 129px
     navbar white = separate lower row

   Current DOM keeps both inside #main-site-header,
   therefore total visual height = 129px + 49px = 178px.
   ============================================================ */

#main-site-header {
  background:
    linear-gradient(
      to bottom,
      #019ad4 0,
      #019ad4 129px,
      #ffffff 129px,
      #ffffff 178px
    ) !important;

  min-height: 178px !important;
  height: 178px !important;
}

#main-site-header #main-site-header-container {
  grid-template-rows:
    129px
    49px !important;

  min-height: 178px !important;
  height: 178px !important;
}

/* Legacy logo remained constrained by --ds-header-logo-height:50px */

#main-site-header #header-left img#header-logo.uh-header-logo {
  width: auto !important;
  height: 50px !important;
  max-height: 50px !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* Mobile safety remains compact */

@media (max-width: 767.98px) {
  #main-site-header {
    height: auto !important;
    min-height: 80px !important;
    background: #019ad4 !important;
  }

  #main-site-header #main-site-header-container {
    height: auto !important;
    min-height: 80px !important;
  }

  #main-site-header #header-left img#header-logo.uh-header-logo {
    height: 50px !important;
    max-height: 50px !important;
  }
}


/* ============================================================
   R12 — Sapiencia logo scale tuning ONLY

   Preserve:
     cyan row     = 129px
     navbar row   = 49px
     total        = 178px

   Change:
     visible Sapiencia logo from 50px to 64px height.

   No DOM movement.
   No header-right changes.
   No navbar changes.
   ============================================================ */

#main-site-header #header-left img#header-logo.uh-header-logo {
  display: block !important;

  width: auto !important;

  height: 64px !important;
  max-height: 64px !important;

  max-width: 280px !important;

  object-fit: contain !important;

  margin: 0 !important;
}


/* Keep logo centered in the 129px Legacy cyan row */

#main-site-header #header-left > a:has(img#header-logo.uh-header-logo) {
  align-self: center !important;
  justify-self: start !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: flex-start !important;

  height: auto !important;

  background: transparent !important;

  padding: 0 !important;
  margin: 0 !important;

  min-height: 0 !important;
}


/* Mobile stays compact */

@media (max-width: 767.98px) {

  #main-site-header #header-left img#header-logo.uh-header-logo {
    height: 54px !important;
    max-height: 54px !important;
    max-width: 220px !important;
  }

}

/* ============================================================
   R13 — authenticated profile dropdown contrast fix ONLY

   R10/R11/R12 intentionally force header controls to white
   against the cyan header. The profile dropdown itself has a
   white background, therefore dropdown links must return to
   dark text inside that menu.

   No DOM changes.
   No geometry changes.
   No logo changes.
   No navbar changes.
   ============================================================ */

#main-site-header #header-right .dropdown-menu,
#main-site-header #header-right [ngbDropdownMenu] {
  color: #212529 !important;
}

#main-site-header #header-right .dropdown-menu a,
#main-site-header #header-right .dropdown-menu button,
#main-site-header #header-right .dropdown-menu .dropdown-item,
#main-site-header #header-right [ngbDropdownMenu] a,
#main-site-header #header-right [ngbDropdownMenu] button,
#main-site-header #header-right [ngbDropdownMenu] .dropdown-item {
  color: #212529 !important;
}

#main-site-header #header-right .dropdown-menu a:hover,
#main-site-header #header-right .dropdown-menu a:focus,
#main-site-header #header-right .dropdown-menu .dropdown-item:hover,
#main-site-header #header-right .dropdown-menu .dropdown-item:focus,
#main-site-header #header-right [ngbDropdownMenu] a:hover,
#main-site-header #header-right [ngbDropdownMenu] a:focus {
  color: #212529 !important;
  background-color: #f8f9fa !important;
}