/*
 Theme Name:   dots & boxes Basic Theme
 Theme URI:    https://dotsnboxes.de
 Description:  Basic child theme for bricks builder
 Author:       dots & boxes
 Author URI:   https://dotsnboxes.de
 Template:     bricks
 Version:      1.0
 Text Domain:  dnb-child
*/
html.dnb-theme-dark {
  color-scheme: dark;
}
:root {
  --body-font: "Inter", sans-serif;
  --heading-font: "Inter", sans-serif;

  --btn-border-radius: var(--radius-xs);
  --btn-text-size: var(--text-lg);
  --btn-border-with: 0;

  --link-text-size: var(--text-base);
  --link-text-decoration: none;
  --link-letter-spacing: 0;

  /* Brand Colors */
}
:root,
:root.dnb-theme-dark .theme-inverted,
:root.dnb-theme-dark .theme-always-light,
:root.dnb-theme-light .theme-inverted .theme-always-light {
  /* #GROUP: Colors */
  --primary: hsla(238, 100%, 62%, 1);
  --primary-d-1: hsla(240, 56%, 50%, 1);
  --primary-d-2: hsla(243, 54%, 37%, 1);
  --primary-l-1: hsla(247, 100%, 70%, 1);
  --primary-l-2: hsla(251, 100%, 77%, 1);
  --secondary: hsla(198, 74%, 51%, 1);
  --secondary-d-1: hsla(199, 63%, 42%, 1);
  --secondary-d-2: hsla(200, 55%, 32%, 1);
  --secondary-l-1: hsla(202, 71%, 65%, 1);
  --secondary-l-2: hsla(203, 70%, 75%, 1);
  --action: #fa6161;
  --action-d-1: #b64b49;
  --action-d-2: #773432;
  --action-l-1: #ff8b85;
  --action-l-2: #ffb4ad;
  --bg-body: hsla(0, 0%, 90%, 1);
  --bg-btn: hsla(336, 97%, 63%, 1);
  --text-body: hsla(0, 0%, 25%, 1);
  --text-title: hsla(0, 0%, 0%, 1);
  --link-text: var(--action);
  --success: #24f95d;
  --error: #f92444;
  --light: #fff;
  --dark: #000;
  /* #ENDGROUP */
}
@media screen and (max-width: 768px) {
  :root {
    --side-margin: 1rem;
    --grid-gap: 1rem;
  }
}

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

body,
p {
  color: var(--text-body);
  font-size: var(--text-base);
  font-family: var(--body-font);
}

.headline,
h6,
h5,
h4,
h3,
h2,
h1 {
  font-family: var(--heading-font);
  color: var(--text-title);
}

/* --- Compontents --- */
.highlight {
  --action: var(--secondary);
  --text-body: var(--light);
  --text-title: var(--light);
  background: var(--primary);
  padding-block: var(--space-xl);
}

.highlight.secondary {
  --action: var(--primary);
  --text-body: var(--dark);
  --text-title: var(--dark);
  background: var(--secondary-l-2);
}

.badge {
  --badge-text: var(--primary);
  --bdge-bg: var(--secondary-l-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4xs);
  padding: var(--space-2xs) var(--space-s);
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: var(--text-s);
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 0;
  outline: 0;
}
.badge.secondary {
  --badge-text: var(--secondary);
  --bdge-bg: var(--primary);
}

/* -----------------
--- Form Elements ---- 
----------------- */
.brxe-form {
  --border-color: darkgray;
  --border-color-accent: var(--primary-l-1);
}
/* Inputs */
.brxe-form input,
.brxe-form textarea {
  transition: all 0.25s ease-in-out;
  appearance: none;
}
.brxe-form input:focus,
.brxe-form textarea:focus {
  border-color: var(--border-color-accent);
  outline: 1px solid var(--border-color-accent);
}
@media (hover: hover) {
  .brxe-form input:hover,
  .brxe-form textarea:hover {
    border-color: var(--border-color-accent);
  }
}
.brxe-form input::placeholder,
.brxe-form textarea::placeholder {
  color: var(--border-color);
}
/* Selects */
.brxe-form select {
  transition: all 0.25s ease-in-out;
}
.brxe-form select:focus {
  outline: 1px solid var(--border-color-accent);
}
@media (hover: hover) {
  .brxe-form select:hover {
    border-color: var(--border-color-accent);
  }
}
/* Checkboxes */
.brxe-form ul.options-wrapper li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.brxe-form input[type="checkbox"] {
  appearance: none;
  display: grid;
  place-content: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  width: 1em;
  height: 1em;
}
.brxe-form input[type="checkbox"]:checked:before {
  transform: scale(1);
}
.brxe-form input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.75em;
  box-shadow: inset 1em 1em var(--border-color-accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform 0.2s;
}
@media (hover: hover) {
  .brxe-form input[type="checkbox"]:hover {
    border-color: var(--border-color-accent);
  }
}
.brxe-form input[type="checkbox"]:focus {
  outline: 2px solid var(--border-color-accent);
}
/* Radio Buttons */
.brxe-form input[type="radio"] {
  appearance: none;
  display: grid;
  place-content: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  width: clamp(1.13rem, calc(-0.42vw + 1.46rem), 1.38rem);
  height: clamp(1.13rem, calc(-0.42vw + 1.46rem), 1.38rem);
}
.brxe-form input[type="radio"]:checked:before {
  transform: scale(1);
}
.brxe-form input[type="radio"]::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 100%;
  transform: scale(0);
  transition: transform 0.2s;
  background: var(--border-color-accent);
}
@media (hover: hover) {
  .brxe-form input[type="radio"]:hover {
    border-color: var(--border-color-accent);
  }
}
.brxe-form input[type="radio"]:focus {
  outline: 1px solid var(--border-color-accent);
}

.round-heading { 
  width: var(--rh-diameter, 240px);
  height: var(--rh-diameter, 240px);
  display: inline-grid;
  place-items: center;
}

.round-heading .rh-svg { width:100%; height:100%; display:block; overflow: visible }
.round-heading .rh-text { 
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;      
  fill: currentColor;          
}

.round-heading--left  { transform: translate(-35%, 0); }
.round-heading--right { transform: translate( 35%, 0); }

/* Auto-Phase unsichtbar, aber platzhaltend */
.round-heading.is-pending { visibility: hidden; }