/* Additions on top of the original compiled stylesheet (kifa.css). */

/* The `hidden` attribute must beat utility classes like `.flex` */
[hidden] { display: none !important; }

/* Scroll-reveal: replaces framer-motion "whileInView" fade/slide-ins */
html.js [data-reveal] {
    opacity: 0;
    transform: var(--reveal-from, translateY(20px));
    transition: opacity .5s ease-out, transform .5s ease-out;
    transition-delay: var(--reveal-delay, 0s);
}
html.js [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Lightbox open animation */
[data-lightbox-overlay]:not([hidden]) { animation: kifa-fade .2s ease-out; }
[data-lightbox-overlay]:not([hidden]) [data-lightbox-img] { animation: kifa-zoom .25s ease-out; }
@keyframes kifa-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes kifa-zoom { from { transform: scale(.95) } to { transform: scale(1) } }

/* Toasts (stand-in for the "sonner" toaster used on the original site) */
.kifa-toaster {
    position: fixed; z-index: 9999; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px));
}
.kifa-toast {
    padding: 14px 16px; border-radius: 8px; font-size: 14px; line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0,0,0,.1); border: 1px solid; background: #fff;
    animation: kifa-toast-in .35s ease-out; transition: opacity .3s, transform .3s;
}
.kifa-toast--success { background: hsl(143, 85%, 96%); border-color: hsl(145, 92%, 87%); color: hsl(140, 100%, 27%); }
.kifa-toast--error { background: hsl(359, 100%, 97%); border-color: hsl(359, 100%, 94%); color: hsl(360, 100%, 45%); }
.kifa-toast.is-leaving { opacity: 0; transform: translateY(10px); }
@keyframes kifa-toast-in { from { opacity: 0; transform: translateY(100%) } to { opacity: 1; transform: none } }

body.kifa-no-scroll { overflow: hidden; }

/* Footer social links (configured in the dashboard) */
.kifa-social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.kifa-social a {
    display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
    border-radius: .5rem; border: 1px solid #334155; color: #94a3b8; transition: color .2s, border-color .2s;
}
.kifa-social a:hover { color: #e81a7a; border-color: #e81a7a; }

/*
 * Rich text from the dashboard editor (news articles and custom pages).
 * Only unclassed elements are styled, so imported articles that carry their
 * own utility classes keep their exact original look.
 */
:where(.news-article-body) p:not([class]) { color: #334155; font-size: 1.125rem; line-height: 2rem; margin-bottom: 1.5rem; }
:where(.news-article-body) h2:not([class]) { color: #0f172a; margin-top: 2.5rem; margin-bottom: 1rem; }
:where(.news-article-body) h3:not([class]) { color: #0f172a; margin-top: 2rem; margin-bottom: .5rem; }
:where(.news-article-body) h4:not([class]) { color: #0f172a; font-weight: 700; font-size: 1.125rem; margin-top: 1.5rem; margin-bottom: .5rem; }
:where(.news-article-body) :is(ul, ol):not([class]) { color: #334155; font-size: 1.125rem; line-height: 2rem; margin-bottom: 1.5rem; padding-left: 1.5rem; }
:where(.news-article-body) ul:not([class]) { list-style: disc; }
:where(.news-article-body) ol:not([class]) { list-style: decimal; }
:where(.news-article-body) li:not([class]) + li { margin-top: .5rem; }
:where(.news-article-body) a:not([class]) { color: hsl(var(--primary)); text-decoration: underline; font-weight: 600; }
:where(.news-article-body) blockquote:not([class]) {
    border-left: 4px solid hsl(var(--kifa-orange)); background: #f8fafc; border-radius: .75rem;
    padding: 1.5rem; margin: 2.5rem 0; color: #334155; font-size: 1.125rem; line-height: 2rem;
}
:where(.news-article-body) blockquote:not([class]) p:last-child { margin-bottom: 0; }
:where(.news-article-body) img:not([class]) { width: 100%; border-radius: 1rem; margin: 2rem 0; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); }
:where(.news-article-body) hr:not([class]) { border-color: #e2e8f0; margin: 2.5rem 0; }
:where(.news-article-body) strong:not([class]) { color: #0f172a; }
:where(.news-article-body) table:not([class]) { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; font-size: 1rem; }
:where(.news-article-body) :is(th, td):not([class]) { border: 1px solid #e2e8f0; padding: .5rem .75rem; text-align: left; }

/* News pagination */
.kifa-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; font-size: .875rem; color: #64748b; }
.kifa-pagination a { font-weight: 600; color: hsl(var(--primary)); }
.kifa-pagination a:hover { text-decoration: underline; }