/* ═══════════════════════════════════════════════════════════════════════
   HAND AUFS HERZ  –  Landing page styles
   Green theme throughout (no Bootstrap blue)
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --hah-green:      #00883A;
  --hah-green-dark: #006d2e;
  --hah-green-soft: rgba(0,136,58,.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO HEADER
   ═══════════════════════════════════════════════════════════════════════ */
.hah-hero-header{
  background: linear-gradient(135deg, var(--hah-green), var(--hah-green-dark));
}
.hah-hero-row .min-w-0{ min-width: 0; }
.hah-title{ line-height: 1; }

/* Institutions badge */
.hah-badge{
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-weight: 600;
}

/* Action pills */
.hah-btn{ border-radius: 999px; }

/* ── Tabs in hero ── */
.hah-tabs{
  gap: .7rem;
}
.hah-hero-header .hah-tabs .nav-link{
  padding: .45rem .9rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff !important;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  line-height: 1.1;
}
.hah-hero-header .hah-tabs .nav-link i{
  color: currentColor;
}
.hah-hero-header .hah-tabs .nav-link:hover{
  background: rgba(255,255,255,.16);
  color: #fff !important;
}
.hah-hero-header .hah-tabs .nav-link.active{
  background: #fff;
  color: var(--hah-green) !important;
  border-color: #fff;
}
.hah-hero-header .hah-tabs .nav-link:focus{
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.35);
}

/* Action buttons */
.hah-hero-actions{
  margin-top: .4rem;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 768px){
  .hah-hero-actions{
    width: 100%;
    justify-content: flex-start !important;
    white-space: normal;
  }
}
@media (max-width: 576px){
  .hah-title-row{ gap: .75rem; }
}
.hah-title-row .hah-tabs{
  margin-left: 10rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL OVERRIDES  –  Bootstrap blue → HaH green
   Applied inside the tab-content area so we don't break unrelated pages
   ═══════════════════════════════════════════════════════════════════════ */

/* Override .text-primary everywhere inside tab content */
.tab-content .text-primary,
.hah-publications .text-primary{
  color: var(--hah-green) !important;
}

/* Overview section heading icons  (h5 > i.text-primary) */
.tab-content h5 .text-primary,
.tab-content h3 .text-primary{
  color: var(--hah-green) !important;
}

/* Section heading border  –  green accent instead of default */
.tab-content h3.border-bottom,
.tab-content h5.border-bottom{
  border-bottom-color: var(--hah-green) !important;
}

/* Links inside tab content */
.tab-content a:not(.btn):not(.nav-link):not(.hah-pub-doi):not(.hah-press-card){
  color: var(--hah-green);
}
.tab-content a:not(.btn):not(.nav-link):not(.hah-pub-doi):not(.hah-press-card):hover{
  color: var(--hah-green-dark);
}

/* Bootstrap .btn-primary → green */
.tab-content .btn-primary{
  background-color: var(--hah-green);
  border-color: var(--hah-green);
}
.tab-content .btn-primary:hover,
.tab-content .btn-primary:focus{
  background-color: var(--hah-green-dark);
  border-color: var(--hah-green-dark);
}

/* Bootstrap .btn-outline-primary → green */
.tab-content .btn-outline-primary{
  color: var(--hah-green);
  border-color: var(--hah-green);
}
.tab-content .btn-outline-primary:hover,
.tab-content .btn-outline-primary:focus{
  background-color: var(--hah-green);
  border-color: var(--hah-green);
  color: #fff;
}

/* Badge .bg-primary → green */
.tab-content .bg-primary{
  background-color: var(--hah-green) !important;
}

/* Alert .alert-primary → soft green */
.tab-content .alert-primary{
  background-color: rgba(0,136,58,.08);
  border-color: rgba(0,136,58,.2);
  color: var(--hah-green-dark);
}

/* Focus rings → green */
.tab-content .form-control:focus,
.tab-content .form-select:focus{
  border-color: var(--hah-green);
  box-shadow: 0 0 0 .2rem rgba(0,136,58,.25);
}


/* ═══════════════════════════════════════════════════════════════════════
   OVERVIEW TAB  –  refine section spacing to match publications
   ═══════════════════════════════════════════════════════════════════════ */

/* Section heading icon colour (catches inline .text-primary on <i>) */
.tab-content h3 > i,
.tab-content h5 > i{
  color: var(--hah-green) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   PUBLICATIONS TAB
   ═══════════════════════════════════════════════════════════════════════ */

.hah-publications{
  min-height: 60vh;
}

/* Header */
.hah-pub-title{
  font-size: 1.85rem;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -.02em;
  margin-bottom: .35rem;
  line-height: 1;
}
.hah-pub-subtitle{
  color: #5a5a5a;
  font-size: 1.02rem;
  max-width: 48ch;
  margin-bottom: 1.5rem;
}

/* Filter pills */
.hah-pub-filters{
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
.hah-pub-filter{
  display: inline-flex;
  align-items: center;
  padding: .45rem 1rem;
  font-size: .92rem;
  font-weight: 600;
  border: 1.5px solid #d0d0d0;
  border-radius: 999px;
  background: #fff;
  color: #444;
  cursor: pointer;
  line-height: 1.1;
  transition: all .2s ease;
}
.hah-pub-filter:hover{
  border-color: var(--hah-green);
  color: var(--hah-green);
  background: rgba(0,136,58,.04);
}
.hah-pub-filter.active{
  background: var(--hah-green);
  border-color: var(--hah-green);
  color: #fff;
}

/* Section blocks */
.hah-pub-section{
  margin-bottom: 2.8rem;
}
.hah-pub-section-header{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #dee2e6;
}
.hah-pub-section-header h3{
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}
.hah-pub-section-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hah-green);
  font-size: 1.15rem;
  flex-shrink: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}
.hah-pub-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--hah-green-soft);
  color: var(--hah-green);
  font-size: .75rem;
  font-weight: 700;
  margin-left: auto;
}

/* Publication list */
.hah-pub-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.hah-pub-item{
  display: flex;
  gap: 1rem;
  padding: 1rem 1.15rem;
  margin-bottom: .5rem;
  background: #fff;
  border-radius: .5rem;
  border: 1px solid #e8e8e8;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.hah-pub-item:hover{
  border-color: rgba(0,136,58,.3);
  box-shadow: 0 2px 10px rgba(0,136,58,.07);
}
.hah-pub-item--compact{
  padding: .75rem 1rem;
  margin-bottom: .35rem;
}

/* Year badge */
.hah-pub-year-badge{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--hah-green-soft);
  color: var(--hah-green);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.hah-pub-content{
  flex: 1;
  min-width: 0;
}
.hah-pub-authors{
  font-size: .82rem;
  color: #666;
  margin-bottom: .3rem;
  line-height: 1.45;
}
.hah-pub-article-title{
  font-size: .95rem;
  font-weight: 650;
  color: #1a1a1a;
  margin-bottom: .25rem;
  line-height: 1.4;
}
.hah-pub-journal{
  font-size: .84rem;
  color: #555;
  margin-bottom: .3rem;
}

/* DOI link */
.hah-pub-doi{
  display: inline-flex;
  align-items: center;
  font-size: .8rem;
  font-weight: 600;
  color: var(--hah-green);
  text-decoration: none;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: rgba(0,136,58,.06);
  border: 1px solid rgba(0,136,58,.12);
  transition: background .15s ease, border-color .15s ease;
}
.hah-pub-doi:hover{
  background: rgba(0,136,58,.14);
  border-color: rgba(0,136,58,.3);
  color: var(--hah-green-dark);
  text-decoration: none;
}

/* Conference grouping */
.hah-conf-group{
  margin-bottom: 1.5rem;
}
.hah-conf-venue{
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: .65rem;
  padding-left: .15rem;
}
.hah-conf-dot{
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--hah-green);
  flex-shrink: 0;
}
.hah-conf-location{
  font-weight: 400;
  color: #888;
}
.hah-conf-talks{
  padding-left: 1.2rem;
  border-left: 2px solid rgba(0,136,58,.15);
}

/* Press / media cards */
.hah-press-card{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: .5rem;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.hah-press-card:hover{
  border-color: rgba(0,136,58,.35);
  box-shadow: 0 4px 14px rgba(0,136,58,.09);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.hah-press-source{
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hah-green);
}
.hah-press-headline{
  font-size: .92rem;
  font-weight: 650;
  color: #1a1a1a;
  line-height: 1.35;
  flex: 1;
}
.hah-press-date{
  font-size: .78rem;
  color: #888;
}

/* TV cards */
.hah-tv-card{
  position: relative;
  border-left: 3px solid var(--hah-green);
}
.hah-tv-play{
  font-size: 1.4rem;
  color: var(--hah-green);
  margin-bottom: .15rem;
}

/* Fade-in animation */
@keyframes hahPubFade{
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hah-pub-fadein{
  animation: hahPubFade .3s ease both;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE  –  Mobile layout
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Tabs: 2×2 grid ── */
  .hah-hero-header ul.hah-tabs.nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-left: 0 !important;
  }
  .hah-hero-header .hah-tabs .nav-link {
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    padding: 8px 10px;
  }
  .hah-hero-header .hah-tabs .nav-link i {
    display: none;
  }

  /* ── Hero layout: stack vertically ── */
  .hah-hero-row {
    flex-direction: column !important;
  }
  .hah-title-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem;
  }
  .hah-title-row .hah-tabs {
    margin-left: 0 !important;
  }
  .hah-title {
    font-size: 1.4rem;
  }

  /* ── Publications (existing rules) ── */
  .hah-pub-item {
    flex-direction: column;
    gap: .5rem;
  }
  .hah-pub-year-badge {
    align-self: flex-start;
  }
  .hah-pub-title {
    font-size: 1.45rem;
  }
  .hah-pub-filters {
    gap: .35rem;
  }
  .hah-pub-filter {
    font-size: .82rem;
    padding: .35rem .75rem;
  }
}

@media (max-width: 576px) {
  .hah-pub-filters {
    gap: .3rem;
  }
}

@media (max-width: 991.98px) {
  .hah-hero-actions {
    display: none !important;
  }
}

/* ── Sticky tab bar (appears on scroll) ── */
.hah-sticky-tabs {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: linear-gradient(135deg, var(--hah-green), var(--hah-green-dark));
  padding: 10px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  animation: hahSlideDown 0.25s ease;
}

@keyframes hahSlideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* Inherit the same tab styling */
.hah-sticky-tabs .hah-tabs .nav-link {
  padding: .45rem .9rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff !important;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
}
.hah-sticky-tabs .hah-tabs .nav-link:hover {
  background: rgba(255,255,255,.16);
}
.hah-sticky-tabs .hah-tabs .nav-link.active {
  background: #fff;
  color: var(--hah-green) !important;
  border-color: #fff;
}

/* ── Mobile: 2×2 grid for sticky tabs too ── */
@media (max-width: 768px) {
  .hah-sticky-tabs ul.hah-tabs.nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .hah-sticky-tabs .hah-tabs .nav-link {
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    padding: 8px 10px;
  }
  .hah-sticky-tabs .hah-tabs .nav-link i {
    display: none;
  }
}

/* ── Emoji-safe font for dashboard icons ── */
.hah-hero,
.hah-hero-header,
.card-header,
.hah-sticky-tabs {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif;
}