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

/* Feed this file to Bricks Style Manager -> Framework -> Parse CSS to have all tokens and
 * utility functions inside the Builder available.
 *
 * !! HEADS UP
 * If new tokens or utility classes arise be sure to do the reimport in Bricks Style Manager!
 */
@import "tokens-and-classes.css";

/* ---  That's it for Bricks, following CSS is only to define our global styles, typography etc.

/**
 * ------------------------
 * - CUSTOM FONT
 * ------------------------
 */
@font-face {
  font-family: 'Asap';
  src: url('./assets/fonts/asap-v34-latin-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Asap';
  src: url('./assets/fonts/asap-v34-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/**
 * ------------------------
 * - LAYOUT
 * ------------------------
 */
html {
  font-size: 100%;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

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

.brxe-section {
  padding: var(--section-space-l) var(--section-space-s);
}

img {
  border-radius: var(--border-radius);
}

/**
 * ------------------------
 * - TYPOGRAPHY
 * ------------------------
 */
body {
  font-family: 'Asap', sans-serif;
  color: var(--body-color);
  font-size: var(--text-m);
  line-height: 1.6;
  transition: none;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
}

h1 {
  font-size: var(--text-4xl);
  line-height: 1.1;
}

h2 {
  font-size: var(--text-3xl);
  line-height: 1.15;
}

h3 {
  font-size: var(--text-2xl);
  line-height: 1.2;
}

h4 {
  font-size: var(--text-xl);
  line-height: 1.3;
}

h5 {
  font-size: var(--text-l);
  line-height: 1.35;
}

h6 {
  font-size: var(--text-m);
  line-height: 1.4;
}


/**
 * ------------------------
 * - ELEMENTS | BUTTON
 * ------------------------
 */

.brxe-button {
  padding: 0.5em var(--space-l);
}

.brxe-button.bricks-background-primary {
  border-radius: 1.5rem;
  color: var(--color-secondary);
  border: var(--border-width) solid var(--color-secondary);
  background-color: transparent;
  transition: all var(--transition-duration);
  font-weight: var(--font-weight-bold);
  align-self: flex-start; /* Opinionated :} */
}

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

#header .brxe-button.bricks-background-primary,
.hero .brxe-button.bricks-background-primary,
.background-color-secondary .brxe-button.bricks-background-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);;
}

#header .brxe-button.bricks-background-primary:hover,
.hero .brxe-button.bricks-background-primary:hover,
.background-color-secondary .brxe-button.bricks-background-primary:hover {
  color: var(--white);
  border-color: var(--white);
}

/**
 * ------------------------
 * - ELEMENTS | RICH TEXT
 * ------------------------
 */

.brxe-text a {
  border-bottom: 1px solid var(--color-primary);
  transition: border-color var(--transition-duration) ease;
}
.brxe-text a:hover {
  border-bottom-color: var(--color-secondary);
}

/**
 * ------------------------
 * - COMPONENTS | ACCORDION
 * ------------------------
 */

.brxe-accordion-nested {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.brxe-accordion-nested > * {
  color: var(--white);
  border: var(--border-width) solid var(--color-primary);
  border-radius: 1.5rem;
  padding: var(--space-s);
}

.brxe-block.accordion-title-wrapper {
  font-size: var(--text-l);
}

.brxe-block.accordion-content-wrapper {
  padding: var(--space-xs) 0 0 !important;
}

/* Hide the arrows as they annoy */
.brxe-accordion-nested .brxe-icon {
  display: none;
}

/**
 * ------------------------
 * - FOOTER
 * ------------------------
 */
#footer-contact a:hover {
  color: var(--color-neutral-100);
}

#footer-legal a {
  color: var(--black);
}

#footer-legal a:hover {
  color: var(--color-secondary);
}