/* ==========================================================================
   Klima S Sistem
   base.css
   ----------------------------------------------------------------------------
   RESET
   TYPOGRAPHY
   HELPERS
   GLOBAL ELEMENTS

   Napomena:
   U ovom fajlu NE SMEJU da postoje:
   - Header
   - Hero
   - Kartice
   - Dugmad
   - Footer

   Oni pripadaju drugim fajlovima.
   ========================================================================== */


/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

*{
    margin:0;
    padding:0;
}


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

html{

    font-size:16px;

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}


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

body{

    font-family:var(--font-family);

    font-size:var(--font-size-md);

    font-weight:var(--font-weight-normal);

    line-height:var(--line-height);

    color:var(--color-text);

    background:var(--color-white);

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    overflow-x:hidden;

}


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

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

    color:var(--color-gray-900);

    font-weight:var(--font-weight-bold);

    line-height:1.2;

}

h1{

    font-size:var(--font-size-4xl);

}

h2{

    font-size:var(--font-size-3xl);

}

h3{

    font-size:var(--font-size-xl);

}

h4{

    font-size:1.25rem;

}

p{

    margin-bottom:1rem;

}

strong{

    font-weight:700;

}


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

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}


/* ==========================================================================
   LISTS
   ========================================================================== */

ul,
ol{

    list-style:none;

}


/* ==========================================================================
   MEDIA
   ========================================================================== */

img,
picture{

    display:block;

    max-width:100%;

}

svg{

    display:block;

}


/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

button,
input,
textarea,
select{

    font:inherit;

}

button{

    background:none;

    border:none;

    cursor:pointer;

}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

main{

    display:block;

}

section{

    padding-block:var(--section-space);

}


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

.container{

    width:min(
        calc(100% - 2rem),
        var(--container-width)
    );

    margin-inline:auto;

}


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

.grid{

    display:grid;

}

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}


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

.mt-1{margin-top:.5rem;}
.mt-2{margin-top:1rem;}
.mt-3{margin-top:2rem;}
.mt-4{margin-top:3rem;}

.mb-1{margin-bottom:.5rem;}
.mb-2{margin-bottom:1rem;}
.mb-3{margin-bottom:2rem;}
.mb-4{margin-bottom:3rem;}


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

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.text-primary{

    color:var(--color-primary);

}

.text-white{

    color:var(--color-white);

}


/* ==========================================================================
   DISPLAY HELPERS
   ========================================================================== */

.hidden{

    display:none !important;

}