/*
Theme Name:   Consero Global
Theme URI:    https://conseroglobal.com/
Description:  Consero Global child theme for Bricks Builder.
Author:       2X Marketing
Author URI:   https://2x.marketing/
Template:     bricks
Version:      1.0
Text Domain:  bricks
*/

/*====================================
  BASE
====================================*/

* {
  scrollbar-width: thin;
  scrollbar-color: var(--outline-variant) transparent;

  &::-webkit-scrollbar {
    width: var(--border-6);
    height: var(--border-6);
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--outline-variant);
    border-radius: var(--radius-sm);
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: var(--outline);
  }
}

/*====================================
  TOKENS
====================================*/

:root {
  /*=== Hue + Saturation ===*/
  --hue-primary: 204, 100%; /* Blue */
  --hue-secondary: 184, 65%; /* Teal */
  --hue-tertiary: 304, 80%; /* Fuchsia */
  --hue-quaternary: 29, 100%; /* Amber */
  --hue-error: 340, 100%; /* Red */
  --hue-neutral: 210, 10%; /* Gray */

  /*=== Surfaces ===*/
  --surface-dim: hsl(var(--hue-neutral), 87%);
  --surface: hsl(var(--hue-neutral), 98%);
  --surface-bright: hsl(var(--hue-neutral), 100%);
  --surface-inverse: hsl(var(--hue-neutral), 20%);
  --surface-container-lowest: hsl(var(--hue-neutral), 100%);
  --surface-container-low: hsl(var(--hue-neutral), 96%);
  --surface-container: hsl(var(--hue-neutral), 94%);
  --surface-container-high: hsl(var(--hue-neutral), 92%);
  --surface-container-highest: hsl(var(--hue-neutral), 90%);

  /*=== On Surface ===*/
  --on-surface: hsl(var(--hue-primary), 10%);
  --on-surface-variant: hsl(var(--hue-neutral), 30%);
  --on-surface-accent: hsl(var(--hue-secondary), 30%);
  --on-surface-inverse: hsl(var(--hue-neutral), 95%);
  --on-surface-inverse-variant: hsl(var(--hue-neutral), 75%);
  --on-surface-inverse-accent: hsl(var(--hue-secondary), 85%);

  /*=== Outlines ===*/
  --outline: hsl(var(--hue-neutral), 50%);
  --outline-variant: hsl(var(--hue-neutral), 85%);

  /*=== Primary ===*/
  --primary: hsl(var(--hue-primary), 20%);
  --on-primary: hsl(var(--hue-primary), 100%);
  --on-primary-variant: hsl(var(--hue-primary), 90%);
  --primary-container: hsl(var(--hue-primary), 95%);
  --on-primary-container: hsl(var(--hue-primary), 20%);
  --on-primary-container-variant: hsl(var(--hue-primary), 30%);

  /*=== Secondary ===*/
  --secondary: hsl(var(--hue-secondary), 30%);
  --on-secondary: hsl(var(--hue-secondary), 100%);
  --on-secondary-variant: hsl(var(--hue-secondary), 90%);
  --secondary-container: hsl(var(--hue-secondary), 95%);
  --on-secondary-container: hsl(var(--hue-secondary), 20%);
  --on-secondary-container-variant: hsl(var(--hue-secondary), 30%);

  /*=== Tertiary ===*/
  --tertiary: hsl(var(--hue-tertiary), 30%);
  --on-tertiary: hsl(var(--hue-tertiary), 100%);
  --on-tertiary-variant: hsl(var(--hue-tertiary), 90%);
  --tertiary-container: hsl(var(--hue-tertiary), 95%);
  --on-tertiary-container: hsl(var(--hue-tertiary), 20%);
  --on-tertiary-container-variant: hsl(var(--hue-tertiary), 30%);

  /*=== Quaternary ===*/
  --quaternary: hsl(var(--hue-quaternary), 35%);
  --on-quaternary: hsl(var(--hue-quaternary), 100%);
  --on-quaternary-variant: hsl(var(--hue-quaternary), 90%);
  --quaternary-container: hsl(var(--hue-quaternary), 95%);
  --on-quaternary-container: hsl(var(--hue-quaternary), 20%);
  --on-quaternary-container-variant: hsl(var(--hue-quaternary), 30%);

  /*=== Error ===*/
  --error: hsl(var(--hue-error), 30%);
  --on-error: hsl(var(--hue-error), 100%);
  --on-error-variant: hsl(var(--hue-error), 90%);
  --error-container: hsl(var(--hue-error), 95%);
  --on-error-container: hsl(var(--hue-error), 20%);
  --on-error-container-variant: hsl(var(--hue-error), 30%);

  /*=== Gradients ===*/
  --gradient-surface: var(--surface-container-highest), var(--surface);
  --on-gradient-surface: var(--on-surface);
  --on-gradient-surface-variant: var(--on-surface-variant);

  --gradient-glow: hsl(var(--hue-primary), 94%), hsl(var(--hue-tertiary), 98%), hsl(var(--hue-quaternary), 98%);
  --on-gradient-glow: hsl(var(--hue-primary), 10%);
  --on-gradient-glow-variant: hsl(var(--hue-primary), 20%);

  --gradient-accent: hsl(var(--hue-primary), 60%) -50%, hsl(var(--hue-tertiary), 30%) 100%;
  --on-gradient-accent: hsl(var(--hue-primary), 100%);
  --on-gradient-accent-variant: hsl(var(--hue-primary), 95%);

  --gradient-brand: hsl(var(--hue-tertiary), 20%) -50%, hsl(var(--hue-primary), 5%) 50%;
  --on-gradient-brand: hsl(var(--hue-primary), 100%);
  --on-gradient-brand-variant: hsl(var(--hue-primary), 90%);

  /*=== Shadows ===*/
  --shadow-2xs: 0 1px hsla(var(--hue-neutral), 0%, 0.05);
  --shadow-xs: 0 1px 2px 0 hsla(var(--hue-neutral), 0%, 0.05);
  --shadow-sm: 0 1px 3px 0 hsla(var(--hue-neutral), 0%, 0.1), 0 1px 2px -1px hsla(var(--hue-neutral), 0%, 0.1);
  --shadow-md: 0 4px 6px -1px hsla(var(--hue-neutral), 0%, 0.1), 0 2px 4px -2px hsla(var(--hue-neutral), 0%, 0.1);
  --shadow-lg: 0 10px 15px -3px hsla(var(--hue-neutral), 0%, 0.1), 0 4px 6px -4px hsla(var(--hue-neutral), 0%, 0.1);
  --shadow-xl: 0 20px 25px -5px hsla(var(--hue-neutral), 0%, 0.1), 0 8px 10px -6px hsla(var(--hue-neutral), 0%, 0.1);
  --shadow-2xl: 0 25px 50px -12px hsla(var(--hue-neutral), 0%, 0.25);
}

/*====================================
  THEME
====================================*/

.theme-brand {
  /*=== Surfaces ===*/
  --surface-dim: hsl(var(--hue-primary), 7%);
  --surface: hsl(var(--hue-primary), 10%);
  --surface-bright: hsl(var(--hue-primary), 20%);
  --surface-inverse: hsl(var(--hue-primary), 94%);
  --surface-container-lowest: hsl(var(--hue-primary), 8%);
  --surface-container-low: hsl(var(--hue-primary), 12%);
  --surface-container: hsl(var(--hue-primary), 14%);
  --surface-container-high: hsl(var(--hue-primary), 16%);
  --surface-container-highest: hsl(var(--hue-primary), 18%);

  /*=== On Surface ===*/
  --on-surface: hsl(var(--hue-primary), 94%);
  --on-surface-variant: hsl(var(--hue-neutral), 84%);
  --on-surface-accent: hsl(var(--hue-secondary), 84%);
  --on-surface-inverse: hsl(var(--hue-neutral), 10%);
  --on-surface-inverse-variant: hsl(var(--hue-neutral), 35%);
  --on-surface-inverse-accent: hsl(var(--hue-secondary), 25%);

  /*=== Outlines ===*/
  --outline: hsl(var(--hue-primary), 50%);
  --outline-variant: hsl(var(--hue-primary), 15%);

  /*=== Primary ===*/
  --primary: hsl(var(--hue-primary), 85%);
  --on-primary: hsl(var(--hue-primary), 10%);
  --on-primary-variant: hsl(var(--hue-primary), 20%);
  --primary-container: hsl(var(--hue-primary), 20%);
  --on-primary-container: hsl(var(--hue-primary), 90%);
  --on-primary-container-variant: hsl(var(--hue-primary), 80%);

  /*=== Secondary ===*/
  --secondary: hsl(var(--hue-secondary), 80%);
  --on-secondary: hsl(var(--hue-secondary), 10%);
  --on-secondary-variant: hsl(var(--hue-secondary), 20%);
  --secondary-container: hsl(var(--hue-secondary), 20%);
  --on-secondary-container: hsl(var(--hue-secondary), 90%);
  --on-secondary-container-variant: hsl(var(--hue-secondary), 80%);

  /*=== Tertiary ===*/
  --tertiary: hsl(var(--hue-tertiary), 80%);
  --on-tertiary: hsl(var(--hue-tertiary), 10%);
  --on-tertiary-variant: hsl(var(--hue-tertiary), 20%);
  --tertiary-container: hsl(var(--hue-tertiary), 20%);
  --on-tertiary-container: hsl(var(--hue-tertiary), 90%);
  --on-tertiary-container-variant: hsl(var(--hue-tertiary), 80%);

  /*=== Quaternary ===*/
  --quaternary: hsl(var(--hue-quaternary), 80%);
  --on-quaternary: hsl(var(--hue-quaternary), 10%);
  --on-quaternary-variant: hsl(var(--hue-quaternary), 20%);
  --quaternary-container: hsl(var(--hue-quaternary), 20%);
  --on-quaternary-container: hsl(var(--hue-quaternary), 90%);
  --on-quaternary-container-variant: hsl(var(--hue-quaternary), 80%);

  /*=== Error ===*/
  --error: hsl(var(--hue-error), 80%);
  --on-error: hsl(var(--hue-error), 10%);
  --on-error-variant: hsl(var(--hue-error), 20%);
  --error-container: hsl(var(--hue-error), 20%);
  --on-error-container: hsl(var(--hue-error), 90%);
  --on-error-container-variant: hsl(var(--hue-error), 80%);

  /*=== Gradients ===*/
  --gradient-surface: var(--surface-container-highest), var(--surface);
  --on-gradient-surface: var(--on-surface);
  --on-gradient-surface-variant: var(--on-surface-variant);

  --gradient-glow: hsl(var(--hue-primary), 80%), hsl(var(--hue-tertiary), 90%), hsl(var(--hue-quaternary), 90%);
  --on-gradient-glow: hsl(var(--hue-primary), 10%);
  --on-gradient-glow-variant: hsl(var(--hue-primary), 20%);

  --gradient-accent: hsl(var(--hue-primary), 60%) -50%, hsl(var(--hue-tertiary), 30%) 100%;
  --on-gradient-accent: hsl(var(--hue-primary), 100%);
  --on-gradient-accent-variant: hsl(var(--hue-primary), 90%);

  --gradient-brand: hsl(var(--hue-tertiary), 20%) -50%, hsl(var(--hue-primary), 5%) 50%;
  --on-gradient-brand: hsl(var(--hue-primary), 100%);
  --on-gradient-brand-variant: hsl(var(--hue-primary), 90%);
}

:is(.theme-brand) {
  img[src$=".svg"] {
    filter: saturate(0) invert(1) brightness(2);
  }
}

/*====================================
  Contextual Spacing
====================================*/

:is(.brxe-post-content, .brxe-text, .brxe-post-excerpt) {
  :is(figure, picture) > * {
    margin-top: 0;
    margin-bottom: 0;
  }

  :is(ol, ul) > li {
    padding-inline-start: 0.325em;
  }

  :is(ul, ol) > li > p:first-child {
    margin-top: 1.25em;
  }

  :is(ul, ol) > li > p:last-child {
    margin-bottom: 1.25em;
  }

  :is(hr, h2, h3, h4) + * {
    margin-top: 0 !important;
  }

  > :first-child {
    margin-top: 0 !important;
    margin-bottom: 0.5em;
  }

  > :last-child {
    margin-bottom: 0 !important;
  }
}

/*====================================
  TYPOGRAPHY
====================================*/

:where(.brxe-post-content, .brxe-text, .brxe-post-excerpt) {
  --heading-strong: var(--on-surface);
  --text-strong: var(--on-surface);
  --text-muted: var(--on-surface-variant);
  --text-caption: var(--on-surface-variant);
  --link-default: var(--tertiary);
  --list-counter: var(--secondary);
  --list-bullet: var(--primary);
  --border-default: var(--outline-variant);
  --border-divider: var(--outline-variant);
  --border-strong: var(--outline);
  --border-accent: var(--secondary);
  --quote-text: var(--on-surface);
  --kbd-text: var(--on-warning-container);
  --code-text: var(--primary);
  --code-block-text: var(--on-surface-container);
  --code-surface: var(--surface-container);

  [class~="lead"] {
    color: var(--text-strong);
    font-size: 1.125em;
    line-height: 1.6;
  }

  a {
    color: var(--link-default);
    font-weight: 600;
	text-decoration: underline;
	text-underline-offset: var(--space-1); 
	  
	  &:hover {
	    filter: brightness(0.5);
	  }
  }

  strong {
    color: var(--text-strong);
    font-weight: 700;
  }

  :is(a, blockquote, thead th) strong {
    color: inherit;
  }

  ol > li::marker {
    font-weight: 700;
    color: var(--list-counter);
  }

  ul > li::marker {
    color: var(--list-bullet);
  }

  dt {
    color: var(--heading-strong);
    font-weight: 700;
  }

  :is(hr, .wp-block-separator) {
    border-color: var(--border-divider);
    border-top-width: var(--border-1);
  }

  blockquote {
    border-inline-start-color: var(--border-accent);
    border-inline-start-width: 0.25rem;
    color: var(--quote-text);
    font-size: var(--text-lg);
    font-weight: 500;
    padding-inline-start: 1em;
    quotes: "\201C" "\201D" "\2018" "\2019";
  }

  blockquote p:first-of-type:before {
    content: open-quote;
  }

  blockquote p:last-of-type:after {
    content: close-quote;
  }

  :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 300;
  }

  kbd {
    font-weight: 500;
    font-family: inherit;
    color: var(--kbd-text);
    border: 1px solid var(--color-current);
    box-shadow: var(--shadow-sm);
    font-size: 0.875em;
    border-radius: 0.3125rem;
    padding-top: 0.1875em;
    padding-inline-end: 0.375em;
    padding-bottom: 0.1875em;
    padding-inline-start: 0.375em;
  }

  code {
    color: var(--code-text);
    font-weight: 700;
    font-size: 0.875em;
  }

  code:before {
    content: "`";
  }

  code:after {
    content: "`";
  }

  :is(a, h1, h2, h3, h4, blockquote, thead th) code {
    color: inherit;
  }

  h2 code {
    font-size: 0.875em;
  }

  h3 code {
    font-size: 0.9em;
  }

  pre {
    background-color: var(--code-surface);
    color: var(--code-block-text);
    overflow-x: auto;
    font-weight: 400;
    font-size: 0.875em;
    line-height: 1.7142857;
    margin-top: 1.7142857em;
    margin-bottom: 1.7142857em;
    border-radius: 0.375rem;
    padding-top: 2em;
    padding-inline-end: 1.5em;
    padding-bottom: 2em;
    padding-inline-start: 1.5em;
  }

  pre code {
    background-color: transparent;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    text-wrap: nowrap;
    width: fit-content;
  }

  pre code:before {
    content: none;
  }

  pre code:after {
    content: none;
  }

  table {
    width: 100%;
    table-layout: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 0.875em;
    line-height: 1.7142857;
  }

  th,
  td,
  .wp-block-table :is(th, td) {
    text-align: start;
    border: inherit;
    padding: inherit;
  }

  thead {
    border-bottom-width: var(--border-1);
    border-bottom-color: var(--border-strong);
  }

  :is(thead, .wp-block-table) th {
    border: revert-layer;
    color: var(--heading-strong);
    font-weight: 700;
    line-height: 1.375;
    vertical-align: bottom;
    padding-inline-end: 0.5714286em;
    padding-bottom: 0.5714286em;
    padding-inline-start: 0.5714286em;
  }

  tbody tr {
    border-bottom-width: var(--border-1);
    border-bottom-color: var(--border-default);
    border-bottom-style: solid;
  }

  tbody tr:last-child {
    border-bottom-width: var(--space-0);
  }

  tbody td {
    border: revert-layer;
    vertical-align: baseline;
  }

  tfoot {
    border-top-width: var(--border-1);
    border-top-color: var(--border-strong);
  }

  tfoot td {
    vertical-align: top;
  }

  thead th:first-child {
    padding-inline-start: 0;
  }

  thead th:last-child {
    padding-inline-end: 0;
  }

  :is(tbody, tfoot, .wp-block-table) td {
    padding-top: 0.5714286em;
    padding-inline-end: 0.5714286em;
    padding-bottom: 0.5714286em;
    padding-inline-start: 0.5714286em;
  }

  tbody td:first-child,
  tfoot td:first-child {
    padding-inline-start: 0;
  }

  tbody td:last-child,
  tfoot td:last-child {
    padding-inline-end: 0;
  }

  figcaption {
    color: var(--text-caption);
    font-size: 0.875em;
    line-height: 1.4285714;
  }
}

/*====================================
  Forms
====================================*/

:is(.brxe-hubspot-form-embed) {
  --form-error: hsl(var(--hue-error), 30%);
  --form-outline: hsl(var(--hue-neutral), 80%);
  --form: hsl(var(--hue-neutral), 100%);
  --input: hsl(var(--hue-neutral), 99%);
  --on-form: hsl(var(--hue-neutral), 10%);
  --on-input: hsl(var(--hue-neutral), 20%);
  box-shadow: var(--shadow-lg);
  max-width: var(--container-2xl);
  width: var(--size-full);

  .hs-form {
    background-color: var(--form);
    border-radius: var(--radius-lg);
    border: var(--border-1) solid var(--form-outline);
    color: var(--on-form);
    column-gap: var(--space-5);
    display: grid;
    padding-block: var(--space-12);
    padding-inline: clamp(2rem, 1.2952rem + 2.8194vw, 4rem);
    row-gap: var(--space-6);
    width: var(--size-full);
  }

  [class*="form-columns-"] {
    column-gap: var(--space-5);
    display: grid;
    grid-template-columns: var(--grid-template-xs);
    max-width: var(--size-full) !important;
    row-gap: var(--space-4);
  }

  .hs-form-field {
    align-content: start;
    display: grid;
    float: none !important;
    position: relative;
    row-gap: var(--space-1);
    width: var(--size-full) !important;
  }

  label {
    color: var(--on-form);
    column-gap: var(--space-0-5);
    display: inline-flex;
    margin: var(--space-0);
  }

  .input {
    border: 0;
    display: grid;
    line-height: revert-layer;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hs-input:not([type="submit"]) {
    background-color: var(--input);
    border-color: var(--form-outline);
    border-radius: var(--radius-lg);
    border-style: solid;
    border-width: var(--border-1);
    color: var(--on-input);
    height: var(--space-12);
    outline: 0;
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    transition: 100ms ease;
    width: var(--size-full) !important;

    &:hover {
      background-color: hsl(var(--hue-neutral), 97%);
      border-color: hsl(var(--hue-neutral), 60%);
    }

    &:focus {
      background-color: hsl(var(--hue-neutral), 100%);
      border-color: hsl(var(--hue-primary), 50%);
      box-shadow: 0 0 0 2px hsl(var(--hue-primary), 80%, 85%);
      outline: none;
    }

    &:active {
      background-color: hsl(var(--hue-neutral), 95%);
      border-color: hsl(var(--hue-primary), 40%);
    }

    &.error {
      border-color: var(--form-error);
    }
  }

  .hs-error-msgs {
    font-size: var(--text-2xs);
    line-height: var(--leading-tight);
    list-style: none;
    padding: var(--space-0) var(--space-1);
    position: absolute;
    inset-block-end: calc(var(--space-4) * -1);
  }

  .hs-error-msg {
    color: var(--form-error);
    margin: var(--space-0);
    padding: var(--space-0);
  }

  .hs-form-required {
    color: var(--form-error);
  }

  .hs-submit {
    margin-block-start: var(--space-4);
  }

  .hs-button {
    background-image: linear-gradient(to right, var(--gradient-accent));
    border: 0;
    border-radius: var(--radius-full);
    color: var(--on-gradient-accent);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--text-base);
    font-weight: 700;
    height: var(--space-12);
    letter-spacing: var(--tracking-wide);
    line-height: var(--leading-none);
    padding-block: var(--space-0) var(--space-0-5);
    padding-inline: var(--space-5);
    text-align: center;
    transition: 100ms ease;
    width: var(--size-full);

    &:hover {
      filter: brightness(0.9);
    }

    &:focus {
      outline: var(--border-2) solid hsl(var(--hue-primary), 60%);
      outline-offset: var(--border-2);
    }

    &:active {
      filter: brightness(0.85);
    }
  }

  :focus-visible {
    outline: var(--border-2) solid hsl(var(--hue-primary), 60%);
    outline-offset: var(--border-2);
  }

  /* remove for production */
  .hs-recaptcha {
    display: none;
  }
}