/*
Theme Name: Purple Clinical Child
Theme URI: https://purple-patch-shine--christaylor0558.replit.app
Description: Purple Clinical Elementor Child Theme designed for WooCommerce.
Author: Purple Clinical
Author URI: https://purple.clinical
Template: hello-elementor
Version: 1.0.0
Text Domain: purple-clinical-child
*/

:root {
  /* HSL → HEX approximations for Elementor */
  --primary:           hsl(270, 80%, 60%);   /* #7B2FE0 — primary purple CTA */
  --primary-light:     hsl(270, 80%, 75%);   /* #A96CF0 — gradient start */
  --secondary:         hsl(280, 60%, 85%);   /* #D4A8F5 — soft lavender */
  --accent:            hsl(280, 70%, 75%);   /* #C47FF0 — hover/accent */
  --background:        hsl(270, 60%, 97%);   /* #F5EFFF — near-white lavender page bg */
  --foreground:        hsl(270, 50%, 15%);   /* #1E0A3C — near-black dark purple text */
  --card-bg:           hsl(270, 50%, 99%);   /* #FAF8FF — card white */
  --muted:             hsl(270, 40%, 92%);   /* #E8DCFA — muted bg */
  --muted-foreground:  hsl(270, 30%, 45%);   /* #6B4D8A — secondary text */
  --border:            hsl(270, 30%, 85%);   /* #CBBDE0 — soft borders */
  --glass-bg:          hsla(270, 50%, 99%, 0.80);
  --glass-border:      hsla(270, 40%, 90%, 0.60);
  --radius:            0.75rem;

  /* Gradients */
  --gradient-primary:  linear-gradient(135deg, hsl(270,80%,75%), hsl(280,70%,80%));
  --gradient-light:    linear-gradient(180deg, hsl(270,60%,97%), hsl(270,50%,92%));
  --gradient-glow:     linear-gradient(135deg, hsla(270,80%,75%,0.3), hsla(280,70%,80%,0.4));
  --gradient-overlay:  linear-gradient(180deg, hsla(270,60%,95%,0.85) 0%, hsla(280,65%,90%,0.90) 100%);
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--foreground);
    background: var(--gradient-light);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    color: var(--foreground);
    font-weight: 700;
}

h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 800; line-height: 1.1; }
h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.2; }
h3 { font-size: clamp(20px, 3vw, 24px); }

p {
    color: var(--muted-foreground);
    font-size: 16px;
    line-height: 1.6;
}
p.primary-text { color: var(--foreground); }

/* Buttons */
.btn-primary,
.elementor-button {
    background: #7B2FE0 !important;
    color: #fff !important;
    border-radius: 2rem !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.3s ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-primary:hover,
.elementor-button:hover {
    background: hsl(270, 80%, 50%) !important; /* Darken 10% */
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(123, 47, 224, 0.2) !important;
}

.btn-outline {
    background: transparent !important;
    border: 2px solid #1E0A3C !important;
    color: #1E0A3C !important;
    border-radius: 2rem !important;
    padding: 10px 26px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline:hover {
    background: #1E0A3C !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(30, 10, 60, 0.2) !important;
}

/* Glass Card */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(120, 60, 200, 0.08);
    padding: 2rem;
}