/*
 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-display: swap;
  font-family: 'Asap';
  src: url('./assets/fonts/asap-v34-latin-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

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

@font-face {
  font-display: swap;
  font-family: 'Sansita Swashed';
  src: url('./assets/fonts/sansita-swashed-v23-latin-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-display: swap;
  font-family: 'Sansita Swashed';
  src: url('./assets/fonts/sansita-swashed-v23-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

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

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

body {
  background-color: var(--color-neutral-50);
}

.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;
}

main ul,
main ol {
  margin: 0;
}


/**
 * ------------------------
 * - 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) ease;
  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
 * ------------------------
 */
#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);
}

.brx-dropdown-content {
  background-color: transparent;
}

.brx-dropdown-content a {
  color: var(--white);
}

.brx-dropdown-content .menu-item {
  margin-left: var(--space-m);
  padding: var(--space-s);
  background-color: transparent;
}

@media (min-width: 768px) {
  .brx-dropdown-content .menu-item {
    background-color: var(--white);
    margin-left: 0;
  }

  .brx-dropdown-content .menu-item:hover,
  .brx-dropdown-content .menu-item:has(a[aria-current="page"]) {
    background-color: var(--color-neutral-100);
  }

  .brx-dropdown-content a {
    color: initial;
  }
}

/**
 * ------------------------
 * - FLOATING SIDENAV
 * ------------------------
 */
#floating-sidenav {
  background-color: var(--color-primary);
  position: fixed;
  z-index: 1;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: calc(50% - 100px);
  width: var(--section-space-s);
}

#floating-sidenav .brxe-icon {
  padding: var(--space-xs) 0;
  font-size: var(--text-xl);
  color: var(--white);
  text-align: center;
  transition: color var(--transition-duration) ease;
}

#floating-sidenav .brxe-icon:hover {
  color: var(--color-neutral-100);
}

#floating-sidenav .ion-logo-whatsapp {
  transform: scale(0.9);
}

@keyframes floatingPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.07);
  }
}

@media (min-width: 1024px) {
  #floating-sidenav .brxe-icon {
    font-size: var(--text-2xl);
    width: auto;
  }
}

/**
 * ------------------------
 * - 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 > * {
  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);
}

#footer-contact .brxe-social-icons li:first-child a {
  padding-left: 0;
}

#footer-contact .brxe-social-icons li.has-link a {
  color: var(--white);
  transition: color var(--transition-duration) ease;
}

#footer-contact .brxe-social-icons li.has-link a:hover {
  color: var(--color-primary);
}

#copyright-move {
  font-family: 'Sansita Swashed', sans-serif;
}

/**
 * ------------------------
 * - FORM ELEMENTS
 * ------------------------
 */
label {
  color: var(--body-color);
}

.ff-default form .ff-el-form-control {
  font-family: inherit;
  color: inherit;
}

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

.ff-message-success {
  border-radius: var(--border-radius);
}

/**
 * ------------------------
 * - ANIMATIONS / MISC
 * ------------------------
 */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-duration: 0;
  }
}

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

  #floating-sidenav {
    animation: floatingPulse 4s ease-in-out infinite;
    transform-origin: center;
  }
}