/*
 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 {
    /* Base Font Sizes */
    --body-text: 18px; /* Base Body Font */
    --large-text: calc(var(--body-text) * 1.125); /* 20.25px */
    --extra-large-text: calc(var(--body-text) * 1.25); /* 22.5px */

    /* Heading Font Sizes */
    --h1-text: 60px;
    --h2-text: 50px;
    --h3-text: 43px;
    --h4-text: 35px;
    --h5-text: 28px;
    --h6-text: var(--large-text); /* 20.25px */
}

@media (max-width: 1024px) {
    :root {
        /* Adjusted Font Sizes for Tablets */
        --body-text: 16px; /* Reduced Base Body Font */
        --large-text: calc(var(--body-text) * 1.125); /* 18px */
        --extra-large-text: calc(var(--body-text) * 1.25); /* 20px */

        --h1-text: 50px;
        --h2-text: 43px;
        --h3-text: 35px;
        --h4-text: 30px;
        --h5-text: 24px;
        --h6-text: calc(var(--body-text) * 1.125); /* 18px */
    }
}

@media (max-width: 767px) {
    :root {
        /* Adjusted Font Sizes for Mobile */
        --body-text: 15px; /* Reduced Body Font Size */
        --large-text: calc(var(--body-text) * 1.125); /* 16.88px */
        --extra-large-text: calc(var(--body-text) * 1.25); /* 18.75px */

        --h1-text: 43px;
        --h2-text: 35px;
        --h3-text: 30px;
        --h4-text: 25px;
        --h5-text: 20px;
        --h6-text: calc(var(--body-text) * 1.125); /* 16.88px */
    }
}

@media (max-width: 478px) {
    :root {
        /* Adjusted Font Sizes for Mobile Portrait */
        --body-text: 14px; /* Smallest Body Font Size */
        --large-text: calc(var(--body-text) * 1.125); /* 15.75px */
        --extra-large-text: calc(var(--body-text) * 1.25); /* 17.5px */

        --h1-text: 35px;
        --h2-text: 30px;
        --h3-text: 25px;
        --h4-text: 20px;
        --h5-text: 18px;
        --h6-text: calc(var(--body-text) * 1); /* 14px */
    }
}