@tailwind base;
@tailwind components;
@tailwind utilities;

:root .py-1\.5,
.py-1\.5 {
    /* Override Tailwind's vertical-only padding with a full 1em box */
    padding: 1em !important;
}

:root {
    /* CoreLife palette pulled from legacy site */
    --cl-primary: #d23768;   /* magenta */
    --cl-accent: #f86303;   /* flame orange */
    --cl-ink: #0f172a;
    --cl-muted: #6b7280;
    --cl-surface: rgba(255, 255, 255, 0.85);

    /* SRIHATI palette */
    --srihati-white: #ffffff;
    --srihati-primary: #953666;
    --srihati-secondary: #be3862;
    --srihati-accent: #905380;
    --srihati-royal-purple: #7a3570;
    --srihati-deep-purple: #6b2f6f;
    --srihati-success: #22c55e;
    --srihati-warning: #f59e0b;
    --srihati-info: #3b82f6;
    --srihati-error: #ef4444;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--cl-ink);
    background: #f8fafc;
}

/* Slight extra space below all white-backed sections */
section.bg-white {
    padding-bottom: 1.5em;
}

/* Add bottom padding to Tailwind's px-6 containers */
.px-6 {
    padding-bottom: 1.5em !important;
}

/* Global section breathing room for white-backed bands */
section.bg-white {
    padding-bottom: 1.5em;
}

/* Extra vertical breathing room for containers using Tailwind's px-6 */
.px-6 {
    padding-bottom: 1.5em !important;
}

/* Give white-backed sections a little breathing room below */
section.bg-white {
    padding-bottom: 1.5em;
}

/* Extra vertical breathing room for containers using Tailwind's px-6 */
.px-6 {
    padding-bottom: 1.5em !important;
}

.glass {
    background: var(--cl-surface);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 60px rgba(210, 55, 104, 0.08);
}

.card-hover {
    transition: transform 350ms ease, box-shadow 350ms ease, border-color 350ms ease;
}

.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(210, 55, 104, 0.14);
    border-color: rgba(210, 55, 104, 0.3);
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 800ms ease, transform 800ms ease;
}

.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

.calendar-months-animating {
    animation: calendar-swipe 320ms ease-out;
}

@keyframes calendar-swipe {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-mask {
    mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 95%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 95%);
}

.btn-primary {
    background: linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-accent) 60%);
    color: #fff;
    box-shadow: 0 14px 30px rgba(210, 55, 104, 0.25);
}

.btn-primary:hover {
    filter: brightness(0.96);
}

.btn-outline {
    border: 1px solid rgba(210, 55, 104, 0.25);
    color: var(--cl-primary);
}

.btn-outline:hover {
    border-color: var(--cl-accent);
    color: var(--cl-accent);
}

/* Extra breathing room inside the SRIHATI flagship band */
#srihati .py-8 {
    padding-left: 2em;
    padding-right: 2em;
}

/* Hero section background & decorative blobs */
.cl-hero-bg {
    background: linear-gradient(135deg, #ffe9f2 0%, #fdf3e6 45%, #e9f2ff 100%);
}

.cl-hero-blob-left {
    background: radial-gradient(circle, rgba(210, 55, 104, 0.22), transparent 50%);
}

.cl-hero-blob-right {
    background: radial-gradient(circle, rgba(248, 99, 3, 0.18), transparent 60%);
}

.cl-hero-image-overlay {
    background: linear-gradient(135deg, rgba(210, 55, 104, 0.12), transparent);
}

.cl-modal-poster-fallback {
    background-image: linear-gradient(135deg, #ffe9f2 0%, #fdf3e6 40%, #e9f2ff 100%);
}

/* About section – colourful gradient with white text */
.cl-about-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.35), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(236, 72, 153, 0.35), transparent 55%),
        linear-gradient(135deg, #020617 0%, #0f172a 30%, #1d4ed8 65%, #ec4899 100%);
}

.cl-about-section::before {
    content: "";
    position: absolute;
    inset: -20%;
    background-image:
        radial-gradient(circle at 8px 8px, rgba(248, 250, 252, 0.32) 1.5px, transparent 0);
    background-size: 26px 26px;
    opacity: 0.16;
    mix-blend-mode: screen;
    pointer-events: none;
}

.cl-about-section-inner {
    position: relative;
    z-index: 1;
}

.cl-about-feature {
    background:
        radial-gradient(circle at 0% 0%, rgba(248, 250, 252, 0.16), transparent 60%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.85));
    border-color: rgba(248, 250, 252, 0.22);
}

.cl-about-pill {
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.96), transparent 60%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.85));
    color: #0f172a;
}

.cl-audience-card {
    border-top-width: 3px;
    background-color: #f9fafb;
}

.cl-audience-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    width: 2.75rem;
    border-radius: 9999px;
    background-color: #ffffff;
    color: #0f172a;
}

.cl-audience-icon svg {
    height: 1.6rem;
    width: 1.6rem;
}

.cl-audience-card-1 {
    border-top-color: #22c55e; /* green */
}

.cl-audience-card-1 .cl-audience-icon {
    background-color: #ecfdf3;
    color: #16a34a;
}

.cl-audience-card-2 {
    border-top-color: #0ea5e9; /* sky */
}

.cl-audience-card-2 .cl-audience-icon {
    background-color: #e0f2fe;
    color: #0369a1;
}

.cl-audience-card-3 {
    border-top-color: #f97316; /* orange */
}

.cl-audience-card-3 .cl-audience-icon {
    background-color: #fff7ed;
    color: #c2410c;
}

/* Process section decorative blobs */
.cl-process-blob-left {
    background: radial-gradient(circle, rgba(190, 56, 98, 0.12), transparent 60%);
}

.cl-process-blob-right {
    background: radial-gradient(circle, rgba(0, 3, 112, 0.12), transparent 60%);
}

/* Admin dashboard hero uses the same CoreLife gradient language */
.cl-admin-hero {
    background: linear-gradient(135deg, #fef3f8 0%, #fdf6ec 45%, #eef4ff 100%);
}

/* Shared animated gradient used for hero areas (front + admin) */
@keyframes cl-gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.cl-hero-bg-animated {
    background-size: 200% 200%;
    animation: cl-gradient-shift 26s ease-in-out infinite alternate;
}

.cl-admin-hero-animated {
    background-size: 200% 200%;
    animation: cl-gradient-shift 32s ease-in-out infinite alternate;
}

/* Subtle radial shell for admin main area */
.cl-admin-shell {
    background:
        radial-gradient(circle at 0% 0%, rgba(210, 55, 104, 0.06), transparent 55%),
        radial-gradient(circle at 100% 20%, rgba(56, 189, 248, 0.06), transparent 55%),
        radial-gradient(circle at 50% 100%, rgba(248, 99, 3, 0.05), transparent 60%);
    position: relative;
    overflow: hidden;
}

/* Reuse the rotated-square pattern on the admin dashboard shell */
.cl-admin-shell::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.06) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.06) 50%,
            rgba(255, 255, 255, 0.06) 75%,
            transparent 75%,
            transparent
        );
    background-size: 7rem 7rem;
    opacity: 0.25;
    mix-blend-mode: screen;
    transform: rotate(8deg);
    pointer-events: none;
}

/* Small accent utilities for admin badges/dots */
.cl-accent-dot-bg {
    background-color: var(--cl-accent);
}

.cl-accent-text {
    color: var(--cl-accent);
}

/* Auth / login shell + card styling */
.cl-auth-shell {
    /* Stronger blue–purple gradient like modern login UIs */
    background:
        radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.45), transparent 55%),
        radial-gradient(circle at 100% 0%, rgba(129, 140, 248, 0.55), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(236, 72, 153, 0.55), transparent 60%),
        linear-gradient(135deg, #0ea5e9 0%, #6366f1 45%, #ec4899 100%);
    position: relative;
    overflow: hidden;
}

/* Subtle rotated-square pattern inspired by your example */
.cl-auth-shell::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.06) 75%, transparent 75%, transparent);
    background-size: 7rem 7rem;
    opacity: 0.35;
    mix-blend-mode: screen;
    transform: rotate(8deg);
    pointer-events: none;
}

.cl-auth-card {
    background:
        radial-gradient(circle at 0% 0%, rgba(248, 250, 252, 0.9), transparent 60%),
        linear-gradient(135deg, #ffffff 0%, #f9fafb 40%, #ffffff 100%);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18);
}

.cl-auth-logo-pill {
    background:
        radial-gradient(circle at 0% 0%, rgba(210, 55, 104, 0.14), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(248, 113, 113, 0.16), transparent 55%),
        #ffffff;
}

.cl-auth-inner {
    max-width: 26rem; /* ~416px card shell similar to your reference */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.btn-auth-primary {
    background-image: linear-gradient(90deg, #22d3ee 0%, #6366f1 50%, #ec4899 100%);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(56, 189, 248, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 3rem; /* inner padding so text is not cramped */
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: none;
}

.btn-auth-primary:hover {
    filter: brightness(0.97);
}

/* Floating dots background, inspired by particle/starfield patterns */
@keyframes cl-dots-drift {
    0% {
        background-position: 0 0, 0 0;
    }
    50% {
        background-position: 40px 20px, -30px 10px;
    }
    100% {
        background-position: 0 0, 0 0;
    }
}

.cl-bg-floating-dots {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(210, 55, 104, 0.20) 1px, transparent 0),
        radial-gradient(circle at 10px 8px, rgba(56, 189, 248, 0.18) 1px, transparent 0);
    background-size: 24px 24px;
    animation: cl-dots-drift 40s linear infinite;
}

/* Generic admin panels with soft futuristic gradients */
.cl-admin-panel-soft {
    background:
        radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.08), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(249, 115, 22, 0.07), transparent 60%),
        linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
}

.cl-admin-panel-soft-alt {
    background:
        radial-gradient(circle at 100% 0%, rgba(168, 85, 247, 0.08), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(34, 197, 94, 0.07), transparent 60%),
        linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
}

.cl-admin-panel-soft-muted {
    background:
        radial-gradient(circle at 50% 120%, rgba(148, 163, 184, 0.16), transparent 65%),
        linear-gradient(135deg, #ffffff 0%, #f3f4f6 60%, #f9fafb 100%);
}

/* Social / community highlight card */
.cl-community-card {
    background:
        radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.30), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(236, 72, 153, 0.35), transparent 60%),
        linear-gradient(135deg, #020617 0%, #0f172a 45%, #020617 100%);
}

/* Social section layout: single column on mobile, wider FB column on md+ */
.cl-social-layout {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .cl-social-layout {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }
}

/* Admin calendar styling */
/* Empty months get dashed border; background comes from month variant below */
.cl-cal-month-card-empty {
    border-style: dashed;
}

/* Per‑month variants so no tile looks the same */
.cl-cal-month-1 {
    border-color: #fb7185;
    background:
        radial-gradient(circle at 0% 0%, rgba(248, 113, 113, 0.10), transparent 60%),
        linear-gradient(135deg, #fefce8 0%, #fdf2ff 40%, #f1f5f9 100%);
}

.cl-cal-month-2 {
    border-color: #38bdf8;
    background:
        radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.12), transparent 60%),
        linear-gradient(135deg, #eff6ff 0%, #f5f3ff 50%, #f9fafb 100%);
}

.cl-cal-month-3 {
    border-color: #f97316;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(249, 115, 22, 0.08) 0,
        rgba(249, 115, 22, 0.08) 14px,
        #fffbeb 14px,
        #fffbeb 30px
    );
}

.cl-cal-month-4 {
    border-color: #6366f1;
    background-image: repeating-linear-gradient(
        -135deg,
        rgba(129, 140, 248, 0.10) 0,
        rgba(129, 140, 248, 0.10) 10px,
        #eef2ff 10px,
        #eef2ff 24px
    );
}

.cl-cal-month-5 {
    border-color: #22c55e;
    background:
        radial-gradient(circle at 0% 100%, rgba(34, 197, 94, 0.12), transparent 60%),
        linear-gradient(135deg, #ecfdf3 0%, #fefce8 60%, #f9fafb 100%);
}

.cl-cal-month-6 {
    border-color: #14b8a6;
    background-image: radial-gradient(circle at 8px 8px, rgba(45, 212, 191, 0.16) 1.5px, transparent 0);
    background-size: 20px 20px;
    background-color: #f0fdfa;
}

.cl-cal-month-7 {
    border-color: #f97316;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(251, 146, 60, 0.10) 0,
        rgba(251, 146, 60, 0.10) 8px,
        #fff7ed 8px,
        #fff7ed 22px
    );
}

.cl-cal-month-8 {
    border-color: #0ea5e9;
    background:
        radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.16), transparent 55%),
        linear-gradient(135deg, #e0f2fe 0%, #eef2ff 60%, #f9fafb 100%);
}

.cl-cal-month-9 {
    border-color: #fb7185;
    background-image: radial-gradient(circle at 12px 12px, rgba(248, 113, 113, 0.18) 2px, transparent 0);
    background-size: 22px 22px;
    background-color: #fff7f9;
}

.cl-cal-month-10 {
    border-color: #a855f7;
    background:
        radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.16), transparent 55%),
        linear-gradient(135deg, #fdf2ff 0%, #eff6ff 70%, #f9fafb 100%);
}

.cl-cal-month-11 {
    border-color: #22c55e;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(34, 197, 94, 0.12) 0,
        rgba(34, 197, 94, 0.12) 8px,
        #ecfdf3 8px,
        #ecfdf3 22px
    );
}

.cl-cal-month-12 {
    border-color: #f97316;
    background:
        radial-gradient(circle at 100% 100%, rgba(249, 115, 22, 0.16), transparent 60%),
        linear-gradient(135deg, #fff1f2 0%, #fffbeb 50%, #e0f2fe 100%);
}
.cl-cal-label-workshops {
    color: #b45309; /* amber-700 */
    font-weight: 600;
}

.cl-cal-label-webinars {
    color: #0369a1; /* sky-700 */
    font-weight: 600;
}

.cl-cal-month-count-pill {
    background-color: #ffffff;
    border-radius: 9999px;
    border: 1px solid #e5e7eb; /* slate-200 */
    color: #334155; /* slate-700 */
    padding: 0.125rem 0.6rem; /* ~px-2.5 py-0.5 */
    font-weight: 600;
    font-size: 0.625rem; /* 10px */
}

.cl-cal-month-title {
    font-size: 1.125rem; /* 18px, larger for quick scanning */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}