/*
 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
*/

/* ── Font defaults (override Bricks Theme Styles & builder) ─────────────
 * Design tokens are injected in :root via design-tokens.json (see functions.php).
 * These rules override Bricks’ default typography so body/headings use token vars.
 * For per-element overrides in Bricks, set Typography > Font family to a Bricks
 * variable that references var(--font-family-body) or var(--font-family-heading).
 */

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

body,
.brx-body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-normal, 400);
  line-height: var(--line-height-normal, 1.5);
}

h1, h2, h3, h4, h5, h6,
.brx h1, .brx h2, .brx h3, .brx h4, .brx h5, .brx h6 {
  font-family: var(--font-family-heading);
}

/* ── ZRM Text / Image 50:50 ─────────────────────────────────────────── */
.zrm-text-image {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.zrm-text-image > * {
  flex: 1;
  min-width: 0;
}

.zrm-text-image.image-right {
  flex-direction: row-reverse;
}

.zrm-text-image__image img {
  width: 100%;
  height: auto;
  display: block;
}

.brxe-text-link {
  text-underline-offset: 5px;
}


/* ── Random Form Styles ─────────────────────────────────────────── */
.fluentform .ff-el-group .ff-el-form-check-label {
  display: grid;
  align-items: start;
  gap: 8px;
  grid-template-columns: 18px 1fr;
}

.fluentform .ff-el-group .ff-el-form-check-label .ff-el-form-check-input {
  top: initial;
  margin: 5px 0 0 0;
}

/* ── Confirmation Modal (Fluent Forms success message) ───────────────── */
/*
 * No card wrapper in the HTML, so the card background is split between
 * __headline (top half) and __text (bottom half).
 * __background is an absolute overlay behind both.
 */
#fluentform_3_success {
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
}

.confirmationmodal {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 1000;
}

.confirmationmodal__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.confirmationmodal__inner {
  position: relative;
  max-width: 866px;
  width: 100%;
  z-index: 1;
  padding: 64px;
  background-color: var(--color-eggshell, #FFF7E4);
}

.confirmationmodal__headline,
.confirmationmodal__text {}

.confirmationmodal__headline {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2, 7.2rem);
  line-height: var(--line-height-normal, 1);
  font-weight: var(--font-weight-normal, 400);
  margin: 0 0 32px 0;
}

.confirmationmodal__text {
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-large, 2rem);
  line-height: var(--line-height-loose, 1.4);
  font-weight: var(--font-weight-normal, 400);
  margin: 0;
}

/* ── Button styles (token-driven overrides for Bricks .bricks-button) ── */
.bricks-button {
  border-radius: var(--button-border-radius);
  padding: var(--button-padding-y) var(--button-padding-x);
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  transition: var(--button-transition);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

/* Primary */
.bricks-button.bricks-background-primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
}
.bricks-button.bricks-background-primary:hover {
  background-color: var(--button-primary-hover-bg);
}
.bricks-button.outline.bricks-color-primary {
  background-color: transparent;
  color: var(--button-primary-bg);
  border: 2px solid var(--button-primary-bg);
}
.bricks-button.outline.bricks-color-primary:hover {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
}

/* Secondary */
.bricks-button.bricks-background-secondary {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}
.bricks-button.bricks-background-secondary:hover {
  background-color: var(--button-secondary-hover-bg);
}
.bricks-button.outline.bricks-color-secondary {
  background-color: transparent;
  color: var(--button-secondary-bg);
  border: 2px solid var(--button-secondary-bg);
}
.bricks-button.outline.bricks-color-secondary:hover {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

/* Light */
.bricks-button.bricks-background-light {
  background-color: var(--button-light-bg);
  color: var(--button-light-text);
}
.bricks-button.bricks-background-light:hover {
  background-color: var(--button-light-hover-bg);
}
.bricks-button.outline.bricks-color-light {
  background-color: transparent;
  color: var(--button-light-text);
  border: 2px solid var(--button-light-bg);
}
.bricks-button.outline.bricks-color-light:hover {
  background-color: var(--button-light-bg);
}

/* Dark */
.bricks-button.bricks-background-dark {
  background-color: var(--button-dark-bg);
  color: var(--button-dark-text);
}
.bricks-button.bricks-background-dark:hover {
  background-color: var(--button-dark-hover-bg);
}
.bricks-button.outline.bricks-color-dark {
  background-color: transparent;
  color: var(--button-dark-bg);
  border: 2px solid var(--button-dark-bg);
}
.bricks-button.outline.bricks-color-dark:hover {
  background-color: var(--button-dark-bg);
  color: var(--button-dark-text);
}

/* Muted */
.bricks-button.bricks-background-muted {
  background-color: var(--button-muted-bg);
  color: var(--button-muted-text);
}
.bricks-button.bricks-background-muted:hover {
  background-color: var(--button-muted-hover-bg);
}
.bricks-button.outline.bricks-color-muted {
  background-color: transparent;
  color: var(--button-muted-bg);
  border: 2px solid var(--button-muted-bg);
}
.bricks-button.outline.bricks-color-muted:hover {
  background-color: var(--button-muted-bg);
  color: var(--button-muted-text);
}

/* Info */
.bricks-button.bricks-background-info {
  background-color: var(--button-info-bg);
  color: var(--button-info-text);
}
.bricks-button.bricks-background-info:hover {
  background-color: var(--button-info-hover-bg);
}
.bricks-button.outline.bricks-color-info {
  background-color: transparent;
  color: var(--button-info-bg);
  border: 2px solid var(--button-info-bg);
}
.bricks-button.outline.bricks-color-info:hover {
  background-color: var(--button-info-bg);
  color: var(--button-info-text);
}

/* Success */
.bricks-button.bricks-background-success {
  background-color: var(--button-success-bg);
  color: var(--button-success-text);
}
.bricks-button.bricks-background-success:hover {
  background-color: var(--button-success-hover-bg);
}
.bricks-button.outline.bricks-color-success {
  background-color: transparent;
  color: var(--button-success-bg);
  border: 2px solid var(--button-success-bg);
}
.bricks-button.outline.bricks-color-success:hover {
  background-color: var(--button-success-bg);
  color: var(--button-success-text);
}

/* Warning */
.bricks-button.bricks-background-warning {
  background-color: var(--button-warning-bg);
  color: var(--button-warning-text);
}
.bricks-button.bricks-background-warning:hover {
  background-color: var(--button-warning-hover-bg);
}
.bricks-button.outline.bricks-color-warning {
  background-color: transparent;
  color: var(--button-warning-bg);
  border: 2px solid var(--button-warning-bg);
}
.bricks-button.outline.bricks-color-warning:hover {
  background-color: var(--button-warning-bg);
  color: var(--button-warning-text);
}

/* Danger */
.bricks-button.bricks-background-danger {
  background-color: var(--button-danger-bg);
  color: var(--button-danger-text);
}
.bricks-button.bricks-background-danger:hover {
  background-color: var(--button-danger-hover-bg);
}
.bricks-button.outline.bricks-color-danger {
  background-color: transparent;
  color: var(--button-danger-bg);
  border: 2px solid var(--button-danger-bg);
}
.bricks-button.outline.bricks-color-danger:hover {
  background-color: var(--button-danger-bg);
  color: var(--button-danger-text);
}