/* Mobile-only responsive overrides for index.php
   This file is intentionally only for small-screen adjustments.
   It will not affect desktop/laptop views due to the media query.
*/

@media only screen and (max-width: 768px) {
  /* Ensure images load and scale correctly on mobile */
  img { max-width: 100% !important; height: auto !important; display: block !important; visibility: visible !important; }
  picture, figure { max-width:100% !important; }

  /* Hide desktop nav and right-side header controls on mobile (index only) */
  .site-nav .nav-links, .site-nav .nav-right { display: none !important; }
  .promo-strip { display: none !important; }

  /* Mobile header (applies to index and general mobile header) */
  /* Make mobile header fixed so it is always visible on small screens */
  .index-mobile-header, .mobile-header {
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    padding:8px 12px;
    background:#ffffff;
    position:fixed;
    left:0;
    right:0;
    top:0;
    height:56px;
    z-index:9999;
    border-bottom:1px solid #eee;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
  }
  
  .mfc
  {
    margin: 5%;
    place-items: center;
  
  }
  .index-mobile-header .index-mobile-brand img, .mobile-header .mobile-brand img { height:36px; width:auto; display:block; }

  /* Make sure page content doesn't sit under the fixed header */
  body { padding-top:56px; }
  .mobile-hamburger { width:44px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:6px; background:#F07E2D; color:#fff; font-size:20px; border:none; cursor:pointer; }

  /* Slide-in mobile nav panel */
  .mobile-nav-panel { position:fixed; top:0; left:-110%; width:84%; max-width:380px; height:100%; background:#fff; z-index:2001; transition:left .28s ease; overflow:auto; padding:18px 16px; box-shadow:2px 0 18px rgba(0,0,0,0.12); }
  .mobile-nav-panel.open { left:0; }
  .mobile-nav-panel a { display:block; padding:12px 4px; border-bottom:1px solid #f2f2f2; color:#333; text-decoration:none; font-weight:700; }
  .mobile-nav-panel .mobile-nav-section-title { font-size:12px; color:#777; margin:8px 0 6px; font-weight:600; }
  .mobile-nav-close { position:absolute; top:12px; right:12px; cursor:pointer; background:none; border:none; font-size:26px; }
.hero-content { margin-left: 5%;
}
  /* Hide services/info card area and logo block on mobile as requested */
  .info-card, .logo-block { display:none !important; }

  /* Hide the desktop header brand/logo on mobile to avoid duplicates */
  .site-nav .brand { display: none !important; }

  /* Reduce large section heights for mobile */
  /* Override fixed widths set inline in index.php to prevent horizontal overflow */
  .featured-category-card { height:360px !important; width:100% !important; max-width:100% !important; }
  .featured-category-card img { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
  .video-thumbnail { height:220px !important; }
  .video-container, .video-modal-content { max-height:80vh !important; }

  /* Product grid adjustments */
  .product-grid { grid-template-columns:repeat(2, 1fr) !important; gap:12px !important; }
  .product-grid img, .product-card-with-actions img, .product-card img { width:100% !important; height:auto !important; object-fit:cover !important; }

  /* Prevent horizontal scrolling caused by fixed-width elements */
  html, body { overflow-x: hidden !important; }

  /* Ensure footer content isn't hidden or fixed off-screen on mobile; remove extra bottom padding */
  footer, .site-footer { position: relative !important; bottom: auto !important; z-index:1 !important; margin-bottom:0 !important; }

  /* Small right padding for featured/product areas to avoid touching the edge */
  .featured, .product-grid, .container, .content { padding-right:12px !important; box-sizing:border-box; }

  /* Reduce paddings and margins site-wide for mobile */
  .container, .content, .featured { padding-left:12px !important; padding-right:12px !important; }
  body, html { -webkit-text-size-adjust:100%; }
}