/* Source style block: block-1 */
/* ============================================================
       INDEX PAGE STYLE
       Scope: home/index page hero + level cards only.
       Navbar/sidebar/footer are controlled by component CSS files.
       ============================================================ */

    /* ------------------------------
       1) Welcome hero — one integrated surface
       ------------------------------ */
    .index-welcome {
      position: relative;
      overflow: hidden;
      min-height: 184px;
      color: #fff;
      padding: 18px 28px;
      margin-bottom: 20px;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      background: linear-gradient(135deg, #4361ee, #4CAF50, #ff9800, #9c27b0, #4361ee);
      background-size: 300% 300%;
      animation: welcome-float 8s ease-in-out infinite, welcome-gradient 15s ease-in-out infinite;
    }
    html.dark-mode .index-welcome {
      background: linear-gradient(135deg, #163c89, #256b36, #a85d00, #64208a, #163c89);
      background-size: 300% 300%;
    }
    .index-welcome::after {
      content: "";
      position: absolute;
      inset: -20%;
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.16), transparent 42%);
      animation: welcome-blobs 20s infinite;
    }
    .welcome-inner { position: relative; z-index: 2; }
    .index-welcome-top {
      display:grid;
      grid-template-columns:minmax(0,3fr) minmax(360px,2fr);
      grid-template-areas:"copy quote";
      direction:ltr;
      align-items:center;
      gap:28px;
      min-height:146px;
    }
    html[dir="rtl"] .index-welcome-top { grid-template-columns:minmax(360px,2fr) minmax(0,3fr); grid-template-areas:"quote copy"; }
    html[dir="rtl"] .index-welcome-copy{direction:rtl;text-align:center}
    html[dir="ltr"] .index-welcome-copy{direction:ltr;text-align:center}
    .index-welcome-copy { grid-area:copy; min-width:0; text-align:center; }
    .index-welcome-copy p{max-width:760px;margin-inline:auto;text-wrap:pretty}
    .welcome-inner h1 {
      margin:0 0 8px;
      font-size:clamp(1.55rem,2.25vw,2.08rem);
      font-weight:900;
      line-height:1.32;
      text-shadow:0 2px 4px rgba(0,0,0,.12);
    }
    .welcome-inner p {
      margin:0;
      font-size:clamp(.84rem,1.05vw,.96rem);
      font-weight:650;
      line-height:1.58;
      text-shadow:0 1px 2px rgba(0,0,0,.10);
    }
    .index-author-quote {
      grid-area:quote;
      width:100%;
      max-width:none;
      justify-self:stretch;
      color:#fff;
      --quote-text:#fff;
      --quote-muted:rgba(255,255,255,.78);
      --quote-accent:#fff;
    }

    .index-author-quote::after {
      content:"";
      position:absolute;
      inset-block:14px;
      inset-inline-end:-18px;
      width:1px;
      border-radius:99px;
      background:linear-gradient(180deg,transparent,rgba(255,255,255,.34),transparent);
      pointer-events:none;
    }
    html[dir="ltr"] .index-author-quote::after { inset-inline-start:-18px; inset-inline-end:auto; }

    /* ------------------------------
       2) Resource overview — ONE container: explanation + statistics
       ------------------------------ */
    .index-resource-overview{
      position:relative;overflow:hidden;isolation:isolate;
      margin-top:24px;
      padding:20px 20px 22px;
      border:1px solid rgba(100,116,139,.13);
      border-radius:var(--radius-lg);
      background:linear-gradient(135deg,rgba(67,97,238,.045),rgba(34,197,94,.028)),var(--white);
      box-shadow:var(--shadow-sm);
    }
    html.dark-mode .index-resource-overview{
      border-color:rgba(148,163,184,.13);
      background:linear-gradient(135deg,rgba(67,97,238,.09),rgba(34,197,94,.04)),#152033;
    }
    .index-resource-overview::before{
      content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
      background:url('/assets/icons/svgrepo/index-stats/statistics-background.svg?v=229.63') center/cover no-repeat;
      opacity:.075;filter:saturate(.88) contrast(.96);
    }
    html.dark-mode .index-resource-overview::before{opacity:.055;filter:saturate(.78) brightness(1.18)}
    .index-resource-overview > *{position:relative;z-index:1}
    .index-resource-intro{
      display:block;
      padding:2px 4px 18px;border-bottom:1px solid rgba(100,116,139,.12);
    }
    html.dark-mode .index-resource-intro{border-bottom-color:rgba(148,163,184,.14)}
    .index-resource-intro-copy{min-width:0}
    .index-resource-intro h2{margin:0 0 7px;color:var(--text-main);font-size:clamp(1.02rem,1.55vw,1.24rem);font-weight:950;line-height:1.42}
    .index-resource-intro p{margin:0;color:var(--text-muted);font-size:clamp(.82rem,1.02vw,.93rem);font-weight:620;line-height:1.9;text-wrap:pretty}
    .index-resource-intro p strong{color:var(--text-main);font-weight:900}
    html[dir="rtl"] .index-resource-intro{direction:rtl;text-align:right}
    html[dir="ltr"] .index-resource-intro{direction:ltr;text-align:left}

    .index-resource-stats{padding:20px 0 0}
    .stats-grid{
      display:grid;grid-template-columns:repeat(6,minmax(112px,1fr));justify-items:center;gap:16px;
      max-width:1160px;margin:0 auto;
    }
    .stat-card{
      --stat-accent:#4361ee;--stat-rgb:67,97,238;display:grid;place-items:center;align-content:center;
      width:138px;height:138px;padding:13px;border:1px solid rgba(var(--stat-rgb),.25);border-radius:50%;
      background:radial-gradient(circle at 35% 28%,rgba(var(--stat-rgb),.15),rgba(var(--stat-rgb),.035) 70%);
      color:var(--text-main);text-align:center;box-shadow:0 10px 26px rgba(var(--stat-rgb),.14);
      transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
    }
    .stat-card:nth-child(2){--stat-accent:#f97316;--stat-rgb:249,115,22}
    .stat-card:nth-child(3){--stat-accent:#7c3aed;--stat-rgb:124,58,237}
    .stat-card:nth-child(4){--stat-accent:#0ea5e9;--stat-rgb:14,165,233}
    .stat-card:nth-child(5){--stat-accent:#ec4899;--stat-rgb:236,72,153}
    .stat-card:nth-child(6){--stat-accent:#22c55e;--stat-rgb:34,197,94}
    html.dark-mode .stat-card{background:radial-gradient(circle at 35% 28%,rgba(var(--stat-rgb),.20),rgba(21,32,51,.96) 72%);color:#f8fafc}
    .stat-icon-badge{display:grid;place-items:center;width:42px;height:42px;margin-bottom:5px;border-radius:14px;background:rgba(var(--stat-rgb),.13);color:var(--stat-accent);font-size:.92rem}
    .stat-icon-badge i{margin:0;line-height:1}
    .stat-svg-icon{display:block;width:31px;height:31px;max-width:31px;max-height:31px;object-fit:contain;object-position:center}
    html.dark-mode .stat-svg-icon{filter:saturate(.95) brightness(1.08)}
    .stat-number{margin:3px 0 1px;color:var(--stat-accent);font-size:1.18rem;font-weight:950;line-height:1.15}
    .stat-label{max-width:98px;color:var(--text-main);font-size:.72rem;font-weight:800;line-height:1.25}
    html.dark-mode .stat-label{color:#e2e8f0}
    @media(hover:hover) and (pointer:fine){.stat-card:hover{transform:translateY(-4px);border-color:rgba(var(--stat-rgb),.48);box-shadow:0 16px 32px rgba(var(--stat-rgb),.20)}}

    /* ------------------------------
       3) Level cards
       ------------------------------ */
    .index-levels {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
    }

    .level-card {
      --track-color: var(--color-pri);
      --track-header-end: #388e3c;
      --track-soft: rgba(76, 175, 80, 0.15);
      --track-hover: rgba(76, 175, 80, 0.1);
      --track-shadow: rgba(76, 175, 80, 0.15);

      background: var(--white);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      border: 1px solid rgba(0,0,0,0.03);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    html.dark-mode .level-card {
      border-color: rgba(255,255,255,0.05);
    }

    .card-secondary {
      --track-color: var(--color-sec);
      --track-header-end: #7b1fa2;
      --track-soft: rgba(156, 39, 176, 0.15);
      --track-hover: rgba(156, 39, 176, 0.1);
      --track-shadow: rgba(156, 39, 176, 0.15);
    }

    .card-middle {
      --track-color: var(--color-mid);
      --track-header-end: #f57c00;
      --track-soft: rgba(255, 152, 0, 0.15);
      --track-hover: rgba(255, 152, 0, 0.1);
      --track-shadow: rgba(255, 152, 0, 0.15);
    }

    .card-primary {
      --track-color: var(--color-pri);
      --track-header-end: #388e3c;
      --track-soft: rgba(76, 175, 80, 0.15);
      --track-hover: rgba(76, 175, 80, 0.1);
      --track-shadow: rgba(76, 175, 80, 0.15);
    }

    .level-header {
      padding: 18px;
      color: #fff;
      text-align: center;
      font-size: 1.25rem;
      font-weight: 800;
      background: linear-gradient(90deg, var(--track-color), var(--track-header-end));
    }

    .level-links {
      padding: 15px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* ------------------------------
       4) Level buttons
       - PC: hover effect.
       - Mobile: JS adds .is-touch-press so tap feels like PC hover.
       - Blue browser tap rectangle is removed.
       ------------------------------ */
    .level-link {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 62px;
      padding: 12px 62px;
      background: var(--bg-light);
      border: 1px solid transparent;
      border-radius: 12px;
      color: var(--text-main);
      font-size: 1.08rem;
      font-weight: 700;
      text-align: center;
      transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none;
      user-select: none;
      touch-action: manipulation;
    }

    .level-link:focus {
      outline: none;
    }

    .level-link:focus-visible {
      outline: 2px solid var(--track-color);
      outline-offset: 3px;
    }

    .link-text {
      display: block;
      width: 100%;
      text-align: center;
      line-height: 1.35;
    }

    .link-icon {
      position: absolute;
      top: 50%;
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--track-soft);
      color: var(--track-color);
      font-size: 1.1rem;
      font-weight: 900;
      line-height: 1;
      transform: translateY(-50%);
      transition: transform 0.25s ease;
    }

    html[dir="rtl"] .link-icon {
      right: 14px;
      left: auto;
    }

    html[dir="ltr"] .link-icon {
      left: 14px;
      right: auto;
    }

    /* Number glyph alignment:
       Tajawal digits can sit visually high.
       Desktop stays neutral; mobile has a specific override below. */
    .link-icon-number {
      display: block;
      line-height: 1;
      transform: translateY(0);
      font-variant-numeric: lining-nums tabular-nums;
    }

    @media (hover: hover) and (pointer: fine) {
      .level-card .level-link:hover {
        background: var(--track-hover);
        color: var(--track-color);
        border-color: var(--track-color);
        transform: translateY(-3px);
        box-shadow: 0 4px 12px var(--track-shadow);
      }
    }

    .level-card .level-link.is-touch-press {
      background: var(--track-hover);
      color: var(--track-color);
      border-color: var(--track-color);
      transform: translateY(-3px);
      box-shadow: 0 4px 12px var(--track-shadow);
    }

    /* ------------------------------
       5) Animations
       ------------------------------ */
    @keyframes welcome-gradient {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    @keyframes welcome-float {
      0% { transform: translateY(-3px); }
      50% { transform: translateY(3px); }
      100% { transform: translateY(-3px); }
    }

    @keyframes welcome-blobs {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1) translate(10px, 10px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .index-welcome,
      .index-welcome::after,
      .stat-card,
      .level-link {
        animation: none;
        transition: none;
      }
    }

    /* ------------------------------
       6) Mobile
       ------------------------------ */
    @media (max-width: 768px) {
      .index-welcome { min-height:0; padding:14px 15px 11px; margin-bottom:18px; border-radius:14px; }
      .welcome-inner h1 { font-size:1.34rem; margin-bottom:4px; line-height:1.28; }
      .welcome-inner p { font-size:.84rem; line-height:1.46; }
      .index-welcome-top { display:flex; flex-direction:column; gap:0; min-height:0; }
      .index-welcome-copy { order:1; width:100%; }
      .index-author-quote { order:2; align-self:stretch; flex:0 0 108px; width:auto; max-width:none; margin-top:-2px; }
      .index-author-quote::after { display:none; }
      .index-resource-overview { margin-top:18px; padding:15px 10px 16px; border-radius:14px; }
      .index-resource-stats { padding-top:16px; }
      .stats-grid { grid-template-columns:repeat(2,minmax(116px,1fr)); gap:14px 10px; }
      .stat-card { width:122px; height:122px; padding:10px; }
      .stat-icon-badge { width:30px; height:30px; margin-bottom:2px; font-size:.80rem; }
      .stat-number { font-size:1.02rem; }
      .stat-label { max-width:90px; font-size:.66rem; }

      .level-header {
        padding: 14px;
        font-size: 1.15rem;
      }

      .level-links {
        padding: 12px;
        gap: 8px;
      }

      .level-link {
        min-height: 56px;
        padding: 10px 56px;
        font-size: 1rem;
        border-radius: 10px;
      }

      .link-text {
        line-height: 1.3;
      }

      .link-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
      }

      html[dir="rtl"] .link-icon {
        right: 12px;
        left: auto;
      }

      html[dir="ltr"] .link-icon {
        left: 12px;
        right: auto;
      }

      .link-icon-number {
        transform: translateY(3px);
      }
    }

    @media (max-width: 1050px) and (min-width: 769px) {
      .index-welcome-top { grid-template-columns:minmax(0,3fr) minmax(300px,2fr); gap:20px; }
      html[dir="rtl"] .index-welcome-top { grid-template-columns:minmax(300px,2fr) minmax(0,3fr); }
      .index-author-quote { max-width:390px; }
      .stats-grid { grid-template-columns:repeat(3,minmax(130px,1fr)); gap:16px; }
      .stat-card { width:132px; height:132px; }
    }

/* V229.57 — index resource overview responsive authority. */
@media(max-width:700px){
  .index-resource-overview{margin-top:16px;padding:13px 12px 14px;border-radius:14px}
  .index-resource-intro{display:block;padding:2px 0 13px}
  .index-resource-intro h2{font-size:.94rem}
  .index-resource-intro p{font-size:.76rem;line-height:1.72}
}



/* SchoolEP V229.63 — exact user SVG statistic icons + decorative statistics background. */
@media(max-width:700px){
  .stat-icon-badge{width:36px;height:36px;border-radius:12px}
  .stat-svg-icon{width:27px;height:27px;max-width:27px;max-height:27px}
}