/*
Theme Name: Kangen Water India — Luxury Water Ionizer & Distributor Theme
Author: Independent Water Advisory India
Description: A bespoke, ultra-premium WordPress theme for Japanese water-ionization systems and independent distributor business opportunities in India. Styled with the Imperial Oceanic & Active Hydrogen Platinum palette (Imperial Deep Sapphire #07172B, Abyssal Navy #0D223C, Glacier Ice #F8FAFC, Pure Diamond White #FFFFFF, Electric Hydrogen Cyan #00A8E8, Royal Gold #D4AF37, Obsidian Slate #0F172A, Frost Silver #E2E8F0). 100% responsive, mobile-first, WCAG 2.1 accessible, and packed with interactive tools.
Version: 1.5.0
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary / Commercial
Text Domain: kangen-water
Tags: e-commerce, one-column, custom-header, custom-menu, featured-images, full-width-template, theme-options, translation-ready, wellness, health
*/

:root {
  /* Imperial Oceanic & Active Hydrogen Platinum Palette */
  --primary-dark: #07172B;      /* Imperial Deep Sapphire */
  --secondary-dark: #0D223C;    /* Abyssal Oceanic Navy */
  --main-bg: #F8FAFC;           /* Pure Glacier Ice */
  --white-section: #FFFFFF;     /* Pure Diamond White */
  --water-accent: #00A8E8;      /* Electric Active Hydrogen */
  --light-water: #E0F2FE;       /* Pale Hydrogen Azure */
  --premium-accent: #D4AF37;    /* Prestige Royal Gold */
  --main-text: #0F172A;         /* Deep Obsidian Slate */
  --secondary-text: #475569;    /* Muted Slate */
  --border-sage: #E2E8F0;       /* Frost Silver */
}

/* Core Theme Enhancements, Viewport Locking & Smooth Scrolling */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--main-bg);
  color: var(--main-text);
}

header, main, section, footer, #root, .site-main {
  max-width: 100vw !important;
  overflow-x: clip !important;
  width: 100% !important;
}

/* Strict Mobile Display Rules - Prevents desktop buttons from ever displaying on mobile */
@media (max-width: 1023px) {
  .desktop-only-nav,
  .desktop-action-buttons,
  header .desktop-action-buttons,
  header nav.desktop-only-nav,
  header .hidden.lg\:flex {
    display: none !important;
  }

  .mobile-header-actions {
    display: flex !important;
  }
}

@media (min-width: 1024px) {
  .desktop-action-buttons {
    display: flex !important;
  }
  .desktop-only-nav {
    display: flex !important;
  }
  .mobile-header-actions,
  #kangen-mobile-menu {
    display: none !important;
  }
}

/* Custom Scrollbar in Luxury Imperial Sapphire & Electric Cyan */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--main-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--primary-dark);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--water-accent);
}

/* Core Theme Layout & Contrast Guarantees */
header[role="banner"],
header.sticky {
  background-color: #07172B !important;
  color: #FFFFFF !important;
}

aside[aria-label="Announcement Bar"] {
  background-color: #040D1A !important;
  color: #BAE6FD !important;
}

.hero-sapphire-section {
  background: linear-gradient(180deg, #07172B 0%, #0D223C 50%, #07172B 100%) !important;
  background-color: #07172B !important;
  color: #FFFFFF !important;
}

/* React App Seamless Mount Transition */
.react-mounted > header,
.react-mounted > aside[aria-label="Announcement Bar"],
.react-mounted > footer,
.react-mounted > #consultation-modal,
.react-mounted > #business-modal {
  display: none !important;
}

/* Luxury Color Utility Classes */
.bg-deep-forest { background-color: #07172B; }
.bg-charcoal-green { background-color: #0D223C; }
.bg-warm-ivory { background-color: #F8FAFC; }
.bg-pure-white { background-color: #FFFFFF; }
.bg-refined-aqua { background-color: #00A8E8; }
.bg-pale-aqua { background-color: #E0F2FE; }
.bg-champagne-gold { background-color: #D4AF37; }

.text-deep-forest { color: #07172B; }
.text-charcoal-green { color: #0D223C; }
.text-refined-aqua { color: #00A8E8; }
.text-champagne-gold { color: #D4AF37; }
.text-deep-charcoal { color: #0F172A; }
.text-muted-slate { color: #475569; }

.border-soft-sage { border-color: #E2E8F0; }
.border-refined-aqua { border-color: #00A8E8; }
.border-champagne-gold { border-color: #D4AF37; }
.border-deep-forest { border-color: #07172B; }

/* Luxury Button Gradients */
.btn-gold-luxury {
  background: linear-gradient(135deg, #D4AF37 0%, #F59E0B 100%);
  color: #07172B;
  font-weight: 800;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-gold-luxury:hover {
  background: linear-gradient(135deg, #B8972E 0%, #D4AF37 100%);
  box-shadow: 0 10px 25px -5px rgba(212, 175, 55, 0.4);
  transform: translateY(-1px);
}

.btn-forest-luxury {
  background: linear-gradient(135deg, #07172B 0%, #0D223C 100%);
  color: #FFFFFF;
  font-weight: 800;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-forest-luxury:hover {
  background: linear-gradient(135deg, #040D1A 0%, #07172B 100%);
  box-shadow: 0 10px 25px -5px rgba(7, 23, 43, 0.4);
  transform: translateY(-1px);
}

.btn-aqua-luxury {
  background: linear-gradient(135deg, #00A8E8 0%, #0284C7 100%);
  color: #FFFFFF;
  font-weight: 800;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-aqua-luxury:hover {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  box-shadow: 0 10px 25px -5px rgba(0, 168, 232, 0.4);
  color: #FFFFFF;
  transform: translateY(-1px);
}