/*
Theme Name: MillionGears
Theme URI: https://milliongears.in
Author: MillionGears
Author URI: https://milliongears.in
Description: Minimal tech review theme with sticky header, pill category bar, and round image categories. Blue/Black/White palette. Mobile-polished.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: milliongears
*/

:root{
  --mg-blue:#1e6fff; /* brand blue */
  --mg-black:#111111;
  --mg-grey:#f4f6f8; /* page background */
  --mg-white:#ffffff;
  --mg-muted:#6b7280;
  --ring: 0 0 0 3px rgba(30,111,255,.25);
}

html,body{margin:0;padding:0;background:var(--mg-grey);font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--mg-black)}

/* ===== Header ===== */
.header{position:sticky; top:0; z-index:50; background:var(--mg-white); box-shadow:0 1px 6px rgba(0,0,0,.06)}
.header-inner{max-width:1100px; margin:0 auto; padding:10px 16px; display:grid; grid-template-columns:40px 1fr 260px; gap:12px; align-items:center}

/* Menu icon (top-left) */
.menu-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1px solid #e5e7eb; background:var(--mg-white); cursor:pointer}
.menu-btn:focus-visible{outline:none; box-shadow:var(--ring)}
.menu-icon{width:20px; height:20px; display:block; position:relative}
.menu-icon::before,.menu-icon::after, .menu-icon span{content:""; position:absolute; left:0; right:0; height:2px; background:var(--mg-black); border-radius:2px}
.menu-icon::before{top:3px}
.menu-icon span{top:9px}
.menu-icon::after{top:15px}

/* Brand block (center) */
.brand{display:flex; flex-direction:column; gap:2px; align-items:flex-start}
.logo{display:flex; align-items:center; gap:10px}
.logo-gear{width:26px; height:26px;}
.logo-text{font-weight:800; letter-spacing:.2px; color:var(--mg-blue); font-size:22px}
.tagline{font-size:12px; color:#222}

/* Search (right) */
.search-wrap{display:flex; align-items:center; gap:8px}
.search{display:flex; align-items:center; gap:8px; background:var(--mg-grey); border:1px solid #e5e7eb; border-radius:12px; padding:8px 10px}
.search input{border:none; background:transparent; outline:none; min-width:0; width:100%; color:var(--mg-black)}
.search input::placeholder{color:#9ca3af}
.search svg{width:18px; height:18px}

/* ===== Category Bar ===== */
.catbar{background:var(--mg-white); border-top:1px solid #eef0f3; border-bottom:1px solid #eef0f3}
.catbar-inner{max-width:1100px; margin:0 auto; padding:0 8px}
.scroller{display:flex; gap:6px; overflow-x:auto; scrollbar-width:thin; padding:8px 8px}
.scroller::-webkit-scrollbar{height:8px}
.scroller::-webkit-scrollbar-thumb{background:#d1d5db; border-radius:10px}

.pill{flex:0 0 auto; padding:8px 12px; border-radius:999px; border:1px solid #e5e7eb; background:var(--mg-white); font-size:14px; font-weight:600; color:var(--mg-black); text-decoration:none; transition:transform .15s ease}
.pill:focus-visible{outline:none; box-shadow:var(--ring)}
.pill:hover{transform:translateY(-1px)}
.pill.home{background:rgba(30,111,255,.08); border-color:rgba(30,111,255,.25); color:var(--mg-blue)}

/* ===== Round Image Categories (no text) ===== */
.circle-cats{background:var(--mg-white); border-bottom:1px solid #eef0f3}
.circle-cats-inner{max-width:1100px; margin:0 auto; padding:10px 12px}
.circle-scroller{display:flex; gap:12px; overflow-x:auto; padding:6px 4px 12px}
.circle-scroller::-webkit-scrollbar{height:8px}
.circle-scroller::-webkit-scrollbar-thumb{background:#d1d5db; border-radius:10px}
.bubble{flex:0 0 auto; width:76px; height:76px; border-radius:999px; border:2px solid rgba(30,111,255,.15); overflow:hidden; background:#eef0f3; position:relative; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.bubble:focus-visible{outline:none; box-shadow:var(--ring)}
.bubble img{width:100%; height:100%; object-fit:cover; display:block}
/* visually hidden label for a11y */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ===== Page Container & Example Cards ===== */
.page{max-width:1100px; margin:18px auto; padding:0 16px}
.section-title{font-size:18px; font-weight:800; margin:12px 0}
.grid{display:grid; gap:14px; grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 12; background:var(--mg-white); border:1px solid #eef0f3; border-radius:14px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.03)}
.thumb{aspect-ratio:16/9; background:#e5e7eb}
.card-body{padding:12px}
.meta{font-size:12px; color:var(--mg-muted)}
.title{margin:4px 0 0; font-size:16px}

@media(min-width:640px){
  .card{grid-column:span 6}
}
@media(min-width:960px){
  .card{grid-column:span 4}
}

/* ===== MOBILE POLISH ===== */
a { color: inherit; text-decoration: none; }
a:hover { opacity: .9; }
.title a { color: var(--mg-black); }
.title a:hover { color: var(--mg-blue); }
.section-title { color: var(--mg-blue); font-size: 16px; margin: 10px 0 8px; }
html, body { overflow-x: hidden; }
.card { border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.page { padding-bottom: 24px; }
footer.entry-content { padding-bottom: 40px !important; }

@media (max-width: 480px) {
  .header-inner { grid-template-columns: 36px 1fr; gap: 8px; }
  .search-wrap { grid-column: 1 / -1; }
  .search { width: 100%; padding: 6px 8px; border-radius: 10px; }
  .search svg { width: 16px; height: 16px; }
  .search input { font-size: 14px; }
  .logo-text { font-size: 20px; }
  .tagline { font-size: 11px; }
  .pill { padding: 6px 10px; font-size: 13px; }
  .scroller { -webkit-overflow-scrolling: touch; padding: 8px 6px; }
  .bubble { width: 64px; height: 64px; }
  .circle-cats-inner { padding: 8px 10px; }
}

.single .title {
  font-size: 24px;
  font-weight: 700;
  margin: 12px 0;
  color: var(--mg-black);
}

.title { 
  margin: 6px 0 0; 
  font-size: 16px; 
  font-weight: 700; 
  line-height: 1.3; 
}
.title a { color: var(--mg-black); text-decoration: none; }
.title a:hover { color: var(--mg-blue); }

/* Optional: limit to 2 lines on small cards */
.title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}