/*
Theme Name: The7 Child - GR Klinika
Theme URI: https://www.g-r.lt/
Description: Custom child theme for GR Grožio ir sveikatingumo klinika. Contains custom styling, SEO enhancements, GDPR compliance, and AI agent optimization.
Author: GR Klinika Dev Team
Author URI: https://www.g-r.lt/
Template: dt-the7
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: the7mk2-child
Tags: beauty, clinic, medical, responsive, translation-ready
*/

/*
 * ============================================
 * TABLE OF CONTENTS
 * ============================================
 * 1. CSS Variables / Custom Properties
 * 2. Base Overrides
 * 3. Typography
 * 4. Header
 * 5. Hero Section
 * 6. Service Cards
 * 7. Footer
 * 8. Cookie Consent
 * 9. Responsive Adjustments
 * 10. Animations
 * ============================================
 */

/* ===========================================
   1. CSS VARIABLES / CUSTOM PROPERTIES
   =========================================== */
:root {
    /* Brand Colors - To be finalized after mockup approval */
    --gr-primary: #b49258;          /* Gold accent (WCAG AA safe) */
    --gr-primary-dark: #a88b4a;
    --gr-secondary: #2c3e50;        /* Dark blue */
    --gr-accent: #f5f0e8;           /* Warm cream */
    --gr-text: #333333;
    --gr-text-light: #666666;
    --gr-white: #ffffff;
    --gr-background: #fafafa;

    /* Typography */
    --gr-font-heading: 'Playfair Display', Georgia, serif;
    --gr-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --gr-spacing-xs: 0.5rem;
    --gr-spacing-sm: 1rem;
    --gr-spacing-md: 2rem;
    --gr-spacing-lg: 4rem;
    --gr-spacing-xl: 6rem;

    /* Border Radius - Modern rounded corners */
    --gr-radius-sm: 8px;
    --gr-radius-md: 16px;
    --gr-radius-lg: 24px;
    --gr-radius-full: 9999px;

    /* Shadows */
    --gr-shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --gr-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --gr-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

    /* Transitions */
    --gr-transition-fast: 150ms ease;
    --gr-transition-normal: 300ms ease;
    --gr-transition-slow: 500ms ease;
}

/* ===========================================
   2. BASE OVERRIDES
   =========================================== */
/* These will be filled in after mockup approval */

/* ===========================================
   3. TYPOGRAPHY
   =========================================== */
/* To be customized based on design direction */

/* ===========================================
   4. HEADER
   =========================================== */
/* Header modernization styles */

/* ===========================================
   5. HERO SECTION
   =========================================== */
/* Hero section improvements */

/* ===========================================
   6. SERVICE CARDS
   =========================================== */
/* Modern card styles with hover effects */

/* ===========================================
   7. FOOTER
   =========================================== */
/* Footer improvements */

/* ===========================================
   8. COOKIE CONSENT
   =========================================== */
/* Custom styling for cookie consent banner */
#cookie-notice {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    border-top: 1px solid #e5e5e5;
    box-shadow: var(--gr-shadow-lg);
}

#cookie-notice .cookie-notice-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--gr-spacing-md);
}

#cookie-notice .cn-button {
    border-radius: var(--gr-radius-sm);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: var(--gr-transition-normal);
}

#cookie-notice .cn-button.cn-button-custom {
    background-color: var(--gr-primary);
    color: var(--gr-white);
}

#cookie-notice .cn-button.cn-button-custom:hover {
    background-color: var(--gr-primary-dark);
}

/* ===========================================
   9. RESPONSIVE ADJUSTMENTS
   =========================================== */
@media (max-width: 768px) {
    :root {
        --gr-spacing-lg: 2rem;
        --gr-spacing-xl: 3rem;
    }
}

/* ===========================================
   10. ANIMATIONS
   =========================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gr-animate-fade-in-up {
    animation: fadeInUp var(--gr-transition-slow) ease forwards;
}