/* Zahran Articles — WordPress-specific layer on top of the site's own build (app.css). */

/* ---------- Base ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.zk-skip{position:absolute;inset-inline-start:1rem;top:-100px;z-index:100;padding:.75rem 1.25rem;border-radius:.75rem;background:var(--primary);color:var(--primary-foreground);font-weight:700;font-size:.875rem}
.zk-skip:focus{top:1rem}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* Fixed header clears the WP admin bar for logged-in users */
.admin-bar header.fixed{top:32px}
@media (max-width:782px){.admin-bar header.fixed{top:46px}}

/* ---------- Mobile menu ---------- */
.zk-menu{opacity:0;pointer-events:none}
.zk-menu[hidden]{display:none}
.zk-menu.is-open{opacity:1;pointer-events:auto}
.zk-menu .zk-menu-panel{transform:translateY(-1.5rem)}
.zk-menu.is-open .zk-menu-panel{transform:none}
html.zk-lock{overflow:hidden}

/* ---------- Article cards ---------- */
.zk-card-media{aspect-ratio:16/9;overflow:hidden;background:var(--muted);border-bottom:1px solid var(--border)}
.zk-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.zk-card:hover .zk-card-media img{transform:scale(1.04)}
.zk-card-meta{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.zk-card-date{font-size:.75rem;color:var(--muted-foreground)}

/* ---------- Category chips / breadcrumb ---------- */
.zk-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.zk-chips a{display:inline-flex;align-items:center;min-height:2.5rem;padding:.4rem 1rem;border-radius:999px;border:1px solid var(--border);background:var(--card);font-size:.8125rem;font-weight:700;color:var(--muted-foreground);transition:border-color .25s,color .25s,background .25s}
.zk-chips a:hover{border-color:var(--primary);color:var(--primary-deep)}
.zk-chips a.is-active{background:var(--accent);border-color:color-mix(in oklch,var(--primary) 35%,transparent);color:var(--accent-foreground)}
.zk-crumb a{font-size:.875rem;font-weight:600;color:var(--muted-foreground)}
.zk-crumb a:hover{color:var(--primary)}

/* ---------- Single ---------- */
.zk-title{line-height:1.3;text-wrap:balance}
.zk-hero{margin-inline:0}
.zk-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-2xl,1.5rem);border:1px solid var(--border)}

.zk-share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.zk-share .btn-secondary{display:inline-flex;align-items:center;height:2.5rem;padding:0 1rem;border-radius:.75rem;font-size:.8125rem;font-weight:700;cursor:pointer}
.zk-share > span{margin-inline-end:.5rem}

/* ---------- Article body typography ---------- */
.zk-content{color:var(--muted-foreground);font-size:1.0625rem;line-height:2.1;overflow-wrap:anywhere}
.zk-content > * + *{margin-top:1.4em}
.zk-content h2,.zk-content h3,.zk-content h4{color:var(--foreground);line-height:1.5;text-wrap:balance}
.zk-content h2{font-size:1.5rem;font-weight:800;margin-top:2.2em}
.zk-content h3{font-size:1.25rem;font-weight:800;margin-top:1.9em}
.zk-content h4{font-size:1.0625rem;font-weight:800;margin-top:1.6em}
.zk-content h2 + *,.zk-content h3 + *,.zk-content h4 + *{margin-top:.75em}
.zk-content strong,.zk-content b{color:var(--foreground);font-weight:700}
.zk-content a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.zk-content a:hover{color:var(--primary-deep)}
.zk-content ul,.zk-content ol{padding-inline-start:1.4em}
.zk-content ul{list-style:disc}
.zk-content ol{list-style:decimal}
.zk-content li + li{margin-top:.5em}
.zk-content li::marker{color:var(--primary)}
.zk-content blockquote{border-inline-start:4px solid var(--primary);background:var(--accent);color:var(--accent-foreground);padding:1.25rem 1.5rem;border-radius:1rem;font-weight:600}
.zk-content img,.zk-content video,.zk-content iframe{max-width:100%;height:auto;border-radius:1rem}
.zk-content figure{margin-inline:0}
.zk-content figcaption,.zk-content .wp-caption-text,.zk-content .wp-element-caption{margin-top:.6em;font-size:.8125rem;line-height:1.7;text-align:center;color:var(--muted-foreground)}
.zk-content hr{border:0;border-top:1px solid var(--border);margin-block:2.5em}
.zk-content table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.8}
.zk-content th,.zk-content td{border:1px solid var(--border);padding:.6rem .9rem;text-align:start}
.zk-content th{background:var(--accent);color:var(--foreground);font-weight:700}
.zk-content .wp-block-table{overflow-x:auto}
.zk-content .aligncenter{margin-inline:auto;display:block}
.zk-content .alignleft{float:left;margin:0 1.5em 1em 0}
.zk-content .alignright{float:right;margin:0 0 1em 1.5em}
.zk-content .wp-block-buttons{display:flex;flex-wrap:wrap;gap:.75rem}
.zk-content .wp-block-button__link{display:inline-flex;align-items:center;min-height:3rem;padding:.75rem 1.5rem;border-radius:.75rem;background:var(--primary);color:var(--primary-foreground);text-decoration:none;font-weight:700}
.zk-content::after{content:"";display:table;clear:both}
@media (max-width:640px){.zk-content{font-size:1rem;line-height:2}.zk-content .alignleft,.zk-content .alignright{float:none;margin:0 0 1em}}

/* ---------- Pagination ---------- */
.zk-pagination{margin-top:3rem}
.zk-pagination .nav-links,.zk-pagination.post-nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.zk-pagination .page-numbers,.zk-pagination .post-page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;height:2.75rem;padding:0 1rem;border-radius:.75rem;border:1px solid var(--border);background:var(--card);font-size:.875rem;font-weight:700;color:var(--foreground);transition:border-color .25s,color .25s}
.zk-pagination a.page-numbers:hover,.zk-pagination a.post-page-numbers:hover{border-color:var(--primary);color:var(--primary)}
.zk-pagination .current{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.zk-pagination .dots{border:0;background:none}

@media (prefers-reduced-motion:reduce){.zk-card-media img,.zk-menu,.zk-menu-panel{transition:none!important}}

/* Card without a featured image: branded placeholder keeps the grid even */
.zk-card-media--empty{display:flex;align-items:center;justify-content:center;background-color:var(--accent)}
.zk-card-media--empty img{width:auto;height:38%;object-fit:contain;opacity:.55}
.zk-card:hover .zk-card-media--empty img{transform:none}