/*
 * Greyscale site theme, after Ajker Patrika: black and grey type on white,
 * thin grey rules, no brand colour. Photos, ads and the logo keep their
 * colour; everything the theme paints blue, red or orange is set in shades
 * of grey here.
 *
 * Loaded last (after amaderkatha.css). Remove its <link> in
 * front/includes/css.blade.php to bring the theme's colours back.
 * Some rules need !important because the theme's own rules use it.
 */

/* ------------------------------------------------------------ top bar */

.header {
    background: #fff;
    border-bottom: 1px solid #eee;
}

.header .date i {
    color: #666;
}

.header-social a {
    background: #fff;
    border: 1px solid #ccc;
    color: #333;
}

/* Social icons keep their networks' own colours, like the share buttons:
   filled circles with a white icon. The colour lives in --ak-brand so the
   hover rule can restate it - the theme's own hover sets the background to
   transparent, which would leave a white icon on white. */
.header-social a[class^="ak-social--"],
.header-social a[class^="ak-social--"]:hover {
    background: var(--ak-brand);
    border-color: transparent;
    color: #fff;
}

.header-social a[class^="ak-social--"]:hover {
    filter: brightness(.88);
}

.header-social .ak-social--facebook { --ak-brand: #1877f2; }
.header-social .ak-social--twitter { --ak-brand: #1da1f2; }
.header-social .ak-social--linkedin { --ak-brand: #0a66c2; }
.header-social .ak-social--youtube { --ak-brand: #ff0000; }
.header-social .ak-social--tiktok { --ak-brand: #010101; }
.header-social .ak-social--instagram {
    --ak-brand: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.logo .ak-wordmark,
.mobile_logo .ak-wordmark {
    color: #111;
}

/* --------------------------------------------------------------- menu */

/* White bar between thin rules, black links (the plugin's "dark" theme
   would otherwise force white text on blue). */
.menu-section {
    background: #fff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.stellarnav.dark a,
.stellarnav.dark li a,
.stellarnav.dark .current-menu-item a {
    color: #111;
}

.stellarnav.dark li a:hover {
    background: #f4f4f4;
    color: #000;
}

/* Current page: a black underline instead of a filled blue tab. */
.stellarnav.dark .current-menu-item {
    background: transparent;
    box-shadow: inset 0 -3px 0 #111;
}

.stellarnav.dark .current-menu-item > a {
    font-weight: 700;
}

.stellarnav.dark ul ul {
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}

.stellarnav li.has-sub > a:after {
    border-top-color: #111;
}

.stellarnav li li.has-sub > a:after {
    border-left-color: #111;
}

.stellarnav li.drop-left li.has-sub > a:after {
    border-right-color: #111;
}

/* "আরো" (all sections) toggle, its hamburger lines, and the search icon. */
.menuIcon,
.searchIcon {
    color: #111;
}

.line {
    background: #111;
}

.menu-item-two ul li a:hover {
    color: #666;
}

.searchBar input[type="text"] {
    border-color: #333;
}

.searchBar button,
.remove {
    background: #222;
    border-color: #555;
}

/* Phones: the plugin's slide-out menu. */
.stellarnav .menu-toggle span.bars span,
.stellarnav.dark .menu-toggle span.bars span {
    background: #111 !important;
}

.stellarnav.mobile li a,
.stellarnav.mobile.right .close-menu,
.stellarnav.mobile.left .close-menu,
.stellarnav .menu-toggle {
    color: #111 !important;
}

.stellarnav.mobile.dark ul {
    background: #fff !important;
}

.stellarnav.mobile.dark ul ul {
    background: #f7f7f7;
}

.stellarnav.dark li a:hover {
    color: #000 !important;
}

.stellarnav.dark a.dd-toggle .icon-plus:before,
.stellarnav.dark a.dd-toggle .icon-plus:after,
.stellarnav.dark .icon-close:before,
.stellarnav.dark .icon-close:after {
    border-color: #111;
}

.stellarnav.dark .third,
.stellarnav.dark .half {
    border-left-color: #eee;
}

/* ------------------------------------------------------------- ticker */

.scroll3-left {
    background-color: #222;
}

.scroll3-right i {
    color: #666;
}

/* ---------------------------------------------------- section headings */

/*
 * Left-aligned title over a thin grey rule, with a short black bar under
 * the start of the title. Replaces the pale-blue fills, blue left edges and
 * blue tabs of the block, widget and carousel headings.
 */
.macrosys_cat01,
.macrosys_cat02,
.macrosys_facebook {
    background: linear-gradient(#111, #111) left bottom / 56px 2px no-repeat;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    color: #111;
    font-weight: 700;
    padding: 8px 0;
}

.macrosys_cat01 a {
    color: #111;
}

.macrosys_cat02 a {
    background: transparent;
    color: #111;
    font-weight: 700;
    padding: 2px 0;
}

.macrosys_cat02 > a::after {
    display: none;
}

.macrosys_facebook i,
.ak-widget .macrosys_facebook i {
    color: #111;
}

/* Special-report card's "বিশেষ প্রতিবেদন" label. */
.ak-special-bar > .ak-special-bar__label {
    color: #666;
    margin-right: 0 !important;
}

/* Post page and listing headings. */
.latest-title i {
    color: #111;
}

.related-new-cat span {
    border-top-color: #111;
}

.rachive-info-cats {
    border-bottom-color: #111;
}

.rachive-info-cats a {
    color: #111;
}

/* ----------------------------------------------------- cards and rails */

.sitbar-title {
    background: transparent;
}

.ak-widget__body,
.facebook-content {
    border-color: #ddd;
}

/* Grey placeholder behind images still loading or missing. */
.archive2-image img,
.archiveTab-image img,
.relatedImage2 img,
.rightSitbear-image img,
.rightSitbear-image2 img,
.single-left img {
    background: #eee;
}

/* Latest / most-read tabs: active tab underlined in black. */
#recentPopular-tab .nav-link,
#archivePopular-tab .nav-link,
.nav-tabs .nav-link {
    background: #f4f4f4;
    color: #666;
    border: 0;
    border-bottom: 2px solid #ddd;
}

#recentPopular-tab .nav-link.active,
#archivePopular-tab .nav-link.active,
.nav-tabs .nav-link.active {
    background: #fff;
    color: #111;
    border: 0;
    border-bottom: 2px solid #111;
}

/* Numbered badges on the most-read list. */
.conut {
    background: #222;
}

/* Meta dividers. */
.meta-right a,
.cat-meta2 a {
    border-color: #999;
}

.update-time > ul > li > i {
    color: #666;
}

.update-time a {
    color: #111;
}

/* --------------------------------------------------------- links */

/* Headlines: hover goes grey, not blue / orange / maroon. */
.secOne_title a:hover,
.sitbar-title a:hover,
.tab_hadding a:hover,
.secThree_title a:hover,
.secThree_title2 a:hover,
.division_title a:hover,
.secSeven-title a:hover,
.secSeven-title2 a:hover,
.dark_title2 a:hover,
.single-home-cat2 ul li a:hover,
.leftSitbe-title a:hover,
.relatedTitle2 a:hover,
.rSitebar-title a:hover,
.rSitebar-title2 a:hover,
.archivePage2-title a:hover,
.archiveTab_hadding a:hover {
    color: #666;
}

/* Titles set on top of photos stay light on hover. */
.secGllary-title a:hover,
.secSix_title a:hover {
    color: #ddd;
}

/* "বিস্তারিত" (read more) links under excerpts. */
.secGllary-details a,
.sitaber-details a {
    color: #111;
    font-weight: 700;
}

/* "আরো খবর" (more news). */
.more_news a {
    color: #333;
}

.more_news a:hover {
    color: #000;
}

/* Icon hovers over video and gallery thumbnails. */
.secThree_item:hover .video-icon2 i {
    color: #111;
}

/* ------------------------------------------------ carousels and buttons */

.sectionNews-active .owl-dots button,
.news2-active .owl-dots button {
    background: #bbb !important;
}

.sectionNews-active .owl-dots button.active,
.news2-active .owl-dots button.active,
.darkNews-active .owl-dots button.active {
    background: #222 !important;
}

.sectionNews-active button.owl-prev:hover,
.sectionNews-active button.owl-next:hover,
.darkNews-active button.owl-prev:hover,
.darkNews-active button.owl-next:hover {
    color: #fff;
}

.macrosys_gallery2 .la-angle-right {
    background: #222;
}

/* Archive picker, pagination, print and share buttons. */
.ak-archive-form__submit {
    background: #222;
}

.ak-archive-form__submit:hover {
    background: #000;
}

.ak-pagination .page-link {
    color: #333;
}

.ak-pagination .page-item.active .page-link {
    background: #222;
    border-color: #222;
    color: #fff;
}

/* Share, copy-link and print buttons are the one deliberate exception: they
   keep their own colours (set in amaderkatha.css) so readers recognise them
   at a glance. Hover just darkens them slightly. */
.ak-share a:hover {
    filter: brightness(.88);
    color: #fff;
}

.ak-share .ak-share--print:hover {
    color: #212529;
}

/* ------------------------------------------------------------- footer */

/*
 * Light footer, as on Ajker Patrika: white, opened by a 2px black rule, with
 * a thin grey rule above the copyright line. The logo keeps its colour.
 */
.footer_section {
    background: #fff;
    border-top: 2px solid #111;
}

.footer_color,
.footer_color a {
    color: #111;
}

.footer_color a:hover {
    color: #666;
}

.bottom-footer-section {
    background: #fff;
    border-top: 1px solid #ddd;
}

.footer_logo .ak-wordmark {
    color: #111;
}

/* "Developed and Maintained By" was set white for the old black footer. */
.ak-credit {
    color: #555;
}

.editorial_text {
    border-right-color: #ddd;
}

@media only screen and (max-width: 767px) {
    .editorial_text {
        border-bottom-color: #ddd !important;
    }
}

.footer_left {
    background-color: #111;
}

.footer_right i {
    color: #666;
}

.macrosys_scroll {
    background: #222;
}

/* ------------------------------------------------------- video section */

/*
 * The homepage video section drops its dark band: white like the rest of the
 * page, both column titles in the site's heading style, flat video cards and
 * a plain "আরো ভিডিও দেখুন" link. Play buttons stay on the thumbnails.
 */
.home_video_gallery {
    background: #fff;
    margin: 30px 0;
}

.drak-bg {
    background: transparent;
    padding: 0;
}

.darkPadding {
    padding: 0;
}

.macrosys_darkCat,
.darkTav {
    background: linear-gradient(#111, #111) left bottom / 56px 2px no-repeat;
    border-bottom: 1px solid #ddd;
    padding: 8px 0;
    margin-bottom: 12px;
}

.macrosys_darkCat a,
.darkTav .nav-link,
.darkTav .nav-link.active {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #111;
    font-size: 20px;
    font-weight: 700;
    padding: 0;
}

/* The theme's filler bar after the title, and its red dot. */
.macrosys_darkCat .macrosys2::before,
.macrosys3 {
    display: none;
}

.dark_title a {
    color: #111;
}

.dark_title a:hover,
.dark_title2 a:hover {
    color: #666;
}

.darkNews-wrpp {
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    background: transparent;
}

.dark_title2 {
    padding: 6px 0 8px;
}

.dark-btn {
    padding-top: 12px;
}

.dark-btn a {
    background: transparent;
    color: #333;
    font-size: 16px;
    padding: 0;
}

.dark-btn a::after {
    display: none;
}

.dark-btn a:hover {
    color: #000;
}

/* A rule between the lead video and the gallery beside it. */
@media only screen and (min-width: 992px) {
    .home_video_gallery .row > .col-lg-4 {
        border-right: 1px solid #e5e5e5;
    }
}

/* --------------------------------------------------------- flat cards */

/*
 * Ajker Patrika style: cards have no shadow, frame or fill. Stories are
 * separated by thin rules instead - a line under each card, and a line
 * between side-by-side columns and grid cards.
 */
.secGllary-wrpp,
.secOne-wrpp,
.sitebar-catWrpp,
.secThree_wrpp,
.secFour_wrpp,
.secSeven-wrpp,
.division_wrpp,
.archivePage-wrpp2,
.related-news-wrpp2,
.rachive-info-cats {
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

.sitebar-catWrpp {
    border: 0;
    padding: 0;
}

/* A rule under each story card. */
.secOne-wrpp,
.division_wrpp,
.archivePage-wrpp2 {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;
}

/* Rules between columns: hero main area / right rail, lead / side list,
   and the category columns of the multi-column homepage blocks. */
@media only screen and (min-width: 992px) {
    .ak-rule-col {
        border-right: 1px solid #e5e5e5;
    }

    .row > .ak-rule-col:last-child {
        border-right: 0;
    }
}

/* Rules between grid cards: three across (four in the four-across block),
   none after the last card of a row. */
@media only screen and (min-width: 768px) {
    .row > .macrosys-3,
    .row > .macrosys-4 {
        border-right: 1px solid #e5e5e5;
    }

    .row > .macrosys-3:nth-child(3n),
    .row > .macrosys-4:nth-child(4n),
    .row > .macrosys-3:last-child,
    .row > .macrosys-4:last-child {
        border-right: 0;
    }
}

/* ---------------------------------------------------------- headlines */

/*
 * Bold headlines in a clear hierarchy, after Ajker Patrika (lead 28/38px,
 * cards 20px, lists 18px, section titles 26px, all bold). Sizes here run a
 * step larger because SolaimanLipi sets smaller than Ajker Patrika's face at
 * the same pixel size. The theme sizes the <a> and spaces the heading, so
 * both get the rule.
 */

/* Lead: the hero's main story. */
.secGllary-title,
.secGllary-title a {
    font-size: 28px;
    line-height: 38px;
    font-weight: 700;
}

/* Cards: story cards across the homepage, listings and related news. */
.secOne_title,
.secOne_title a,
.sitbar-title,
.sitbar-title a,
.division_title,
.division_title a,
.secThree_title,
.secThree_title a,
.secFour_title,
.secFour_title a,
.secSeven-title,
.secSeven-title a,
.dark_title,
.dark_title a,
.archivePage2-title,
.archivePage2-title a,
.relatedTitle2,
.relatedTitle2 a {
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
}

/* Lists: stacked stories beside a lead, video cards, carousel captions and
   the post page's sidebars. */
.secThree_title2,
.secThree_title2 a,
.secFour_title2,
.secFour_title2 a,
.secSeven-title2,
.secSeven-title2 a,
.dark_title2,
.dark_title2 a,
.secSix_title,
.secSix_title a,
.leftSitbe-title,
.leftSitbe-title a,
.rSitebar-title,
.rSitebar-title a,
.rSitebar-title2,
.rSitebar-title2 a {
    font-size: 19px;
    line-height: 1.4;
    font-weight: 700;
}

/* Section titles. */
.macrosys_cat01,
.macrosys_cat01 a,
.macrosys_cat02 a,
.macrosys_darkCat a,
.darkTav .nav-link,
.darkTav .nav-link.active {
    font-size: 24px;
    font-weight: 700;
}

/* Latest / most-read lists in the listing-page sidebar: bold, kept at the
   theme's size so the narrow rail does not wrap every headline. */
.tab_hadding a,
.archiveTab_hadding a {
    font-weight: 700;
}