/*
 * Parallax — site-wide UI/UX fixes (2026-10-11)
 * Small overrides layered on top of the Tailwind utilities and header styles.
 * The visual design stays the same; these rules fix contrast, focus, motion and touch targets.
 */

/* ---------- Skip link ---------- */
.parallax-skip-link {
    position: fixed;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 12px;
    background: #FFFFFF;
    color: #0A0A0F;
    font-weight: 700;
    font-size: 14px;
    transform: translateY(-160%);
    transition: transform 0.2s ease;
}
.parallax-skip-link:focus {
    transform: translateY(0);
}
#main-content:focus {
    outline: none;
}

/* ---------- Visible keyboard focus ---------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid #38BDF8;
    outline-offset: 2px;
}
html.light-mode a:focus-visible,
html.light-mode button:focus-visible {
    outline-color: #0062CC;
}

/* ---------- Reveal: shorter and gentler, so sections never sit blank after scrolling ---------- */
.reveal {
    transform: translateY(16px);
    transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.active {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ---------- Contrast: white text on brand blue ----------
   #007BFF with white text is 3.98:1; #0070E8 is 4.68:1 and looks the same at a glance.
   Hover states keep their own (darker) Tailwind colors. */
.bg-\[\#007BFF\].text-white {
    background-color: #0070E8;
}
.interactive-hover-btn:hover {
    background-color: #0070E8 !important;
}
.interactive-hover-btn .magic-dot {
    background-color: #0070E8 !important;
}

.parallax-breadcrumb-nav .breadcrumb-separator {
    color: rgba(255, 255, 255, 0.35);
}

/* ---------- Readable small controls ---------- */
.parallax-lang-btn {
    font-size: 12px;
}
.parallax-theme-btn {
    padding: 6px 10px;
    min-height: 28px;
}

/* Carousel dots: 10px visuals, 44px hit area on every screen size */
.carousel-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 44px;
}

/* ---------- End-of-article next step (light mode) ---------- */
html.light-mode #parallax-next-action {
    background: #FFFFFF !important;
    border-color: rgba(0, 98, 204, 0.25) !important;
}
html.light-mode #parallax-next-action h2 {
    color: #0A0A0F !important;
}
html.light-mode #parallax-next-action p {
    color: #475569 !important;
}
html.light-mode #parallax-next-action a:not(.bg-\[\#007BFF\]) {
    color: #0A0A0F !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Light mode: muted metadata keeps a readable contrast on white */
html.light-mode .text-\[\#9A9AAE\] {
    color: #475569 !important;
}

/* Light mode: secondary copy that was still using the dark-theme grey */
html.light-mode main section p.text-\[\#C3C7D3\] {
    color: #475569 !important;
}

/* ---------- Gradient text keeps only its flowing gradient ----------
   No pulsing halo and no glow behind it (hero "Play", section titles, program step numbers);
   also hides the halo span if an older saved text still contains it. */
.hero-word-glow {
    display: none !important;
}
.hero-word-gradient,
.aurora-gradient-text,
#program .phase-number,
#program .m-num {
    filter: none !important;
}

/* Persian page shows the English headline: children must inherit the headline's tight tracking
   instead of the RTL "letter-spacing: normal" rule, so it renders exactly like the English page */
#hero-headline * {
    letter-spacing: inherit !important;
}