/**
 * ACBAR public site — responsive overrides
 * Loaded after theme CSS. Desktop layout unchanged; mobile/tablet fixes only.
 */

/* -------------------------------------------------------------------------- */
/* Global: prevent horizontal scroll                                            */
/* -------------------------------------------------------------------------- */
html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
    max-width: 100%;
}

.main-content,
#wrapper,
section,
article {
    max-width: 100%;
}

/* Fluid media inside content areas (not icons in nav) */
.main-content img:not(.floating-social__link img):not(.acbar-nav__brand img),
.post-description img,
.post_description img,
.entry-content img,
.job-details-card img,
.blog-posts img.img-responsive,
.blog-posts img.img-fullwidth,
#footer img {
    max-width: 100%;
    height: auto;
}

/* Header top: see acbar-header-top.css */

/* Site navigation: see acbar-navigation.css */
@media (max-width: 1023px) {
    #header .header-nav {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/* Top alert bar */
@media (max-width: 767px) {
    .alert-top-header-mobile {
        font-size: 12px;
        line-height: 1.4;
        padding: 6px 10px;
    }
}

/* Search overlay */
@media (max-width: 767px) {
    .search-overlay-inner {
        padding: 12px;
    }

    .search-overlay-form .input-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .search-overlay-form .input-group-addon,
    .search-overlay-form .form-control,
    .search-overlay-form .input-group-btn {
        width: 100%;
        display: block;
        border-radius: 4px;
    }

    .search-overlay-form .input-group-btn .btn {
        width: 100%;
        margin-top: 8px;
    }
}

/* Floating social — RTL mirror */
[dir="rtl"] .floating-social {
    right: auto;
    left: 0;
}

[dir="rtl"] .floating-social__pill {
    border-right: 1px solid rgba(0, 0, 0, 0.16);
    border-left: 0;
    border-radius: 0 12px 12px 0;
}

@media (max-width: 767px) {
    .floating-social {
        display: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Home: Revolution Slider                                                      */
/* -------------------------------------------------------------------------- */
.rev_slider_wrapper,
.rev_slider,
#home .rev_slider_wrapper {
    max-width: 100%;
    overflow: hidden;
}

.rev_slider .tp-caption,
.rev_slider [class*="tp-caption"] {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box;
}

.rev_slider [style*="width: 1000px"],
.rev_slider [style*="width:1000px"] {
    max-width: calc(100vw - 32px) !important;
    width: 100% !important;
}

@media (max-width: 767px) {
    .rev_slider .tp-caption {
        font-size: 14px !important;
        line-height: 1.35 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Home: video / carousel thumbnails */
.video-thumbnail,
.video-thumbnail img,
.owl-carousel .item img[style*="247px"],
.owl-carousel .item > div[style*="247px"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 140px;
    object-fit: cover;
}

.owl-carousel .item {
    max-width: 100%;
}

@media (max-width: 991px) {
    .what-we-do__grid,
    .what-we-do .row {
        row-gap: 16px;
    }

    .what-we-do__title {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .member-stat,
    .vm-card {
        margin-bottom: 16px;
    }
}

/* -------------------------------------------------------------------------- */
/* Jobs module (extends jobs.css)                                               */
/* -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .jobs-toolbar {
        flex-wrap: wrap;
    }

    .jobs-toolbar__left,
    .jobs-toolbar__right {
        flex-wrap: wrap;
        width: 100%;
    }

    .jobs-toolbar__left form,
    .acbarstatutes-filters {
        flex-wrap: wrap !important;
        white-space: normal !important;
        width: 100%;
        gap: 8px;
    }

    .jobs-toolbar__left .jobs-filter__control,
    .acbarstatutes-filters .jobs-filter__control {
        flex: 1 1 calc(50% - 8px);
        min-width: 0 !important;
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .jobs-toolbar__left .jobs-filter__control,
    .acbarstatutes-filters .jobs-filter__control {
        flex: 1 1 100%;
    }

    .jobs-hero__title {
        font-size: 24px;
    }

    .jobs-hero__subtitle {
        font-size: 14px;
    }
}

/* Publication / filter rows (shared class) */
.acbarstatutes-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    max-width: 100%;
}

.acbarstatutes-filters .jobs-filter__control {
    min-width: 0 !important;
    max-width: 100%;
}

/* Job details */
@media (max-width: 991px) {
    .job-details-card {
        padding: 14px 16px;
    }

    .job-details-body .col-md-8,
    .job-details-body .col-md-4 {
        width: 100%;
        float: none;
    }

    .job-details-head__title {
        font-size: 24px;
    }

    .job-details-actions {
        flex-wrap: wrap;
    }

    .job-action-btn {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* -------------------------------------------------------------------------- */
/* Content: posts, pages, publications                                          */
/* -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .col-md-9.pull-right.flip,
    .col-md-3.pull-left.flip,
    .pull-right.flip,
    .pull-left.flip {
        float: none !important;
        width: 100%;
    }

    .blog-posts .col-md-9,
    .blog-posts .col-md-3 {
        width: 100%;
        float: none;
    }

    .sidebar {
        margin-top: 24px;
    }
}

.post-description,
.post_description,
.entry-content {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.post-description table,
.post_description table,
.entry-content table {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.post-description iframe,
.post_description iframe,
.entry-content iframe,
.job-details-card__text iframe {
    max-width: 100%;
}

.job-details-card__text ul,
.job-details-card__text ol {
    list-style-position: outside !important;
    padding-left: 2em !important;
    margin: 0 0 1em !important;
}

.job-details-card__text ul {
    list-style-type: disc !important;
}

.job-details-card__text ol {
    list-style-type: decimal !important;
}

[dir="rtl"] .job-details-card__text ul,
[dir="rtl"] .job-details-card__text ol {
    padding-left: 0 !important;
    padding-right: 2em !important;
}

/* -------------------------------------------------------------------------- */
/* Tables                                                                       */
/* -------------------------------------------------------------------------- */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

.table-responsive > table {
    min-width: 480px;
}

@media (max-width: 767px) {
    .table-responsive > table {
        font-size: 13px;
    }

    .table-responsive th,
    .table-responsive td {
        padding: 8px 10px;
        white-space: normal;
    }
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                       */
/* -------------------------------------------------------------------------- */
#footer .container-fluid,
#footer .row {
    max-width: 100%;
}

@media (max-width: 991px) {
    #footer .col-md-3,
    #footer .col-sm-6,
    #footer .col-xs-6,
    #footer .col-xs-12 {
        width: 100%;
        float: none;
        margin-bottom: 24px;
    }

    #footer .col-md-1 {
        display: none;
    }

    #footer .widget {
        text-align: center;
    }

    #footer .list-inline li {
        display: block;
        margin-bottom: 8px;
    }
}

@media (max-width: 767px) {
    #footer {
        padding-top: 40px !important;
    }

    #footer .widget-title {
        font-size: 16px;
    }

    #footer img.mt-10.mb-20 {
        max-width: 200px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Footer widget.dark — contrast on small screens */
#footer .widget.dark,
#footer .widget.dark a {
    color: #c0c0c0;
}

#footer .widget.dark .footer-link-color {
    color: #e8e8e8;
}

/* -------------------------------------------------------------------------- */
/* Auth & forms                                                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .main-content .form-control,
    .main-content .btn {
        font-size: 14px;
    }

    .main-content .btn-lg {
        font-size: 15px;
        padding: 10px 16px;
    }
}

/* -------------------------------------------------------------------------- */
/* RTL (Dari / Pashto)                                                          */
/* -------------------------------------------------------------------------- */
[dir="rtl"] .jobs-searchbar__icon {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .jobs-filter__icon {
    left: auto;
    right: 12px;
}

[dir="rtl"] .jobs-filter__control.form-control {
    padding-left: 12px;
    padding-right: 34px;
}

[dir="rtl"] .job-card__accent {
    left: auto;
    right: 0;
}

[dir="rtl"] .post-description ul,
[dir="rtl"] .post_description ul,
[dir="rtl"] .post-description ol,
[dir="rtl"] .post_description ol {
    padding-left: 0;
    padding-right: 2em;
}

[dir="rtl"] .rev_slider.rev_slider_default {
    direction: rtl;
}

/* -------------------------------------------------------------------------- */
/* Utility: touch targets & spacing                                             */
/* -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .mt-30,
    .pt-30 {
        margin-top: 20px !important;
        padding-top: 20px !important;
    }

    .mb-30,
    .pb-30 {
        margin-bottom: 20px !important;
        padding-bottom: 20px !important;
    }

    h1, .h1 {
        font-size: 26px;
    }

    h2, .h2 {
        font-size: 22px;
    }
}

/* Owl carousel nav — keep inside viewport on mobile */
@media (max-width: 767px) {
    .owl-controls .owl-prev {
        left: 4px !important;
    }

    .owl-controls .owl-next {
        right: 4px !important;
    }
}
