/*
 * ScholarshipClaude WordPress theme: small runtime helpers.
 * Everything visual comes from app.css (the original compiled stylesheet); this file only adds
 * what React/framer-motion did at runtime.
 */

/* Light/dark icon swap in the theme toggle (React rendered one icon or the other). */
html:not(.dark) .sc-when-dark,
html.dark .sc-when-light { display: none !important; }

/* framer-motion entrance animations (initial -> animate), reproduced with keyframes. */
@keyframes sc-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes sc-fade-left { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@keyframes sc-fade-right { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes sc-scale-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
.sc-m-up, .sc-m-left, .sc-m-right, .sc-m-scale {
	animation-duration: var(--sc-dur, .6s);
	animation-delay: var(--sc-delay, 0s);
	animation-timing-function: cubic-bezier(.22, 1, .36, 1);
	animation-fill-mode: both;
}
.sc-m-up { animation-name: sc-fade-up; }
.sc-m-left { animation-name: sc-fade-left; }
.sc-m-right { animation-name: sc-fade-right; }
.sc-m-scale { animation-name: sc-scale-in; --sc-dur: .5s; }

/* Radix scroll lock while a dialog, sheet or select is open. */
body.sc-scroll-locked { overflow: hidden !important; overscroll-behavior: contain; }

/* Layers are portaled to <body> in the original; keep them above the sticky header. */
[data-sc-layer] { position: relative; z-index: 50; }
[data-radix-popper-content-wrapper] { z-index: 50; }

/* Hidden honeypot field on the contact form. */
[data-sc-contact] input[name="website"] { position: absolute !important; left: -9999px !important; }
/* Article typography (the original app shipped no styles for article bodies). Uses the site's own colour tokens. */
.blog-content { color: hsl(var(--foreground)); font-size: 1.0625rem; line-height: 1.8; overflow-wrap: break-word; }
.blog-content > * + * { margin-top: 1.15em; }
.blog-content > :first-child { margin-top: 0; }
.blog-content p, .blog-content li { color: hsl(var(--muted-foreground)); }
.blog-content h2 { font-size: 1.65rem; line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; color: hsl(var(--foreground)); margin-top: 2.1em; scroll-margin-top: 100px; }
.blog-content h3 { font-size: 1.25rem; line-height: 1.4; font-weight: 700; color: hsl(var(--foreground)); margin-top: 1.7em; scroll-margin-top: 100px; }
.blog-content h2 + *, .blog-content h3 + * { margin-top: .7em; }
.blog-content strong { font-weight: 700; color: hsl(var(--foreground)); }
.blog-content a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 3px; }
.blog-content ul { list-style: disc; padding-left: 1.35em; }
.blog-content ol { list-style: decimal; padding-left: 1.45em; }
.blog-content li + li { margin-top: .45em; }
.blog-content li::marker { color: hsl(var(--primary)); font-weight: 700; }
.blog-content blockquote { border-left: 4px solid hsl(var(--primary)); background: hsl(var(--muted) / .6); padding: 1rem 1.25rem; border-radius: .75rem; }
.blog-content blockquote p { color: hsl(var(--foreground)); }
.blog-content pre { white-space: pre-wrap; background: hsl(var(--muted) / .6); border: 1px solid hsl(var(--border)); border-radius: .75rem; padding: 1.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem; line-height: 1.75; color: hsl(var(--foreground)); }
.blog-content .sc-table { overflow-x: auto; }
.blog-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.blog-content th, .blog-content td { border: 1px solid hsl(var(--border)); padding: .6rem .8rem; text-align: left; vertical-align: top; color: hsl(var(--foreground)); }
.blog-content th { background: hsl(var(--muted)); font-weight: 700; }
.blog-content .sc-note { background: hsl(var(--primary) / .08); border: 1px solid hsl(var(--primary) / .25); border-radius: .75rem; padding: 1rem 1.25rem; }
.blog-content .sc-note p { color: hsl(var(--foreground)); }