/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Bricks Child Theme for pool.form
 Author:       Daniel Brunner | andersch Marketing und Design GmbH
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

@import 'tokens-and-classes.css';

/*
------------------------
Mini Reset
------------------------
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p, h1, h2, h3, h4, h5, h6, figure, blockquote {
  margin: 0;
}

/*
------------------------
Typography
------------------------
*/
@font-face {
  font-display: swap;
  font-family: 'Manrope';
  src: url('./assets/fonts/manrope/manrope-v20-latin-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-display: swap;
  font-family: 'Manrope';
  src: url('./assets/fonts/manrope/manrope-v20-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-display: swap;
  font-family: 'Manrope';
  src: url('./assets/fonts/manrope/manrope-v20-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

.site-wrapper {
  max-width: var(--site-max-width);
  margin-inline: auto;
  overflow: clip;
}

html {
  font-size: 100%;
  background-color: var(--white);
}

body {
  font-family: 'Manrope', sans-serif;
  font-size: var(--text-m);
  line-height: var(--body-line-height);
  color: var(--body-color);

  max-width: var(--site-max-width);
  margin-inline: auto;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
  line-height: var(--heading-line-height);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
}

h1, .h1, .h1 * {
  font-size: var(--heading-h1);
}

h2, .h2, .h2 * {
  font-size: var(--heading-h2);
}

h3, .h3, .h3 * {
  font-size: var(--heading-h3);
}

h4, .h4, .h4 * {
  font-size: var(--heading-h4);
}

strong {
  font-weight: var(--font-weight-bold);
}

label {
  color: inherit;
}

main .brxe-text ul li::before {
  content: "~ ";
  color: var(--color-secondary);
}

/* Flow Spacing */
.flow > * + * {
  margin-top: var(--flow-s);
}

.flow-m > * + * {
  margin-top: var(--flow-m);
}

.intro-heading, .intro-heading * {
  font-size: var(--text-m);
  color: var(--color-primary);
  font-weight: 600;
  text-transform: uppercase;
}

/* Reset flow for intro heading setup */
.intro-heading + * {
  margin-top: 0;
}

/* Prose for longer list texts with hierarchy: imprint, GDPR statement, blog articles, etc. */
.prose > * + * {
  /* Base setup */
  margin-top: var(--flow-s);
}

/* Small margin before a heading if not starting */
.prose > :is(h1, h2, h3, h4):not(:first-child) {
  margin-top: var(--flow-heading-space);
}

/* Small margin after a heading */
.prose > :is(h1, h2, h3, h4) + :where(*) {
  margin-top: var(--space-xs);
}

/* Inline Links */
.brxe-text a {
  border-bottom: 1px solid var(--body-color);
  transition: all var(--transition-duration) ease;
}

.brxe-text a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/*
------------------------
Layout
------------------------
*/
.brxe-container {
  width: var(--container-width);
}

.brxe-section {
  padding: var(--section-padding-y) var(--section-padding-x);
}

/*
------------------------
Header
------------------------
*/
.brxe-nav-nested .menu-item a:not(.brxe-button) {
  transition: color var(--transition-duration) ease;
}

.brxe-nav-nested .menu-item a:hover {
  color: var(--color-primary);
}

/* Fix for active bleeding into button */
#brx-header .brx-nav-nested-items > li > [aria-current="page"].brxe-button {
  color: var(--white);
}

/*
------------------------
Footer
------------------------
*/
footer .brxe-text a {
  border-bottom-width: 0;
}

footer a:hover {
  color: var(--color-primary);
}

/*
------------------------
Button
------------------------
*/
.button, .brxe-button {
  font-weight: var(--font-weight-bold);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--text-l);
  background-color: var(--white);
  color: var(--body-color);
  font-size: var(--text-button);
  border: 1px solid var(--color-primary);
  transition: all var(--transition-duration) ease;
}

.button:hover, .brxe-button:hover {
  background-color: var(--color-primary);
  color: var(--white);
}

.button:focus, .brxe-button:focus {
  background-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
}

.button.is-primary, .brxe-button.bricks-background-primary {
  color: var(--white);
  background-color: var(--color-primary);
}

.button.is-primary:hover, .brxe-button.bricks-background-primary:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.button.is-primary:focus, .brxe-button.bricks-background-primary:focus {
  outline: 2px solid var(--color-neutral-900);
}

/*
------------------------
Misc
------------------------
*/

main img {
  transition: transform var(--transition-duration) ease;
}

main img:hover {
  transform: scale(1.05);
}

/*
------------------------
Accordion
------------------------
*/
.accordion-title-wrapper {
  padding: var(--accordion-item-padding-y) var(--accordion-item-padding-x);
  background-color: var(--accordion-background-color);
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr auto;
  align-items: center;
}

.accordion-title-wrapper,
.accordion-title-wrapper .brxe-icon {
  font-size: var(--heading-h4);
  font-weight: var(--font-weight-bold);
}

.accordion-title-wrapper .brxe-text {
  color: var(--body-color);
}

.accordion-title-wrapper .brxe-icon {
  color: var(--color-secondary);
}

.brxe-accordion-nested .brx-open .accordion-title-wrapper * {
  color: var(--color-primary);
}

.accordion-content-wrapper {
  background-color: var(--accordion-background-color);
  padding: var(--accordion-item-padding-y) var(--accordion-item-padding-x);
}

/* Single accordion items */
.brxe-accordion-nested > * {
  border: var(--accordion-border-width) solid var(--border-color);
  position: relative;
}

.brxe-accordion-nested > *:not(:first-child) {
  margin-top: var(--space-m);
}

/* Pseudo elements in the vertical middle */
.brxe-accordion-nested > *::before,
.brxe-accordion-nested > *::after {
  content: '';
  position: absolute;
  top: 20%;
  bottom: 20%;
  width: var(--accordion-border-width);
  left: calc(-1 * var(--accordion-border-width));
  background-color: var(--color-neutral-100);
}

.brxe-accordion-nested > *::after {
  left: 100%;
  right: var(--accordion-border-width);
}

/* Hover state */
.brxe-accordion-nested > :not(.brx-open) .accordion-title-wrapper:hover {
  background-color: var(--accordion-background-color-active);
}

.brxe-accordion-nested > *:hover .brxe-icon {
  color: var(--color-primary);
}

/* Active state */
.brxe-accordion-nested > .brx-open .accordion-title-wrapper,
.brxe-accordion-nested > .brx-open .accordion-content-wrapper {
  background-color: var(--accordion-background-color-active);
}

/*
------------------------
Slider
------------------------
*/

/* Compensate space taken by pagination */
.splide {
  padding-bottom: 2rem;
}

/* !. Pagination */
.splide__pagination {
  bottom: 0;
  left: 0;
  right: 0;
  transform: none;
}

.splide__pagination .splide__pagination__page {
  height: 3px;
  width: 3rem;
  margin: 0;
  background-color: var(--color-neutral-600);
  border-radius: 0;
}

.splide__pagination .splide__pagination__page.is-active {
  background-color: var(--color-primary);
}

/* Enlarge hitbox to click slider pagination */
.splide__pagination__page::before,
.splide__pagination__page::after {
  content: '';
  position: absolute;
  height: 1rem;
  width: 100%;
}

.splide__pagination__page::before {
  top: -1rem;
}

/* !. Arrows */
/* Add padding for slider with arrows so they dont bleed into the content */
.splide:has(.splide__arrows) {
  padding-left: 15%;
  padding-right: 15%;
}

@media (min-width: 768px) {
  .splide:has(.splide__arrows) {
    padding-left: 10%;
    padding-right: 10%;
  }
}

.splide__arrow svg {
  fill: currentColor;
}

.splide__arrow {
  width: var(--slider-arrow-size);
  height: var(--slider-arrow-size);
  color: var(--color-primary);
  transition: color var(--transition-duration) ease;
}

.splide__arrow:hover {
  color: var(--color-secondary);
}

/* !. Reference slider */
#reference-slider .reference-slider-text-wrapper {
  position: absolute;
  bottom: var(--space-m);
  left: var(--space-m);
  color: var(--white);
  right: calc(-1 * var(--space-m));
  z-index: 1;
}

/*
------------------------
Forms
------------------------
*/

/* Global styles */
.ff-default form .ff-el-form-control {
  background-clip: unset;
  background-image: revert-layer;
  background-color: var(--white);
  border-radius: 0;
  padding: var(--space-s) var(--space-m);
  color: var(--body-color);
}

.ff-default form .ff-el-form-control:focus {
  border-color: var(--color-primary);
}

/* Rückrufformular */
.rueckruf-formular .ff-default .ff-el-form-control,
.rueckruf-formular .ff-default .ff-message-success,
.rueckruf-formular .ff-default .ff-el-form-control:focus {
  padding: var(--space-xs) var(--space-s);
  border: 2px solid var(--white);
  color: var(--white);
  background-color: transparent;
}

.rueckruf-formular .ff-default .ff-el-form-control:focus {
  outline: 1px solid var(--white);
}

.rueckruf-formular .ff-default .ff-el-form-control::placeholder {
  color: var(--white);
}

.rueckruf-formular .ff-default label {
  color: var(--white);
}