/* ============================================================
   VRA Community Development Programme - Public Site Styles
   ============================================================
   Brand colors below are a reasonable default (navy + warm gold,
   common for utility/power-sector branding) since the original
   markup referenced bg-vra-primary / text-vra-blue / etc. without
   defining them anywhere. Adjust the hex values to match VRA's
   actual brand guidelines if they differ.
*/

:root {
    --vra-primary: #0a4d8c;       /* deep blue - primary brand color */
    --vra-primary-rgb: 10, 77, 140;
    --vra-blue: #0a4d8c;          /* alias used in the original markup (text-vra-blue) */
    --vra-secondary: #eef4fa;     /* very light blue tint, used for section headers */
    --vra-muted: #f4f7fa;         /* near-white section background */
    --vra-accent: #f2a93b;        /* warm gold accent, used sparingly */
}

/* ── Color utilities (the markup already used these class names) ──────── */
.bg-vra-primary { background-color: var(--vra-primary) !important; }
.bg-vra-secondary { background-color: var(--vra-secondary) !important; }
.bg-vra-muted { background-color: var(--vra-muted) !important; }
.text-vra-primary { color: var(--vra-primary) !important; }
.text-vra-blue { color: var(--vra-blue) !important; }

.btn-vra-primary {
    background-color: var(--vra-primary);
    border-color: var(--vra-primary);
    color: #fff;
}
.btn-vra-primary:hover,
.btn-vra-primary:focus {
    background-color: #083d6f;
    border-color: #083d6f;
    color: #fff;
}

/* Microsoft's typical dark sign-in button style - deliberately high-contrast
   against the rest of the (mostly light) login form so it doesn't blend in. */
.btn-microsoft {
    background-color: #2f2f2f;
    border: 1px solid #2f2f2f;
    color: #ffffff;
}
.btn-microsoft:hover,
.btn-microsoft:focus {
    background-color: #1b1b1b;
    border-color: #1b1b1b;
    color: #ffffff;
}

/* ── Hero section ───────────────────────────────────────────────────── */
.hero-gradient {
    background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 100%);
}

/* A modest bump over the section's natural content height - increase/decrease
   this one value to make the hero taller or shorter. */
.hero-section {
    min-height: 60vh;
}
@media (max-width: 767.98px) {
    /* Don't force a tall, mostly-empty hero on small screens */
    .hero-section {
        min-height: auto;
    }
}

/* Hero content/buttons/stats fade in via JS toggling these starting states */
.hero-content,
.hero-buttons {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-stat {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.stat-card {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(var(--vra-primary-rgb), 0.1);
    backdrop-filter: blur(8px);
}

/* ── Generic hover lift, used on stat/criteria/document cards ─────────── */
.card-hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08);
}

.criteria-card,
.doc-card {
    transition: background-color 0.2s ease;
}
.criteria-card:hover,
.doc-card:hover {
    background-color: var(--vra-muted);
}

.community-item {
    display: inline-block;
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}
.community-item:hover {
    color: var(--vra-primary) !important;
    font-weight: 600;
}

/* ── Scroll-triggered reveal (IntersectionObserver toggles .loaded) ───── */
.lazy-section {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.lazy-section.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* ── Video embed - fixed 16:9 aspect ratio without a fixed pixel height ─ */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}
.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Modal story scroll area ───────────────────────────────────────────── */
.custom-scrollbar {
    scrollbar-width: thin;
}
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* ── Deadline callout number ───────────────────────────────────────────── */
.deadline-date {
    font-size: 1.75rem;
}

/* ── Public header/footer ──────────────────────────────────────────────── */
.public-header {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.public-header .nav-link {
    font-weight: 500;
    color: #344054;
}
.public-header .nav-link:hover {
    color: var(--vra-primary);
}

.public-footer {
    background-color: #0c2340;
    color: rgba(255, 255, 255, 0.75);
}
.public-footer a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}
.public-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ── Respect reduced-motion preferences ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hero-content,
    .hero-buttons,
    .hero-stat,
    .lazy-section,
    .card-hover {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}