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

/*************** ZamyCSS Framework  ***********/

/*  Import Fonts */
@font-face {
  font-family: "Inter";
  src: url("/wp-content/uploads/fonts/inter-var.woff2");
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  /* cursor: url("/wp-content/uploads/navigation-arrow-fill.svg"), auto;  */
}

/*  Content Grid */

.content-grid {
  --full: minmax(var(--gutter), 1fr);
  padding-inline: 0;
  column-gap: 0 !important;
  display: grid !important;
  grid-template-columns:
    [full-start] var(--full)
    [feature-max-start] minmax(0, var(--feature-max-width, 100px))
    [feature-start] minmax(0, var(--feature-width, 50px))
    [content-start] min(var(--content-width), 100% - var(--gutter) * 2)
    [content-end]
    minmax(0, var(--feature-width, 50px))
    [feature-end] minmax(0, var(--feature-max-width, 100px))
    [feature-max-end] var(--full) [full-end];
}

.content--feature {
  grid-column: feature;
}

.content--feature-max {
  grid-column: feature-max;
}

.content--full {
  grid-column: full;
}

.content--full-safe {
  grid-column: full;
  padding-inline: var(--gutter);
}

.content-grid
  > :not(
    .content--feature,
    .content--feature-max,
    .content--full,
    .content--full-safe
  ) {
  width: 100%;
}

.content-grid
  > :where(
    :not(
        .content--feature,
        .content--feature-max,
        .content--full,
        .content--full-safe
      )
  ) {
  grid-column: content;
}

:is(
    .content--feature,
    .content--feature-max,
    .content--full,
    .content--full-safe
  ):not(
    .content-grid--off
      :is(
        .content--feature,
        .content--feature-max,
        .content--full,
        .content--full-safe
      )
  ) {
  width: 100% !important;
  max-width: 100%;
}

/****************** Utility Classes ******************/

/* Text Size Classes */
.text--xs {
  font-size: var(--text-xs);
}
.text--s {
  font-size: var(--text-s);
}
.text--m {
  font-size: var(--text-m);
}
.text--l {
  font-size: var(--text-l);
}
.text--xl {
  font-size: var(--text-xl);
}
.text--xxl {
  font-size: var(--text-xxl);
}

/* Text Color */

.text--primary {
  color: var(--primary);
}

.text--secondary {
  color: var(--secondary);
}

.text--accent {
  color: var(--accent);
}

.text--base {
  color: var(--base);
}

.text--neutral {
  color: var(--neutral);
}

.text--tertiary {
  color: var(--tertiary);
}

.text--white {
  color: var(--white);
}

.text--black {
  color: var(--black);
}

/* Text Weight */
.text--100 {
  font-weight: 100;
}

.text--200 {
  font-weight: 200;
}

.text--300 {
  font-weight: 300;
}

.text--400 {
  font-weight: 400;
}

.text--500 {
  font-weight: 500;
}

.text--600 {
  font-weight: 600;
}

.text--700 {
  font-weight: 700;
}

.text--800 {
  font-weight: 800;
}

.text--900 {
  font-weight: 900;
}

/* Text Styles */
.text--uppercase {
  text-transform: uppercase;
}

.text--lowercase {
  text-transform: lowercase;
}

.text--capitalize {
  text-transform: capitalize;
}

/* Spacing Classes */
.gap--m {
  gap: var(--space-m);
}
.gap--s {
  gap: var(--space-s);
}
.gap--xs {
  gap: var(--space-xs);
}
.gap--l {
  gap: var(--space-l);
}
.gap--xl {
  gap: var(--space-xl);
}
.gap--xxl {
  gap: var(--space-xxl);
}
.grid-gap {
  gap: var(--grid-gap);
}

/* Grid Classes */
.grid--1 {
  display: grid;
  grid-template-columns: var(--grid-1);
}
.grid--2 {
  display: grid;
  grid-template-columns: var(--grid-2);
}
.grid--3 {
  display: grid;
  grid-template-columns: var(--grid-3);
}
.grid--4 {
  display: grid;
  grid-template-columns: var(--grid-4);
}
.grid--5 {
  display: grid;
  grid-template-columns: var(--grid-5);
}
.grid--6 {
  display: grid;
  grid-template-columns: var(--grid-6);
}
.grid--7 {
  display: grid;
  grid-template-columns: var(--grid-7);
}
.grid--8 {
  display: grid;
  grid-template-columns: var(--grid-8);
}
.grid--9 {
  display: grid;
  grid-template-columns: var(--grid-9);
}
.grid--10 {
  display: grid;
  grid-template-columns: var(--grid-10);
}
.grid--11 {
  display: grid;
  grid-template-columns: var(--grid-11);
}
.grid--12 {
  display: grid;
  grid-template-columns: var(--grid-12);
}
.grid--1-2 {
  display: grid;
  grid-template-columns: var(--grid-1-2);
}
.grid--1-3 {
  display: grid;
  grid-template-columns: var(--grid-1-3);
}
.grid--2-1 {
  display: grid;
  grid-template-columns: var(--grid-2-1);
}
.grid--2-3 {
  display: grid;
  grid-template-columns: var(--grid-2-3);
}
.grid--3-1 {
  display: grid;
  grid-template-columns: var(--grid-3-1);
}

/* Border Radius Classes */
.radius--xs {
  border-radius: var(--radius-xs);
}
.radius--s {
  border-radius: var(--radius-s);
}
.radius--m {
  border-radius: var(--radius-m);
}
.radius--l {
  border-radius: var(--radius-l);
}
.radius--full {
  border-radius: var(--radius-full);
}

/*  Unset all properties */
:is(.unset) {
	all:unset;
}

.link {
	--_color:var(--primary);
	color:var(--_color);
	text-decoration:underline;
}

/* Button with Modifiers */
/* .btn {
  line-height: 1;
  cursor: pointer;
  padding-inline: var(--btn-padding-inline);
  padding-block: var(--btn-padding-block);
  background: var(--btn-bg);
  border: var(--btn-border-style) var(--btn-border-thickness)
    var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  color: var(--btn-text-color);

  &.btn--base {
    --btn-bg: var(--base);
    --btn-text-color: var(--white);
    --btn-border-color: var(--base);
  }

  &.btn--primary {
    --btn-bg: var(--primary);
    --btn-text-color: var(--white);
    --btn-border-color: var(--primary);
  }

  &.btn--secondary {
    --btn-bg: var(--secondary);
    --btn-text-color: var(--white);
    --btn-border-color: var(--secondary);
  }

  &.btn--tertiary {
    --btn-bg: var(--tertiary);
    --btn-text-color: var(--white);
    --btn-border-color: var(--tertiary);
  }

  &.btn--accent {
    --btn-bg: var(--accent);
    --btn-text-color: var(--white);
    --btn-border-color: var(--accent);
  }

  &.btn--outline {
    --btn-bg: var(--white);

    &.btn--base {
      --btn-text-color: var(--base);
    }

    &.btn--primary {
      --btn-text-color: var(--primary);
    }

    &.btn--secondary {
      --btn-text-color: var(--secondary);
    }

    &.btn--tertiary {
      --btn-text-color: var(--tertiary);
    }

    &.btn--accent {
      --btn-text-color: var(--accent);
    }
  }
}
 */