/*
Theme Name: SalesHive
Theme URI: https://saleshive.com
Author: SalesHive
Author URI: https://saleshive.com
Description: A custom dark theme for SalesHive - built for AI-assisted development with custom HTML pages.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saleshive
*/

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
    /* Colors */
    --sh-black: #0a0a0f;
    --sh-dark: #12121a;
    --sh-dark-purple: #1a0f1f;
    --sh-orange: #ff8c1a;
    --sh-orange-light: #ffb347;
    --sh-orange-dark: #ff6b00;
    --sh-purple: #9b51e0;
    --sh-purple-light: #b57bee;
    --sh-green: #28c840;
    --sh-red: #ff5f57;
    --sh-yellow: #febc2e;
    --sh-white: #ffffff;
    --sh-gray-100: rgba(255, 255, 255, 0.9);
    --sh-gray-200: rgba(255, 255, 255, 0.7);
    --sh-gray-300: rgba(255, 255, 255, 0.6);
    --sh-gray-400: rgba(255, 255, 255, 0.5);
    --sh-gray-500: rgba(255, 255, 255, 0.4);
    --sh-gray-600: rgba(255, 255, 255, 0.3);
    --sh-gray-700: rgba(255, 255, 255, 0.2);
    --sh-gray-800: rgba(255, 255, 255, 0.1);
    --sh-gray-900: rgba(255, 255, 255, 0.05);
    
    /* Typography */
    --sh-font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sh-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Spacing */
    --sh-container-max: 1400px;
    --sh-container-padding: 40px;
    
    /* Transitions */
    --sh-transition-fast: 0.2s ease;
    --sh-transition-medium: 0.3s ease;
    --sh-transition-slow: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Shadows */
    --sh-shadow-glow-orange: 0 0 40px rgba(255, 107, 0, 0.4);
    --sh-shadow-glow-purple: 0 0 40px rgba(155, 81, 224, 0.3);
    --sh-shadow-elevated: 0 25px 50px rgba(0, 0, 0, 0.5);
    
    /* Border Radius */
    --sh-radius-sm: 8px;
    --sh-radius-md: 12px;
    --sh-radius-lg: 20px;
    --sh-radius-xl: 30px;
    --sh-radius-full: 50px;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--sh-font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--sh-gray-200);
    background: var(--sh-black);
    min-height: 100vh;
}

/* Selection */
::selection {
    background: var(--sh-orange);
    color: var(--sh-black);
}

/* Links */
a {
    color: var(--sh-orange-light);
    text-decoration: none;
    transition: color var(--sh-transition-fast);
}

a:hover {
    color: var(--sh-orange);
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--sh-white);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Paragraphs */
p {
    margin-bottom: 1em;
}

p:last-child {
    margin-bottom: 0;
}

/* Lists */
ul, ol {
    padding-left: 1.5em;
}

li {
    margin-bottom: 0.5em;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.sh-container {
    max-width: var(--sh-container-max);
    margin: 0 auto;
    padding: 0 var(--sh-container-padding);
}

.sh-text-gradient {
    background: linear-gradient(135deg, var(--sh-orange-light) 0%, var(--sh-orange) 50%, var(--sh-orange-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sh-text-gradient-purple {
    background: linear-gradient(135deg, var(--sh-purple-light) 0%, var(--sh-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   BUTTONS
   ============================================ */
.sh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    font-family: var(--sh-font-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: var(--sh-radius-md);
    cursor: pointer;
    transition: all var(--sh-transition-slow);
    position: relative;
    overflow: hidden;
}

.sh-btn-primary {
    background: linear-gradient(135deg, var(--sh-orange), var(--sh-orange-dark));
    color: var(--sh-black);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.sh-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: btnShimmer 3s infinite;
}

@keyframes btnShimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.sh-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    color: var(--sh-black);
}

.sh-btn-secondary {
    background: transparent;
    color: var(--sh-gray-100);
    border: 1px solid var(--sh-gray-700);
}

.sh-btn-secondary:hover {
    background: var(--sh-gray-900);
    border-color: rgba(255, 140, 26, 0.5);
    color: var(--sh-white);
}

.sh-btn-ghost {
    background: transparent;
    color: var(--sh-gray-200);
    padding: 12px 20px;
}

.sh-btn-ghost:hover {
    color: var(--sh-orange-light);
}

/* ============================================
   FORMS
   ============================================ */
input, textarea, select {
    font-family: var(--sh-font-primary);
    font-size: 16px;
    color: var(--sh-white);
    background: var(--sh-gray-900);
    border: 1px solid var(--sh-gray-700);
    border-radius: var(--sh-radius-sm);
    padding: 14px 18px;
    width: 100%;
    transition: all var(--sh-transition-fast);
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--sh-orange);
    box-shadow: 0 0 0 3px rgba(255, 140, 26, 0.1);
}

input::placeholder, textarea::placeholder {
    color: var(--sh-gray-500);
}

/* ============================================
   CARDS
   ============================================ */
.sh-card {
    background: linear-gradient(145deg, rgba(20, 20, 30, 0.95), rgba(10, 10, 15, 0.98));
    border: 1px solid var(--sh-gray-800);
    border-radius: var(--sh-radius-lg);
    padding: 30px;
    transition: all var(--sh-transition-medium);
}

.sh-card:hover {
    border-color: rgba(255, 140, 26, 0.3);
    transform: translateY(-5px);
    box-shadow: var(--sh-shadow-elevated);
}

/* ============================================
   PAGE WRAPPER
   ============================================ */
.sh-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sh-main {
    flex: 1;
}

/* Allow full-width sections */
.sh-main.full-width {
    padding: 0;
}

/* Standard page content */
.sh-page-content {
    padding: 80px 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    :root {
        --sh-container-padding: 30px;
    }
}

@media (max-width: 768px) {
    :root {
        --sh-container-padding: 20px;
    }
    
    .sh-btn {
        padding: 14px 24px;
        font-size: 13px;
    }
}

/* ============================================
   TEXT REVEAL ANIMATION
   ============================================ */

/* Hide headings by default to prevent flash - CSS loads before JS */
.sh-hero-headline,
.sh-main h1,
.sh-main h2,
.sh-hero h2,
.sh-section h2 {
    opacity: 0;
}

/* Class added by JS - keeps it hidden until animation */
.sh-text-reveal {
    opacity: 0;
}

/* Show when animation is applied - JS sets these inline */
.sh-text-reveal[data-rise-anim="true"] {
    opacity: 1;
}

/* Splitting.js character styles */
.sh-text-reveal .char {
    display: inline-block;
    will-change: transform, opacity;
    margin: 0;
    padding: 0;
}

/* Preserve original text layout - prevent line break changes */
.sh-text-reveal .word {
    display: inline;
    white-space: normal;
}

/* Keep whitespace between words */
.sh-text-reveal .whitespace {
    display: inline;
    width: 0.3em;
}

/* Hover cursor for animated headings */
.sh-text-reveal[data-hover-added="true"] {
    cursor: default;
}

/* ============================================
   GRADIENT TEXT FIX FOR SPLIT CHARACTERS
   Preserves gradient effects when using Splitting.js
   ============================================ */

/* Orange highlight gradient (hero) */
.sh-hero-highlight .char {
    background: linear-gradient(135deg, var(--sh-orange-light) 0%, var(--sh-orange) 50%, var(--sh-orange-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* General text gradient */
.sh-text-gradient .char {
    background: linear-gradient(135deg, var(--sh-orange-light) 0%, var(--sh-orange) 50%, var(--sh-orange-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Purple text gradient */
.sh-text-gradient-purple .char,
.sh-highlight-purple .char {
    background: linear-gradient(135deg, var(--sh-purple-light) 0%, var(--sh-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Green text gradient (for deposit pages) */
.sh-highlight-green .char {
    background: linear-gradient(135deg, #4ade80, #28c840);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Blue text gradient (for Philippines page) */
.sh-highlight-blue .char {
    background: linear-gradient(135deg, #0095ff, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Teal text gradient (for List Building page) */
.sh-highlight-teal .char {
    background: linear-gradient(135deg, #00c896, #00e6ac);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Indigo text gradient (for Blog page) */
.sh-highlight-indigo .char {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Cyan text gradient (for Cold Calling Guide) */
.sh-highlight-cyan .char {
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Generic orange highlight (for Case Studies) */
.sh-highlight .char {
    background: linear-gradient(135deg, #ff8c1a, #ffa500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gold text gradient (for About page) */
.sh-highlight-gold .char {
    background: linear-gradient(135deg, #ffa500, #ffc800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Orange text gradient (for Process page) */
.sh-highlight-orange .char {
    background: linear-gradient(135deg, #ff8533, #ff6b00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}