/*
 * Mentor theme: BootstrapMade.com (https://bootstrapmade.com/mentor-free-education-bootstrap-theme/)
 * Site styles: active layout and components only; Bootstrap supplies the grid.
 */
:root {
    --color-accent: #5fcf80;
    --color-link: #267347;
    --color-text: #3b3b3b;
    --color-muted: #717f86;
    --color-heading: #4b4b4c;
    --color-surface: #f7f7f7;
    --color-border: #ddd;
    --color-focus: #286090;
    --space-sm: 12px;
    --space-md: 24px;
    --space-lg: 30px;
    --font-body: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Base typography and navigation */
body { font: 400 16px/1.52 var(--font-body); color: var(--color-muted); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-body); font-weight: 700; color: var(--color-heading); }
h2 { font-size: 24px; padding-bottom: 15px; }
a { color: var(--color-link); }
a:hover, a:focus { color: var(--color-link); }
table { border-collapse: collapse; border-spacing: 0; }
.section-padding { padding: 60px 0; }
.navbar { margin-bottom: 0; }
.navbar-default { background-color: #fff; }
.navbar-default .navbar-brand {
    color: var(--color-accent); font-weight: 700; text-transform: uppercase;
    padding: 0; height: auto; font-size: 36px; margin: 20px 0;
}
.navbar-default .navbar-brand span { font-weight: 100; }
.navbar-default .navbar-nav > li > a { color: var(--color-muted); font-size: 14px; font-weight: 700; }
.navbar-nav > li > a { margin: 10px 5px; padding: 10px 15px; }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a { color: var(--color-link); background: transparent; }
.navbar-nav, .social-links { list-style: none; }

/* Banner; retain the existing photograph and copy bounds at zoom. */
.banner {
    background: url("../img/optimized/Photo.e66e3ac29304bf3d.webp") no-repeat center top;
    background-size: 50% 100%; min-height: 300px; position: relative;
}
.bg-color { background-color: rgba(12, 11, 11, .22); min-height: 300px; }
.text-border { border: 5px solid var(--color-accent); display: inline-block; }
.intro-para { font-size: 45px; color: #fff; }
.big-text { font-size: 35px; }
.small-text { font-size: 16px; }
/* Keep banner copy inside the same bounds as the background photograph.
   Content determines the height so wrapped text remains inside at browser zoom. */
.banner .container{
    width: 50%;
    padding: 0 16px;
}
.banner .row{
    margin: 0;
}
.banner .banner-text{
    padding: 150px 0 24px;
    overflow-wrap: anywhere;
}
.banner .text-border{
    margin-top: 0;
}
.banner .intro-para{
    margin-top: 30px;
}
.banner .big-text{
    line-height: 1.25;
}
@media only screen and (max-width: 600px) {
    .banner .container{
        width: 90%;
    }
}

/* Books and footer */
.bottom-line { width: 25px; height: 3px; background-color: #637a91; }
#books { background-color: var(--color-surface); }
figure { margin-top: 25px; }
[class*=" imghvr-"] figcaption, [class^="imghvr-"] figcaption,
[class*=" imghvr-"], [class^="imghvr-"] { background-color: var(--color-accent); color: #fff; }
.footer { padding: 60px 0 20px; background: #111; color: #ccc; }
.footer a { color: #fff; }
.footer .social-links { padding: 40px 0 0; margin: 30px 0 40px; border-bottom: 1px solid #ffffff33; }
.footer .social-links li { display: inline-block; margin: 0 25px 25px; }
.footer .social-links a { display: inline-block; min-width: 44px; font-size: 32px; line-height: 50px; text-align: center; }
@media (max-width: 600px) { .banner { background-size: 90% 100%; } }
@media (max-width: 450px) {
    .navbar-default .navbar-brand { margin-left: 10px; font-size: 24px; }
    .navbar-default .navbar-nav > li > a { text-align: center; }
    .big-text, .intro-para { font-size: 30px; }
    .small-text, .header-section p { font-size: 14px; }
    .footer .social-links li { margin: 0 5px 25px; }
}

/* Reading, content grids, consent, and search components */
.reading-page {
    max-width:960px;
    padding-top:24px;
    padding-bottom:48px;
    line-height:1.8;
    font-size:18px;
    overflow-wrap:anywhere;
}

.reading-page h1 {
    font-size:32px;
    line-height:1.4;
}

.article-body p {
    margin:0 0 1em;
}

.article-body table {
    display:block;
    max-width:100%;
    overflow-x:auto;
}

.article-body td,.article-body th {
    padding:.5em;
    border:1px solid var(--color-border);
}

.article-body img {
    max-width:100%;
    height:auto;
}

.byline {
    font-size:15px;
    color:#555;
}

.article-list li,.video-list li {
    padding:8px 0;
}

.book-link {
    display:block;
    color:inherit;
}

.books-img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:400px;
}

details {
    padding:16px 0;
    border-bottom:1px solid var(--color-border);
}

summary {
    cursor:pointer;
    font-weight:600;
}

details p {
    margin-top:16px;
}

a:focus-visible,summary:focus-visible {
    outline:3px solid var(--color-focus);
    outline-offset:4px;
}

[dir=rtl] .reading-page {
    text-align:right;
}

[dir=rtl] .article-body {
    font-size:1.2em;
    line-height:2;
}

.reading-page aside {
    margin-top:40px;
    border-top:1px solid var(--color-border);
    padding-top:20px;
}

@media(max-width:600px) {
    .reading-page {
        font-size:17px;
    }
    .reading-page h1 {
        font-size:1.6rem;
    }
}

.banner h1.big-text {
    color:#fff;
    text-shadow:0 2px 5px #222;
}

[hidden] {
    display:none!important;
}

.reading-page {
    color:var(--color-text);
}

.reading-page h2 {
    font-size:24px;
    line-height:1.5;
}

.reading-page a,.article-list a,.video-list a {
    color:var(--color-link);
}

.content-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:var(--space-lg);
    row-gap:var(--space-sm);
    margin-top:25px;
}

.content-card {
    display:flex;
    align-items:flex-start;
    gap:18px;
    min-width:0;
    color:inherit;
    font-size:16px;
    line-height:1.5;
    padding:0;
}

.content-card .fa {
    flex:0 0 42px;
    font-size:39px;
    color:var(--color-accent);
    margin-top:4px;
}

.content-card span {
    flex:1;
    overflow-wrap:anywhere;
}

.content-card:hover,.content-card:focus {
    color:var(--color-link);
    text-decoration:underline;
}

@media(max-width:991px) {
    .content-grid {
        grid-template-columns:1fr;
        gap:16px;
    }
}

section[id] {
    scroll-margin-top:80px;
}

.article-group {
    margin-top:24px;
}

.article-group+.article-group {
    margin-top:32px;
}

.article-group h3 {
    font-size:21px;
    margin:0;
}

.article-group .content-grid {
    margin-top:18px;
}

.article-list[lang="ur"] .content-card {
    flex-direction:row-reverse;
}

.article-list[lang="ur"] .content-card span {
    text-align:right;
}

.analytics-consent {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:1100;
    background:#fff;
    border-top:1px solid var(--color-border);
    box-shadow:0 -2px 10px #0002;
    padding:18px 5%;
    color:#333;
    display:flex;
    align-items:center;
    gap:var(--space-md);
    direction:ltr;
    text-align:left;
}

.analytics-consent p {
    flex:1;
    margin:0;
}

.consent-actions {
    display:flex;
    gap:var(--space-sm);
    flex-shrink:0;
}

.consent-actions button {
    background:var(--color-link);
    color:#fff;
    border:1px solid var(--color-link);
    border-radius:3px;
    padding:10px 16px;
    font:inherit;
}

.cookie-settings {
    text-align:center;
    padding:12px;
}

.cookie-settings button {
    border:0;
    background:transparent;
    color:inherit;
    text-decoration:underline;
    cursor:pointer;
}

.consent-actions button:focus-visible,.cookie-settings button:focus-visible {
    outline:3px solid var(--color-focus);
    outline-offset:3px;
}

@media(max-width:767px) {
    .analytics-consent {
        flex-direction:column;
        align-items:stretch;
        gap:var(--space-sm);
        padding:16px;
    }
    .consent-actions {
        flex-wrap:wrap;
    }
    .consent-actions button {
        flex:1;
    }
}

.privacy-cookie-settings {
    background:var(--color-link);
    color:#fff;
    border:1px solid var(--color-link);
    border-radius:3px;
    padding:10px 16px;
    font:inherit;
    cursor:pointer;
}

.privacy-cookie-settings:focus-visible {
    outline:3px solid var(--color-focus);
    outline-offset:3px;
}

.site-intro {
    padding:28px 0 0;
}

.site-intro p {
    margin:0;
}

#articles.section-padding {
    padding-top:40px;
}

.book-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:var(--space-lg);
    row-gap:var(--space-sm);
}

.book-grid .book-link {
    justify-self:start;
    max-width:100%;
}

@media(min-width:768px) and (max-width:991px) {
    .book-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:767px) {
    .book-grid {
        grid-template-columns:1fr;
    }
}

.article-search {
    margin:24px 0 32px;
    padding:20px;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:4px;
}

.article-search label:not(.sr-only) {
    display:block;
    font-size:19px;
    color:#333;
    margin-bottom:10px;
}

.search-controls {
    display:flex;
    gap:10px;
}

.search-controls input {
    flex:1;
    min-width:0;
}

.search-controls input,.search-controls select,.search-controls button,#article-search-retry {
    font:inherit;
    border:1px solid #aaa;
    border-radius:3px;
    padding:10px;
}

.search-controls button[type=submit] {
    background:var(--color-link);
    color:#fff;
    border-color:var(--color-link);
}

#article-search-status {
    margin:12px 0 0;
}

.search-results {
    padding-left:24px;
    margin:18px 0 0;
}

.search-results li {
    padding:14px 0;
    border-top:1px solid var(--color-border);
}

.search-results h4 {
    margin:0 0 8px;
    font-size:18px;
}

.search-results a {
    color:var(--color-link);
}

.search-results p {
    margin:0;
    color:#444;
}

.article-search input:focus-visible,.article-search select:focus-visible,.article-search button:focus-visible {
    outline:3px solid var(--color-focus);
    outline-offset:2px;
}

@media(max-width:767px) {
    .search-controls {
        flex-wrap:wrap;
    }
    .search-controls input {
        flex-basis:100%;
    }
    .search-controls select {
        flex:1;
    }
    .article-search {
        padding:15px;
    }
}

mark[data-search-match] {
    background:#fff0a6;
    color:#222;
    border-radius:2px;
    padding:0 1px;
    scroll-margin-top:90px;
}

mark[data-search-match][data-active=true] {
    background:#ffc857;
    outline:2px solid #9b6500;
}

.article-highlight-tools {
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:4px;
    padding:14px;
    margin:18px 0;
    direction:ltr;
    text-align:left;
}

.article-highlight-tools p {
    margin:0 0 10px;
    font-size:15px;
}

.article-highlight-tools button {
    font:inherit;
    font-size:14px;
    margin:0 8px 6px 0;
    padding:7px 12px;
    background:#fff;
    border:1px solid #888;
    border-radius:3px;
}

.article-highlight-tools button:focus-visible {
    outline:3px solid var(--color-focus);
    outline-offset:2px;
}

.article-highlight-tools {
    position:sticky;
    top:12px;
    z-index:5;
}

#qa-search-status {
    margin:12px 0 0;
}

/* Imported article and Q&A lists retain their meaning, including nested lists. */
.article-body ul, .qa-list ul { list-style-type: disc; padding-inline-start: 1.75em; }
.article-body ul ul, .qa-list ul ul { list-style-type: circle; }
.article-body ul ul ul, .qa-list ul ul ul { list-style-type: square; }
.article-body ol, .qa-list ol { list-style-type: decimal; padding-inline-start: 1.75em; }
.article-body ol ol, .qa-list ol ol { list-style-type: lower-alpha; }
.article-body li, .qa-list li { margin-block: .35em; }
ul.bullets { list-style-type: disc; padding-inline-start: 1.75em; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}