/*
Theme Name: Jaitrends
Theme URI: https://jaitrends.com
Description: Lightweight news/magazine child theme for jaitrends.com. Renders the source-attribution footer, automation disclosure, and SEO/JSON-LD metadata that the publishing pipeline depends on.
Author: Jaitrends
Template: generatepress
Version: 1.1.0
Text Domain: jaitrends
*/

:root {
  --jt-accent: #0b63c5;
  --jt-accent-dark: #084a94;
  --jt-accent-soft: #eef4fc;
  --jt-ink: #16181d;
  --jt-muted: #5b6472;
  --jt-line: #e3e6eb;
  --jt-bg-soft: #f6f7f9;
  --jt-radius: 10px;
  /* System serif: editorial voice with no webfont request. */
  --jt-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
              "Times New Roman", serif;
}

body { color: var(--jt-ink); }

/* Headlines carry the editorial weight; sans stays for UI and metadata. */
.entry-title,
.single .entry-content h2,
.single .entry-content h3,
.site-title,
.jt-lead .entry-title {
  font-family: var(--jt-serif);
  letter-spacing: -0.011em;
}
.entry-title { font-weight: 600; }
a { color: var(--jt-accent); }
a:hover, a:focus { color: var(--jt-accent-dark); }

/* ---------- Site header ---------- */
.site-header { border-bottom: 1px solid var(--jt-line); }
.main-navigation { border-bottom: 1px solid var(--jt-line); }
.main-navigation .main-nav ul li a { font-weight: 600; letter-spacing: .01em; }

/* ---------- Archive / magazine grid ---------- */
.jt-grid .site-main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}
.jt-grid .site-main > .page-header,
.jt-grid .site-main > .paging-navigation,
.jt-grid .site-main > .jt-archive-intro { grid-column: 1 / -1; }

.jt-grid .post {
  margin: 0;
  padding: 0;
  border: 1px solid var(--jt-line);
  border-radius: var(--jt-radius);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.jt-grid .post .post-image { margin: 0; }
.jt-grid .post .post-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.jt-grid .post .inside-article { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.jt-grid .post .entry-title { font-size: 1.15rem; line-height: 1.35; margin-bottom: .35em; }
.jt-grid .post .entry-summary,
.jt-grid .post .entry-content { font-size: .93rem; color: var(--jt-muted); }
.jt-grid .post .entry-meta { font-size: .8rem; color: var(--jt-muted); margin-top: auto; padding-top: 12px; }

/* ---------- Category eyebrow ---------- */
.jt-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jt-accent);
  margin-bottom: .5em;
}
.jt-eyebrow a { color: inherit; text-decoration: none; }
.jt-eyebrow a:hover { text-decoration: underline; }

/* ---------- Single article ---------- */
.single .entry-title { line-height: 1.2; }
.single .entry-content { font-size: 1.06rem; line-height: 1.75; }
.single .entry-content p { margin-bottom: 1.35em; }
.single .entry-content h2 { margin-top: 1.9em; font-size: 1.45rem; line-height: 1.3; }
.single .entry-content h3 { margin-top: 1.6em; font-size: 1.18rem; }
.single .entry-content blockquote {
  border-left: 3px solid var(--jt-accent);
  padding-left: 1.1em;
  margin-left: 0;
  color: var(--jt-muted);
  font-style: normal;
}

.jt-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  font-size: .87rem;
  color: var(--jt-muted);
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--jt-line);
}
.jt-byline strong { color: var(--jt-ink); font-weight: 600; }

/* ---------- Sources footer (guardrail: every article cites its sources) ---------- */
.jt-sources {
  margin: 40px 0 0;
  padding: 20px 22px;
  background: var(--jt-bg-soft);
  border: 1px solid var(--jt-line);
  border-radius: var(--jt-radius);
}
.jt-sources h2 {
  font-size: .78rem !important;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--jt-muted);
  margin: 0 0 12px !important;
}
.jt-sources ol { margin: 0; padding-left: 1.25em; }
.jt-sources li { margin-bottom: .55em; font-size: .93rem; line-height: 1.5; }
.jt-sources li:last-child { margin-bottom: 0; }
.jt-sources .jt-source-domain { color: var(--jt-muted); font-size: .85em; }

/* ---------- Automation disclosure ---------- */
.jt-disclosure {
  margin-top: 22px;
  padding: 14px 18px;
  border-left: 3px solid var(--jt-accent);
  background: #fff;
  font-size: .87rem;
  line-height: 1.55;
  color: var(--jt-muted);
}
.jt-disclosure a { font-weight: 600; }

/* ---------- Breadcrumbs ---------- */
.jt-breadcrumbs { font-size: .82rem; color: var(--jt-muted); margin-bottom: 14px; }
.jt-breadcrumbs a { color: var(--jt-muted); text-decoration: none; }
.jt-breadcrumbs a:hover { text-decoration: underline; color: var(--jt-accent); }

/* ---------- Footer ---------- */
.site-footer .site-info { font-size: .85rem; }

@media (max-width: 768px) {
  .jt-grid .site-main { grid-template-columns: 1fr; gap: 22px; }
  .single .entry-content { font-size: 1.02rem; }
}


/* ---------- Generated article artwork ---------- */
.jt-figure {
  margin: 0;
  overflow: hidden;
  background: var(--jt-bg-soft);
}
.jt-figure a { display: block; line-height: 0; }
.jt-figure img,
.jt-figure .jt-artwork {
  display: block;
  width: 100%;
  height: auto;
}
.jt-figure--wide img,
.jt-figure--wide .jt-artwork { aspect-ratio: 16 / 9; object-fit: cover; }
.jt-figure--hero img,
.jt-figure--hero .jt-artwork { aspect-ratio: 21 / 9; object-fit: cover; }

/* On a single article the artwork sits between byline and body. */
.single .jt-figure {
  border-radius: var(--jt-radius);
  margin: 4px 0 30px;
}

/* ---------- Card artwork sits flush with the card edge ----------
   GeneratePress renders our figure inside .inside-article, so the card's own
   padding has to be cancelled rather than avoided. */
.jt-grid .post .jt-figure { margin: -18px -18px 16px; }

/* ---------- Lead story ----------
   Full-bleed hero across the card, headline beneath. Deliberately not a
   side-by-side split: GeneratePress renders the header, summary and meta as
   siblings inside .inside-article, so a two-column grid would have to span
   rows it does not control, and the copy drifts apart whenever an article has
   a different number of blocks. Stacking is robust and reads better big. */
.jt-grid .post.jt-lead { grid-column: 1 / -1; }
.jt-grid .post.jt-lead .inside-article { padding: 0 0 30px; }
.jt-grid .post.jt-lead .jt-figure { margin: 0 0 24px; }
.jt-grid .post.jt-lead .inside-article > .entry-header,
.jt-grid .post.jt-lead .inside-article > .entry-summary,
.jt-grid .post.jt-lead .inside-article > .entry-content,
.jt-grid .post.jt-lead .inside-article > .entry-meta {
  max-width: 46rem;
  padding-left: 34px;
  padding-right: 34px;
}
.jt-grid .post.jt-lead .entry-header .entry-meta {
  padding-left: 0;
  padding-right: 0;
}
.jt-grid .post.jt-lead .entry-title {
  font-size: 2.35rem;
  line-height: 1.14;
  margin-bottom: .3em;
}
.jt-grid .post.jt-lead .entry-summary,
.jt-grid .post.jt-lead .entry-content {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--jt-ink);
}
.jt-grid .post.jt-lead .entry-meta { margin-top: 14px; padding-top: 0; }
.jt-grid .post.jt-lead .jt-eyebrow { font-size: .76rem; }

/* ---------- Card polish ---------- */
.jt-grid .post {
  transition: box-shadow .18s ease, transform .18s ease;
}
.jt-grid .post:hover {
  box-shadow: 0 6px 22px rgba(16, 20, 28, .09);
  transform: translateY(-2px);
}
.jt-grid .post .entry-title a { text-decoration: none; }
.jt-grid .post .entry-title a:hover { text-decoration: underline; }

/* Category-tinted eyebrow, matching that article's generated artwork. */
.jt-cat-trending      { --jt-card-accent: hsl(212, 64%, 38%); }
.jt-cat-tech          { --jt-card-accent: hsl(258, 64%, 42%); }
.jt-cat-entertainment { --jt-card-accent: hsl(330, 62%, 42%); }
.jt-cat-sports        { --jt-card-accent: hsl(152, 58%, 28%); }
.jt-cat-culture       { --jt-card-accent: hsl(28,  72%, 38%); }
.jt-grid .post .jt-eyebrow a { color: var(--jt-card-accent, var(--jt-accent)); }

/* ---------- Masthead ---------- */
.site-header { padding-top: 26px; padding-bottom: 22px; }
.site-title { font-size: 2.1rem; letter-spacing: -0.02em; }
.site-title a { color: var(--jt-ink); text-decoration: none; }
.site-description {
  font-size: .92rem;
  color: var(--jt-muted);
  letter-spacing: .01em;
}
.main-navigation {
  border-top: 1px solid var(--jt-line);
  border-bottom: 1px solid var(--jt-line);
}

@media (max-width: 880px) {
  .jt-grid .post.jt-lead .inside-article { padding-bottom: 22px; }
  .jt-grid .post.jt-lead .jt-figure { margin-bottom: 18px; }
  .jt-grid .post.jt-lead .inside-article > .entry-header,
  .jt-grid .post.jt-lead .inside-article > .entry-summary,
  .jt-grid .post.jt-lead .inside-article > .entry-content,
  .jt-grid .post.jt-lead .inside-article > .entry-meta { padding-left: 20px; padding-right: 20px; }
  .jt-grid .post.jt-lead .entry-title { font-size: 1.6rem; }
  .jt-grid .post.jt-lead .jt-figure--hero .jt-artwork { aspect-ratio: 16 / 9; }
}