/* css libraries */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url("styles/galerie.css");
@import url("styles/kontakty.css");
@import url("styles/reference.css");
@import url("styles/vozidla.css");

/* style.css */
* {
    --header-size: 60px;
    --footer-size: 80px;
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    margin:0;
    padding: 0;
}

body {
    font-family: sans-serif;
    margin: 0;
    background-color: hsl(0, 0%, 95%);
    color: hsl(0, 0%, 20%);
    line-height: 1.6; /* Pro lepší čitelnost textu */
}

/* Styly pro header (navigaci) */
header {
    height: var(--header-size);
    background-color: white;
    padding-inline: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 999;
}

h2 {
    padding: 1rem;
    font-weight: bolder;
    font-size: 2em;
}

.logo {
    height: 25px;
    font-weight: bold;
    margin-left: 10px;
    img {
        height: 100%;
    }
}

#main_logo {
    display: inline;
}

#secondary_logo {
    display: none;
}

@media (max-width: 281px) {
    #main_logo {
        display: none;
    }
    
    #secondary_logo {
        display: inline;
    }
}

nav {
    display: flex;
    font-weight: 900;
}

nav a {
    color: hsl(0, 0%, 9%);
    text-decoration: none;
    margin-left: 1rem;
    padding: 0.5rem;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Přechod i pro barvu textu */
}

nav a:hover {
    background-color: hsl(358, 78%, 50%);
    color: white;
}

/* Styly pro hlavní stránku (hero sekci) */
main {
    padding: 0;
    min-height: calc(100svh - var(--header-size) - var(--footer-size)); /* zajistí aby footer byl vždy dole */
}

#hero {
    background-image: url("images/hero/hero_bg.jpg");
    height: calc(100svh - var(--header-size) - var(--footer-size));;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

.hero-content {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2rem;
    border-radius: 10px;
    max-width: 800px; /* Omezení šířky obsahu */
    margin: 0 1rem; /* Okraje pro menší obrazovky */
}

#hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background-color: hsl(358, 78%, 34%);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: hsl(358, 78%, 50%);
}

/* Styly pro ostatní stránky (content sekci) */
#content {
    max-width: 960px;
    margin: 2rem auto;
    padding: 0 1rem; /* Přidány okraje pro menší obrazovky */
}

#content h1 {
    margin-bottom: 1rem;
}

.content-grid {
    display: grid;
    grid-template-columns: [full-width-start] 100px [breakout-start] 100px [content-start] 1fr [content-end] 100px [breakout-end] 100px [full-width-end];

    > :not(.breakout, .full-width),
        .full-width > :not(.breakout, .full-width) {
        grid-column: content;
    }

    > .breakout {
        grid-column: breakout;
    }

    > .full-width {
        grid-column: full-width;

        display: grid;
        grid-template-columns: inherit;
    }
}

section {
    text-align: center;
}

/* Styly pro footer */
footer {
    font-size: 16px;
    background-color: hsl(0, 0%, 9%);
    color: white;
    text-align: center;
    height: var(--footer-size);
    display: flex;
    align-items: center;

    * {
        margin-inline: auto;
    }
}


.menu-button {
    display: none;
}


/* Responzivita */
@media (max-width: 835px) {
    
    #hero h1 {
        font-size: 2rem;
    }

    nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    nav a {
        display: none; /* Skryjeme odkazy v navigaci */
    }

    nav.vertical {
        flex-direction: column; /* Změníme na sloupec */
        position: absolute; /* Menu bude absolutně umístěno */
        top: var(--header-size); /* Pod header */
        left: 0;
        width: 100%;
        background-color: #f5f5f5e8; /* Bílé pozadí */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Stín */
    }

    nav.vertical a {
        display: block; /* Zobrazíme odkazy */
        padding: 1rem; /* Větší padding pro lepší klikání */
        text-align: center; /* Zarovnání textu na střed */
    }

    .menu-button {
        background: transparent;
        border: 0 solid var(--button-color, #000);
        border-radius: 5px;
        display: block;
        --button-color: black;
        overflow: hidden;
    }

    .menu-button .hamburger {
        transition: translate 1s, rotate 1s;
    }

    .menu-button[aria-expanded="true"] .hamburger {
        translate: 0 0px;
        rotate: .125turn;
    }

    .menu-button .line {
        transition: 1s;
        stroke-dasharray: 60 31 60 300;
    }

    .menu-button[aria-expanded="true"] .line {
        stroke-dasharray: 60 105 60 300;
        stroke-dashoffset: -90;
    }
}

@media (max-width: 835px) and (min-width: 350px) {
    .content-grid {
        display: grid;
        grid-template-columns: [full-width-start] 50px [breakout-start] 0px [content-start] 1fr [content-end] 0px [breakout-end] 50px [full-width-end];
    
        > :not(.breakout, .full-width),
            .full-width > :not(.breakout, .full-width) {
            grid-column: content;
        }
    
        > .breakout {
            grid-column: breakout;
        }
    
        > .full-width {
            grid-column: full-width;
    
            display: grid;
            grid-template-columns: inherit;
        }
    }
}

@media (max-width: 350px) {
    .content-grid {
        display: grid;
        grid-template-columns: [full-width-start] 5px [breakout-start] 0px [content-start] 1fr [content-end] 0px [breakout-end] 5px [full-width-end];
    
        > :not(.breakout, .full-width),
            .full-width > :not(.breakout, .full-width) {
            grid-column: content;
        }
    
        > .breakout {
            grid-column: breakout;
        }
    
        > .full-width {
            grid-column: full-width;
    
            display: grid;
            grid-template-columns: inherit;
        }
    }
}



/* Styly pro tabulky (pro stránku Vozidla) */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}