/* ============================================================
   guide.css — shared styles for guide-public, guide-scorer,
   and guide-admin pages
   ============================================================ */

/* ── Hero banner ─────────────────────────────────────────── */
.guide-hero {
    color: white;
    padding: 50px 40px;
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
}
.guide-hero::before {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 6em;
    opacity: 0.15;
}
.guide-hero h1 { margin: 0 0 10px 0; font-size: 2em; }
.guide-hero p  { margin: 0; opacity: 0.9; font-size: 1.1em; }

/* Per-page hero gradients and icons */
.guide-hero--public {
    background: linear-gradient(135deg, #1a237e 0%, #CE1126 100%);
}
.guide-hero--public::before { content: '🏏'; }

.guide-hero--scorer {
    background: linear-gradient(135deg, #2E7D32 0%, #1a237e 100%);
}
.guide-hero--scorer::before { content: '🏏'; }

.guide-hero--admin {
    background: linear-gradient(135deg, #CE1126 0%, #1a237e 100%);
}
.guide-hero--admin::before { content: '⚙️'; }

/* ── Section ─────────────────────────────────────────────── */
.guide-section { margin-bottom: 20px; }
.guide-section h2 {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.guide-section h3 {
    color: #1a237e;
    margin: 20px 0 8px 0;
    font-size: 1.05em;
}
.guide-section p, .guide-section li { line-height: 1.8; color: #444; }
.guide-section ol, .guide-section ul { padding-left: 22px; margin: 10px 0; }
.guide-section li { margin-bottom: 6px; }

/* Per-page section heading colours */
.guide-section--public h2  { color: var(--png-red); }
.guide-section--scorer h2  { color: #2E7D32; }
.guide-section--admin h2   { color: #CE1126; }

/* ── Screenshots ─────────────────────────────────────────── */
.guide-screenshot {
    width: 100%;
    max-width: 800px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 16px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.screenshot-caption {
    font-size: 0.85em;
    color: #888;
    margin: -8px 0 16px 0;
    font-style: italic;
}

/* ── Rules download block ────────────────────────────────── */
.rules-download {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f0f4ff;
    border: 1px solid #c5cae9;
    border-radius: 10px;
    padding: 20px 24px;
    margin: 16px 0;
}
.rules-download .rules-icon { font-size: 2.5em; }
.rules-download p { margin: 0 0 4px 0; font-weight: 600; color: #1a237e; }
.rules-download span { font-size: 0.88em; color: #666; }

/* ── Nav links ───────────────────────────────────────────── */
.guide-nav-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* ── Tip / warn / danger blocks ─────────────────────────── */
.tip-block {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 0.93em;
    color: #2E7D32;
}
.tip-block::before { content: '💡 '; font-style: normal; }

.warn-block {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 0.93em;
    color: #f57f17;
}
.warn-block::before { content: '⚠️ '; font-style: normal; }

.danger-block {
    background: #ffebee;
    border: 1px solid #ef9a9a;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 0.93em;
    color: #c62828;
}
.danger-block::before { content: '🚫 '; }

/* ── Step block (scorer guide) ───────────────────────────── */
.step-block {
    background: #f8f9fa;
    border-left: 4px solid #2E7D32;
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin: 12px 0;
}
.step-block strong { color: #1a237e; }

/* ── Score button demo (scorer guide) ───────────────────── */
.score-btn-demo {
    display: inline-block;
    background: #1976D2;
    color: white;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.88em;
    font-weight: 700;
    margin: 0 2px;
}

.score-btn-demo-tip {
    display: inline-block;
    background: #2E7D32;
    color: white;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.88em;
    font-weight: 700;
    margin: 0 2px;
}

/* ── Sync status pills (admin guide) ────────────────────── */
.status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.82em;
    font-weight: 700;
    margin: 0 2px;
}
.pill-pending  { background: #fff3e0; color: #e65100; }
.pill-conflict { background: #fce4ec; color: #c62828; }
.pill-accepted { background: #e8f5e9; color: #2E7D32; }
.pill-rejected { background: #ffebee; color: #CE1126; }
.pill-archived { background: #f5f5f5; color: #757575; }

/* ── Pre blocks (admin guide) ───────────────────────────── */
pre {
    background: #f5f5f5;
    padding: 12px;
    border-radius: 6px;
    font-size: 0.9em;
    overflow-x: auto;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .guide-hero { padding: 28px 20px; }
    .guide-hero h1 { font-size: 1.5em; }
    .guide-hero p  { font-size: 1em; }
    .guide-hero::before { font-size: 4em; right: 16px; }
    .guide-screenshot { max-width: 100%; }
    .rules-download { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
    .step-block { padding: 12px 14px; }
    pre { font-size: 0.82em; }
}

/* ── Additional classes for scorer/admin guides ──────────── */

/* Sub-headings (h4) in guide content */
.guide-subheading {
    color: var(--cricket-blue);
    margin: 16px 0 8px;
}

/* Nested TOC lists */
.guide-toc-sub {
    margin: 4px 0;
    padding-left: 18px;
    font-size: 0.92em;
}
.guide-toc-sub--nested {
    list-style-type: disc;
    font-size: 0.95em;
}

/* Narrow screenshots (modals, small UI elements) */
.guide-screenshot--narrow {
    max-width: 400px;
    width: 100%;
}

/* Score button colour variants */
.score-btn-demo--orange { background: #E65100; }
.score-btn-demo--side   { background: #2E7D32; }
.score-btn-demo--wicket { background: #c62828; }
.score-btn-demo--nb     { background: #F57C00; }

/* APK download card */
.apk-download-card {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.apk-download-icon { font-size: 2.5em; }
.apk-download-body {
    flex: 1;
    min-width: 200px;
}
.apk-download-title {
    margin: 0 0 4px;
    font-weight: 700;
    color: var(--cricket-blue);
    font-size: 1.05em;
}
.apk-download-desc {
    font-size: 0.88em;
    color: #666;
}
.apk-download-btn { white-space: nowrap; }
.guide-screenshot--hidden { display: none !important; }