@layer reset, base, components, utilities, custom;


@layer reset {

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

    :focus:not(:focus-visible) {
        outline: none;
    }

    input,
    textarea,
    button,
    select,
    a {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    img,
    picture,
    svg,
    video {
        display: block;
        max-width: 100%;
        object-fit: cover;
    }

    img,
    svg,
    video {
        height: auto;
    }
}

@layer base {
    body {
        font-family: var(--font-body);
        font-weight: var(--font-normal);
        /* poglej */
        line-height: 1.5;
        color: var(--text);
        background-color: var(--background);
        /* poglej */
        font-size: clamp(100%, 0.875rem + 0.5vw, 112.5%);

    }

    /* Naslovi */

    h1,
    h2,
    h3 {
        font-family: var(--font-heading);
        font-weight: var(--font-bold);
        line-height: 1.2;
    }

    h4,
    h5,
    h6 {
        text-transform: uppercase;
        font-weight: var(--font-bold);
        line-height: 1.2;
    }

    /* Povezave */

    a {
        text-decoration: none;
        color: inherit;
        font-weight: var(--font-medium);
    }

    a:hover {
        color: var(--primary);
    }

    .wrap {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding: var(--space-4);
        margin-inline: auto;

    }

    .wrap.full {
        padding: none;
    }



    /* Gumbi */

    button,
    a.btn,
    a.btn-sec,
    a.btn-ter {
        background-color: var(--primary);
        border: none;
        padding: var(--space-2) var(--space);
        border-radius: var(--radius);
        color: var(--on-primary);
    }

    button:hover,
    a.btn:hover {
        background-color: var(--primary-hover);
    }

    button.sec,
    a.btn-sec {
        background-color: var(--secondary);
        color: var(--on-secondary);
    }

    button.sec:hover,
    a.btn-sec:hover {
        background-color: var(--secondary-hover);
    }

    button.ter,
    a.btn-ter {
        background-color: transparent;
        border: 1px solid var(--accent);
        color: var(--on-accent);
    }

    button.ter:hover,
    a.btn-ter:hover {
        background-color: var(--accent);
    }

    /* 768px */
    @media (width >=48rem) {}

    /* 1024px */
    @media (width >=64rem) {}

    /* 1280px */
    @media (width >=80rem) {}

    /* 1536px */
    @media (width >=96rem) {}

}

@layer utilities {

    /* Pisave */
    .font-secondary {
        font-family: var(--font-heading);
        font-weight: var(--font-bold);
        line-height: 1.2;
    }

    .medium {
        font-weight: var(--font-medium);
    }

    b {
        font-weight: var(--font-bold);
    }

    i.icon {
        font-family: "remixicon";
        font-style: normal;
    }

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

    /* Velikost pisave */
    .fs {
        font-size: var(--space);
    }

    .fs-1 {
        font-size: var(--space-1);
    }

    .fs-2 {
        font-size: var(--space-2);
    }

    .fs-3 {
        font-size: var(--space-3);
    }

    .fs-4 {
        font-size: var(--space-4);
    }

    .fs-5 {
        font-size: var(--space-5);
    }

    .fs-6 {
        font-size: var(--space-6);
    }

    /* Skupine */

    .group {
        display: flex;
        flex-wrap: wrap;
    }

    .col {
        flex-direction: column;
    }

    .row {
        flex-direction: row;
    }

    .justify-center {
        justify-content: center;
    }

    .align-center {
        align-items: center;
    }

    .justfiy-between {
        justify-content: space-between;
    }


    /* Odmiki — gap */
    .gap {
        gap: var(--space);
    }

    .gap-1 {
        gap: var(--space-1);
    }

    .gap-2 {
        gap: var(--space-2);
    }

    .gap-3 {
        gap: var(--space-3);
    }

    .gap-4 {
        gap: var(--space-4);
    }

    .gap-5 {
        gap: var(--space-5);
    }

    .gap-6 {
        gap: var(--space-6);
    }

    /* Odmiki — margin vse smeri */
    .m {
        margin: var(--space);
    }

    .m-1 {
        margin: var(--space-1);
    }

    .m-2 {
        margin: var(--space-2);
    }

    .m-3 {
        margin: var(--space-3);
    }

    .m-4 {
        margin: var(--space-4);
    }

    .m-5 {
        margin: var(--space-5);
    }

    .m-6 {
        margin: var(--space-6);
    }

    /* Odmiki — margin x (inline) */
    .mx {
        margin-inline: var(--space);
    }

    .mx-1 {
        margin-inline: var(--space-1);
    }

    .mx-2 {
        margin-inline: var(--space-2);
    }

    .mx-3 {
        margin-inline: var(--space-3);
    }

    .mx-4 {
        margin-inline: var(--space-4);
    }

    .mx-5 {
        margin-inline: var(--space-5);
    }

    .mx-6 {
        margin-inline: var(--space-6);
    }

    /* Odmiki — margin y (block) */
    .my {
        margin-block: var(--space);
    }

    .my-1 {
        margin-block: var(--space-1);
    }

    .my-2 {
        margin-block: var(--space-2);
    }

    .my-3 {
        margin-block: var(--space-3);
    }

    .my-4 {
        margin-block: var(--space-4);
    }

    .my-5 {
        margin-block: var(--space-5);
    }

    .my-6 {
        margin-block: var(--space-6);
    }

    /* Odmiki — margin top */
    .mt {
        margin-top: var(--space);
    }

    .mt-1 {
        margin-top: var(--space-1);
    }

    .mt-2 {
        margin-top: var(--space-2);
    }

    .mt-3 {
        margin-top: var(--space-3);
    }

    .mt-4 {
        margin-top: var(--space-4);
    }

    .mt-5 {
        margin-top: var(--space-5);
    }

    .mt-6 {
        margin-top: var(--space-6);
    }

    /* Odmiki — margin bottom */
    .mb {
        margin-bottom: var(--space);
    }

    .mb-1 {
        margin-bottom: var(--space-1);
    }

    .mb-2 {
        margin-bottom: var(--space-2);
    }

    .mb-3 {
        margin-bottom: var(--space-3);
    }

    .mb-4 {
        margin-bottom: var(--space-4);
    }

    .mb-5 {
        margin-bottom: var(--space-5);
    }

    .mb-6 {
        margin-bottom: var(--space-6);
    }

    /* Odmiki — margin left */
    .ml {
        margin-left: var(--space);
    }

    .ml-1 {
        margin-left: var(--space-1);
    }

    .ml-2 {
        margin-left: var(--space-2);
    }

    .ml-3 {
        margin-left: var(--space-3);
    }

    .ml-4 {
        margin-left: var(--space-4);
    }

    .ml-5 {
        margin-left: var(--space-5);
    }

    .ml-6 {
        margin-left: var(--space-6);
    }

    /* Odmiki — margin right */
    .mr {
        margin-right: var(--space);
    }

    .mr-1 {
        margin-right: var(--space-1);
    }

    .mr-2 {
        margin-right: var(--space-2);
    }

    .mr-3 {
        margin-right: var(--space-3);
    }

    .mr-4 {
        margin-right: var(--space-4);
    }

    .mr-5 {
        margin-right: var(--space-5);
    }

    .mr-6 {
        margin-right: var(--space-6);
    }

    /* Odmiki — padding vse smeri */
    .p {
        padding: var(--space);
    }

    .p-1 {
        padding: var(--space-1);
    }

    .p-2 {
        padding: var(--space-2);
    }

    .p-3 {
        padding: var(--space-3);
    }

    .p-4 {
        padding: var(--space-4);
    }

    .p-5 {
        padding: var(--space-5);
    }

    .p-6 {
        padding: var(--space-6);
    }

    /* Odmiki — padding x (inline) */
    .px {
        padding-inline: var(--space);
    }

    .px-1 {
        padding-inline: var(--space-1);
    }

    .px-2 {
        padding-inline: var(--space-2);
    }

    .px-3 {
        padding-inline: var(--space-3);
    }

    .px-4 {
        padding-inline: var(--space-4);
    }

    .px-5 {
        padding-inline: var(--space-5);
    }

    .px-6 {
        padding-inline: var(--space-6);
    }

    /* Odmiki — padding y (block) */
    .py {
        padding-block: var(--space);
    }

    .py-1 {
        padding-block: var(--space-1);
    }

    .py-2 {
        padding-block: var(--space-2);
    }

    .py-3 {
        padding-block: var(--space-3);
    }

    .py-4 {
        padding-block: var(--space-4);
    }

    .py-5 {
        padding-block: var(--space-5);
    }

    .py-6 {
        padding-block: var(--space-6);
    }

    /* Odmiki — padding top */
    .pt {
        padding-top: var(--space);
    }

    .pt-1 {
        padding-top: var(--space-1);
    }

    .pt-2 {
        padding-top: var(--space-2);
    }

    .pt-3 {
        padding-top: var(--space-3);
    }

    .pt-4 {
        padding-top: var(--space-4);
    }

    .pt-5 {
        padding-top: var(--space-5);
    }

    .pt-6 {
        padding-top: var(--space-6);
    }

    /* Odmiki — padding bottom */
    .pb {
        padding-bottom: var(--space);
    }

    .pb-1 {
        padding-bottom: var(--space-1);
    }

    .pb-2 {
        padding-bottom: var(--space-2);
    }

    .pb-3 {
        padding-bottom: var(--space-3);
    }

    .pb-4 {
        padding-bottom: var(--space-4);
    }

    .pb-5 {
        padding-bottom: var(--space-5);
    }

    .pb-6 {
        padding-bottom: var(--space-6);
    }

    /* Odmiki — padding left */
    .pl {
        padding-left: var(--space);
    }

    .pl-1 {
        padding-left: var(--space-1);
    }

    .pl-2 {
        padding-left: var(--space-2);
    }

    .pl-3 {
        padding-left: var(--space-3);
    }

    .pl-4 {
        padding-left: var(--space-4);
    }

    .pl-5 {
        padding-left: var(--space-5);
    }

    .pl-6 {
        padding-left: var(--space-6);
    }

    /* Odmiki — padding right */
    .pr {
        padding-right: var(--space);
    }

    .pr-1 {
        padding-right: var(--space-1);
    }

    .pr-2 {
        padding-right: var(--space-2);
    }

    .pr-3 {
        padding-right: var(--space-3);
    }

    .pr-4 {
        padding-right: var(--space-4);
    }

    .pr-5 {
        padding-right: var(--space-5);
    }

    .pr-6 {
        padding-right: var(--space-6);
    }

    /* Barve ozadja */

    .bg {
        background-color: var(--background);
    }

    .bg-surface {
        background-color: var(--surface);
    }

    .bg-elevated {
        background-color: var(--elevated);
    }

    .bg-primary {
        background-color: var(--primary);
    }

    .bg-secondary {
        background-color: var(--secondary);
    }

    .bg-accent {
        background-color: var(--accent);
    }

    /* Barve besedila */

    .text {
        color: var(--text);
    }

    .text-muted {
        color: var(--muted);
    }

    .text-primary {
        color: var(--primary);
    }

    .text-on-primary {
        color: var(--on-primary);
    }

    .text-on-secondary {
        color: var(--on-secondary);
    }

    .text-on-accent {
        color: var(--on-accent);
    }

    /* Mreže */

    .grid {
        display: grid;
    }

    /* Slike v mreži */
    .grid>picture>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Odzivno prikazovanje */
    @media (width < 40rem) {

        .hide-mobile,
        .show-tablet,
        .show-desktop,
        .show-tablet-up,
        .hide-tablet-down {
            display: none;
        }
    }

    @media (40rem <=width < 64rem) {

        .show-mobile,
        .hide-tablet,
        .show-desktop,
        .hide-tablet-up,
        .hide-tablet-down {
            display: none;
        }
    }

    @media (width >=64rem) {

        .show-mobile,
        .show-tablet,
        .hide-desktop,
        .show-tablet-down,
        .hide-tablet-up {
            display: none;
        }
    }

    @media (pointer: coarse) {
        .hide-touch {
            display: none;
        }
    }

    @media (pointer: fine) {
        .show-touch {
            display: none;
        }
    }

}