/* #BASE CSS (Initital Setup)
---------------------------------
    #GLOBAL SETTINGS
        # 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
                #...
--------------------------------- */

/* ------------------------------ */
/* --------- GLOBALS ------------ */
/* ------------------------------ */

/* GLOBAL VARIABLES */

:root {

    /* DEFINE BASE COLORS */
    --color-body-background: rgb(255, 255, 255);
    --color-text-body: rgba(0, 0, 0, 0.8);
    --color-text-headings: rgb(0, 0, 0);
    --color-links: #003366;
    --color-links-hover: #000033;

    /* DEFINE BASE FONTS */
    --font-body: system-ui, Helvetica, Arial, sans-serif;
    --font-headings: Georgia, 'Times New Roman', Times, serif;

}

/* GLOBALS RESETS */

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

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

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


/* GLOBALS COLORS */

body {

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

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

}

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

/* SET LINKS COLOR */
a {
    color: var(--color-links);

    /* SET LINKS HOVER COLOR */
    &:hover {
        color: var(--color-links-hover);
    }

}

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

/* BASE TYPOGRAPHY */

body {

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

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

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

}

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

    /* SET ALL HEADINGS FONT */
    font-family: var(--font-headings);

    /* SET ALL HEADINGS MARGIBS */
    margin: 1em 0 .25em 0;

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

/* USE A TYPOGRAPHIC SCALE FOR ALL 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 MARGINS FOR ALL PARAGRAPHS */
    margin: .5em 0;

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

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

}

/* HELPERS */

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

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


/* RESPONSIVE MEDIA */

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

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

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

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

    }

}