/* ============================================================
   Site Toolkit v1.2 — DARK PREMIUM design (like the preview).
   Accent color comes from Appearance → Customize → Site Toolkit Design
   and is applied via CSS variables (--stk-accent, --stk-btn-text).
   Untick "Dark premium style" in the Customizer for the light look.
   JS loads only on APK / Tool pages; the CSS also loads on other
   singular pages since v1.5.2 (it carries the slim title band rules).
   ============================================================ */

/* ---------- base (dark) ---------- */
/* Apna dark background taake Kadence ke white page par bhi text saaf nazar aaye */
.stk-single, .stk-archive { color: #d1d5db; background: #0a0e0d; border: 1px solid #1c2422; border-radius: 22px; overflow: hidden; }
.stk-hero { position: relative; text-align: center; padding: 56px 20px 40px; overflow: hidden; }
.stk-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 320px at 50% 0%, rgba(34,197,94,.14), transparent 70%); pointer-events: none; }
.stk-hero > * { position: relative; }
.stk-hero-slim { padding: 40px 20px 28px; }
.stk-stars { color: #fbbf24; letter-spacing: 6px; font-size: 20px; }
.stk-title { color: #ffffff; font-size: clamp(30px, 5vw, 52px); font-weight: 800; line-height: 1.15; margin: .35em 0 .3em; }
.stk-tagline { font-size: clamp(17px, 2.6vw, 24px); font-weight: 700; background: linear-gradient(90deg, var(--stk-accent, #22c55e), #4ade80); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.stk-hero-desc { color: #9ca3af; max-width: 640px; margin: 1em auto 0; line-height: 1.7; }
.stk-hero-layout { display: grid; grid-template-columns: 1fr 260px; gap: 40px; align-items: center; max-width: 980px; margin: 32px auto 0; text-align: left; }
/* Featured image na ho to single centered column (khaali jagah layout kharab nahi karegi) */
.stk-hero-layout.stk-no-phone { grid-template-columns: 1fr; max-width: 720px; }
.stk-hero-left { text-align: center; }
.stk-phone { width: 230px; height: 460px; margin: 0 auto; background: #0b0f0e; border: 10px solid #1b2321; border-radius: 38px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 46px rgba(34,197,94,.14); }
.stk-phone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stk-actions { margin: 1.4em 0 1em; }
.stk-download-btn { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(180deg, var(--stk-accent, #22c55e), #15803d); color: var(--stk-btn-text, #ffffff) !important; padding: 16px 44px; border-radius: 999px; font-size: 18px; font-weight: 700; text-decoration: none !important; box-shadow: 0 10px 32px rgba(34,197,94,.35); transition: transform .15s ease, box-shadow .15s ease; }
.stk-download-btn::before { content: "⬇"; }
.stk-download-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(34,197,94,.5); color: var(--stk-btn-text, #ffffff) !important; }
.stk-badges { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; color: #9ca3af; font-size: 14px; }
.stk-badges span::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 7px; border-radius: 50%; background: rgba(34,197,94,.15); color: var(--stk-accent, #22c55e); font-size: 12px; font-weight: 700; }

/* Clickable Table of Contents dropdown (items auto-built from article headings via JS) */
.stk-toc-wrap { max-width: 880px; margin: 8px auto 0; padding: 0 20px; }
.stk-toc { display: flex; width: 100%; justify-content: space-between; align-items: center; background: #111827; border: 1px solid rgba(34,197,94,.45); border-radius: 12px; padding: 16px 22px; color: #fff; font-weight: 600; font-size: 16px; font-family: inherit; cursor: pointer; box-shadow: 0 0 26px rgba(34,197,94,.10); }
.stk-toc-chevron { display: inline-block; transition: transform .2s ease; }
.stk-toc.open .stk-toc-chevron { transform: rotate(180deg); }
.stk-toc-list { margin-top: 10px; background: #0e1412; border: 1px solid #1f2a27; border-radius: 12px; padding: 8px 20px; }
.stk-toc-list[hidden] { display: none; }
.stk-toc-list a { display: block; padding: 10px 2px; color: #d1d5db !important; text-decoration: none !important; border-bottom: 1px solid #1b2321; }
.stk-toc-list a:last-child { border-bottom: none; }
.stk-toc-list a:hover { color: var(--stk-accent, #22c55e) !important; }
.stk-toc-list a.stk-toc-h3 { padding-left: 22px; font-size: .92em; color: #9ca3af !important; }
html { scroll-behavior: smooth; }
.stk-info-section { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.stk-section-title { color: #ffffff; font-size: clamp(22px, 3.6vw, 32px); font-weight: 800; margin: 1.6em 0 .8em; }
.stk-green { color: var(--stk-accent, #22c55e); }
.stk-info-card { background: #0e1412; border: 1px solid #1f2a27; border-radius: 18px; padding: 10px 26px; }
.stk-info-table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.stk-info-table th, .stk-info-table td { padding: 13px 8px; text-align: left; border-bottom: 1px solid #1b2321; }
.stk-info-table tr:last-child th, .stk-info-table tr:last-child td { border-bottom: none; }
.stk-info-table th { color: #e5e7eb; font-weight: 600; width: 38%; }
.stk-info-table th::before { content: "●"; color: var(--stk-accent, #22c55e); margin-right: 9px; font-size: 10px; vertical-align: 2px; }
.stk-info-table td { color: #9ca3af; }
.stk-content { max-width: 880px; margin: 36px auto; padding: 0 20px; line-height: 1.8; color: #d1d5db; }
.stk-content h2, .stk-content h3, .stk-content h4 { color: #fff; }
.stk-content a { color: var(--stk-accent, #22c55e); }
/* Jo link apni akeli line/paragraph me ho, wo KHUD button ban jaye —
   puranay posts par bhi kaam karega, kuch edit karnay ki zaroorat nahi */
.stk-content p > a:only-child:not(:has(img)):not(:empty) { display: inline-block; background: linear-gradient(180deg, var(--stk-accent, #22c55e), #15803d); color: var(--stk-btn-text, #ffffff) !important; padding: 12px 34px; border-radius: 999px; font-weight: 700; text-decoration: none !important; margin: .4em 0; box-shadow: 0 8px 24px rgba(34,197,94,.28); transition: transform .15s ease, box-shadow .15s ease; }
.stk-content p > a:only-child:not(:has(img)):not(:empty):hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(34,197,94,.42); color: var(--stk-btn-text, #ffffff) !important; }
.stk-tool-card { padding: 26px; }

.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; margin: 1.5em 0; }
.stk-card { display: block; background: #101614; border: 1px solid #1f2a27; border-radius: 16px; padding: 20px 14px; text-align: center; text-decoration: none !important; color: #e5e7eb; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.stk-card:hover { transform: translateY(-4px); border-color: var(--stk-accent, #22c55e); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.stk-card-icon { width: 66px; height: 66px; margin: 0 auto 10px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--stk-accent, #22c55e), #0ea5e9); }
img.stk-card-img { width: 66px; height: 66px; object-fit: cover; border-radius: 18px; margin: 0 auto 10px; display: block; }
.stk-card-title { display: block; font-weight: 700; color: #fff; margin-top: 8px; }
.stk-card-meta { display: block; font-size: .85em; color: var(--stk-accent, #22c55e); margin-top: 4px; }

@media (max-width: 760px) {
  .stk-hero-layout { grid-template-columns: 1fr; text-align: center; }
  .stk-phone { order: -1; width: 200px; height: 400px; }
}

/* ---------- light look (when "Dark premium style" is unticked) ---------- */
body:not(.stk-dark) .stk-single, body:not(.stk-dark) .stk-archive { color: #374151; background: transparent; border: none; border-radius: 0; }
body:not(.stk-dark) .stk-hero::before { background: radial-gradient(640px 320px at 50% 0%, rgba(34,197,94,.10), transparent 70%); }
body:not(.stk-dark) .stk-title, body:not(.stk-dark) .stk-section-title, body:not(.stk-dark) .stk-card-title { color: #111827; }
body:not(.stk-dark) .stk-hero-desc { color: #6b7280; }
body:not(.stk-dark) .stk-phone { border-color: #e5e7eb; box-shadow: 0 24px 60px rgba(0,0,0,.15); }
body:not(.stk-dark) .stk-badges { color: #6b7280; }
body:not(.stk-dark) .stk-toc { background: #f9fafb; border-color: #e5e7eb; color: #111827; box-shadow: none; }
body:not(.stk-dark) .stk-toc-list { background: #ffffff; border-color: #e5e7eb; }
body:not(.stk-dark) .stk-toc-list a { color: #374151 !important; border-bottom-color: #f0f0f0; }
body:not(.stk-dark) .stk-info-card { background: #ffffff; border-color: #e5e7eb; }
body:not(.stk-dark) .stk-info-table th, body:not(.stk-dark) .stk-info-table td { border-bottom-color: #f0f0f0; }
body:not(.stk-dark) .stk-info-table th { color: #111827; }
body:not(.stk-dark) .stk-info-table td { color: #4b5563; }
body:not(.stk-dark) .stk-content { color: #374151; }
body:not(.stk-dark) .stk-content h2, body:not(.stk-dark) .stk-content h3, body:not(.stk-dark) .stk-content h4 { color: #111827; }
body:not(.stk-dark) .stk-card { background: #ffffff; border-color: #e5e7eb; color: #374151; }

/* ---------- slim page-title band (v1.5.2, alignment corrected v1.5.3) ---------- */
/* Kadence inner-page hero: the theme rule
   .entry-hero.page-hero-section .entry-header { min-height: 200px }
   plus container padding made a tall, empty band around the title.
   Slim strip instead: no min-height, 22px vertical padding, title
   left-aligned at the content width, and a subtle accent line along
   the bottom edge. The band background (dark red gradient) and the
   white 800-weight title come from the Customizer and stay untouched.
   The band's H1 (.entry-title) is unchanged, still exactly one per page. */
body .entry-hero.page-hero-section .entry-hero-container-inner { padding-top: 22px; padding-bottom: 22px; }
body .entry-hero.page-hero-section .hero-container { padding-top: 0; padding-bottom: 0; }
/* v1.5.3: the theme base rule .entry-hero-container-inner .entry-header
   (content.min.css) is a COLUMN flex container, and v1.5.2 never overrode
   its flex-direction, so align-items acted on the horizontal cross axis
   and align-items:center centred the H1 box in the strip. Pin the
   direction and start-align the cross axis; same selector as v1.5.2,
   which already outranks the theme (0,2,0) and Customizer (0,3,0) rules,
   so no !important is needed. */
body .entry-hero.page-hero-section .entry-header.page-title { min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; }
body .entry-hero.page-hero-section .entry-title { font-size: 30px; line-height: 1.2; margin: 0; text-align: left; }
body .entry-hero.page-hero-section { border-bottom: 3px solid var(--stk-accent, #22c55e); }
@media (max-width: 767px) {
    body .entry-hero.page-hero-section .entry-title { font-size: 24px; }
}

/* ---------- mobile table cards (v1.5.7) ---------- */
/* v1.5.5 sirf WP Table block aur info tables ko cover karta tha. Site
   par aik aur tarah ki table hai: class ke baghair saadi HTML table
   (jaise /netmirror-tv/ ki Quick Comparison table, 4 columns), jo
   mobile par dab kar kat jati thi. Ab teenon tarah ki tables card ban
   jati hain: har row ek card, pehli cell card ka title, baqi cells
   us ke neechay tarteeb se. Column header row chhup jati hai kyunke
   har card apna label/title khud dikhata hai. box-sizing saaf likha
   hai taake padding kabhi card ko bahar na dhakelay. Desktop, rang
   aur content bilkul waisay ka waisa. */
@media (max-width: 640px) {
  .wp-block-table table,
  .entry-content table,
  .stk-info-table {
    display: block;
    table-layout: auto;
    width: 100%;
  }
  .wp-block-table table tbody,
  .wp-block-table table tr,
  .wp-block-table table th,
  .wp-block-table table td,
  .entry-content table tbody,
  .entry-content table tr,
  .entry-content table th,
  .entry-content table td,
  .stk-info-table tbody,
  .stk-info-table tr,
  .stk-info-table th,
  .stk-info-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  /* Column header row: har card apna label/title khud dikhata hai */
  .wp-block-table table tr:first-child:has(th),
  .entry-content table tr:first-child:has(th) {
    display: none;
  }
  /* Har data row ek card */
  .wp-block-table table tr,
  .entry-content table tr,
  .stk-info-table tr {
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .wp-block-table table th,
  .stk-info-table th {
    padding: 0 0 4px;
    border-bottom: none;
    font-size: 0.85em;
    opacity: 0.75;
  }
  .wp-block-table table td,
  .entry-content table td,
  .stk-info-table td {
    padding: 0;
    border-bottom: none;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* File Panel jaisi label/value tables me label pehli td hoti hai */
  .wp-block-table table.has-fixed-layout td:first-child {
    font-size: 0.85em;
    opacity: 0.75;
    padding-bottom: 4px;
  }
  /* Comparison tables me pehli cell card ka title hoti hai */
  .wp-block-table table:not(.has-fixed-layout) tr:not(:first-child) > :first-child,
  .entry-content table:not(.has-fixed-layout) tr:not(:first-child) > :first-child {
    font-weight: 700;
    padding-bottom: 4px;
  }
  /* Lambi strings (URLs, file names) kisi bhi content table ko
     horizontal overflow na dein */
  .wp-block-table td,
  .wp-block-table th,
  .entry-content td,
  .entry-content th {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Asal wajah (v1.5.7): site ki apni nma-design-skin custom CSS me
     table cells par white-space:nowrap !important laga hua hai, jo
     mobile par text ko wrap honay se rok kar card ke bahar kaat deta
     tha. Sirf mobile par usay normal karo (body prefix se specificity
     zyada hai, is liye !important ke bawajood jeet jata hai). Laptop
     ka scroll wala behavior bilkul waisa ka waisa rehta hai. */
  body .wp-block-table table th,
  body .wp-block-table table td,
  body .entry-content table th,
  body .entry-content table td,
  body .stk-info-table th,
  body .stk-info-table td {
    white-space: normal !important;
  }
}