/* ==========================================================================
   LAYOUT SYSTEM - Ondřej Simon Portfolio
   Fokus: Fixní header, fluidní navigace a minimalistická patička
   ========================================================================== */

/* 1. SITE HEADER
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--header-height);
    transition: var(--transition-smooth);
}

/* Progressive frosted-glass strip — metodika převzatá z i-mad.com.
   Sedm naskládaných vrstev s rostoucím backdrop-filter blurem a
   překrývajícími se linear-gradient maskami vytváří plynulý
   přechod od ostrého (dole, u obsahu) k silně rozmazanému (nahoře). */
.header-blur {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: rotate(180deg);
}

.header-blur .blur-layer {
    position: absolute;
    inset: 0;
}

.header-blur .blur-layer:nth-child(1) {
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    -webkit-mask: linear-gradient(transparent, #000 10%, #000 30%, transparent 40%);
            mask: linear-gradient(transparent, #000 10%, #000 30%, transparent 40%);
}
.header-blur .blur-layer:nth-child(2) {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    -webkit-mask: linear-gradient(transparent 10%, #000 20%, #000 40%, transparent 50%);
            mask: linear-gradient(transparent 10%, #000 20%, #000 40%, transparent 50%);
}
.header-blur .blur-layer:nth-child(3) {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    -webkit-mask: linear-gradient(transparent 15%, #000 30%, #000 50%, transparent 60%);
            mask: linear-gradient(transparent 15%, #000 30%, #000 50%, transparent 60%);
}
.header-blur .blur-layer:nth-child(4) {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-mask: linear-gradient(transparent 20%, #000 40%, #000 60%, transparent 70%);
            mask: linear-gradient(transparent 20%, #000 40%, #000 60%, transparent 70%);
}
.header-blur .blur-layer:nth-child(5) {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    -webkit-mask: linear-gradient(transparent 40%, #000 60%, #000 80%, transparent 90%);
            mask: linear-gradient(transparent 40%, #000 60%, #000 80%, transparent 90%);
}
.header-blur .blur-layer:nth-child(6) {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    -webkit-mask: linear-gradient(transparent 60%, #000 80%);
            mask: linear-gradient(transparent 60%, #000 80%);
}
.header-blur .blur-layer:nth-child(7) {
    z-index: 1;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    -webkit-mask: linear-gradient(transparent 70%, #000);
            mask: linear-gradient(transparent 70%, #000);
}

.header-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 2. LOGO / IDENTITY
   ========================================================================== */
.logo a {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.55rem;
    text-decoration: none;
    line-height: 1;
}

.logo .name {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-main);
    transition: var(--transition-smooth);
}

.logo .credentials {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* Tablet & mobile: zmenšit wordmark, aby se vešel vedle menu-toggle. */
@media (max-width: 600px) {
    .logo a {
        gap: 0.4rem;
    }
    .logo .name {
        font-size: 1.1rem;
    }
    .logo .credentials {
        font-size: 0.6rem;
    }
}

/* 3. DESKTOP NAVIGATION
   ========================================================================== */
.main-nav {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 0.5rem;
}

.nav-links a {
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-main);
    background-color: rgba(241, 241, 241, 0.7);
    padding: 0.5rem 0.95rem;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
    background-color: rgba(226, 226, 226, 0.85);
    color: var(--text-main);
}

/* Language switcher — dropdown */
.lang-switcher {
    position: relative;
    margin-left: 0.5rem;
}

.lang-trigger {
    background-color: rgba(241, 241, 241, 0.7);
    border: none;
    padding: 0.5rem 0.95rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-main);
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-trigger:hover {
    background-color: rgba(226, 226, 226, 0.85);
}

/* Rozbalený seznam: dark frosted-glass chip — vizuálně shodné s overlay
   štítky na úvodním karuselu (.update-overlay / .work-meta): poloprůhledné
   černé pozadí + backdrop-filter blur + zaoblené rohy. */
.lang-options {
    position: absolute;
    top: 100%;
    right: 0;
    margin: 0.6rem 0 0 0;
    padding: 0.7rem 1.1rem 0.65rem 1.1rem;
    background-color: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: none;
    border-radius: 10px;
    list-style: none;
    min-width: 130px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1100;
}

.lang-switcher.is-open .lang-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: block;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition-fast);
}

.lang-option:hover {
    color: #fff;
}

.lang-option.is-active {
    color: #fff;
    font-weight: 500;
}

/* 4. MOBILE MENU & HAMBURGER
   ========================================================================== */
.menu-toggle {
    display: none; /* Skryto na desktopu */
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 20px;
    position: relative;
    z-index: 1100;
}

.menu-toggle .bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--text-main);
    transition: var(--transition-smooth);
}

.bar.top { top: 0; }
.bar.mid { top: 50%; }
.bar.bot { bottom: 0; }

/* Animace hamburgeru do X */
.is-active .bar.top { transform: translateY(9px) rotate(45deg); }
.is-active .bar.mid { opacity: 0; }
.is-active .bar.bot { transform: translateY(-10px) rotate(-45deg); }

/* 5. SITE FOOTER
   ========================================================================== */

/* "Curtain" reveal:
   - <main> má bílé pozadí a vyšší z-index, takže je nad patičkou.
   - Patička je position: fixed na spodu viewportu, statická, z-index 1.
   - Body má padding-bottom o velikosti patičky, takže si lze "doscrollovat"
     pod main do prostoru, kde je patička viditelná (main už ji neza-
     krývá). Scrollováním dolů main odjíždí nahoru a postupně odkrývá
     statickou patičku zespodu. */
main#content {
    position: relative;
    z-index: 2;
    background-color: var(--bg-color);
    flex: 1 0 auto;
}

.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    /* Top i bottom padding záměrně rovno horizontálnímu --container-gutter —
       čtvercové odsazení rohu (logo nahoře vlevo, copyright dole). */
    padding: var(--container-gutter) 0;
    background-color: #ececec;
}

/* Footer top: brand vlevo, navigační pilulky vpravo.
   Layout inspirován i-mad.com — wordmark + tlumený sekundární text v rohu,
   pill-button navigace na opačné straně. */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-bottom: 5vh;
}

.footer-brand {
    flex: 0 0 auto;
}

.footer-logo {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.55rem;
    text-decoration: none;
    line-height: 1;
}

.footer-logo .name {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-main);
    transition: var(--transition-smooth);
}

/* Credentials v tmavší šedi — odpovídá tlumenému sekundárnímu textu,
   jaký používá i-mad.com pro odkazy v patičce (~gray-500). */
.footer-logo .credentials {
    font-size: 0.7rem;
    font-weight: 400;
    color: #6e6e6e;
    letter-spacing: 0.02em;
}

.footer-nav {
    flex: 0 1 auto;
}

.footer-nav-links {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.footer-nav-links li {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Pilulky — identický rozměr i typografie jako .nav-links v headeru
   (font 0.7rem, padding 0.5rem 0.95rem, letter-spacing 0.2em). Jediný
   rozdíl je barva pozadí, laděná do tónu šedého footeru. */
.footer-nav-links a {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-main);
    background-color: #d5d5d5;
    padding: 0.5rem 0.95rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.footer-nav-links a:hover {
    background-color: #c4c4c4;
}

/* Footer middle: dvě nezávisle centrované řady (ikony + jazyky).
   Záměrně NE-sloupcový grid — pozice ikon a jazyků nemusí lícovat,
   každá řada se centruje samostatně podle své vlastní šířky. */
.footer-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    margin-bottom: 4vh;
}

.footer-icons {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}

.footer-icons > li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-languages {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    margin: 0;
    padding: 0;
}

.footer-languages > li {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.footer-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.footer-icon-link:hover {
    color: var(--text-main);
}

.footer-icon-link svg {
    width: 40px;
    height: 40px;
}

/* Jazykový přepínač pod ikonou — plain text-button v duchu i-mad.com:
   tlumená šedá, hover dotmavne, aktivní jazyk plnou barvou. */
.footer-lang-link {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    text-decoration: none;
    line-height: 1;
    transition: color 0.2s ease;
}

.footer-lang-link:hover {
    color: var(--text-main);
}

.footer-lang-link.is-active {
    color: var(--text-main);
    font-weight: 500;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2.5rem;
}

.copyright {
    font-size: 0.7rem;
    color: var(--text-light);
    letter-spacing: 0.05em;
}

.back-to-top-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #d4d4d4;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-main);
    padding: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.back-to-top-btn:hover {
    background-color: #c4c4c4;
}

.back-to-top-btn svg {
    width: 14px;
    height: 14px;
    display: block;
}


/* 6. RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* Tablet & Mobile Layout */
@media (max-width: 1024px) {
    .nav-links { gap: 0.4rem; }
    .lang-switcher { margin-left: 0.4rem; }
}

@media (max-width: 991px) {
    .menu-toggle { display: block; }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        flex-direction: column;
        justify-content: center;
        gap: 3rem;
        transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .main-nav.is-open {
        right: 0;
    }

    .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .nav-links a {
        font-size: 1.8rem;
        background-color: transparent;
        padding: 0;
        border-radius: 0;
    }

    .nav-links a:hover,
    .nav-links a.active {
        background-color: transparent;
        color: var(--text-muted);
    }

    .lang-switcher {
        margin: 2rem 0 0 0;
        padding: 0;
        border: none;
    }

    /* On mobile (full-screen menu) the dropdown becomes an inline list. */
    .lang-trigger {
        display: none;
    }

    .lang-options {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: none;
        border: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 1.6rem;
        min-width: 0;
    }

    /* Inline list na fullscreen menu — bílé pozadí, takže obnovit
       tlumený šedý text místo bílého z desktopové glass varianty. */
    .lang-option {
        padding: 0;
        font-size: 1rem;
        color: var(--text-light);
    }

    .lang-option:hover {
        color: var(--text-main);
    }

    .lang-option.is-active {
        color: var(--text-main);
    }

    .copyright {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4em;
    }

    /* Footer — na mobilu stackovat brand a nav vertikálně,
       nav zarovnat doleva pod logo, aby vznikl klidný blok. */
    .footer-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem;
    }

    .footer-nav-links {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .footer-logo .name {
        font-size: 1.1rem;
    }
    .footer-logo .credentials {
        font-size: 0.6rem;
    }
}