/*
 * responsive.css
 * Tacata Freeroam - Streetwear / Windows 11 Responsive Design
 * Készítette: Gemini (Végleges, javított verzió)
*/

/* ==========================================================================
   ALAPHELYZET (DESKTOP)
   ========================================================================== */

/* A hamburger menü rejtve van asztali nézeten. */
.menu-toggle {
    display: none;
}


/* ==========================================================================
   TABLET & KISEBB ESZKÖZÖK (1024px alatt)
   ========================================================================== */

@media (max-width: 1024px) {

    /* --- Általános beállítások --- */
    * {
        box-sizing: border-box; /* Megelőzi a padding miatti szétcsúszásokat */
    }

    .site-container {
        padding: 0 15px;
        width: 100%;
        overflow-x: hidden; /* Megakadályozza a vízszintes görgetést */
    }

    .content-box {
        padding: 40px 15px;
    }

    main {
        padding-top: 20px; /* Távolság a fejléc és a tartalom között */
    }
    
    .mouse-light {
        display: none;
    }


    /* --- Fejléc és Navigáció (JAVÍTVA) --- */
    header {
        padding: 10px 0;
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .menu-toggle {
        display: block;
        background: none;
        border: none;
        color: #fff;
        font-size: 1.8rem;
        cursor: pointer;
        z-index: 1001;
        transition: transform 0.4s ease;
    }

    .menu-toggle.is-active {
        transform: rotate(90deg);
    }

    .navbar .nav-links,
    .navbar .nav-actions {
        display: none; /* Normál menü elrejtése */
    }
    
    .nav-links.active {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25px;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(10, 10, 10, 0.85);
        backdrop-filter: blur(15px) saturate(180%);
        -webkit-backdrop-filter: blur(15px) saturate(180%);
        z-index: 1000;
    }

    .nav-links.active li {
        margin: 0;
        animation: fadeInMenuItem 0.4s ease forwards;
        opacity: 0;
        transform: translateY(20px);
    }
    
    @keyframes fadeInMenuItem {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .nav-links.active li:nth-child(1) { animation-delay: 0.1s; }
    .nav-links.active li:nth-child(2) { animation-delay: 0.15s; }
    .nav-links.active li:nth-child(3) { animation-delay: 0.2s; }
    .nav-links.active li:nth-child(4) { animation-delay: 0.25s; }
    .nav-links.active li:nth-child(5) { animation-delay: 0.3s; }
    .nav-links.active li:nth-child(6) { animation-delay: 0.35s; }

    .nav-links.active a {
        font-size: 1.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .nav-actions.active {
        display: flex;
        position: fixed;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1001;
    }


    /* --- Hero Szekció (JAVÍTVA) --- */
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        margin-top: 20px;
    }
    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap; /* Gombok tördelése, ha nem férnek ki */
    }


    /* --- Általános Kártya és Grid Rácsok (JAVÍTVA) --- */
    .full-product-grid,
    .guide-steps,
    .faction-list-container {
        grid-template-columns: 1fr;
    }
    
    /* A legtöbb kártya közös stílusa mobilon */
    .product-card {
        display: flex;
        align-items: center; /* Vertikális középre igazítás */
        text-align: left;   /* Szöveg balra igazítása a kártyán belül */
        width: 100%;
        padding: 15px;
    }
    .product-card .icon-container {
        flex-shrink: 0;     /* Ikon ne zsugorodjon */
        margin-right: 15px;
        margin-bottom: 0;
    }
    .product-card .product-info {
        flex-grow: 1;       /* A szöveges rész töltse ki a maradék helyet */
    }
    
    /* Szabályzat oldal speciális igazítása */
    .rule-accordion-item .product-card .accordion-toggle {
        margin-left: auto; /* A "+" jel jobbra tolása */
    }


    /* --- Idővonal (Patch Notes, Story) --- */
    .timeline-container::before { display: none; }
    .patch-note-entry { width: 100%; padding: 0; margin-bottom: 30px; }
    .patch-note-entry.left, .patch-note-entry.right { text-align: left; }
    .patch-note-entry.left::before, .patch-note-entry.right::before { display: none; }
    .patch-content { text-align: left; }
    .patch-header { justify-content: flex-start; }


    /* --- Lábléc (JAVÍTVA) --- */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .footer-column {
        text-align: center; /* Minden oszlop legyen középre igazítva */
    }
    .footer-socials {
        justify-content: center;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    .footer-bottom nav {
        flex-direction: column;
        gap: 10px;
    }

}


/* ==========================================================================
   KIFEJEZETTEN MOBIL NÉZET (768px alatt)
   ========================================================================== */
@media (max-width: 768px) {

    .top-bar {
        display: none;
    }
    
    h1, #hero-title {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .section-title {
        font-size: 2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .hero-buttons .cta-button,
    .hero-buttons .details-link {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
    
    .modal-content {
        width: 90%;
        padding: 20px;
    }
}