/* Mobile & Tablet Responsive Fix for dogline.pl */
#mobile-nav-toggle {
    display: none;
}
.mobile-sub-toggle {
    display: none;
}

@media screen and (max-width: 1024px) {
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
    }

    /* Hide desktop-only hover slide-out newsletter tab on touch/mobile so it doesn't overflow */
    #panel {
        display: none !important;
    }

    #kontener,
    #szer {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #tyl {
        display: none !important;
    }

    /* Header */
    #gora {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
    }

    #head1 {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 155px !important;
        background: #2f2f2f url('../img/head1.jpg') -10px -15px no-repeat !important;
        background-size: 620px auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #head1a {
        position: absolute !important;
        left: 12px !important;
        top: 12px !important;
        width: 240px !important;
        height: 95px !important;
        z-index: 5 !important;
    }

    h1#head1h1 {
        position: absolute !important;
        left: 16px !important;
        top: 114px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
    }

    #head1fb {
        position: absolute !important;
        right: 12px !important;
        left: auto !important;
        top: 14px !important;
        width: auto !important;
        height: auto !important;
        font-size: 28px !important;
        z-index: 6 !important;
    }
    #head1fb a:link,
    #head1fb a:visited {
        font-size: 28px !important;
        color: #ffffff !important;
        margin-left: 6px !important;
    }

    /* Top slogan */
    #szer > p.h8 {
        margin: 0 !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        background: #f7f4f0 !important;
        border-bottom: 1px solid #e2ddd5 !important;
    }

    /* Mobile menu toggle button */
    #mobile-nav-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 13px 18px !important;
        background: #e64b15 !important;
        color: #ffffff !important;
        border: none !important;
        font-family: 'Lato', sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }
    #mobile-nav-toggle .burger-icon {
        font-size: 20px !important;
        line-height: 1 !important;
    }

    /* Main navigation menu on mobile */
    .menu {
        position: relative !important;
        float: none !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        background: #333333 !important;
        display: none !important;
        z-index: 100 !important;
    }
    .menu.is-open {
        display: block !important;
    }

    #menu,
    #menu ul,
    #nav {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #menu ul li {
        position: relative !important;
        float: none !important;
        width: 100% !important;
        border-bottom: 1px solid #444444 !important;
        text-align: left !important;
    }

    #menu ul li a:link,
    #menu ul li a:visited,
    #nav a:link,
    #nav a:visited {
        display: block !important;
        padding: 12px 48px 12px 18px !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
        text-align: left !important;
        background: #3a3a3a !important;
        color: #f0f0f0 !important;
    }

    /* Submenu accordion on mobile (disable hover flyout) */
    #menu li ul,
    #menu li:hover > ul,
    #menu li.over > ul {
        position: static !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        display: none !important;
        background: #282828 !important;
    }
    #menu ul li.sub-open > ul,
    #menu ul li.sub-open:hover > ul {
        display: block !important;
    }
    #menu li ul li a:link,
    #menu li ul li a:visited {
        padding-left: 32px !important;
        background: #2b2b2b !important;
        font-size: 14px !important;
    }
    #menu li ul li ul li a:link,
    #menu li ul li ul li a:visited {
        padding-left: 46px !important;
        background: #222222 !important;
        font-size: 13.5px !important;
    }

    .mobile-sub-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        width: 44px !important;
        height: 43px !important;
        background: rgba(255,255,255,0.06) !important;
        border: none !important;
        border-left: 1px solid #484848 !important;
        color: #fe7213 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        z-index: 5 !important;
    }

    /* Secondary menus (#menu_poziom1 & #menu_poziom2) */
    #menu_poziom1,
    #menu_poziom2 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        background: #f0eeeb !important;
        border-bottom: 1px solid #e0ddd7 !important;
        font-size: 0 !important; /* hide pipe separators */
    }
    #menu_poziom1 a:link,
    #menu_poziom1 a:visited {
        display: inline-block !important;
        padding: 6px 12px !important;
        font-size: 12.5px !important;
        background: #ffffff !important;
        border: 1px solid #dcd8d0 !important;
        border-radius: 4px !important;
        color: #782e0b !important;
    }
    #menu_poziom2 {
        background: #e6e4e0 !important;
    }
    #menu_poziom2 a:link,
    #menu_poziom2 a:visited {
        display: inline-block !important;
        padding: 6px 12px !important;
        margin: 0 !important;
        font-size: 12.5px !important;
        border-radius: 4px !important;
    }

    /* Main content area */
    #tresc {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Remove excessive <br> spacing on mobile where possible */
    .glowna {
        width: 100% !important;
        height: auto !important;
    }
    .glowna1 {
        float: none !important;
        width: 100% !important;
        border-right: none !important;
        padding: 0 !important;
    }
    .glowna1 > br:first-child,
    .glowna1 > br:nth-child(2) {
        display: none !important;
    }
    .glowna2,
    .tekst_glowna,
    .kwadraty {
        float: none !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .czar,
    .czar2 {
        text-align: center !important;
        margin: 10px 0 !important;
    }
    .czar a:link,
    .czar a:visited {
        display: inline-block !important;
        padding: 12px 28px !important;
        font-size: 15px !important;
        border-radius: 6px !important;
    }

    /* "SPOTKAJ SIĘ Z NAMI" box on homepage */
    .kartka_gdzie {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        margin: 16px 0 !important;
    }
    .gdzie1 {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
    }
    .gdzie {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
    }
    .gdzie_table {
        width: 100% !important;
        margin-left: 0 !important;
        font-size: 13.5px !important;
    }
    .gdzie_table td {
        padding: 4px 2px !important;
        word-break: break-word !important;
    }

    /* "NA CZASIE" 3-column grid -> stacked cards */
    #naczasie {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
    }
    .czas1 {
        float: none !important;
        width: 100% !important;
        max-width: 340px !important;
        padding: 0 !important;
    }

    /* Circular buttons on homepage */
    #tresc div[style*="margin-left: 20px"] {
        margin-left: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    .button,
    .button2,
    .button3 {
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 132px !important;
        height: 132px !important;
        line-height: 1.25 !important;
        margin: 6px !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* Typography & images inside #tresc */
    h1 {
        font-size: 26px !important;
        margin-left: 0 !important;
        text-align: center !important;
    }
    h3 {
        font-size: 23px !important;
        text-align: center !important;
    }
    .h2, .h5, .h7, .h8 {
        margin-left: 0 !important;
    }
    .p1, .pgl, .p2 {
        text-align: left !important;
        line-height: 1.65 !important;
        font-size: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #tresc img {
        max-width: 100% !important;
        height: auto !important;
    }
    #tresc img[align="right"],
    #tresc img[align="left"],
    .galeria img {
        float: none !important;
        display: block !important;
        margin: 12px auto !important;
    }

    /* Tables on subpages */
    #tresc table {
        max-width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
    }
    .gdzie_table {
        display: table !important;
    }

    /* Comments & comment form */
    .comments {
        width: 100% !important;
    }
    .comments-list .inner h4 {
        height: auto !important;
        padding: 8px 12px 8px 50px !important;
    }
    #comment_form {
        width: 100% !important;
        max-width: 400px !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }
    #comment_form label span {
        float: none !important;
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 4px !important;
    }
    #comment_form input[type="text"],
    #comment_form input[type="email"],
    #comment_form textarea {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Footer (.dol & #dol2) */
    .dol {
        height: auto !important;
        background: #262626 !important;
        padding: 28px 16px 76px !important;
        box-sizing: border-box !important;
    }
    #dol2 {
        width: 100% !important;
        height: auto !important;
        background: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
    }
    #kontakt,
    #dol2a,
    #linki,
    #dol3 {
        position: static !important;
        width: 100% !important;
        max-width: 460px !important;
        height: auto !important;
        text-align: center !important;
        margin: 0 !important;
    }
    #kontakt {
        order: 1 !important;
        line-height: 1.6 !important;
    }
    #dol2a {
        order: 2 !important;
    }
    #dol2a table {
        margin: 10px auto 0 !important;
    }
    #linki {
        order: 3 !important;
        color: #cccccc !important;
    }
    #linki p {
        text-align: center !important;
        margin-right: 0 !important;
        font-size: 13px !important;
        color: #bbbbbb !important;
    }
    #dol3 {
        order: 4 !important;
        color: #999999 !important;
    }
    #dol3 a:link,
    #dol3 a:visited {
        color: #bbbbbb !important;
    }
}