/* spetna pisava*/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

/* CSS barve pa oblike ki se bojo ponavljale da mi jih ne bo treba vsakic znova definirt bojo tuki, pa ce bo reba kej spremenit bo tudi lazje, ker samo na enem mestu spremenis */
:root {
    --barva-ozadje: #F0E5D2; /*vse barve so vzete iz logotipa*/
    --barva-besedilo: #45220E;
    --barva-poudarek: #60552C; /*ta je tista malo bolj zelena*/
    --barva-dodatna: #CE9550;

    --barva-kartice: #FFF9F0;
    --barva-besedilo-na-temnem: #F0E5D2;
    --barva-hero-prekrivna: rgba(69, 34, 14, 0.55);
    --barva-senca: rgba(69, 34, 14, 0.18); /* uporabljena vrednost rgba da lahko nastavim še prosojnost a- alpha chanell za prosojnost */

    --senca-kartice: 0 0.25rem 0.8rem var(--barva-senca); /*rem- relative unit of measurement, lažje prilagajanje, var- pa predstavlja vrednost definirano v root-u */
    --zaobljenost: 0.75rem;
}

/*osnovne nastavitve */

* {
    box-sizing: border-box; /* zvezdica pomeni da velja za vse */
}

html {
    font-size: 100%;
    scroll-behavior: smooth; /* men se je osebno samo lepše zdel da kamorkoli prideš da je vmes scroll transition da ne mors kr jumpat iz elementa na element */
    scroll-padding-top: 7rem; /* ko bom pri receptih uporabljala sidra in skakanje po strani "nazaj na vrh" da mi naslova ne bo prekrila glava, da bo vmes 7rem prostora */
}

body {
    margin: 0;
    background-color: var(--barva-ozadje);
    color: var(--barva-besedilo);
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    line-height: 1.7;
}

h1,
h2,
h3 {
    color: var(--barva-besedilo);
    font-family: "Fraunces", serif;
    line-height: 1.25; /*koliko je razmoke med vrsticami, če bi bilo 0 bi se besedila prekrivala */
}

h1 {
    font-size: 2.8rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.4rem;
}

img {
    max-width: 100%;
}

a {
    color: var(--barva-poudarek);
}

a:focus-visible { /*če klikneš Tab se okoli naslova pojavi obroč da veša kaj je izbrano*/
    outline: 0.15rem solid var(--barva-dodatna);
    outline-offset: 0.2rem;
}

/* glava in navigacija */

.site_header {
    position: sticky; /*da tudi ko scrollas dol ostane viden */
    top: 0;
    z-index: 1000; /* element je čisto odspredaj, no je pred elementi >1000, če bi pa dala nekemu elementu index 1001 bi bil pa ta prikazan nad tem */

    background-color: var(--barva-ozadje); 
    box-shadow: var(--senca-kartice); /*dodana senca za malo globine, bolj zaradi lepega kot karkoli drugega, no pa za to da se loči od ozadja kr sta iste barve */
}

.nav_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;

    width: 100%;
    max-width: 1100px;
    min-height: 6rem;
    margin: 0 auto;
    padding: 0.5rem 1rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    color: var(--barva-besedilo);
    font-family: "Fraunces", serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
}

.logo br {
    display: none; /* da slucajno nebi uničili vodoravne postavitve logotipa */
}

.logo img {
    display: block;
    width: 5rem;
    height: auto;
}

.main_menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.35rem;

    margin: 0;
    padding: 0;
    list-style: none;
}

.main_menu a {
    display: block;
    padding: 0.6rem 0.8rem;
    border-radius: 0.4rem;

    color: var(--barva-besedilo);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;

    transition: background-color 0.2s ease;
}

.main_menu a:hover {
    background-color: var(--barva-dodatna);
}

.main_menu a.active {
    background-color: var(--barva-poudarek);
    color: var(--barva-besedilo-na-temnem);
}