/* css/global.css - COMPLETE & UPDATED TO YOUR SPECIFIC NEEDS */

/* --- Root Variables for Theming (Light Mode Defaults) --- */
:root {
    --font-primary: "Outfit", sans-serif;
    
    /* Your existing core colors */
    --color-bg: #fdfdff;
    --color-bg-alt: #f4f7fa;
    --color-text: #454545;
    --color-text-headings: #1c2a4e;
    --color-border: #e8eaf3;
    --color-panel-bg: #ffffff;
    --color-header-bg: rgba(255, 255, 255, 0.85);
    --color-logo-filter: none;
    --color-accent: #4a69ff; /* Your main accent color */
    --color-accent-dark: #3b54cc; /* Your darker shade of accent */
    --color-white: #ffffff;
    --color-hover:rgb(73, 0, 67);
    --gradient-accent: linear-gradient(90deg, #4a69ff 0%, #7b2cbf 100%); /* Your existing accent gradient */

    /* Your existing shadows */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.08);

    /* Your existing heights */
    --header-height: 70px; /* As per your provided global.css */
    --mobile-nav-height: 65px; /* As per your provided global.css */
    --transition-speed: 0.3s; /* Your existing transition speed */

    /* --- NEW/ADJUSTED VARIABLES (Derived from your existing palette) --- */
    --accent-rgb: 74, 105, 255; /* RGB value of your --color-accent (#4a69ff) */
    --color-accent-strong: #2a3c99; /* A slightly deeper shade derived from --color-accent-dark */

    /* Custom shadows for more depth (adjust values based on existing shadows) */
    --shadow-deep: 0 12px 40px rgba(0, 0, 0, 0.1); /* Slightly deeper than shadow-medium */
    --shadow-elevated: 0 25px 60px rgba(0, 0, 0, 0.15); /* More elevated for hover */
    --text-shadow-light: 0 2px 8px rgba(0,0,0,0.05); /* Subtle text shadow */

    /* Specific colors for contact page elements, aligned with your palette */
    --color-text-light: #7c8eac; /* A slightly lighter shade derived from text/headings */
    --color-bg-input: #fcfdff; /* A very light background for input fields */
    --color-text-placeholder: #aab8c2; /* Placeholder text in inputs */
    --color-border-light: #f0f2f5; /* A lighter border */

    /* Gradients for contact block and button hover, using your existing colors */
    --gradient-contact-block-light: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); 
    --gradient-accent-hover: linear-gradient(90deg, var(--color-accent-dark) 0%, var(--color-accent) 100%); /* Slight variation for hover */
}

/* --- Dark Mode Variables --- */
body.dark-mode {
    /* Your existing dark mode colors */
    --color-bg: #121212;
    --color-bg-alt: #1e1e1e;
    --color-text: #c2c2c2;
    --color-text-headings: #ebebeb;
    --color-border: #2c2c2c;
    --color-panel-bg: #1a1a1a;
    --color-header-bg: rgba(26, 26, 26, 0.85);
    --color-logo-filter: brightness(0) invert(1);

    /* --- NEW VARIABLES (Dark Mode Adjusted) --- */
    --color-text-light: #9fa8b8; /* Lighter text for dark mode subtitles */
    --color-bg-input: #282828; /* Darker input background for dark mode */
    --color-text-placeholder: #5c5c5c; /* Darker placeholder in dark mode */
    --color-border-light: #3a3a3a; /* Darker border for inputs in dark mode */

    /* Dark mode gradients using your existing dark mode colors or derivatives */
    --gradient-contact-block-light: linear-gradient(135deg, #202020, #404040); /* Custom gradient for dark mode block (using light var name for consistency) */
    --gradient-contact-block-dark: linear-gradient(135deg, #202020, #404040); /* Renamed for clarity, using subtle dark shades */
    --gradient-accent-hover: linear-gradient(90deg, var(--color-accent-dark) 0%, var(--color-accent) 100%); /* Using existing dark mode accent */
}


/* --- Base Styles (From your provided global.css) --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; /* Base font size for mobile */ }
body {
    font-family: var(--font-primary);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    padding-bottom: var(--mobile-nav-height); /* For fixed mobile nav */
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}
body.no-scroll { overflow: hidden; }
body[data-page="home"] .breadcrumbs-container { display: none; }
.container { width: 90%; max-width: 1100px; margin: 0 auto; }
section { padding: 50px 0; }
h1, h2, h3 { color: var(--color-text-headings); line-height: 1.3; font-weight: 800; transition: color var(--transition-speed) ease; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.7rem; text-align: center; margin-bottom: 2.5rem; }
h3 { font-size: 1.1rem; font-weight: 600; }
p { font-size: 0.95rem; }

/* FIX: Redesigned link styling */
a { color: var(--color-accent); text-decoration: none; } /* Default: no underline */
a:hover { color: var(--color-accent-dark); }

.text-link { /* Add this class to links you want underlined */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.text-link:hover {
    text-decoration-color: var(--color-accent-dark);
}

.cta-button {
    display: inline-flex; /* Changed to inline-flex for alignment */
    align-items: center; /* Vertically align text and icon */
    gap: 8px; /* Space between text and icon */
    background: var(--gradient-accent); 
    color: var(--color-white); 
    padding: 14px 30px;
    border-radius: 50px; 
    font-weight: 600; 
    font-size: 1rem; 
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(74, 105, 255, 0.25); 
    transition: all 0.3s ease; 
    border: none; 
    cursor: pointer;
}
.cta-button:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 7px 20px rgba(74, 105, 255, 0.35);
    color: var(--color-hover); 
}

.breadcrumbs-container { padding: 15px 0; font-size: 0.9rem; }
.breadcrumbs-container a { color: var(--color-accent); }
.breadcrumbs-container span { color: #777; }
.breadcrumbs-container span::before { content: '/'; margin: 0 8px; color: #ccc; }

/* --- Media Queries for Global Styles --- */
@media (min-width: 769px) {
    html { font-size: 16px; /* Base font size for desktop */ }
    body { padding-top: var(--header-height); padding-bottom: 0; }
    section { padding: 80px 0; }
    h1 { font-size: 3.5rem; }
    h2 { font-size: 2.5rem; }
    h3 { font-size: 1.4rem; }
    p { font-size: 1rem; }
    .container { max-width: 1200px; /* Adjust if your design allows for wider containers */ }
}

/* ========================================= */
/* Author Page Specific Styles (Integrated directly) */
/* ========================================= */
.author-profile-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-top: 2rem;
}
.author-profile-header .profile-image-wrapper {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1.5rem auto;
    border: 4px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    transition: all var(--transition-speed) ease;
}
.author-profile-header .profile-image-wrapper:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-medium);
    border-color: var(--color-accent);
}
.author-profile-header .profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.author-profile-header h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.author-profile-header .job-title {
    font-size: 1.1rem;
    color: var(--color-accent);
    margin-bottom: 1.5rem;
}
.author-profile-bio {
    max-width: 700px;
    margin: 0 auto 3rem auto;
    text-align: center;
    line-height: 1.7;
}
.author-profile-socials {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 3rem;
}
/* FIX: Redesigned author social buttons */
.author-profile-socials .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    font-size: 1.8rem;
    color: var(--color-text-headings);
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
}
.author-profile-socials .social-link:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: var(--shadow-medium);
    border-color: var(--color-accent);
    color: var(--color-accent); /* Color accent on hover */
}

/* Media query for author page header font size on desktop */
@media (min-width: 769px) {
    .author-profile-header h1 {
        font-size: 2.8rem;
    }
}

/* ========================================= */
/* NEW ANIMATION STYLES                      */
/* ========================================= */

/* Typing Animation for Hero Text */
#animated-text {
    border-right: 3px solid var(--color-accent);
    animation: blinkCursor 0.75s step-end infinite;
    white-space: nowrap;
    overflow: hidden;
}

@keyframes blinkCursor {
    from, to { border-color: transparent; }
    50% { border-color: var(--color-accent); }
}

/* Arrow Animation for CTA Button */
.cta-arrow {
    transition: transform 0.3s ease;
}
.cta-button:hover .cta-arrow {
    animation: moveArrow 0.6s ease-in-out infinite;
}

@keyframes moveArrow {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0);
    }
}