/* ============================================================
   McKenzie's Rays of Sunshine — Custom Stylesheet
   Colors: Rose Pink (#D4678A), Sky Blue (#4A90D9), White, Gold
   Fonts: Cormorant Garamond (headings), Lato (body), Great Vibes (script)
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    --rays-pink:          #D4678A;
    --rays-pink-dark:     #B85578;
    --rays-pink-light:    #EDB5C8;
    --rays-pink-pale:     #FFF0F5;
    --rays-blue:          #4A90D9;
    --rays-blue-dark:     #3070B5;
    --rays-blue-light:    #8BBDE8;
    --rays-gold:          #F5C842;
    --rays-gold-light:    #FDE98A;
    --rays-white:         #FFFFFF;
    --rays-text-dark:     #2C2C2C;
    --rays-text-mid:      #5A5A5A;
    --rays-text-light:    #8A8A8A;

    --rays-hero-gradient:    linear-gradient(135deg, #D4678A 0%, #7B9FD4 60%, #4A90D9 100%);
    --rays-section-gradient: linear-gradient(180deg, #FFF5F8 0%, #FFFFFF 100%);
    --rays-card-gradient:    linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,245,248,0.98) 100%);
    --rays-gold-gradient:    linear-gradient(90deg, #F5C842 0%, #FDE98A 50%, #F5C842 100%);

    --rays-card-shadow:  0 8px 32px rgba(212,103,138,0.12), 0 2px 8px rgba(74,144,217,0.08);
    --rays-lift-shadow:  0 16px 48px rgba(212,103,138,0.20), 0 4px 16px rgba(74,144,217,0.12);

    --font-serif:  'Cormorant Garamond', Georgia, serif;
    --font-sans:   'Lato', 'Helvetica Neue', sans-serif;
    --font-script: 'Great Vibes', cursive;

    --section-padding-y: clamp(4rem, 8vw, 7rem);
    --section-padding-x: clamp(1.5rem, 5vw, 4rem);
}


/* ── Global Resets ─────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}

body {
    font-family: var(--font-sans);
    color: var(--rays-text-dark);
    background: var(--rays-white);
    margin: 0;
    overflow-x: hidden;
}

/* MudBlazor main content: remove top offset so hero starts at top */
.rays-main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.rays-main-content > .mud-main-content {
    padding: 0 !important;
}


/* ── Navbar ────────────────────────────────────────────────── */
.rays-appbar {
    border-bottom: 1px solid rgba(212,103,138,0.15) !important;
    box-shadow: 0 2px 12px rgba(212,103,138,0.10) !important;
}

.rays-navbar-toolbar {
    padding: 0 clamp(1rem, 3vw, 2rem) !important;
    height: 72px !important;
    width: 100%;
}

.rays-nav-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(212,103,138,0.25));
}

.rays-nav-org-stack {
    line-height: 1.1;
}

.rays-script-accent {
    font-family: var(--font-script) !important;
    font-size: 1.6rem;
    color: var(--rays-pink);
    line-height: 1;
    display: block;
}

.rays-nav-subtitle {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rays-text-mid);
    display: block;
}

.rays-nav-link {
    font-family: var(--font-sans) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    color: var(--rays-text-dark) !important;
    transition: color 0.2s ease;
    text-transform: none !important;
}

.rays-nav-link:hover {
    color: var(--rays-pink) !important;
}

.rays-donate-btn {
    border-radius: 24px !important;
    padding: 0 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: none !important;
}


/* ── Hero Section ──────────────────────────────────────────── */
.rays-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 72px;
    background: var(--rays-hero-gradient);
    text-align: center;
}

/* Animated sunray burst */
.rays-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,   rgba(255,255,255,0.055) 10deg,
        transparent 20deg,  rgba(255,255,255,0.055) 30deg,
        transparent 40deg,  rgba(255,255,255,0.055) 50deg,
        transparent 60deg,  rgba(255,255,255,0.055) 70deg,
        transparent 80deg,  rgba(255,255,255,0.055) 90deg,
        transparent 100deg, rgba(255,255,255,0.055) 110deg,
        transparent 120deg, rgba(255,255,255,0.055) 130deg,
        transparent 140deg, rgba(255,255,255,0.055) 150deg,
        transparent 160deg, rgba(255,255,255,0.055) 170deg,
        transparent 180deg, rgba(255,255,255,0.055) 190deg,
        transparent 200deg, rgba(255,255,255,0.055) 210deg,
        transparent 220deg, rgba(255,255,255,0.055) 230deg,
        transparent 240deg, rgba(255,255,255,0.055) 250deg,
        transparent 260deg, rgba(255,255,255,0.055) 270deg,
        transparent 280deg, rgba(255,255,255,0.055) 290deg,
        transparent 300deg, rgba(255,255,255,0.055) 310deg,
        transparent 320deg, rgba(255,255,255,0.055) 330deg,
        transparent 340deg, rgba(255,255,255,0.055) 350deg,
        transparent 360deg
    );
    animation: rays-rotate 40s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* Gold shimmer radial overlay */
.rays-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 38%,
        rgba(245,200,66,0.13) 0%,
        transparent 62%
    );
    pointer-events: none;
    z-index: 0;
}

@keyframes rays-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.rays-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem var(--section-padding-x);
    max-width: 900px;
    width: 100%;
}

.rays-hero-logo {
    width: clamp(140px, 22vw, 220px);
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.22));
    animation: rays-float 6s ease-in-out infinite;
}

@keyframes rays-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}

.rays-hero-org-name {
    font-family: var(--font-script) !important;
    font-size: clamp(2.8rem, 8vw, 6rem);
    color: rgba(255,255,255,0.97);
    text-shadow: 0 2px 16px rgba(0,0,0,0.20);
    line-height: 1.1;
    margin: 0;
}

.rays-hero-location {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: rgba(255,255,255,0.88);
    font-weight: 300;
    letter-spacing: 0.06em;
    margin: 0;
}

.rays-hero-tagline {
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 2.2vw, 1.25rem);
    color: rgba(255,255,255,0.88);
    font-style: italic;
    font-weight: 400;
    max-width: 600px;
    line-height: 1.65;
    margin: 0;
}

/* 501(c)(3) frosted-glass ribbon */
.rays-501c3-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.38);
    border-radius: 32px;
    padding: 0.45rem 1.3rem;
    color: rgba(255,255,255,0.96);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-top: 0.25rem;
}

/* Scroll chevron */
.rays-scroll-arrow {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    animation: rays-bounce 2.4s ease-in-out infinite;
    cursor: pointer;
    transition: color 0.2s ease;
}

.rays-scroll-arrow:hover {
    color: rgba(255,255,255,0.95);
}

@keyframes rays-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(8px); }
}


/* ── Shared Section Styles ─────────────────────────────────── */
.rays-section {
    padding: var(--section-padding-y) var(--section-padding-x);
    position: relative;
}

.rays-section-title {
    font-family: var(--font-serif) !important;
    color: var(--rays-pink) !important;
    position: relative;
    display: inline-block;
}

/* Gold rule under section titles */
.rays-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--rays-gold-gradient);
    margin: 0.7rem auto 0;
    border-radius: 2px;
}

.rays-section-subtitle {
    color: var(--rays-text-mid);
    margin-top: 0.6rem;
    margin-bottom: 2.5rem;
}


/* ── Mission Section ───────────────────────────────────────── */
.rays-section-mission {
    background: var(--rays-section-gradient);
    text-align: center;
}

.rays-butterfly-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.rays-butterfly {
    display: inline-block;
    font-size: 2rem;
    opacity: 0.38;
    animation: rays-flutter 4s ease-in-out infinite;
}

.rays-butterfly--left  { animation-delay: 0s; transform: scaleX(-1); }
.rays-butterfly--right { animation-delay: 1.5s; }

@keyframes rays-flutter {
    0%, 100% { transform: rotate(-8deg) scale(1.0); }
    50%       { transform: rotate(8deg) scale(1.08); }
}
.rays-butterfly--left.rays-flutter-left {
    animation-name: rays-flutter-left;
}
@keyframes rays-flutter-left {
    0%, 100% { transform: scaleX(-1) rotate(-8deg) scale(1.0); }
    50%       { transform: scaleX(-1) rotate(8deg) scale(1.08); }
}

.rays-mission-text {
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 2.3vw, 1.55rem);
    font-style: italic;
    color: var(--rays-text-dark);
    line-height: 1.85;
    max-width: 760px;
    margin: 0 auto;
}


/* ── Programs Section ──────────────────────────────────────── */
.rays-section-programs {
    background: linear-gradient(160deg, #ffffff 0%, #f4eeff 45%, #eef4ff 100%);
    text-align: center;
}

.rays-program-card {
    background: var(--rays-card-gradient) !important;
    border: 1px solid rgba(212,103,138,0.15) !important;
    border-radius: 20px !important;
    box-shadow: var(--rays-card-shadow) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    height: 100%;
    text-align: left;
}

.rays-program-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--rays-lift-shadow) !important;
}

.rays-program-icon {
    font-size: 2.8rem;
    margin-bottom: 0.85rem;
    display: block;
}

.rays-program-title {
    font-family: var(--font-serif) !important;
    color: var(--rays-pink) !important;
    font-size: 1.45rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.6rem;
}

.rays-program-body {
    color: var(--rays-text-mid);
    line-height: 1.75;
}


/* ── Our Story Section ─────────────────────────────────────── */
.rays-section-story {
    background: var(--rays-pink-pale);
    text-align: center;
    overflow: hidden;
}

/* Soft floral radial decoration */
.rays-section-story::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 480px;
    height: 480px;
    background: radial-gradient(
        circle,
        rgba(237,181,200,0.28) 0%,
        transparent 68%
    );
    pointer-events: none;
}

.rays-section-story::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 360px;
    height: 360px;
    background: radial-gradient(
        circle,
        rgba(139,189,232,0.20) 0%,
        transparent 68%
    );
    pointer-events: none;
}

.rays-story-quote {
    font-family: var(--font-script);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--rays-pink);
    line-height: 1.4;
    margin: 1.5rem 0 2rem;
    position: relative;
    z-index: 1;
}

.rays-story-text {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--rays-text-mid);
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.rays-story-text + .rays-story-text {
    margin-top: 1.25rem;
}

.rays-memorial-dates {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.rays-memorial-date-item {
    text-align: center;
    padding: 1rem 1.75rem;
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 14px;
    border-top: 3px solid var(--rays-gold);
    box-shadow: 0 4px 16px rgba(212,103,138,0.10);
}

.rays-memorial-date-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rays-text-light);
    margin-bottom: 0.25rem;
}

.rays-memorial-date-value {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--rays-text-dark);
}


/* ── Trust / 501(c)(3) Section ─────────────────────────────── */
.rays-section-trust {
    background: linear-gradient(135deg, var(--rays-blue) 0%, var(--rays-blue-dark) 100%);
    color: white;
    text-align: center;
}

.rays-trust-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid rgba(255,255,255,0.38);
    border-radius: 20px;
    padding: 2rem 3rem;
    margin-bottom: 2.25rem;
}

.rays-trust-badge-icon {
    font-size: 3rem;
    line-height: 1;
}

.rays-trust-badge-title {
    font-family: var(--font-serif) !important;
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    color: white !important;
}

.rays-trust-badge-sub {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
}

.rays-trust-heading {
    font-family: var(--font-serif) !important;
    color: white !important;
    margin-bottom: 1.25rem !important;
}

.rays-trust-copy {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    color: rgba(255,255,255,0.88);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
}


/* ── Footer ────────────────────────────────────────────────── */
.rays-footer {
    background: #1c1c1c;
    color: rgba(255,255,255,0.72);
    padding: 3rem var(--section-padding-x);
    text-align: center;
}

.rays-footer-org {
    font-family: var(--font-script);
    font-size: 2.2rem;
    color: var(--rays-pink-light);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.rays-footer-divider {
    border-color: rgba(255,255,255,0.12) !important;
    margin: 1.25rem auto !important;
    max-width: 400px;
}

.rays-footer-address {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.9;
    font-style: normal;
}

.rays-footer-legal {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: rgba(255,255,255,0.38);
    margin-top: 1.5rem;
    line-height: 1.7;
}


/* ── Blazor Error UI ───────────────────────────────────────── */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}