/* NumerologyOnline — app.css */

/* ── Global font ─────────────────────────────────────────────────────────────
   Inter is loaded via Google Fonts in _Layout.cshtml.
   This declaration ensures the font applies at the CSS level independently
   of Tailwind CDN availability, and overrides any browser/vendor defaults. */
:root {
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after {
    font-family: var(--font-primary);
}

/* Hide Alpine.js cloak elements until Alpine initializes */
[x-cloak] { display: none !important; }

/* Fallback custom color utilities used across Razor pages.
    These keep critical CTA buttons visible even when Tailwind CDN
    custom color generation is unavailable. */
.bg-gold { background-color: #D97706 !important; }
.hover\:bg-gold-dark:hover { background-color: #B45309 !important; }

.bg-primary { background-color: #7A5A9A !important; }
.hover\:bg-primary-dark:hover { background-color: #5B3C8F !important; }

.text-primary { color: #7A5A9A !important; }
.text-primary-dark { color: #5B3C8F !important; }

/* Fallback gradient utilities for page hero headers */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-primary-dark {
    --tw-gradient-from: #5B3C8F;
    --tw-gradient-to: rgba(91, 60, 143, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-primary {
    --tw-gradient-to: #7A5A9A;
}

/* Report body transition */
.report-body {
    transition: max-height 0.2s ease-out;
}

/* Smooth accordion arrow rotation */
.arrow-icon {
    transition: transform 0.2s ease;
}

/* Delay expensive offscreen layout/paint until the section approaches viewport. */
.nl-defer-render {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
}

/* Print styles */
@media print {
    header, footer, .no-print { display: none !important; }
    .report-body { display: block !important; }
    body { background: white; }
}