/* Cairo font + RTL — loaded last to override Bootstrap/Swiper */
html {
    direction: rtl !important;
    text-align: right;
}

body {
    direction: rtl !important;
    text-align: right !important;
    font-family: "Cairo", system-ui, "Segoe UI", Tahoma, Arial, sans-serif !important;
}

/* Force Cairo across admin + frontend overrides */
html,
body,
button,
input,
optgroup,
select,
textarea,
.form-control,
.btn,
.nav,
.admin-body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, label {
    font-family: "Cairo", system-ui, "Segoe UI", Tahoma, Arial, sans-serif !important;
}

/* Sidebar small news cards — thumbnail + text side-by-side */
.post-sidebar .latest-news-small .latest-news-small-container .news-card-small a,
.latest-news .latest-news-small .latest-news-small-container .news-card-small a,
.categories .categories-sidebar .categories-small-container .news-card-small a {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

.post-sidebar .latest-news-small .latest-news-small-container .news-card-small a .news-image,
.latest-news .latest-news-small .latest-news-small-container .news-card-small a .news-image,
.categories .categories-sidebar .categories-small-container .news-card-small a .news-image {
    flex-shrink: 0;
}

.post-sidebar .latest-news-small .latest-news-small-container .news-card-small a .news-image figure,
.latest-news .latest-news-small .latest-news-small-container .news-card-small a .news-image figure,
.categories .categories-sidebar .categories-small-container .news-card-small a .news-image figure,
.post-sidebar .urgent-news .latest-news-small-container .news-card-small .news-image figure {
    height: 60px;
    width: 80px;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    background: none;
}

.post-sidebar .latest-news-small .latest-news-small-container .news-card-small a .news-image figure img,
.latest-news .latest-news-small .latest-news-small-container .news-card-small a .news-image figure img,
.categories .categories-sidebar .categories-small-container .news-card-small a .news-image figure img,
.post-sidebar .urgent-news .latest-news-small-container .news-card-small .news-image figure img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 8px;
}

.post-sidebar .latest-news-small .latest-news-small-container .news-card-small a .news-content,
.latest-news .latest-news-small .latest-news-small-container .news-card-small a .news-content,
.categories .categories-sidebar .categories-small-container .news-card-small a .news-content {
    flex: 1;
    min-width: 0;
}

/* Related articles grid on post page */
.post-page .post-related .news-card a .news-image {
    overflow: hidden;
}

.post-page .post-related .news-card a .news-image img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
}

.post-page .post-related .news-card a .header-news-content {
    background: var(--card-bg);
}

/* Homepage + gallery album cards */
.albums .album a .album-image {
    margin: 0;
}

.albums .album a .image-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 30px);
}

.albums .album a .image-badges .images-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.albums .album a .album-content h2 {
    line-height: 1.45;
    margin: 0;
}

.albums .box-3 .album a .album-content h2 {
    font-size: 1.1rem;
    line-height: 1.4;
    padding: 0 15px;
}

[dir="ltr"],
input[dir="ltr"],
textarea[dir="ltr"] {
    direction: ltr !important;
    text-align: left !important;
}

/* --- CLS: reserve space for media & containers --- */
.urgent-swiper {
    height: 50px;
    min-height: 50px;
    overflow: hidden;
}

.urgent-swiper .swiper-wrapper,
.urgent-swiper .swiper-slide {
    height: 50px !important;
    min-height: 50px;
}

.urgent-swiper .swiper-slide {
    display: flex;
    align-items: center;
}

.urgent .urgent-news,
.urgent .urgent-news a {
    display: block;
    min-height: 1.25rem;
    line-height: 1.25;
    margin: 0;
}

.urgent,
.urgent .urgent-content,
.urgent .swiper-wrapper {
    min-height: 50px;
}

@media (max-width: 767.98px) {
    .urgent,
    .urgent .urgent-content,
    .urgent .swiper-wrapper {
        min-height: 40px;
    }
}

.nav-logo-container a {
    display: block;
    min-height: 75px;
}

@media (max-width: 991.98px) {
    .nav-logo-container a {
        min-height: 60px;
    }
}

@media (max-width: 767.98px) {
    .nav-logo-container a {
        min-height: 50px;
    }
}

.site-logo {
    width: auto;
    max-width: min(100%, 207px);
    height: 75px;
    aspect-ratio: 386 / 140;
    object-fit: contain;
}

.post-image,
.news-image,
figure.post-image,
figure.news-image {
    display: block;
    overflow: hidden;
    margin: 0;
}

.post-image--placeholder,
.news-image--placeholder {
    aspect-ratio: 16 / 9;
    min-height: 150px;
}

.post-image img,
.news-image img,
figure.post-image img,
figure.news-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.header-posts .header-post {
    min-height: 192px;
}

.header-posts .box-1 .header-post {
    min-height: 400px;
}

.header-posts .box-5 .header-post {
    min-height: 275px;
}

@media (max-width: 991.98px) {
    .header-posts .box-1 .header-post {
        min-height: 221px;
    }

    .header-posts .box-3 .header-post {
        min-height: 103px;
    }
}

.latest-news .news-card a .news-image,
.latest-news-big .news-card a .news-image {
    display: block;
    width: 100%;
    height: 190px;
    min-height: 190px;
    aspect-ratio: 16 / 9;
}

.categories .category-post-big {
    min-height: 302px;
}

.categories .category-post-big .post-image {
    width: 100%;
    height: 100%;
    min-height: 302px;
}

.categories .category-post-small .news-image figure {
    width: 80px;
    height: 60px;
    min-width: 80px;
    min-height: 60px;
    flex-shrink: 0;
}

figure.album-image,
.video-card .video-card-image,
.video-card figure.news-image {
    display: block;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.albums .box-1 .album {
    min-height: 415px;
}

.albums .box-2 .album,
.album-page .albums .box-2 .album {
    min-height: 260px;
}

.albums .box-3 .album,
.album-page .albums .box-3 .album {
    min-height: 200px;
}

figure.album-image {
    min-height: inherit;
    height: 100%;
    aspect-ratio: 16 / 9;
}

.video-card .video-card-image {
    min-height: 200px;
    aspect-ratio: 16 / 9;
}

.post-page .post-content .post-image {
    min-height: 200px;
}

.post-page .post-content .post-image > img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.video-post .video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 200px;
    overflow: hidden;
}

.video-post .video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-post .video-post-placeholder img,
.video-post video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.article-body img,
.static-page-render img {
    max-width: 100%;
    height: auto;
}

.post-related .news-card a .news-image {
    height: 150px;
    min-height: 150px;
    aspect-ratio: 16 / 9;
}

/* --- CLS: content & headline reservation --- */
.content {
    min-height: 480px;
}

.content .header-posts {
    min-height: 430px;
}

.header-post-content h2,
.header-post-content .news-title,
.category-post-content h2,
.category-post-content .news-title {
    min-height: 2.4em;
    line-height: 1.2;
}

.header-news-content h2,
.header-news-content .news-title {
    min-height: 2.6em;
    line-height: 1.3;
}

.latest-news-small .news-content h2,
.latest-news-small .news-content .news-title,
.news-card-small .news-content h2,
.news-card-small .news-content .news-title {
    min-height: 2.8em;
    line-height: 1.35;
}

@media (max-width: 991.98px) {
    .content .header-posts {
        min-height: 300px;
    }

    .header-post-content h2 {
        min-height: 2.2em;
    }
}

@media (max-width: 767.98px) {
    .content {
        min-height: 360px;
    }
}

/* Tags are plain text (not search links) to protect crawl budget */
.post-page .post-content .post-tags ul .post-tag span {
    text-decoration: none;
    color: var(--h-color);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Reserve space for responsive images (CLS) */
.post-page .post-content .post-image__img,
.article-body img,
.news-card .news-image img,
.header-post .post-image img,
.category-post-big .post-image img {
    max-width: 100%;
    height: auto;
}

/* Page H1 uses the same visual style as former section h3 titles
 * Visual chrome is handled by nextrend-theme.css (navy pill headers). */
.section-header-main .section-heading h1,
.section-header-main .section-heading h2 {
    font-size: 1.15rem;
    background: transparent;
    padding: 0;
    color: inherit;
    border-right: none;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .section-header-main .section-heading h1,
    .section-header-main .section-heading h2 {
        font-size: 1.02rem;
    }
}

.section-header .section-heading h1 {
    font-size: inherit;
    margin: 0;
    color: inherit;
    font-weight: inherit;
}

/* Match urgent/search sidebar section titles when using H1 */
.post-sidebar .latest-news-small .section-header .section-heading h1,
.post-sidebar .urgent-news .section-header .section-heading h1,
.search-page .section-header .section-heading h1 {
    font-size: 1.3rem;
    margin: 0;
    color: var(--h-color);
    font-weight: 700;
}

.city-page .city-header .city-header-info h1 {
    font-family: "Aref Ruqaa", serif;
    color: #fff;
    margin: 0;
    font-size: 7.5rem;
}

@media (max-width: 767.98px) {
    .city-page .city-header .city-header-info h1 {
        font-size: 4.5rem;
    }
}

@media (max-width: 575.98px) {
    .city-page .city-header .city-header-info h1 {
        font-size: 3rem;
    }
}

/*
 * Card / widget titles are NOT headings.
 * Keeps the article H1→H2 outline clean for Google (no unrelated H2 noise in sidebar/related).
 */
.header-news-content .news-title,
.header-post-content .news-title,
.category-post-content .news-title,
.news-content .news-title,
.video-card-content .news-title,
.album-content .news-title,
.related-card-title {
    font-weight: 700;
    margin: 0 0 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
}

/*
 * Mirror main.css h2 card typography (.news-title replaced h2 for SEO outline).
 * Without these, titles inside <a> cards inherit small link-blue styling.
 */

/* Hero header posts */
.header-posts .header-post a .header-post-content .news-title {
    font-size: 2rem;
    color: #fff !important;
    padding: 0 25px;
}

.header-posts .box-1 a .header-post-content .news-title {
    font-size: 2rem;
}

@media (max-width: 991.98px) {
    .header-posts .box-1 a .header-post-content .news-title {
        font-size: 1.2rem;
    }
}

.header-posts .box-2 .header-post a .header-post-content .news-title {
    font-size: 1.6rem;
}

.header-posts .box-3 .header-post a .header-post-content .news-title {
    font-size: 1.2rem;
}

@media (max-width: 991.98px) {
    .header-posts .box-3 .header-post a .header-post-content .news-title {
        font-size: 0.8rem;
        padding: 0 10px;
    }
}

@media (max-width: 575.98px) {
    .header-posts .box-3 .header-post a .header-post-content .news-title {
        font-size: 1.2rem;
    }
}

.header-posts .box-4 .header-post a .header-post-content .news-title {
    font-size: 1.2rem;
}

@media (max-width: 991.98px) {
    .header-posts .box-4 .header-post a .header-post-content .news-title {
        font-size: 0.8rem;
        padding: 0 10px;
    }
}

@media (max-width: 575.98px) {
    .header-posts .box-4 .header-post a .header-post-content .news-title {
        font-size: 1.2rem;
    }
}

.header-posts .box-5 .header-post a .header-post-content .news-title {
    font-size: 1.2rem;
}

/* Homepage category sections */
.categories .categories-content .category-part .category-part-container .category-post-big a .category-post-content .news-title {
    font-size: 1.7rem;
    color: #fff !important;
    padding: 0 25px;
}

.categories .categories-content .category-part .category-part-container .category-post-small a .news-content .news-title {
    font-size: 0.9rem;
    color: var(--h-color) !important;
    margin-bottom: -2px;
}

body.dark-mode .categories .categories-content .category-part .category-part-container .category-post-small a .news-content .news-title {
    color: var(--h-color) !important;
}

/* Latest news grid card body */
.latest-news .latest-news-big .news-card a .header-news-content .news-title {
    font-size: 1.2rem;
}

/* Video cards on homepage */
.videos .videos-content .video-card a .video-card-content .news-title {
    font-size: 1.8rem;
    color: #fff !important;
    padding: 0 25px;
    text-align: center;
    margin-top: 5px;
}

.videos .box-3 .video-card a .video-card-content .news-title {
    font-size: 0.95rem;
    padding: 0 10px;
}

.video-main-card a .header-news-content .news-title {
    font-size: 1.2rem;
    color: var(--h-color) !important;
}

body.dark-mode .video-main-card a .header-news-content .news-title {
    color: var(--h-color) !important;
}

/* Prevent link color leaking into card titles */
.header-post a .news-title,
.category-post-big a .news-title,
.category-post-link .news-title,
.video-card-link .news-title,
.header-post-link .news-title {
    text-decoration: none;
}

/* Titles sitting on photos: white by default (light + dark mode) */
.header-post-content .news-title,
.video-card-content .news-title,
.album-content .news-title {
    color: #fff !important;
}

.header-post-content .news-title a,
.video-card-content .news-title a,
.album-content .news-title a {
    color: #fff !important;
}

.header-post-content .news-title a:hover,
.video-card-content .news-title a:hover,
.album-content .news-title a:hover {
    color: #fff !important;
    opacity: 0.9;
}

/*
 * Home category big cards (titles ON the photo): always white.
 */
.category-part .category-post-big .category-post-content .news-title,
.category-part .category-post-big .category-post-content .news-title a {
    color: #fff !important;
}

.category-part .category-post-big .category-post-content .news-title a:hover {
    color: #fff !important;
    opacity: 0.9;
}

.category-part .category-post-big .category-post-content .news-date,
.category-part .category-post-big .category-post-content .news-date span {
    color: #fff !important;
}

/*
 * Home "آخر الأخبار" grid: titles sit on the card body (not on the photo).
 * Black in light mode, white in dark mode — this section only.
 */
.latest-news .latest-news-big .news-card .header-news-content .news-title,
.latest-news .latest-news-big .news-card .header-news-content .news-title a {
    color: #111 !important;
}

.latest-news .latest-news-big .news-card .header-news-content .news-title a:hover {
    color: #111 !important;
    opacity: 0.85;
}

.latest-news .latest-news-big .news-card .header-news-content .news-date,
.latest-news .latest-news-big .news-card .header-news-content .news-date span {
    color: #555 !important;
}

body.dark-mode .latest-news .latest-news-big .news-card .header-news-content .news-title,
body.dark-mode .latest-news .latest-news-big .news-card .header-news-content .news-title a {
    color: #fff !important;
}

body.dark-mode .latest-news .latest-news-big .news-card .header-news-content .news-title a:hover {
    color: #fff !important;
    opacity: 0.9;
}

body.dark-mode .latest-news .latest-news-big .news-card .header-news-content .news-date,
body.dark-mode .latest-news .latest-news-big .news-card .header-news-content .news-date span {
    color: #c5c5d2 !important;
}

/*
 * Related posts + category/city listing cards on light card body:
 * black in light mode, white in dark mode.
 */
.categories-page .news-card .header-news-content .news-title,
.categories-page .news-card .header-news-content .news-title a,
.city-page .news-card .header-news-content .news-title,
.city-page .news-card .header-news-content .news-title a,
.post-page .related-posts-section .related-card-title,
.post-page .related-posts-section .related-card-title a,
.post-page .post-related .related-card-title,
.post-page .post-related .related-card-title a,
.post-page .post-related .header-news-content .news-title,
.post-page .post-related .header-news-content .news-title a {
    color: #111 !important;
}

.categories-page .news-card .header-news-content .news-title a:hover,
.city-page .news-card .header-news-content .news-title a:hover,
.post-page .related-posts-section .related-card-title a:hover,
.post-page .post-related .related-card-title a:hover,
.post-page .post-related .header-news-content .news-title a:hover {
    color: #111 !important;
    opacity: 0.85;
}

body.dark-mode .categories-page .news-card .header-news-content .news-title,
body.dark-mode .categories-page .news-card .header-news-content .news-title a,
body.dark-mode .city-page .news-card .header-news-content .news-title,
body.dark-mode .city-page .news-card .header-news-content .news-title a,
body.dark-mode .post-page .related-posts-section .related-card-title,
body.dark-mode .post-page .related-posts-section .related-card-title a,
body.dark-mode .post-page .post-related .related-card-title,
body.dark-mode .post-page .post-related .related-card-title a,
body.dark-mode .post-page .post-related .header-news-content .news-title,
body.dark-mode .post-page .post-related .header-news-content .news-title a,
body.dark-mode .news-content .news-title,
body.dark-mode .news-content .item-title,
body.dark-mode .news-content .news-title a,
body.dark-mode .news-content .item-title a {
    color: #fff !important;
}

body.dark-mode .categories-page .news-card .header-news-content .news-title a:hover,
body.dark-mode .city-page .news-card .header-news-content .news-title a:hover,
body.dark-mode .post-page .related-posts-section .related-card-title a:hover,
body.dark-mode .post-page .post-related .related-card-title a:hover,
body.dark-mode .post-page .post-related .header-news-content .news-title a:hover,
body.dark-mode .news-content .news-title a:hover {
    color: #fff !important;
    opacity: 0.9;
}

/* Related card date on card background */
.post-page .post-related .header-news-content .news-date,
.post-page .post-related .header-news-content .news-date span,
.post-page .related-posts-section .header-news-content .news-date,
.post-page .related-posts-section .header-news-content .news-date span {
    color: #555 !important;
}

body.dark-mode .post-page .post-related .header-news-content .news-date,
body.dark-mode .post-page .post-related .header-news-content .news-date span,
body.dark-mode .post-page .related-posts-section .header-news-content .news-date,
body.dark-mode .post-page .related-posts-section .header-news-content .news-date span {
    color: #c5c5d2 !important;
}

/* List/sidebar titles on light backgrounds keep theme text color */
.news-content .news-title,
.news-content .item-title {
    color: var(--h-color);
    font-size: 0.9rem;
}

.header-news-content .news-title,
.video-card-content .news-title,
.album-content .news-title {
    font-size: 1.2rem;
}

.category-post-big .category-post-content .news-title {
    font-size: 1.7rem;
    padding: 0 25px;
}

.header-posts .header-post-content .news-title {
    color: #fff !important;
}

.post-page .post-related .header-news-content .news-title,
.post-page .post-related .video-card-content .news-title,
.post-page .related-posts-section .related-card-title {
    font-size: 1rem;
}

.news-title a {
    color: inherit;
    text-decoration: none;
}

.news-content .news-title a:hover {
    color: var(--main-color);
}

/* Widget labels: former h3 → .widget-title (non-heading, same look) */
.section-heading .widget-title {
    margin: 0;
    color: var(--h-color);
    font-weight: 700;
    line-height: 1.3;
}

.post-sidebar .latest-news-small .section-header .section-heading .widget-title,
.post-sidebar .urgent-news .section-header .section-heading .widget-title,
.latest-news .latest-news-small .section-header .section-heading .widget-title {
    font-size: 1.3rem;
}

.section-header-main .section-heading .widget-title {
    font-size: 1.15rem;
    background: transparent;
    padding: 0;
    color: inherit;
    border-right: none;
    margin-bottom: 0;
}

/* Related posts section heading can be a plain .section-heading text node / div */
.section-header-main > .section-heading:not(:has(*)),
.section-header-main .section-heading.related-heading,
.post-related .section-header-main .section-heading {
    font-size: 1.15rem;
    font-weight: 800;
    background: transparent;
    padding: 0;
    color: inherit;
    border-right: none;
    margin-bottom: 0;
    line-height: 1.35;
}

@media (max-width: 575.98px) {
    .section-header-main .section-heading .widget-title,
    .post-related .section-header-main .section-heading {
        font-size: 1.02rem;
        padding: 0;
    }
}

.post-page .related-posts-section .related-card-title,
.post-page .post-related .related-card-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
}

.post-page .related-posts-section .related-card-title a {
    text-decoration: none;
}

body.dark-mode .post-page .related-posts-section .related-card-title,
body.dark-mode .post-page .post-related .related-card-title,
body.dark-mode .post-page .related-posts-section .related-card-title a,
body.dark-mode .post-page .post-related .related-card-title a {
    color: #fff !important;
}


/* Alias requested class name for sidebar item titles */
.news-content .item-title {
    font-size: 0.9rem;
    color: var(--h-color);
}