/*
 Theme Name: QDB Twenty Twenty-Five Child
 Theme URI: https://example.com/
 Description: Child theme of Twenty Twenty-Five providing a Quran Sura layout with a retractable index.
 Author: You
 Template: twentytwentyfive
 Version: 1.0.0
 Text Domain: qdb-twentytwentyfive-child
*/

/* Keep header full-bleed; allow our layout template to manage paddings */
:root {
  --qdb-index-width: 280px;
}

/* Optional tweaks specific to our custom template */
.qdb-template .wp-block-columns{ gap: 0; }
.qdb-template .qdb-index-col{ max-width: var(--qdb-index-width); flex-basis: var(--qdb-index-width); }
.qdb-template .qdb-main-col{ min-width: 0; }

/* Sura Index: base styles (work with plugin block markup) */
.qdb-index-wrap{ position: relative; }
.qdb-index-toggle{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .6rem; border:1px solid #d0d7de; border-radius:6px; background:#fff; cursor:pointer; }
.qdb-index-toggle .dashicons{ line-height:1; }
.qdb-index-panel{ background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:.5rem; max-height:calc(100vh - 2rem); overflow:auto; }
.qdb-index-list{ list-style:none; margin:0; padding:0; }
.qdb-index-list li{ margin:0; padding:0; }
.qdb-index-list a{ display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; border-radius:6px; text-decoration:none; color:inherit; }
.qdb-index-list a:hover{ background:#f5f7fa; }
.qdb-index-num{ width:2.2rem; min-width:2.2rem; text-align:center; font-weight:600; color:#0a4b78; }
.qdb-index-phon{ font-style:italic; opacity:.9; }
.qdb-index-en{ margin-left:auto; opacity:.8; }

/* Desktop (off-canvas too): floating toggle on the left, panel overlays */
@media (min-width: 960px){
  .qdb-template .qdb-index-col{ position: static; }
  .qdb-template .qdb-index-col .qdb-index-toggle{
    position: fixed; left: 14px; top: 120px; z-index: 1001;
    border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.2);
    background:#0a9fbc; color:#fff; border:0;
  }
  .qdb-template .qdb-index-col .qdb-index-toggle .qdb-index-toggle__label{ display:none; }
  .qdb-template .qdb-index-col .qdb-index-panel{
    position: fixed; inset: 0 auto 0 0; width: min(28vw, 360px);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1000; border-radius: 0 10px 10px 0; border-right:1px solid #e5e7eb;
    box-shadow: 2px 0 20px rgba(0,0,0,.18);
  }
  .qdb-template .qdb-index-col .qdb-index-wrap.is-open .qdb-index-panel{ transform: translateX(0); }
  .qdb-template .qdb-index-col .qdb-index-wrap.is-open::after{
    content:""; position: fixed; inset:0; background: rgba(0,0,0,.25); z-index: 999;
  }
}

/* Mobile (off-canvas): panel slides in; toggle becomes floating button */
@media (max-width: 959.98px){
  .qdb-template .qdb-index-col{ position: relative; }
  .qdb-template .qdb-index-col .qdb-index-toggle{
    position: fixed; right: 14px; bottom: 14px; z-index: 1001;
    border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.2);
    background:#0a9fbc; color:#fff; border:0;
  }
  .qdb-template .qdb-index-col .qdb-index-toggle .qdb-index-toggle__label{ display:none; }
  .qdb-template .qdb-index-col .qdb-index-panel{
    position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1000; border-radius: 0 10px 10px 0; border-right:1px solid #e5e7eb;
    box-shadow: 2px 0 20px rgba(0,0,0,.18);
  }
  .qdb-template .qdb-index-col .qdb-index-wrap.is-open .qdb-index-panel{ transform: translateX(0); }
  .qdb-template .qdb-index-col .qdb-index-wrap.is-open::after{
    content:""; position: fixed; inset:0; background: rgba(0,0,0,.25); z-index: 999;
  }
}