/*
Theme Name: The Good City
Theme URI: https://thegoodcity.in
Author: Raintree Media
Author URI: https://raintreemedia.com
Description: An editorial-first WordPress theme for The Good City — an independent publication, podcast and community telling stories of the people shaping Bharat. Inspired by Monocle, Kinfolk and The New Yorker, with an unmistakably Indian identity. Supports articles, podcasts, videos, community events, memberships and brand partnerships.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thegoodcity
Tags: editorial, magazine, blog, news, podcast, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, rtl-language-support
*/

/* ---------------------------------------------------------
   THE GOOD CITY — Design System
   Editorial, premium, modern, mobile-first.
   --------------------------------------------------------- */

:root {
  --tgc-ink:       #14130F;   /* near-black, warm */
  --tgc-paper:     #F6F2EA;   /* warm off-white */
  --tgc-paper-2:   #ECE6D8;   /* deeper paper */
  --tgc-rule:      #1414141A; /* hairline */
  --tgc-muted:     #6B6A63;
  --tgc-accent:    #B5341B;   /* sindoor red — Indian identity */
  --tgc-saffron:   #D98A2B;
  --tgc-ivy:       #2E3B2A;

  --tgc-serif:    "Canela", "Tiempos Headline", "GT Sectra", "Playfair Display", Georgia, "Times New Roman", serif;
  --tgc-sans:     "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --tgc-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --tgc-maxw:     1280px;
  --tgc-gutter:   clamp(16px, 3vw, 32px);
  --tgc-radius:   2px;
}

*,*::before,*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tgc-paper);
  color: var(--tgc-ink);
  font-family: var(--tgc-sans);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "ss01","kern","liga";
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--tgc-accent); }

img, video { max-width: 100%; height: auto; display: block; }

h1,h2,h3,h4 {
  font-family: var(--tgc-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }

.eyebrow {
  font-family: var(--tgc-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tgc-accent);
  font-weight: 600;
}

.container {
  max-width: var(--tgc-maxw);
  margin: 0 auto;
  padding: 0 var(--tgc-gutter);
}

/* -------- Top bar / Masthead -------- */
.tgc-topbar {
  border-bottom: 1px solid var(--tgc-rule);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tgc-muted);
}
.tgc-topbar__inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px var(--tgc-gutter);
  max-width: var(--tgc-maxw); margin: 0 auto;
}
.tgc-topbar__date { font-variant-numeric: tabular-nums; }
.tgc-topbar__tag { color: var(--tgc-accent); font-weight: 600; }

.tgc-masthead {
  text-align: center;
  padding: 28px var(--tgc-gutter) 18px;
  border-bottom: 1px solid var(--tgc-rule);
}
.tgc-masthead__title {
  font-family: var(--tgc-serif);
  font-size: clamp(2rem, 6vw, 4.25rem);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.02em;
}
.tgc-masthead__title a:hover { color: var(--tgc-ink); }
.tgc-masthead__tagline {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tgc-muted);
}

/* -------- Primary nav -------- */
.tgc-nav {
  border-bottom: 1px solid var(--tgc-rule);
  position: sticky; top: 0; z-index: 50;
  background: var(--tgc-paper);
  backdrop-filter: saturate(140%) blur(8px);
}
.tgc-nav__inner {
  max-width: var(--tgc-maxw);
  margin: 0 auto;
  padding: 0 var(--tgc-gutter);
  display: flex; align-items: center; justify-content: space-between;
  height: 48px;
}
.tgc-nav__menu {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 22px; overflow-x: auto;
  scrollbar-width: none;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}
.tgc-nav__menu::-webkit-scrollbar { display: none; }
.tgc-nav__menu a { white-space: nowrap; padding: 14px 0; display: inline-block; border-bottom: 2px solid transparent; }
.tgc-nav__menu .current-menu-item > a,
.tgc-nav__menu a:hover { border-bottom-color: var(--tgc-accent); color: var(--tgc-ink); }
.tgc-nav__search { background: none; border: 0; cursor: pointer; padding: 8px; color: var(--tgc-ink); }

/* -------- Hero / Featured -------- */
.tgc-hero {
  padding: 40px 0 24px;
  border-bottom: 1px solid var(--tgc-rule);
}
.tgc-hero__grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .tgc-hero__grid { grid-template-columns: 1.4fr 1fr; align-items: end; }
}
.tgc-hero__media { aspect-ratio: 4/3; overflow: hidden; background: var(--tgc-paper-2); }
.tgc-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.tgc-hero__title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  margin: .25em 0 .35em;
}
.tgc-hero__dek {
  font-size: 1.05rem;
  color: var(--tgc-muted);
  max-width: 52ch;
}
.tgc-hero__byline {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tgc-muted);
}

/* -------- Section header (rule + label) -------- */
.tgc-section {
  padding: 56px 0;
  border-bottom: 1px solid var(--tgc-rule);
}
.tgc-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 2px solid var(--tgc-ink);
  padding-top: 12px; margin-bottom: 28px;
}
.tgc-section__title {
  font-family: var(--tgc-sans);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  font-weight: 700;
}
.tgc-section__link {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tgc-muted);
}

/* -------- Story grid -------- */
.tgc-grid {
  display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.tgc-card { display: flex; flex-direction: column; }
.tgc-card__media { aspect-ratio: 3/2; overflow: hidden; background: var(--tgc-paper-2); margin-bottom: 14px; }
.tgc-card__media img { width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.tgc-card:hover .tgc-card__media img { transform: scale(1.03); }
.tgc-card__cat { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tgc-accent); font-weight: 600; }
.tgc-card__title {
  font-family: var(--tgc-serif);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.18;
  margin: 6px 0 8px;
}
.tgc-card__meta { font-size: 12px; color: var(--tgc-muted); letter-spacing: .04em; }

/* -------- Article -------- */
.tgc-article {
  max-width: 720px; margin: 0 auto;
  padding: 56px var(--tgc-gutter);
}
.tgc-article__hero { margin: 0 calc(-1 * var(--tgc-gutter)) 28px; }
.tgc-article__hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.tgc-article__title { font-size: clamp(2rem, 5vw, 3.4rem); margin: .2em 0 .3em; }
.tgc-article__dek { font-size: 1.2rem; color: var(--tgc-muted); margin-bottom: 22px; }
.tgc-article__byline {
  display: flex; gap: 18px; align-items: center;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tgc-muted);
  padding: 14px 0; border-top: 1px solid var(--tgc-rule); border-bottom: 1px solid var(--tgc-rule);
  margin-bottom: 32px;
}
.tgc-prose { font-size: 1.125rem; line-height: 1.7; }
.tgc-prose p { margin: 0 0 1.25em; }
.tgc-prose p:first-of-type::first-letter {
  font-family: var(--tgc-serif);
  font-size: 4.6em; float: left; line-height: .85; padding: .05em .12em 0 0; color: var(--tgc-accent);
}
.tgc-prose blockquote {
  border-left: 3px solid var(--tgc-accent);
  padding: .25em 0 .25em 1.2em;
  margin: 1.6em 0;
  font-family: var(--tgc-serif);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--tgc-ink);
}
.tgc-prose a { background-image: linear-gradient(var(--tgc-accent), var(--tgc-accent)); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; }

/* -------- Podcast / Video tiles -------- */
.tgc-media-row {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .tgc-media-row { grid-template-columns: 1fr 1fr; } }
.tgc-media {
  background: var(--tgc-ink); color: var(--tgc-paper);
  padding: 28px; border-radius: var(--tgc-radius);
  display: flex; flex-direction: column; gap: 16px;
  min-height: 280px; justify-content: space-between;
}
.tgc-media--video { background: var(--tgc-ivy); }
.tgc-media__label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.tgc-media__title { font-family: var(--tgc-serif); font-size: 1.8rem; line-height: 1.15; margin: 0; }
.tgc-media__cta {
  display: inline-flex; gap: 10px; align-items: center;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  border-top: 1px solid #ffffff33; padding-top: 14px;
}

/* -------- Events -------- */
.tgc-event {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 20px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--tgc-rule);
}
.tgc-event__date {
  text-align: center; font-family: var(--tgc-serif);
  border: 1px solid var(--tgc-ink); padding: 10px 0; line-height: 1;
}
.tgc-event__date .d { font-size: 1.8rem; display: block; }
.tgc-event__date .m { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }
.tgc-event__title { font-family: var(--tgc-serif); font-size: 1.25rem; margin: 0 0 4px; }
.tgc-event__meta { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tgc-muted); }
.tgc-btn {
  display: inline-block; padding: 12px 18px;
  background: var(--tgc-ink); color: var(--tgc-paper);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  border: 1px solid var(--tgc-ink);
}
.tgc-btn:hover { background: var(--tgc-accent); border-color: var(--tgc-accent); color: #fff; }
.tgc-btn--ghost { background: transparent; color: var(--tgc-ink); }

/* -------- Newsletter -------- */
.tgc-dispatch {
  background: var(--tgc-paper-2);
  padding: 56px var(--tgc-gutter);
  text-align: center;
}
.tgc-dispatch__inner { max-width: 640px; margin: 0 auto; }
.tgc-dispatch h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.tgc-dispatch__form { display: flex; gap: 8px; margin-top: 20px; }
.tgc-dispatch__form input[type=email] {
  flex: 1; padding: 14px 16px; border: 1px solid var(--tgc-ink); background: var(--tgc-paper);
  font: inherit;
}

/* -------- Membership CTA -------- */
.tgc-member {
  background: var(--tgc-ink); color: var(--tgc-paper);
  padding: 64px var(--tgc-gutter); text-align: center;
}
.tgc-member h2 { color: var(--tgc-paper); }
.tgc-member__list { list-style: none; padding: 0; margin: 20px auto; max-width: 520px; font-size: 14px; opacity: .85; }
.tgc-member__list li { padding: 6px 0; border-bottom: 1px solid #ffffff1a; }

/* -------- Partners -------- */
.tgc-partners {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 24px; align-items: center;
}
.tgc-partners > * { opacity: .55; filter: grayscale(1); transition: .2s; text-align: center; font-family: var(--tgc-serif); font-size: 1.1rem; padding: 18px; border: 1px solid var(--tgc-rule); }
.tgc-partners > *:hover { opacity: 1; filter: none; }

/* -------- Footer -------- */
.tgc-footer {
  background: var(--tgc-ink); color: var(--tgc-paper);
  padding: 56px var(--tgc-gutter) 28px;
}
.tgc-footer__grid {
  max-width: var(--tgc-maxw); margin: 0 auto;
  display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.tgc-footer h4 {
  font-family: var(--tgc-sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #ffffffaa; margin: 0 0 14px;
}
.tgc-footer ul { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.tgc-footer li { padding: 4px 0; }
.tgc-footer a:hover { color: var(--tgc-saffron); }
.tgc-footer__base {
  max-width: var(--tgc-maxw); margin: 40px auto 0; padding-top: 20px;
  border-top: 1px solid #ffffff1a;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 12px; color: #ffffff80;
}

/* -------- Utility -------- */
.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }

/* WP core classes */
.wp-caption, .gallery-caption, .bypostauthor, .sticky, .screen-reader-text { display: block; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); }

/* Comments minimal */
.comment-list { list-style: none; padding: 0; }
.comment-list li { padding: 16px 0; border-top: 1px solid var(--tgc-rule); }