/* Loaded after style.min.css. Corrections to the site's look. */

/* Nafees only has rough Latin letters with almost no word spacing, so English
   came out as "Whyiwrite". Roboto has no Urdu letters, so Urdu still falls
   through to the Nastaleeq fonts, letter by letter. */
:root {
    --font-family: 'Roboto', 'Jameel Noori Nastaleeq', 'Nafees', sans-serif !important;
}
body {
    font-family: var(--font-family) !important;
    line-height: 1.6;
}
.post-title p,
.post-date span.bg-dark,
.author-name h6,
.post-footer ul li span,
.abt-rgt-prt p,
.post-born ul,
.single-post-footer a,
.post-right h4,
.post-right a,
.pagination li.page-item a.page-link {
    font-family: var(--font-family) !important;
}
ul.navbar-nav li.nav-item a.nav-link { font-family: var(--font-family); font-size: 15px; white-space: nowrap; }
.post-lang-ur, .post-lang-ur p, .post-lang-ur h1, .post-lang-ur h2, .post-lang-ur h6 {
    font-family: 'Noto Nastaliq Urdu', 'Noto Nastaliq Urdu Local', 'Nafees Nastaleeq', serif !important;
}
/* ---- English text that changes to Urdu on hover ----
   Both sit in the same grid cell, so swapping them doesn't move the layout. */
/* Roman Urdu reading mode and its switch above the post title */
.post-lang-ur-Latn { direction: ltr; font-family: 'Lora', Georgia, serif; line-height: 1.9; }
.script-switch { display: flex; align-items: center; margin-block: 0 .75rem; }
.script-switch button { padding: .15rem .6rem; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 13px; cursor: pointer; }
.script-switch button:first-child { border-radius: 4px 0 0 4px; }
.script-switch button:last-child { border-radius: 0 4px 4px 0; border-left: 0; }
.script-switch button.is-active { background: #c9a227; border-color: #c9a227; color: #111; font-weight: 700; }

.bi { display: inline-grid; justify-items: center; align-items: center; vertical-align: baseline; }
.bi-en, .bi-ur { grid-area: 1 / 1; transition: opacity .15s ease; }
.bi-ur {
    opacity: 0;
    font-family: 'Noto Nastaliq Urdu', 'Noto Nastaliq Urdu Local', 'Nafees Nastaleeq', serif;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}
a:hover .bi-en, a:focus-visible .bi-en, .bi:hover .bi-en { opacity: 0; }
a:hover .bi-ur, a:focus-visible .bi-ur, .bi:hover .bi-ur { opacity: 1; }
/* Phones can't hover, so they show both. */
@media (hover: none) {
    .bi { display: inline-flex; gap: .5em; }
    .bi-en, a:hover .bi-en, a:focus-visible .bi-en, .bi:hover .bi-en { opacity: 1; }
    .bi-ur { opacity: .8; }
}

/* ---- Header and footer ---- */
.navbar-brand img { max-width: 170px; height: auto; }
.navbar-nav .nav-link { padding-inline: .6rem !important; }
.navbar-collapse { background: var(--black); }
.footer-section { border-top: 1px solid #222; margin-top: 40px; padding: 20px 16px; }
.footer p { margin: 0; font-size: 14px; line-height: 2; color: #bbb; }
.footer a { color: #fff; text-decoration: none; }
.footer-social { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: .5rem; font-size: 22px; }
.footer a:hover { color: var(--red); }

/* Keeps the fixed social icons from covering page text on narrow screens. */
@media (max-width: 991.98px) {
    .social_widget { display: none; }
}

/* ---- Login and sign up ---- */
.auth-card {
    width: calc(100% - 32px);
    max-width: 440px;
    margin: 48px auto;
    padding: 32px 28px;
    background: #161515;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
}
.auth-card h1 { font-size: 30px; line-height: 2; margin-bottom: 16px; }
.auth-card label { display: block; margin: 16px 0 6px; font-size: 16px; }
.auth-card input {
    width: 100%;
    padding: 10px 12px;
    background: #1c1c1c;
    color: #fff;
    border: 1px solid #444;
    border-radius: 6px;
}
.auth-card input:focus { outline: 0; border-color: var(--red); }
.auth-card button {
    width: 100%;
    margin-top: 24px;
    padding: 10px;
    background: var(--red);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 17px;
    cursor: pointer;
}
.auth-switch { margin: 16px 0 0; color: #bbb; }
.auth-switch a { color: #ff6b6b; }
.auth-error, .auth-card .errorlist { color: #ff6b6b; list-style: none; padding: 0; margin: 6px 0 0; font-size: 14px; }

/* ---- The contact section on the home, category and about pages ---- */
.subsection-left { height: 100%; min-height: 220px; text-align: center; }
.subformwrapper { height: 100%; padding: 32px 0; }
.frm-input-box span { display: block; margin-bottom: 6px; }
.subs_from input, .subs_from textarea { background: transparent; color: #fff; }
@media (max-width: 767.98px) {
    .subsection-left { height: auto; min-height: 150px; padding: 24px 16px; }
}

/* ---- Post cards ---- */
.homepage-post .posts img, .all-post-section img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post-title h2 { line-height: 1.9; font-size: 26px; }
.post-title p { line-height: 2; font-size: 16px; }
.post-optimize > span { display: block; }

/* ---- Category page ---- */
.category-title { text-align: center; font-size: 34px; margin: 24px 0 8px; line-height: 2; }
.category-summary { text-align: center; color: #bbb; margin-bottom: 8px; }
.all-post-section {
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    padding: 20px 16px;
}
.posts-item {
    width: auto;
    display: flex;
    flex-direction: column;
    background: #0d0d0d;
    border-radius: 6px;
    overflow: hidden;
}
.post-author { flex: 1; padding: 0 16px; }
.post-author h6 { font-size: 22px; line-height: 2; }
.post-author p { font-size: 16px; line-height: 2; }
.post-date { padding-inline: 16px; }
.post-date span.bg-dark { font-size: 12px; }
.post-footer { margin: 0 16px; padding: 10px 0 4px; }
.post-footer ul { position: relative; display: flex; gap: 14px; padding: 0; margin: 0; }
.post-footer ul li { list-style: none; }
#loading { grid-column: 1 / -1; justify-self: center; width: 48px; aspect-ratio: auto; }

/* ---- Pages copied in with fixed giant type: terms, privacy, disclaimer ---- */
#PAGES_CONTAINER { display: block; max-width: 900px; margin: 0 auto; padding: 24px 16px 48px; }
#PAGES_CONTAINER, #PAGES_CONTAINER p, #PAGES_CONTAINER li, #PAGES_CONTAINER span {
    font-family: var(--font-family) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    letter-spacing: normal !important;
}
#PAGES_CONTAINER h1, #PAGES_CONTAINER h2, #PAGES_CONTAINER h2 span, #PAGES_CONTAINER h3, #PAGES_CONTAINER h3 span {
    font-family: var(--font-family) !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
}
#PAGES_CONTAINER h2.font_2, #PAGES_CONTAINER h2.font_2 span { font-size: clamp(28px, 6vw, 40px) !important; font-weight: 700; margin-bottom: 24px; }
#PAGES_CONTAINER h3, #PAGES_CONTAINER h3 span, #PAGES_CONTAINER h2:not(.font_2), #PAGES_CONTAINER h2:not(.font_2) span {
    font-size: 22px !important;
    font-weight: 600;
    margin-top: 24px;
}
#PAGES_CONTAINER a { color: #ff6b6b; overflow-wrap: anywhere; }

/* ---- Small pages ---- */
.page-narrow { max-width: 700px; margin: 64px auto; padding: 0 16px; text-align: center; }