/**
 * mobile-header-compact.css
 * 
 * Kompaktiškesnis header dizainas mobiliai versijai
 */

@media screen and (max-width: 768px) {
    /* Kompaktiškesnis header */
    header {
        padding: 0;
    }
    
    header .container {
        padding: 0 1.5rem !important; /* Force proper horizontal spacing */
    }
    
    nav {
        padding: 0.5rem 0; /* Sumažintas padding nuo 0.75rem */
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 52px;
    }
    
    /* Mažesnis logo */
    .logo-mark {
        width: 32px; /* Nuo 40px */
        height: 32px; /* Nuo 40px */
        margin-right: 8px; /* Nuo 12px */
    }
    
    .logo {
        font-size: 1.1rem; /* Nuo 1.25rem */
    }
    
    .logo-mask {
        font-size: 1.2rem; /* Nuo 1.5rem */
    }
    
    .logo span::after {
        bottom: -5px; /* Nuo -8px */
        height: 2px; /* Nuo 3px */
    }
    
    /* Kompaktiškesnis menu button */
    .menu-btn {
        padding: 6px; /* Nuo 10px */
        width: 22px; /* Nuo 24px */
        height: 18px; /* Nuo 20px */
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        align-self: center;
    }
    
    .menu-btn .bar {
        width: 22px; /* Nuo 24px */
        left: 6px; /* Nuo 10px */
    }
    
    .menu-btn .bar:nth-child(1) { 
        top: 8px; /* Nuo 12px */
    }
    
    .menu-btn .bar:nth-child(2) { 
        top: 14px; /* Nuo 19px */
        width: 16px; /* Nuo 18px */
        left: 9px; /* Nuo 13px */
    }
    
    .menu-btn .bar:nth-child(3) { 
        top: 20px; /* Nuo 26px */
    }
    
    /* Atnaujinta active state pozicija */
    .menu-btn.active .bar:nth-child(1),
    .menu-btn.open .bar:nth-child(1) {
        top: 14px; /* Nuo 19px */
        width: 22px; /* Nuo 24px */
    }
    
    .menu-btn.active .bar:nth-child(3),
    .menu-btn.open .bar:nth-child(3) {
        top: 14px; /* Nuo 19px */
        width: 22px; /* Nuo 24px */
    }
    
    /* Nav-links a stiliai */
    .nav-links a {
        padding: 0.75rem 1rem; /* Nuo 1rem */
        font-size: 0.95rem; /* Mažesnis šriftas */
    }
    
    /* Hero section padding adjustment */
    .hero-section {
        padding-top: calc(52px + 2rem); /* Adjusted for smaller header */
    }
    
    /* Blog post header adjustment - override inline styles */
    .blog-post-header {
        padding: calc(52px + 2rem) 0 4rem 0 !important; /* Force override inline styles */
    }
    
    /* Main content padding */
    main,
    .page-wrapper > section:first-of-type {
        padding-top: 52px; /* Adjusted for smaller header */
    }
    
    /* Blog post responsive adjustments for tablets */
    .blog-post-title {
        font-size: 2.8rem !important; /* Smaller title on tablet */
        line-height: 1.2 !important;
    }
    
    .blog-post-meta {
        flex-direction: column !important;
        gap: 0.8rem !important;
    }
}

/* Extra small devices */
@media screen and (max-width: 480px) {
    header .container {
        padding: 0 1rem !important; /* Slightly less padding on very small screens */
    }
    
    nav {
        padding: 0.4rem 0; /* Dar kompaktiškesnis */
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 48px;
    }
    
    .logo-mark {
        width: 28px;
        height: 28px;
        margin-right: 6px;
    }
    
    .logo {
        font-size: 1rem;
    }
    
    .logo-mask {
        font-size: 1.1rem;
    }
    
    .nav-links a {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Adjust content padding for extra small screens */
    .hero-section {
        padding-top: calc(48px + 1.5rem);
    }
    
    .blog-post-header {
        padding: calc(48px + 1.5rem) 0 3rem 0 !important; /* Force override inline styles */
    }
    
    main,
    .page-wrapper > section:first-of-type {
        padding-top: 48px;
    }
    
    /* Blog post responsive adjustments */
    .blog-post-title {
        font-size: 2.2rem !important; /* Smaller title on mobile */
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    .blog-post-meta {
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .blog-post-category {
        font-size: 0.8rem !important;
        padding: 0.25rem 0.8rem !important;
    }
}