/* Dare Digital Library institutional theme.
 * Injected into the DSpace UI shell (see Dockerfile.angular) and bind-mounted
 * at runtime via BRANDING_DIR (see docker-compose.yml / README.md
 * "Branding"), so this file can change with just a container restart — no
 * image rebuild needed.
 *
 * Palette: teal primary, gold accent.
 */

:root {
  --ct-primary: #0e6e8c;
  --ct-primary-dark: color-mix(in srgb, #0e6e8c 75%, black);
  --ct-primary-soft: color-mix(in srgb, #0e6e8c 12%, white);
  --ct-accent: #d9a62e;
  --ct-accent-dark: color-mix(in srgb, #d9a62e 75%, black);

  /* Bootstrap */
  --bs-primary: var(--ct-primary);
  --bs-link-color: var(--ct-primary);
  --bs-link-hover-color: var(--ct-primary-dark);

  /* DSpace header / navbar */
  --ds-header-bg: var(--ct-primary);
  --ds-header-navbar-border-bottom-color: var(--ct-accent);
  --ds-header-icon-color: #ffffff;
  --ds-header-icon-color-hover: var(--ct-accent);
  --ds-navbar-bg: var(--ct-primary);
  --ds-expandable-navbar-bg: var(--ct-primary-dark);

  /* DSpace footer */
  --ds-footer-bg: var(--ct-primary-dark);
  --ds-top-footer-bg: var(--ct-primary-dark);

  /* Misc */
  --ds-breadcrumb-bg: var(--ct-primary-soft);
}

/* Buttons */
.btn-primary {
  background-color: var(--ct-primary);
  border-color: var(--ct-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--ct-primary-dark);
  border-color: var(--ct-primary-dark);
}
.btn-outline-primary {
  color: var(--ct-primary);
  border-color: var(--ct-primary);
}
.btn-outline-primary:hover {
  background-color: var(--ct-primary);
  border-color: var(--ct-primary);
  color: #fff;
}

/* Links, text, backgrounds */
a { color: var(--ct-primary); }
a:hover { color: var(--ct-primary-dark); }
.badge.bg-primary, .badge-primary { background-color: var(--ct-primary) !important; }
.text-primary { color: var(--ct-primary) !important; }
.bg-primary { background-color: var(--ct-primary) !important; }

/* Header / footer (element selectors, not just CSS vars, since some
 * DSpace styling is baked in with a specificity the vars alone don't win) */
ds-themed-header header, ds-header header {
  background-color: var(--ct-primary);
}
ds-themed-footer footer, ds-footer footer {
  background-color: var(--ct-primary-dark);
}
ds-themed-footer footer a, ds-footer footer a,
ds-themed-footer footer .btn-link, ds-footer footer .btn-link {
  color: #fff;
}
ds-themed-footer footer a:hover, ds-footer footer a:hover,
ds-themed-footer footer .btn-link:hover, ds-footer footer .btn-link:hover {
  color: var(--ct-accent);
}

/* Form focus ring in brand color */
.form-control:focus {
  border-color: var(--ct-primary);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ct-primary) 25%, transparent);
}

/* Homepage banner (ds-home-news / the "home-news-content" block) —
 * teal-to-navy gradient with a gold accent under each heading, matching the
 * Dare brand mark. */
.home-news-content {
  background: linear-gradient(135deg, var(--ct-primary) 0%, #123044 100%);
  color: #fff;
}
.home-news-content a {
  color: #fff;
  text-decoration: underline;
}
.home-news-content a:hover {
  color: var(--ct-accent);
}
.home-news-content .lead {
  color: rgba(255, 255, 255, 0.85);
}

/* Gold underline under top-footer column headings, if/when the top footer
 * is enabled */
footer .top-footer h5 {
  position: relative;
  padding-bottom: 0.5rem;
}
footer .top-footer h5::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 3px;
  background-color: var(--ct-accent);
}