/* ==========================================================================
   Main home page of the institute (/ar), used by client/home.blade.php
   Loaded after custom.css (through the CSScripts section of the layout).
   Shared site styles stay in style.css and custom.css; this file has only what is specific to the home page.

   TABLE OF CONTENTS, in page order (search for the number and title in the section comments below)
    1. Headings and spacing
    2. Hadith
    3. News carousel
    4. Events and prayer times
    5. Imam section (icons)
    6. Questions and opinions
    7. Selected lessons
    8. Photo album
    9. App download banner
   10. Taqi and Majid banners
   11. Related sites (Dar al-Ilm)
   ========================================================================== */


/* ==========================================================================
   1. Headings and spacing
   The section titles are <h2>. They keep the spacing the old <h1> had (normalize.css gave <h1> its margin).
   ========================================================================== */
h2.H1 {
    margin: 0.67em 0;
}

.row.mb-2.VCenter > h2.H1 {
    margin-top: 0;
}

/* Title row of a section (icon + title) */
.HomeTitleRow {
    padding: 0 15px;
}

.HomeTitleRowBetween {
    justify-content: space-between;
}

/* Rows that fill the full width without Bootstrap's negative margin */
.CoverFirst.row,
.CoverSecond.row,
.ShahidRow.row {
    margin: 0;
}

.RtlBox {
    direction: rtl;
}

.InlineBlock {
    display: inline-block;
}

.HomeBtnLeft {
    float: left;
}

/* Desktop: the archive button starts on the same left edge as the news cards */
@media (min-width: 992px) {
    .HomeBtnLeft {
        margin-left: 15px;
    }
}


/* ==========================================================================
   2. Hadith
   ========================================================================== */
.HadisWrap {
    background-color: white;
    position: sticky;
}

/* more space between the speaker ("قال الرسول...") and the hadith text */
.Hadis .ImgContainer > p:first-of-type {
    margin-bottom: 8px;
    line-height: 18px;
}

/* whole-pixel line height: the box height is a whole number, so the ornaments and the line sit on the same pixel row */
.Hadis .ImgContainer > p:not(:first-of-type) {
    line-height: 23px;
}

/* Bottom line of the hadith: site blue, and shorter on both sides (it starts where the end ornaments' own line stops) */
.Hadis .ImgContainer {
    border-bottom: none;
    margin-bottom: 2px;
}

.Hadis .ImgContainer::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: -2px;
    height: 2px;
    background: var(--Blue);
}


/* ==========================================================================
   3. News carousel
   Phone: one slide, swipe. Desktop (>= 992px): three columns.
   ========================================================================== */
.news-carousel-container {
    position: relative;
    overflow: hidden;
    padding: 0 15px;
}

.news-carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    scroll-padding: 15px;
    padding-bottom: 1.5rem;
}

/* News title: more space between its lines */
.news-slide h2 {
    line-height: 1.5;
}

.news-slide {
    flex: 0 0 95%;
    max-width: 360px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Archive button of the news: closer to the cards */
.News .row.mt-4 {
    margin-top: 8px !important;
}

/* Dots */
.carousel-dots {
    transform: translateX(-50%);
    gap: 10px;
    z-index: 10;
}

.dot {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.dot.active,
.dot-input:checked + .dot {
    background: #007bff;
    transform: scale(1.3);
}

.dot-input {
    display: none;
}

/* Desktop: three columns, no dots */
/* Tablet and desktop >= 992px */
@media (min-width: 992px) {
    .news-carousel {
        flex-wrap: wrap;
        overflow-x: visible;
        scroll-snap-type: none;
        gap: 1.5rem;
        scroll-padding: 0;
    }

    .news-slide {
        flex: 0 0 calc((100% - 3rem) / 3); /* 3 columns fill the whole width (2 gaps of 1.5rem) */
        max-width: none;
        scroll-snap-align: none;
        scroll-snap-stop: none;
    }

    .carousel-dots {
        display: none;
    }
}


/* ==========================================================================
   4. Events and prayer times
   ========================================================================== */
.Monasebat p.EventItem {
    color: #FFFFFF;
    margin-right: 15px;
}

.PrayBox {
    padding-top: 10px;
}

.PrayLocation {
    margin-top: 30px;
}

.PrayNext {
    margin-top: 49px;
}

.OghateShareeeeTime {
    padding-top: 29px;
}

.PrayItem {
    margin-left: 25px; /* gap between items; every row starts on the same right edge as the title */
}


/* ==========================================================================
   5. Imam section (icons)
   ========================================================================== */
.imam-section-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
    height: 100%;
}

.imam-section-item:hover {
    transform: translateY(-5px);
    text-decoration: none;
}

.imam-icon-container {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Desktop: smaller circles, so there is a gap between the icons */
@media (min-width: 992px) {
    .imam-icon-container {
        width: min(190px, 90%);
    }

    .imam-icon {
        width: 100%;
        height: auto;
    }
}

.imam-section-item h5 {
    color: #2c5aa0;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    text-align: center;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imam-section-item:hover h5 {
    color: #1e4080;
}


/* ==========================================================================
   6. Questions and opinions
   ========================================================================== */
/* Questions and opinions boxes: less space above the titles (both titles stay on one row) */
.esteftat,
.ra-khoei {
    padding-top: 40px;
}

.Questions-scrollable-div.QuestionsList {
    margin: 15px 0;
    max-height: 255px;
    overflow-y: auto;
}

.AnswerLabel {
    margin-top: 10px;
    direction: rtl;
    text-align: right;
    unicode-bidi: embed;
}

.AnswerText {
    direction: rtl;
    text-align: right;
    unicode-bidi: embed;
}

.button-container {
    position: absolute !important;
    bottom: 30px !important;
    left: 123px !important;
}

.esteftatBtn.BtnLightGray {
    background-color: var(--LightGray);
    border-color: var(--DarkGray);
}

.esteftatBtn.BtnWhite {
    background-color: var(--White);
    border-color: var(--DarkGray);
}

.esteftatBtn.BtnBlue {
    background-color: var(--Blue);
    border-color: var(--Blue);
    color: white;
}

.OpinionsRow {
    margin: 15px 0;
}

.FirstOpinion {
    background-color: #539ba5;
}

.OpinionsFooter {
    justify-content: end;
    align-items: center;
}

.btn_home_archive {
    position: absolute;
    bottom: 30px;
}


/* ==========================================================================
   7. Selected lessons
   ========================================================================== */
.SoundBtn > div.downloadIcon > i.PlayIcon {
    margin-top: 1px;
    margin-left: 7px;
}


/* ==========================================================================
   8. Photo album
   ========================================================================== */
.AlbumLink {
    margin: 0 1px;
}

.AlbumImg {
    height: 188px !important;
    width: 300px !important;
}


/* ==========================================================================
   9. App download banner
   ========================================================================== */
.downloadAppLg,
.downloadAppSm {
    height: 100%;
    width: 100%;
}

.DwAndroid {
    position: absolute;
    bottom: 20px;
    right: 50px;
}

.DwIOS {
    position: absolute;
    bottom: 20px;
    right: 260px;
}


/* ==========================================================================
   10. Taqi and Majid banners
   ========================================================================== */
.ShahidCol {
    position: relative;
    padding: 0;
}

.ShahidRight {
    position: absolute;
    right: 20px;
    bottom: 20px;
    opacity: .7;
}

.ShahidLeft {
    position: absolute;
    left: 20px;
    bottom: 20px;
    opacity: .7;
}


/* ==========================================================================
   11. Related sites (Dar al-Ilm)
   ========================================================================== */
.SitesSection {
    margin: 0 !important;
}

.SitesRow {
    background-image: url('/assets/imgs/bg_3st.jpg');
    background-size: cover;
    background-position: center;
    min-height: 300px;
    align-items: center;
    justify-content: space-between;
}

h2.SitesTitle {
    margin-top: 50px;
    font-size: 32px;
    margin-bottom: 0.67em;
}

.img_logo_daralelm_gray_element {
    height: 240px;
}

@media (min-width: 992px) {
    .custom-desktop-padding {
        padding-right: 102px !important;
    }

    .custom-desktop-margin {
        margin-left: -40px;
    }
}

@media only screen and (max-width: 768px) {
    .custom-mobile-margin {
        margin-right: -45px;
        margin-top: -18px;
    }

    .mob-layout {
        text-align: right !important;
    }
}


/* ==========================================================================
   Phone <= 768px (rules that change the sections above)
   ========================================================================== */
@media (max-width: 768px) {
    .imam-icon-container {
        width: 200px;
    }

    .imam-icon {
        width: 170px !important;
    }

    .title_ImamKhoei_Opinions_About {
        margin-top: 50px !important;
    }

    .btn_home_archive {
        bottom: 10px !important;
    }

    .img_logo_daralelm_gray_element {
        height: 140px !important;
    }

    .button-container {
        position: unset !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    .ra-khoei,
    .esteftat {
        padding-top: 20px !important;
        padding-bottom: 60px !important;
    }
}