/* ЛАФЧЕ.ORG - mobile.css
   Съдържа САМО @media(max-width:950px) правилата, извадени от style.css
   за по-лесна редакция. Зарежда се СЛЕД style.css във всяка HTML
   страница (важен е редът заради CSS каскадата - override-ите тук
   трябва да идват след базовите правила в style.css).
   Desktop-специфичните @media(min-width:951px) правила остават
   в style.css, не тук. */

@media(max-width:950px) {

    .theme-toggle-nav-item {
        display: none;
    }

}

@media(max-width:950px) {

    .mobile-header-buttons {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        align-items: center;
        position: relative;
    }

    .mobile-header-buttons button {
        background: linear-gradient(135deg, #ff9224, #ff7a00);
        color: #fff;
        border: none;
        padding: 8px 14px;
        border-radius: 8px;
        font-weight: bold;
        cursor: pointer;
        transition: transform .15s ease, filter .2s ease;
    }

    .mobile-header-buttons button:active {
        transform: scale(.94);
        filter: brightness(.95);
    }

    nav {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        right: 15px;
        left: auto;
        transform: none;
        width: 165px;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        background: #151515;
        border: 1px solid #ff7a00;
        border-radius: 10px;
        padding: 10px;
        z-index: 9999;
        box-sizing: border-box;
    }

    .topbar nav {
        left: auto;
        transform: none;
    }

    nav a {
        padding: 6px 10px;
        text-align: left;
        white-space: nowrap;
    }

    nav.mobile-open {
        display: flex;
    }

    .channel-panel {
        display: none;
        position: fixed;

        top: 84px;
        right: 15px;
        left: auto;

        width: 190px;
        max-width: calc(100vw - 30px);
        max-height: 60vh;
        overflow-y: auto;

        background: #151515;
        border: 1px solid #ff7a00;
        border-radius: 10px;
        padding: 15px;

        z-index: 9998;
    }

    .channel-panel.mobile-open {
        display: block;
    }

    .topbar {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "logo empty buttons"
            "logo empty3 stats";
        align-items: center;
        gap: 6px 8px;
        padding: 8px 10px;
    }

    .logo {
        grid-area: logo;
        margin-left: 0;
    }

    .logo img {
        height: 50px;
        width: auto;
    }

    .mobile-header-buttons {
        grid-area: buttons;
    }

    /* ЛАФЧЕ.ORG: само index.html има 3 бутона (тема+МЕНЮ+КАНАЛИ) -
       всички останали 15 страници (вкл. /chat/) имат само 2 (тема+МЕНЮ).
       Основното (default) правило по-долу е за 2-бутонния случай,
       index.html получава изключение чрез .topbar-index класа. */
    .hero-stats {
        grid-area: stats;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        margin: 0;
        min-width: 0;
    }
    .topbar-index .hero-stats {
        justify-content: flex-start;
    }
    /* невидим спейсър с точната ширина на theme-toggle бутона (32px) -
       само на index.html, за да се подравнят НА САЙТА/В ЧАТА под
       МЕНЮ/КАНАЛИ, не под темата */
    .topbar-index .hero-stats::before {
        content: "";
        width: 42px;
        flex-shrink: 0;
        order: 0;
    }

    .stat-item {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 8.5px;
        white-space: nowrap;
    }

    .stat-dot {
        width: 5px;
        height: 5px;
    }

    /* Визуален ред: В ЧАТА, НА САЙТА, КАНАЛИ, СЪРВЪРИ - без да пипаме
       HTML-а (реда в markup-а остава В ЧАТА, КАНАЛИ, НА САЙТА, СЪРВЪРИ) */

    .hero-stats .stat-item:nth-child(1) {
        order: 2;
    }
    .topbar-index .hero-stats .stat-item:nth-child(1) {
        margin-left: 38px;
    }

    .hero-stats .stat-item:nth-child(2) {
        order: 3;
    }

    .hero-stats .stat-item:nth-child(3) {
        order: 1;
    }

    .hero-stats .stat-item:nth-child(4) {
        order: 4;
    }

    .portal {
        grid-template-columns: 1fr;
        padding: 25px 15px;
    }

    .welcome {
        min-height: auto;
        padding-top: 20px;
    }

    .welcome h1 {
        font-size: 40px;
    }

    .welcome p {
        margin-bottom: 35px;
    }

    #enter-chat {
        width: 100%;
        max-width: 320px;
    }

}

@media (max-width:950px) {

    .commands-main {
        padding: 30px 15px 60px;
    }

    .commands-main > h1 {
        font-size: 30px;
    }

    .service-block > h2 {
        font-size: 17px;
        padding: 14px 16px;
    }

    .service-body {
        padding: 18px;
    }

    .cmd-line {
        font-size: 12px;
    }

    /* ЛАФЧЕ.ORG: КАНАЛИ таблицата остава истинска компактна таблица
       на мобилно (не стек от карти) - "карти" версията изискваше
       безкраен вертикален скрол, за да стигнеш до 30-ти канал */
    .channels-table {
        font-size: 0.8em;
    }
    .channels-table th,
    .channels-table td {
        padding: 6px 6px;
        white-space: nowrap;
    }
    /* ЛАФЧЕ.ORG: "Услуги (NickServ/ChanServ): ● На линия" - на мобилно
       20px размерът караше "линия" да пада на нов ред, грозно.
       По-малък размер, за да се събере на един ред */
    .services-summary {
        font-size: 15px;
    }
    /* ЛАФЧЕ.ORG: mIRC direct-connect бутонът е само за desktop клиенти -
       безсмислен на мобилно, крие се изцяло там */
    .mirc-connect-box {
        display: none;
    }
    /* ЛАФЧЕ.ORG: Facebook/X иконките в hero-stats са само за desktop -
       на мобилно седят некрасиво до другите статистики, крият се изцяло */
    .hero-social-link {
        display: none;
    }
    /* ЛАФЧЕ.ORG: разделителят преди BGtop иконата седеше грозно на
       мобилно (самостоятелно на нов ред при wrap) - скрит само там.
       Другият разделител (LAFCHE.ORG · КОНТАКТИ) остава видим -
       той не се пренася на нов ред самостоятелно */
    .footer-badge-group .footer-dot {
        display: none;
    }

}

@media (max-width:950px) {

    .nav-dropdown {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .nav-dropdown-toggle {
        padding: 6px 10px;
        width: 100%;
        text-align: left;
    }

    .nav-dropdown-menu {
        display: flex;
        flex-direction: column;
        position: static;
        transform: none;
        left: auto;
        background: transparent;
        border: none;
        padding: 0 0 0 20px;
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }

    .nav-dropdown-menu a {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .nav-dropdown-menu.open {
        max-height: 400px;
        transform: none;
    }

}