/*
 Theme Name:   YWCA Mumbai
 Theme URI:    https://goldenrod-fish-604404.hostingersite.com
 Description:  Child theme of Hello Elementor for YWCA Mumbai — custom fonts, colors, and overrides.
 Author:       UnfoldCRO
 Author URI:   https://unfoldcro.com
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  ywca-mumbai
*/

/* ─── Design Tokens ──────────────────────────── */
:root {
    --ywca-green: #1B6B3A;
    --ywca-green-dark: #145A2E;
    --ywca-green-light: #22864A;
    --ywca-blue: #2563EB;
    --ywca-blue-dark: #1D4ED8;
    --ywca-blue-light: #3B82F6;
    --ywca-yellow: #F5C518;
    --ywca-yellow-hover: #E5B800;
    --ywca-dark: #1a1a1a;
    --ywca-gray: #6B7280;
    --ywca-gray-light: #F5F5F5;
    --ywca-white: #ffffff;
    --ywca-radius: 8px;
    --ywca-radius-lg: 16px;
}

/* ─── Typography ─────────────────────────────── */
body,
.elementor-widget-text-editor,
.elementor-widget-theme-post-content {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ywca-dark);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--ywca-dark);
}

/* Playfair for italic/elegant headings */
.ywca-elegant,
.elementor-widget-heading .ywca-elegant {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
}

/* ─── Elementor Overrides ────────────────────── */

/* Primary button */
.elementor-button,
.e-form__buttons__wrapper button {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    border-radius: 50px;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}

/* Green button */
.ywca-btn-green .elementor-button {
    background-color: var(--ywca-green);
    border-color: var(--ywca-green);
}
.ywca-btn-green .elementor-button:hover {
    background-color: var(--ywca-green-dark);
}

/* Yellow button */
.ywca-btn-yellow .elementor-button {
    background-color: var(--ywca-yellow);
    border-color: var(--ywca-yellow);
    color: var(--ywca-dark);
}
.ywca-btn-yellow .elementor-button:hover {
    background-color: var(--ywca-yellow-hover);
}

/* Blue button */
.ywca-btn-blue .elementor-button {
    background-color: var(--ywca-blue);
    border-color: var(--ywca-blue);
}
.ywca-btn-blue .elementor-button:hover {
    background-color: var(--ywca-blue-dark);
}

/* Outline button */
.ywca-btn-outline .elementor-button {
    background: transparent;
    border: 2px solid var(--ywca-dark);
    color: var(--ywca-dark);
}
.ywca-btn-outline .elementor-button:hover {
    background: var(--ywca-dark);
    color: var(--ywca-white);
}

/* ─── Stats Cards ────────────────────────────── */
.ywca-stat-card {
    border-radius: var(--ywca-radius-lg);
    padding: 32px;
    color: white;
}
.ywca-stat-card--green { background: var(--ywca-green); }
.ywca-stat-card--blue { background: var(--ywca-blue); }
.ywca-stat-card--blue-light { background: var(--ywca-blue-light); }

/* ─── Section Backgrounds ────────────────────── */
.ywca-bg-green { background-color: var(--ywca-green); }
.ywca-bg-green-dark { background-color: var(--ywca-green-dark); }
.ywca-bg-blue { background-color: var(--ywca-blue); }
.ywca-bg-gray { background-color: var(--ywca-gray-light); }
.ywca-bg-yellow { background-color: var(--ywca-yellow); }

/* ─── Cards ──────────────────────────────────── */
.ywca-card {
    background: var(--ywca-white);
    border-radius: var(--ywca-radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.ywca-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* ─── Footer ─────────────────────────────────── */
.ywca-footer {
    background: var(--ywca-green-dark);
    color: rgba(255, 255, 255, 0.7);
}
.ywca-footer a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s;
}
.ywca-footer a:hover {
    color: white;
}
.ywca-footer h4,
.ywca-footer .elementor-heading-title {
    color: white;
}

/* ─── Selection ──────────────────────────────── */
::selection {
    background: var(--ywca-green);
    color: white;
}

/* ─── Smooth Scroll ──────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ─── Accessibility ──────────────────────────── */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--ywca-blue);
    outline-offset: 2px;
}