/*
THE GUN DOCK - SEO FONT OPTIMIZATION
Google-compliant font sizes for mobile-friendliness and readability
Based on Google Lighthouse recommendations and WCAG guidelines
*/

/* ============================================
   BASE FONT SIZE - CRITICAL FOR SEO
   Google requires minimum 16px base font
   ============================================ */

html {
    font-size: 16px !important; /* Google Lighthouse requirement */
}

body {
    font-size: 16px !important;
    line-height: 1.6 !important; /* Google recommends 1.5-1.6 for body text */
}

/* ============================================
   FIX MOBILE FONT SIZE REDUCTION
   Previous styles reduced to 14-15px on mobile - BAD for SEO
   ============================================ */

@media (max-width: 991px) {
    html {
        font-size: 16px !important; /* Maintain 16px, not 15px */
    }
}

@media (max-width: 767px) {
    html {
        font-size: 16px !important; /* Maintain 16px, not 14px */
    }

    body {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
}

/* ============================================
   MINIMUM FONT SIZES - FIX SUB-12PX FONTS
   Google flags text smaller than 12px as "too small to read"
   ============================================ */

/* Fix 0.7rem (11.2px) - TOO SMALL */
.action-pro span,
.modern-design .action-pro span,
.cart-count {
    font-size: 0.75rem !important; /* 12px minimum */
}

/* Fix other small fonts to meet minimum standards */
.header-compact .contact-info-pro,
.header-compact .promo-text-pro {
    font-size: 0.875rem !important; /* 14px - better readability */
}

.footer-copyrightbar {
    font-size: 0.875rem !important; /* 14px instead of 0.85rem */
}

.footer-trust-signals .badge-item {
    font-size: 0.875rem !important; /* 14px for better mobile readability */
}

.stat-pro {
    font-size: 0.875rem !important; /* 14px minimum for stats */
}

/* ============================================
   BODY TEXT & PARAGRAPHS - SEO CRITICAL
   Main content should be 16-18px per Google
   ============================================ */

p,
.woocommerce-product-details__short-description,
.product-description,
article p,
.entry-content p {
    font-size: 16px !important; /* Google's recommended minimum */
    line-height: 1.6 !important; /* 1.5-1.6 is optimal */
}

/* Product descriptions - very important for SEO */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.woocommerce div.product .woocommerce-Tabs-panel {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* ============================================
   HEADINGS - PROPER HIERARCHY FOR SEO
   Google uses heading hierarchy for content understanding
   ============================================ */

h1, .product_title {
    font-size: 2rem !important; /* 32px */
    line-height: 1.25 !important;
}

h2 {
    font-size: 1.75rem !important; /* 28px */
    line-height: 1.3 !important;
}

h3 {
    font-size: 1.5rem !important; /* 24px */
    line-height: 1.4 !important;
}

h4 {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.4 !important;
}

h5 {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.5 !important;
}

h6 {
    font-size: 1rem !important; /* 16px - same as body, but bold */
    line-height: 1.5 !important;
}

/* ============================================
   NAVIGATION & BUTTONS - TOUCH TARGET SIZE
   Google recommends min 48px touch targets
   ============================================ */

.nav-pro a {
    font-size: 0.875rem !important; /* 14px minimum for nav */
    padding: 0.75rem 1.25rem !important; /* Adequate touch target */
    line-height: 1.5 !important;
}

button,
.button,
.btn,
input[type="submit"] {
    font-size: 1rem !important; /* 16px for buttons - better accessibility */
    padding: 0.75rem 1.5rem !important;
    line-height: 1.5 !important;
    min-height: 44px; /* Google's min touch target */
}

/* WooCommerce Add to Cart buttons */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button {
    font-size: 1rem !important; /* 16px */
    min-height: 44px;
}

/* ============================================
   SEARCH INPUT - CRITICAL UX ELEMENT
   ============================================ */

.search-pro input,
input[type="search"],
input[type="text"] {
    font-size: 1rem !important; /* 16px - prevents iOS zoom on focus */
    line-height: 1.5 !important;
}

.search-pro input::placeholder {
    font-size: 1rem !important;
}

/* ============================================
   PRODUCT LISTINGS - IMPORTANT FOR ECOMMERCE
   ============================================ */

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    font-size: 1rem !important; /* 16px minimum */
    line-height: 1.4 !important;
}

.woocommerce ul.products li.product .price {
    font-size: 1.125rem !important; /* 18px - prices should be prominent */
    line-height: 1.4 !important;
}

/* Product meta information */
.product_meta,
.woocommerce div.product .product_meta {
    font-size: 0.875rem !important; /* 14px - acceptable for meta */
    line-height: 1.5 !important;
}

/* ============================================
   FOOTER - MAINTAIN READABILITY
   ============================================ */

.footer-navbar {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.7 !important;
}

.footer-navbar .links a,
.footer-navbar .contact-info a,
.footer-navbar p {
    font-size: 0.9375rem !important; /* 15px - acceptable for footer */
    line-height: 1.6 !important;
}

.footer-seo-content {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.7 !important;
}

.footer-seo-content p {
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Ensure touch targets are large enough */
    .action-pro {
        padding: 0.625rem !important; /* Larger touch area */
        font-size: 0.875rem !important;
    }

    .action-pro i {
        font-size: 1.5rem !important; /* Bigger icons for easier tapping */
    }

    /* Product titles on mobile */
    .woocommerce ul.products li.product h2,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.9375rem !important; /* 15px minimum on mobile */
    }

    /* Ensure all body text remains 16px */
    p, body, .entry-content {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
}

/* ============================================
   ACCESSIBILITY & SEO NOTES
   ============================================ */
/*
Google SEO Requirements (2025):
✓ Base font: 16px minimum (Google Lighthouse)
✓ Body text: 16-18px (optimal readability)
✓ Line height: 1.5-1.6 for body text
✓ Touch targets: 48px minimum (44px acceptable)
✓ No text below 12px on mobile
✓ Input font: 16px to prevent iOS zoom

Benefits:
- Passes Google Mobile-Friendly Test
- Improves Core Web Vitals (CWV) scores
- Better user experience = lower bounce rate
- Improved accessibility (WCAG AAA compliant)
- Better rankings in mobile search results

Font Hierarchy (SEO):
H1: 32px (2rem) - Page title
H2: 28px (1.75rem) - Section headings
H3: 24px (1.5rem) - Subsections
H4: 20px (1.25rem) - Minor headings
H5: 18px (1.125rem)
H6: 16px (1rem)
Body: 16px (1rem) - Main content
Small: 14px (0.875rem) - Meta, footer
Minimum: 12px (0.75rem) - Copyright, disclaimers
*/
