/*
 * AmaderKatha overrides on top of the theme's style.css.
 *
 * The theme ships as static HTML with every image and link hard-coded. Anything
 * that has to bend to real data — a missing logo, a post with no image, an empty
 * sidebar, Laravel's pagination markup — is handled here rather than by editing
 * style.css, so the theme stays upgradable.
 */

/* ---------------------------------------------------------------- masthead */

/* Sites without an uploaded logo fall back to the name as a wordmark. */
.logo .ak-wordmark,
.mobile_logo .ak-wordmark,
.footer_logo .ak-wordmark {
    font-size: 40px;
    font-weight: 700;
    color: #05568a;
    line-height: 1.1;
    display: inline-block;
}

/* The mobile logo sits on the blue menu bar, so the wordmark has to invert. */
.mobile_logo .ak-wordmark {
    font-size: 26px;
    color: #fff;
}

/*
 * Below 768px the theme sizes the mobile logo at width:50% of the bar and lets
 * the height fall where it may — which for a wide logo is taller than the bar
 * it is absolutely positioned inside. Size by height instead so it always fits.
 */
@media only screen and (max-width: 767px) {
    .mobile_logo img {
        width: auto !important;
        max-width: 55%;
        max-height: 46px;
    }

    /* The theme pulls the search icon 7px past the container edge, which puts
       the rotated glyph half off-screen on a phone. Keep it in the gutter.
       (Padding it away from the "আরো" label widens the float and makes the two
       overlap instead, so the gap has to stay as the theme has it.) */
    .searchIcon {
        margin-right: 0 !important;
    }
}

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

/* Masthead band around the logo; theme default is 15px. */
.logo_banner {
    padding: 10px 0;
}

/* Masthead logo at a fixed width; theme default is 100% of its column. */
.logo img {
    width: 340px;
    height: auto;
}

/* The template hard-codes a banner image; an empty ad slot must not leave a hole. */
.logo_banner .banner:empty {
    display: none;
}

.header .date i {
    color: #05568a;
}

/* ------------------------------------------------------------------ images */

/* The theme already sizes every thumbnail box, so do not restate width or
   height here — it only takes the placeholder a post without an image falls
   back to, plus the object-fit the theme forgot on the related strip. */
.archive2-image img,
.archiveTab-image img,
.relatedImage2 img,
.rightSitbear-image img,
.rightSitbear-image2 img,
.single-left img {
    background: #e9edf1;
}

.relatedImage2 img {
    object-fit: cover;
}

/* The theme's demo titles are all one line, so its cards happen to line up.
   Real headlines wrap to two or three, which leaves the flex row ragged unless
   each card fills its track and pushes its meta line to the bottom. */
.archivePage-wrpp2,
.related-news-wrpp2 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.archivePage2-title,
.relatedTitle2 {
    flex: 1 0 auto;
}

/* --------------------------------------------- theme's mobile grid overflow */

/*
 * Below 768px the theme re-pads its grid children to 8px (.macrosys-m2, with
 * !important) but leaves Bootstrap's -12px row margin in place, so every row of
 * them sits 4px proud of its column on each side and the whole page scrolls
 * sideways. Zero the row margin where that re-padding applies. The theme has
 * this upstream too — it just never shows on its one-line demo content.
 */
@media only screen and (max-width: 767px) {
    .single-itemContent > .row,
    .popular-content > .row,
    .related-news-content2 > .row,
    .archivePage-content2 > .row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* --------------------------------------------------------------- pagination */

.ak-pagination {
    margin: 10px 0 30px;
}

/*
 * Right-aligned. The Bootstrap 5 paginator wraps the links in
 * .justify-content-between / .justify-content-sm-between, which are !important
 * and — now that its "Showing X of Y" line has been removed — leave the only
 * child at the start. Override both the desktop and the mobile wrapper.
 */
.ak-pagination nav,
.ak-pagination nav > div {
    justify-content: flex-end !important;
}

.ak-pagination .pagination {
    justify-content: flex-end;
    margin: 0;
    flex-wrap: wrap;
    gap: 4px;
}

.ak-pagination .page-link {
    color: #05568a;
    border-radius: 3px;
    border-color: #ddd;
    font-size: 16px;
}

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

/* ------------------------------------------------------------ empty states */

.ak-empty {
    background: #f6f8fa;
    border: 1px solid #e3e8ed;
    border-radius: 4px;
    padding: 40px 20px;
    text-align: center;
    color: #6a7480;
    margin-bottom: 25px;
}

/* --------------------------------------------------- single post: sidebars */

/*
 * The theme gives the two rails four different type sizes — headings at 17px
 * (left) and 22px (right), items at 17px (left), 19px (right lead) and 16px
 * (right list) — all ranged left. Level them: one heading size, one item size,
 * centred in both rails. Scoped to .single-page2 so only the post page moves.
 */
.single-page2 .latest-title,
.single-page2 .popular-cat {
    font-size: 18px;
    text-align: center;
}

.single-page2 .leftSitbe-title a,
.single-page2 .rSitebar-title a,
.single-page2 .rSitebar-title2 a {
    font-size: 17px;
}

.single-page2 .leftSitbe-title,
.single-page2 .rSitebar-title,
.single-page2 .rSitebar-title2 {
    text-align: center;
    /* The theme pads these asymmetrically (6px left, 3px right), which reads as
       off-centre once the text is centred. */
    padding-left: 6px;
    padding-right: 6px;
    line-height: 20px;
}

/* In the tablet band the theme bumps the right rail's list items to 18px with
   !important, which would break the match everywhere between 768 and 991px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-page2 .rSitebar-title2 a {
        font-size: 17px !important;
    }
}

/* ------------------------------------------------ formerly inline styles */

/* Every page's content wrapper (was style="overflow:hidden" in the layout). */
.main-section {
    overflow: hidden;
}

/* Sticky sidebar rails — the post page's two and the shared archive sidebar. */
.fixrd-sitber,
.sitebar-fixd {
    position: sticky;
    top: 0;
}

/* Facebook page plugin frame. */
.facebook-content iframe {
    border: none;
    overflow: hidden;
}

/* Single post: image caption, the share/print row, and the print button. */
.ak-image-caption {
    font-style: italic;
    color: #333;
}

.ak-share-row {
    margin-top: 20px;
}

.ak-print {
    background: #3b5998;
    width: 100%;
    padding: 10px;
    text-align: center;
}

.ak-print a {
    color: #fff;
}

/* ------------------------------------------------------- "আরো" menu label */

/* Header search box; theme default height is 50px. */
.searchBar input[type="text"] {
    width: 100%;
    border: 2px solid #05568a;
    height: 44px;
    font-size: 16px;
    outline: inherit;
    padding: 0 5px;
}

/* Theme default is 18px. */
.menuIcon {
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}

/* Theme default is 27px; nudged to clear the hamburger lines. */
.menuIcon > span {
    margin-left: 30px;
}

/* ---------------------------------------------------------- back to top */

/*
 * main.js only fades this in once you scroll past 100px, but the theme never
 * hides it to begin with — so it sits over the masthead on first paint. Start
 * hidden; fadeIn()/fadeOut() drive display from here on.
 */
.macrosys_scroll {
    display: none;
}

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

/* The theme runs the footer links together; give them a separator to breathe. */
.design-developed .ak-sep {
    display: inline-block;
    margin: 0 6px;
    opacity: 0.5;
}

/* ------------------------------------------------------- sidebar widgets */

/*
 * The archive picker and the Facebook box. Both wear the theme's sidebar
 * heading (.macrosys_facebook, which it only ever used on the homepage's
 * social column) so they sit with the rest of the rail.
 */
.ak-widget {
    margin-bottom: 20px;
}

.ak-widget .macrosys_facebook i {
    color: #033567;
    margin-right: 4px;
}

.ak-widget__body {
    background: #fff;
    border: 1px solid #e3e8ed;
    border-top: 0;
    padding: 14px 12px;
}

.ak-archive-form {
    display: grid;
    gap: 10px;
}

.ak-archive-form .form-select {
    font-size: 16px;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    width: 100%;
}

.ak-archive-form__submit {
    background: #05568a;
    color: #fff;
    border: 0;
    border-radius: 3px;
    padding: 10px 14px;
    font-size: 16px;
    cursor: pointer;
}

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

/* Homepage rail: day, month, year and an icon-only button on one line. The
   month column is widest because the Bangla month names are the longest. */
.ak-archive-form--inline {
    grid-template-columns: 1fr 1.5fr 1.2fr auto;
    gap: 6px;
}

.ak-archive-form--inline .form-select {
    font-size: 14px;
    padding: 7px 18px 7px 6px;
    background-position: right 5px center;
    background-size: 10px 8px;
    min-width: 0;
}

.ak-archive-form--inline .ak-archive-form__submit {
    padding: 7px 10px;
}

.ak-archive-form--inline .ak-archive-form__label {
    display: none;
}

/* The plugin renders at a fixed width; let it shrink into a narrow rail. */
.facebook-content {
    background: #fff;
    border: 1px solid #e3e8ed;
    border-top: 0;
    padding: 10px;
    overflow: auto;
    height: 270px;
}

.facebook-content iframe {
    max-width: 100%;
}

/* --------------------------------------------------------- reporter card */

/*
 * The theme's author box holds only a portrait, a name and a button, and nudges
 * them into place with fixed offsets (.author-name is top:17px, width:80%).
 * Once a designation and a bio go in, those offsets fight the flow — so reset
 * them and let the block stack normally beside the floated portrait.
 */
/* Contain the floated portrait with a clearfix, not overflow:hidden — the
   theme hangs .author-caption outside the box at top:-30px, and hidden
   overflow would clip the label away. */
.author-content::after {
    content: '';
    display: block;
    clear: both;
}

.author .author-name {
    top: 0;
    width: auto;
    margin-bottom: 2px;
}

.author-designation {
    font-size: 15px;
    color: #6c0505;
    margin-bottom: 10px;
}

.author-bio {
    font-size: 16px;
    line-height: 24px;
    color: #444;
    margin-bottom: 12px;
}

/* Stands in for a portrait nobody has uploaded yet, at the same 100px the
   theme gives .author-image img. */
.author-initial {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    float: left;
    margin-right: 20px;
    background: #05568a;
    color: #fff;
    font-size: 44px;
    line-height: 100px;
    text-align: center;
    display: block;
}

.author-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 12px;
}

.author-stat-value {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #05568a;
    line-height: 1.2;
}

.author-stat-label {
    font-size: 14px;
    color: #6a7480;
}

.author-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 12px;
    font-size: 15px;
}

.author-contact a {
    color: #2A388F;
    text-decoration: none;
}

.author-contact i {
    color: #6c0505;
}

/* The theme floats the "all news" button right; clear it so it always lands
   below the bio rather than beside it. */
.author .author-title {
    margin-top: 0;
    padding-top: 6px;
    clear: both;
}

/*
 * Below 768px the theme nudges the lone name down beside the portrait with
 * top:27px !important, and drops the button 50px to clear it. Neither reserves
 * space, so with a designation and bio in the box the name lands on top of
 * them. Natural flow is right once there is more than one line.
 */
@media only screen and (max-width: 767px) {
    .author .author-name {
        top: 0 !important;
    }

    .author .author-title {
        margin-top: 0 !important;
    }
}

/* ------------------------------------------------------------ single post */

/* The template's print/share strip. */
.single-social a {
    text-decoration: none;
}

.ak-share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ak-share a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 3px;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
}

.ak-share .ak-share--fb { background: #3b5998; }
.ak-share .ak-share--tw { background: #1da1f2; }
.ak-share .ak-share--wa { background: #25d366; }
.ak-share .ak-share--in { background: #0a66c2; }

.ak-share button {
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
}

/* Editor-entered HTML: keep long content inside the column. */
.single-content2 img,
.single-content2 iframe,
.single-content2 table {
    max-width: 100%;
}

.single-content2 iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.single-content2 table {
    display: block;
    overflow-x: auto;
}

/* ------------------------------------------------------------- ad wrappers */

.ak-ad {
    margin-bottom: 12px;
}

.ak-ad img {
    width: 100%;
    height: auto;
}

/* Header ad under the centred logo. */
.ak-header-banner {
    margin-top: 12px;
    text-align: center;
}

/* Mobile menu buttons (hamburger, close and the call/location shortcuts). */
.stellarnav .menu-toggle,
.stellarnav .call-btn-mobile,
.stellarnav .location-btn-mobile,
.stellarnav .close-menu {
    padding: 10px !important;
}

/* Footer: the editorial column reads right-aligned against its divider, as the
   template has it (<p align="right">); the office column stays left. */
.ak-editorial--right,
.ak-editorial--right p {
    text-align: right;
}

/* "Developed and Maintained By Macrosys", under the footer menu links. */
.ak-credit {
    margin-top: 6px;
    font-size: 15px;
    color: #fff;
}

/* Homepage hero rail: the special-report card's title bar carries the
   category tab on the left and a "বিশেষ প্রতিবেদন" label on the right. */
.ak-special-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ak-special-bar > .ak-special-bar__label {
    margin: 0 10px 0 auto !important;
    color: #05568a;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}

/* Listing pages (category, archive, search, reporter, gallery): outer spacing. */
.archive-page2 {
    padding: 10px 0;
}

/* Listing card grids (category, archive, search, reporter, galleries): the
   theme spaces cards sideways but not between rows, so each row of cards
   sat directly on the one above. Match the 24px sideways gutter. Phones
   already get 8px all round from the theme's .macrosys-m2. */
@media only screen and (min-width: 768px) {
    .ak-card-grid > .macrosys-3 {
        margin-bottom: 24px;
    }
}