/* Floresta Burundi — custom styles on top of Tailwind + daisyUI */

html { scroll-behavior: smooth; }

body { font-feature-settings: "rlig" 1, "calt" 1; }

/* Headings use Bebas Neue display font */
h1.display, h2.display, h3.display, .font-display {
    font-family: 'Bebas Neue', 'Inter', sans-serif;
    letter-spacing: 0.04em;
}

/* Hero gradient overlay */
.hero-overlay {
    background: linear-gradient(135deg, rgba(11, 72, 35, 0.85) 0%, rgba(17, 122, 58, 0.65) 50%, rgba(245, 130, 39, 0.45) 100%);
}

/* Card hover */
.card-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.10);
}

/* Section spacing helpers */
.section { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .section { padding-top: 5.5rem; padding-bottom: 5.5rem; } }

/* Page hero */
.page-hero {
    background: linear-gradient(135deg, #0E5E2C 0%, #117A3A 50%, #149E55 100%);
    color: #fff;
    padding: 4rem 1rem 3rem;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/Images/leaf-pattern.svg') center/300px repeat;
    opacity: 0.08;
    pointer-events: none;
}

/* Prose styling for content blocks */
.prose-floresta h1, .prose-floresta h2, .prose-floresta h3 {
    color: #0E5E2C;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.03em;
}
.prose-floresta h2 { font-size: 1.75rem; margin-top: 2rem; margin-bottom: 1rem; }
.prose-floresta h3 { font-size: 1.35rem; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.prose-floresta p { font-size: 1.05rem; line-height: 1.75; margin-bottom: 1rem; color: #374151; }
.prose-floresta ul, .prose-floresta ol { margin: 1rem 0; padding-left: 1.5rem; }
.prose-floresta ul li { list-style: disc; margin-bottom: 0.5rem; }
.prose-floresta ol li { list-style: decimal; margin-bottom: 0.5rem; }
.prose-floresta a { color: #117A3A; text-decoration: underline; }
.prose-floresta a:hover { color: #F58227; }
.prose-floresta strong { color: #0E5E2C; }
.prose-floresta blockquote {
    border-left: 4px solid #F58227;
    padding-left: 1rem;
    font-style: italic;
    color: #4B5563;
    margin: 1.5rem 0;
}
.prose-floresta img { border-radius: 12px; margin: 1.5rem 0; }

/* Animated underline link */
.link-underline {
    position: relative;
    display: inline-block;
}
.link-underline::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 2px;
    background: #F58227;
    transition: width 0.3s ease;
}
.link-underline:hover::after { width: 100%; }

/* Decorative section divider */
.divider-leaf {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #117A3A;
    margin: 2rem 0;
    font-size: 1.5rem;
}
.divider-leaf::before, .divider-leaf::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #D1FAE5, transparent);
    margin: 0 1rem;
}

/* Swiper customization */
.swiper-pagination-bullet {
    background: #fff !important;
    opacity: 0.5 !important;
}
.swiper-pagination-bullet-active {
    background: #F58227 !important;
    opacity: 1 !important;
    width: 24px !important;
    border-radius: 4px !important;
}
.swiper-button-prev, .swiper-button-next {
    color: #fff !important;
    background: rgba(0,0,0,0.3);
    width: 48px !important;
    height: 48px !important;
    border-radius: 50%;
    backdrop-filter: blur(4px);
}
.swiper-button-prev::after, .swiper-button-next::after {
    font-size: 18px !important;
}

/* Hover transitions */
.transition-all-300 { transition: all 0.3s ease; }

/* Print friendly */
@media print {
    header, footer, .no-print { display: none !important; }
}

/* Accessibility: focus rings (skip .btn — daisyUI handles button focus) */
a:focus-visible:not(.btn),
button:focus-visible:not(.btn),
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #F58227;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Buttons — consistent rounded corners & readable labels */
.btn {
    border-radius: 0.5rem;
    text-transform: none;
    letter-spacing: normal;
}
.btn.btn-sm { border-radius: 0.375rem; }
.btn.btn-xs { border-radius: 0.375rem; }
.btn-circle { border-radius: 9999px; }

/* Outline “back” / action buttons use brand green */
.btn-outline.btn-primary,
a.btn-outline.btn-primary {
    --btn-color: var(--color-primary);
    --btn-fg: var(--color-primary);
}

/* Neutral outline (pagination, filters) */
.btn-outline:not(.btn-primary):not(.btn-secondary):not(.btn-accent):not(.btn-error):not(.btn-warning):not(.btn-success) {
    --btn-color: #117a3a;
    --btn-fg: #117a3a;
}

/* Form fields (daisyUI 5 — replaces legacy *-bordered classes) */
.input,
.select,
.textarea,
.file-input {
    border-radius: 0.5rem;
}

/* Social icon circles (footer, contact, etc.) */
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9999px;
    text-decoration: none;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.social-link i,
.social-link .fa,
.social-link .fa-brands {
    font-size: 0.875rem;
    line-height: 1;
    width: 1em;
    text-align: center;
}
.social-link--md {
    width: 2.5rem;
    height: 2.5rem;
}
.social-link--sm {
    width: 2.25rem;
    height: 2.25rem;
}

/* Brand logos (app.css is unlayered — must not override Tailwind h-* on <img>) */
.site-logo {
    width: auto;
    max-width: none;
    flex-shrink: 0;
    object-fit: contain;
    height: 2.5rem;
}
.site-logo--footer { height: 3rem; }
.site-logo--admin-login { height: 3.5rem; }
@media (min-width: 768px) {
    .site-logo--header { height: 3rem; }
}

/* Responsive images inside rich content only */
.prose-floresta img {
    max-width: 100%;
    height: auto;
}

/* Loading shimmer */
.shimmer {
    background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s, transform 0.8s; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }