/**
 * components.css
 *
 * All the “opinionated” stuff (header, hero, about-page, LB helpers, teasers).
 *
 * - Layout Builder/editor mode hints
 * - Header/branding overrides
 * - Sticky header toggle hacks
 * - “About” page image
 * - Article teaser title/meta
 * - Hero block typography
 * - ...
 */

/* -------------------------------------------------------------------
   Layout Builder / Editor mode helpers
   ------------------------------------------------------------------- */
/* Subtle global hint: thin blue border only for editors. */
body.editor-mode {
  border-top: 5px solid #0b63ce;
}

/* When specifically in Layout Builder, make the "edit" context obvious. */
body.layout-builder-active {
  background-color: #f7051b;
  border-top: 3px solid #f7051b;
}

/* Small label in the corner of each section (optional, but nice). */
body.layout-builder-active .layout-builder__section::before {
  content: 'Layout section';
  position: absolute;
  top: 1rem;
  left: 8rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f7051b;
  color: #fff;
  border-radius: 999px;
}

/* Make blocks a bit clearer for editors too. */
body.layout-builder-active .block {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03);
}

/* -------------------------------------------------------------------
   Header / Branding (override Olivero)
   ------------------------------------------------------------------- */
.site-header {
  min-height: 0 !important;
}

/* Disable sticky behavior of Olivero header on all breakpoints.
 * Header should sit above #main-wrapper content (z-index: 2),
 * but we do NOT want it sticky.
 */
.site-header {
  position: relative !important;   /* not static → z-index works */
  transform: none !important;      /* kill sticky transform */
  z-index: 3 !important;           /* just above layout-main-wrapper (2) */
}

/* If Olivero ever applies .is-fixed, keep it non-sticky but above content. */
.site-header.is-fixed {
  position: relative !important;
  transform: none !important;
  z-index: 3 !important;
}

.region-header {
  padding-inline: 1rem !important;
}

.site-branding {
  min-height: 3rem !important;
  margin-inline: -2.2rem !important;
  padding-block: 0.5rem !important;
  padding-inline-start: 1.5rem !important;
  padding-inline-end: 1.5rem !important;
}

.site-logo,
.site-logo img {
  max-height: 36px !important;
}

.site-name {
  font-size: 1.3rem !important;
  margin: 0 !important;
}

.site-slogan {
  font-size: 0.8rem !important;
  margin: 0 !important;
}

.site-branding__text {
  line-height: 1.1 !important;
}

.primary-nav__menu-item {
  padding-inline: 0.5rem !important;
}

/* Desktop: keep sticky-header toggle space, but kill the toggle completely. */
@media (min-width: 62.5rem) {
  .sticky-header-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  .sticky-header-toggle:focus,
  .sticky-header-toggle:active {
    outline: 0 !important;
    box-shadow: none !important;
  }

  .site-header.is-fixed .sticky-header-toggle {
    display: none !important;
  }
}

/* Block node title (simulate h2) */
.block-field-blocknodepagetitle {
  font-size: 1.9rem;
  margin-top: 2.4rem;
}

/* -------------------------------------------------------------------
   "About" page image
   ------------------------------------------------------------------- */
.page-node-type-page
  .field--name-field-media-image
  > div:nth-child(2)
  > img:nth-child(1) {
  border-radius: 120px;
}

/* -------------------------------------------------------------------
   Hero block typography
   ------------------------------------------------------------------- */
.hero-block {
  color: #fff;
}

.hero-block h1 {
  font-family: 'Merriweather Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 2.1rem + 1.4vw, 3.2rem);
  line-height: 1.2;
}

.hero-block p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
  line-height: 1.6;
}

/* Subtle text shadow for readability on busy images */
.hero-block h1,
.hero-block p {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* -------------------------------------------------------------------
   Article teasers
   ------------------------------------------------------------------- */
/* Title block above teaser text */
.node__title {
  margin-bottom: 0.2rem;
}

/* Meta line under titles (author, year etc.) */
.node__meta,
.node--type-article .field--name-field-author,
.node--type-article .field--name-field-year {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  /* text-transform: uppercase; */
  letter-spacing: 0.08em;
  color: #666;
}

/* -------------------------------------------------------------------
   Article body: first paragraph & drop cap
   ------------------------------------------------------------------- */
/* Artikel: erster Absatz + Drop Cap */
.node--type-article.node--view-mode-full .node__content p:first-of-type {
  font-size: 1.08em;
  line-height: 1.8;
}

/* Drop Cap */
.node--type-article.node--view-mode-full
  .node__content .field--name-body p:first-of-type::first-letter {
  float: left;
  font-family: 'Merriweather Sans', sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  padding-right: 0.15em;
  padding-top: 0.05em;
}

/* -------------------------------------------------------------------
   Pull quote (highlighted blockquote inside articles)
   ------------------------------------------------------------------- */
/* Pull quote */
blockquote.pullquote {
  max-width: min(760px, 100%);
  margin: 3rem auto;
  padding: 1.8rem 2.4rem 1.8rem 3.1rem; /* mehr links/rechts */
  border-left: 4px solid #10309c;
  background: linear-gradient(to right, #f5f7ff 0, #ffffff 35%);
  font-family: 'Merriweather Sans', sans-serif;
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.4;
  position: relative;
  box-sizing: border-box;
}

/* Dekoratives Anführungszeichen weiter nach innen */
blockquote.pullquote::before {
  content: '“';
  position: absolute;
  left: 1.3rem;
  top: 0.15rem;
  font-size: 3rem;
  color: #10309c;
  line-height: 1;
}

/* Hervorhebung von strong/em innerhalb */
blockquote.pullquote strong,
blockquote.pullquote em {
  font-weight: 700;
  font-style: italic;
}


/* -------------------------------------------------------------------
   Article tags, year (taxonomy)
   (grey-hue: #f5f8f8)
   ------------------------------------------------------------------- */
.node--view-mode-full .block-field-blocknodearticlefield-tags .field--tags,
.node--view-mode-full .block-field-blocknodearticlefield-year .field--name-field-year {
  margin-block-start: 0;
  margin-block-end: 6.5rem;
  padding-block: 1.2rem;
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;
  background-color: #f5f8f8;
  border-radius: 5px;
}

.node--view-mode-full .block-field-blocknodearticlefield-year .field--name-field-year .field--label-inline {
  padding-block: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
}
.node--view-mode-full .block-field-blocknodearticlefield-year .field--name-field-year .field__label {
  letter-spacing: 0.02em;
  color: #5e7481;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.6;
}

.node--view-mode-full .block-field-blocknodearticlefield-year .field--name-field-year .field__item a {
  position: relative;
  display: flex;
  align-items: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  letter-spacing: 0.02em;
  color: #112e95;  /* base.css > a: #10309c */
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}


/* -------------------------------------------------------------------
   Article bibliography
   ------------------------------------------------------------------- */
.block-field-blocknodearticlefield-bibliography h2.block__title {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

.field--name-field-bibliography {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0e4ee;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444;
}
.field--name-field-bibliography p {
  margin-bottom: 0.5rem;
}
/* Optional: slight indent of continuation lines (hanging indent look) */
.field--name-field-bibliography p {
  text-indent: -0.8rem;
  padding-left: 0.8rem;
}
/* On wide screens, you can split into two columns if you like */
@media (min-width: 1024px) {
  .field--name-field-bibliography {
    columns: 2;
    column-gap: 2rem;
  }
}

/* -------------------------------------------------------------------
   Article card layout on node pages
   ------------------------------------------------------------------- */
/* Very light gray page background on node pages */
body.path-node {
  background: #f5f5f7;
}

/* White card for full article view only */
.node--type-article.node--view-mode-full {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  padding: 2.5rem 2.5rem 3rem;
  margin-block: 2.5rem;
}

/* Keep teasers “flat” (no card) – they have a different view mode class */
.node--type-article.node--view-mode-teaser {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-block: 0 3rem; /* spacing is already handled in layout.css */
}

/* -------------------------------------------------------------------
  Robust burger color override

  - the middle line is the border-top of .mobile-nav-button__icon itself
  - the top & bottom lines are the ::before and ::after of that same span
  ------------------------------------------------------------------- */

/* Burger icon lines:
 * - dark when menu is closed
 * - let Olivero control them when menu is open (X icon, middle bar hidden)
 */
body:not(.header-nav-opened) .mobile-nav-button__icon,
body:not(.header-nav-opened) .mobile-nav-button__icon::before,
body:not(.header-nav-opened) .mobile-nav-button__icon::after {
  border-top-color: #0a0d0f;
}

/* -------------------------------------------------------------------
   Dark mode (honour system preference)
   ------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .node--type-article.node--view-mode-full {
    background: #0b1120;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
  }

  blockquote {
    border-left-color: #3b82f6;
    color: #e5e7eb;
    background-color: rgba(15, 23, 42, 0.7);
  }

  blockquote.pullquote {
    background: linear-gradient(to right, #020617 0, #0b1120 35%);
  }
}


/* =================================================================== */
/* =================================================================== */
/* =================================================================== */

/*** jn5 added ***/

/* -------------------------------------------------------------------
  Views result summary on top.
  <div class="result-summary">Displaying @start - @end of @total</div>
   ------------------------------------------------------------------- */
.view-header .result-summary {
  margin: 50px 0 5px 0;
  border: 0.1rem solid #eee;
  border-radius: 5px;
  padding: 5px;
}

/* News teaser */
.page-node-type-news .field--name-field-news-teaser {
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.4rem
}