/* ==========================================================================
   Visual refinements — loaded after every other stylesheet.
   The number in the file name is the version: ArvanCloud caches static files
   and ignores ?v=, so a change ships as refine.N+1.css (rename + layout link).
   ========================================================================== */

/* ---------- 1. Headings: the page title must outrank the box titles ---------- */

/* Every box title used to be 17.6px/1.2, including the page's own H1. */
.content-box__title {
    line-height: 1.5;
}

/* The coloured marker followed a fixed 30px height; let it follow the title. */
.content-box__title:before {
    top: 0;
    bottom: 0;
    height: auto;
}

/* Page title on detail pages (speech, ahkam, short speech, course, news, book, event, contact). */
h1.content-box__title {
    font-size: 1.375rem;
    line-height: 1.5;
    font-weight: 700;
}

/* Page title on album pages (speech-term, term): it was 16px, smaller than the box titles around it. */
.info-content.col-md-8 h1.entry__title {
    font-size: 1.375rem;
    line-height: 1.5;
    font-weight: 700;
}

/* ---------- 2. Body copy: one size and line height for all long text ---------- */

/* News and blog already used 14.5px/28.8px inline; every other page used 12.8–14.4px at 1.5. */
.content-box > h1.content-box__title ~ .p-3,
.content-box > h1.content-box__title ~ .content-box--2,
.info-content.col-md-8 {
    font-size: .9375rem;
    line-height: 2;
}

.content-box > h1.content-box__title ~ .p-3 p,
.content-box > h1.content-box__title ~ .p-3 li,
.content-box > h1.content-box__title ~ .content-box--2 p,
.content-box > h1.content-box__title ~ .content-box--2 li,
.info-content.col-md-8 p,
.info-content.col-md-8 li {
    font-size: inherit;
    line-height: inherit;
}

/* Headings typed into the editor: Bootstrap's defaults (h2 32px, h3 28px) would dwarf the page title. */
.content-box > h1.content-box__title ~ .p-3 :is(h2, h3, h4, h5, h6):not(.entry__title),
.content-box > h1.content-box__title ~ .content-box--2 :is(h2, h3, h4, h5, h6):not(.entry__title),
.info-content.col-md-8 :is(h2, h3, h4, h5, h6):not(.entry__title) {
    line-height: 1.6;
    font-weight: 700;
    margin: 1.5rem 0 .75rem;
}

.content-box > h1.content-box__title ~ .p-3 h2:not(.entry__title),
.content-box > h1.content-box__title ~ .content-box--2 h2:not(.entry__title),
.info-content.col-md-8 h2:not(.entry__title) {
    font-size: 1.25rem;
}

.content-box > h1.content-box__title ~ .p-3 h3:not(.entry__title),
.content-box > h1.content-box__title ~ .content-box--2 h3:not(.entry__title),
.info-content.col-md-8 h3:not(.entry__title) {
    font-size: 1.125rem;
}

.content-box > h1.content-box__title ~ .p-3 :is(h4, h5, h6):not(.entry__title),
.content-box > h1.content-box__title ~ .content-box--2 :is(h4, h5, h6):not(.entry__title),
.info-content.col-md-8 :is(h4, h5, h6):not(.entry__title) {
    font-size: 1rem;
}

/* ---------- 3. Breathing room inside boxes ---------- */

/* Bootstrap's p-3 gave every box only 16px on each side. */
@media (min-width: 768px) {
    .content-box > .p-3 {
        padding-right: 1.25rem !important;
        padding-left: 1.25rem !important;
    }

    /* Main column on detail pages: the long text gets the most room. */
    .col-md-9 > .content-box:first-child > .p-3,
    .col-md-9 > .content-box:first-child > .content-box--2 {
        padding-right: 1.75rem !important;
        padding-left: 1.75rem !important;
    }

    /* Album intro box: its two columns already carry 15px gutters. */
    .content-box > .pt-3.pb-3.d-flex {
        padding-right: .75rem;
        padding-left: .75rem;
    }
}

/* ---------- 4. "Made with AI" notice (the ai_generated tick in the admin forms) ---------- */

.ai-notice {
    display: inline-flex;
    align-items: flex-start;
    gap: .5rem;
    max-width: 100%;
    margin: 0 0 1rem;
    padding: .5rem .85rem;
    border: 1px solid #e2dcfb;
    border-radius: .6rem;
    background: linear-gradient(to left, #f4f1ff, #eef6ff);
    color: #4a3f86;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.8;
}

.ai-notice__icon {
    flex: none;
    margin-top: .2rem;
    color: #7b5cd6;
}

/* Album pages put the notice between the counts and the text. */
.info-content.col-md-8 .ai-notice {
    margin-top: .25rem;
}

/* ---------- 5. Long text is justified by default ---------- */

/* Speech, course, short-speech, ahkam, news, blog and event pages. Album intros already carry .text-justify.
   Elements with their own alignment (centred headings, the player) keep it. */
.content-box > h1.content-box__title ~ .p-3,
.content-box > h1.content-box__title ~ .content-box--2 {
    text-align: justify;
}

/* ---------- 6. Album item counts, under the album image ---------- */

.album-counts {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.album-counts__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .15rem .7rem;
    border: 1px solid #d9e9f3;
    border-radius: 999px;
    background: #f0f7fc;
    color: #2a4557;
    font-size: .8125rem;
    line-height: 1.9;
}

.album-counts__item .fa {
    color: #0098d0;
}

/* ---------- 7. "تاریخ برگزاری" line under a detail page title ---------- */

/* The title is shifted down 10px by `top: 10px` without that space being reserved, so the date sat
   2px *under* it; the calendar icon was 2px from its text. */
.details-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin-top: 1.25rem;
    color: #555;
    font-size: .875rem;
    line-height: 1.8;
}

.details-date .fa {
    color: #0098d0;
}

.details-date__label {
    font-weight: 500;
}

.details-date__sep {
    color: #c5c5c5;
}

.details-date {
    font-size: .875rem !important; /* app.css pins it to .8rem !important */
}

/* ---------- 8. Home page typography (scoped to .home-page) ---------- */

/* Item titles were 14-16px at weight 300-400, as light as the 14.4px/300 text under them;
   dates were 9.6px. One scale for every box: box title > item title > excerpt > meta. */
.home-page .content-box__title {
    font-size: 1.125rem;
    font-weight: 700;
}

.home-page .entry__title,
.home-page .entry__title a,
.home-page .post-list-small__entry-title,
.home-page .post-list-small__entry-title a {
    font-size: .9375rem !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    color: #222;
}

.home-page .entry__excerpt,
.home-page .entry__excerpt p {
    font-size: .84375rem;
    font-weight: 300;
    line-height: 1.9;
    color: #555;
}

/* The album a short speech / ruling belongs to, under its title. */
.home-page .link-list-small--4 .info-block > a {
    font-size: .8125rem;
    color: #6b6b6b;
}

.home-page .entry__location {
    font-size: .8125rem;
}

.home-page .entry__meta-date {
    font-size: .75rem !important;
}

/* News: the title touched its summary. */
.home-page .post-list-small__entry-title {
    margin-bottom: .4rem !important;
}

/* Short speeches and rulings: at most two lines, full title in the tooltip (title attribute). */
.home-page .link-list-small--4 .entry__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Books carousel: the text panel shrank to its content (135px of a 367px slide) and the pair was
   centred, leaving empty space and wrapping every title onto 3-4 lines. Let the panel fill the slide. */
.home-page .books-carousel .info-content {
    flex: 1 1 auto;
}

/* ...but a full-width panel ran under the prev/next arrows, which sit inside the carousel's 32px side
   padding (arrows at 45-75px from each edge, cards reached 67px). Keep the slides clear of them. */
.home-page .books-carousel {
    padding-right: 3.5rem !important;
    padding-left: 3.5rem !important;
}

/* ---------- 9. Bootstrap tooltips (initialised in the front layout) ---------- */

.tooltip-inner {
    max-width: 280px;
    padding: .35rem .7rem;
    direction: rtl;
    text-align: right;
    font-size: .8125rem;
    line-height: 1.8;
}

/* Book titles are no longer cut at 30 characters; they get two lines (tooltip only when longer).
   The component's inline <style> pins them to .95rem/400 !important, hence the extra specificity. */
.home-page .books-carousel .info-content .entry__title,
.home-page .books-carousel .info-content .entry__title a {
    font-size: .9375rem !important;
    font-weight: 500 !important;
}

.home-page .books-carousel .info-content .entry__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Speech and course cards: the image and its dark play overlay have square corners and poked out
   of the card's rounded border. Clip the card to its own corners. */
.home-page .entry__cards.card {
    overflow: hidden;
}

/* News: the summary fills up to three lines instead of stopping at 110 characters. */
.home-page .post-list-small__entry-title.with-mark + .entry__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* The overlay on each card image had a 3px radius and overflow:hidden, so it rounded the bottom
   corners of the grey album strip and let the dark image show through. The card clips its own corners now. */
.home-page .entry__cards .card-img-overlay {
    border-radius: 0;
}

/* Slider caption: the home item-title rule above turned it #222 on the dark caption bar (it was white). */
.home-page .featured-post-slider .description {
    padding: .6rem 1.25rem;
}

.home-page .featured-post-slider .entry__title,
.home-page .featured-post-slider .entry__title a {
    color: #fff;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
    margin: 0;
}

/* ---------- 10. Short speeches and rulings on the home page: card and ring as designed ----------
   A white card with a soft shadow and, at its start, the round picture with the play button inside
   a larger blurred ring of the same picture, standing a little past the card's edge. The ring was a
   fixed-size box at a fixed top (resized per breakpoint in app.css) drawn behind the card, so it only
   lined up with the picture when the title took one line; otherwise it showed as a crescent. Ring and
   picture are now absolutely centred on the card, the ring over the card's edge. */
.home-page .link-list-small--4 li {
    padding: 18px 0;
}

.home-page .link-list-small--4 li .d-flex {
    position: relative;
    z-index: auto; /* no stacking context: the picture must be able to sit above the ring */
    min-height: 84px;
    margin-right: 14px; /* how far the ring stands out past the card */
    padding: 10px 92px 10px 14px; /* room for the ring */
    border: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .09);
}

.home-page .link-list-small--4 li .bg-img,
.home-page .link-list-small--4 li .img-content {
    position: absolute;
    top: 50%;
    border-radius: 50%;
    overflow: hidden;
    transform: translateY(-50%);
}

.home-page .link-list-small--4 li .bg-img {
    z-index: 2;
    right: 0;
    width: 96px;
    height: 96px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}

.home-page .link-list-small--4 li .bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transform: scale(1.3); /* the blur's soft rim stays outside the circle */
    filter: blur(4px) brightness(.85);
}

.home-page .link-list-small--4 li .img-content {
    z-index: 3;
    right: -4px; /* centred on the ring: 14px overhang - (96 - 76) / 2 */
    width: 76px;
    height: 76px;
    max-width: none;
    flex: none;
    padding: 0;
    border: 3px solid #fff;
}

.home-page .link-list-small--4 li .img-content img {
    position: static;
    left: auto;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: none;
    border-radius: 50%;
}

.home-page .link-list-small--4 li .info-block {
    flex: 1 1 auto;
    max-width: 100%;
    padding: 0;
}

/* In the narrow three-column row a smaller ring leaves the title more room. */
@media (min-width: 1200px) {
    .home-page .link-list-small--4 li .d-flex {
        margin-right: 12px;
        padding-right: 80px;
    }
    .home-page .link-list-small--4 li .bg-img {
        width: 84px;
        height: 84px;
    }
    .home-page .link-list-small--4 li .img-content {
        right: -3px; /* 12 - (84 - 66) / 2 */
        width: 66px;
        height: 66px;
    }
}

/* ---------- 11. Related items carousel (احکام / نوشته‌ها / ... مرتبط on detail pages) ---------- */

/* Titles were cut at 40 characters with "..." in light 15px; now the full title in two lines at most,
   the tooltip (front layout) only when the clamp hides part of it. The clamp sits on the link itself:
   on a multi-line inline link Popper anchored the tooltip to the last line, covering the title. */
.similar-carousel .entry__title {
    margin-top: .5rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.7;
}

.similar-carousel .entry__title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* ---------- 12. Heading levels (SEO audit, 2026-10-04) ----------
   Box titles went h4 -> h2 and card titles h4 -> h3 so the outline runs h1 > h2 > h3. The theme styles a few
   of these by tag, so the old look is pinned here. */

/* app.css zeroes the margin of .audio-box h3/h4 only. */
.audio-box h2.content-box__title {
    margin: 0;
}

/* The theme gives h3 weight 400 and h4 500; these cards were h4. */
.link-list-small h3.entry__title,
h3.entry__title.card-title {
    font-weight: 500;
}

/* The H1 of a detail page used to be a link (#333) to nowhere; the text keeps the link's colour. */
.content-box__title-text {
    color: #333;
}

/* List pages: the last breadcrumb item is the H1 and looks as before. */
.breadcrumb-h1 {
    display: inline;
    margin: 0;
    font: inherit;
    color: inherit;
}

/* ---------- 13. Images carry width/height (2026-10-04) ----------
   image_dims() writes the image's real size on the tag so its place is kept while it loads. The height must
   still follow the width wherever CSS narrows the image; :where() keeps this below every existing rule. */
:where(img[width][height]) {
    height: auto;
}

/* ---------- 14. Map (Leaflet + OpenStreetMap, js/maemaeen-map.N.js) ---------- */
/* "route with" links under the map on event and place pages */
.map-directions {
    margin-top: .5rem;
    font-size: .875rem;
    color: #6c757d;
}

.map-directions a {
    display: inline-block;
    margin: .25rem 0 0 .375rem;
    padding: .2rem .7rem;
    border: 1px solid #dee2e6;
    border-radius: 1rem;
    color: #333;
    background: #fff;
}

.map-directions a:hover {
    border-color: #ffd905;
    text-decoration: none;
}

/* the map attribution is Latin text inside a right-to-left page */
.leaflet-control-attribution {
    direction: ltr;
}

/* ---------- 15. Stacked columns (below 992px) keep a gap between the main box and the sidebar ---------- */
/* the theme only adds this margin at 425px and below, so between 426 and 767px the boxes touched; the content
   and sidebar columns are col-lg-* since 2026-10-05, so they stack (and need the gap) up to 991px */
@media (max-width: 991.98px) {
    .cupcoming {
        margin-top: 1rem;
    }
}

/* ---------- 16. Text keeps its distance from the box edge ---------- */
/* box titles and the date line had padding only on the right: a long title ran into the box's left edge */
.content-box__title,
.details-date {
    padding-left: 15px;
}

/* list cards (news, blog, tags, rulings, search) had 8px inside; on a phone the text sat on the border
   (up to 991px, where the cards are stacked, see §17) */
@media (max-width: 991.98px) {
    .media.p-2.height-equalizer {
        padding: 1rem !important;
    }
}

/* ---------- 17. List cards stack below 992px: image on top, title and text under it ---------- */
/* two cards a row inside the 9/12 column left the text beside the 150px thumbnail only 50-65px wide */
@media (max-width: 991.98px) {
    .media-list .media {
        flex-direction: column;
    }
    .media-list .media > a {
        align-self: stretch !important;
        display: block;
    }
    .media-list .media > a picture,
    .media-list .media > a img {
        display: block;
        width: 100%;
    }
    .media-list .media > a img {
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }
    .media-list .media .media-body {
        margin: .75rem 0 0 !important;
        width: 100%;
    }
}

/* list pages keep a 70vh minimum height for the main column; stacked (below 992px) it left a hole above the sidebar */
@media (max-width: 991.98px) {
    .custom-min-height {
        min-height: 0;
    }
}

/* ---------- 18. Phones: pagination, reCAPTCHA, date badges ---------- */
/* a long page list («  1 2 … 12 ») ran off both sides of a phone screen: it wraps, still centred */
.pagination {
    flex-wrap: wrap;
    row-gap: .5rem;
}

@media (max-width: 575.98px) {
    .pagination .page-link {
        padding: .4rem .6rem;
    }
}

/* the reCAPTCHA box is a fixed 304px; on phones narrower than 400px it stuck out of the contact form */
@media (max-width: 399.98px) {
    .g-recaptcha {
        transform: scale(.86);
        transform-origin: right top;
    }
}

@media (max-width: 349.98px) {
    .g-recaptcha {
        transform: scale(.74);
    }
}

/* date badges on cards were .6rem (9.6px) in the theme; the home page already used .75rem */
.entry__meta-date {
    font-size: .75rem !important;
}

/* §19 Long album / course-term introductions: first lines + fade + «ادامه مطلب» (_includes/collapsible_intro) */
.intro-collapse {
    position: relative;
}

.intro-collapse.is-collapsed {
    max-height: 16rem;
    overflow: hidden;
}

/* opening / closing slide (the script sets max-height from and to) */
.intro-collapse.is-animating {
    overflow: hidden;
    transition: max-height .5s ease;
}

.intro-collapse.is-collapsed::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 5rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
    animation: intro-fade-in .3s ease;
}

@keyframes intro-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.intro-collapse__toggle {
    display: block;
    margin: .5rem auto 0;
    padding: .35rem 1.25rem;
    border: 1px solid #ccc;
    border-radius: 2rem;
    background: #fff;
    color: #333;
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}

.intro-collapse__toggle:hover,
.intro-collapse__toggle:focus {
    border-color: #999;
    background: #f5f5f5;
}

.intro-collapse__toggle[hidden] {
    display: none;
}

/* §20 List pages (speeches, courses, short speeches, rulings, news, events, writings): on desktop the category box
   is taller (fills the screen instead of 290px) and stays pinned while the list scrolls. Only a sidebar that holds
   just the category box is pinned; :has() unsupported → it simply scrolls as before. */
@media (min-width: 992px) {
    aside.col-lg-3 > .sidebar:has(> .category-sidebar:only-child) {
        position: sticky;
        top: 1rem;
    }

    .category-sidebar .scrollbar-items.category-scroll {
        max-height: max(290px, calc(100vh - 8.5rem));
    }
}