/************************************************
* Theme Name:   AzTech Signs
*
* Author:       Alexis Soucie for Felt Hat
* Author URI:   felthat.com
*
* Template:     twentytwentyfive
* Text Domain:  aztech
************************************************/


/************************************************
* Variables, Fonts, & Colors
************************************************/
@font-face {
  font-family: 'Soehne Halbfett';
  src: url('fonts/soehne-halbfett.woff2') format('woff2');
}

@font-face {
    font-family: 'Soehne Leicht';
    src: url('fonts/soehne-leicht.woff2') format('woff2');
}

:root {
    --white: #FFFFFF;
    --black: #231F20;
    --black-alpha: #231F20BA;
    --green: #CBDB2A;
    --green-alpha: #CBDB2ABA;
    --gap: 4px;
    --grid-square: 150px;
    --max-width-small: 404px;
    --max-width-medium: 812px;
    --max-width-large: 1220px;
    --soehne-halbfett: 'Soehne Halbfett';
    --soehne-leicht: 'Soehne Leicht';

    --wp--preset--font-size--medium: 1.6rem;
}

/************************************************
* Site-Wide Formatting & Styles
*
* Sets REM to a default 10px for easier 
* calculations of pixel to REM
************************************************/
html,
html.wp-toolbar {
    font-size: 62.5%;
}

html * {
    box-sizing: border-box;
}

body {
    background-color: var(--black);
    font-family: var(--soehne-leicht);

    .wp-site-blocks {
        margin: 0 auto;
        max-width: calc(var(--grid-square) * 2);
    }

    &.scrolling {
        .aztech-content-block {
            &.logo {
                .site-logo {
                    position: fixed;
                    top: 20px;
                    z-index: 50;
                }
            }
        }
    }
}

@media screen and (min-width: 812px) {
    body {
        .wp-site-blocks {
            max-width: var(--max-width-medium);
        }
    }
}

@media screen and (min-width: 1220px) {
    body {
        .wp-site-blocks {
            max-width: var(--max-width-large);
        }
    }
}

/************************************************
* Grid System
************************************************/
.grid {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(2, minmax(var(--grid-square), var(--grid-square)));
    gap: var(--gap);
}

@media screen and (min-width: 404px) {
    :root {
        --grid-square: 200px;
    }
}

@media screen and (min-width: 812px) {
    .grid {
        grid-template-columns: repeat(4, minmax(var(--grid-square), var(--grid-square)));
    }
}

@media screen and (min-width: 1220px) {
    .grid {
        grid-template-columns: repeat(6, minmax(var(--grid-square), var(--grid-square)));
    }
}