/* =============================================
   GARDENNOOKCO — MOBILE FIXES
   Add this file or paste into style.css
============================================= */

/* Fix search bar not showing by default */
.search-overlay {
  display: none !important;
}
.search-overlay.active {
  display: flex !important;
}

/* Fix white gap on right */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* =============================================
   MOBILE — max 768px
============================================= */
@media (max-width: 768px) {

  /* HEADER */
  .header-inner {
    padding: 0 16px;
    gap: 12px;
  }
  .site-title {
    font-size: 18px;
  }
  .main-navigation {
    display: none !important;
  }
  .search-btn {
    display: none;
  }
  .header-actions .btn {
    padding: 9px 16px;
    font-size: 10px;
  }
  .mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* MOBILE NAV MENU */
  .mobile-nav {
    padding: 12px 16px 20px;
  }
  .mobile-nav a {
    padding: 14px 0;
    font-size: 14px;
  }

  /* HERO — full width single column */
  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .hero-content {
    padding: 48px 24px 52px !important;
  }
  .hero-title {
    font-size: clamp(44px, 12vw, 64px) !important;
    margin-bottom: 20px;
  }
  .hero-desc {
    font-size: 14px !important;
    max-width: 100% !important;
    margin-bottom: 32px;
  }
  .hero-actions {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 24px !important;
    font-size: 12px !important;
  }
  .hero-stats {
    gap: 24px !important;
    margin-top: 40px !important;
    flex-wrap: wrap;
  }
  .hero-stat-num {
    font-size: 26px !important;
  }

  /* Hide right image grid on mobile — show a single full image instead */
  .hero-visuals {
    display: block !important;
    height: 260px !important;
    width: 100% !important;
  }
  .hero-visual {
    width: 100% !important;
    height: 260px !important;
  }
  .hero-visual:not(:first-child) {
    display: none !important;
  }
  .hero-visual:first-child {
    display: block !important;
    grid-row: auto !important;
    height: 260px !important;
  }
  .hero-visual-inner {
    min-height: 260px !important;
  }

  /* MARQUEE */
  .marquee-item {
    font-size: 9px !important;
    padding: 0 20px !important;
    gap: 12px !important;
  }

  /* STATS STRIP */
  .stats-inner {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
  }
  .stat-item {
    padding: 28px 24px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .stat-item:last-child {
    border-bottom: none !important;
  }
  .stat-number {
    font-size: 40px !important;
  }

  /* SECTION SPACING */
  .section,
  .posts-section,
  .categories-section,
  .newsletter-section {
    padding: 52px 0 !important;
  }
  .container,
  .container-narrow {
    padding: 0 16px !important;
  }

  /* SECTION HEADER */
  .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
  }
  .section-title {
    font-size: clamp(28px, 8vw, 38px) !important;
  }

  /* POST CARDS — single column */
  .posts-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .post-card.featured {
    grid-row: auto !important;
    grid-column: auto !important;
  }
  .post-card.featured .post-thumb {
    height: 240px !important;
  }
  .post-card.featured .post-title {
    font-size: 24px !important;
  }
  .post-thumb {
    height: 200px !important;
  }
  .post-body {
    padding: 20px !important;
  }
  .post-title {
    font-size: 19px !important;
  }

  /* CATEGORIES */
  .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 32px !important;
  }
  .cat-icon {
    width: 56px !important;
    height: 56px !important;
    font-size: 20px !important;
  }
  .cat-name {
    font-size: 9px !important;
  }
  .cat-count {
    font-size: 9px !important;
  }

  /* NEWSLETTER */
  .newsletter-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 0 16px !important;
  }
  .newsletter-title {
    font-size: clamp(30px, 8vw, 42px) !important;
    margin-bottom: 14px !important;
  }
  .newsletter-form .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ARCHIVE */
  .archive-layout {
    grid-template-columns: 1fr !important;
    padding: 32px 0 !important;
    gap: 0 !important;
  }
  .archive-card {
    grid-template-columns: 1fr !important;
  }
  .archive-thumb {
    height: 200px !important;
  }
  .archive-body {
    padding: 20px !important;
  }
  .archive-header {
    padding: 52px 0 40px !important;
  }
  .archive-title {
    font-size: clamp(36px, 10vw, 56px) !important;
  }

  /* SINGLE POST */
  .post-hero-section {
    padding: 52px 0 40px !important;
  }
  .post-hero-title {
    font-size: clamp(28px, 8vw, 44px) !important;
    padding: 0 16px !important;
  }
  .post-layout {
    grid-template-columns: 1fr !important;
    padding: 32px 0 !important;
    gap: 0 !important;
  }
  .post-featured-img img {
    height: 260px !important;
  }
  .sidebar {
    display: none !important;
  }

  /* FOOTER */
  .footer-main {
    grid-template-columns: 1fr !important;
    padding: 40px 16px 0 !important;
    gap: 32px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    padding: 20px 16px !important;
    margin-top: 32px !important;
  }
  .footer-tagline {
    max-width: 100% !important;
  }
  .footer-socials {
    flex-wrap: wrap !important;
  }
  .footer-legal {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }
  .footer-logo {
    font-size: 24px !important;
  }
}

/* =============================================
   SMALL PHONES — max 380px
============================================= */
@media (max-width: 380px) {
  .hero-title {
    font-size: 40px !important;
  }
  .hero-content {
    padding: 36px 18px 44px !important;
  }
  .site-title {
    font-size: 16px !important;
  }
  .header-actions .btn {
    padding: 8px 12px !important;
    font-size: 9px !important;
  }
  .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =============================================
   TABLET — 769px to 1024px
============================================= */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr 1fr !important;
  }
  .hero-content {
    padding: 60px 40px !important;
  }
  .hero-title {
    font-size: 52px !important;
  }
  .posts-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .post-card.featured {
    grid-column: span 2 !important;
    grid-row: auto !important;
  }
  .post-card.featured .post-title {
    font-size: 26px !important;
  }
  .cat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .archive-layout,
  .post-layout {
    grid-template-columns: 1fr 280px !important;
  }
  .footer-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .newsletter-inner {
    gap: 40px !important;
  }
  .container {
    padding: 0 24px !important;
  }
}