/**
 * Responsive CSS - Revista Laticínios Theme
 * Mobile-first responsive styles
 */

/* ==========================================================================
   BASE MOBILE FIXES
   ========================================================================== */

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Better touch targets */
button, 
.btn, 
a.btn,
input[type="submit"],
input[type="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* Improve text readability on mobile */
@media (max-width: 768px) {
    body {
        font-size: 15px;
        line-height: 1.65;
    }
}

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

/* Mobile menu toggle - Moved to style.css for better control */


@media (max-width: 992px) {
    /* Header layout adjustments */
    .header-content {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .site-branding {
        flex: 1;
    }
    
    .header-actions .btn {
        padding: 8px 12px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .header-top {
        display: none;
    }
    
    .header-main {
        padding: 10px 0;
    }
    
    .site-branding img {
        max-height: 50px;
        width: auto;
    }
    
    .header-search {
        display: none;
    }
}

/* ==========================================================================
   CONTAINER & LAYOUT RESPONSIVE
   ========================================================================== */

.container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

@media (max-width: 768px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .wrapper {
        gap: 20px;
    }
    
    .content-area {
        width: 100%;
    }
}

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

@media (max-width: 992px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
}

@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.15rem; }
}

/* ==========================================================================
   POSTS & CARDS RESPONSIVE
   ========================================================================== */

.posts-grid {
    display: grid;
    gap: 20px;
}

@media (max-width: 992px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 600px) {
    .posts-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* Card styles */
.post-card,
.card,
.article-card {
    border-radius: 8px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .post-card,
    .card,
    .article-card {
        border-radius: 6px;
    }
    
    .post-card .card-content,
    .card-body {
        padding: 15px;
    }
    
    .post-card h3,
    .card-title {
        font-size: 1.1rem;
        line-height: 1.4;
    }
    
    .post-card .excerpt,
    .card-text {
        font-size: 0.9rem;
    }
}

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

@media (max-width: 992px) {
    .sidebar {
        width: 100%;
        margin-top: 30px;
    }
    
    .widget {
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   SINGLE POST RESPONSIVE
   ========================================================================== */

.single-post,
.single-article,
.entry-content {
    max-width: 100%;
}

@media (max-width: 768px) {
    .single-post,
    .entry-content {
        padding: 15px;
    }
    
    .entry-content img {
        margin-left: -15px;
        margin-right: -15px;
        max-width: calc(100% + 30px);
        width: calc(100% + 30px);
    }
    
    .entry-content blockquote {
        margin-left: 0;
        margin-right: 0;
        padding: 15px;
        font-size: 1rem;
    }
}

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

.btn,
button,
input[type="submit"] {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .btn,
    button,
    input[type="submit"] {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
    
    .btn-group {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-group .btn {
        width: 100%;
        text-align: center;
    }
}

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

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    padding: 12px 15px;
    font-size: 16px; /* Prevents zoom on iOS */
}

@media (max-width: 768px) {
    .form-row,
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-inline {
        flex-direction: column;
    }
    
    .form-inline > * {
        width: 100%;
        margin-bottom: 10px;
    }
}

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

.site-footer {
    padding: 40px 0 20px;
}

.footer-widgets {
    display: grid;
    gap: 30px;
}

@media (max-width: 992px) {
    .footer-widgets {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .site-footer {
        padding: 30px 0 15px;
    }
    
    .footer-widgets {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .footer-widget h3 {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

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

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    table th,
    table td {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   IMAGES & MEDIA RESPONSIVE
   ========================================================================== */

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

.wp-block-image,
.wp-block-video,
.wp-block-embed {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 768px) {
    .wp-block-image.alignwide,
    .wp-block-image.alignfull {
        margin-left: -15px;
        margin-right: -15px;
        max-width: calc(100% + 30px);
    }
    
    figure {
        margin: 15px 0;
    }
    
    figcaption {
        font-size: 0.85rem;
        padding: 10px;
    }
}

/* ==========================================================================
   HERO SECTIONS RESPONSIVE
   ========================================================================== */

.hero-section,
.page-header {
    padding: 60px 0;
}

@media (max-width: 768px) {
    .hero-section,
    .page-header {
        padding: 40px 0;
    }
    
    .hero-content h1 {
        font-size: 1.75rem;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-section,
    .page-header {
        padding: 30px 0;
    }
    
    .hero-content h1 {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   EDICOES (Editions) PAGE RESPONSIVE
   ========================================================================== */

.edicoes-grid {
    display: grid;
    gap: 25px;
}

@media (max-width: 992px) {
    .edicoes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .edicoes-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

.edicao-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .edicao-card {
        border-radius: 6px;
    }
    
    .edicao-card .card-content {
        padding: 15px;
    }
    
    .edicao-card h3 {
        font-size: 1.1rem;
    }
}

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

.pagination,
.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 480px) {
    .pagination .page-numbers,
    .nav-links a,
    .nav-links span {
        min-width: 40px;
        height: 40px;
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

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

@media (max-width: 768px) {
    .comment-list {
        padding-left: 0;
    }
    
    .comment {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .comment .children {
        margin-left: 15px;
        padding-left: 15px;
        border-left: 2px solid #eee;
    }
    
    .comment-author img {
        width: 40px;
        height: 40px;
    }
}

/* ==========================================================================
   SEARCH PAGE RESPONSIVE
   ========================================================================== */

.search-form {
    display: flex;
    gap: 10px;
}

@media (max-width: 480px) {
    .search-form {
        flex-direction: column;
    }
    
    .search-form input[type="search"] {
        width: 100%;
    }
    
    .search-form button {
        width: 100%;
    }
}

/* ==========================================================================
   LOADING & ANIMATIONS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 769px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* Text alignment responsive */
@media (max-width: 768px) {
    .text-center-mobile {
        text-align: center !important;
    }
    
    .text-left-mobile {
        text-align: left !important;
    }
}

/* Spacing utilities for mobile */
@media (max-width: 768px) {
    .mt-mobile-0 { margin-top: 0 !important; }
    .mb-mobile-0 { margin-bottom: 0 !important; }
    .pt-mobile-0 { padding-top: 0 !important; }
    .pb-mobile-0 { padding-bottom: 0 !important; }
    
    .mt-mobile-sm { margin-top: 10px !important; }
    .mb-mobile-sm { margin-bottom: 10px !important; }
    .mt-mobile-md { margin-top: 20px !important; }
    .mb-mobile-md { margin-bottom: 20px !important; }
}