/*
Theme Name: West Star Consulting
Theme URI: https://weststarconsulting.com
Author: Antigravity
Description: A modern, formal legal consulting theme for WESTSTARCONSULTING.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: legal, consulting, modern, formal, blue
*/

/* 
This file is the primary stylesheet for the West Star Consulting theme. 
Tailwind CSS and other external libraries are enqueued via functions.php.
Custom styles from the static version are also included here.
*/

:root {
    --primary: #195ea3;
    --primary-dark: #124a82;
    --primary-light: #e8f1f8;
    --accent: #00d4ff;
    --background-light: #f6f7f8;
    --background-dark: #121920;
    --charcoal: #1e293b;
    --slate-text: #475569;
}

body {
    scroll-behavior: smooth;
    font-family: 'Inter', sans-serif;
}

.serif-title {
    font-family: 'Playfair Display', serif;
}

.glass-nav {
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    transition: all 0.4s ease;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f8fafc;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* Premium Card Styles */
.premium-card {
    background: white;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.01), 0 20px 40px -15px rgba(15, 23, 42, 0.03);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 1.5rem;
}

.premium-card:hover {
    transform: translateY(-6px) scale(1.005);
    box-shadow: 0 20px 50px -15px rgba(25, 94, 163, 0.08);
    border-color: rgba(25, 94, 163, 0.15);
}

.dark .premium-card {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.05);
}

/* Image Zoom Effect */
.image-zoom-container {
    overflow: hidden;
    position: relative;
    border-radius: 1.5rem;
}

.image-zoom-container img {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-zoom-container:hover img {
    transform: scale(1.06);
}

/* Premium Buttons */
.btn-premium {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-premium::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: 0.75s;
    opacity: 0;
}

.btn-premium:hover::after {
    left: 125%;
    opacity: 1;
}

/* Underline Animation for Links */
.hover-underline-animation {
    display: inline-block;
    position: relative;
}

.hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--primary);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.hover-underline-animation:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Interactive Blocks - Services */
.service-card {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid transparent;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -20px rgba(25, 94, 163, 0.12);
    border-color: rgba(25, 94, 163, 0.1);
    background-color: white;
}

.service-number {
    color: rgba(25, 94, 163, 0.04);
    font-size: 6rem;
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: 20px;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover .service-number {
    color: rgba(25, 94, 163, 0.08);
    transform: scale(1.08) translateY(-4px);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

.faq-group.active .faq-content {
    max-height: 500px;
    opacity: 1;
    padding-bottom: 24px;
}

.faq-group.active .faq-icon {
    transform: rotate(180deg);
}

.faq-icon {
    transition: transform 0.4s;
}

/* AOS Tweaks */
[data-aos] {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000;
    transform: translate3d(0, 0, 0);
    transition-duration: 1000ms !important;
}