/* css/style.css */
/* Custom Styles for RJM Website */
body {
    font-family: 'Inter', sans-serif;
    @apply antialiased; /* For smoother font rendering */
}

.hero-section {
    position: relative;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.45); /* Slightly darker overlay */
    z-index: 1;
}
.hero-section > .container {
    position: relative;
    z-index: 2;
}

/* Smooth scroll for anchor links if any */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar (optional, for aesthetics) */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #8B0000; /* DarkRed to match theme */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #6e0000; /* Darker Red */
}

/* Style for active navigation link in header */
header nav a.active-nav-link {
    color: #fecaca; /* Tailwind's red-200 */
    font-weight: 600;
}
/* Mobile menu active link */
#mobileMenu a.active-mobile-nav-link {
    background-color: #00713D; /* RJM Green */
    font-weight: 600;
}


/* Prose styles for article content */
.prose h1 { @apply text-3xl font-bold mb-4 text-[#00713D]; }
.prose h2 { @apply text-2xl font-semibold mt-6 mb-3 text-gray-800; }
.prose h3 { @apply text-xl font-semibold mt-5 mb-2 text-gray-800; }
.prose p { @apply mb-4 leading-relaxed text-gray-700; }
.prose ul { @apply list-disc list-inside mb-4 pl-4 space-y-1 text-gray-700; }
.prose ol { @apply list-decimal list-inside mb-4 pl-4 space-y-1 text-gray-700; }
.prose a { @apply text-[#00713D] hover:text-[#00572e] underline; }
.prose blockquote { @apply border-l-4 border-[#00713D] pl-4 py-2 my-6 italic text-gray-600 bg-gray-100 rounded; }
.prose strong { @apply font-semibold text-gray-800; }
.prose img { @apply rounded-lg shadow-md my-6; }


/* Ensure footer is at the bottom on short pages */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex-grow: 1;
}

/* Form status message styling (global for all forms) */
#formStatus.success, #contactFormStatus.success, #rsvpFormStatus.success, #joinFormGlobalStatus.success {
    color: #00713D; /* RJM Green for success */
    font-weight: 500; /* medium */
}
#formStatus.error, #contactFormStatus.error, #rsvpFormStatus.error, #joinFormGlobalStatus.error {
    color: #8B0000; /* RJM Red for error */
    font-weight: 500; /* medium */
}

/* Utility classes for form inputs (used in join.html) */
.form-input {
    @apply w-full px-3 py-2.5 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#00713D] focus:border-[#00713D] transition-colors duration-150 ease-in-out text-sm sm:text-base;
}

.form-checkbox {
    @apply h-4 w-4 text-[#00713D] border-gray-300 rounded focus:ring-[#00713D] focus:ring-offset-0;
}

.form-radio {
    @apply h-4 w-4 text-[#00713D] border-gray-300 focus:ring-[#00713D] focus:ring-offset-0;
}

/* Animation for form steps */
.animate-fadeIn {
    animation: fadeIn 0.5s ease-in-out forwards; /* forwards keeps the final state */
}

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

/* Progress Bar Styling (Tailwind mostly handles this via JS class manipulation) */
/* The JS directly manipulates Tailwind classes for the progress bar elements.
   These are here as a reference or if you wanted to create more abstract CSS classes. */
.progress-step .progress-step-circle {
    /* Base styles are set by Tailwind in HTML/JS */
}
.progress-step .progress-step-label {
    /* Base styles are set by Tailwind in HTML/JS */
}
.progress-step-line {
    /* Base styles are set by Tailwind in HTML/JS */
}

/* Button loader icon - initially hidden by Tailwind 'hidden' class */
.button-loader {
    /* Spinner animation if not using Font Awesome's fa-spin */
    /* animation: spin 1s linear infinite; */
}
/* @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } */

/* Modal styles (Tailwind primarily handles this) */
.modal {
    transition: opacity 0.3s ease-in-out;
}
.modal-content {
     transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* --- MULTILINGUAL STYLES HERE --- */
/* RTL Layout Adjustments (Examples - adapt as needed) */
body.rtl-layout {
    /* Example: Change font specifically for Urdu if the general 'Inter' and 'Noto Nastaliq Urdu' combo isn't enough
       or if you want to ensure Noto Nastaliq Urdu is prioritized.
       The JS already adds 'Noto Nastaliq Urdu' to the font-family when dir='rtl'.
       This is more for specific overrides if needed. */
    /* font-family: 'Noto Nastaliq Urdu', 'Inter', sans-serif; */
}

.rtl-layout header nav a.nav-link,
.rtl-layout #mobileMenu a.mobile-nav-link {
    /* Example: Adjust padding or margins if text alignment needs tweaking for RTL nav items */
    /* For Tailwind, try using logical properties like ps- (padding-start) and pe- (padding-end) in HTML */
}

.rtl-layout .fas.fa-arrow-right, 
.rtl-layout .fa-chevron-right { /* Flip right arrows/chevrons in RTL */
    transform: scaleX(-1);
}
.rtl-layout .fas.fa-arrow-left,
.rtl-layout .fa-chevron-left { /* Flip left arrows/chevrons in RTL */
    transform: scaleX(-1);
}

/* Example: if you have specific LTR margins/paddings that need flipping for an element */
/*
.rtl-layout .some-element-with-ltr-margin {
    margin-left: 0;
    margin-right: auto; // If it was margin-left: auto in LTR
}
*/

/* Ensure that form labels and inputs align correctly in RTL.
   Tailwind's default behavior for text alignment based on `dir` attribute should handle most cases.
   However, if you have custom flex layouts for forms, review them. */
.rtl-layout label {
    /* text-align: right; */ /* Usually handled by dir="rtl" on html/body */
}
.rtl-layout input[type="checkbox"].form-checkbox + span,
.rtl-layout input[type="radio"].form-radio + span {
    @apply mr-2; /* If it was ml-2 in LTR, switch to mr-2 for RTL */
    @apply ml-0;
}

.rtl-layout .button-loader { /* Ensure loader icon position is okay in RTL */
    @apply mr-2; /* If it was ml-2 for LTR */
}

/* === Zishan Alam Embed Card Styles === */

/* Container overrides for a smooth hover and consistent spacing */
.zishan-card {
    @apply bg-gray-50 p-6 rounded-lg shadow-lg text-center transition-shadow duration-300;
}
.zishan-card:hover {
    @apply shadow-xl;
}

/* Profile image with RJM red border */
.zishan-card img {
    @apply w-32 h-32 rounded-full mx-auto mb-4 border-4 border-red-500;
}

/* Name & title typography */
.zishan-card h3 {
    @apply text-xl font-semibold text-gray-800;
}
.zishan-card .title {
    @apply text-red-600 font-medium;
}

/* Description paragraph */
.zishan-card p.description {
    @apply text-sm text-gray-600 mt-2 leading-relaxed;
}

/* Social icon container and hover colors */
.zishan-card .social-links {
    @apply mt-4 flex space-x-3 justify-center;
}
.zishan-card .social-links a {
    @apply text-gray-700 transition duration-300;
}
.zishan-card .social-links a:hover {
    @apply text-red-500;
}