/* Fonts and Quill formatting shared by the post editor (build/post-create.html)
   and the post pages, so a post looks the same in both places.
   The font list must match FONTS in static/js/post-editor.js. */

/* Self-hosted Urdu fonts (already in static/css/) */
@font-face {
    font-family: 'Nafees Nastaleeq';
    src: url('nafees-nastaleeq-webfont.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Nastaliq Urdu Local';
    src: url('NotoNastaliqUrdu-Regular.ttf') format('truetype');
    font-display: swap;
}
/* Only used if the reader has Jameel Noori installed; falls back to Nafees. */
@font-face {
    font-family: 'Jameel Noori Nastaleeq Local';
    src: local('Jameel Noori Nastaleeq'), local('JameelNooriNastaleeq');
}

/* ---- Urdu fonts ---- */
.ql-font-noto-nastaliq-urdu { font-family: 'Noto Nastaliq Urdu', 'Noto Nastaliq Urdu Local', 'Nafees Nastaleeq', serif; }
.ql-font-nafees-nastaleeq   { font-family: 'Nafees Nastaleeq', 'Noto Nastaliq Urdu', serif; }
.ql-font-jameel-noori       { font-family: 'Jameel Noori Nastaleeq Local', 'Nafees Nastaleeq', 'Noto Nastaliq Urdu', serif; }
.ql-font-gulzar             { font-family: 'Gulzar', 'Noto Nastaliq Urdu', serif; }
.ql-font-noto-naskh-arabic  { font-family: 'Noto Naskh Arabic', serif; }
.ql-font-lateef             { font-family: 'Lateef', serif; }
.ql-font-amiri              { font-family: 'Amiri', serif; }
.ql-font-mirza              { font-family: 'Mirza', serif; }

/* ---- English fonts ---- */
.ql-font-roboto             { font-family: 'Roboto', sans-serif; }
.ql-font-open-sans          { font-family: 'Open Sans', sans-serif; }
.ql-font-lora               { font-family: 'Lora', serif; }
.ql-font-merriweather       { font-family: 'Merriweather', serif; }
.ql-font-playfair-display   { font-family: 'Playfair Display', serif; }
.ql-font-monospace          { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---- Language defaults (whole post) ---- */
.post-lang-ur {
    direction: rtl;
    text-align: right;
    font-family: 'Noto Nastaliq Urdu', 'Noto Nastaliq Urdu Local', 'Nafees Nastaleeq', serif;
    /* Nastaliq is tall and needs generous line spacing to stay readable. */
    line-height: 2.3;
    font-size: 1.15em;
}
.post-lang-ur h1, .post-lang-ur h2, .post-lang-ur h3,
.post-lang-ur h4, .post-lang-ur h5, .post-lang-ur h6,
.post-lang-ur p { line-height: 2.3; }
/* Slanting Nastaliq breaks its letterforms; the site CSS italicizes post text. */
.post-lang-ur, .post-lang-ur p, .post-lang-ur h1, .post-lang-ur h2 { font-style: normal; }
.post-lang-en {
    direction: ltr;
    font-family: 'Lora', Georgia, serif;
}

/* ---- Quill formats (classes Quill 2 writes into saved HTML) ---- */
.post-body .ql-align-center  { text-align: center !important; }
.post-body .ql-align-right   { text-align: right !important; }
.post-body .ql-align-left    { text-align: left !important; }
.post-body .ql-align-justify { text-align: justify !important; }
.post-body .ql-direction-rtl { direction: rtl; text-align: inherit; }
.post-body .ql-size-small { font-size: 0.75em; }
.post-body .ql-size-large { font-size: 1.5em; }
.post-body .ql-size-huge  { font-size: 2.5em; }
.post-body .ql-indent-1 { padding-inline-start: 3em; }
.post-body .ql-indent-2 { padding-inline-start: 6em; }
.post-body .ql-indent-3 { padding-inline-start: 9em; }
.post-body .ql-indent-4 { padding-inline-start: 12em; }
.post-body blockquote {
    border-inline-start: 4px solid #ccc;
    margin: 0.5em 0;
    padding-inline-start: 1em;
}
.post-body pre.ql-syntax, .post-body pre {
    background: #23241f;
    color: #f8f8f2;
    padding: 0.75em 1em;
    border-radius: 4px;
    overflow-x: auto;
    direction: ltr;
}
.post-body img, .post-body video, .post-body iframe { max-width: 100%; height: auto; }
.post-body iframe.ql-video { width: 100%; aspect-ratio: 16 / 9; }
.post-body p { margin-bottom: 0.6em; }

/* ---- Likes, comments and share links on the post page ---- */
.post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 24px 0 16px; }
.post-actions .stat { color: #ddd; text-decoration: none; }
.like-button { background: transparent; color: #fff; border: 1px solid #555; border-radius: 6px; padding: 6px 16px; cursor: pointer; }
.like-button.liked { background: #EB0000; border-color: #EB0000; }
.like-button:disabled { opacity: .6; }
.share-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 32px; }
.share-links a, .share-links button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px; font-size: 14px; text-decoration: none; border: 0; cursor: pointer; color: #fff; }
.share-fb { background: #1877f2; }
.share-tw { background: #000; border: 1px solid #555 !important; }
.share-wa { background: #128c4b; }
.share-li { background: #0a66c2; }
.share-links .share-copy { background: #f0f0f0; color: #222; }
.comments-section { border-top: 1px solid #333; padding-top: 24px; margin-bottom: 32px; }
.comments-section h2 { font-size: 24px; margin-bottom: 16px; }
.comments-section a { color: #ff6b6b; }
.comment-form { margin-bottom: 24px; }
.comment-form textarea { width: 100%; background: #1c1c1c; color: #fff; border: 1px solid #444; border-radius: 6px; padding: 10px; line-height: 2; }
.comment-form button { margin-top: 8px; background: #EB0000; color: #fff; border: 0; border-radius: 6px; padding: 8px 22px; cursor: pointer; }
.comment { border-bottom: 1px solid #222; padding: 12px 0; }
.comment header small { color: #aaa; margin-inline-start: 8px; }
.comment p { margin: 6px 0 0; line-height: 2; }
.card-stats { display: block; color: #aaa; font-size: 13px; margin-top: 4px; }
.card-stats i { margin-inline-start: 6px; }

/* ---- Urdu posters page ---- */
.urdu-posters { max-width: 1200px; margin: 0 auto; padding: 32px 16px 64px; }
.urdu-posters h1 { margin-bottom: 24px; }
.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.poster-card { position: relative; display: block; overflow: hidden; border-radius: 8px; color: #fff; text-decoration: none; }
.poster-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .25s; }
.poster-card:hover img { transform: scale(1.04); }
.poster-title { position: absolute; inset-inline: 0; bottom: 0; padding: 40px 16px 12px; font-size: 24px; line-height: 2; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); }
.poster-title small { display: block; font-size: 15px; color: #ddd; }
.poster-pages { display: flex; justify-content: center; gap: 16px; margin-top: 32px; }
.poster-pages a { color: #ff6b6b; }