/*
Theme Name: Dramatna theme
Theme URI: https://dramatna.com
Author: ظپط±ظٹظ‚ ط§ظ„طھط·ظˆظٹط±
Version: 4.0.0
License: GPL-2.0-or-later
Text Domain: dramatna
*/

/* ─────────────────────────────────────────
   FONT
───────────────────────────────────────── */
@font-face {
    font-family:'Dramatna';
    src:url('/wp-content/themes/Dramatna-theme/assets/font/Dramatna.woff') format('woff');
    font-weight:400;font-style:normal;font-display:swap;
}

/* ─────────────────────────────────────────
   TOKENS
───────────────────────────────────────── */
:root {
    /* palette */
    --bg:       #f4f5f7;   /* page background */
    --surface:  #ffffff;   /* cards */
    --red:      #b91c1c;   /* main accent */
    --rose:     #dc2626;
    --gold:     #b45309;
    --indigo:   #334155;
    --blue:     #1d4ed8;   /* tags */
    --ink:      #111827;   /* body text */
    --ink2:     #374151;   /* secondary text */
    --ink3:     #6b7280;   /* captions, dates */
    --brd:      #e5e7eb;   /* borders */
    --brd2:     #d1d5db;   /* stronger border */
    --hdr-bg:   rgba(255,255,255,.78);   /* glass header */
    --hdr-brd:  rgba(17,24,39,.10);
    --foot-bg:  #111827;   /* footer */

    /* shadows — minimal */
    --sh0: 0 1px 3px rgba(15,23,42,.06);
    --sh1: 0 3px 12px rgba(15,23,42,.08);
    --sh2: 0 8px 26px rgba(15,23,42,.12);

    /* geometry */
    --max: 1170px;
    --r:   6px;
    --rL:  10px;
    --hH:  72px;
    --tr:  .18s ease;

    /* font */
    --f: 'Dramatna','Arial',sans-serif;
}

/* ─────────────────────────────────────────
   RESET
───────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
    direction:rtl;
    font-size:16px;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    max-width:100%;
    overflow-x:hidden;
}

body {
    font-family:var(--f);
    background:var(--bg);
    color:var(--ink);
    line-height:1.75;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    touch-action:manipulation;
}

/* ─── طھط·ط¨ظٹظ‚ ط§ظ„ط®ط· ط¹ظ„ظ‰ ط§ظ„ظƒظ„ ─── */
h1,h2,h3,h4,h5,h6,p,a,button,input,
textarea,select,label,span,li,td,th { font-family:var(--f); }

a { color:var(--red); text-decoration:none; transition:color var(--tr); }
a:hover { color:var(--rose); }

img { max-width:100%; height:auto; display:block; }
iframe,video,canvas,svg,table,pre {
    max-width:100%;
}
pre {
    overflow-x:auto;
    white-space:pre-wrap;
}
ul,ol { list-style:none; }
button,input,textarea,select {
    font-family:var(--f);
    color:var(--ink);
    border:none;
    outline:none;
    background:none;
    /* ظ…ظ†ط¹ zoom ط¹ظ„ظ‰ iOS */
    font-size:max(16px,1em);
}

/* ─────────────────────────────────────────
   CONTAINER
───────────────────────────────────────── */
.container {
    max-width:var(--max);
    margin:0 auto;
    padding:0 20px;
    width:100%;
    min-width:0;
}

/* ─────────────────────────────────────────
   HEADER
   ─ sticky ط®ظپظٹظپ: ط¨ظٹط¶ط§ط، + border ط£ط³ظپظ„
   ─ ظٹظƒطھط³ط¨ shadow ط¹ظ†ط¯ ط§ظ„طھظ…ط±ظٹط± (.scrolled)
───────────────────────────────────────── */
#site-header {
    position:sticky;
    top:0;
    z-index:200;
    height:var(--hH);
    background:var(--hdr-bg);
    border-bottom:1px solid var(--hdr-brd);
    /* shadow ط®ظپظٹظپ ط¯ط§ط¦ظ…ط§ظ‹ */
    box-shadow:0 1px 0 var(--hdr-brd);
    /* ط§ظ†طھظ‚ط§ظ„ ط³ظ„ط³ ظ„ظ„ظ€ shadow ط¹ظ†ط¯ scroll */
    transition:box-shadow .2s ease;
    backdrop-filter:blur(18px) saturate(150%);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
}
#site-header.scrolled {
    box-shadow:var(--sh1);
}

#site-header .container {
    height:100%;
}

.header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:100%;
    gap:16px;
    min-width:0;
}

/* ط§ظ„ط´ط¹ط§ط± */
.site-logo {
    flex:0 1 clamp(135px,20vw,230px);
    min-width:0;
    display:flex;
    align-items:center;
    max-width:271px;
    height:100%;
}
.site-logo a,
.site-logo .custom-logo-link {
    display:flex;
    align-items:center;
    min-width:0;
    width:100%;
    height:100%;
}
.site-logo img,
.site-logo .custom-logo {
    width:auto;
    max-width:100%;
    height:auto !important;
    max-height:44px;
    object-fit:contain;
    object-position:right center;
    display:block;
}
.site-name-text {
    font-size:clamp(.9rem,3vw,1.25rem);
    font-weight:700;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ط§ظ„ظ‚ط§ط¦ظ…ط© ط§ظ„ط±ط¦ظٹط³ظٹط© */
#main-nav {
    flex:1 1 auto;
    min-width:0;
    display:flex;
    justify-content:center;
    overflow:hidden;
    padding:0;
}
#main-nav > ul,
#main-nav > div > ul {
    display:flex;
    align-items:center;
    gap:2px;
    flex-wrap:nowrap;
    overflow:hidden;
}
#main-nav ul li { flex-shrink:0; }
#main-nav ul li a {
    display:block;
    color:var(--ink2);
    font-size:.87rem;
    padding:6px 10px;
    border-radius:var(--r);
    line-height:1.35;
    white-space:nowrap;
    transition:color var(--tr),background var(--tr);
}
#main-nav ul li a:hover,
#main-nav ul li.current-menu-item > a,
#main-nav ul li.current_page_item > a {
    color:var(--red);
    background:rgba(225,29,72,.10);
}

/* ط£ط¯ظˆط§طھ ط§ظ„ظ‡ظٹط¯ط± */
.header-tools {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

/* ط¨ط­ط« ط¬ظˆط¬ظ„ */
.hdr-search { display:flex; align-items:center; }
.g-search-form {
    display:flex;
    align-items:center;
    background:rgba(255,255,255,.82);
    border:1px solid var(--brd2);
    border-radius:var(--r);
    overflow:hidden;
    transition:border-color var(--tr);
}
.g-search-form:focus-within { border-color:var(--red); }
.g-search-field {
    padding:6px 10px;
    font-size:max(14px,.82rem);
    width:clamp(80px,12vw,150px);
    background:transparent;
    color:var(--ink);
}
.g-search-field::placeholder { color:var(--ink3); }
.g-search-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    background:linear-gradient(135deg,var(--red),#9f1239);
    color:#fff;
    border:none;
    cursor:pointer;
    flex-shrink:0;
    transition:background var(--tr);
}
.g-search-btn:hover { background:linear-gradient(135deg,var(--rose),var(--red)); }
.g-search-btn svg { width:16px; height:16px; fill:#fff; }

/* ط²ط± ط§ظ„ظ‡ط§ظ…ط¨ط±ط؛ط± */
.mob-btn {
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:40px;
    height:40px;
    cursor:pointer;
    background:transparent;
    border:1px solid var(--brd2);
    border-radius:var(--r);
    flex-shrink:0;
    transition:background var(--tr),border-color var(--tr);
    padding:0;
    -webkit-tap-highlight-color:transparent;
}
.mob-btn:hover { background:rgba(225,29,72,.07); border-color:var(--red); }
.mob-btn .bar {
    display:block;
    width:18px;
    height:2px;
    background:var(--ink);
    border-radius:2px;
    transition:transform .25s ease,opacity .25s ease;
    transform-origin:center;
}
.mob-btn.open .bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.mob-btn.open .bar:nth-child(2) { opacity:0; transform:scaleX(0); }
.mob-btn.open .bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ─────────────────────────────────────────
   MOBILE DRAWER
───────────────────────────────────────── */
.mob-mask {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    z-index:300;
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}
.mob-mask.on { display:block; }

.mob-drawer {
    position:fixed;
    top:0;
    right:-105vw;
    width:min(290px,84vw);
    height:100%;
    height:100dvh;
    background:var(--surface);
    z-index:400;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transition:right .28s cubic-bezier(.4,0,.2,1);
    box-shadow:-4px 0 24px rgba(0,0,0,.12);
    border-left:2px solid var(--red);
}
.mob-drawer.on { right:0; }

.drawer-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    border-bottom:1px solid var(--brd);
    flex-shrink:0;
}
.drawer-brand { font-size:1rem; font-weight:700; color:var(--ink); }
.drawer-close {
    width:36px; height:36px;
    background:var(--bg);
    border:1px solid var(--brd);
    border-radius:50%;
    color:var(--ink);
    font-size:1rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background var(--tr),color var(--tr);
    padding:0;
    -webkit-tap-highlight-color:transparent;
}
.drawer-close:hover { background:var(--red); color:#fff; border-color:var(--red); }

.drawer-body {
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding:14px 14px max(20px,env(safe-area-inset-bottom,20px));
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
}

.mob-nav ul { display:flex; flex-direction:column; gap:2px; }
.mob-nav ul li a {
    display:block;
    padding:11px 12px;
    border-radius:var(--r);
    color:var(--ink);
    font-size:.93rem;
    transition:background var(--tr),color var(--tr);
    -webkit-tap-highlight-color:transparent;
    min-height:44px;
    display:flex;
    align-items:center;
}
.mob-nav ul li a:hover,
.mob-nav ul li.current-menu-item > a { background:rgba(225,29,72,.08); color:var(--red); }

.drawer-divider { height:1px; background:var(--brd); margin:12px 0; }

.mob-search-wrap .g-search-form { width:100%; }
.mob-search-wrap .g-search-field {
    flex:1;
    min-width:0;
    font-size:max(16px,.9rem);
    padding:10px 12px;
}
.mob-search-wrap .g-search-btn { width:44px; height:44px; min-width:44px; }

/* ─────────────────────────────────────────
   PAGE STRUCTURE
───────────────────────────────────────── */
#page-wrapper { padding:28px 0 52px; }
.content-wrap  { display:flex; align-items:flex-start; gap:26px; }
.content-wrap > * { min-width:0; }
.main-col      { flex:1; min-width:0; max-width:100%; }

/* ─────────────────────────────────────────
   ARCHIVE HEADING
───────────────────────────────────────── */
.arc-title {
    font-size:clamp(1.1rem,3vw,1.5rem);
    font-weight:700;
    color:var(--ink);
    margin-bottom:22px;
    padding-bottom:10px;
    border-bottom:2px solid var(--brd);
    position:relative;
}
.arc-title::after {
    content:'';
    position:absolute;
    bottom:-2px;
    right:0;
    width:48px;
    height:2px;
    background:linear-gradient(90deg,var(--red),var(--gold));
    border-radius:2px;
}

/* ─────────────────────────────────────────
   CARDS GRID
───────────────────────────────────────── */
.posts-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

/* ─── ط¨ط·ط§ظ‚ط© ط§ظ„ظ…ظ‚ط§ظ„ط© ─── */
.pcard {
    background:var(--surface);
    border-radius:var(--rL);
    overflow:hidden;
    border:1px solid var(--brd);
    box-shadow:var(--sh0);
    display:flex;
    flex-direction:column;
    transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr);
    -webkit-tap-highlight-color:transparent;
}
.pcard:hover {
    transform:translateY(-3px);
    box-shadow:var(--sh2);
    border-color:rgba(225,29,72,.32);
}

/* ط§ظ„طµظˆط±ط© */
.pmedia {
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:var(--bg);
    display:block;
    flex-shrink:0;
}
.pmedia img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .38s ease;
    display:block;
}
.pcard:hover .pmedia img { transform:scale(1.04); }

/* overlay ط®ظپظٹظپ ظپظ‚ط· */
.pmedia::after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.45) 100%);
    pointer-events:none;
}

/* ط¨ط§ط¯ط¬ ط§ظ„طھطµظ†ظٹظپ */
.pcat {
    position:absolute;
    top:9px;
    right:9px;
    background:linear-gradient(135deg,var(--red),#9f1239);
    color:#fff;
    font-size:.65rem;
    font-weight:700;
    padding:3px 9px;
    border-radius:20px;
    z-index:2;
    white-space:nowrap;
    max-width:calc(100% - 18px);
    overflow:hidden;
    text-overflow:ellipsis;
    text-decoration:none;
    transition:background var(--tr);
    letter-spacing:.2px;
}
.pcat:hover { background:linear-gradient(135deg,var(--rose),var(--red)); color:#fff; }

/* ط§ظ„طھط§ط±ظٹط® */
.pdate {
    position:absolute;
    bottom:8px;
    left:8px;
    display:flex;
    align-items:center;
    gap:4px;
    background:rgba(5,7,19,.72);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    color:rgba(255,255,255,.92);
    font-size:.64rem;
    padding:3px 8px;
    border-radius:20px;
    z-index:2;
    white-space:nowrap;
    pointer-events:none;
}
.pdate svg { width:9px; height:9px; fill:#fff; flex-shrink:0; }

/* body ط§ظ„ط¨ط·ط§ظ‚ط© */
.pbody {
    padding:14px 14px 14px;
    display:flex;
    flex-direction:column;
    flex:1;
    gap:7px;
}
.ptitle {
    font-size:.94rem;
    font-weight:700;
    color:var(--ink);
    line-height:1.5;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    transition:color var(--tr);
}
.ptitle a { color:inherit; }
.pcard:hover .ptitle,
.pcard:hover .ptitle a { color:var(--red); }

.pexcerpt {
    font-size:.76rem;
    color:var(--ink2);
    line-height:1.6;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    flex:1;
}

.pfoot {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    padding-top:9px;
    border-top:1px solid var(--brd);
    margin-top:auto;
}
.pmeta { display:flex; align-items:center; gap:8px; }
.pmeta span {
    display:flex;
    align-items:center;
    gap:3px;
    font-size:.68rem;
    color:var(--ink3);
    white-space:nowrap;
}
.pmeta svg { width:10px; height:10px; fill:var(--ink3); }
.pmore {
    display:inline-flex;
    align-items:center;
    gap:3px;
    font-size:.7rem;
    font-weight:600;
    color:var(--red);
    white-space:nowrap;
    transition:gap var(--tr);
    -webkit-tap-highlight-color:transparent;
}
.pcard:hover .pmore { gap:6px; }
.pmore svg { width:10px; height:10px; fill:var(--red); transform:rotate(180deg); }

/* placeholder */
.pno-img {
    width:100%;
    height:100%;
    background:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
}
.pno-img svg { width:28px; height:28px; fill:var(--brd2); }

/* ─── ط§ظ„ط¨ط·ط§ظ‚ط© ط§ظ„ظ…ظ…ظٹط²ط© ─── */
.pcard.featured {
    grid-column:1/-1;
    flex-direction:row;
    min-height:200px;
    max-height:300px;
}
.featured .pmedia {
    width:46%;
    flex-shrink:0;
    aspect-ratio:unset;
    border-radius:0;
    min-height:200px;
    max-height:300px;
}
.featured .pbody { padding:20px 18px; justify-content:center; }
.featured .ptitle { font-size:clamp(.95rem,2vw,1.2rem); -webkit-line-clamp:3; }
.featured .pexcerpt { -webkit-line-clamp:3; font-size:.8rem; }

/* ظ„ط§ طھظˆط¬ط¯ ظ…ظ‚ط§ظ„ط§طھ */
.no-posts {
    text-align:center;
    padding:60px 20px;
    color:var(--ink2);
    background:var(--surface);
    border-radius:var(--rL);
    border:1px solid var(--brd);
}
.no-posts svg { width:44px; height:44px; fill:var(--brd2); margin:0 auto 12px; }

/* طµظپط­ط§طھ ظˆظˆط±ط¯ط¨ط±ظٹط³ ط§ظ„ط«ط§ط¨طھط© */
.page-content {
    background:var(--surface);
    border-radius:var(--rL);
    overflow:hidden;
    box-shadow:var(--sh1);
    border:1px solid var(--brd);
}

.page-content .post-content-area {
    border-top:1px solid var(--brd);
}

.page-links {
    margin-top:24px;
}

/* طµظپط­ط© 404 */
.not-found-page h1,
.static-search-page h1 {
    color:var(--ink);
    font-size:clamp(1.25rem,3vw,1.7rem);
    margin-bottom:8px;
}

.not-found-page p,
.static-search-page p {
    max-width:560px;
    margin:0 auto 22px;
}

.not-found-actions {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.not-found-search,
.static-search-form {
    width:min(360px,100%);
}

.not-found-actions .home-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 18px;
    background:var(--red);
    color:#fff;
    border-radius:var(--r);
    font-size:.9rem;
    font-weight:700;
    transition:background var(--tr);
}

.not-found-actions .home-link:hover {
    background:var(--rose);
    color:#fff;
}

/* ط§ظ„طھط¹ظ„ظٹظ‚ط§طھ */
.comments-area {
    margin-top:22px;
    padding:22px;
    background:var(--surface);
    border:1px solid var(--brd);
    border-radius:var(--rL);
    box-shadow:var(--sh0);
}

.comments-title,
.comment-reply-title {
    color:var(--ink);
    font-size:1.05rem;
    margin-bottom:14px;
}

.comment-list {
    list-style:none;
    padding:0;
    margin:0 0 18px;
}

.comment-list .comment {
    padding:14px 0;
    border-bottom:1px solid var(--brd);
}

.comment-list .comment:last-child {
    border-bottom:0;
}

.comment-body {
    color:var(--ink2);
    font-size:.95rem;
}

.comment-meta,
.comment-metadata {
    font-size:.78rem;
    color:var(--ink3);
    margin-bottom:8px;
}

.comment-form p {
    margin-bottom:12px;
}

.comment-form label {
    display:block;
    color:var(--ink2);
    margin-bottom:5px;
    font-size:.86rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width:100%;
    background:var(--bg);
    border:1px solid var(--brd);
    border-radius:var(--r);
    padding:10px 12px;
}

.comment-form .submit {
    cursor:pointer;
    min-height:42px;
    padding:0 18px;
    background:var(--red);
    color:#fff;
    border-radius:var(--r);
    font-weight:700;
}

/* ─────────────────────────────────────────
   PAGINATION
───────────────────────────────────────── */
.pg-wrap {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;
    margin-top:32px;
    flex-wrap:wrap;
}
.pg-wrap .page-numbers {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 10px;
    background:var(--surface);
    border:1px solid var(--brd);
    border-radius:var(--r);
    color:var(--ink);
    font-size:.86rem;
    transition:all var(--tr);
    -webkit-tap-highlight-color:transparent;
}
.pg-wrap .page-numbers:hover,
.pg-wrap .page-numbers.current { background:var(--red); border-color:var(--red); color:#fff; }
.pg-wrap .page-numbers.dots { background:transparent; border-color:transparent; color:var(--ink3); }

.load-more-wrap,
.pg-wrap:has(.load-more-btn) {
    display:flex;
    justify-content:center;
    margin-top:32px;
}

.load-more-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:0 22px;
    background:var(--red);
    color:#fff;
    border:1px solid var(--red);
    border-radius:var(--r);
    font-size:.9rem;
    font-weight:700;
    box-shadow:var(--sh0);
    transition:background var(--tr),border-color var(--tr),transform var(--tr),box-shadow var(--tr);
}

.load-more-btn:hover {
    background:var(--rose);
    border-color:var(--rose);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:var(--sh1);
}

.load-more-btn svg {
    width:14px;
    height:14px;
    fill:currentColor;
    transform:rotate(180deg);
}

/* ─────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────── */
.breadcrumb-wrap {
    margin-bottom:14px;
    font-size:.76rem;
    color:var(--ink3);
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:2px;
    padding:7px 12px;
    background:var(--surface);
    border:1px solid var(--brd);
    border-radius:var(--r);
}
.breadcrumb-wrap a { color:var(--ink3); transition:color var(--tr); }
.breadcrumb-wrap a:hover { color:var(--red); }
.breadcrumb-wrap .sep { margin:0 4px; color:var(--brd2); user-select:none; }

/* ─────────────────────────────────────────
   SINGLE POST
───────────────────────────────────────── */
.single-post article {
    background:var(--surface);
    border-radius:var(--rL);
    overflow:hidden;
    box-shadow:var(--sh1);
    border:1px solid var(--brd);
}

/* ط¹ظ†ظˆط§ظ† ط§ظ„ظ…ظ‚ط§ظ„ H1 — ط£ط³ظˆط¯ ظ…ط«ظ„ ظ„ظˆظ† ط§ظ„ظ†طµ */
.post-title {
    font-size:clamp(1.2rem,3.5vw,1.8rem);
    font-weight:700;
    color:var(--ink);
    line-height:1.4;
    padding:20px 22px 12px;
}

/* ط§ظ„طµظˆط±ط© ط§ظ„ظ…طµط؛ط±ط© */
.post-thumb-wrap {
    width:100%;
    background:var(--bg);
    line-height:0;
    font-size:0;
    border-bottom:1px solid var(--brd);
}
.post-thumb-wrap img {
    width:100%;
    height:auto;
    display:block;
    max-width:100%;
    aspect-ratio:1200/630;
}

/* طµظ†ط¯ظˆظ‚ ط§ظ„طھط§ط±ظٹط® ظˆط§ظ„ظ…ط´ط§ط±ظƒط© */
.date-share-icons {
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 20px;
    background:#f9fafb;
    border-bottom:1px solid var(--brd);
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
}
.date-share-icons::-webkit-scrollbar { display:none; }

.published-date { white-space:nowrap; font-size:.74rem; color:var(--ink3); flex-shrink:0; }
.date-share-icons .divider { width:1px; height:14px; background:var(--brd2); flex-shrink:0; }

.text-resize { display:flex; align-items:center; gap:4px; flex-shrink:0; white-space:nowrap; }
#text_resize_clear { font-size:.7rem; color:var(--ink3); }
.changer {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px; height:28px;
    background:var(--surface);
    border:1px solid var(--brd2);
    border-radius:var(--r);
    font-size:.76rem;
    color:var(--ink);
    cursor:pointer;
    transition:background var(--tr),border-color var(--tr),color var(--tr);
    -webkit-tap-highlight-color:transparent;
}
.changer:hover { background:var(--red); border-color:var(--red); color:#fff; }

.share-and-copy {
    display:flex;
    align-items:center;
    gap:7px;
    flex-shrink:0;
    white-space:nowrap;
    margin-right:auto;
}
.share-buttons-wrapper { display:flex; align-items:center; gap:4px; }
.share-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px; height:30px;
    border-radius:50%;
    background:var(--surface);
    border:1px solid var(--brd2);
    color:var(--ink);
    cursor:pointer;
    flex-shrink:0;
    transition:background var(--tr),transform var(--tr),border-color var(--tr),color var(--tr);
    -webkit-tap-highlight-color:transparent;
}
.share-btn:hover { transform:scale(1.1); border-color:transparent; }
.share-btn.facebook:hover { background:#1877F2; color:#fff; }
.share-btn.twitter:hover  { background:#111827; color:#fff; }
.share-btn.whatsapp:hover { background:#25D366; color:#fff; }
.share-btn.telegram:hover { background:#229ED9; color:#fff; }
.share-btn svg { width:13px; height:13px; fill:currentColor; }

.copy-link {
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:.72rem;
    color:var(--red);
    background:rgba(225,29,72,.12);
    padding:4px 10px;
    border-radius:20px;
    white-space:nowrap;
    border:1px solid rgba(225,29,72,.2);
    cursor:pointer;
    flex-shrink:0;
    min-height:28px;
    transition:background var(--tr),color var(--tr);
    -webkit-tap-highlight-color:transparent;
}
.copy-link:hover { background:var(--red); color:#fff; }
.copy-link svg { width:11px; height:11px; fill:currentColor; flex-shrink:0; }
.copy-text { white-space:nowrap; }

/* ─── ظ…ط­طھظˆظ‰ ط§ظ„ظ…ظ‚ط§ظ„ ─── */
/* ط§ظ„ط®ظ„ظپظٹط© #f7f7f6 ظˆط§ظ„ظ†طµ ط£ط³ظˆط¯ */
.post-content-area {
    padding:24px 22px;
    font-size:1.02rem;
    line-height:1.92;
    color:var(--ink);
    background:var(--bg);
}
.post-content-area p { margin-bottom:1.15em; }

/* ط¹ظ†ط§ظˆظٹظ† ط§ظ„ظ…ط­طھظˆظ‰ = ط£ط­ظ…ط± */
.post-content-area h2 {
    font-size:clamp(1.05rem,2.8vw,1.28rem);
    color:var(--rose);
    font-weight:700;
    margin:1.6em 0 .55em;
    padding-bottom:6px;
    border-bottom:2px solid rgba(225,29,72,.24);
    line-height:1.4;
}
.post-content-area h3 {
    font-size:clamp(.98rem,2.4vw,1.1rem);
    color:var(--rose);
    font-weight:700;
    margin:1.3em 0 .45em;
    line-height:1.4;
}
.post-content-area h4,
.post-content-area h5,
.post-content-area h6 {
    color:var(--rose);
    font-weight:600;
    margin:1.1em 0 .4em;
}

.post-content-area ul,
.post-content-area ol { padding-right:20px; margin-bottom:1.15em; list-style:disc; }
.post-content-area ol { list-style:decimal; }
.post-content-area li { margin-bottom:.35em; }

.post-content-area blockquote {
    border-right:4px solid var(--red);
    padding:12px 16px;
    margin:1.4em 0;
    background:linear-gradient(135deg,rgba(225,29,72,.12),rgba(245,158,11,.05));
    border-radius:0 var(--r) var(--r) 0;
    color:var(--ink2);
    font-style:italic;
}

.post-content-area a { color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.post-content-area a:hover { color:var(--rose); }

/* طµظˆط± ط§ظ„ظ…ط­طھظˆظ‰ — 60% ظ…ظڈطھظ…ط±ظƒط²ط© */
.post-content-area :where(figure, .wp-caption) {
    box-sizing:border-box;
    inline-size:min(100%,680px) !important;
    max-inline-size:100% !important;
    margin-inline:auto !important;
}

.post-content-area img {
    display:block;
    inline-size:auto !important;
    max-inline-size:min(100%,680px) !important;
    block-size:auto !important;
    max-block-size:min(72vh,620px);
    margin:18px auto;
    border-radius:var(--r);
    box-shadow:var(--sh1);
    object-fit:contain;
}

/* ط¬ط¯ظˆظ„ ظ…طھط¬ط§ظˆط¨ */
.post-content-area table {
    width:100%;
    max-width:100%;
    overflow-x:auto;
    display:block;
    border-collapse:collapse;
    margin-bottom:1.15em;
}
.post-content-area td,
.post-content-area th {
    padding:8px 12px;
    border:1px solid var(--brd2);
    font-size:.86rem;
}
.post-content-area th { background:var(--surface); font-weight:600; }

/* ط¬ط¯ظˆظ„ ط§ظ„ظ…ط­طھظˆظ‰ */
.post-toc {
    background:rgba(225,29,72,.04);
    border:1px solid rgba(225,29,72,.2);
    border-right:3px solid var(--red);
    border-radius:0 var(--r) var(--r) 0;
    padding:13px 16px 14px;
    margin:18px 0 22px;
    font-size:.86rem;
}
.toc-title {
    font-weight:700;
    color:var(--ink);
    margin-bottom:9px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    user-select:none;
    min-height:32px;
}
.toc-toggle { font-size:.82rem; color:var(--red); transition:transform .2s ease; display:inline-block; }
.toc-toggle.closed { transform:rotate(-90deg); }
.toc-list { padding-right:16px; list-style:decimal; color:var(--ink2); }
.toc-list.hidden { display:none; }
.toc-list li { margin-bottom:5px; }
.toc-list a { color:var(--ink2); transition:color .15s; }
.toc-list a:hover { color:var(--red); }

/* ط§ظ‚ط±ط£ ط§ظ„ظ…ط²ظٹط¯ */
.read-more-line {
    margin:14px 22px;
    padding:10px 14px;
    background:rgba(225,29,72,.05);
    border-radius:var(--r);
    border-right:3px solid var(--red);
    font-size:.84rem;
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
}
.read-more-line strong { color:var(--red); white-space:nowrap; }
.read-more-line a { color:var(--ink); }
.read-more-line a:hover { color:var(--red); }

/* ط§ظ„ظˆط³ظˆظ… */
.post-tags-wrap {
    padding:13px 22px;
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
    border-top:1px solid var(--brd);
    background:var(--surface);
}
.tags-icon { width:15px; height:15px; fill:var(--ink2); flex-shrink:0; }
.tags-list { display:flex; flex-wrap:wrap; gap:6px; }

/* tag-item = ط£ط²ط±ظ‚ ط´ط¨ظ‡ ط´ظپط§ظپ */
.tag-item {
    display:inline-flex;
    align-items:center;
    padding:4px 12px;
    background:rgba(99,102,241,.14);
    border:1px solid rgba(99,102,241,.32);
    border-radius:20px;
    font-size:.73rem;
    color:#c4b5fd;
    font-weight:500;
    transition:background var(--tr),color var(--tr),border-color var(--tr);
    min-height:26px;
    -webkit-tap-highlight-color:transparent;
    text-decoration:none;
}
.tag-item:hover {
    background:rgba(99,102,241,.22);
    color:#fff;
    border-color:rgba(99,102,241,.62);
}

/* ظ‚ط³ظ… ط§ظ„ظ…ط´ط§ط±ظƒط© ط£ط³ظپظ„ ط§ظ„ظ…ظ‚ط§ظ„ */
.post-social-share {
    padding:16px 22px;
    border-top:1px solid var(--brd);
    background:var(--surface);
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.post-social-share .share-label {
    display:flex;
    align-items:center;
    gap:5px;
    font-size:.84rem;
    font-weight:600;
    color:var(--ink);
    white-space:nowrap;
    flex-shrink:0;
}
.post-social-share .share-label svg { width:14px; height:14px; fill:var(--red); }
.share-btns-colored { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.sc-btn {
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:7px 14px;
    border-radius:24px;
    font-size:.77rem;
    font-weight:600;
    color:#fff;
    text-decoration:none;
    transition:transform var(--tr),filter var(--tr);
    white-space:nowrap;
    min-height:34px;
    box-shadow:var(--sh0);
    -webkit-tap-highlight-color:transparent;
}
.sc-btn:hover { transform:translateY(-2px); filter:brightness(1.08); color:#fff; }
.sc-btn svg { width:14px; height:14px; fill:#fff; flex-shrink:0; }
.sc-facebook { background:#1877F2; }
.sc-twitter  { background:#111827; }
.sc-whatsapp { background:#25D366; }
.sc-telegram { background:#229ED9; }

/* ظ…ظ‚ط§ظ„ط§طھ ط°ط§طھ ط§ظ„طµظ„ط© */
.related-section { margin-top:26px; }
.sec-title {
    font-size:1rem;
    font-weight:700;
    color:var(--ink);
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:7px;
}
.sec-title::before {
    content:'';
    width:3px; height:18px;
    background:var(--red);
    border-radius:2px;
    flex-shrink:0;
}
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.rel-card {
    background:var(--surface);
    border-radius:var(--r);
    overflow:hidden;
    border:1px solid var(--brd);
    box-shadow:var(--sh0);
    transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr);
    -webkit-tap-highlight-color:transparent;
}
.rel-card:hover { transform:translateY(-3px); box-shadow:var(--sh2); border-color:var(--brd2); }
.rel-card .rthumb { width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--bg); }
.rel-card .rthumb img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.rel-card:hover .rthumb img { transform:scale(1.04); }
.rel-card .rbody { padding:9px 11px 11px; }
.rel-card .rtitle {
    font-size:.8rem;
    color:var(--ink);
    line-height:1.45;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    transition:color var(--tr);
}
.rel-card:hover .rtitle { color:var(--red); }

/* ─────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────── */
#sidebar {
    width:286px;
    flex-shrink:0;
    position:sticky;
    top:calc(var(--hH) + 14px);
    max-height:calc(100vh - var(--hH) - 28px);
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--brd2) transparent;
}
#sidebar::-webkit-scrollbar { width:3px; }
#sidebar::-webkit-scrollbar-thumb { background:var(--brd2); border-radius:2px; }

.sidebar-widget {
    background:var(--surface);
    border-radius:var(--r);
    overflow:hidden;
    border:1px solid var(--brd);
    margin-bottom:18px;
}
.widget-title {
    font-size:.88rem;
    font-weight:700;
    color:var(--ink);
    padding:11px 14px;
    background:var(--surface);
    border-bottom:2px solid var(--red);
    display:flex;
    align-items:center;
    gap:6px;
}
.widget-title::before {
    content:'';
    width:3px; height:14px;
    background:var(--red);
    border-radius:2px;
    flex-shrink:0;
}
.sidebar-post-item {
    display:flex;
    align-items:flex-start;
    gap:9px;
    padding:11px 12px;
    border-bottom:1px solid var(--brd);
    transition:background var(--tr);
    text-decoration:none;
    min-height:44px;
    -webkit-tap-highlight-color:transparent;
}
.sidebar-post-item:last-child { border-bottom:none; }
.sidebar-post-item:hover { background:rgba(225,29,72,.04); }
.sb-rank {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    margin-top:13px;
    flex:0 0 24px;
    border-radius:50%;
    background:#f3f4f6;
    border:1px solid var(--brd);
    color:var(--ink2);
    font-size:.72rem;
    font-weight:800;
    line-height:1;
}
.sb-thumb {
    width:76px; height:52px;
    flex-shrink:0;
    border-radius:var(--r);
    overflow:hidden;
    background:var(--bg);
}
.sb-thumb img { width:100%; height:100%; object-fit:cover; }
.sb-info { flex:1; min-width:0; }
.sb-title {
    font-size:.78rem;
    color:var(--ink);
    line-height:1.45;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    transition:color var(--tr);
}
.sidebar-post-item:hover .sb-title { color:var(--red); }
.sb-date { font-size:.66rem; color:var(--ink3); margin-top:3px; }
.sb-empty { padding:14px; font-size:.78rem; color:var(--ink3); text-align:center; }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
#site-footer {
    background:linear-gradient(180deg,rgba(5,7,19,.92),var(--foot-bg));
    border-top:1px solid rgba(225,29,72,.38);
    padding:28px 0;
    text-align:center;
    padding-bottom:max(24px,env(safe-area-inset-bottom,24px));
}

/* ظ‚ط§ط¦ظ…ط© ط§ظ„ظپظˆطھط± */
.footer-nav { margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-nav-list {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:4px;
    list-style:none;
}
.footer-nav-list li a {
    display:block;
    color:rgba(255,255,255,.65);
    font-size:.8rem;
    padding:5px 12px;
    border-radius:var(--r);
    transition:color var(--tr),background var(--tr);
    white-space:nowrap;
    text-decoration:none;
}
.footer-nav-list li a:hover { color:#fff; background:rgba(225,29,72,.2); }

/* ط£ظٹظ‚ظˆظ†ط§طھ ط§ظ„طھظˆط§طµظ„ */
.footer-social {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:16px;
}
.fsoc-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px; height:42px;
    border-radius:50%;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.75);
    transition:transform var(--tr),background var(--tr),border-color var(--tr);
    -webkit-tap-highlight-color:transparent;
}
.fsoc-btn:hover { transform:translateY(-3px) scale(1.08); border-color:transparent; color:#fff; }
.fsoc-btn svg { width:18px; height:18px; fill:currentColor; }
.fsoc-youtube:hover   { background:#FF0000; }
.fsoc-instagram:hover { background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%); }
.fsoc-tiktok:hover    { background:#010101; }
.fsoc-facebook:hover  { background:#1877F2; }
.fsoc-twitter:hover   { background:#111; }

.footer-inner { color:rgba(255,255,255,.5); font-size:.8rem; }
.footer-inner a { color:var(--red); }
.footer-inner a:hover { color:#fff; }

/* ─────────────────────────────────────────
   EMBEDS & MEDIA (ط§ط­طھظˆط§ط، ط§ظ„ظˆط³ط§ط¦ط·)
───────────────────────────────────────── */
.post-content-area,
.entry-content {
    overflow-wrap:break-word;
    word-break:break-word;
}
.embed-wrap {
    position:relative;
    width:100%;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    border-radius:var(--r);
    margin:18px 0;
}
.embed-wrap iframe,
.embed-wrap object,
.embed-wrap embed {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    border:none;
}
.media-wrap { width:100%; margin:14px 0; }
.media-wrap video { width:100%; height:auto; border-radius:var(--r); }
.media-wrap audio  { width:100%; }

/* wp-caption */
.wp-caption,
figure.wp-caption {
    display:block;
    max-width:100%;
    margin:18px auto;
    border-radius:var(--r);
    overflow:hidden;
    background:var(--surface);
    border:1px solid var(--brd);
}
.wp-caption img {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
    border-radius:0;
    box-shadow:none;
}
.wp-caption-text,
figcaption {
    display:block;
    padding:9px 12px 10px;
    background:var(--bg);
    color:var(--ink2);
    border-top:1px solid var(--brd);
    font-size:.78rem;
    line-height:1.65;
    text-align:center;
    overflow-wrap:anywhere;
}

.post-content-area figure.wp-caption,
.post-content-area .wp-caption {
    inline-size:min(100%,680px) !important;
    max-inline-size:100% !important;
}

.post-content-area figure.wp-caption img,
.post-content-area .wp-caption img {
    inline-size:auto !important;
    max-inline-size:100% !important;
    block-size:auto !important;
    max-block-size:min(72vh,620px);
}

/* ─────────────────────────────────────────
   ADS (ط¥ط¹ظ„ط§ظ†ط§طھ ط£ط¯ط³ظ†ط³)
───────────────────────────────────────── */
.drm-ad-wrap {
    width:100%;
    max-width:100%;
    overflow:hidden;
    margin:22px 0;
    text-align:center;
    clear:both;
}
.drm-ad-wrap::before {
    content:attr(aria-label);
    display:block;
    font-size:.58rem;
    color:var(--ink3);
    letter-spacing:.6px;
    text-transform:uppercase;
    margin-bottom:5px;
    opacity:.6;
}
.drm-ad-wrap ins.adsbygoogle {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
}
.drm-ad-wrap:empty { display:none; }

/* ─────────────────────────────────────────
   .horSp
───────────────────────────────────────── */
.horSp,hr.horSp {
    background-color:rgba(255,255,255,.05);
    border:none;
    border-bottom:1px solid var(--brd2);
    height:1px;
    margin:18px 0;
    clear:both;
    display:block;
}

/* ─────────────────────────────────────────
   GLOBAL UI
───────────────────────────────────────── */
.copy-toast {
    position:fixed;
    bottom:24px; left:50%;
    transform:translateX(-50%) translateY(12px);
    background:var(--ink);
    color:#fff;
    padding:9px 22px;
    border-radius:30px;
    font-size:.84rem;
    z-index:9999;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease,transform .25s ease;
    white-space:nowrap;
    box-shadow:var(--sh2);
}
.copy-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.back-top {
    position:fixed;
    bottom:max(22px,env(safe-area-inset-bottom,22px));
    left:18px;
    width:40px; height:40px;
    background:var(--ink);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border:none;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity var(--tr),visibility var(--tr),transform var(--tr),background var(--tr);
    z-index:100;
    box-shadow:var(--sh2);
    -webkit-tap-highlight-color:transparent;
}
.back-top.show { opacity:1; visibility:visible; transform:translateY(0); }
.back-top:hover { background:var(--red); transform:translateY(-2px); }
.back-top svg { width:16px; height:16px; fill:#fff; }

/* ─────────────────────────────────────────
   MEDIA QUERIES
───────────────────────────────────────── */

/* 1024px */
@media(max-width:1024px){
    .header-inner { gap:12px; }
    .site-logo { flex-basis:clamp(128px,20vw,210px); }
    .site-logo img,.site-logo .custom-logo { max-height:40px; }
    #main-nav ul li a { font-size:.8rem; padding:6px 8px; }
    .hdr-search .g-search-field { width:clamp(70px,10vw,120px); }
}

/* 920px — ظ†ظ‚ظ„ ط§ظ„ظ‚ط§ط¦ظ…ط© ظ„ظ„ط¯ط±ط¬ ظ‚ط¨ظ„ طھط²ط§ط­ظ… ط§ظ„ظ„ظˆط؛ظˆ */
@media(max-width:920px){
    #main-nav { display:none; }
    .mob-btn { display:flex; }
    .site-logo { flex-basis:clamp(140px,30vw,220px); }
}

/* 992px — ط¬ط§ظ†ط¨ظٹ ظ„ظ„ط£ط³ظپظ„ */
@media(max-width:992px){
    .content-wrap { flex-direction:column; }
    #sidebar { width:100%; position:static; max-height:none; overflow:visible; }
    .posts-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
    .related-grid { grid-template-columns:repeat(2,1fr); }
    .pcard.featured { flex-direction:column; max-height:none; }
    .featured .pmedia { width:100%; max-height:240px; aspect-ratio:16/9; min-height:unset; }
}

/* 860px — ط¥ط®ظپط§ط، ط§ظ„ط¨ط­ط« */
@media(max-width:860px){
    .hdr-search { display:none; }
    .mob-btn { display:flex; }
    .header-inner { gap:10px; }
}

/* 768px — ط¥ط®ظپط§ط، ط§ظ„ظ‚ط§ط¦ظ…ط© */
@media(max-width:768px){
    :root { --hH:54px; }
    .container { padding:0 14px; }
    #main-nav { display:none; }
    .hdr-search { display:none; }
    .mob-btn { display:flex; }
    .site-logo { flex-basis:min(220px,58vw); max-width:min(220px,58vw); }
    .site-logo img,.site-logo .custom-logo {
        max-height:38px;
    }
    .posts-grid { grid-template-columns:1fr; gap:12px; }
    .related-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .post-title { font-size:clamp(1.1rem,4vw,1.3rem); padding:14px 16px 10px; }
    .post-content-area { padding:16px; font-size:.96rem; }
    .date-share-icons { padding:7px 14px; gap:6px; }
    .post-social-share,.post-tags-wrap { padding:12px 16px; }
    .read-more-line { margin:10px 16px; }
    .breadcrumb-wrap { padding:6px 10px; font-size:.73rem; }
    #sidebar { display:none; }
}

/* 600px */
@media(max-width:600px){
    .related-grid { grid-template-columns:1fr; }
    .featured .pexcerpt { display:none; }
    .post-content-area img {
        max-inline-size:100% !important;
        max-block-size:62vh;
    }
    .post-content-area figure.wp-caption,
    .post-content-area .wp-caption {
        inline-size:100% !important;
        max-inline-size:100% !important;
    }
}

/* 480px */
@media(max-width:480px){
    .container { padding:0 12px; }
    .copy-text { display:none; }
    .copy-link { padding:4px 8px; }
    .published-date { font-size:.68rem; }
    #text_resize_clear { display:none; }
    .back-top { width:38px; height:38px; left:12px; }
    .pbody { padding:11px 12px; gap:6px; }
    .ptitle { font-size:.9rem; }
    .sc-btn span { display:none; }
    .sc-btn { padding:7px 10px; border-radius:50%; width:36px; height:36px; justify-content:center; }
    .post-content-area img {
        max-inline-size:100% !important;
        max-block-size:58vh;
    }
    .post-content-area figure.wp-caption,
    .post-content-area .wp-caption {
        inline-size:100% !important;
        max-inline-size:100% !important;
    }
}

/* 430px */
@media(max-width:430px){
    .site-logo { flex-basis:min(180px,58vw); max-width:min(180px,58vw); }
    .site-logo img,.site-logo .custom-logo {
        max-height:34px;
    }
    .mob-drawer { width:min(280px,88vw); }
}

/* 375px */
@media(max-width:375px){
    :root { --hH:50px; }
    .container { padding:0 10px; }
    .site-logo { flex-basis:min(160px,58vw); max-width:min(160px,58vw); }
    .mob-btn { width:38px; height:38px; }
}

/* 360px — Galaxy J7 Pro */
@media(max-width:360px){
    :root { --hH:48px; }
    .container { padding:0 8px; }
    .site-logo img,.site-logo .custom-logo {
        max-height:30px;
    }
    .date-share-icons .divider { display:none; }
    .share-btn { width:26px; height:26px; }
    .share-btn svg { width:11px; height:11px; }
    .related-grid { grid-template-columns:1fr; }
    .mob-drawer { width:min(265px,92vw); }
}

/* 320px */
@media(max-width:320px){
    .container { padding:0 6px; }
    .ptitle { font-size:.85rem; }
    .pexcerpt { display:none; }
}

/* ط·ط¨ظ‚ط© طھط¬ط§ظˆط¨ ط´ط§ظ…ظ„ط© ظ„ظ„ط£ط¬ظ‡ط²ط© ط§ظ„ط´ط§ط¦ط¹ط© */
@media(min-width:993px) and (max-width:1200px){
    .container { max-width:100%; }
    .posts-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .related-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media(max-width:834px){
    #page-wrapper { padding:20px 0 42px; }
    .content-wrap {
        display:block;
    }
    .main-col,
    #sidebar {
        width:100%;
        max-width:100%;
    }
    .posts-grid,
    .related-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .pcard.featured {
        display:flex;
        flex-direction:column;
        min-height:0;
        max-height:none;
    }
    .featured .pmedia {
        width:100%;
        min-height:0;
        max-height:none;
        aspect-ratio:16/9;
    }
    .single-post article,
    .page-content,
    .sidebar-widget,
    .comments-area {
        border-radius:8px;
    }
}

@media(max-width:640px){
    .container {
        padding-inline:12px;
    }
    #page-wrapper {
        padding:14px 0 32px;
    }
    .content-wrap {
        gap:0;
    }
    .arc-title {
        font-size:1.05rem;
        margin-bottom:14px;
    }
    .posts-grid,
    .related-grid {
        grid-template-columns:minmax(0,1fr);
        gap:12px;
    }
    .pcard,
    .single-post article,
    .page-content,
    .comments-area,
    .sidebar-widget {
        border-radius:7px;
    }
    .pmedia,
    .featured .pmedia {
        aspect-ratio:16/9;
    }
    .pbody {
        padding:12px;
    }
    .post-title {
        padding:13px 14px 10px;
        font-size:1.12rem;
        line-height:1.45;
    }
    .post-thumb-wrap img {
        aspect-ratio:auto;
    }
    .post-content-area {
        padding:14px;
        font-size:.95rem;
        line-height:1.86;
    }
    .post-content-area :where(p, li, blockquote, h1, h2, h3, h4, h5, h6, a, figcaption, .wp-caption-text) {
        overflow-wrap:anywhere;
        word-break:normal;
    }
    .post-content-area :where(img, figure, .wp-caption, iframe, video, table, pre, blockquote) {
        max-inline-size:100% !important;
    }
    .post-content-area :where(figure, .wp-caption) {
        inline-size:100% !important;
    }
    .post-content-area img,
    .post-content-area figure.wp-caption img,
    .post-content-area .wp-caption img {
        inline-size:auto !important;
        max-inline-size:100% !important;
        max-block-size:56vh;
    }
    .wp-caption-text,
    figcaption {
        font-size:.74rem;
        line-height:1.55;
        padding:8px 10px;
    }
    .date-share-icons {
        padding:7px 12px;
        gap:6px;
        align-items:center;
    }
    .share-and-copy {
        gap:5px;
    }
    .share-btn {
        width:28px;
        height:28px;
    }
    .copy-link {
        min-height:28px;
        padding:4px 8px;
    }
    .post-social-share,
    .post-tags-wrap {
        padding:12px 14px;
    }
    .share-btns-colored {
        width:100%;
    }
    .sc-btn {
        min-width:34px;
        justify-content:center;
    }
    .read-more-line {
        margin:10px 14px;
    }
}

@media(max-width:430px){
    .container {
        padding-inline:10px;
    }
    .header-inner {
        gap:8px;
    }
    .site-logo {
        flex-basis:min(168px,56vw);
        max-width:min(168px,56vw);
    }
    .mob-btn {
        width:38px;
        height:38px;
    }
    .post-content-area {
        padding:12px;
        font-size:.93rem;
    }
    .post-content-area h2 {
        font-size:1.04rem;
    }
    .post-content-area h3 {
        font-size:.98rem;
    }
    .date-share-icons {
        padding-inline:10px;
    }
    .published-date {
        font-size:.66rem;
    }
    .text-resize {
        display:none;
    }
    .post-social-share .share-label {
        width:100%;
        white-space:normal;
    }
    .sc-btn span {
        display:none;
    }
    .sc-btn {
        width:36px;
        height:36px;
        padding:0;
        border-radius:50%;
    }
    .comments-area {
        padding:14px 12px;
    }
}

/* iPhone SE 2/3 ظˆظ…ط§ ظٹظ‚ط§ط±ط¨ظ‡ */
@media(max-width:390px){
    :root { --hH:50px; }
    .container {
        padding-inline:8px;
    }
    .site-logo {
        flex-basis:min(150px,54vw);
        max-width:min(150px,54vw);
    }
    .site-logo img,
    .site-logo .custom-logo {
        max-height:30px;
    }
    #page-wrapper {
        padding-top:10px;
    }
    .pcat {
        font-size:.6rem;
        padding:2px 7px;
    }
    .pdate {
        font-size:.58rem;
        padding:2px 7px;
    }
    .pbody {
        padding:10px;
    }
    .ptitle {
        font-size:.88rem;
        line-height:1.48;
    }
    .pfoot {
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }
    .pmore,
    .pmeta span {
        font-size:.66rem;
    }
    .post-title {
        font-size:1.04rem;
        padding:12px 12px 9px;
    }
    .post-content-area {
        padding:11px;
        font-size:.91rem;
        line-height:1.82;
    }
    .post-content-area img,
    .post-content-area figure.wp-caption img,
    .post-content-area .wp-caption img {
        max-block-size:52vh;
    }
    .wp-caption-text,
    figcaption {
        font-size:.7rem;
    }
    .copy-link {
        width:28px;
        justify-content:center;
        padding:0;
    }
    .copy-link svg {
        width:12px;
        height:12px;
    }
    .mob-drawer {
        width:min(276px,92vw);
    }
}

/* iPhone SE ط§ظ„ط¬ظٹظ„ ط§ظ„ط£ظˆظ„ ظˆط£ط¬ظ‡ط²ط© 320px */
@media(max-width:340px){
    :root { --hH:48px; }
    .container {
        padding-inline:6px;
    }
    .site-logo {
        flex-basis:min(132px,52vw);
        max-width:min(132px,52vw);
    }
    .site-logo img,
    .site-logo .custom-logo {
        max-height:28px;
    }
    .mob-btn {
        width:36px;
        height:36px;
    }
    .post-title {
        font-size:1rem;
    }
    .post-content-area {
        padding:10px;
        font-size:.89rem;
    }
    .date-share-icons {
        padding-inline:8px;
    }
    .published-date {
        font-size:.62rem;
    }
    .share-btn {
        width:26px;
        height:26px;
    }
    .post-tags-wrap,
    .post-social-share {
        padding-inline:10px;
    }
}

/* Landscape mobile */
@media(max-height:480px) and (orientation:landscape){
    :root { --hH:44px; }
    #page-wrapper { padding:16px 0 30px; }
    .mob-drawer { width:min(250px,58vw); }
}

/* Print */
@media print{
    #site-header,.mob-btn,.mob-drawer,.mob-mask,
    .back-top,.copy-toast,
    .post-social-share,.date-share-icons,
    .footer-social,.drm-ad-wrap,
    #sidebar,.pg-wrap { display:none !important; }
    body { background:#fff; color:#000; font-size:11pt; }
    .container { max-width:100%; padding:0; }
    .post-title { font-size:18pt; }
    .post-content-area { padding:0; font-size:11pt; background:#fff; }
    .post-content-area img { max-width:100%; }
    a { color:#000; text-decoration:underline; }
    .pcard,#site-footer { border:1px solid #ccc; box-shadow:none; }
}