/* =========================================================
   RESPONSIVE STYLES
   ========================================================= */

/* =========================================================
   TABLET (768px - 1024px)
   ========================================================= */
@media screen and (max-width: 1024px) {
    
    /* Container adjustments */
    .container {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Header stays one centered row until the phone breakpoint. */
    .header-top-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 12px;
    }

    .site-branding {
        order: 0;
        flex: none;
        width: auto;
        margin: 0;
    }

    .header-social { order: 0; }
    .header-icons { order: 0; justify-self: end; }
    
    /* Navigation */
    #main-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
    
    #main-nav > li > a {
        padding: 12px 14px;
        font-size: 13px;
    }
    
    /* Homepage blocks */
    .reviews-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .home-split,
    .home-bottom {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .home-duo,
    .home-features,
    .related-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .lower-inner {
        gap: 30px;
    }
    
    /* Sidebar */
    #secondary {
        flex: 0 0 280px;
        width: 280px;
    }
    
    /* Archive grid */
    .archive-grid {
        gap: 20px;
    }

    .footer-widgets-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* =========================================================
   MOBILE LANDSCAPE & TABLET PORTRAIT (481px - 767px)
   ========================================================= */
@media screen and (max-width: 767px) {
    
    /* Typography */
    body {
        font-size: 16px;
    }
    
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    
    /* Header */
    .header-top-row {
        padding: 15px 0;
    }
    
    .header-top-inner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .site-branding .custom-logo {
        max-width: 250px;
        max-height: 60px;
    }
    
    .site-title {
        font-size: 24px;
    }
    
    .menu-toggle {
        display: none !important;
    }

    .header-top-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .site-branding {
        order: 0;
        flex: none;
        width: auto;
        margin: 0;
    }

    .header-social {
        order: 0;
        justify-self: start;
    }

    .header-icons {
        order: 0;
        width: auto;
        justify-self: end;
        justify-content: flex-end;
    }

    .will-stick-wrap {
        display: none;
    }

    .header-social {
        display: none;
    }

    .header-top-inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .header-icon-btn span {
        display: none;
    }

    body {
        padding-bottom: 0;
    }
    
    /* Homepage blocks - stack vertically */
    .reviews-grid,
    .home-duo,
    .home-features,
    .related-grid,
    .story-nav {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .story-next { text-align: left; }

    .review-card { min-height: 300px; }
    .review-card .card-title,
    .slider-card .slider-title,
    .mag-feature .big-title { font-size: 24px; }

    .single-shell .post-title { font-size: 32px; }
    .single-lead { font-size: 17px; }

    .home-newsletter { padding: 28px 16px; }
    .home-newsletter h2 { font-size: 22px; }
    .home-newsletter-form { flex-direction: column; }
    .home-newsletter-form button { padding: 12px 16px; }
    
    .in-business-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .lower-inner {
        flex-direction: column;
        gap: 20px;
    }
    
    .lower-sidebar {
        flex: none;
        width: 100%;
    }
    
    /* Content layouts */
    .content-sidebar-wrap {
        flex-direction: column;
        gap: 20px;
    }
    
    #secondary {
        flex: none;
        width: 100%;
        order: 2;
    }
    
    .content-main {
        order: 1;
    }
    
    /* Archive grid */
    .archive-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    /* Cards adjustments */
    .post-card .card-body {
        padding: 14px 16px;
    }
    
    .post-card .card-title {
        font-size: 16px;
    }
    
    .mag-plain-item {
        gap: 12px;
    }
    
    .mag-plain-item .plain-thumb {
        flex: 0 0 100px;
        width: 100px;
        height: 67px;
    }
    
    /* Single post */
    .single-content-area {
        max-width: none;
    }
    
    .post-title {
        font-size: 28px;
    }
    
    .post-meta-bar {
        flex-wrap: wrap;
        gap: 12px;
        font-size: 12px;
    }
    
    /* Footer */
    .footer-widgets-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .footer-newsletter-form {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-newsletter-form input[type="email"] {
        border-right: 1px solid rgba(255,255,255,0.15);
    }
    
    /* Search overlay */
    .search-overlay input[type="search"] {
        font-size: 20px;
    }
    
    .search-overlay-close {
        top: -48px;
        right: 15px;
        font-size: 24px;
    }
    
    /* Flyoff panel */
    #flyoff {
        width: 280px;
        right: -280px;
    }
    
    /* Pagination */
    .pagination {
        gap: 3px;
    }
    
    .pagination .page-numbers {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
        padding: 0 8px;
    }
}

/* =========================================================
   MOBILE PORTRAIT (320px - 480px)
   ========================================================= */
@media screen and (max-width: 480px) {
    
    /* Typography */
    body {
        font-size: 15px;
        line-height: 1.7;
    }
    
    h1 { font-size: 26px; }
    h2 { font-size: 22px; }
    h3 { font-size: 18px; }
    
    /* Container */
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    /* Header */
    .header-top-row {
        padding: 12px 0;
    }
    
    .site-branding .custom-logo {
        max-width: 200px;
        max-height: 50px;
    }
    
    .site-title {
        font-size: 20px;
    }
    
    .header-icons {
        gap: 8px;
    }
    
    .header-icon-btn {
        padding: 8px;
        font-size: 12px;
    }
    
    .header-icon-btn span {
        display: none;
    }
    
    /* Homepage sections */
    .block-latest-reviews {
        padding: 30px 0 20px;
    }
    
    .block-in-business {
        padding: 20px 0;
    }
    
    .block-lower {
        padding: 20px 0 30px;
    }
    
    .section-title {
        font-size: 20px;
        margin-bottom: 16px;
    }
    
    /* Cards */
    .post-card .card-body {
        padding: 12px 14px;
    }
    
    .post-card .card-title {
        font-size: 15px;
        line-height: 1.4;
    }
    
    .post-card .card-meta {
        font-size: 11px;
    }
    
    .post-card .card-excerpt {
        font-size: 14px;
    }
    
    /* Mag-plain items */
    .mag-plain-item .plain-thumb {
        flex: 0 0 80px;
        width: 80px;
        height: 53px;
    }
    
    .mag-plain-item .plain-title {
        font-size: 15px;
    }
    
    .mag-plain-item .plain-meta {
        font-size: 10px;
    }
    
    /* Single post */
    .single-post-wrap {
        padding: 20px 0 40px;
    }
    
    .single-shell .post-title,
    .post-title {
        font-size: 28px;
        line-height: 1.25;
    }
    
    .post-categories {
        margin-bottom: 10px;
    }
    
    .post-category-link {
        font-size: 10px;
        padding: 2px 8px;
    }
    
    .post-meta-bar {
        font-size: 11px;
        padding: 12px 0;
    }
    
    .post-meta-bar .author-avatar {
        width: 28px;
        height: 28px;
    }
    
    .entry-content {
        font-size: 16px;
    }
    
    .entry-content h2 {
        font-size: 22px;
        margin: 24px 0 12px;
    }
    
    .entry-content h3 {
        font-size: 19px;
        margin: 20px 0 10px;
    }
    
    /* Review score block */
    .review-score-block {
        padding: 16px 18px;
        margin: 24px 0;
        gap: 15px;
    }
    
    .review-score-number {
        font-size: 36px;
    }
    
    .review-score-label {
        font-size: 12px;
    }
    
    /* Sidebar widgets */
    .widget {
        margin-bottom: 24px;
        padding-bottom: 24px;
    }
    
    .widget-title {
        font-size: 15px;
        margin-bottom: 12px;
    }
    
    /* Recent/trending items */
    .recent-item,
    .trending-item {
        gap: 10px;
    }
    
    .recent-thumb,
    .trending-thumb {
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
    }
    
    .recent-title,
    .trending-title {
        font-size: 13px;
    }
    
    /* Footer */
    .footer-widgets-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .footer-widgets-wrap {
        padding: 30px 0 20px;
    }
    
    .footer-newsletter {
        padding: 20px 0;
    }
    
    .footer-social-row {
        padding: 16px 0;
    }
    
    .footer-bottom {
        padding: 14px 0;
    }
    
    .footer-bottom p {
        font-size: 12px;
        line-height: 1.5;
    }
    
    /* Search overlay */
    .search-overlay-inner {
        padding: 0 12px;
    }
    
    .search-overlay input[type="search"] {
        font-size: 18px;
    }
    
    /* Flyoff panel */
    #flyoff {
        width: 260px;
        right: -260px;
        padding: 20px 18px;
    }
    
    /* 404 page */
    .error-404-wrap {
        padding: 50px 12px;
    }
    
    .error-404-code {
        font-size: 80px;
    }
    
    .error-404-title {
        font-size: 24px;
    }
    
    /* Archive header */
    .archive-header {
        padding: 20px 0;
        margin-bottom: 20px;
    }
    
    .archive-header .cat-title {
        font-size: 26px;
    }
    
    /* Breadcrumb */
    .breadcrumb-wrap {
        font-size: 12px;
        padding: 8px 0;
    }
    
    /* Pagination */
    .pagination .page-numbers {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    /* Share buttons */
    .share-buttons {
        margin: 20px 0;
        padding: 16px 0;
    }
    
    .share-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    /* Comments */
    .comments-area {
        margin-top: 30px;
        padding-top: 24px;
    }
    
    .comments-title {
        font-size: 20px;
    }
    
    .comment-author-avatar {
        width: 40px;
        height: 40px;
    }
    
    .comment-form input,
    .comment-form textarea {
        font-size: 14px;
        padding: 8px 12px;
    }
}

/* =========================================================
   VERY SMALL MOBILE (< 375px)
   ========================================================= */
@media screen and (max-width: 374px) {
    
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .site-title {
        font-size: 18px;
    }

    .single-shell .post-title {
        font-size: 26px;
    }
    
    .post-title {
        font-size: 22px;
    }
    
    .section-title {
        font-size: 18px;
    }
    
    .post-card .card-title {
        font-size: 14px;
    }
    
    .mag-plain-item .plain-thumb {
        flex: 0 0 70px;
        width: 70px;
        height: 47px;
    }
    
    .error-404-code {
        font-size: 60px;
    }
    
    #flyoff {
        width: 240px;
        right: -240px;
    }
}

/* =========================================================
   PRINT STYLES
   ========================================================= */
@media print {
    
    /* Hide non-essential elements */
    .header-icons,
    .will-stick-wrap,
    .search-overlay,
    #flyoff,
    .flyoff-overlay,
    .share-buttons,
    .pagination,
    .widget-area,
    .comments-area,
    #colophon {
        display: none !important;
    }
    
    /* Optimize for print */
    body {
        font-size: 12pt;
        line-height: 1.6;
        color: #000;
        background: #fff;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    .post-title,
    .archive-header .cat-title {
        color: #000;
    }
    
    /* Show URLs for links */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }
    
    /* Don't show URLs for internal links */
    a[href^="#"]:after,
    a[href^="/"]:after {
        content: "";
    }
}