/* ================= ZÁKLAD ================= */



:root {

    --header: #2E2E2E;

    --content-bg: #020202;

    --content-text: #FF00DD;



    --neon-green: #00ff85;

    --neon-pink: #FF00DD;



    --white: #ffffff;

    --dark-footer: #2c2c2c;



    --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --font-menu: "Lucida Casual", "Lucida Handwriting", "Comic Sans MS", cursive;

}



*,

*::before,

*::after {

    box-sizing: border-box;

}



body {

    margin: 0;

    font-family: var(--font-main);

    background: var(--content-bg);

    color: var(--content-text);

}



/* ================= KONTEJNER ================= */



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 1rem;

}



/* ================= HEADER ================= */



.site-header {

    background: var(--header);

}



.header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 80px;

}



.branding {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.logo img {

    height: 64px;

}



/* ================= TITULEK ================= */



.site-title {

    margin: 0;

    font-size: 1.8rem;

    font-family: "Comic Sans MS", cursive;

}



.site-title a {

    text-decoration: none;

}



/* gradient jen pro LOGO – stabilní */

.gradient-text {

    font-weight: 800;

    background: linear-gradient(

        90deg,

        #ff00dd,

        #00ffd5,

        #ffea00,

        #ff00dd

    );

    background-size: 300% 100%;

    animation: neonFlow 6s linear infinite;



    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



@keyframes neonFlow {

    0%   { background-position: 0% 50%; }

    100% { background-position: 300% 50%; }

}



/* ================= MENU TOGGLE ================= */



.menu-toggle {

    display: none;

    background: none;

    border: none;

    font-size: 2rem;

    color: var(--neon-green);

    cursor: pointer;

}



/* ================= HLAVNÍ MENU ================= */



.main-nav ul {

    list-style: none;

    margin: 0;

    padding: 0;

}



.main-nav > ul {

    display: flex;

    align-items: center;

}



.main-nav > ul > li {

    position: relative;

}



.main-nav > ul > li > a {

    display: block;

    padding: 1rem 1.25rem;

    font-family: var(--font-menu);

    text-transform: uppercase;

    text-decoration: none;



    /* DUHOVÝ TEXT – STEJNÝ PRINCIP JAKO IKONY */

    background-image: linear-gradient(

        90deg,

        #ff2a2a,

        #ff9f00,

        #ffee00,

        #00ff85,

        #00cfff,

        #7a5cff,

        #ff2a2a

    );

    background-size: 300% 100%;

    background-position: 100% 50%;



    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;



    transition: background-position 0.4s ease;

}



.main-nav > ul > li > a:hover {

    background-position: 0% 50%;

}



/* ================= SUBMENU (DESKTOP) ================= */



.submenu {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 200px;

    background: var(--content-bg);

    border: 2px solid var(--neon-green);

    border-radius: 8px;

    padding: 6px 0;

    z-index: 100;

}



.has-submenu.open > .submenu {

    display: block;

}



.has-submenu.submenu-closed > .submenu {

    display: none;

}



@media (hover: hover) and (pointer: fine) {

    .has-submenu:not(.submenu-closed):hover > .submenu {

        display: block;

    }

}



.main-nav > ul > li > a {

    touch-action: manipulation;

    -webkit-touch-callout: none;

}



.submenu a {

    padding: 0.75rem 1rem;

    display: block;

    color: var(--neon-pink);

    text-decoration: none;

}



.submenu a:hover {

    background: var(--neon-green);

    color: #020202;

}



/* ================= DUHOVÁ LINKA ================= */



.header-rainbow {

    height: 3px;

    width: 100%;

    background: linear-gradient(

        90deg,

        #ff2a2a,

        #ff9f00,

        #ffee00,

        #00ff85,

        #00cfff,

        #7a5cff,

        #ff2a2a

    );

    background-size: 400% 100%;

    animation: rainbow-flow 10s linear infinite;

}



@keyframes rainbow-flow {

    from { background-position: 0% 50%; }

    to   { background-position: 400% 50%; }

}



/* ================= FOOTER – OPRAVA ================= */



.site-footer {
    background: var(--dark-footer);
    color: var(--white);
    margin-top: 3rem;
}

/* ================= OBSAHOVÉ SEZNAMY ================= */

.content-list {
    width: fit-content;
    max-width: 100%;
    margin: 1rem auto;
    padding-inline-start: 1.5rem;
    text-align: left;
}

.site-footer .container {
    max-width: 1200px;

    margin: 0 auto;

    padding: 1.5rem 1rem;

}



/* vnitřní kostra footeru */

.footer-inner {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.4rem;

}



/* ===== IKONY ===== */



.footer-icons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 2rem;                 /* rozestupy – fix */

}



.footer-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.footer-icon i {

    font-size: 1.6rem;



    background-image: linear-gradient(

        90deg,

        #ff2a2a,

        #ff9f00,

        #ffee00,

        #00ff85,

        #00cfff,

        #7a5cff,

        #ff2a2a

    );

    background-size: 300% 100%;

    background-position: 100% 50%;



    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;



    transition: background-position 0.5s ease;

}



/* duha se hýbe JEN na hover */

.footer-icon:hover i {

    background-position: 0% 50%;

}



/* ===== FOOTER NAV ===== */



.footer-nav {

    font-size: 0.9rem;

    text-align: center;

}



.footer-nav a {

    color: var(--white);

    text-decoration: none;

    margin: 0 0.6rem;

}



.footer-nav a:hover {

    text-decoration: underline;

}



/* ===== COPYRIGHT ===== */



.footer-copy {

    font-size: 0.8rem;

    opacity: 0.75;

    text-align: center;

}



/* ===== RESPONSIVE FOOTER ===== */



@media (max-width: 768px) {

    .footer-icons {

        gap: 2.4rem;           /* na mobilu víc prostoru */

    }

}



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



/* MOBIL A UŽŠÍ OKNA – OVERLAY MENU */
@media (max-width: 1024px) {


    .menu-toggle {

        display: block;

    }



    .main-nav {

        position: fixed;

        inset: 0;

        background: var(--header);

        display: none;

        z-index: 1000;

        padding-top: 6rem;

    }



    .main-nav.open {

        display: block;

    }



    .main-nav > ul {

        flex-direction: column;

    }



    .main-nav > ul > li > a {

        font-size: 1.4rem;

        padding: 1rem 1.5rem;

    }



    .submenu {

        position: static;

        border: none;

        background: #020202;

        display: none;

    }



}

.site-footer {

    background: var(--dark-footer);

    color: var(--white);

    margin-top: 3rem;

    text-align: center; /* ← KLÍČ */

}



.site-footer p {

    margin: 0.8rem 0 0;

    font-size: 0.85rem;

    opacity: 0.85;

}



/* ================= CREW BUTTON – CLEAN 3D ================= */



.crew-button {

    background: #020202;

    border: 1px solid rgba(255,255,255,0.25);

    border-radius: 12px;



    padding: 0.8rem 1.8rem;



    font-family: var(--font-menu);

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 0.06em;



    cursor: pointer;



    /* TEXT – STEJNÝ JAKO MENU */

    background-image: linear-gradient(

        90deg,

        #ff2a2a,

        #ff9f00,

        #ffee00,

        #00ff85,

        #00cfff,

        #7a5cff,

        #ff2a2a

    );

    background-size: 300% 100%;

    background-position: 100% 50%;



    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;



    /* 3D – TICHÉ, DOSPĚLÉ */

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,0.18),

        inset 0 -1px 0 rgba(0,0,0,0.7),

        0 8px 16px rgba(0,0,0,0.8);



    transition:

        background-position 0.4s ease,

        box-shadow 0.2s ease,

        border-color 0.2s ease;

}



/* HOVER */

.crew-button:hover {

    background-position: 0% 50%;

    border-color: var(--neon-green);



    box-shadow:

        inset 0 1px 0 rgba(255,255,255,0.25),

        inset 0 -1px 0 rgba(0,0,0,0.6),

        0 10px 22px rgba(0,0,0,0.9);

}



/* ACTIVE – ZATLAČENÍ */

.crew-button:active {

    box-shadow:

        inset 0 2px 4px rgba(0,0,0,0.9),

        0 4px 8px rgba(0,0,0,0.7);

}



/* ================= CREW LOGIN ================= */



.crew-login {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

    align-items: center;

}



/* ===== INPUT ===== */



.crew-input {

    background: #020202;

    border: 1px solid rgba(255,255,255,0.25);

    border-radius: 10px;



    padding: 0.8rem 1rem;

    min-width: 220px;



    font-family: var(--font-main);

    font-size: 1rem;

    color: var(--content-text);



    box-shadow:

        inset 0 1px 0 rgba(255,255,255,0.15),

        inset 0 -1px 0 rgba(0,0,0,0.7);



    transition:

        border-color 0.2s ease,

        box-shadow 0.2s ease;

}



.crew-input::placeholder {

    color: rgba(255,0,221,0.5);

}



/* focus = aktivní stav */

.crew-input:focus {

    outline: none;

    border-color: var(--neon-green);



    box-shadow:

        inset 0 1px 0 rgba(255,255,255,0.25),

        inset 0 -1px 0 rgba(0,0,0,0.6),

        0 0 0 2px rgba(0,255,133,0.25);

}

img {

  -webkit-user-drag: none;

  user-select: none;

  pointer-events: auto;

}



.neon-link {

  color: #39ff14; /* neon green */

  text-decoration: none;

  font-weight: 600;

  text-shadow:

    0 0 4px #39ff14,

    0 0 8px #39ff14,

    0 0 16px rgba(57, 255, 20, 0.7);

  transition: all 0.2s ease;

}



.neon-link:hover {

  text-shadow:

    0 0 6px #39ff14,

    0 0 14px #39ff14,

    0 0 28px rgba(57, 255, 20, 0.9);

}

/* Consistent alignment of crew pages and centered header. */
html {
    scrollbar-gutter: stable;
}

/* The crew home has a requests panel; the other crew pages reserve its row. */
.crew-toolbar-slot {
    display: flow-root;
    min-height: 3.5rem;
}

-----------po spusteni umazat -------------

.hero-logo {
  max-width: 180px;
  width: 100%;
  margin-bottom: 24px;
  filter: drop-shadow(0 0 12px rgba(57,255,20,0.6));
}