/*
 * BONAFIDE — Institutional Research Design
 *
 * IKF Brand:
 * Slate    #4B5F78
 * Teal     #659F8C
 * Ink      #00283C
 * Sage     #BEDCD2
 * Body     #2C3A42
 * Muted    #8A97A7
 */


/* ═══════════════════════════════════════════════
   Color Scheme Override
   ═══════════════════════════════════════════════ */

.color_alternate {
  --color-alt-content-link: #4B5F78;
  --color-alt-content-link-hover: #659F8C;
  --color-alt-content-primary: #4B5F78;
  --color-alt-content-primary-grad: #4B5F78;
  --color-alt-content-secondary: #659F8C;
  --color-alt-content-secondary-grad: #659F8C;
  --color-alt-content-heading: #2C3A42;
  --color-alt-content-heading-grad: #2C3A42;
  --color-alt-content-overlay: rgba(75,95,120,0.85);
  --color-alt-content-overlay-grad: rgba(75,95,120,0.85);
}

.color_alternate a:not(.w-btn):not([class*="w-nav"]):not([class*="w-header"]) {
  color: #4B5F78;
}
.color_alternate a:not(.w-btn):not([class*="w-nav"]):not([class*="w-header"]):not(.w-btn-link):hover {
  color: #659F8C;
  text-decoration: underline;
}

/* Exclude button-styled links from underline */
.color_alternate .w-btn:hover,
.color_alternate .bonafide-study-card a:hover,
.color_alternate a[class*="w-btn"]:hover {
  text-decoration: none !important;
}

/* Nav links — underline on hover */
.w-text-h:hover {
  text-decoration: underline !important;
}

/* All content links — underline on hover (excl. buttons, nav) */
main a:not(.w-btn):not([class*="w-nav"]):not([class*="w-header"]):not([class*="w-btn"]):hover {
  text-decoration: underline;
}


/* ═══════════════════════════════════════════════
   Smooth Scroll
   ═══════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
}

/* Hide empty <p> that WP inserts from HTML comments */
main > p:first-child:empty,
main > p:first-child:not([class]) {
  display: none !important;
}


/* ═══════════════════════════════════════════════
   Eyebrow Labels → H2 Spacing

   The small uppercase label paragraphs (set via
   inline style) have margin-bottom:5px but the
   H2 below still has its own margin-top from the
   theme. Kill it so they sit tight together.
   ═══════════════════════════════════════════════ */

/* Eyebrow label class — replaces all inline-styled section labels */
.bonafide-eyebrow,
.bonafide-eyebrow p {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #8A97A7;
  font-size: 0.8rem;
  margin-bottom: 5px !important;
  font-weight: 500;
}

/* Center utility class */
.bonafide-center,
.bonafide-center p,
.bonafide-center h2,
.bonafide-center h4 {
  text-align: center;
}

/* Eyebrow → H2 tight spacing: any H2 right after eyebrow */
.bonafide-eyebrow + .wpb_text_column h2,
.bonafide-eyebrow + .wpb_text_column h2:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Also handle when eyebrow is inside the same text column */
.wpb_text_column p[style*="text-transform: uppercase"] + h2,
.wpb_text_column p[style*="text-transform:uppercase"] + h2,
.wpb_text_column p[style*="uppercase"] + h2 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ═══════════════════════════════════════════════
   Hero

   Keep it confident. The button uses theme
   btn-style_1 (green filled) — we restyle it
   as a proper outlined button that works on
   the dark overlay, with a down-arrow icon
   via ::after.
   ═══════════════════════════════════════════════ */

#hero::before,
#hero::after {
  display: none !important;
}

#hero h1 {
  text-shadow: 0 1px 20px rgba(0,28,42,0.25);
}

#hero .w-separator-line {
  background-color: rgba(255,255,255,0.18) !important;
}

/* Hero button — theme style 3 handles everything.
   No overrides needed. */

/* Hero text — styled via class, not inline */
.bonafide-hero-text {
  text-align: center;
  color: #fff;
}
.bonafide-hero-text p {
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.3em;
  font-size: 0.8rem;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.bonafide-hero-text h1 {
  color: #fff;
  font-size: 4.5rem;
  letter-spacing: 0.2em;
  font-weight: 300;
  margin-bottom: 0;
}
.bonafide-hero-text em {
  display: block;
  color: rgba(255,255,255,0.88);
  font-size: 1.15rem;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.8;
}


/* ═══════════════════════════════════════════════
   Study Cards — Native WP Bakery Grid

   Each study is a separate [vc_column_text] in
   a 2-column [vc_row], styled via .bonafide-study-card.
   Editable in the visual editor per card.
   ═══════════════════════════════════════════════ */

/* Study grid — Zephyr sets margin-right on hwrapper children
   via a high-specificity rule. Override with max specificity. */
.l-section .w-hwrapper.bonafide-studies-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px !important;
  align-items: stretch !important;
}
.l-section .w-hwrapper.bonafide-studies-grid > .wpb_text_column.bonafide-study-card {
  margin: 0 !important;
  width: auto !important;
  min-width: 0;
  box-sizing: border-box !important;
  border: none !important;
  padding: 22px 24px 18px !important;
  background: #fff !important;
  display: flex;
  flex-direction: column;
}

.bonafide-study-card h4 {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  color: #2C3A42;
  margin-bottom: 6px;
}

/* Meta line (journal, year, author) */
.bonafide-study-card p em {
  color: #4B5F78;
}
.bonafide-study-card p:has(em) {
  color: #8A97A7;
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Download link */
.bonafide-study-card a[href] {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid #659F8C;
  font-size: 0.78rem;
  font-weight: 500;
  color: #659F8C;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.2s, color 0.2s;
  margin-top: 4px;
}

.bonafide-study-card a[href]:hover {
  background: #659F8C;
  color: #fff !important;
  text-decoration: none !important;
}

/* Make inner wrapper also flex so margin-top:auto works on the button */
.bonafide-study-card .wpb_wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Push download link to bottom of flex card */
.bonafide-study-card .wpb_wrapper > p:last-child {
  margin-top: auto;
}


/* ═══════════════════════════════════════════════
   Counters
   ═══════════════════════════════════════════════ */

#netzwerk .w-counter {
  padding: 20px 10px;
}

#netzwerk .w-counter-value {
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  color: #00283C;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.w-counter .w-counter-title,
#netzwerk .w-counter-title {
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #8A97A7 !important;
  font-weight: 500 !important;
  margin-bottom: 0 !important;
  line-height: 1.3 !important;
}


/* ═══════════════════════════════════════════════
   Logo Bar
   ═══════════════════════════════════════════════ */

.bonafide-logo-bar .w-image {
  max-width: 160px !important;
  margin: 8px 20px !important;
  opacity: 0.8 !important;
  transition: none !important;
}

.bonafide-logo-bar img {
  max-height: 68px !important;
  width: auto;
  object-fit: contain;
}


/* ═══════════════════════════════════════════════
   Icon Boxes — Study & Anwendung

   Quiet icons, content-first. No colour
   fireworks on the icons.
   ═══════════════════════════════════════════════ */

.w-iconbox.iconpos_top {
  padding: 20px 10px;
}

.w-iconbox.iconpos_top .w-iconbox-icon {
  margin-bottom: 14px;
}

.w-iconbox.iconpos_top .w-iconbox-icon i {
  font-size: 32px !important;
  color: #8A97A7 !important;
}

.w-iconbox.iconpos_top .w-iconbox-title {
  font-size: 1rem !important;
  color: #2C3A42;
  margin-bottom: 6px;
}

.w-iconbox.iconpos_top .w-iconbox-text {
  color: #666;
  font-size: 0.86rem;
  line-height: 1.55;
}


/* ═══════════════════════════════════════════════
   Workshops

   Clean date + event pairs. A thin bottom
   border separates entries. The date numeral
   is prominent but not shouting. The whole
   item has a subtle background on hover for
   scannability.
   ═══════════════════════════════════════════════ */

.bonafide-workshop-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
  padding: 18px 0 !important;
  margin-bottom: 0 !important;
  gap: 16px !important;
  align-items: flex-start !important;
}

.bonafide-workshop-item:hover {
  background: transparent !important;
}

/* Last workshop item — no bottom border */
.bonafide-workshop-item:last-of-type {
  border-bottom: none !important;
}

/* Workshop date column — WP merges date+year into one <p>
   with <strong>TT.MM</strong><br>JJJJ inside it.
   Style the whole <p> as the year (small grey), then
   override the <strong> to be the big date numeral. */
.bonafide-workshop-date .wpb_wrapper > p {
  font-size: 0.75rem !important;
  color: #888 !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.bonafide-workshop-date .wpb_wrapper > p strong {
  display: block;
  font-size: 1.3rem !important;
  font-weight: 300 !important;
  color: #4B5F78 !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}

/* Collapse the <br> between date and year */
.bonafide-workshop-date .wpb_wrapper > p br {
  display: none;
}

/* Align both columns: reset any top margin/padding */
.bonafide-workshop-item > .wpb_text_column .wpb_wrapper > p:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.bonafide-workshop-item > .wpb_text_column .wpb_wrapper {
  padding-top: 0 !important;
}


/* ═══════════════════════════════════════════════
   Anwendung
   ═══════════════════════════════════════════════ */

#anwendung .vc_col-sm-4 .w-iconbox.iconpos_top {
  padding: 16px 18px;
  text-align: left;
  border-left: 2px solid #BEDCD2;
  margin-bottom: 24px;
}

#anwendung .vc_col-sm-4 .w-iconbox.iconpos_top .w-iconbox-icon {
  margin-bottom: 8px;
}

#anwendung .vc_col-sm-4 .w-iconbox.iconpos_top .w-iconbox-icon i {
  font-size: 26px !important;
  color: #659F8C !important;
}


/* ═══════════════════════════════════════════════
   Über Uns — People Section

   The key fix: add spacing between the
   portrait image and the name/title below.
   Also ensure the vita timeline reads cleanly.
   ═══════════════════════════════════════════════ */

/* Force inner columns to align top */
#ueber-uns ~ .l-section .g-cols {
  align-items: flex-start !important;
}

/* Limit portrait size so name isn't pushed too far down */
#ueber-uns ~ .l-section .vc_col-sm-4 .w-image,
#ueber-uns ~ .l-section .vc_col-sm-4 .w-image img {
  max-width: 200px;
}

/* Space between portrait and name */
#ueber-uns ~ .l-section .w-image {
  margin-bottom: 16px !important;
}

/* Name heading — breathing room, not sticking to image */
#ueber-uns ~ .l-section h3 {
  margin-top: 4px;
  margin-bottom: 4px !important;
  line-height: 1.25;
}

/* Role/title under name */
#ueber-uns ~ .l-section h3 + p,
#ueber-uns ~ .l-section .wpb_text_column p[style*="italic"] {
  margin-top: 0;
  margin-bottom: 0;
}

/* Separator between people */
#ueber-uns ~ .l-section .w-separator-line {
  background-color: #e8e8e8 !important;
}

/* Vita timeline */
.bonafide-vita-timeline {
  margin: 0;
  padding: 0;
}

/* WP autoparagraph inserts empty <p> tags — hide them */
.bonafide-vita-timeline > p:empty,
.bonafide-vita-timeline .vita-entry > p:empty,
.bonafide-vita-timeline .vita-content > p:empty {
  display: none;
}

.bonafide-vita-timeline .vita-entry {
  display: flex;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.bonafide-vita-timeline .vita-entry:last-child {
  border-bottom: none;
}

.bonafide-vita-timeline .vita-year {
  font-weight: 600;
  font-size: 0.85rem;
  color: #8A97A7;
  min-width: 48px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Match year <p> line-height to content so baselines align */
.bonafide-vita-timeline .vita-entry > p:first-child {
  line-height: 1.5;
  font-size: 0.86rem;
}

.bonafide-vita-timeline .vita-content {
  flex: 1;
}

.bonafide-vita-timeline .vita-content strong {
  display: block;
  margin-bottom: 2px;
  color: #2C3A42;
}

.bonafide-vita-timeline .vita-content p {
  margin: 0;
  color: #666;
  font-size: 0.86rem;
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════
   Centers List
   ═══════════════════════════════════════════════ */

.bonafide-centers-list ul {
  columns: 2;
  column-gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bonafide-centers-list li {
  padding: 7px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.88rem;
  color: #2C3A42;
  break-inside: avoid;
}


/* ═══════════════════════════════════════════════
   Kontakt

   Contact sidebar labels as small muted
   uppercase. Clean form focus.
   ═══════════════════════════════════════════════ */

#kontakt h4::after {
  display: none !important;
}

/* Spacing under key headings */
#kontakt h2 {
  margin-bottom: 24px !important;
}
#kontakt h4 {
  margin-bottom: 20px !important;
}

/* Spacing under section h4 headings like "Koordinierende Institutionen" */
.bonafide-center h4 {
  margin-bottom: 20px !important;
}

#kontakt .vc_column-inner > .wpb_wrapper > .wpb_text_column strong {
  color: #8A97A7;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

#kontakt .vc_column-inner > .wpb_wrapper > .wpb_text_column p {
  margin-bottom: 16px;
}

.w-form-row input[type="text"]:focus,
.w-form-row input[type="email"]:focus,
.w-form-row textarea:focus {
  box-shadow: none;
  border-color: #4B5F78;
}


/* ═══════════════════════════════════════════════
   Global: flat images everywhere
   ═══════════════════════════════════════════════ */

.l-section .w-image,
.l-section .w-image img {
  border-radius: 0 !important;
}

/* Study section image placeholder */
#studie ~ .l-section .w-image {
  box-shadow: none !important;
}


/* ═══════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* studies grid handled by WP Bakery column stacking */
}

@media (max-width: 768px) {
  .l-section .w-hwrapper.bonafide-studies-grid {
    grid-template-columns: 1fr;
  }

  .bonafide-hero-text h1 {
    font-size: 2.8rem;
    letter-spacing: 0.12em;
  }

  .bonafide-vita-timeline .vita-entry {
    flex-direction: column;
    gap: 4px;
  }
  .bonafide-vita-timeline .vita-year {
    min-width: auto;
  }

  .bonafide-centers-list ul {
    columns: 1;
  }

  .bonafide-logo-bar .w-image {
    max-width: 120px;
    margin: 6px 12px !important;
    opacity: 0.8 !important;
  }

  #netzwerk .w-counter-value {
    font-size: 2.4rem;
  }
}

@media (max-width: 500px) {
  .bonafide-hero-text h1 {
    font-size: 2.2rem;
    letter-spacing: 0.08em;
  }

  #netzwerk .w-counter-value {
    font-size: 2rem;
  }

  .bonafide-study-item .study-content h4 {
    font-size: 0.88rem;
  }
}