/*
Theme Name: BOCI Mobile
Theme URI: https://boxofficecollection.info/
Author: PRP Webs
Author URI: https://prpwebs.com/
Description: Minimal, mobile-only, mobile-first WordPress theme. Homepage inspired by Bhaskar.com on phone; post layout inspired by Backlinko.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: boci-mobile
*/

/* ========== CSS RESET (tiny) ========== */
* { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding-left: 1.25rem; }

/* ========== ROOT VARS ========== */
:root{
  --bg: #ffffff;
  --text: #121212;
  --muted: #60636b;
  --accent: #ff3b30; /* warm red for chips and highlights */
  --border: #eee;
  --card: #fff;
  --chip-bg: #fff0f0;
  --chip-text: #c4161c;
  --maxw: 720px; /* single post content width */
}

html, body{ background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif; line-height: 1.5; }
body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ========== HEADER (mobile) ========== */
.header{
  position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; gap:.75rem; padding:.6rem .9rem; }
.logo{ font-weight:800; font-size:1.2rem; letter-spacing:0.3px; }
.menu-btn{ margin-left:auto; border:0; background:transparent; font-size:1.4rem; }
.nav{ display:none; border-top:1px solid var(--border); }
.nav.active{ display:block; }
.nav a{ display:inline-block; padding:.6rem .75rem; font-size:.95rem; color:#333; }
.chips{ overflow:auto; white-space:nowrap; padding:.5rem .9rem; border-top:1px solid var(--border); gap:.5rem; display:flex; }
.chip{ background:var(--chip-bg); color:var(--chip-text); border:1px solid #ffd6d6; padding:.35rem .6rem; border-radius:999px; font-size:.82rem; font-weight:600; flex:0 0 auto; }

/* ========== HOME GRID (Bhaskar-style mobile feed) ========== */
.container{ padding:.8rem .9rem 1.2rem; }
.section-title{ font-size:1.1rem; font-weight:800; margin:.7rem 0; }
.grid{ display:grid; grid-template-columns:1fr; gap:.8rem; }
.card{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--card); }
.card-img{ aspect-ratio:16/9; background:#f4f4f4; }
.card-body{ padding:.7rem .8rem .9rem; }
.card-meta{ display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; }
.badge{ background:#111; color:#fff; font-size:.72rem; border-radius:4px; padding:.18rem .35rem; }
.time{ color:var(--muted); font-size:.78rem; }
.card-title{ font-size:1.02rem; font-weight:800; line-height:1.25; }
.card-desc{ font-size:.92rem; color:#2b2b2b; margin-top:.35rem; }
.load-more{ display:block; text-align:center; padding:.8rem; border:1px solid var(--border); border-radius:10px; margin-top:1rem; font-weight:700; background:#fafafa; }

/* ========== SINGLE (Backlinko-esque) ========== */
.post-hero{ padding:1rem .9rem; border-bottom:1px solid var(--border); }
.post-title{ font-size:1.6rem; font-weight:900; line-height:1.2; }
.post-meta{ color:var(--muted); font-size:.9rem; margin-top:.4rem; }
.progress{ position:fixed; top:0; left:0; height:3px; width:0%; background:var(--accent); z-index:2000; }

.post-wrap{ padding:1rem .9rem 2rem; display:flex; justify-content:center; }
.post-content{ width:100%; max-width:var(--maxw); }
.post-content p{ font-size:1.05rem; margin:1rem 0; }
.post-content h2{ font-size:1.32rem; margin:1.2rem 0 .6rem; font-weight:900; }
.post-content h3{ font-size:1.15rem; margin:1rem 0 .5rem; font-weight:800; }
.post-content blockquote{ border-left:4px solid var(--accent); padding:.5rem .9rem; background:#fff8f8; border-radius:8px; }
.post-content code{ background:#f6f6f6; padding:.1rem .3rem; border-radius:4px; }
.post-content pre{ background:#0f1117; color:#e5e7eb; padding:1rem; border-radius:10px; overflow:auto; }

/* TOC */
.toc{ border:1px solid var(--border); border-radius:12px; padding:.75rem; background:#fff; margin:1rem 0; }
.toc-title{ font-weight:900; margin-bottom:.5rem; }
.toc ul{ list-style:none; padding-left:0; }
.toc a{ color:#0a58ca; font-size:.98rem; }
.toc li{ margin:.35rem 0; }

/* Share bar */
.share{ display:flex; gap:.6rem; margin-top:1rem; }
.share a{ border:1px solid var(--border); padding:.45rem .6rem; border-radius:8px; font-weight:700; }

/* Footer */
.footer{ border-top:1px solid var(--border); padding:1rem .9rem 3rem; color:var(--muted); font-size:.9rem; }

/* Tablet+ enhancements (kept light) */
@media (min-width: 768px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .post-title{ font-size:2rem; }
  .post-content p{ font-size:1.12rem; }
}