/*
Theme Name: Seaplast India
Theme URI: https://seaplastindia.com/
Author: Seaplast Engineering Team
Author URI: https://seaplastindia.com/
Description: Modern, lightweight, high-performance WordPress theme for Seaplast India. Built with 100% full support for Elementor Pro Theme Builder locations (Header, Footer, Single, Archive, Single Product, Shop) and full WooCommerce integration. PHP 8.3+ optimized.
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seaplast
Tags: elementor-header-footer, e-commerce, custom-header, custom-menu, featured-images, full-width-template, theme-options, translation-ready, performance-optimized
*/

/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS (CSS Custom Properties)
   ══════════════════════════════════════════════════════════ */
:root {
  /* Seaplast Brand Colors */
  --sp-bg-dark: #040D1A;
  --sp-bg-dark-translucent: rgba(4, 13, 26, 0.88);
  --sp-brand-teal: #00A8C6;
  --sp-brand-teal-glow: rgba(0, 168, 198, 0.35);
  --sp-brand-orange-start: #FF6B00;
  --sp-brand-orange-end: #FF8800;
  --sp-text-light: #FFFFFF;
  --sp-text-muted: #94A3B8;
  --sp-border-dark: rgba(255, 255, 255, 0.1);

  /* WooCommerce Accent Colors */
  --sp-wc-accent: #00A8C6;
  --sp-wc-success: #10B981;
  --sp-wc-price: #FF8800;

  /* Typography */
  --sp-font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --sp-header-height: 80px;
}

/* ══════════════════════════════════════════════════════════
   GLOBAL RESET & BASE
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--sp-font-primary);
  background-color: #030D1B;
  color: #1e293b;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Contain the body paint area for performance */
  contain: paint;
}

/* Link Resets */
a {
  color: var(--sp-brand-teal);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  color: #00849c;
}

/* ══════════════════════════════════════════════════════════
   PERFORMANCE UTILITIES
   ══════════════════════════════════════════════════════════ */

/* Skip to content link for accessibility */
.sp-skip-link {
  position: absolute;
  top: -1000px;
  left: 6px;
  z-index: 100000;
  background: var(--sp-brand-teal);
  color: #000;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 4px 4px;
}
.sp-skip-link:focus {
  top: 0;
}

/* Lazy-load image placeholder */
img[loading="lazy"] {
  background: transparent;
}

/* Prevent layout shift for images with dimensions */
img {
  max-width: 100%;
  height: auto;
}

/* Content-visibility for below-fold sections — improves LCP */
@media screen {
  .sp-site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 500px;
  }
  .sp-showcase-section {
    content-visibility: auto;
    contain-intrinsic-size: 700px;
  }
}