/* WordPress-specific additions layered on top of base.css */

.screen-reader-text{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.screen-reader-text:focus{ left:1rem; top:1rem; width:auto; height:auto; z-index:999; background:var(--surface); padding:.6em 1em; border-radius:8px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}

/* Admin bar pushes the sticky header down instead of covering it */
body.admin-bar .topbar{ top:32px; }
@media (max-width:782px){ body.admin-bar .topbar{ top:46px; } }

/* Native WP threaded comment list, styled to match the demo's comment cards */
.maqam-comments{ margin-top:2rem; }
.maqam-comments ol.comment-list{ list-style:none; margin:0; padding:0; }
.maqam-comments .comment{ display:flex; gap:.7rem; margin-bottom:1.3rem; list-style:none; }
.maqam-comments ol.children{ list-style:none; margin-inline-start:2.6rem; margin-top:.8rem; padding:0; }
.maqam-comments .comment-avatar{ width:38px; height:38px; border-radius:50%; flex:none; }
.maqam-comments .comment-main{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.75rem .95rem; flex:1; }
.maqam-comments .comment-author{ font-weight:700; font-size:.88rem; }
.maqam-comments .comment-meta a{ color:var(--muted); font-size:.76rem; text-decoration:none; }
.maqam-comments .comment-content p{ margin:.35rem 0 .5rem; color:var(--ink-soft); font-size:.92rem; line-height:1.55; }
.maqam-comments .comment-reply-link{ font-size:.78rem; font-weight:700; color:var(--muted); text-decoration:none; }
.maqam-comments .comment-reply-link:hover{ color:var(--brand); }
.maqam-comments .comment-awaiting-moderation{ display:block; font-size:.78rem; color:var(--accent-ink); font-style:italic; margin-top:.3rem; }

.maqam-login-required{ background:var(--surface-2); border:1px dashed var(--line); border-radius:12px; padding:1rem 1.2rem; color:var(--muted); font-size:.9rem; }
.maqam-login-required a{ color:var(--brand); font-weight:700; text-decoration:none; }

/* Pagination */
.maqam-pagination{ display:flex; gap:.5rem; justify-content:center; margin:2rem 0; }
.maqam-pagination a, .maqam-pagination span{ border:1px solid var(--line); border-radius:8px; padding:.5rem .9rem; font-size:.85rem; font-weight:600; text-decoration:none; color:var(--ink); }
.maqam-pagination .current{ background:var(--brand); color:#fff; border-color:var(--brand); }

.maqam-empty{ text-align:center; color:var(--muted); padding:3rem 1rem; }

@media (max-width:760px){
  .nav-tabs.is-collapsible{ display:none; position:absolute; top:100%; inset-inline:1rem; flex-direction:column; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); margin-top:.5rem; }
  .nav-tabs.is-collapsible.is-open{ display:flex; }
  .nav-tabs.is-collapsible a{ text-align:start; border-radius:8px; }
  .topbar-inner{ position:relative; }
}

/* Native player fallback for self-hosted video (no JS library required) */
.maqam-player-native{ width:100%; height:100%; border-radius:inherit; background:#000; }
.maqam-player-embed{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Click-to-load YouTube facade: a thumbnail + play button standing in for
   the real iframe until clicked (see maqam_render_player() and main.js),
   so the page never pays for YouTube's own embed weight up front. */
.maqam-player-facade{
	position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; cursor:pointer;
	background-color:#000; background-size:cover; background-position:center;
	display:flex; align-items:center; justify-content:center; color:#fff;
}
.maqam-player-facade .play-big{ width:64px; height:64px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)); transition:transform .15s ease; }
.maqam-player-facade:hover .play-big{ transform:scale(1.08); }