/*=============================================================================

    CTM PATH™
    FROM SURVIVAL TO LIVING™

    FILE
    base.css

    PURPOSE

    Global Application Styles

    RESPONSIBILITIES

    • HTML
    • Body
    • Typography
    • Headings
    • Buttons
    • Containers
    • Links
    • Images
    • Utilities

    NOTE

    NO PAGE SPECIFIC STYLES

=============================================================================*/


/*=============================================================================
    HTML
=============================================================================*/

html{

    width:100%;

    height:100%;

}


/*=============================================================================
    BODY
=============================================================================*/

body{

    min-height:100vh;

    background:

        var(--background-body);

    color:

        var(--color-text);

    font-family:

        var(--font-primary);

    font-size:

        var(--font-md);

    line-height:1.6;

    overflow-x:hidden;

}


/*=============================================================================
    MAIN
=============================================================================*/

main{

    width:100%;

    min-height:100vh;

}


/*=============================================================================
    TYPOGRAPHY
=============================================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    color:

        var(--color-text);

    font-weight:

        var(--weight-bold);

    line-height:1.25;

}


h1{

    font-size:

        var(--font-4xl);

}


h2{

    font-size:

        var(--font-3xl);

}


h3{

    font-size:

        var(--font-2xl);

}


h4{

    font-size:

        var(--font-xl);

}


h5{

    font-size:

        var(--font-lg);

}


h6{

    font-size:

        var(--font-md);

}


p{

    color:

        var(--color-text-secondary);

    margin-bottom:

        var(--space-4);

}


/*=============================================================================
    LINKS
=============================================================================*/

a{

    transition:

        var(--transition-normal);

}


a:hover{

    color:

        var(--color-gold);

}


/*=============================================================================
    IMAGES
=============================================================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

}


/*=============================================================================
    BUTTONS
=============================================================================*/

button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:

        var(--space-2);

    min-height:52px;

    padding:

        0 var(--space-6);

    border-radius:

        var(--radius-md);

    font-family:

        inherit;

    font-weight:

        var(--weight-semibold);

    transition:

        var(--transition-normal);

}


button:disabled{

    opacity:.50;

    cursor:not-allowed;

}


/*=============================================================================
    INPUTS
=============================================================================*/

input,
textarea,
select{

    width:100%;

}


/*=============================================================================
    SECTIONS
=============================================================================*/

section{

    width:100%;

}


/*=============================================================================
    CONTAINER
=============================================================================*/

.container{

    width:100%;

    max-width:

        var(--content-width);

    margin:0 auto;

    padding-left:

        var(--page-padding);

    padding-right:

        var(--page-padding);

}


/*=============================================================================
    FLEX UTILITIES
=============================================================================*/

.flex{

    display:flex;

}


.flex-column{

    display:flex;

    flex-direction:column;

}


.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}


.space-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/*=============================================================================
    GRID
=============================================================================*/

.grid{

    display:grid;

}


/*=============================================================================
    TEXT
=============================================================================*/

.text-center{

    text-align:center;

}


.text-left{

    text-align:left;

}


.text-right{

    text-align:right;

}


/*=============================================================================
    WIDTH
=============================================================================*/

.w-100{

    width:100%;

}


/*=============================================================================
    SPACING
=============================================================================*/

.mt-2{

    margin-top:

        var(--space-2);

}


.mt-4{

    margin-top:

        var(--space-4);

}


.mt-6{

    margin-top:

        var(--space-6);

}


.mb-2{

    margin-bottom:

        var(--space-2);

}


.mb-4{

    margin-bottom:

        var(--space-4);

}


.mb-6{

    margin-bottom:

        var(--space-6);

}


/*=============================================================================
    HIDDEN
=============================================================================*/

.hidden{

    display:none !important;

}


/*=============================================================================
    VISIBILITY
=============================================================================*/

.visible{

    display:block;

}


/*=============================================================================
    MOBILE
=============================================================================*/

@media (max-width:768px){

    .container{

        padding-left:

            var(--space-4);

        padding-right:

            var(--space-4);

    }

    h1{

        font-size:

            2.2rem;

    }

    h2{

        font-size:

            1.8rem;

    }

    h3{

        font-size:

            1.5rem;

    }

}