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

* {
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

html {
    scroll-behavior: smooth;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/* Globalne spremenljivke */
:root {
    --Focus: #5551FE;
    --MainForeground: #000000;
    --MainBackground: #ffffff;
    --SecBackground: #f5f5f5;
    --Radius: 2rem;
    --MainGap: 2rem;
    --SecGap: 1rem;
}

/* Označevanje vsebine (npr: copy/paste) */
::selection {
    background: var(--Focus);
    color: var(--MainBackground);
    text-shadow: none;
}


/* Ikone (self-hosted) https://remixicon.com/ */
@font-face {
    font-style: normal;
    font-weight: 400;
    src: url('../icons/remixicon.woff2') format('woff2');
    font-family: 'RemixIcon';
    font-display: swap;
}

/* ===== BASE STYLES ===== */

/* Vsa vsebina */
body {
    font-size: 14px;
}

/* Ikone */
i {
    display: inline-block;
    vertical-align: middle;
    font-style: normal;
    font-weight: normal;
    font-size: 2rem;
    line-height: 1;
    font-family: 'RemixIcon';
}

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

/* Besedila */
h1 {
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.2;
}

h2 {
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.3;
}

h3 {
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.4;
}

a {
    transition: color 0.5s;
    color: var(--Focus);
    font-weight: 600;
    text-decoration: none;
}

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

ul {
    padding-left: 0;
    list-style: inside;
}

ol {
    padding-left: 0;
    list-style: inside decimal;
}

/* ===== COMPONENTS ===== */

/* Gumbi */
button,
a.button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--SecGap);
    transition: 0.5s;
    border: none;
    border-radius: var(--Radius);
    background-color: var(--Focus);
    padding: 1rem 2rem;
    color: var(--MainBackground);
    font-weight: 600;
    font-size: 1rem;
}

button i,
a.button i {
    font-size: 1.5rem;
}

button:hover,
a.button:hover {
    cursor: pointer;
    background-color: var(--MainForeground);
}

button.sec,
a.button.sec {
    border: 2px solid var(--Focus);
    background-color: transparent;
    color: var(--Focus);
}

button.sec:hover,
a.button.sec:hover {
    border-color: var(--MainForeground);
    color: var(--MainForeground);
}

button.ter,
a.button.ter {
    background-color: transparent;
    color: var(--Focus);
}

button.ter:hover,
a.button.ter:hover {
    transition: 0.5s;
    background-color: var(--SecBackground);
    color: var(--MainForeground);
}

button:disabled,
a.button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--SecBackground);
    color: var(--MainForeground);
}

/* Piškotki */
#cookie {
    display: none;
    position: fixed;
    right: var(--SecGap);
    bottom: var(--SecGap);
    left: var(--SecGap);
    flex-flow: column;
    gap: var(--SecGap);
    z-index: 100;
    box-shadow: 0px 0px 34px 0px hsla(0, 0%, 0%, 0.1);
    border-radius: var(--Radius);
    background-color: var(--MainBackground);
    padding: var(--MainGap);
}

/* Razdeljevalnik */
hr {
    margin: 0 1rem;
    border: 0;
    border-top: 1px solid var(--SecBackground);
}

hr.dotted {
    border-top: 1px dotted var(--SecBackground);
}

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

/* Slike */
img {
    border-radius: var(--Radius);
    object-fit: cover;
}

/* Video */
.video {
    border-radius: var(--Radius);
    overflow: hidden;
}

.video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

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

/* Osnovni elementi strukture */
header {
    display: flex;
    justify-content: space-between;
    gap: var(--SecGap);
    padding: var(--SecGap);
}

header .logo {
    font-weight: 700;
    font-size: 2rem;
}

header .logo svg {
    fill: var(--MainForeground);
    height: 2rem;
}

/* Noga (footer) */
footer {
    display: flex;
    background-color: var(--MainForeground);
    padding: var(--MainGap) var(--SecGap);
    color: var(--MainBackground);
}

/* Sekcije in skupine */
section {
    display: flex;
    flex-direction: column;
    gap: var(--SecGap);
    padding: var(--MainGap) var(--SecGap);
}

.group {
    display: flex;
    flex-direction: column;
    gap: var(--SecGap);
}

/* Postavitev - dodaten razred */
.row {
    flex-direction: row;
    flex-wrap: wrap;
}

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

/* Postavitev - dodaten razred (Grid) */
[class*="grid--"] {
    display: grid;
    grid-auto-rows: auto;
    gap: var(--SecGap);
}

.grid--1 {
    grid-template-columns: 1fr;
}

.grid--11 {
    grid-template-columns: 1fr 1fr;
}

.grid--12 {
    grid-template-columns: 1fr 2fr;
}

.grid--21 {
    grid-template-columns: 2fr 1fr;
}

.grid--111 {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid--112 {
    grid-template-columns: 1fr 1fr 2fr;
}

.grid--121 {
    grid-template-columns: 1fr 2fr 1fr;
}

.grid--211 {
    grid-template-columns: 2fr 1fr 1fr;
}

.grid--1111 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* ===== NAVIGATION ===== */

/* Glavna Navigacija (nav) */
.header-menu ul {
    display: flex;
    gap: var(--SecGap);
}

.header-menu ul li {
    list-style: none;
}

.header-menu ul li a {
    color: var(--MainForeground);
    font-size: 1rem;
}

.header-menu ul li:hover a {
    color: var(--Focus);
}

/* ===== RESPONSIVE DESIGN ===== */

/* TABLICA */
@media (min-width: 600px) {

    /* Postavitev - dodaten razred (Grid) */
    .grid--md--1 {
        grid-template-columns: 1fr;
    }

    .grid--md--11 {
        grid-template-columns: 1fr 1fr;
    }

    .grid--md--12 {
        grid-template-columns: 1fr 2fr;
    }

    .grid--md--21 {
        grid-template-columns: 2fr 1fr;
    }

    .grid--md--111 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .grid--md--112 {
        grid-template-columns: 1fr 1fr 2fr;
    }

    .grid--md--121 {
        grid-template-columns: 1fr 2fr 1fr;
    }

    .grid--md--211 {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .grid--md--1111 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

/* MANJŠI DESKTOP */
@media (min-width: 900px) {
    #cookie {
        right: 1rem;
        bottom: 1rem;
        left: auto;
        max-width: 30rem;
        font-size: 0.8rem;
    }

    /* Postavitev - dodaten razred (Grid) */
    .grid--lg--1 {
        grid-template-columns: 1fr;
    }

    .grid--lg--11 {
        grid-template-columns: 1fr 1fr;
    }

    .grid--lg--12 {
        grid-template-columns: 1fr 2fr;
    }

    .grid--lg--21 {
        grid-template-columns: 2fr 1fr;
    }

    .grid--lg--111 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .grid--lg--112 {
        grid-template-columns: 1fr 1fr 2fr;
    }

    .grid--lg--121 {
        grid-template-columns: 1fr 2fr 1fr;
    }

    .grid--lg--211 {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .grid--lg--1111 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}