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


:root {
    --content-width: 800px;
    
    --text-body: 1.125rem;
    --h6: 15px;
    --h5: 18px;
    --h4: 22px;
    --h3: 26px;
    --h2: 30px;
    --h1: 44px;

    --leading-body: 1.5;
    --leading-headings: 1.1;
    --leading-tight: 1.3;
    --leading-loose: 1.8;

    --space-m: 24px;
    --space-l: 40px;
    --gutter: var(--space-m);

    --primary: #0073e6;
    --gray-100: #EBEBEB;
    --white: #fff;
    --black: #000;
}

html {
    font-size: 100%;
}
body {
    font-size: var(--text-body);
    line-height: var(--leading-body);
}
h1, h2, h3, h4, h5, h6 {
    line-height: var(--leading-headings);
}
h1 {
    font-size: var(--h1);
}
h2 {
    font-size: var(--h2);
}
h3 {
    font-size: var(--h3);
}
h4 {
    font-size: var(--h4);
}
h5 {
    font-size: var(--h5);
}
h6 {
    font-size: var(--h6);
}


.brxe-section {
    padding-inline: var(--gutter);
    padding-block: var(--space-m);
}
.brxe-container {
    width: var(--content-width);
}



.brxe-post-content {
    > * {
        margin-block-start: 0;
        margin-block-end: var(--space-m);
    }
    h2 {
        margin-block-end: 10px;
    }
}


.wp-block-separator {
    color: var(--gray-100);
    margin-block: var(--space-l);
}
.wp-block-button__link,
.bricks-button {
    background-color: var(--primary);
    color: var(--white);
    border-radius: 4px;
    padding: 12px 24px;
    line-height: var(--leading-tight);
}

li {
    margin-block: 0 8px;
    line-height: var(--leading-tight);
}
li li {
    margin-block-start: 8px;
    &:last-child {
        margin-block-end: 16px;
    }
}