/*
 * Theme for CKAN 2.11 (Bootstrap 5.1), driven by the active branding bundle.
 *
 * This file holds no brand values. The --brand-* variables are written by
 * base.html from the bundle's branding.yml (see bundles.py):
 *
 *   header, header-dark   header bar and the account bar above it
 *   accent                decoration on the header (active navigation)
 *   primary               links and filled buttons; must reach WCAG AA
 *                         (4.5:1) against white
 *   primary-hover         hover/active state of primary
 *   tint                  homepage hero background
 *   surface, border       page background, panels, dividers
 *   text, text-secondary  body text, footer and caption text
 *   success, info, warning, danger
 *
 * Each colour also has a -rgb variant for translucent backgrounds.
 *
 * CKAN compiles many colours into its CSS, so besides the Bootstrap variables
 * this file overrides the selectors that hard-code CKAN's blue.
 */

:root {
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-success: var(--brand-success);
  --bs-success-rgb: var(--brand-success-rgb);
  --bs-info: var(--brand-info);
  --bs-info-rgb: var(--brand-info-rgb);
  --bs-warning: var(--brand-warning);
  --bs-warning-rgb: var(--brand-warning-rgb);
  --bs-danger: var(--brand-danger);
  --bs-danger-rgb: var(--brand-danger-rgb);
  --bs-font-sans-serif: var(--brand-font-body);
  --bs-body-font-family: var(--brand-font-body);
  --bs-body-color: var(--brand-text);
  --bs-body-color-rgb: var(--brand-text-rgb);
}

/* Typography ------------------------------------------------------------ */

body {
  font-family: var(--brand-font-body);
  color: var(--brand-text);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-heading,
.module-heading,
.media-heading {
  font-family: var(--brand-font-heading);
}

h1, .h1, .page-heading {
  font-weight: 700;
}

/* Links and interactive elements ---------------------------------------- */

a,
.btn-link,
.nav-link,
.page-header .nav-tabs li a,
.page-link {
  color: var(--brand-primary);
}

a:hover,
.btn-link:hover,
.nav-link:hover,
.nav-link:focus,
.page-header .nav-tabs li a:hover,
.page-header .nav-tabs li a:focus,
.page-link:hover,
.page-link:focus {
  color: var(--brand-primary-hover);
}

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
  color: #fff;
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary {
  color: #fff;
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

.btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #fff;
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-danger {
  background-color: var(--brand-danger);
  border-color: var(--brand-danger);
}

.btn:focus,
.btn-check:focus + .btn,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.page-link:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.3);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.page-item.active .page-link,
.list-group-item.active,
.dropdown-item.active,
.dropdown-item:active,
.progress-bar {
  color: #fff;
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.view-list li a.active,
.view-list li a:hover,
.view-list li.active a,
.view-list li a.active .icon,
.view-list li a:hover .icon,
.view-list li.active a .icon {
  background-color: var(--brand-primary);
}

.view-list li .arrow {
  border-top-color: var(--brand-primary);
}

.media-view:hover,
.media-view.hovered {
  border-color: var(--brand-primary);
}

/* Account bar (top strip) ------------------------------------------------ */

.account-masthead {
  background: var(--brand-header-dark);
}

.account-masthead .container {
  display: flex;
  align-items: center;
}

.account-masthead .account {
  margin-left: auto;
}

.account-masthead .account ul li {
  border-left-color: rgba(255, 255, 255, 0.12);
}

.account-masthead .account ul li a,
.account-masthead .account ul li .btn-link {
  color: rgba(255, 255, 255, 0.85);
}

.account-masthead .account ul li a:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}

.d4c-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 31px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.d4c-back-link:hover,
.d4c-back-link:focus {
  color: #fff;
  text-decoration: underline;
}

/* Header ------------------------------------------------------------------ */

.masthead {
  background: var(--brand-header);
}

.masthead .navbar {
  min-height: 64px;
  padding-top: 0;
  padding-bottom: 0;
}

.masthead hgroup {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}

.masthead .navbar .logo img {
  height: 36px;
  width: auto;
  max-height: 36px;
}

.d4c-divider {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.3);
}

.d4c-portal-name {
  font-family: var(--brand-font-heading);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.masthead .main-navbar ul li a {
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 2px solid transparent;
}

.masthead .main-navbar ul li:hover a,
.masthead .main-navbar ul li:focus a,
.masthead .main-navbar ul li a:hover,
.masthead .main-navbar ul li a:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}

.masthead .main-navbar ul li.active a {
  color: #fff;
  background: none;
  border-bottom-color: var(--brand-accent);
}

/* Page background --------------------------------------------------------- */

.main,
.homepage .module-feeds {
  background: var(--brand-surface);
}

/* Homepage -------------------------------------------------------------- */

.homepage .hero {
  background: var(--brand-tint);
}

.homepage .module-search .search-form {
  background-color: var(--brand-header);
}

.homepage .module-search .tags {
  background-color: var(--brand-header-dark);
}

.d4c-tagline {
  font-family: var(--brand-font-heading);
  color: var(--brand-primary);
  font-weight: 700;
}

/* Content modules ------------------------------------------------------- */

.module-heading {
  background-color: var(--brand-surface);
  border-color: var(--brand-border);
}

/* Feedback -------------------------------------------------------------- */

.alert-success,
.alert-info,
.alert-warning,
.alert-danger,
.alert-error {
  color: var(--brand-text);
}

.alert-success {
  background-color: rgba(var(--brand-success-rgb), 0.1);
  border-color: var(--brand-success);
}

.alert-info {
  background-color: rgba(var(--brand-info-rgb), 0.1);
  border-color: var(--brand-info);
}

.alert-warning {
  background-color: rgba(var(--brand-warning-rgb), 0.12);
  border-color: var(--brand-warning);
}

.alert-danger,
.alert-error {
  background-color: rgba(var(--brand-danger-rgb), 0.1);
  border-color: var(--brand-danger);
}

/* Footer ---------------------------------------------------------------- */

.site-footer {
  background: var(--brand-surface);
  border-top: 1px solid var(--brand-border);
  padding: 24px 0;
  font-size: 0.8125rem;
  color: var(--brand-text-secondary);
}

.site-footer a {
  color: var(--brand-text-secondary);
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--brand-primary);
}

.d4c-footer p {
  margin: 0 0 4px;
}

.d4c-footer-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-weight: 600;
}

.site-footer .d4c-footer-back {
  color: var(--brand-primary);
}

.d4c-footer-links {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 8px;
}

.d4c-footer-links li + li::before,
.d4c-footer-copy span + span::before {
  content: "\00b7";
  margin: 0 8px;
}

.d4c-footer-eu,
.d4c-footer-copy {
  font-size: 0.75rem;
}

.d4c-footer .lang-select {
  margin-top: 12px;
  max-width: 280px;
}

.site-footer .lang-select label {
  color: var(--brand-text-secondary);
}