/* Shared look for internal Urdu pages: header clearance, breadcrumb,
   page title, article pagination. Loaded as a file so browsers cache it
   instead of re-downloading the same CSS inside every HTML response.
   NOTE: bootstrap.css sets html{font-size:10px} - sizes here are px on purpose. */
/* Banner removed — the fixed header needs its own clearance now. */
    #main { padding-top: 92px; }

    /* breadcrumb sits just under the header */
    #main > nav[aria-label="breadcrumb"] { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
    #main .breadcrumb {
        background: transparent;
        padding: 0;
        margin: 0 0 6px 0;
        font-size: 16px;
    }
    #main .breadcrumb a {
        color: #3ea659;
        text-decoration: none;
        display: inline-block;
        padding: 6px 2px;          /* real tap area, not just text */
    }
    #main .breadcrumb a:hover { text-decoration: underline; }
    #main .breadcrumb .active { color: #6b7280; }

    /* large page title (same 35px + ornament treatment as indexur h2) */
    .heading-center h2.page-title {
        font-size: 35px;
        font-weight: 700;
        color: #155b2c;
        margin: 0 0 34px 0;
        position: relative;
    }
    .heading-center h2.page-title:before { bottom: 0px !important; }

    /* page marker above the article text (only shown when paginated) */
    .ap-top-count {
        display: inline-block;
        background: #eaf4ee;
        color: #155b2c;
        font-size: 16px;
        font-weight: 700;
        padding: 7px 16px;
        border-radius: 20px;
        margin: 0 0 18px;
    }

    /* ---- article body pagination (sits at the very bottom of the article) ---- */
    .article-pager-wrap {
        clear: both;
        margin: 38px 0 6px;
        padding: 20px 16px 18px;
        background: #f7faf8;
        border: 1px solid #e4ece7;
        border-radius: 12px;
        text-align: center;
    }
    .article-pager-wrap .ap-count {
        font-size: 17px;
        font-weight: 600;
        color: #155b2c;
        margin-bottom: 14px;
    }
    .article-pager {
        direction: ltr;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0;
    }
    .article-pager a,
    .article-pager span {
        min-width: 46px;
        min-height: 46px;              /* comfortable tap target */
        padding: 0 14px;
        border-radius: 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        font-weight: 600;
        text-decoration: none;
        border: 1px solid #dbe3e7;
        background: #fff;
        color: #24303c;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }
    .article-pager a:hover { background: #f2f8f4; border-color: #b8d8c4; color: #155b2c; }
    .article-pager .ap-now { background: #155b2c; border-color: #155b2c; color: #fff; }
    .article-pager .ap-nav { font-weight: 700; }
    .article-pager .ap-disabled { opacity: .4; }
    .article-pager .ap-dots { border: 0; background: none; min-width: 18px; padding: 0; }

    @media only screen and (max-width: 767px) {
        #main { padding-top: 80px; }
        .ap-top-count { font-size: 15px; padding: 6px 14px; margin-bottom: 14px; }
        .article-pager-wrap { margin-top: 30px; padding: 16px 10px 14px; border-radius: 11px; }
        .article-pager-wrap .ap-count { font-size: 16px; margin-bottom: 12px; }
        .article-pager { gap: 6px; }
        .article-pager a, .article-pager span { min-width: 44px; min-height: 44px; padding: 0 11px; font-size: 16px; }
        .heading-center h2.page-title { font-size: 30px; margin-bottom: 30px; }

        #main .breadcrumb { font-size: 19px; margin-bottom: 4px; }
        /* ~44px tall touch targets (Apple/Google minimum) */
        #main .breadcrumb a { padding: 10px 6px; margin: 0 -2px; }
        #main .breadcrumb .breadcrumb-item + .breadcrumb-item { padding-right: 10px; }
        #main .breadcrumb .breadcrumb-item + .breadcrumb-item:before { padding-left: 10px; }
    }