/* /home/assets/index.css */
body {
    font-family: 'Cairo', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8f9fa;
}

main {
    flex-grow: 1;
}

.content-box {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.07);
    height: 100%;
}

/* --- Featured Event --- */
.featured-event-card {
    border: none;
    box-shadow: none;
}

.featured-event-card .card-body {
    padding: 1rem 0 0 0;
}

.featured-event-card .card-title {
    color: #4f0022;
    font-weight: bold;
}

.featured-event-card .card-text {
    font-size: 0.95rem;
    color: #333;
}

.featured-event-card .event-date-header {
    font-size: 0.85rem;
    color: #888;
}

/* --- Swiper Activities --- */
#activities-swiper {
    width: 100%;
}

.swiper-slide {
    height: auto;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 0; /* Base padding */
    border-bottom: none; /* 1. Removed the border */
}

/* 2. Add bottom padding to the FIRST item to create space */
.activity-item:first-child:not(:last-child) {
    padding-bottom: 1.5rem; 
}

/* Remove padding from the very last item in the slide */
.activity-item:last-child {
    padding-bottom: 5px;
}

.activity-date-box {
    background-color: #4f0022;
    color: white;
    padding: 15px 10px; /* 3. More vertical padding */
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 90px; /* 3. Slightly wider */
    margin-left: 15px;
}

.activity-date-box .day {
    font-size: 2.2rem; /* 3. Larger day text */
    font-weight: bold;
    line-height: 1;
}

.activity-date-box .month,
.activity-date-box .year {
    font-size: 0.9rem; /* 3. Slightly larger month/year */
    opacity: 0.9;
    text-transform: uppercase; /* Match screenshot */
}

.activity-content .event-date-header {
    font-size: 0.85rem;
    color: #888;
}

.activity-content .activity-title {
    font-weight: bold;
    color: #333;
    margin: 2px 0;
    font-size: 1.1rem;
}

.activity-content .activity-details {
    font-size: 0.9rem;
    color: #555; /* Lighter text to match screenshot */
}

/* --- Swiper pagination dots (No Change) --- */
.swiper-pagination-bullet {
    background-color: #ccc;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: #4f0022 !important;
}

.swiper-pagination {
    position: static;
    margin-top: 15px;
}

/* --- Hero Image --- */

/* 1. Add this new class for the container */
.hero-card {
    max-height: 650px;
    /* <--- THIS IS THE FIX. Adjust 450px to your liking */
    overflow: hidden;
    /* This hides the rest of the tall image */
}

/* 2. Add this to make the image fill the container */
.hero-card .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* This "crops" the image instead of squashing it */
    object-position: top;
    /* You can change this to 'top', 'bottom', etc. */
}

.welcome-banner {
    background-color: rgba(255, 255, 255, 0.9);
    color: #212529;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.welcome-banner h4 {
    color: #4f0022;
}

/* --- Section Title --- */
.section-title {
    display: inline-block;
    padding: 0.5rem 2rem;
    border: 2px solid #4f0022;
    border-radius: 30px;
    color: #4f0022;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* --- 2. NEW: HEADER STYLING --- */

/* This spacer div prevents content from "jumping" when the nav becomes sticky */
#header-spacer {
    display: none;
    /* Hidden by default */
    height: 100px;
    /* Will be set by JS */
}

/* Top Bar */
#top-bar {
    background-color: #fff;
    border-bottom: 1px solid #e7e7e7;
    transition: all 0.3s ease-in-out;
    font-size: 0.9rem;
}

/* Main Nav Bar */
#main-navbar {
    background-color: #ffffff;
    transition: all 0.3s ease-in-out;
    border-top: 5px solid #4f0022;
}

#main-logo {
    height: 70px;
    /* Initial "big" logo size */
    transition: height 0.3s ease-in-out;
}

#nav-social-icons {
    transition: all 0.3s ease-in-out;
    opacity: 1;
    /* Visible by default */
}

#main-navbar .nav-link {
    font-weight: 600;
    color: #333;
}

#main-navbar .nav-link.active {
    color: #4f0022;
}

/* --- The "Scrolled" State --- */

/* This class is added to the <body> by JavaScript */
body.scrolled #top-bar {
    transform: translateY(-100%);
    opacity: 0;
}

body.scrolled #main-navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Add shadow when sticky */
}

body.scrolled #main-logo {
    height: 45px;
    /* New "small" logo size */
}

body.scrolled #nav-social-icons {
    opacity: 0;
    pointer-events: none;
}

body.scrolled #header-spacer {
    display: block;
}

.px-adjust {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* --- 3. NEW: Dropdown Styling --- */
.navbar-nav .dropdown-menu {
    background-color: #ffffff;
    /*border: none;*/
    border-top: 3px solid #4f0022 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    /* Soft shadow like screenshot */
    border-radius: 0;
    /* Sharp corners */
    margin-top: 0.5rem;
    /* Space from nav */
}

.dropdown-item {
    color: #333;
    font-weight: 600;
    text-align: right;
    /* Ensure RTL alignment */
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #f5f5f5;
    color: #4f0022;
    /* Primary color on hover */
}

/* --- 4. NEW: Nested Submenu (Fly-out) Styling --- */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    right: 100%;
    /* Fly-out to the left (for RTL) */
    left: auto;
    margin-top: -1px;

}

/* Style the arrow on the submenu item */
.dropdown-submenu>.dropdown-toggle::after {
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0d9";
    /* Font Awesome "caret-left" icon */
    vertical-align: middle;
    margin-right: .3rem;
    border: none;
    /* Override default MDB triangle */
}

.dropdown-submenu .dropdown-menu {
    display: none;
    transition: none;
    /* Removes MDB's fade-in, which breaks hover */
}

/* This rule shows the submenu when you hover its parent */
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

/* --- 5. NEW: Liturgy Tab Styling --- */
.nav-pills .nav-link {
    color: #444;
    font-weight: 600;
    font-size: 1.1rem;
}

.nav-pills .nav-link.active {
    background-color: #4f0022;
    box-shadow: 0 4px 10px rgba(79, 0, 34, 0.3);
    color: white !important;
    font-size: 1.1rem;
    font-weight: 600;
}


/* --- 6. NEW: Liturgy Accordion Styling --- */
.liturgy-reading .accordion-button {
    font-weight: 700;
    color: #4f0022;
    background-color: #fcfcfc;
}

.liturgy-reading .accordion-button:not(.collapsed) {
    box-shadow: none;
    background-color: #f8f9fa;
}

.liturgy-reading .accordion-button::after {
    /* Fix for RTL arrow */
    margin-right: auto;
    margin-left: 0;
}

.liturgy-reading .accordion-button i {
    font-size: 0.9rem;
    margin-left: 0.75rem;
}

.reading-text {
    /* This is critical for showing the Bible verses correctly */
    white-space: pre-wrap;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
}

/* --- 7. NEW: Footer Styling --- */
.map-responsive {
    overflow: hidden;
    padding-bottom: 25%; /* 4:1 aspect ratio, or adjust as needed */
    position: relative;
    height: 0;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.footer-main p {
    color: #e0e0e0;
}

.footer-main a {
    color: #ffffff;
}

hr {
    background: rgba(0, 0, 0, 0.06);
    border: 0;
    height: 1px;
    margin: 22px 0;
    opacity: 1;
}
.custom-hr-color-1 {
    background: #3f3035 !important;
}
hr.tall {
    margin: 22px 0;
}
hr.narrow {
    margin: 0;
}
hr.solid {
    background: rgba(0, 0, 0, 0.06);
}

/* ===============================================
  NEW STYLES FOR COMMENTARY
===============================================
*/
.commentary-block {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}
.commentary-heading {
    text-align: center;
    font-weight: bold;
    color: #4f0022;
    margin-bottom: 1.5rem;
}
.commentary-author-ref {
    text-align: right;
    font-size: 0.9rem;
    font-style: italic;
    color: #555;
    margin-bottom: 0.25rem;
}
.commentary-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.commentary-text {
    text-align: justify; /* Justify looks better for text blocks */
    white-space: pre-wrap; /* Respects newlines from the JSON */
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
}
.reading-title{
     color: #333;
}
/* ===== Liturgy page: datepicker/input tweaks ==================== */

/* Make the date field look cleaner and consistent */
.liturgy-date-outline {
  min-width: 210px;
}

.liturgy-date-outline .form-control {
  background-color: #ffffff;
  border-radius: 999px;
  padding-inline-start: 0.75rem;
  padding-inline-end: 2.5rem; /* space for the calendar icon */
  height: 38px;
  line-height: 38px;
}

/* Keep label slightly closer to the field */
.liturgy-date-outline .form-label {
  margin-inline-start: 0.75rem;
}

/* In RTL page but LTR value, keep text left for readability */
body[dir="rtl"] .liturgy-date-outline .form-control[dir="ltr"] {
  text-align: left;
}

/* Mobile: make sure MDB datepicker fits inside viewport */
@media (max-width: 767.98px) {
  .datepicker {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: translateX(0) !important;
  }
}