/* ==========================================================================
   BangaloreBlogs — Static Rebuild v1.0 (June 2026)
   Single sitewide stylesheet. No frameworks. No jQuery. No Elementor.
   Editorial identity: ink + paper + category colour-coding.
   ========================================================================== */

:root{
  --ink:#1a2330;
  --ink-soft:#46505e;
  --paper:#fbfaf7;
  --card:#ffffff;
  --rule:#e4e1d8;
  --brand:#1e6b4f;            /* Cubbon green */
  --brand-dark:#14503a;
  --c-gamedev:#6c3fc9;
  --c-food:#c2541b;
  --c-education:#1e5fa8;
  --c-travel:#1e6b4f;
  --c-tech:#3d4856;
  --c-health:#b23a48;
  --c-places:#8a6d1f;
  --c-events:#9c2f6e;
  --c-lifestyle:#5b7a2a;
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --max:1140px;
  --max-prose:760px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.65;color:var(--ink);background:var(--paper)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.18;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.2vw,2.9rem)}
h2{font-size:clamp(1.45rem,3vw,1.95rem)}
h3{font-size:1.25rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* Eyebrow / kicker — category colour-coding (sitewide signature) */
.kicker{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.kicker--gamedev{color:var(--c-gamedev)}
.kicker--food{color:var(--c-food)}
.kicker--education{color:var(--c-education)}
.kicker--travel{color:var(--c-travel)}
.kicker--tech{color:var(--c-tech)}
.kicker--health{color:var(--c-health)}
.kicker--places{color:var(--c-places)}
.kicker--events{color:var(--c-events)}
.kicker--lifestyle{color:var(--c-lifestyle)}

/* --- Topbar ------------------------------------------------------------ */
.topbar{background:var(--ink);color:#cfd6df;font-size:.78rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:34px;gap:12px}
.topbar a{color:#fff}

/* --- Masthead ----------------------------------------------------------- */
.masthead{border-bottom:3px double var(--rule);background:var(--card)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:18px;padding-bottom:14px}
.logo{font-family:var(--display);font-size:1.7rem;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo .dot{color:var(--brand)}
.tagline{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* --- Nav ----------------------------------------------------------------- */
   @media screen and (min-width: 769px) {
  .nav-links {
    display: contents !important;
  }
}
.nav{background:var(--card);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50}
.nav .wrap{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{display:block;padding:11px 13px;color:var(--ink);font-size:.88rem;font-weight:600}
.nav a:hover{color:var(--brand);text-decoration:none}
.nav a[aria-current="page"]{color:var(--brand);box-shadow:inset 0 -3px 0 var(--brand)}
.nav-toggle{display:none}
@media(max-width:820px){
  .nav-toggle{display:block;background:none;border:1px solid var(--rule);border-radius:6px;padding:8px 14px;font:inherit;font-weight:700;color:var(--ink);margin:8px 0;cursor:pointer}
  .nav-links{display:none;width:100%;border-top:1px solid var(--rule)}
  .nav-links.open{display:block}
  .nav-links a{border-bottom:1px solid var(--rule)}
}

/* --- Disclosure band ----------------------------------------------------- */
.disclosure{background:#f1efe7;border-bottom:1px solid var(--rule);font-size:.82rem;color:var(--ink-soft)}
.disclosure .wrap{padding-top:8px;padding-bottom:8px}

/* --- Feature hero -------------------------------------------------------- */
.feature{padding:38px 0 30px}
.feature .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.feature h1 a,.feature h2 a{color:var(--ink)}
.feature p.lede{font-size:1.05rem;color:var(--ink-soft);margin:.4em 0 1em}
.feature img{border-radius:10px;border:1px solid var(--rule)}
.byline{font-size:.82rem;color:var(--ink-soft)}
@media(max-width:820px){.feature .wrap{grid-template-columns:1fr}}

/* --- Section heads -------------------------------------------------------- */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;border-top:3px solid var(--ink);padding-top:12px;margin:34px 0 18px}
.sec-head h2{margin:0}
.sec-head a{font-size:.85rem;font-weight:700}

/* --- Trending (ranked list — numbering = real rank order) ----------------- */
.trending{counter-reset:rank;display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;list-style:none;margin:0;padding:0}
.trending li{counter-increment:rank;display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.trending li::before{content:counter(rank,decimal-leading-zero);font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--rule);line-height:1}
.trending a{color:var(--ink);font-weight:600;line-height:1.35;display:block}
.trending .meta{font-size:.76rem;color:var(--ink-soft);margin-top:3px}
@media(max-width:820px){.trending{grid-template-columns:1fr}}

/* --- Card grid ------------------------------------------------------------ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--rule);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;border-top:4px solid var(--brand)}
.card--gamedev{border-top-color:var(--c-gamedev)}
.card--food{border-top-color:var(--c-food)}
.card--education{border-top-color:var(--c-education)}
.card--travel{border-top-color:var(--c-travel)}
.card--tech{border-top-color:var(--c-tech)}
.card--health{border-top-color:var(--c-health)}
.card--places{border-top-color:var(--c-places)}
.card--events{border-top-color:var(--c-events)}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:1.12rem;margin:0}
.card h3 a{color:var(--ink)}
.card p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.card .meta{font-size:.76rem;color:var(--ink-soft);margin-top:auto;padding-top:8px}

/* --- Editor / trust band ---------------------------------------------------- */
.band{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;margin:40px 0}
@media(max-width:820px){.band{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:24px}
.editor{display:flex;gap:18px;align-items:flex-start}
.editor .avatar{flex:0 0 64px;width:64px;height:64px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:1.4rem;display:flex;align-items:center;justify-content:center}
.editor ul{list-style:none;margin:.6em 0;padding:0;font-size:.9rem}
.editor li{padding:3px 0 3px 22px;position:relative}
.editor li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700}
.editor blockquote{margin:.8em 0 0;font-family:var(--display);font-style:italic;font-size:1.02rem;color:var(--ink-soft);border-left:3px solid var(--brand);padding-left:14px}
.trust h3{margin-top:0}
.trust dl{margin:0}
.trust dt{font-weight:700;margin-top:12px}
.trust dd{margin:2px 0 0;font-size:.9rem;color:var(--ink-soft)}

/* --- Topics ----------------------------------------------------------------- */
.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.topics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.topics{grid-template-columns:1fr}}
.topic{background:var(--card);border:1px solid var(--rule);border-left:5px solid var(--brand);border-radius:8px;padding:16px 18px;color:var(--ink)}
.topic:hover{text-decoration:none;border-left-width:9px}
.topic strong{display:block;font-family:var(--display);font-size:1.08rem}
.topic span{font-size:.85rem;color:var(--ink-soft)}
.topic small{display:block;margin-top:6px;font-size:.74rem;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase}
.topic--gamedev{border-left-color:var(--c-gamedev)}
.topic--food{border-left-color:var(--c-food)}
.topic--education{border-left-color:var(--c-education)}
.topic--travel{border-left-color:var(--c-travel)}
.topic--tech{border-left-color:var(--c-tech)}
.topic--health{border-left-color:var(--c-health)}

/* --- Article ------------------------------------------------------------------ */
.article-head{padding:34px 0 8px;max-width:var(--max-prose);margin:0 auto}
.breadcrumb{font-size:.8rem;color:var(--ink-soft);margin-bottom:14px}
.breadcrumb a{color:var(--ink-soft)}
.article-head h1{margin:.35em 0 .4em}
.article-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.84rem;color:var(--ink-soft);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:10px 0;margin-top:16px}
.article-meta strong{color:var(--ink)}
.prose{max-width:var(--max-prose);margin:0 auto;padding:10px 0 30px}
.prose>img{border-radius:10px;border:1px solid var(--rule);margin:22px 0}
.prose p{margin:0 0 1.15em}
.prose h2{margin-top:1.7em;border-top:3px solid var(--ink);padding-top:.55em}
.prose h3{margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.45em}
.callout{background:#f1efe7;border:1px solid var(--rule);border-left:5px solid var(--brand);border-radius:8px;padding:14px 18px;font-size:.92rem;margin:18px 0}
.lead{font-size:1.08rem;font-weight:600}

/* FAQ */
.faq details{border:1px solid var(--rule);border-radius:8px;background:var(--card);margin:0 0 10px;padding:0 16px}
.faq summary{font-weight:700;padding:13px 0;cursor:pointer;list-style:none;position:relative;padding-right:28px}
.faq summary::after{content:"+";position:absolute;right:2px;top:10px;font-size:1.3rem;color:var(--brand)}
.faq details[open] summary::after{content:"–"}
.faq p{padding-bottom:14px;margin:0;color:var(--ink-soft)}

/* Author box */
.author-box{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:22px;margin:30px 0;display:flex;gap:18px}
.author-box .avatar{flex:0 0 64px;width:64px;height:64px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:1.4rem;display:flex;align-items:center;justify-content:center}
.author-box p{margin:.3em 0;font-size:.92rem}
.updated-line{font-size:.8rem;color:var(--ink-soft);font-style:italic}

/* Related */
.related{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:20px 22px;margin:24px 0}
.related h2,.related h3{margin-top:0;border:0;padding-top:0}
.related ul{margin:0;padding-left:1.2em}
.related li{margin-bottom:.5em}

/* Tables */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0}
.table-scroll table{margin:0}
.prose table{width:100%;border-collapse:collapse;font-size:.9rem;margin:18px 0}
.prose th,.prose td{border:1px solid var(--rule);padding:9px 11px;text-align:left;vertical-align:top}
.prose th{background:#f1efe7;font-weight:700}
.prose tr:nth-child(even) td{background:#faf9f4}

/* --- Footer ---------------------------------------------------------------- */
.footer{background:var(--ink);color:#b9c2cd;margin-top:50px;font-size:.88rem}
.footer a{color:#e8edf3}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr;gap:32px;padding:40px 0 28px}
@media(max-width:820px){.footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer .cols{grid-template-columns:1fr}}
.footer h4{color:#fff;font-size:.95rem;margin-bottom:.7em}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:7px}
.footer .legal{border-top:1px solid #2d3845;padding:16px 0;font-size:.8rem}
.f-logo{font-family:var(--display);font-size:1.3rem;font-weight:700;color:#fff}
.badge{display:inline-block;background:#14503a;color:#bfe8d6;border-radius:6px;padding:3px 10px;font-size:.76rem;font-weight:700;margin-top:10px}

/* --- Utility ----------------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:10px;top:10px}
.center{text-align:center}

/* --- S5: listing + static page additions (homepage, blog, categories) ------- */
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#f1efe7}
.card--lifestyle{border-top-color:var(--c-lifestyle)}
.card .kicker{margin-bottom:2px}
.topic--places{border-left-color:var(--c-places)}
.topic--lifestyle{border-left-color:var(--c-lifestyle)}
.topic--events{border-left-color:var(--c-events)}
.page-head{padding:32px 0 6px;border-bottom:1px solid var(--rule);margin-bottom:26px}
.page-head .kicker{margin-bottom:8px}
.page-head h1{margin:.15em 0 .3em}
.page-head p{color:var(--ink-soft);margin:0;max-width:72ch}
.count{font-size:.84rem;color:var(--ink-soft);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.cat-tally{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.cat-tally a{font-size:.82rem;background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:5px 13px;color:var(--ink-soft);font-weight:600}
.cat-tally a:hover{text-decoration:none;border-color:var(--brand);color:var(--brand)}
.prose-page{max-width:var(--max-prose);margin:0 auto;padding:6px 0 20px}
.prose-page h2{margin-top:1.5em;border-top:3px solid var(--ink);padding-top:.5em}
.prose-page p,.prose-page li{color:var(--ink-soft)}
.prose-page ul{padding-left:1.3em}
.prose-page a{font-weight:600}
.contact-card{background:var(--card);border:1px solid var(--rule);border-left:5px solid var(--brand);border-radius:10px;padding:22px 24px;margin:18px 0}
.contact-card .kicker{margin-bottom:4px}
.contact-card a{font-size:1.15rem;font-weight:700}