/*
Theme Name: WebSocialTraffic
Theme URI: https://websocialtraffic.com/
Author: Pramod Kumar
Author URI: https://websocialtraffic.com/
Description: Exact Google AI Studio Master Replication WordPress Theme for WebSocialTraffic.com. Built with luxury dark obsidian (#050814) architecture, saffron accents (#E8942F), Tailwind CSS engine, and complete 10-section homepage layout.
Version: 4.0.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: websocialtraffic
Tags: blog, e-commerce, custom-colors, custom-menu, full-width-template, theme-options, block-patterns, editor-style
*/

/* 1. Global Variables & Obsidian Theme Foundation */
:root {
  --wst-bg-primary: #050814;
  --wst-bg-secondary: #070d1d;
  --wst-bg-card: #091126;
  --wst-bg-surface: #030712;
  --wst-text-primary: #F8FAFC;
  --wst-text-secondary: #94A3B8;
  --wst-text-muted: #64748B;
  --wst-color-saffron: #E8942F;
  --wst-color-saffron-light: #F4A340;
  --wst-color-saffron-hover: #CC7620;
  --wst-border-obsidian: rgba(30, 58, 138, 0.4);
  --wst-border-saffron: rgba(232, 148, 47, 0.4);
}

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

html {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  background-color: var(--wst-bg-primary);
  color: var(--wst-text-primary);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--wst-bg-primary);
  color: var(--wst-text-primary);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 2. SVG Dimension Guards */
svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
svg.w-3 { width: 12px; height: 12px; }
svg.w-3\.5 { width: 14px; height: 14px; }
svg.w-4 { width: 16px; height: 16px; min-width: 16px; min-height: 16px; }
svg.w-5 { width: 20px; height: 20px; }
svg.w-6 { width: 24px; height: 24px; }
svg.w-8 { width: 32px; height: 32px; }

/* 3. Ticker Marquee Keyframes */
.wst-marquee-inner {
  display: inline-flex;
  gap: 2rem;
  align-items: center;
  animation: wstTicker 35s linear infinite;
  white-space: nowrap;
}
@keyframes wstTicker {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.wst-marquee-inner:hover {
  animation-play-state: paused;
}

/* 4. Dropdown Menu */
.wst-dropdown-trigger {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
}
.wst-dropdown:hover .wst-dropdown-menu,
.wst-dropdown:focus-within .wst-dropdown-menu {
  display: block !important;
}

/* 5. Range Slider */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #1e293b;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #E8942F;
  cursor: pointer;
  border: 3px solid #050814;
  box-shadow: 0 0 10px rgba(232, 148, 47, 0.5);
  transition: transform 0.1s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* 6. Utility & Block Support */
.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }