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

/* Default Font Sizes Calculation */
:root {
    --body-font-size: 16px; /* Base Body Font */
    --lb-font: calc(var(--body-font-size) * 1.125); /* 18px */
    --xlb-font: calc(var(--body-font-size) * 1.25); /* 20px */

    --h1-font: calc(var(--body-font-size) * 4.625); /* 74px */
    --h2-font: calc(var(--body-font-size) * 3); /* 48px */
    --h3-font: calc(var(--h2-font) * 0.8); /* Approx. 38px */
    --h5-font: calc(var(--body-font-size) * 1.5); /* 24px */
    --h4-font: calc((var(--h3-font) + var(--h5-font)) / 2); /* Midpoint */
    --h6-font: var(--large-body-font-size); /* 18px */
}

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    :root {
        --h1-font: calc(var(--body-font-size) * 4); /* Slightly reduced scaling */
        --h2-font: calc(var(--body-font-size) * 2.7);
        --h3-font: calc(var(--body-font-size) * 2.1);
        --h4-font: calc((var(--h3-font) + var(--body-font-size) * 1.5) / 2);
        --h5-font: calc(var(--body-font-size) * 1.4);
    }
}

/* Mobile (767px and below) */
@media (max-width: 767px) {
    :root {
		--lb-font: calc(var(--body-font-size) * 1.05); /* 18px */
		--xlb-font: calc(var(--body-font-size) * 1.125); /* 20px */
		
        --h1-font: calc(var(--body-font-size) * 3.6); /* Adjusted for smaller screens */
        --h2-font: calc(var(--body-font-size) * 2.5);
        --h3-font: calc(var(--body-font-size) * 1.9);
        --h4-font: calc((var(--h3-font) + var(--body-font-size) * 1.4) / 2);
        --h5-font: calc(var(--body-font-size) * 1.3);
        --h6-font: calc(var(--body-font-size) * 1.125); /* 16px → 15px */
    }
}

/* Mobile Portrait (478px and below) */
@media (max-width: 478px) {
    :root {
        --h1-font: calc(var(--body-font-size) * 3); /* Further reduced scaling */
        --h2-font: calc(var(--body-font-size) * 2);
        --h3-font: calc(var(--body-font-size) * 1.5);
        --h4-font: calc((var(--h3-font) + var(--body-font-size) * 1.3) / 2);
        --h5-font: calc(var(--body-font-size) * 1.2);
        --h6-font: calc(var(--body-font-size) * 1); /* Matches body font size for better balance */
    }
}