/* #BASE CSS (Initital Setup)
---------------------------------
    #GLOBAL STYLING
        # GLOBAL VARIABLES
        # GLOBAL RESETS
        # GLOBAL COLORS
    #BASE CONTENT
        #TYPOGRAPHY
            #BODY
            #HEADINGS
            #PARAGRAPHS
        #HELPERS
        #MEDIA
            #IMAGES
            #VIDEO
        #COMPONENTS
            #BUTTONS
    #BASE LAYOUT
        #CONTAINER
        #MEDIA QUERIES
        #GRID SYSTEM
    #BASE SITE
        #SITE STRUCTURE
            #HEADER
                # site-logo (LOGO)
            #SITE NAVIGATION
                # toggle-nav (Default for Small Screens)
            #FOOTER
            #SECTIONS
            #SUB PAGES
                #...

/* ----------------------------- */
/* ----- GLOBAL STYLING -------- */
/* ----------------------------- */

/* ----- SET GLOBAL VARIABLES ----- */
    :root {
        /* BASE COLORS */
        --color-body-background: rgb(255, 255, 255);
        --color-text-body: rgba(0,0,0,0.8);
        --color-text-headings: rgba(0,0,0,1);
        --color-links: #003366;
        --color-links-hover: #000033;

        /* BASE TYPOGRAPHY */
        --font-body: system-ui, Helvetica, Arial, sans-serif;
        --font-headings: system-ui, Helvetica, Arial, sans-serif;
}

/* GLOBAL RESETS */
    
    /* CHANGE BOX-SIZING FOR ALL TO BORDER-BOX */
    * { box-sizing: border-box; }

    /* REMOVE MARGIN ON BODY */
    body { margin: 0; }

    /* ENABLE SMOOTH SCROLLING */
    html { scroll-behavior: smooth; }

/* GLOBAL COLORS */

    /* SET BODY BACKGROUND COLOR */
    body {
        background-color: var(--color-body-background);
    }

    /* SET BODY TEXT COLOR */
    body {
        color: var(--color-text-body);
    }

    /* SET HEADING TEXT COLOR */
    h1, h2, h3, h4, h5, h6 {
        color: var(--color-text-headings);
    }

/* ----------------------------- */
/* ------- BASE CONTENT -------- */
/* ----------------------------- */

/* BASE TYPOGRAPHY */

    body {
    
        /* SET GLOBAL BODY FONT */
        font-family: var(--font-body);

        /* SET DEFAULT FONT SIZE */
        /* 100% = 16px = 1em = 1rem */
        font-size: 100%;

        /* SET DEFAULT LEADING (LINE HEIGHT) */
        line-height: 1.4;
    
    }

    /* ALL HEADINGS */
    h1, h2, h3, h4, h5, h6 {

        /* SET GLOBAL HEADING FONT */
        font-family: var(--font-headings);

        /* SET ALL HEADINGS MARGINS */
        margin: 1em 0 0.5em 0;

        /* BALANCE WORDS PER LINE FOR ALL HEADINGS */
        text-wrap: balance;
    }   

    /* TYPOGRAPHIC SCALE FOR HEADINGS */
    h1 { 
        /* 48px = 3em */
        font-size: 3em;
        line-height: 1;
    }
    h2 {
        /* 36px = 2.25em */
        font-size: 2.25em;
        line-height: 1.1;
    }
    h3 {
        /* 24px = 1.5em */
        font-size: 1.5em;
        line-height: 1.2;
    }
    h4 {
        /* 21px = 1.3125em */
        font-size: 1.3125em;
        line-height: 1.3;
    }
    h5 {
        /* 18px = 1.125em */
        font-size: 1.125em;
        line-height: 1.35;
    }
    h6 {
        /* 16px = 1em */
        font-size: 1em;
        line-height: 1.4;
    }

    /* PARAGRAPHS */
    p {
        /* SET PARAGRAPH MARGINS */
        margin: .5em 0;

        /* LIMIT NUMBER OF CHARACTERS PER LINE */
        max-width: 65ch;

        /* FIX ALL WIDOWS */
        text-wrap: pretty;
    }

/* HELPERS */

.text-centered {
    text-align: center;
}

p.text-centered {
    margin-inline: auto;
}

/* RESPONSIVE MEDIA */
img {
    max-width: 100%;
    height: auto;
}

/* COMPONENTS */
    
    /* BUTTONS */
    .button, button{
        display: inline-block;
        background-color: var(--color-links);
        color: white;
        text-transform: uppercase;
        text-decoration: none;
        padding: 1em 1.5em;
        margin-block-end: .25em;
        letter-spacing: 1px;
        font-size: inherit;
        font-family: inherit;
        font-weight: bold;
        line-height: 1;
        border: 1px solid var(--color-links);
        border-radius: 10px;
        cursor: pointer;

        &:hover {
            background-color: var(--color-links-hover);
            color: white;
        }

        &.alt {
            background-color: transparent;
            color: var(--color-links);

            &:hover {
                background-color: var(--color-links);
                color: white;
            }
        }

    }