/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

*:focus-visible {
  outline: none !important;
}

/* Utility-Bar-Höhe als eigene Variable: --header-height darf NICHT erhöht
   werden, weil die Header-Nav-Sektion sie selbst für ihre Höhe nutzt (der
   ganze Header würde mitwachsen). Der Content-Offset wird stattdessen per
   calc() addiert. Bei Änderungen an der Utility-Bar (Padding/Inhalt) die
   4rem mit anpassen. */
:root {
  --utility-bar-height: 56px;
}
@media (min-width: 768px) {
  /* :has() = Offset greift nur, wenn die Utility-Bar wirklich im Header steckt.
     Macht die Reihenfolge von Code- und Content-Deploy egal. */
  :root:has(#brxe-ub1sec) {
    --utility-bar-height: 4rem;
  }
}
body main#brx-content {
  padding-top: calc(var(--header-height, 9rem) + var(--utility-bar-height, 0px));
}

/* Breadcrumbs: auf Desktop sitzen sie in der Utility-Bar des Headers;
   die eigene Zeile unterm Header gibt es nur noch mobil (dort ist die Utility-Bar versteckt). */
.site-breadcrumbs {
  display: none;
}
@media (max-width: 767px) {
  .site-breadcrumbs {
    display: block;
    background: transparent;
    margin-top: calc(var(--header-height, 9rem) + var(--utility-bar-height, 0px));
  }
  /* Offset nur nullen, wenn die Breadcrumb-Zeile wirklich gerendert wurde */
  body:has(.site-breadcrumbs) #brx-content {
    padding-top: 0;
  }
}
.site-breadcrumbs__inner {
  max-width: var(--content-width, 1360px);
  margin-inline: auto;
  padding: var(--space-xs, 0.5rem) var(--gutter, 1.25rem);
}
.site-breadcrumbs .rank-math-breadcrumb,
.site-breadcrumbs .rank-math-breadcrumb p {
  font-size: var(--text-xs, 0.8rem);
  color: var(--base-medium, #6b6b6b);
}
.site-breadcrumbs .rank-math-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.site-breadcrumbs .rank-math-breadcrumb a:hover {
  color: var(--black, #383838);
}
.site-breadcrumbs .rank-math-breadcrumb .separator {
  margin-inline: 0.4em;
}
.site-breadcrumbs .rank-math-breadcrumb .last {
  color: var(--black, #383838);
  font-weight: 600;
}

/* ============================================================================
   Borlabs Cookie Content Blocker im Bricks-Video-Element
   (der Blocker kommt über den Filter bricks/frontend/render_element in
   functions.php in das Video-Element).
   Problem: .brxe-video ist display:flex + aspect-ratio 16/9. Der Borlabs-
   Container hat container-type:inline-size und width:auto → als Flex-Item
   kollabiert er auf 0px Breite, der Platzhaltertext wird unlesbar.
   Lösung: Overlay absolut über die volle Videofläche legen.
   Achtung: Borlabs-CSS lädt NACH dem Child-Theme, die Selektoren müssen
   deshalb spezifischer sein als `body .brlbs-cmpnt-container.brlbs-cmpnt-
   content-blocker` (0,2,1). Die Farb-/Radius-Variablen setzt Borlabs auf
   :root – hier am Container überschrieben, damit das Overlay zur Seite passt.
   ============================================================================ */
.brxe-video > .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  line-height: 1.45;
  --content-blocker-font-size: var(--text-s, 14px);
  --content-blocker-text-color: var(--base-dark, #383838);
  --content-blocker-background: rgb(255 255 255 / 0.92);
  --content-blocker-link-color: var(--primary, #db1f3e);
  --content-blocker-link-color-hover: var(--primary-dark, #701020);
  --content-blocker-button-color: var(--primary, #db1f3e);
  --content-blocker-button-color-hover: var(--primary-hover, #e33b57);
  --content-blocker-button-text-color: #fff;
  --content-blocker-button-text-color-hover: #fff;
  --content-blocker-border-radius-top-left: var(--radius-m, 1rem);
  --content-blocker-border-radius-top-right: var(--radius-m, 1rem);
  --content-blocker-border-radius-bottom-left: var(--radius-m, 1rem);
  --content-blocker-border-radius-bottom-right: var(--radius-m, 1rem);
  --content-blocker-button-border-radius-top-left: var(--btn-radius, 50px);
  --content-blocker-button-border-radius-top-right: var(--btn-radius, 50px);
  --content-blocker-button-border-radius-bottom-left: var(--btn-radius, 50px);
  --content-blocker-button-border-radius-bottom-right: var(--btn-radius, 50px);
}
.brxe-video > .brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-description {
  text-wrap: pretty;
}
.brxe-video > .brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-provider-toggle {
  text-decoration-line: underline;
  text-underline-offset: 0.15em;
}
/* Der YouTube-Blocker bringt eigene Individual-Styles mit (Borlabs-Default:
   Button #ff0000, Hover weiß/rot) mit Spezifität (0,6,2) – deshalb hier der
   lange Selektor (0,7,1), damit die Seitenfarben greifen. */
.brxe-video .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker.brlbs-cmpnt-with-individual-styles[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-youtube a.brlbs-cmpnt-cb-btn {
  background: var(--content-blocker-button-color);
  color: var(--content-blocker-button-text-color);
  border-radius: var(--btn-radius, 50px);
  font-size: var(--text-s, 14px);
  font-weight: var(--btn-font-weight, 600);
}
.brxe-video .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker.brlbs-cmpnt-with-individual-styles[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-youtube a.brlbs-cmpnt-cb-btn:hover {
  background: var(--content-blocker-button-color-hover);
  color: var(--content-blocker-button-text-color-hover);
}
/* Box nur so hoch wie ihr Inhalt – Borlabs streckt sie sonst über die ganze
   Videohöhe (ab 540px passt der Inhalt immer hinein). */
@container brlbsCmpntContentBlocker (width >= 540px) {
  .brxe-video > .brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-preset-c {
    align-items: center;
  }
}
/* Schmale Videos (Handy, schmale Spalten): 16:9 bietet nicht genug Höhe für
   Text + Link + zwei Buttons. Borlabs macht die Box dann scrollbar, die
   Buttons sind aber erst nach dem Scrollen sichtbar. Deshalb den Hinweistext
   ausblenden („Mehr Informationen“ bleibt) und die Buttons kompakter setzen. */
@container brlbsCmpntContentBlocker (width < 540px) {
  .brxe-video > .brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-description {
    display: none;
  }
  .brxe-video > .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-preset-c .brlbs-cmpnt-cb-main {
    padding: 12px;
  }
  .brxe-video .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker.brlbs-cmpnt-with-individual-styles[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-youtube a.brlbs-cmpnt-cb-btn {
    padding: 8px 16px;
  }
}