/*
Theme Name: Jannah Plus
Theme URI: https://example.com/jannah-plus
Author: Custom Build
Author URI: https://example.com
Description: قالب أخبار ومقالات عصري مستوحى من قالب Jannah، مع وضع ليلي، أداء فائق السرعة، تحسين SEO متقدم، نظام تفاعل اجتماعي (تعليقات وتقييمات ومشاركة)، ولوحة تحكم مخصصة سهلة الاستخدام.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: jannah-plus
Tags: news, blog, dark-mode, rtl-language-support, custom-menu, custom-colors, translation-ready
*/

/* =========================================================
   0. CSS VARIABLES (LIGHT / DARK THEMES)
========================================================= */
:root{
  --jp-bg: #f5f6f8;
  --jp-surface: #ffffff;
  --jp-surface-2: #f0f1f4;
  --jp-text: #16181d;
  --jp-text-muted: #6b7280;
  --jp-border: #e5e7eb;
  --jp-primary: #d92626;
  --jp-primary-dark: #a91d1d;
  --jp-primary-contrast: #ffffff;
  --jp-accent: #2563eb;
  --jp-success: #16a34a;
  --jp-warning: #d97706;
  --jp-shadow: 0 1px 2px rgba(16,18,23,.06), 0 4px 16px rgba(16,18,23,.06);
  --jp-shadow-lg: 0 10px 30px rgba(16,18,23,.12);
  --jp-radius-sm: 6px;
  --jp-radius: 12px;
  --jp-radius-lg: 20px;
  --jp-font: "Cairo","Tajawal","IBM Plex Sans Arabic",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --jp-container: 1240px;
  --jp-transition: .2s ease;
}

html[data-jp-theme="dark"]{
  --jp-bg: #0e0f13;
  --jp-surface: #16181d;
  --jp-surface-2: #1d2027;
  --jp-text: #eef0f4;
  --jp-text-muted: #9aa1ad;
  --jp-border: #262933;
  --jp-primary: #ff4d4d;
  --jp-primary-dark: #e23c3c;
  --jp-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  --jp-shadow-lg: 0 10px 30px rgba(0,0,0,.5);
}

/* =========================================================
   1. RESET & BASE
========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--jp-bg);
  color:var(--jp-text);
  font-family:var(--jp-font);
  line-height:1.75;
  font-size:16px;
  transition:background var(--jp-transition), color var(--jp-transition);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; }
::selection{ background:var(--jp-primary); color:#fff; }

.jp-container{ max-width:var(--jp-container); margin-inline:auto; padding-inline:20px; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }
.skip-link{ position:absolute; top:-100px; inset-inline-start:10px; background:var(--jp-primary); color:#fff; padding:10px 16px; z-index:9999; border-radius:0 0 8px 8px; transition:top .2s; }
.skip-link:focus{ top:0; }

/* =========================================================
   2. TOP BAR + HEADER
========================================================= */
.jp-topbar{ background:var(--jp-surface-2); border-bottom:1px solid var(--jp-border); font-size:13px; color:var(--jp-text-muted); }
.jp-topbar .jp-container{ display:flex; align-items:center; justify-content:space-between; height:38px; }
.jp-topbar-date{ display:flex; align-items:center; gap:6px; }
.jp-topbar-social a{ margin-inline-start:12px; opacity:.75; transition:opacity var(--jp-transition); }
.jp-topbar-social a:hover{ opacity:1; color:var(--jp-primary); }

.jp-header{ position:sticky; top:0; z-index:500; background:var(--jp-surface); border-bottom:1px solid var(--jp-border); transition:box-shadow var(--jp-transition), background var(--jp-transition); }
.jp-header.is-stuck{ box-shadow:var(--jp-shadow); }
.jp-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px; }
.jp-logo{ font-size:26px; font-weight:800; color:var(--jp-primary); display:flex; align-items:center; gap:8px; }
.jp-logo img{ max-height:46px; width:auto; }

.jp-primary-nav{ display:flex; align-items:center; gap:2px; flex:1; justify-content:center; }
.jp-primary-nav ul{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:center; }
.jp-primary-nav a{ display:block; padding:10px 14px; border-radius:var(--jp-radius-sm); font-weight:600; font-size:15px; transition:background var(--jp-transition), color var(--jp-transition); }
.jp-primary-nav a:hover, .jp-primary-nav .current-menu-item > a{ background:var(--jp-primary); color:#fff; }
.jp-primary-nav .menu-item-has-children{ position:relative; }
.jp-primary-nav .sub-menu{ position:absolute; inset-inline-start:0; top:100%; background:var(--jp-surface); border:1px solid var(--jp-border); border-radius:var(--jp-radius); box-shadow:var(--jp-shadow-lg); min-width:220px; padding:8px; opacity:0; visibility:hidden; transform:translateY(6px); transition:all var(--jp-transition); z-index:50; }
.jp-primary-nav .menu-item-has-children:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.jp-primary-nav .sub-menu a{ padding:9px 12px; }
.jp-primary-nav .sub-menu a:hover{ background:var(--jp-surface-2); color:var(--jp-primary); }

.jp-header-actions{ display:flex; align-items:center; gap:8px; }
.jp-icon-btn{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--jp-border); background:var(--jp-surface); color:var(--jp-text); transition:all var(--jp-transition); }
.jp-icon-btn:hover{ background:var(--jp-primary); color:#fff; border-color:var(--jp-primary); }
.jp-icon-btn svg{ width:19px; height:19px; }

.jp-dark-toggle .icon-sun{ display:none; }
html[data-jp-theme="dark"] .jp-dark-toggle .icon-moon{ display:none; }
html[data-jp-theme="dark"] .jp-dark-toggle .icon-sun{ display:inline-flex; }

.jp-mobile-toggle{ display:none; }

/* breaking news ticker */
.jp-breaking{ background:var(--jp-primary); color:#fff; }
.jp-breaking .jp-container{ display:flex; align-items:center; gap:14px; padding-block:8px; }
.jp-breaking-label{ background:rgba(255,255,255,.2); padding:4px 10px; border-radius:6px; font-size:12px; font-weight:800; white-space:nowrap; }
.jp-breaking-track{ overflow:hidden; flex:1; }
.jp-breaking-list{ display:flex; gap:40px; white-space:nowrap; animation:jp-marquee 30s linear infinite; }
.jp-breaking-list a{ font-size:14px; font-weight:600; }
@keyframes jp-marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* =========================================================
   3. LAYOUT / GRID
========================================================= */
.jp-main{ padding-block:32px; }
.jp-layout{ display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start; }
.jp-layout.no-sidebar{ grid-template-columns:1fr; }
.jp-section-title{ display:flex; align-items:center; justify-content:space-between; margin-block-end:18px; }
.jp-section-title h2{ font-size:22px; font-weight:800; margin:0; position:relative; padding-inline-start:14px; }
.jp-section-title h2::before{ content:""; position:absolute; inset-inline-start:0; top:2px; bottom:2px; width:5px; background:var(--jp-primary); border-radius:3px; }
.jp-section-title a{ font-size:13px; font-weight:700; color:var(--jp-primary); }

/* hero / featured */
.jp-hero{ display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-block-end:36px; }
.jp-hero-main{ position:relative; border-radius:var(--jp-radius-lg); overflow:hidden; min-height:420px; display:flex; align-items:flex-end; }
.jp-hero-main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.jp-hero-main::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.1) 60%); z-index:1; }
.jp-hero-content{ position:relative; z-index:2; padding:28px; color:#fff; }
.jp-hero-content h1, .jp-hero-content h3{ font-size:26px; font-weight:800; margin:10px 0; line-height:1.4; }
.jp-hero-side{ display:flex; flex-direction:column; gap:16px; }
.jp-hero-side-item{ position:relative; border-radius:var(--jp-radius); overflow:hidden; min-height:194px; display:flex; align-items:flex-end; }
.jp-hero-side-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.jp-hero-side-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,.05)); }
.jp-hero-side-item .jp-hero-content{ padding:16px; }
.jp-hero-side-item .jp-hero-content h3{ font-size:16px; margin:6px 0 0; }

/* article cards */
.jp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.jp-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.jp-grid.cols-4{ grid-template-columns:repeat(4,1fr); }

.jp-card{ background:var(--jp-surface); border:1px solid var(--jp-border); border-radius:var(--jp-radius); overflow:hidden; transition:transform var(--jp-transition), box-shadow var(--jp-transition); display:flex; flex-direction:column; }
.jp-card:hover{ transform:translateY(-4px); box-shadow:var(--jp-shadow-lg); }
.jp-card-thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--jp-surface-2); }
.jp-card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.jp-card:hover .jp-card-thumb img{ transform:scale(1.06); }
.jp-card-cat{ position:absolute; top:10px; inset-inline-start:10px; background:var(--jp-primary); color:#fff; font-size:11px; font-weight:800; padding:4px 10px; border-radius:20px; z-index:2; }
.jp-card-body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.jp-card-body h3{ font-size:17px; margin:0; line-height:1.5; font-weight:700; }
.jp-card-body h3 a:hover{ color:var(--jp-primary); }
.jp-card-excerpt{ font-size:14px; color:var(--jp-text-muted); margin:0; }
.jp-card-meta{ margin-top:auto; display:flex; align-items:center; gap:12px; font-size:12px; color:var(--jp-text-muted); padding-top:8px; border-top:1px solid var(--jp-border); }
.jp-card-meta span{ display:flex; align-items:center; gap:4px; }
.jp-card.horizontal{ flex-direction:row; }
.jp-card.horizontal .jp-card-thumb{ width:150px; flex-shrink:0; aspect-ratio:auto; }
.jp-card.horizontal .jp-card-body{ padding:12px 14px; }
.jp-card.horizontal .jp-card-body h3{ font-size:15px; }

/* popular list (sidebar) */
.jp-popular-item{ display:flex; gap:12px; align-items:center; padding-block:12px; border-bottom:1px solid var(--jp-border); }
.jp-popular-item:last-child{ border-bottom:0; }
.jp-popular-num{ font-size:22px; font-weight:900; color:var(--jp-border); width:30px; flex-shrink:0; }
.jp-popular-thumb{ width:64px; height:64px; border-radius:var(--jp-radius-sm); overflow:hidden; flex-shrink:0; }
.jp-popular-thumb img{ width:100%; height:100%; object-fit:cover; }
.jp-popular-body h4{ font-size:14px; margin:0 0 4px; font-weight:700; line-height:1.5; }
.jp-popular-body span{ font-size:11px; color:var(--jp-text-muted); }

/* widgets / sidebar */
.jp-widget{ background:var(--jp-surface); border:1px solid var(--jp-border); border-radius:var(--jp-radius); padding:18px; margin-block-end:22px; }
.jp-widget h3.widget-title{ font-size:16px; font-weight:800; margin:0 0 14px; padding-bottom:10px; border-bottom:2px solid var(--jp-primary); display:inline-block; }
.jp-tagcloud a{ display:inline-block; margin:3px; padding:6px 12px; background:var(--jp-surface-2); border-radius:20px; font-size:12px !important; transition:all var(--jp-transition); }
.jp-tagcloud a:hover{ background:var(--jp-primary); color:#fff; }
.jp-newsletter-box{ background:linear-gradient(135deg,var(--jp-primary),var(--jp-primary-dark)); color:#fff; text-align:center; padding:24px 18px; border-radius:var(--jp-radius); }
.jp-newsletter-box input[type=email]{ width:100%; padding:10px 12px; border-radius:8px; border:none; margin-block:10px; }
.jp-newsletter-box button{ width:100%; padding:10px; border-radius:8px; border:none; background:#111; color:#fff; font-weight:700; }
.jp-ad-slot{ display:flex; align-items:center; justify-content:center; background:var(--jp-surface-2); border:1px dashed var(--jp-border); border-radius:var(--jp-radius); color:var(--jp-text-muted); font-size:12px; min-height:250px; margin-block-end:22px; overflow:hidden; }
.jp-ad-slot img,.jp-ad-slot iframe{ width:100%; height:100%; }

/* buttons / badges */
.jp-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 20px; background:var(--jp-primary); color:#fff; border-radius:var(--jp-radius-sm); font-weight:700; font-size:14px; border:none; transition:background var(--jp-transition); }
.jp-btn:hover{ background:var(--jp-primary-dark); color:#fff; }
.jp-btn.outline{ background:transparent; border:1px solid var(--jp-border); color:var(--jp-text); }
.jp-badge{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:800; background:var(--jp-surface-2); color:var(--jp-text-muted); }

/* =========================================================
   4. SINGLE POST
========================================================= */
.jp-breadcrumbs{ font-size:13px; color:var(--jp-text-muted); margin-block-end:16px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.jp-breadcrumbs a:hover{ color:var(--jp-primary); }
.jp-breadcrumbs [itemprop=item] + span{ opacity:.5; margin-inline-start:4px; }

.jp-single-header{ margin-block-end:20px; }
.jp-single-header .jp-badge.cat{ background:var(--jp-primary); color:#fff; margin-block-end:12px; }
.jp-single-header h1{ font-size:32px; font-weight:800; line-height:1.5; margin:10px 0; }
.jp-single-excerpt{ font-size:17px; color:var(--jp-text-muted); }
.jp-single-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding-block:16px; margin-block:16px; border-block:1px solid var(--jp-border); font-size:13px; color:var(--jp-text-muted); }
.jp-author-mini{ display:flex; align-items:center; gap:10px; }
.jp-author-mini img{ width:40px; height:40px; border-radius:50%; }
.jp-author-mini strong{ color:var(--jp-text); display:block; font-size:14px; }

.jp-single-thumb{ border-radius:var(--jp-radius-lg); overflow:hidden; margin-block-end:24px; }
.jp-reading-progress{ position:fixed; top:0; inset-inline-start:0; height:3px; background:var(--jp-primary); z-index:9999; width:0%; transition:width .1s linear; }

.jp-content{ font-size:18px; line-height:2; }
.jp-content p{ margin-block:0 22px; }
.jp-content h2{ font-size:24px; font-weight:800; margin:36px 0 16px; }
.jp-content h3{ font-size:20px; font-weight:800; margin:28px 0 14px; }
.jp-content img{ border-radius:var(--jp-radius); margin-block:20px; }
.jp-content blockquote{ border-inline-start:4px solid var(--jp-primary); background:var(--jp-surface-2); padding:16px 20px; border-radius:0 var(--jp-radius) var(--jp-radius) 0; font-style:italic; margin:24px 0; }
.jp-content a{ color:var(--jp-primary); text-decoration:underline; text-underline-offset:3px; }
.jp-content ul,.jp-content ol{ margin:0 0 22px; padding-inline-start:24px; list-style:initial; }
.jp-content table{ width:100%; border-collapse:collapse; margin-block:20px; }
.jp-content table td,.jp-content table th{ border:1px solid var(--jp-border); padding:10px; }
.jp-content pre{ background:#1e1f26; color:#e5e7eb; padding:16px; border-radius:var(--jp-radius); overflow:auto; font-size:14px; }

.jp-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-block:28px; }
.jp-tags a{ background:var(--jp-surface-2); padding:6px 14px; border-radius:20px; font-size:12px; }
.jp-tags a:hover{ background:var(--jp-primary); color:#fff; }

/* share + reactions */
.jp-engage-bar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:18px; background:var(--jp-surface-2); border-radius:var(--jp-radius); margin-block:28px; }
.jp-share{ display:flex; align-items:center; gap:8px; }
.jp-share span{ font-size:13px; font-weight:700; margin-inline-end:6px; }
.jp-share-btn{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; transition:opacity var(--jp-transition); }
.jp-share-btn:hover{ opacity:.85; }
.jp-share-btn.facebook{ background:#1877f2; }
.jp-share-btn.twitter{ background:#000; }
.jp-share-btn.whatsapp{ background:#25d366; }
.jp-share-btn.telegram{ background:#0088cc; }
.jp-share-btn.copy{ background:var(--jp-text-muted); }

.jp-reactions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.jp-reaction-btn{ display:flex; align-items:center; gap:6px; background:var(--jp-surface); border:1px solid var(--jp-border); padding:8px 14px; border-radius:20px; font-size:13px; font-weight:700; transition:all var(--jp-transition); }
.jp-reaction-btn:hover, .jp-reaction-btn.active{ border-color:var(--jp-primary); background:var(--jp-primary); color:#fff; }
.jp-reaction-btn .emoji{ font-size:16px; }

/* author box */
.jp-author-box{ display:flex; gap:18px; background:var(--jp-surface-2); padding:22px; border-radius:var(--jp-radius); margin-block:30px; }
.jp-author-box img{ width:80px; height:80px; border-radius:50%; flex-shrink:0; }
.jp-author-box h4{ margin:0 0 6px; font-size:17px; }
.jp-author-box p{ margin:0; color:var(--jp-text-muted); font-size:14px; }
.jp-author-social a{ margin-inline-end:10px; font-size:13px; color:var(--jp-primary); font-weight:700; }

/* related posts */
.jp-related{ margin-block:36px; }

/* rating */
.jp-rating-box{ display:flex; align-items:center; gap:14px; padding:18px; background:var(--jp-surface-2); border-radius:var(--jp-radius); margin-block:20px; }
.jp-stars{ display:flex; gap:4px; direction:ltr; }
.jp-stars button{ background:none; border:none; font-size:24px; color:var(--jp-border); transition:color var(--jp-transition); }
.jp-stars button.active, .jp-stars button:hover, .jp-stars button:hover ~ button{ color:#f5a623; }
.jp-rating-avg{ font-weight:800; font-size:15px; }

/* =========================================================
   5. COMMENTS
========================================================= */
.jp-comments{ margin-block:36px; }
.jp-comments-title{ font-size:20px; font-weight:800; margin-block-end:20px; }
.comment-list{ margin:0; }
.comment-list .children{ padding-inline-start:40px; margin:0; list-style:none; }
.jp-comment{ display:flex; gap:14px; padding-block:18px; border-bottom:1px solid var(--jp-border); }
.jp-comment .avatar{ border-radius:50%; width:48px; height:48px; }
.jp-comment-author{ font-weight:700; font-size:14px; }
.jp-comment-date{ font-size:12px; color:var(--jp-text-muted); margin-inline-start:8px; }
.jp-comment-text p{ margin:8px 0; font-size:14px; }
.jp-comment-reply a{ font-size:12px; font-weight:700; color:var(--jp-primary); }

.comment-form{ margin-block-start:24px; display:grid; gap:14px; }
.comment-form input:not([type=submit]), .comment-form textarea{ width:100%; padding:12px 14px; border-radius:var(--jp-radius-sm); border:1px solid var(--jp-border); background:var(--jp-surface); color:var(--jp-text); }
.comment-form .comment-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.comment-form p.form-submit input{ background:var(--jp-primary); color:#fff; border:none; padding:12px 26px; border-radius:var(--jp-radius-sm); font-weight:700; }

/* =========================================================
   6. FOOTER
========================================================= */
.jp-footer{ background:var(--jp-surface); border-top:1px solid var(--jp-border); margin-block-start:40px; padding-block:40px 0; }
.jp-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; padding-block-end:30px; }
.jp-footer-col h4{ font-size:15px; font-weight:800; margin:0 0 16px; }
.jp-footer-col ul li{ margin-block-end:10px; }
.jp-footer-col ul a{ font-size:14px; color:var(--jp-text-muted); }
.jp-footer-col ul a:hover{ color:var(--jp-primary); }
.jp-footer-social{ display:flex; gap:8px; margin-block-start:14px; }
.jp-footer-bottom{ border-top:1px solid var(--jp-border); padding-block:18px; text-align:center; font-size:13px; color:var(--jp-text-muted); }
.jp-back-to-top{ position:fixed; bottom:26px; inset-inline-end:26px; width:46px; height:46px; border-radius:50%; background:var(--jp-primary); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--jp-shadow-lg); opacity:0; visibility:hidden; transform:translateY(10px); transition:all var(--jp-transition); z-index:400; }
.jp-back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* =========================================================
   7. PAGINATION / MISC
========================================================= */
.jp-pagination{ display:flex; justify-content:center; gap:8px; margin-block-start:30px; }
.jp-pagination a,.jp-pagination span{ min-width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--jp-radius-sm); border:1px solid var(--jp-border); font-weight:700; font-size:14px; }
.jp-pagination .current{ background:var(--jp-primary); color:#fff; border-color:var(--jp-primary); }
.jp-pagination a:hover{ background:var(--jp-surface-2); }

.jp-mobile-menu{ position:fixed; inset-block:0; inset-inline-end:0; width:300px; max-width:85vw; background:var(--jp-surface); z-index:1000; transform:translateX(100%); transition:transform .3s ease; padding:20px; overflow-y:auto; box-shadow:var(--jp-shadow-lg); }
html[dir="ltr"] .jp-mobile-menu{ transform:translateX(-100%); }
.jp-mobile-menu.open{ transform:translateX(0); }
.jp-mobile-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:999; opacity:0; visibility:hidden; transition:all var(--jp-transition); }
.jp-mobile-overlay.open{ opacity:1; visibility:visible; }
.jp-mobile-menu ul li{ border-bottom:1px solid var(--jp-border); }
.jp-mobile-menu ul li a{ display:block; padding:14px 4px; font-weight:700; }
.jp-mobile-close{ display:flex; justify-content:flex-end; margin-block-end:14px; }

/* lazyload */
img.jp-lazy{ opacity:0; transition:opacity .3s ease; background:var(--jp-surface-2); }
img.jp-lazy.jp-loaded{ opacity:1; }

/* skeleton loading for AJAX load more */
.jp-skeleton{ background:linear-gradient(90deg,var(--jp-surface-2) 25%,var(--jp-border) 37%,var(--jp-surface-2) 63%); background-size:400% 100%; animation:jp-shimmer 1.4s ease infinite; border-radius:var(--jp-radius); height:280px; }
@keyframes jp-shimmer{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* =========================================================
   8. RESPONSIVE
========================================================= */
@media (max-width:1024px){
  .jp-layout{ grid-template-columns:1fr; }
  .jp-footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .jp-primary-nav, .jp-topbar{ display:none; }
  .jp-mobile-toggle{ display:flex; }
  .jp-hero{ grid-template-columns:1fr; }
  .jp-grid{ grid-template-columns:repeat(2,1fr); }
  .jp-grid.cols-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .jp-grid, .jp-grid.cols-2, .jp-grid.cols-4{ grid-template-columns:1fr; }
  .jp-footer-grid{ grid-template-columns:1fr; }
  .jp-single-header h1{ font-size:24px; }
  .jp-card.horizontal{ flex-direction:column; }
  .jp-card.horizontal .jp-card-thumb{ width:100%; aspect-ratio:16/10; }
  .comment-form .comment-form-row{ grid-template-columns:1fr; }
}

/* print */
@media print{
  .jp-header,.jp-footer,.jp-engage-bar,.jp-back-to-top,.jp-ad-slot,.jp-mobile-menu,.jp-breaking{ display:none !important; }
}