/* =============================================
   Paróquia São José – Custom Styles
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@500;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* Cliente atual: identidade visual inspirada na presença digital da paróquia. */
:root {
    --client-parish-900: #2A0808;
    --client-parish-800: #550F0F;
    --client-parish-700: #7A1A1A;
    --client-parish-600: #9E2222;
    --client-parish-500: #BF3535;
    --client-parish-400: #D47070;
    --client-parish-300: #E4A4A4;
    --client-parish-200: #F2CCCC;
    --client-parish-100: #FAE8E8;
    --client-parish-50: #FEF5F5;
    --client-gold-600: #8f6717;
    --client-gold-500: #b98927;
    --client-gold-400: #d7ad4a;
    --client-gold-300: #e5c779;
    --client-gold-200: #f3e1b7;
    --client-gold-100: #fbf2db;
    --client-gold-50: #fefaf0;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
    font-size: 105%;
}

body {
    background: radial-gradient(circle at top, #fffaf2 0%, #ffffff 42%);
}

.font-heading {
    font-family: 'Alegreya', Georgia, serif !important;
    letter-spacing: 0.01em;
}

.font-body {
    font-family: 'Source Sans 3', system-ui, sans-serif !important;
}

/* Utility overrides para aplicar nova paleta sem reestruturar HTML. */
.bg-parish-900 { background-color: var(--client-parish-900) !important; }
.bg-parish-800 { background-color: var(--client-parish-800) !important; }
.bg-parish-700 { background-color: var(--client-parish-700) !important; }
.bg-parish-600 { background-color: var(--client-parish-600) !important; }
.bg-parish-500 { background-color: var(--client-parish-500) !important; }
.bg-parish-100 { background-color: var(--client-parish-100) !important; }
.bg-parish-50 { background-color: var(--client-parish-50) !important; }

.text-parish-400 { color: var(--client-parish-400) !important; }
.text-parish-300 { color: var(--client-parish-300) !important; }
.text-parish-200 { color: var(--client-parish-200) !important; }
.text-parish-100 { color: var(--client-parish-100) !important; }
.text-parish-900 { color: var(--client-parish-900) !important; }
.text-parish-800 { color: var(--client-parish-800) !important; }
.text-parish-700 { color: var(--client-parish-700) !important; }
.text-parish-600 { color: var(--client-parish-600) !important; }
.text-parish-500 { color: var(--client-parish-500) !important; }

.border-parish-800 { border-color: var(--client-parish-800) !important; }
.border-parish-200 { border-color: var(--client-parish-200) !important; }
.border-parish-100 { border-color: var(--client-parish-100) !important; }

.bg-gold-600 { background-color: var(--client-gold-600) !important; }
.bg-gold-500 { background-color: var(--client-gold-500) !important; }
.bg-gold-400 { background-color: var(--client-gold-400) !important; }
.bg-gold-100 { background-color: var(--client-gold-100) !important; }
.bg-gold-50 { background-color: var(--client-gold-50) !important; }

.text-gold-300 { color: var(--client-gold-300) !important; }
.text-gold-200 { color: var(--client-gold-200) !important; }
.text-gold-700 { color: var(--client-gold-600) !important; }
.text-gold-600 { color: var(--client-gold-600) !important; }
.text-gold-500 { color: var(--client-gold-500) !important; }

.border-gold-200 { border-color: var(--client-gold-200) !important; }

.from-parish-800 { --tw-gradient-from: var(--client-parish-800) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(85 15 15 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-parish-700 { --tw-gradient-from: var(--client-parish-700) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(120 26 26 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-parish-600 { --tw-gradient-from: var(--client-parish-600) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(158 34 34 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-gold-500 { --tw-gradient-from: var(--client-gold-500) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(185 137 39 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }

.via-parish-700 { --tw-gradient-to: rgb(120 26 26 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--client-parish-700) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }

.to-parish-900 { --tw-gradient-to: var(--client-parish-900) var(--tw-gradient-to-position) !important; }
.to-parish-800 { --tw-gradient-to: var(--client-parish-800) var(--tw-gradient-to-position) !important; }
.to-gold-600 { --tw-gradient-to: var(--client-gold-600) var(--tw-gradient-to-position) !important; }

/* Scrollbar Hide Utility */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* =============================================
   Animations
   ============================================= */

/* Fade In Down */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-down {
    animation: fadeInDown 0.8s ease-out both;
}

/* Fade In Up */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out both;
}

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.animate-fade-in {
    animation: fadeIn 1s ease-out both;
}

/* Bounce Soft */
@keyframes bounceSoft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.animate-bounce-soft {
    animation: bounceSoft 2s ease-in-out infinite;
}

/* Float */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Pulse Glow */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
    50%      { box-shadow: 0 0 20px 10px rgba(251, 191, 36, 0.1); }
}
.animate-pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* Delay Utilities */
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-600 { animation-delay: 0.6s; }
.animation-delay-800 { animation-delay: 0.8s; }
.animation-delay-1000 { animation-delay: 1s; }

/* =============================================
   Navbar Transitions
   ============================================= */
#navbar {
    transition: background-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
#navbar.scrolled {
    background-color: rgba(42, 8, 8, 0.98) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
}
#navbar.transparent {
    background-color: transparent !important;
    box-shadow: none;
}

/* =============================================
   Line Clamp Utility
   ============================================= */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================
   Card Hover Effects
   ============================================= */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* =============================================
   WhatsApp Button Pulse
   ============================================= */
#whatsapp-btn[href*="wa.me"] {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* =============================================
   Selection Colors
   ============================================= */
::selection {
    background-color: var(--client-parish-700);
    color: white;
}

/* =============================================
   Mobile Menu Animation
   ============================================= */
#mobile-menu:not(.hidden) {
    animation: slideDownMenu 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDownMenu {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================
   Responsive Utilities
   ============================================= */

/* Ensure images never overflow their containers */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent horizontal overflow on all sections */
section, footer, header, nav {
    overflow-x: hidden;
}

/* Hero first fold: avoid clipping content behind fixed header on small screens */
@media (max-width: 640px) {
    html {
        font-size: 110%;
    }

    #hero {
        min-height: auto;
        padding-top: 7rem;
        padding-bottom: 2.75rem;
        align-items: flex-start;
    }

    #hero .hero-content-wrap {
        padding-bottom: 0;
    }

    #hero .hero-content-wrap a {
        max-width: 100%;
        white-space: normal;
    }

    #cms-hero-instagram-handle,
    #cms-instagram-highlight-handle {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .dizimo-pix-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .dizimo-pix-value {
        width: 100%;
        text-align: left;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media (max-width: 374px) {
    html {
        font-size: 112%;
    }

    #navbar a[href="index.html"] {
        min-width: 0;
        flex: 1;
        max-width: calc(100% - 3.25rem);
    }

    #navbar a[href="index.html"] > div {
        min-width: 0;
    }

    #navbar a[href="index.html"] > div > span:first-child {
        display: block;
        font-size: 0.92rem;
        line-height: 1.08;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #navbar a[href="index.html"] > div > span:last-child {
        display: none !important;
    }

    #instagram-destaque .group {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #instagram-destaque .group > div {
        min-width: 0;
    }

    #cms-instagram-highlight-handle {
        font-size: 1.1rem;
        line-height: 1.2;
    }

    #dizimo-pix-section .pix-card-shell,
    #dizimo-pix-section .pix-card-body {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    #dizimo-pix-section .pix-key-text {
        font-size: 0.98rem;
        line-height: 1.25;
    }
}

/* Short screens: compress hero rhythm so lower content is not clipped */
@media (max-height: 760px) {
    #hero {
        padding-top: 6.75rem;
        padding-bottom: 2.5rem;
    }

    #hero .hero-content-wrap h1 {
        margin-bottom: 0.5rem;
    }

    #hero .hero-content-wrap .bg-white\/10.backdrop-blur-md {
        margin-bottom: 0.75rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* =============================================
   Scrollbar Custom (for non-hidden scrollbars)
   ============================================= */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--client-parish-100);
}
::-webkit-scrollbar-thumb {
    background: var(--client-parish-500);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--client-parish-700);
}