/*
Theme Name: Soulshine Pathway Theme
Theme URI: https://github.com/adeebakausar/soulshine-pathway
Author: David Starlyte
Author URI: https://davidstarlyte.com
Description: Custom WordPress theme converted from React application.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: soulshine-pathway
*/

/* Reset & Basic Styles */
:root {
    /* Serene lightwork dark theme (22% lightness) */
    --background: 180 18% 22%;
    --foreground: 45 30% 95%;

    --card: 180 16% 26%;
    --card-foreground: 45 30% 95%;

    --popover: 180 16% 24%;
    --popover-foreground: 45 30% 95%;

    /* Teal/Turquoise primary */
    --primary: 174 60% 48%;
    --primary-foreground: 180 18% 12%;

    /* Lighter secondary */
    --secondary: 180 16% 30%;
    --secondary-foreground: 45 30% 95%;

    --muted: 180 14% 32%;
    --muted-foreground: 45 15% 70%;

    /* Gold accent */
    --accent: 43 85% 55%;
    --accent-foreground: 180 18% 12%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 180 14% 35%;
    --input: 180 14% 35%;
    --ring: 174 60% 48%;

    --radius: 0.5rem;

    /* Custom design tokens - serene lightwork */
    --hero-gradient: linear-gradient(180deg, hsl(180 18% 20%) 0%, hsl(180 18% 24%) 100%);
    --card-gradient: linear-gradient(135deg, hsl(180 16% 28%) 0%, hsl(180 16% 24%) 100%);
    --text-gradient: linear-gradient(135deg, hsl(174 60% 48%) 0%, hsl(174 60% 62%) 100%);
    --gold-gradient: linear-gradient(135deg, hsl(43 85% 50%) 0%, hsl(48 90% 60%) 100%);

    --shadow-soft: 0 4px 20px -4px hsl(0 0% 0% / 0.2);
    --shadow-elevated: 0 8px 40px -8px hsl(0 0% 0% / 0.3);
    --shadow-glow: 0 0 40px hsl(174 60% 48% / 0.2);
    --shadow-gold: 0 0 30px hsl(43 85% 55% / 0.25);

    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Typography */
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Outfit', system-ui, sans-serif;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif);
    letter-spacing: -0.025em;
    font-weight: 500;
}

/* Custom Utilities that were in @layer components */
.text-gradient {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gold-gradient {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-gradient {
    background: var(--hero-gradient);
}

.card-gradient {
    background: var(--card-gradient);
}


/* Custom Utilities - Ported from React index.css */
.shadow-soft {
    box-shadow: var(--shadow-soft);
}

.shadow-elevated {
    box-shadow: var(--shadow-elevated);
}

.shadow-glow {
    box-shadow: var(--shadow-glow);
}

.shadow-gold {
    box-shadow: var(--shadow-gold);
}

/* Gold border accent */
.border-gold {
    border-color: hsl(43 85% 55%);
}

/* Elegant underline animation */
.elegant-underline {
    position: relative;
    text-decoration: none;
}

.elegant-underline::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: hsl(43 85% 55%);
    background-color: hsl(var(--accent));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Gentle hover lift */
.hover-lift {
    transition: var(--transition-smooth);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);
}

/* Animations from index.css */
.animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}

.animate-fade-in-delay-1 {
    animation: fade-in 0.5s ease-out 0.1s forwards;
    opacity: 0;
}

.animate-fade-in-delay-2 {
    animation: fade-in 0.5s ease-out 0.2s forwards;
    opacity: 0;
}

.animate-fade-in-delay-3 {
    animation: fade-in 0.5s ease-out 0.3s forwards;
    opacity: 0;
}

.animate-fade-in-delay-4 {
    animation: fade-in 0.5s ease-out 0.4s forwards;
    opacity: 0;
}

/* Stagger children animation */
.stagger-children>* {
    opacity: 0;
    animation: fade-in-up 0.6s ease-out forwards;
}

.stagger-children>*:nth-child(1) {
    animation-delay: 0.1s;
}

.stagger-children>*:nth-child(2) {
    animation-delay: 0.2s;
}

.stagger-children>*:nth-child(3) {
    animation-delay: 0.3s;
}

.stagger-children>*:nth-child(4) {
    animation-delay: 0.4s;
}

.stagger-children>*:nth-child(5) {
    animation-delay: 0.5s;
}

.stagger-children>*:nth-child(6) {
    animation-delay: 0.6s;
}

/* Subtle float animation */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Section container - EXACT MATCH from index.css */
.section-container {
    max-width: 80rem;
    /* max-w-7xl = 1280px */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    /* px-6 */
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {
    .section-container {
        padding-left: 2rem;
        /* lg:px-8 */
        padding-right: 2rem;
    }
}

/* Section padding - EXACT MATCH from index.css */
.section-padding {
    padding-top: 5rem;
    /* py-20 */
    padding-bottom: 5rem;
}

@media (min-width: 768px) {
    .section-padding {
        padding-top: 7rem;
        /* md:py-28 */
        padding-bottom: 7rem;
    }
}

@media (min-width: 1024px) {
    .section-padding {
        padding-top: 8rem;
        /* lg:py-32 */
        padding-bottom: 8rem;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}