:root {
    /* Primary Colors */
    --primary-color: rgba(153, 121, 84, 1);
    /* بني داكن: يُستخدم للعناوين أو النصوص البارزة */
    --secondary-color: rgba(63, 117, 83, 1);
    /* أخضر: يُستخدم للأزرار، الروابط أو العناصر التفاعلية */

    /* Background Colors */
    --background-color: #f9f5f0;
    /* بيج فاتح: يُستخدم للخلفية الرئيسية لإضفاء دفء على التصميم */
    --content-bg-color: #ffffff;
    /* أبيض: يُستخدم لبطاقات المحتوى أو الأقسام القابلة للقراءة */

    /* Text Colors */
    --text-color: #2f2f2f;
    /* أسود رمادي: للنصوص الأساسية لضمان الوضوح */
    --muted-text-color: #757575;
    /* رمادي باهت: للنصوص الثانوية مثل الأوصاف أو العناوين الفرعية */

    /* Accent Colors */
    --accent-color-light: #e8f5e9;
    /* أخضر فاتح: لتسليط الضوء على الأقسام أو الرسائل المميزة */
    --accent-border-color: #d7ccc8;
    /* بني فاتح: للحدود بين العناصر لإبراز الفواصل */

    /* Hover and Interaction Colors */
    --hover-color: #8d6e63;

    /* Button Colors */
    --button-primary-bg: var(--secondary-color);
    /* أخضر: لون الخلفية للأزرار الأساسية */
    --button-primary-text: #ffffff;
    /* أبيض: لون النص للأزرار الأساسية */
    --button-secondary-bg: var(--primary-color);
    /* بني داكن: لون الخلفية للأزرار الثانوية */
    --button-secondary-text: #ffffff;
    /* أبيض: لون النص للأزرار الثانوية */
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



body {
    font-size: 15px;
    line-height: 24px;
    font-family: 'Aljazeera-Regular', sans-serif;
    background-color: #FFFFFF;
    color: var(--text-color);

}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Aljazeera-Bold", sans-serif;
    margin: 0;
    line-height: 150%;

}

.container{
    max-width: 1200px;
}

h1 {
    font-size: 64px
}

h2 {
    font-size: 32px
}

h3 {
    font-size: 20px
}

h4 {
    font-size: 18px
}

p {
    font-size: 15px;
    line-height: 24px;
}

a,
a:active,
a:focus,
a:hover {
    text-decoration: none
}

a:active,
a:focus,
a:hover {
    outline: 0
}

img {
    max-width: 100%;
    height: auto
}

ul {
    list-style: none none;
    margin: 0;
    padding: 0
}

/* .container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
    max-width: 1240px
} */

.mr-100 {
    margin-right: 100px;
}

.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
    display: block !important;
}

.owl-carousel .owl-prev,
.owl-carousel .owl-next {
    width: 35px;
    height: 35px;
    border: 1.5px solid var(--primary-color) !important;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.owl-carousel .owl-prev {
    right: -50px;

}

.owl-carousel .owl-next {
    left: -50px;

}

.owl-carousel .owl-prev i,
.owl-carousel .owl-next i {
    color: var(--primary-color);
}

.btn {
    display: flex;
    align-items: center;
    grid-gap: 8px;
    justify-content: center;
    width: max-content;
    margin: auto;
    padding: 6px 20px;
    font-size: 16px;
}

.btn-outline-primary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    border: none;
    padding: 0;
    font-size: 12px;
    margin: 0;

}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-outline-primary:hover {
    border-color: unset;
    background-color: unset;
    color: var(--secondary-color);
}

.overlay {
    background: rgba(0, 0, 0, 0.6);
    color: var(--button-primary-text);
}

/* Navbar Styling */
.custom-navbar {
    background-color: var(--primary-color);
    padding: 1rem 0;
}

.navbar-logo {
    width: 80px;
    margin-right: 10px;
}

.navbar-title {
    color: var(--button-primary-text);
    font-weight: bold;
    font-size: 1.2rem;
}

.navbar-nav .nav-item .nav-link {
    margin: 0;
    padding: 15px;
}

.nav-link {
    color: var(--button-primary-text);
    font-weight: 500;
    margin-right: 15px;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
    color: #FFFFFF;
    position: relative;
}

.navbar-nav .nav-link.active::after,
.navbar-nav .show>.nav-link::after {
    content: "";
    height: 2px;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 7px;
    left: 15%;
    WIDTH: 70%;

}

.nav-link:hover {
    color: #FFFFFF;
}

.search-form {
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    width: max-content;
}

.search-form .search-input {
    background-color: var(--content-bg-color);
    color: var(--text-color);
    border-radius: 8px;
    padding: 5px 10px;
    border: none;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    max-width: 150px;
}

.search-form .search-input:focus {
    box-shadow: none;
}

.search-form .search-button {
    background-color: var(--secondary-color);
    color: var(--button-primary-text);
    border: none;
    border-radius: 8px;
    padding: 5px 15px;
    margin-left: 0;
    transition: background-color 0.3s ease;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.search-form .search-button:hover {
    background-color: var(--hover-color);
}

.navbar-toggler {
    color: var(--button-primary-text);
}



.latest-news {
    background-color: #FFFFFF;
}

.box-sadow-2 {
    box-shadow: 2px 2px 10px 0px rgba(192, 187, 187, 1);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.main-news-card {
    position: relative;
    height: 100%;
    background: var(--content-bg-color);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    overflow: hidden;
    width: calc(100% - 200px);
    height: 460px;
}
.left-img-card{

}
.main-news-card img {
    transition: transform 0.3s ease-in-out;
    height: 100%;
    object-fit: cover;
}

.latest-news .small-news-card .img-card{
    height: 110px;
    width: 110px;
}

.latest-news .small-news-card .img-card img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.card-article{
    max-height: 444px;

}
.main-post-content {
    width: 100%;
    max-width: 200px;
    padding: 15px;
    background: #FFFFFF;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    height: 100%;
    max-height: 460px;

}

.main-post-content h5,
.main-post-content h2 {
    font-size: 18px;
    position: relative;
    padding-bottom: 20px;
    color: var(--text-color);
    margin-bottom: 10px;
    line-height: 1.5;
}

.main-post-content h5:after,
.main-post-content h2::after {
    content: "";
    height: 2px;
    background-color: var(--primary-color);
    position: absolute;
    bottom: 7px;
    right: 0;
    width: 90%;
}

.main-post-content p {
    font-size: 14px;
    color: var(--muted-text-color);
}

.main-post-content .date {
    color: var(--muted-text-color);
    font-size: 12px;
    display: flex;
    align-items: center;
    grid-gap: 8px;

}




.main-news-card:hover .overlay {
    background: rgba(0, 0, 0, 0.8);
}



.main-news-description {
    font-size: 16px;
    line-height: 1.5;
}

.btn-read-more {
    background-color: var(--secondary-color);
    color: var(--button-primary-text);
    padding: 10px 20px;
    border-radius: 5px;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.btn-read-more:hover {
    background-color: var(--hover-color);
}

.latest-news .small-news-card {
    padding: 0 !important;

}

.body-post {
    padding-right: 10px;
    width: calc(100% - 110px);
}

.date-post {
    display: block;
    font-size: 12px;
    text-align: start;
    color: var(--muted-text-color);
}

.small-news-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-color);
}

.small-news-description {
    font-size: 12px;
    color: var(--muted-text-color);
    line-height: 150%;
    margin-bottom: 0 !important;
}

.small-news-link {
    font-size: 14px;
    color: var(--secondary-color);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.small-news-link:hover {
    color: var(--hover-color);
}

.prisoner-stats {
    background: linear-gradient(to bottom,
    #ffffff 60%,
    rgba(153, 121, 84, 0.2) 40%);
    padding-top: 60px;
    padding-bottom: 60px;
}



.section-title {
    font-size: 32px;
    font-weight: bold;
    color: var(--text-color);
    position: relative;
    width: max-content;
    margin: auto;
    margin-bottom: 70px;

}

.section-title::before,
.section-title::after {
    content: "";
    height: 3px;
    left: -75px;
    width: 65px;
    background-color: var(--primary-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.section-title::before {
    right: -75px;
    left: unset;
}

.prisoner-stats .stat-card {
    background-color: var(--content-bg-color);
    box-shadow: 2px 2px 10px 0px rgba(153, 121, 84, 0.3);
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 20px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.prisoner-stats .stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}


.prisoner-stats .stat-number {
    font-size: 42px;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 10px;
}

.prisoner-stats .stat-title {
    font-size: 32px;
    color: var(--text-color);
}

.big-btn {
    font-size: 20px;
    padding: 6px 40px;
    height: 50px;
    width: 265px;
}


/*Slider*/

.stories-slider {
    margin: 80px 0;
}

.stories-slider .card {
    border: 1px solid rgba(224, 224, 224, 1);
    border-radius: 12px;
    overflow: hidden;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    margin-bottom: 10px;
    min-height: 430px;
}

.stories-slider .card-img-top {
    height: 250px;
    object-fit: cover;
}

.alahed-publications .card-img-top {
    height: 350px;
}

.stories-slider .card-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.stories-slider .card-text {
    font-size: 16px;
    color: var(--muted-text-color);
}

.alahed-publications {
    background: linear-gradient(to bottom,
    #ffffff 60%,
    rgba(153, 121, 84, 0.2) 40%);
    padding: 40px 0;
}

/*Videos*/

.videos-section {}

.video-thumbnail {
    cursor: pointer;
    position: relative;
}

.video-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.main-thumbnail img {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

}

.videos-section .main-post-content {
    max-height: 400px;
    max-width: 300px;
}

.play-icon {
    color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: color 0.3s ease, transform 0.3s ease;
}

.video-thumbnail:hover .play-icon {
    color: rgba(255, 255, 255, 1);
    transform: translate(-50%, -50%) scale(1.2);
}



.main-video {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

}


.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #e0e0e0;
    border-radius: 8px;
}

.video-title {
    font-size: 16px;
    font-weight: bold;
    color: #555;
}

.highlighted-video {
    z-index: 9;
}

.small-video {
    height: 202px;
    border: 1px solid #ddd;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    overflow: hidden;
}

.small-video video {
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    overflow: hidden;
}

/*Contact us*/
.contact-us-section {
    /*background: rgba(153, 121, 84, 0.2);*/

}

.contact-form {
    background-color: transparent;
    border-radius: 8px;
}

.contact-form .form-label {
    font-weight: bold;
    color: #5f5f5f;
}

.contact-form .form-control {
    height: 50px;
    border: 1px solid #d7ccc8;
    border-radius: 12px;
    background: rgba(255, 255, 255, 1);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.contact-form textarea {
    height: 180px !important;
}

.contact-form .form-control:focus {
    border-color: #a08870;
    box-shadow: none;
}



.footer {
    background-color: var(--primary-color);
    /* لون بني مريح */
    padding-top: 40px;
}

.footer-logo {
    width: 120px;
    /* حجم شعار المؤسسة */
}

.social-icons a {
    font-size: 18px;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #f7d9c4;
    /* لون عند التمرير */
}



.form-control:focus {
    box-shadow: none;
    border: 1px solid #f7d9c4;
}

.footer-bottom {
    background: linear-gradient(180deg, #836645 0%, #70522E 100%);
    padding: 20px 0;
}



/*report-section*/

.report-section {
    padding: 80px 0;
}

label span {
    font-family: "arial", sans-serif;
}


.report-form {
    background: rgba(153, 121, 84, 0.2);
    border: 1px solid rgba(153, 121, 84, 1);
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}

.report-form .form-label {
    color: var(--text-color);
    font-size: 16px;
    display: flex;
}

.report-form .form-control {
    height: 50px;
    border-radius: 12px;
    direction: rtl;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.report-form textarea.form-control {
    height: 160px;
    padding: 20px;

}

.report-form .form-control:focus {
    border-color: #a08870;
    box-shadow: none;
}



.about-us-section {
    padding: 80px 0;

}


.about-us-section .about-intro {
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-color);
}

.about-us-section .card {
    border: none;
    height: 100%;
    background: rgba(131, 102, 69, 0.2);
    border: 1.06px solid rgba(152, 175, 211, 0.3);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    position: relative;
    padding: 40px 20px;
}

.about-us-section .card .icon-card {
    position: absolute;
    left: 20px;
    top: 20px;
}

.about-us-section .card-title {
    font-size: 28px;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 40px;
    position: relative;
    width: max-content;
}

.about-us-section .card-title::after {
    content: "";
    height: 2px;
    background-color: var(--primary-color);
    position: absolute;
    bottom: -20px;
    right: 0;
    width: 100%;
}

.about-us-section .card-text {
    font-size: 16px;
    color: var(--muted-text-color);
}

/**/

.principles-section {
    padding: 80px 0;
    background-color: #f5f5f5;

}

.principles-section .card {
    border: none;
    height: 100%;
    background: var(--primary-color);
    border: 1.06px solid rgba(152, 175, 211, 0.3);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    position: relative;
    padding: 20px;
    text-align: start;
}

.principles-section .card-title {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    position: relative;
    width: max-content;
    margin-bottom: 20px;
}

.principles-section .card-title:after {
    content: "";
    height: 3px;
    background-color: #FFFFFF;
    position: absolute;
    bottom: -15px;
    right: 0;
    width: 50%;
}

.principles-section .card-text {
    font-size: 16px;
    line-height: 1.8;
    color: #ffffff;
}

/**/
.goals-section {
    padding: 80px 0;
}

.goals-section .card {
    border: none;
    height: 100%;
    background: rgba(131, 102, 69, 0.2);
    border: 1.06px solid rgba(152, 175, 211, 0.3);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    position: relative;
    padding: 40px 20px;
}

.goals-section .card-title {
    font-size: 28px;
    font-weight: bold;
    color: var(--primary-color);
    position: relative;
    width: max-content;
    margin: 0 auto;
    margin-bottom: 20px;
}

.goals-section .icon-card {
    margin-bottom: 20px;
}

.goals-section .card-text {
    font-size: 16px;
    color: var(--muted-text-color);
    line-height: 1.8;
}


.filter-section .input-group-text {
    border: none;
    background-color: transparent;
}

.filter-section .form-control,
.filter-section .form-select {
    background: rgba(153, 121, 84, 0.2);
    border: 1px solid rgba(153, 121, 84, 0.3);
    border-radius: 120px;
    -webkit-border-radius: 120px;
    -moz-border-radius: 120px;
    -ms-border-radius: 120px;
    -o-border-radius: 120px;
    color: var(--primary-color);
    font-size: 15px;
}


.filter-section .form-control:focus,
.filter-section .form-select:focus {
    outline: none;
    box-shadow: none;
}

.all-posts .search-button {
    margin-right: -40px;
    color: var(--primary-color);
    cursor: pointer;
    z-index: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: 38px;
}

/* Wrapper for Date Input */
.date-input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* إضافة أيقونة */
.date-input-wrapper::before {
    content: "\f073";
    /* Unicode أيقونة التقويم من Font Awesome */
    font-family: "Font Awesome 5 Free";
    /* Font Awesome */
    font-weight: 900;
    /* الوزن الثقيل للأيقونة */
    position: absolute;
    left: 15px;
    /* مكان الأيقونة بالنسبة لمدخل النص */
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    /* لون الأيقونة البني */
    font-size: 1rem;
    /* حجم الأيقونة */
}

.all-posts .card {
    margin-bottom: 50px;
}

.all-posts .card-img-top {
    height: 220px;
}

.pagination {
    font-size: 16px;
    /* حجم النص */
}

.pagination .page-item .page-link {
    border-radius: 50%;
    border: 1px solid rgba(245, 245, 245, 1);
    background-color: rgba(255, 255, 255, 1);
    color: #2F2F2F;
    font-size: 14px;
    margin: 0 0.3rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.pagination .page-item .page-link:hover {
    background-color: var(--primary-color);
    color: #fff;

}

.pagination .page-item.active .page-link {
    background-color: #a08870;
    color: #fff;

}

.pagination .page-item.disabled .page-link {
    color: #ccc;
    pointer-events: none;
    background-color: transparent;
    border-color: transparent;
    border: 1px solid rgba(245, 245, 245, 1);
}

.single-post.news-details {
    padding: 80px 0;
}


.single-post.news-details .news-title {
    font-size: 22px;
    font-weight: bold;
    color: var(--text-color);
}

.single-post.news-details .news-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
}

.single-post.news-details .latest-news {
    background: #F6F6F6;
}

.single-post.news-details .latest-news h4 {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-color);
}

.single-post.news-details .latest-news img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.single-post.news-details .similar-news .card-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-color);
}

.single-post.news-details .similar-news .btn-outline-primary {
    color: #5f5f5f;
    border-color: #a08870;
}

.single-post.news-details .similar-news .btn-outline-primary:hover {
    background-color: #a08870;
    color: #fff;
    padding: 7px 20px;
}

/* للكتل النصية */
.blockquote {
    font-size: 16px;
    font-style: italic;
    color: #555555;
    border-left: 4px solid #a08870;
}

/* الوسوم */
.single-post.news-details .tags .badge {
    font-size: 14px;
    margin-left: 8px;
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px solid rgba(153, 121, 84, 0.3);
    background: rgba(153, 121, 84, 0.2);
    color: var(--primary-color);

}





.btn-outline-brown {
    border: 1px solid #a08870;
    color: #a08870;
}

.btn-outline-brown:hover {
    background-color: #a08870;
    color: #fff;
}

.single-post.news-details .similar-news h4,
.single-post.news-details .latest-news h4 {
    font-size: 22px;
    position: relative;
    padding-bottom: 20px;
    color: var(--text-color);
    margin-bottom: 15px;
    width: max-content;
    font-weight: bold;
}

.single-post.news-details .similar-news h4::after,
.single-post.news-details .latest-news h4::after {
    content: "";
    height: 2px;
    background-color: var(--primary-color);
    position: absolute;
    bottom: 7px;
    right: 0;
    width: 100%;
}

.custom-blockquote {
    font-size: 20px;
    font-weight: bold;
    color: var(--secondary-color);
    line-height: 1.8;
    margin: 20px 0;
    position: relative;
}

.custom-blockquote::before {
    font-family: "Font Awesome 6 Free";
    content: "\f10d";
    position: absolute;
    font-weight: 900;
    font-size: 48px;
    top: -8px;
    right: 0;
    color: #EEE;
    z-index: -1;
    line-height: 1;
}

.single-post.news-details .news-content .custom-blockquote p {
    font-size: 24px;
    line-height: 1.8;
    color: var(--secondary-color);

}

/* أيقونات الاقتباس */
blockquote .quote-icon {
    color: var(--secondary-color);
    font-size: 30px;
    vertical-align: middle;
    margin-left: 20px;
    margin-right: 12px;
}

blockquote {
    font-size: 20px;
    font-weight: bold;
    color: var(--secondary-color);
    line-height: 1.8;
    margin: 20px 0;
    position: relative;
}

blockquote::before {
    font-family: "Font Awesome 6 Free";
    content: "\f10d";
    position: absolute;
    font-weight: 900;
    font-size: 48px;
    top: -8px;
    right: 0;
    color: #EEE;
    z-index: -1;
    line-height: 1;
}

.single-post.news-details .news-content blockquote p {
    font-size: 24px;
    line-height: 1.8;
    color: var(--secondary-color);

}

/* أيقونات الاقتباس */
blockquote .quote-icon {
    color: var(--secondary-color);
    font-size: 30px;
    vertical-align: middle;
    margin-left: 20px;
    margin-right: 12px;
}


.search-results {
    padding: 80px 0;
}

.search-results .search-bar input {
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    padding: 10px 20px;
    width: 100%;
}

.search-results .search-bar button {
    background-color: #a08870;
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin: 0;
}

.search-results .result-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    background-color: #f6f6f6;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    overflow: hidden;
}

.search-results .result-item img {
    width: 300px;
}

.search-results .result-item>div {
    width: 100%;
    padding: 20px;
}

.search-results .result-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.search-results .result-description {
    font-size: 14px;
    line-height: 1.6;
    color: #757575;
}

.search-results .pagination .page-link {
    border: none;
    background-color: #f5f5f5;
    color: #5f5f5f;
}

.search-results .pagination .page-link:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.modal-content {
    border-radius: 12px;
    overflow: hidden;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.modal-header {
    background-color: var(--primary-color);
    color: #fff;
}

.modal-footer {
    border-top: none;
}
.news-image img{
    width: 100%;
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .navbar-nav .nav-link.active::after, .navbar-nav .show>.nav-link::after{
        display: none;
    }
    .card-article {
        max-height: unset;
        margin-bottom: 50px;
    }
    .main-news-card{
        height: unset;
    }
    .stories-slider {
        margin: 40px 0;
    }
    .principles-section .card-title,
    .goals-section .card-title{
        width: unset;
    }
}
@media (max-width: 767px) {
    .single-post.news-details .tags .badge{
        margin-bottom: 8px;
    }
    .pagination .page-item .page-link{
        width: max-content;
    }
    .main-news-card {
        margin-right: 0;
        width: 100%;
    }
    .owl-carousel .owl-next{
        left: 15px;
    }
    .owl-carousel .owl-prev{
        right: 15px;
    }
    .owl-carousel .owl-prev i, .owl-carousel .owl-next i{
        color: #fff;
    }
    .owl-carousel .owl-prev, .owl-carousel .owl-next{
        border-color: #fff;
    }
    .search-results .pagination .page-link{
        width: max-content;
    }
    .mr-100 {
        margin-right: 0;
        height: unset !important;

    }

    .main-post-content {
        max-width: 100%;

    }

    .main-video {
        margin-right: 0;
        flex-flow: column-reverse;
        background: transparent !important;
        border: none;


    }

    .small-video {
        margin-bottom: 20px;
    }

    .footer .text-center {
        flex-flow: column;
    }

    .navbar-nav .nav-link.active,
    .navbar-nav .show>.nav-link {
        width: max-content;
    }

    .navbar-collapse {
        padding: 20px 0;
    }

    .navbar-toggler-icon {
        color: #FFFFFF;
    }

    .navbar-toggler-icon {

        filter: invert(1);
    }

    .navbar-toggler {
        border-color: #FFFFFF;

    }

    .section-title {
        font-size: 24px;
    }

    .latest-news .col-lg-8>.d-flex {
        flex-flow: column-reverse;

    }

    .main-news-card {
        border-top-right-radius: 12px;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 0;
    }

    .small-news-list {
        margin-top: 60px;
    }

    .owl-nav {
        display: none;
    }

    .videos-section .main-post-content {
        max-height: 100%;
        max-width: 100%;
    }

    .main-thumbnail img {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-right-radius: 12px;
    }

    .col-md-4 .video-thumbnail {
        margin-bottom: 20px;
    }

    .search-results .result-item {
        flex-flow: column;
    }

    .search-results .result-item img {
        width: 100%;
    }
    .prisoner-stats .stat-card{
        height: 100%;
    }
    .prisoner-stats .stat-title{
        line-height: 1.2;
        font-size: 20px;
    }.prisoner-stats .stat-number {
         font-size: 32px;}
}

.article-details {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.author-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.author-name {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
}

.article-category {
    font-size: 14px;
    color: var(--muted-text-color);
}


.stories-slider-vedios .card-img {
    position: relative;
    overflow: hidden;
}

.stories-slider-vedios .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stories-slider-vedios .card-img::after {
    content: "\f144"; /* FontAwesome icon for video */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.9); /* White color with some transparency */
    font-size: 2.5rem;
    background-color: rgba(0, 0, 0, 0.5); /* Add a dark semi-transparent background */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, color 0.3s ease;
}

.stories-slider-vedios .card-img:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
    color: rgba(255, 0, 0, 0.9); /* Change to red on hover */
}

/* ════════════════════════════════════════════════════════════════════════
   ALAHED — POLISH LAYER
   ────────────────────────────────────────────────────────────────────────
   Everything above this comment is the original site CSS, kept intact so
   no existing component changes layout. The block below is a layered set
   of refinements:

     · Fluid typography (clamp) so H1/H2 scale gracefully on mobile
       instead of overflowing the viewport at 64px.
     · Consistent section rhythm + container padding at all viewport
       widths.
     · Universal card hover lift + shadow so every card on every page
       reads as interactive at a glance.
     · Image aspect-ratio guards against layout shift on slow connections.
     · Smoother button hover/focus + accessible focus-visible rings.
     · Modern breakpoints (576 / 768 / 992 / 1200) so the previous big
       gap between 1024 and 767 is no longer an awkward zone.

   Each rule is scoped narrowly enough that it won't break specific page
   styling — it complements the existing rules rather than replacing them.
   ════════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

/* ── Fluid type scale ───────────────────────────────────────────────── */
/* Old sizes (h1: 64px, h2: 32px) are too aggressive on a 360-wide phone.
   Use clamp(min, preferred, max) so they shrink to readable sizes on
   small screens and stay impactful on desktop. */
h1, .h1 { font-size: clamp(34px, 4.5vw, 56px) !important; line-height: 1.2 !important; }
h2, .h2 { font-size: clamp(24px, 3vw, 32px)   !important; line-height: 1.3 !important; }
h3, .h3 { font-size: clamp(18px, 2vw, 22px)   !important; line-height: 1.4 !important; }
h4, .h4 { font-size: clamp(16px, 1.5vw, 18px) !important; line-height: 1.5 !important; }

body { font-size: clamp(15px, 1.05vw, 17px); }

/* ── Container side padding — scales with viewport ─────────────────── */
.container, .container-fluid {
    padding-inline: clamp(1rem, 3vw, 2rem);
}

/* ── Section rhythm ─────────────────────────────────────────────────── */
/* The home page uses .py-5 for sections; on small screens that's still
   3rem + 3rem = 96px which is a lot of empty vertical space. Tighten up
   on mobile so above-the-fold content actually shows. */
@media (max-width: 768px) {
    .py-5             { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
    .stories-slider   { margin-block: 1.5rem; }
    .latest-news      { padding-block: 2rem; }
    .section-title    { margin-bottom: 1.75rem !important; }
}

/* ── Universal card polish ─────────────────────────────────────────── */
/* Subtle lift + shadow growth on hover. Wrap-everything selector: any
   .card on any page (all-posts, single-post related, stories-slider)
   now reads as a tappable surface. Cards already inside an <a> still
   work — the hover propagates naturally. */
.card {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.06);
}
.card .card-img-top,
.stories-slider .card-img-top,
.alahed-publications .card-img-top {
    transition: transform .35s ease;
}
.card:hover .card-img-top {
    transform: scale(1.03);
}

/* ── Image aspect-ratio guards (prevents layout shift) ─────────────── */
.stories-slider .card .card-img-top,
.all-posts .card-img-top {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
}
.small-news-card .img-card img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ── Buttons: smoother hover/focus ──────────────────────────────────── */
.btn {
    transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
    border-radius: 999px; /* pill, matches existing search input style */
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-outline-primary { color: var(--secondary-color); border-color: var(--secondary-color); }
.btn-outline-primary:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); color: #fff; }

/* ── Accessible focus rings — visible only with keyboard nav ────────── */
.btn:focus-visible,
a:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
input:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(63,117,83,.15);
}

/* ── Form inputs: consistent rounded look + better focus ────────────── */
.form-control, .form-select {
    border-radius: 999px;
    border-color: #e2dfd9;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 .2rem rgba(63,117,83,.12);
}

/* ── Pagination: bigger touch targets on small screens ─────────────── */
.pagination .page-link {
    border-radius: 8px;
    margin-inline: 2px;
    color: var(--text-color);
    border-color: #e2dfd9;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pagination .page-link:hover {
    background-color: var(--accent-color-light);
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.pagination .page-item.active .page-link {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* ── Filter row: flex-wrap cleanly on mobile ───────────────────────── */
.filter-section {
    row-gap: .65rem;
}
@media (max-width: 768px) {
    .filter-section .col-md-6,
    .filter-section .col-md-2 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ── Navbar: bigger tap targets on mobile + smoother collapse ──────── */
@media (max-width: 992px) {
    .custom-navbar .navbar-collapse {
        margin-top: .75rem;
        padding: 1rem;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,.06);
    }
    .navbar-nav .nav-item .nav-link {
        padding-block: .85rem !important;
        border-bottom: 1px solid rgba(0,0,0,.05);
    }
    .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: 0;
    }
}

/* ── Tag pill (active hashtag banner on /all_posts) ────────────────── */
/* Match the brand instead of bootstrap's default blue. */
.alert-light .badge.bg-primary {
    background-color: var(--secondary-color) !important;
}

/* ── Tag-link hover (set in single-post inline style) — also brand it
   site-wide so any page using this class lights up green. ─────────── */
.tag-link:hover .badge {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

/* ── Responsive grid tweaks ─────────────────────────────────────────── */
@media (max-width: 576px) {
    /* The old layout went straight from col-md-4 to col-12 on phones.
       Add a touch of side padding so the cards don't kiss the screen
       edge. */
    .all-posts .row > [class*="col-"] { padding-inline: .75rem; }

    /* Featured news: stack content above image, cap image height. */
    .latest-news .card-article {
        flex-direction: column !important;
    }
    .main-news-card { width: 100% !important; height: auto; }
    .main-news-card img { aspect-ratio: 16/10; object-fit: cover; }

    /* Stat cards: tighter padding on tiny screens. */
    .prisoner-stats .stat-card { padding: 1rem !important; }
    .prisoner-stats .stat-number { font-size: 28px !important; }

    /* Search input: full width, comfortable height. */
    .filter-section .input-group .form-control {
        height: 44px;
    }
}

/* ── Tablet polish (768-991) — fills the previous gap ──────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .stories-slider .card-img-top { aspect-ratio: 16 / 10; }
    .latest-news .col-lg-8 .main-post-content { padding-inline-end: 1rem; }
}

/* ── Large screens (≥ 1200): roomier container ─────────────────────── */
@media (min-width: 1200px) {
    .container { max-width: 1240px; }
}

/* ── Custom scrollbar (subtle, brand-aware) ────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #faf7f2; }
::-webkit-scrollbar-thumb {
    background: #d7ccc8;
    border-radius: 999px;
    border: 2px solid #faf7f2;
}
::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }

/* ── Footer rhythm on mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
    footer .text-center > * { margin-block: .5rem; }
    footer { padding-block: 2rem !important; }
}

/* ── Small UX helpers ──────────────────────────────────────────────── */
.section-title {
    position: relative;
    display: inline-block;
}
img { max-width: 100%; height: auto; }
a { transition: color .15s ease; }

/* End of polish layer */

/* ════════════════════════════════════════════════════════════════════════
   ALAHED — HEADER & HERO REDESIGN (homepage editorial overhaul)
   ────────────────────────────────────────────────────────────────────────
   Replaces the flat brown nav strip + side-by-side hero with a magazine-
   style two-tier header (utility bar + main nav with backdrop blur on
   scroll) and a dramatic full-bleed featured-story hero. New class
   prefixes (`alahed-*`) so the legacy .custom-navbar and .latest-news
   classes don't conflict — markup that still uses them keeps working.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Header: utility bar + main nav ─────────────────────────────── */
.alahed-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
    transition: box-shadow .25s ease;
}
.alahed-header.is-scrolled {
    box-shadow: 0 4px 18px rgba(0,0,0,.08);
}

/* Top utility strip — date + tagline + social. Tiny dark band. */
.alahed-topbar {
    background: #1f1812;
    color: rgba(255,255,255,.85);
    font-size: 12.5px;
    padding: .55rem 0;
}
.alahed-topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.alahed-topbar .topbar-date {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 500;
    color: rgba(255,255,255,.9);
}
.alahed-topbar .topbar-date i { color: var(--secondary-color); }
.alahed-topbar .topbar-tagline {
    font-style: italic;
    color: rgba(255,255,255,.6);
    font-size: 12px;
}
.alahed-topbar .topbar-social {
    display: flex; gap: .4rem;
}
.alahed-topbar .topbar-social a {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7);
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    transition: all .15s ease;
    font-size: 12px;
}
.alahed-topbar .topbar-social a:hover {
    background: var(--secondary-color);
    color: #fff;
    transform: translateY(-1px);
}

/* Main navbar — clean white with logo, links, search icon. */
.alahed-nav {
    background: #fff;
    padding: .85rem 0;
    position: relative;
}
.alahed-nav-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.alahed-brand {
    display: inline-flex; align-items: center; gap: .65rem;
    text-decoration: none;
    flex-shrink: 0;
}
.alahed-brand-logo {
    height: 60px;
    width: 60px;
    max-width: 60px;
    object-fit: contain;
    /* Dark brand-coloured backplate — the client's logo is white,
       so a strong contrast tile is needed for it to stand out
       against the white navbar. Switching to the primary brown
       (with a deeper diagonal shadow at the bottom-right) gives
       the white silhouette a crisp brand badge to sit on. */
    background: linear-gradient(135deg, var(--primary-color) 0%, #5a4530 100%);
    border-radius: 14px;
    padding: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .15),
        0 4px 12px rgba(63, 45, 28, .25);
    transition: transform .25s ease, box-shadow .25s ease;
}
.alahed-brand:hover .alahed-brand-logo {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 6px 18px rgba(63, 45, 28, .35);
}
.alahed-brand:hover .alahed-brand-logo { transform: scale(1.05); }
.alahed-brand-text {
    /* The <div> wrapping title + subtitle. Stack them vertically
       and align them to the start so the two lines read as one
       cohesive lockup next to the larger logo. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}
.alahed-brand-title {
    font-family: "Aljazeera-Bold", sans-serif;
    font-size: 22px;
    color: var(--primary-color);
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
}
.alahed-brand-subtitle {
    font-size: 11.5px;
    color: var(--muted-text-color);
    letter-spacing: .04em;
    margin-top: 4px;
    white-space: nowrap;
}

.alahed-nav-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: 1;
    justify-content: center;
}
.alahed-nav-item { position: relative; }
.alahed-nav-link {
    display: inline-block;
    padding: .55rem 1rem;
    color: var(--text-color);
    font-family: "Aljazeera-Bold", sans-serif;
    font-size: 15px;
    text-decoration: none;
    border-radius: 8px;
    position: relative;
    transition: color .15s ease, background-color .15s ease;
}
.alahed-nav-link:hover {
    color: var(--primary-color);
    background: rgba(153, 121, 84, .08);
}
.alahed-nav-link.is-active { color: var(--primary-color); }
.alahed-nav-link.is-active::after {
    content: '';
    position: absolute;
    inset-inline: 1rem;
    bottom: -.2rem;
    height: 3px;
    background: var(--primary-color);
    border-radius: 999px;
}

.alahed-nav-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}
.alahed-nav-btn {
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(153, 121, 84, .08);
    color: var(--primary-color);
    border: 0;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    transition: all .15s ease;
}
.alahed-nav-btn:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-1px);
}

/* ── Search modal ────────────────────────────────────────────────────
   Full-screen overlay (was a dropdown panel below the navbar).
   Click the search button → fades in a dark blurred backdrop with
   a centred title + a big pill-shaped search input. ESC, the X
   button, or clicking the dimmed area all close it. */
.alahed-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 12, 6, .55);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 18vh 1.5rem 1.5rem;
    z-index: 9999;
    overflow-y: auto;
}
.alahed-search-overlay.is-open {
    display: flex;
    animation: alahedSearchFade .25s ease;
}
@keyframes alahedSearchFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.alahed-search-overlay > .container {
    max-width: 880px;
    width: 100%;
    text-align: center;
    animation: alahedSearchScale .35s cubic-bezier(.2, .8, .2, 1);
}
@keyframes alahedSearchScale {
    from { opacity: 0; transform: translateY(-12px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Close (X) button — anchored top-end of the overlay. */
.alahed-search-modal-close {
    position: absolute;
    top: 24px;
    inset-inline-end: 24px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
    font-size: 18px;
    z-index: 1;
}
.alahed-search-modal-close:hover {
    background: rgba(255, 255, 255, .25);
    transform: rotate(90deg);
}

/* Title strip above the input. */
.alahed-search-modal-title {
    color: #fff;
    font-family: "Aljazeera-Bold", sans-serif;
    font-size: clamp(22px, 3.2vw, 34px);
    margin: 0 0 .5rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.alahed-search-modal-sub {
    color: rgba(255, 255, 255, .8);
    font-size: clamp(13.5px, 1.2vw, 15.5px);
    margin: 0 0 2rem;
    line-height: 1.7;
}

/* Override the existing .search-form / .search-input / .search-button
   classes when the form is inside the overlay. The form itself becomes
   a big white pill with the input + button sitting inside it. */
.alahed-search-overlay .search-form {
    background: #fff;
    border-radius: 999px;
    padding: 8px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .35),
        0 0 0 1px rgba(255, 255, 255, .15);
    display: flex !important;
    align-items: stretch;
    gap: 6px;
    overflow: hidden;
    transition: box-shadow .2s ease;
    /* The original .search-form (line 272) sets `width: max-content`
       which collapses the modal pill to fit its children, leaving an
       empty white strip on one side. Force full width here. */
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}
/* The Livewire <search-form> renders its <form> inside an unstyled
   wrapping <div>; make sure that div takes full width too so the
   form can stretch out to the modal container. */
.alahed-search-overlay > .container > div:has(> .search-form) {
    width: 100%;
}
.alahed-search-overlay .search-form:focus-within {
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .4),
        0 0 0 3px rgba(153, 121, 84, .35);
}
.alahed-search-overlay .search-form .search-input {
    flex: 1;
    min-width: 0;
    /* The original .search-input has `max-width: 150px` (line 293)
       which caps the input at 150px regardless of flex:1. Override
       here so it actually grows to fill the modal pill. */
    max-width: 100% !important;
    width: 100%;
    border: 0 !important;
    background: transparent !important;
    padding: 1.25rem 1.85rem !important;
    font-size: 20px !important;
    line-height: 1.5;
    color: var(--text-color);
    box-shadow: none !important;
    text-align: start;
    height: auto;
    font-family: "Aljazeera-Regular", system-ui, sans-serif !important;
}
.alahed-search-overlay .search-form .search-input::placeholder {
    color: rgba(0, 0, 0, .35);
}
.alahed-search-overlay .search-form .search-input:focus {
    outline: none;
    box-shadow: none !important;
}
/* Hide the browser's native clear-X on type="search" inputs.
   Chrome/Edge render a tiny blue X to the side of the text which
   collides with our custom .clear-btn — kill it across all
   alahed search inputs (modal + results page). */
.alahed-search-overlay input[type="search"]::-webkit-search-cancel-button,
.alahed-search-overlay input[type="search"]::-webkit-search-decoration,
.alahed-search-bar input[type="search"]::-webkit-search-cancel-button,
.alahed-search-bar input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.alahed-search-overlay input[type="search"],
.alahed-search-bar input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}
.alahed-search-overlay .search-form .search-button {
    background: linear-gradient(135deg, var(--primary-color) 0%, #5a4530 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 1.1rem 2.5rem !important;
    font-size: 17px !important;
    font-weight: 700;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 130px;
    justify-content: center;
}
.alahed-search-overlay .search-form .search-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(153, 121, 84, .35);
}

/* Hint chips below the form — small popular tags, optional. */
.alahed-search-modal-hints {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}
.alahed-search-modal-hints span {
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    margin-inline-end: .25rem;
    align-self: center;
}
.alahed-search-modal-hints a {
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    padding: .35rem .9rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 13.5px;
    transition: all .15s ease;
}
.alahed-search-modal-hints a:hover {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

@media (max-width: 576px) {
    .alahed-search-overlay { padding-top: 12vh; padding-inline: 1rem; }
    .alahed-search-modal-close { top: 16px; inset-inline-end: 16px; width: 40px; height: 40px; }
    .alahed-search-overlay .search-form { flex-wrap: nowrap; padding: 6px; }
    .alahed-search-overlay .search-form .search-input {
        padding: .95rem 1.2rem !important;
        font-size: 16px !important;
    }
    .alahed-search-overlay .search-form .search-button {
        padding: .85rem 1.25rem !important;
        font-size: 14.5px !important;
        min-width: 90px;
    }
}

/* Mobile drawer — full-screen sliding panel from the right edge.
   Anchored via physical `right: 0` (rather than `inset-inline-*`)
   so the same translateX(100%) hide rule works in both LTR and
   RTL. The previous `[dir=rtl]` override flipped only the anchor
   but kept translateX(-100%), which left the drawer ON-SCREEN
   on the homepage in RTL mode — visible without ever clicking
   the burger. Fixed-direction anchoring keeps the math simple. */
.alahed-mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(86vw, 360px);
    background: #fff;
    box-shadow: -8px 0 32px rgba(0,0,0,.12);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 200;
    overflow-y: auto;
    padding: 1.5rem 1.25rem;
}
.alahed-mobile-drawer.is-open { transform: translateX(0); }
.alahed-mobile-drawer .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.alahed-mobile-drawer .drawer-close {
    background: rgba(0,0,0,.05);
    color: var(--text-color);
    border: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.alahed-mobile-drawer .drawer-list {
    list-style: none;
    padding: 0; margin: 0;
}
.alahed-mobile-drawer .drawer-list li { margin: 0; }
.alahed-mobile-drawer .drawer-list a {
    display: block;
    padding: .9rem .25rem;
    color: var(--text-color);
    text-decoration: none;
    font-family: "Aljazeera-Bold", sans-serif;
    font-size: 15.5px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.alahed-mobile-drawer .drawer-list a:hover { color: var(--primary-color); }
.alahed-mobile-drawer .drawer-list a.is-active { color: var(--primary-color); }

.alahed-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 199;
}
.alahed-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 991.98px) {
    .alahed-nav-list { display: none; }
    .alahed-brand-title { font-size: 18px; }
    .alahed-brand-subtitle { font-size: 10.5px; }
    .alahed-brand-logo { height: 46px; width: 46px; max-width: 46px; padding: 6px; border-radius: 12px; }
    .alahed-topbar .topbar-tagline { display: none; }
    /* On mobile/tablet the desktop .alahed-nav-list is display:none,
       which leaves the brand and the nav-actions sitting next to
       each other at the start of the row (right edge in RTL),
       with empty space at the end. Push the actions to the end
       so the burger + search icons sit on the visual left in RTL,
       matching the muscle-memory expectation for nav controls. */
    .alahed-nav-actions { margin-inline-start: auto; }
}

/* Force-hide the mobile drawer and its backdrop on desktop. They're
   position:fixed with high z-index, so without this they'd cover the
   page even though the burger button (.d-lg-none) is hidden — e.g.
   when a user opens the drawer on mobile and then resizes the window
   wider, the drawer stays visible until JS closes it. The CSS rule
   is the safety net; the resize listener in header.blade.php is the
   active path. */
@media (min-width: 992px) {
    .alahed-mobile-drawer,
    .alahed-drawer-backdrop {
        display: none !important;
    }
}

/* ── 2. Hero: magazine-style featured story + sidebar ──────────────── */
.alahed-hero {
    padding: 2.5rem 0 3rem;
    background: linear-gradient(180deg, #fcfaf6 0%, #fff 100%);
}
.alahed-hero .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(63, 117, 83, .12);
    color: var(--secondary-color);
    border-radius: 999px;
    padding: .35rem .85rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* Featured (left, large). 2/3 width on desktop. */
.alahed-featured {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    transition: transform .3s ease, box-shadow .3s ease;
}
.alahed-featured:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
    color: #fff;
}
.alahed-featured__img {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    transition: transform .8s ease;
}
.alahed-featured:hover .alahed-featured__img {
    transform: scale(1.05);
}
.alahed-featured__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.05) 35%,
        rgba(0,0,0,.55) 65%,
        rgba(20,12,6,.92) 100%
    );
}
.alahed-featured__body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 2rem 2rem 2.25rem;
    z-index: 2;
}
.alahed-featured__cat {
    display: inline-block;
    background: var(--secondary-color);
    color: #fff;
    padding: .3rem .85rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: .85rem;
}
.alahed-featured__title {
    font-family: "Aljazeera-Bold", sans-serif;
    font-size: clamp(22px, 3.2vw, 38px);
    line-height: 1.3;
    color: #fff;
    margin: 0 0 .85rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.alahed-featured__excerpt {
    color: rgba(255,255,255,.92);
    font-size: clamp(13.5px, 1.1vw, 16px);
    line-height: 1.75;
    max-width: 720px;
    margin: 0 0 1rem;
    /* clamp to 3 lines so the box doesn't grow weirdly */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.alahed-featured__meta {
    display: flex; align-items: center; gap: 1rem;
    color: rgba(255,255,255,.78);
    font-size: 13px;
}
.alahed-featured__meta .meta-cta {
    margin-inline-start: auto;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13.5px;
    transition: all .2s ease;
    display: inline-flex; align-items: center; gap: .4rem;
}
.alahed-featured:hover .alahed-featured__meta .meta-cta {
    background: var(--secondary-color);
    transform: translateX(4px);
}

/* Sidebar list of latest sub-news. */
.alahed-side-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.alahed-side-title {
    display: flex; align-items: center; gap: .5rem;
    font-family: "Aljazeera-Bold", sans-serif;
    font-size: 16px;
    color: var(--primary-color);
    margin: 0 0 1.25rem;
    padding-bottom: .65rem;
    border-bottom: 2px solid var(--primary-color);
}
.alahed-side-title::before {
    content: '';
    display: inline-block;
    width: 4px; height: 18px;
    background: var(--secondary-color);
    border-radius: 2px;
}
.alahed-side-item {
    display: flex;
    gap: .85rem;
    background: #fff;
    border: 1px solid rgba(153, 121, 84, .12);
    border-radius: 12px;
    padding: .65rem;
    text-decoration: none;
    color: inherit;
    transition: all .2s ease;
}
.alahed-side-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 14px rgba(153, 121, 84, .15);
    transform: translateY(-2px);
    color: inherit;
}
.alahed-side-item__img {
    flex-shrink: 0;
    width: 90px; height: 90px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0ebe3;
}
.alahed-side-item__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.alahed-side-item:hover .alahed-side-item__img img {
    transform: scale(1.08);
}
.alahed-side-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.alahed-side-item__title {
    font-family: "Aljazeera-Bold", sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-color);
    margin: 0 0 .35rem;
    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.alahed-side-item:hover .alahed-side-item__title {
    color: var(--primary-color);
}
.alahed-side-item__date {
    font-size: 11.5px;
    color: var(--muted-text-color);
    display: inline-flex; align-items: center; gap: .3rem;
}

@media (max-width: 991.98px) {
    .alahed-featured { aspect-ratio: 4 / 3; }
    .alahed-featured__body { padding: 1.5rem 1.25rem 1.75rem; }
    .alahed-side-list { margin-top: 1.5rem; }
}
@media (max-width: 576px) {
    .alahed-featured { aspect-ratio: 3 / 4; }
    .alahed-featured__title { font-size: 22px; }
    .alahed-featured__excerpt { -webkit-line-clamp: 2; }
    .alahed-featured__meta .meta-cta { font-size: 12.5px; padding: .45rem .85rem; }
    .alahed-side-item__img { width: 72px; height: 72px; }
}

/* ── 3. Section title ornament — used across the homepage ──────────── */
.section-title.section-title--ornate {
    position: relative;
    display: inline-block;
    padding-inline: 2.25rem;
}
.section-title.section-title--ornate::before,
.section-title.section-title--ornate::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--primary-color));
    transform: translateY(-50%);
}
.section-title.section-title--ornate::before {
    inset-inline-end: 100%;
}
.section-title.section-title--ornate::after {
    inset-inline-start: 100%;
    background: linear-gradient(to left, transparent, var(--primary-color));
}

/* End of header & hero redesign */

/* ════════════════════════════════════════════════════════════════════════
   ALAHED — FOOTER + CONTACT + REPORT-FORM REDESIGN
   ────────────────────────────────────────────────────────────────────────
   New `alahed-*` namespaced classes for the footer, the contact-us
   strip on the homepage, and the long "report a violation" form. Also
   includes a sweep of responsive rules to make sure the rest of the
   site stays clean on every viewport.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Footer ─────────────────────────────────────────────────────── */
.alahed-footer {
    color: rgba(255,255,255,.85);
    background:
        radial-gradient(ellipse at top right, rgba(255,255,255,.04), transparent 60%),
        linear-gradient(180deg, #2a1f15 0%, #1a120c 100%);
    position: relative;
    margin-top: 4rem;
}
.alahed-footer::before {
    /* Top hairline in primary brown so the footer doesn't slam
       against whatever section came before it. */
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        var(--primary-color) 30%,
        var(--primary-color) 70%,
        transparent
    );
}
.alahed-footer-main {
    padding: 4rem 0 2.5rem;
}
.alahed-footer-col h6 {
    color: #fff;
    font-family: "Aljazeera-Bold", sans-serif;
    font-size: 16px;
    letter-spacing: .02em;
    margin-bottom: 1.25rem;
    padding-bottom: .65rem;
    position: relative;
    display: inline-block;
}
.alahed-footer-col h6::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 32px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 999px;
}
.alahed-footer-brand {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.25rem;
}
.alahed-footer-brand img {
    height: 56px;
    width: 56px;
    object-fit: contain;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 8px;
}
.alahed-footer-brand-name {
    font-family: "Aljazeera-Bold", sans-serif;
    font-size: 19px;
    color: #fff;
    line-height: 1.2;
}
.alahed-footer-brand-tag {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
    display: block;
}
.alahed-footer-about {
    color: rgba(255,255,255,.7);
    font-size: 14.5px;
    line-height: 1.95;
    margin-bottom: 1.5rem;
    max-width: 360px;
}
.alahed-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.alahed-footer-list li { margin-bottom: .65rem; }
.alahed-footer-list a {
    color: rgba(255,255,255,.7);
    text-decoration: none;
    font-size: 14.5px;
    transition: color .15s ease, padding .2s ease;
    display: inline-block;
    padding-inline-start: 0;
}
.alahed-footer-list a::before {
    content: '\f053'; /* fa-chevron-left */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 9px;
    margin-inline-end: .4rem;
    color: var(--primary-color);
    opacity: .7;
}
.alahed-footer-list a:hover {
    color: #fff;
    padding-inline-start: 6px;
}
.alahed-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: 1rem;
    color: rgba(255,255,255,.7);
    font-size: 14px;
    line-height: 1.7;
}
.alahed-footer-contact-item i {
    background: rgba(255,255,255,.06);
    color: var(--primary-color);
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}
.alahed-footer-contact-item a {
    color: rgba(255,255,255,.85);
    text-decoration: none;
}
.alahed-footer-contact-item a:hover { color: #fff; }
.alahed-footer-social {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.alahed-footer-social a {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    border-radius: 10px;
    transition: all .2s ease;
}
.alahed-footer-social a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(153, 121, 84, .3);
}
.alahed-footer-social a img {
    width: 18px; height: 18px;
    filter: brightness(0) invert(1);
    object-fit: contain;
}

.alahed-footer-bottom {
    background: rgba(0,0,0,.25);
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
    color: rgba(255,255,255,.55);
}
.alahed-footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.alahed-footer-back-top {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    font-size: 13px;
}
.alahed-footer-back-top:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

/* ── 2. Contact Us strip (homepage) ────────────────────────────────── */
.alahed-contact {
    padding: 4rem 0;
    background:
        radial-gradient(ellipse at bottom left, rgba(63, 117, 83, .06), transparent 55%),
        linear-gradient(135deg, #fcfaf6 0%, #f5efe6 100%);
    position: relative;
    overflow: hidden;
}
.alahed-contact::before {
    content: '';
    position: absolute;
    top: -40px; left: -40px;
    width: 220px; height: 220px;
    background: rgba(63, 117, 83, .08);
    border-radius: 50%;
    pointer-events: none;
}
.alahed-contact::after {
    content: '';
    position: absolute;
    bottom: -60px; right: -60px;
    width: 280px; height: 280px;
    background: rgba(153, 121, 84, .08);
    border-radius: 50%;
    pointer-events: none;
}
.alahed-contact-card {
    background: #fff;
    border-radius: 22px;
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: 0 20px 60px rgba(0,0,0,.08);
    border: 1px solid rgba(153, 121, 84, .1);
    position: relative;
    z-index: 2;
}
.alahed-contact-eyebrow {
    display: inline-block;
    background: rgba(153, 121, 84, .1);
    color: var(--primary-color);
    padding: .35rem 1rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.alahed-contact-heading {
    font-family: "Aljazeera-Bold", sans-serif;
    color: var(--primary-color);
    font-size: clamp(24px, 3vw, 36px);
    margin-bottom: 1rem;
    line-height: 1.3;
}
.alahed-contact-lead {
    color: var(--muted-text-color);
    line-height: 1.95;
    font-size: 15.5px;
    margin-bottom: 2rem;
}
.alahed-contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.alahed-contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    color: var(--text-color);
    font-size: 14.5px;
    line-height: 1.6;
}
.alahed-contact-info-item .icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), #6e5538);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}
.alahed-contact-info-item .label {
    font-size: 12px;
    color: var(--muted-text-color);
    margin-bottom: 2px;
}
.alahed-contact-info-item a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    transition: color .15s ease;
}
.alahed-contact-info-item a:hover { color: var(--primary-color); }

/* Form within the contact card */
.alahed-form-group { margin-bottom: 1.25rem; }
.alahed-form-label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: .45rem;
}
.alahed-form-label .req { color: #c0392b; }
.alahed-form-control {
    display: block;
    width: 100%;
    padding: .75rem 1rem;
    background: #fbf9f5;
    border: 1.5px solid rgba(153, 121, 84, .15);
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-color);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    font-family: inherit;
}
.alahed-form-control:focus {
    outline: none;
    background: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(153, 121, 84, .12);
}
.alahed-form-control::placeholder { color: rgba(0,0,0,.35); }
textarea.alahed-form-control { resize: vertical; min-height: 120px; }
.alahed-form-error {
    display: block;
    color: #c0392b;
    font-size: 12.5px;
    margin-top: .35rem;
}
.alahed-form-success {
    background: rgba(63, 117, 83, .12);
    color: var(--secondary-color);
    border: 1px solid rgba(63, 117, 83, .25);
    border-radius: 12px;
    padding: .85rem 1rem;
    font-size: 14.5px;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.alahed-form-submit {
    background: linear-gradient(135deg, var(--primary-color) 0%, #6e5538 100%);
    color: #fff;
    border: 0;
    padding: .9rem 2.25rem;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: all .2s ease;
    box-shadow: 0 4px 14px rgba(153, 121, 84, .25);
}
.alahed-form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(153, 121, 84, .35);
}
.alahed-form-submit:active { transform: translateY(0); }
.alahed-form-submit[disabled] { opacity: .6; cursor: not-allowed; }

/* ── 3. Report-violation form (send-news page) ─────────────────────── */
.alahed-report {
    padding: clamp(2rem, 5vw, 4rem) 0;
    background: linear-gradient(180deg, #fcfaf6 0%, #fff 100%);
}
.alahed-report-hero {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}
.alahed-report-hero .eyebrow {
    display: inline-block;
    background: rgba(192, 57, 43, .1);
    color: #c0392b;
    padding: .35rem 1rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.alahed-report-hero h1 {
    font-family: "Aljazeera-Bold", sans-serif;
    color: var(--primary-color);
    font-size: clamp(26px, 3.4vw, 38px);
    margin-bottom: .85rem;
}
.alahed-report-hero p {
    color: var(--muted-text-color);
    font-size: 15.5px;
    line-height: 1.95;
    margin: 0;
}

.alahed-report-form {
    background: #fff;
    border-radius: 22px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: 0 8px 32px rgba(0,0,0,.06);
    border: 1px solid rgba(153, 121, 84, .1);
    max-width: 920px;
    margin: 0 auto;
}
.alahed-report-section {
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px dashed rgba(153, 121, 84, .15);
}
.alahed-report-section:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}
.alahed-report-section-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-family: "Aljazeera-Bold", sans-serif;
    color: var(--primary-color);
    font-size: 17px;
    margin-bottom: 1.25rem;
}
.alahed-report-section-title .num {
    background: var(--primary-color);
    color: #fff;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.alahed-radio-group {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.alahed-radio {
    flex: 1;
    min-width: 110px;
    position: relative;
    cursor: pointer;
}
.alahed-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.alahed-radio-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1rem;
    background: #fbf9f5;
    border: 1.5px solid rgba(153, 121, 84, .15);
    border-radius: 12px;
    font-size: 14.5px;
    color: var(--text-color);
    transition: all .15s ease;
}
.alahed-radio:hover .alahed-radio-label {
    border-color: var(--primary-color);
}
.alahed-radio input:checked + .alahed-radio-label {
    background: rgba(153, 121, 84, .1);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 700;
}
.alahed-radio input:checked + .alahed-radio-label::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--primary-color);
}

.alahed-report-submit-row {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(153, 121, 84, .15);
    text-align: center;
}
.alahed-report-privacy {
    font-size: 13px;
    color: var(--muted-text-color);
    margin-top: .85rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* ── 4. Comprehensive responsive sweep ─────────────────────────────── */

/* Phones (≤576) */
@media (max-width: 576px) {
    .alahed-footer-main { padding: 2.75rem 0 1.5rem; }
    .alahed-footer-col { margin-bottom: 1.75rem; }
    .alahed-footer-bottom .container { justify-content: center; text-align: center; }

    .alahed-contact { padding: 2.5rem 0; }
    .alahed-contact-card { border-radius: 16px; }
    .alahed-contact-info-item .icon { width: 36px; height: 36px; font-size: 14px; }

    .alahed-report-form { border-radius: 14px; padding: 1.25rem; }
    .alahed-report-section { padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
    .alahed-radio { min-width: 100%; }

    .alahed-form-submit { width: 100%; justify-content: center; padding: .95rem 1.5rem; }
}

/* Tablet (577-991) */
@media (min-width: 577px) and (max-width: 991.98px) {
    .alahed-footer-main { padding: 3rem 0 2rem; }
    .alahed-footer-col { margin-bottom: 2rem; }
}

/* Generic safety nets — no horizontal scroll regardless of viewport */
html, body { overflow-x: hidden; max-width: 100%; }
img, video { max-width: 100%; height: auto; }
.container { width: 100%; }

/* End of footer + contact + report polish */

/* ════════════════════════════════════════════════════════════════════════
   ALAHED — SINGLE-POST (article-detail) REDESIGN
   ────────────────────────────────────────────────────────────────────────
   Magazine-style article page. Full-bleed cover image with brand-coloured
   overlay strip carrying the breadcrumb / category, then a centred big
   serif title, byline strip with author + date + read-time, article body
   with comfortable measure (~70ch), sticky sidebar of latest reports,
   share + tags strip, and a similar-news card grid at the bottom.
   ════════════════════════════════════════════════════════════════════════ */

.alahed-article {
    background: #fff;
}

/* ── Cover hero ──────────────────────────────────────────────────── */
.alahed-article-cover {
    position: relative;
    height: clamp(300px, 50vw, 540px);
    background-position: center;
    background-size: cover;
    background-color: #1a120c;
    overflow: hidden;
}
.alahed-article-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.35) 50%,
        rgba(20,12,6,.9) 100%
    );
}
.alahed-article-cover-meta {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 2rem 0 2.5rem;
    color: #fff;
    z-index: 2;
}
.alahed-article-cover-meta .container { position: relative; }
.alahed-article-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 13px;
    color: rgba(255,255,255,.8);
    margin-bottom: .75rem;
}
.alahed-article-breadcrumb a {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    transition: color .15s ease;
}
.alahed-article-breadcrumb a:hover { color: #fff; }
.alahed-article-breadcrumb .sep {
    color: rgba(255,255,255,.5);
    font-size: 10px;
}
.alahed-article-cat {
    display: inline-block;
    background: var(--secondary-color);
    color: #fff;
    padding: .35rem 1rem;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 1rem;
}
.alahed-article-headline {
    font-family: "Aljazeera-Bold", sans-serif;
    font-size: clamp(24px, 4vw, 44px);
    line-height: 1.3;
    color: #fff;
    margin: 0 0 1rem;
    max-width: 920px;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.alahed-article-cover-foot {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    color: rgba(255,255,255,.75);
    font-size: 14px;
}
.alahed-article-cover-foot span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.alahed-article-cover-foot i { color: var(--primary-color); opacity: .9; }

/* ── Body wrapper — pulls content slightly up over the cover so the
   border-radius reveal feels intentional. ─────────────────────── */
.alahed-article-body-wrap {
    background: #fff;
    margin-top: -32px;
    border-radius: 24px 24px 0 0;
    position: relative;
    z-index: 3;
    padding: 3rem 0 4rem;
    box-shadow: 0 -16px 40px rgba(0,0,0,.04);
}

/* ── Author byline strip ─────────────────────────────────────────── */
.alahed-article-byline {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--background-color);
    border: 1px solid rgba(153, 121, 84, .12);
    border-radius: 14px;
    margin-bottom: 2rem;
}
.alahed-article-byline-img {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    flex-shrink: 0;
}
.alahed-article-byline-info { flex: 1; min-width: 0; }
.alahed-article-byline-name {
    font-family: "Aljazeera-Bold", sans-serif;
    color: var(--primary-color);
    font-size: 15.5px;
    margin: 0;
}
.alahed-article-byline-role {
    color: var(--muted-text-color);
    font-size: 12.5px;
    margin: 2px 0 0;
}
.alahed-article-byline-tools {
    display: flex;
    gap: .35rem;
    flex-shrink: 0;
}
.alahed-article-byline-tools button {
    width: 36px; height: 36px;
    background: #fff;
    border: 1px solid rgba(153, 121, 84, .15);
    color: var(--primary-color);
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .15s ease;
    font-size: 13px;
}
.alahed-article-byline-tools button:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* ── Article content (the long-form prose) ───────────────────────── */
/* Body uses Cairo (Google Fonts, weights 400/500/600/700) for a
   clean, modern Arabic reading face. Cairo handles long paragraphs
   better than Aljazeera-Regular, which is heavier and tuned for
   short headline-length runs.

   Force-applied: CKEditor stamps inline `style="font-family:..."`
   on the spans/p tags it generates, which would otherwise beat any
   class-level rule via specificity. The `* !important` pattern
   here defeats inline styles since both carry !important and
   .alahed-article-content * (specificity 0,0,1,0) is matched on
   every descendant. Headings (h1-h6) are then re-overridden to
   Aljazeera-Bold a few lines down — they sit later in source
   order with higher specificity (0,0,1,1), so they win on the
   cascade. */
.alahed-article-content,
.alahed-article-content * {
    font-family: 'Cairo', "Aljazeera-Regular", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", Arial, sans-serif !important;
}
.alahed-article-content {
    font-size: 17.5px;
    line-height: 1.95;
    color: #2a2a2a;
    font-weight: 400;
    letter-spacing: 0;
}
/* Body-text font-size also forced — CKEditor's FontSize button
   leaves inline `font-size:24px` etc. that we don't want shipping
   to the public page. Headings keep their own size scale below. */
.alahed-article-content p,
.alahed-article-content li,
.alahed-article-content span,
.alahed-article-content font,
.alahed-article-content div,
.alahed-article-content strong,
.alahed-article-content b,
.alahed-article-content em,
.alahed-article-content i,
.alahed-article-content u,
.alahed-article-content s,
.alahed-article-content a {
    font-size: 17.5px !important;
    line-height: 1.95 !important;
}
.alahed-article-content > * + * { margin-top: 1.15em; }
.alahed-article-content p {
    margin: 0 0 1.15em;
}
/* Cairo's bold (700) for emphasised inline runs. */
.alahed-article-content strong,
.alahed-article-content b {
    font-weight: 700 !important;
    color: #1a1a1a;
}
/* Headings inside an article keep the brand serif voice. We have to
   re-state font-family with !important AND include the `h# *`
   variants because the universal `.alahed-article-content *` rule
   above with !important would otherwise beat a plain heading rule.
   `.alahed-article-content h2 *` (0,0,1,1) > `.alahed-article-content *`
   (0,0,1,0), so the more specific selector wins on the cascade. */
.alahed-article-content h1, .alahed-article-content h1 *,
.alahed-article-content h2, .alahed-article-content h2 *,
.alahed-article-content h3, .alahed-article-content h3 *,
.alahed-article-content h4, .alahed-article-content h4 *,
.alahed-article-content h5, .alahed-article-content h5 *,
.alahed-article-content h6, .alahed-article-content h6 * {
    font-family: "Aljazeera-Bold", sans-serif !important;
    color: var(--primary-color);
}
.alahed-article-content h2 { font-size: 1.55em !important; line-height: 1.4 !important; margin: 2em 0 .65em !important; }
.alahed-article-content h3 { font-size: 1.3em  !important; line-height: 1.4 !important; margin: 1.85em 0 .55em !important; }
.alahed-article-content h4 { font-size: 1.15em !important; line-height: 1.45 !important; margin: 1.7em 0 .5em !important; }
.alahed-article-content h5,
.alahed-article-content h6 { font-size: 1em !important; line-height: 1.5 !important; margin: 1.5em 0 .5em !important; }
.alahed-article-content h2 *, .alahed-article-content h3 *,
.alahed-article-content h4 *, .alahed-article-content h5 *,
.alahed-article-content h6 * { font-size: inherit !important; line-height: inherit !important; }
.alahed-article-content blockquote {
    margin: 2em 0;
    padding: 1.25rem 1.5rem 1.25rem 2.5rem;
    background: linear-gradient(135deg, #fcfaf6, #f5efe6);
    border-inline-start: 4px solid var(--primary-color);
    border-radius: 0 12px 12px 0;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    color: #1a1a1a;
    font-size: 1.1em;
    line-height: 1.85;
    position: relative;
}
.alahed-article-content blockquote::before {
    content: "\201C";
    position: absolute;
    inset-inline-start: .65rem;
    top: .25rem;
    font-size: 3rem;
    line-height: 1;
    color: var(--primary-color);
    opacity: .25;
    font-family: Georgia, serif;
}
.alahed-article-content img,
.alahed-article-content figure img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 1.5em auto;
    display: block;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.alahed-article-content figcaption {
    text-align: center;
    color: var(--muted-text-color);
    font-size: 13.5px;
    font-style: italic;
    margin-top: -.5em;
    margin-bottom: 1.5em;
}
.alahed-article-content a {
    color: var(--secondary-color);
    text-decoration: none;
    border-bottom: 1px solid rgba(63, 117, 83, .25);
    transition: border-color .15s ease, background-color .15s ease;
    padding-bottom: 1px;
}
.alahed-article-content a:hover {
    background: rgba(63, 117, 83, .06);
    border-bottom-color: var(--secondary-color);
}
.alahed-article-content ul,
.alahed-article-content ol {
    padding-inline-start: 1.5em;
    margin: 1.15em 0;
}
.alahed-article-content li { margin-bottom: .5em; }

/* Drop-cap removed per client preference: every paragraph starts
   at the same size, no oversized first letter. */

/* ── Tags strip below content ───────────────────────────────────── */
.alahed-article-tags {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed rgba(153, 121, 84, .25);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
}
.alahed-article-tags-label {
    font-family: "Aljazeera-Bold", sans-serif;
    color: var(--muted-text-color);
    font-size: 13.5px;
    margin-inline-end: .25rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* ── Sticky sidebar ─────────────────────────────────────────────── */
.alahed-article-sidebar {
    position: sticky;
    top: 110px;
}
.alahed-side-card {
    background: #fff;
    border: 1px solid rgba(153, 121, 84, .15);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    margin-bottom: 1.5rem;
}
.alahed-side-card h4 {
    display: flex; align-items: center; gap: .5rem;
    font-family: "Aljazeera-Bold", sans-serif;
    color: var(--primary-color);
    font-size: 16px;
    margin: 0 0 1rem;
    padding-bottom: .65rem;
    border-bottom: 2px solid var(--primary-color);
}
.alahed-side-card h4::before {
    content: '';
    display: inline-block;
    width: 4px; height: 18px;
    background: var(--secondary-color);
    border-radius: 2px;
}

/* ── Similar news grid ──────────────────────────────────────────── */
.alahed-article-similar {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(153, 121, 84, .12);
}
.alahed-article-similar h3 {
    text-align: center;
    color: var(--primary-color);
    font-family: "Aljazeera-Bold", sans-serif;
    margin-bottom: 2rem;
    font-size: clamp(20px, 2.5vw, 28px);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .alahed-article-sidebar { position: static; margin-top: 2rem; }
}
@media (max-width: 768px) {
    .alahed-article-cover { height: clamp(240px, 60vw, 380px); }
    .alahed-article-body-wrap { margin-top: -16px; border-radius: 16px 16px 0 0; padding: 2rem 0 3rem; }
    .alahed-article-content { font-size: 16px; line-height: 1.95; }
    .alahed-article-byline { padding: .85rem 1rem; gap: .75rem; }
    .alahed-article-byline-img { width: 44px; height: 44px; }
}

/* ── Share-post component override (only inside the article page) ──
   The shared <x-layouts.main.alahed.share-post> partial spits out a
   loose .social-share section with naked <a> icons and a misaligned
   url-input + copy-button row. We restyle it (no markup change, so
   other sites that import the same component aren't affected) into
   a single beige tile with a chip row for the platforms and a clean
   pill-shaped url + copy strip below. */
.alahed-article .social-share {
    background: var(--background-color);
    border: 1px solid rgba(153, 121, 84, .15);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    margin-top: 2rem !important;
    margin-bottom: 0 !important;
    text-align: start;
}
.alahed-article .social-share h5 {
    font-family: "Aljazeera-Bold", sans-serif;
    color: var(--primary-color);
    font-size: 16px;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.alahed-article .social-share h5::before {
    content: '\f1e0';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--primary-color);
    font-size: 14px;
}
.alahed-article .social-share > a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: #fff;
    color: var(--primary-color);
    border: 1px solid rgba(153, 121, 84, .15);
    border-radius: 12px;
    text-decoration: none;
    margin-inline-end: .5rem;
    margin-bottom: .65rem;
    font-size: 16px;
    transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.alahed-article .social-share > a:hover {
    transform: translateY(-2px);
    color: #fff;
    background: var(--primary-color);
    border-color: var(--primary-color);
}
/* Platform-tinted hovers — light up in the brand colour of each
   network so the share row feels alive and on-platform. */
.alahed-article .social-share > a:has(.fa-facebook-f):hover { background: #1877f2; border-color: #1877f2; }
.alahed-article .social-share > a:has(.fa-twitter):hover    { background: #1da1f2; border-color: #1da1f2; }
.alahed-article .social-share > a:has(.fa-telegram):hover   { background: #0088cc; border-color: #0088cc; }
.alahed-article .social-share > a:has(.fa-whatsapp):hover   { background: #25d366; border-color: #25d366; }

/* The "copy URL" row — a single pill bar with the input on one side
   and the copy button on the other. Override the inline styles the
   shared component sets via attribute selectors. */
.alahed-article .social-share > .d-flex {
    margin: .65rem 0 0 !important;
    background: #fff;
    border: 1px solid rgba(153, 121, 84, .15);
    border-radius: 999px;
    padding: 4px;
    max-width: 520px;
    justify-content: stretch !important;
}
.alahed-article .social-share > .d-flex input {
    flex: 1;
    max-width: 100% !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    padding: .55rem 1rem !important;
    color: var(--text-color);
    text-align: start !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    direction: ltr;
}
.alahed-article .social-share > .d-flex input:focus {
    outline: none;
    box-shadow: none !important;
}
.alahed-article .social-share > .d-flex .btn {
    background: var(--primary-color) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: .55rem 1.1rem !important;
    flex-shrink: 0;
    font-size: 14px !important;
    transition: background-color .15s ease, transform .15s ease;
}
.alahed-article .social-share > .d-flex .btn:hover {
    background: #5a4530 !important;
    transform: translateY(-1px);
}

/* End of single-post redesign */

/* ════════════════════════════════════════════════════════════════════════
   ALAHED — SEARCH RESULTS PAGE
   ────────────────────────────────────────────────────────────────────────
   Brand-coloured hero strip carrying the query, an inline search bar
   pulled up over the hero (search-as-you-type via Livewire), and
   horizontal result cards. Empty state with quick-section chips.
   ════════════════════════════════════════════════════════════════════════ */
.alahed-search-page { background: #fcfaf6; }

.alahed-search-hero {
    background:
        radial-gradient(ellipse at top right, rgba(255,255,255,.06), transparent 60%),
        linear-gradient(135deg, var(--primary-color) 0%, #5a4530 100%);
    color: #fff;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 calc(clamp(2.5rem, 6vw, 4.5rem) + 2rem);
    text-align: center;
    position: relative;
}
.alahed-search-hero-eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    padding: .35rem 1rem;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: .85rem;
    letter-spacing: .08em;
    backdrop-filter: blur(2px);
}
.alahed-search-hero h1 {
    color: #fff;
    font-family: "Aljazeera-Bold", sans-serif;
    font-size: clamp(24px, 3.5vw, 38px);
    line-height: 1.4;
    margin: 0 0 .65rem;
    word-break: break-word;
}
.alahed-search-hero h1 strong {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 0 .5em;
    border-radius: 10px;
    font-weight: 700;
    margin: 0 .25em;
}
.alahed-search-hero-count {
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
    margin: 0;
}
.alahed-search-hero-count strong {
    color: #fff;
    font-weight: 700;
}

.alahed-search-body {
    padding-bottom: 4rem;
}

/* Inline search bar — pulls up over the hero by margin-top: -3rem
   so it visually anchors both sections. */
.alahed-search-bar {
    background: #fff;
    border: 2px solid rgba(153, 121, 84, .15);
    border-radius: 999px;
    padding: 6px;
    max-width: 720px;
    margin: -2rem auto 2.5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
    transition: border-color .15s ease, box-shadow .2s ease;
    position: relative;
    z-index: 2;
}
.alahed-search-bar:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 12px 36px rgba(153, 121, 84, .25);
}
.alahed-search-bar > .icon {
    color: var(--primary-color);
    margin-inline-start: 1rem;
    font-size: 18px;
    flex-shrink: 0;
}
.alahed-search-bar input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    padding: .9rem .5rem;
    font-size: 17px;
    color: var(--text-color);
    background: transparent;
    font-family: "Aljazeera-Regular", system-ui, sans-serif;
    box-shadow: none !important;
}
.alahed-search-bar input::placeholder {
    color: rgba(0, 0, 0, .35);
}
.alahed-search-bar input:focus { outline: none; }
.alahed-search-bar .clear-btn {
    background: rgba(153, 121, 84, .1);
    color: var(--primary-color);
    border: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    margin-inline-end: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
    flex-shrink: 0;
}
.alahed-search-bar .clear-btn:hover {
    background: var(--primary-color);
    color: #fff;
}
.alahed-search-bar .submit-btn {
    background: linear-gradient(135deg, var(--primary-color), #5a4530);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .8rem 1.65rem;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .15s ease, box-shadow .15s ease;
}
.alahed-search-bar .submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(153, 121, 84, .3);
}

/* Result cards — horizontal layout (image right in RTL, body left). */
.alahed-search-results {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.alahed-search-result {
    background: #fff;
    border: 1px solid rgba(153, 121, 84, .12);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.alahed-search-result:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .06);
    border-color: rgba(153, 121, 84, .25);
}
.alahed-search-result-img {
    flex-shrink: 0;
    width: 200px;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: block;
}
.alahed-search-result-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.alahed-search-result:hover .alahed-search-result-img img {
    transform: scale(1.06);
}
.alahed-search-result-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.alahed-search-result-body h3 {
    margin: 0 0 .5rem;
    font-size: 19px;
    line-height: 1.45;
    font-family: "Aljazeera-Bold", sans-serif;
}
.alahed-search-result-body h3 a {
    color: var(--text-color);
    text-decoration: none;
    transition: color .15s ease;
}
.alahed-search-result-body h3 a:hover { color: var(--primary-color); }
.alahed-search-result-body p {
    color: var(--muted-text-color);
    line-height: 1.75;
    margin: 0 0 1rem;
    font-size: 14.5px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.alahed-search-result-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    flex-wrap: wrap;
}
.alahed-search-result-meta .date-post {
    color: var(--muted-text-color);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.alahed-search-result-meta .read-btn {
    background: rgba(153, 121, 84, .1);
    color: var(--primary-color);
    padding: .55rem 1.2rem;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.alahed-search-result-meta .read-btn:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateX(-2px);
}

/* Empty state — visible when there are no results, OR when the query
   is empty. Different copy and CTA for each. */
.alahed-search-empty {
    text-align: center;
    padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
    background: #fff;
    border: 1px dashed rgba(153, 121, 84, .3);
    border-radius: 18px;
}
.alahed-search-empty .icon {
    font-size: 3.5rem;
    color: rgba(153, 121, 84, .35);
    margin-bottom: 1rem;
}
.alahed-search-empty h3 {
    color: var(--primary-color);
    font-family: "Aljazeera-Bold", sans-serif;
    font-size: clamp(20px, 2.5vw, 26px);
    margin: 0 0 .5rem;
}
.alahed-search-empty p {
    color: var(--muted-text-color);
    margin: 0 0 1.5rem;
    line-height: 1.85;
}
.alahed-search-empty-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
}
.alahed-search-empty-suggestions a {
    background: rgba(153, 121, 84, .1);
    color: var(--primary-color);
    padding: .5rem 1.15rem;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(153, 121, 84, .15);
    transition: all .15s ease;
}
.alahed-search-empty-suggestions a:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .alahed-search-result {
        flex-direction: column;
        gap: .85rem;
        padding: .85rem;
    }
    .alahed-search-result-img {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .alahed-search-bar { margin-top: -1.5rem; padding: 4px; }
    .alahed-search-bar input { font-size: 16px; padding: .75rem .35rem; }
    .alahed-search-bar .submit-btn { padding: .65rem 1.2rem; font-size: 13.5px; }
    .alahed-search-bar > .icon { margin-inline-start: .65rem; font-size: 16px; }
}
/* End of search-results page */