/**
 * Natyra SH.P.K. Website Styles - Reset & Base
 * Version: 1.0.0
 * Author: ukakonsulting.com
 */

/* ==========================================================================
   1. The "Hard" Reset (Stripping defaults)
   ========================================================================== */

/* Apply Border-Box to everything. 
   Why? So padding doesn't increase the width of elements. */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Remove default list styles */
ul,
ol,
li {
    list-style: none;
}

/* Remove underlines from links by default */
a {
    text-decoration: none;
    color: inherit;
    /* Inherit color from parent, don't stay blue/purple */
}

/* ==========================================================================
   2. Media & Form Handling (Crucial for static sites)
   ========================================================================== */

/* Make images responsive by default. 
   This prevents images from overflowing their container on mobile. */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* Make form elements inherit fonts. 
   By default, buttons and inputs do NOT use your Poppins font. */
input,
button,
textarea,
select {
    font: inherit;
}

/* ==========================================================================
   3. Base Layout (The "Sticky Footer" Setup)
   ========================================================================== */

html,
body {
    height: 100%;
    /* Needed for the sticky footer to work nicely */
    overflow-x: hidden;
    /* 'hidden' is safer than 'clip' for older browsers */
    scroll-behavior: smooth;
    /* Smooth scrolling when clicking anchor links */
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    /* Improves text readability */
    -webkit-font-smoothing: antialiased;
    /* Makes text look sharper on Mac */

    /* Flex Column for Sticky Footer */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* This pushes the footer down if content is short */
main {
    flex-grow: 1;
}