/*
Theme Name: vyasa4
Theme URI: https://amarvyas.in
Author: Amar Vyas
Description: Astra-inspired, writer-first, clean-room WordPress theme. Built for long-form reading.
Version: 1.0
Requires PHP: 8.1
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vyasa4
*/


/* ======================================================
   DESIGN TOKENS
   ====================================================== */

:root {
  /* Widths */
  --container-max: 1100px;
  --reading-max: 75ch;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;

  /* Colours */
  --ink-body: #708090;
  --ink-muted: #5f6c7b;
  --ink-footer: #d6d6d6;

  --accent-maroon: #7a1e1e;

  /* Backgrounds */
  --bg-archive: #e6f2ec;      /* pista */
  --bg-archive-card: #d9ebe1;
  --bg-page: #f3ede1;         /* beige */
  --bg-page-card: #ece4d5;
  --bg-single: #ffffff;
  --bg-header: #ffffff;
  --bg-footer: #2b2b2b;

  /* Typography */
  --font-body: Georgia, "Iowan Old Style", serif;
  --font-heading: "Playfair Display", Georgia, serif;

  --line-height: 1.85;

  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Inter', -apple-system, sans-serif; /* Or 'Steel' vibe: 'Source Sans Pro' */
  --ink-body: #708090; /* Steel grey color */
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* ======================================================
   RESET
   ====================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: var(--line-height);
  color: var(--ink-body);
  background: var(--bg-single);
  -webkit-font-smoothing: antialiased;
}

/* ======================================================
   CONTEXTUAL PAGE BACKGROUNDS (ONLY SOURCE OF TRUTH)
   ====================================================== */

body.archive,
body.blog {
  background: var(--bg-archive);
}

body.page {
  background: var(--bg-page);
}

body.single {
  background: var(--bg-single);
}

/* ======================================================
   CONTAINERS
   ====================================================== */

.site-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

.reading-container {
  max-width: var(--reading-max);
  margin-inline: auto;
}

/* ======================================================
   TYPOGRAPHY
   ====================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.25;
  margin: var(--space-l) 0 var(--space-s);
}

h1 {
  font-size: 2.3rem;
  font-weight: 600;
}

p {
  margin-bottom: var(--space-m);
}

a {
  color: var(--accent-maroon);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ======================================================
   HEADER
   ====================================================== */

.site-header {
  background: var(--bg-header);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.header-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-m);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin: 0;
}

.primary-navigation ul {
  list-style: none;
  display: flex;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
}

.primary-navigation a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-body);
}

/* ======================================================
   CONTENT CARDS (SINGLE SYSTEM)
   ====================================================== */

.content-card {
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}

/* Archive cards */
.archive .content-card,
.blog .content-card {
  background: var(--bg-archive-card);
  border: 1px solid rgba(0,0,0,0.05);
}

/* Page cards */
.page .content-card {
  background: var(--bg-page-card);
  border: 1px solid rgba(0,0,0,0.05);
}

/* Single posts – no card */
.single .content-card {
  background: none;
  border: none;
  padding: 0;
}

/* ======================================================
   ARCHIVE GRID
   ====================================================== */

.archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--space-xl);
}

@media (max-width: 900px) {
  .archive-grid {
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   IMAGES
   ====================================================== */

.entry-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--space-l) auto;
}

/* ======================================================
   FOOTER
   ====================================================== */

.site-footer {
  background: var(--bg-footer);
  color: var(--ink-footer);
  padding: var(--space-xl) var(--space-m);
}

.footer-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l);
}

.site-footer a {
  color: #e6e6e6;
}

.site-footer a:hover {
  color: #ffffff;
}

/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width: 768px) {

  .site-container {
    padding-inline: var(--space-s);
  }

  .reading-container {
    max-width: 95vw;
  }

  h1 {
    font-size: 1.8rem;
  }

  .archive-grid {
    grid-template-columns: 1fr;
  }

  .content-card {
    padding: var(--space-l) var(--space-m);
    margin-inline: calc(-1 * var(--space-m));
    border-left: none;
    border-right: none;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   WIDTH SANITY PATCH — OPTION B
   Scope: WIDTH ONLY
   Safe append-only override
   ====================================================== */

/* --- Global content wrappers -------------------------------- */

/* Archive + Pages should feel expansive but controlled */
.archive .site-container,
.page .site-container {
  max-width: 1250px;
}

/* Single posts should optimise for reading */
.single .site-container {
  max-width: 1000px;
}

/* Ensure containers are centered */
.site-container {
  margin-left: auto;
  margin-right: auto;
}

/* --- Prevent double width constriction ---------------------- */

/* If content cards exist inside containers, let them breathe */
.content-card {
  max-width: 100%;
}

/* Reading container should not fight site-container */
.single .reading-container {
  max-width: 100%;
}

/* --- Image scaling sanity ---------------------------------- */

/* Never shrink images artificially */
.entry-content img,
.page-content img,
.single-content img,
.wp-block-image img {
  max-width: 100%;
  height: auto;
}

/* Optional: prevent ultra-wide images from breaking layout */
.entry-content img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* --- Mobile stays untouched -------------------------------- */

@media (max-width: 768px) {
  .archive .site-container,
  .page .site-container,
  .single .site-container {
    max-width: 100%;
  }
}

/* ======================================================
   TEXT WIDTH REALIGNMENT PATCH
   Fixes inner content squeeze
   ====================================================== */

/* --- Pages: allow full content width ------------------ */
.page .reading-container,
.page .entry-content {
  max-width: 100%;
}

/* --- Archive cards: summaries should breathe ---------- */
.archive .entry-summary,
.archive .entry-content {
  max-width: 100%;
}

/* --- Single posts: widen but keep readability ---------- */
.single .reading-container {
  max-width: 860px; /* was 75ch (~600–650px) */
}

/* --- Prevent Gutenberg blocks from shrinking text ----- */
.wp-block-group,
.wp-block-columns {
  max-width: 100%;
}

/* --- Images should follow text width ------------------ */
.entry-content img,
.wp-block-image img {
  max-width: 100%;
  height: auto;
}

/* In style.css */
#back-to-top {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: var(--accent-maroon);
  color: white;
  border: none;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.3s;
  z-index: 99;
}
#back-to-top.show { opacity: 0.3; }

.category-books .content-card { border-left: 4px solid var(--accent-maroon); }
.category-podcasts .content-card { border-left: 4px solid #1e3a8a; }
/* Add more via Customizer */


/* ======================================================
   DESIGN TOKENS
   ====================================================== */

:root {
  /* Widths */
  --container-max: 1100px;
  --reading-max: 75ch;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;

  /* Colours */
  --ink-body: #1f2933;
  --ink-muted: #5f6c7b;
  --ink-footer: #d6d6d6;

  --accent-maroon: #7a1e1e;

  /* Backgrounds */
  --bg-archive: #e6f2ec;      /* pista */
  --bg-archive-card: #d9ebe1;
  --bg-page: #f3ede1;         /* beige */
  --bg-page-card: #ece4d5;
  --bg-single: #ffffff;
  --bg-header: #ffffff;
  --bg-footer: #2b2b2b;

  /* Typography */
  --font-body: Georgia, "Iowan Old Style", serif;
  --font-heading: "Playfair Display", Georgia, serif;

  --line-height: 1.85;
}

/* ======================================================
   RESET
   ====================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: var(--line-height);
  color: var(--ink-body);
  background: var(--bg-single);
  -webkit-font-smoothing: antialiased;
}

/* ======================================================
   CONTEXTUAL PAGE BACKGROUNDS (ONLY SOURCE OF TRUTH)
   ====================================================== */

body.archive,
body.blog {
  background: var(--bg-archive);
}

body.page {
  background: var(--bg-page);
}

body.single {
  background: var(--bg-single);
}

/* ======================================================
   CONTAINERS
   ====================================================== */

.site-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

.reading-container {
  max-width: var(--reading-max);
  margin-inline: auto;
}

/* ======================================================
   TYPOGRAPHY
   ====================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.25;
  margin: var(--space-l) 0 var(--space-s);
}

h1 {
  font-size: 2.3rem;
  font-weight: 600;
}

p {
  margin-bottom: var(--space-m);
}

a {
  color: var(--accent-maroon);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ======================================================
   HEADER
   ====================================================== */

.site-header {
  background: var(--bg-header);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.header-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-m);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin: 0;
}

.primary-navigation ul {
  list-style: none;
  display: flex;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
}

.primary-navigation a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-body);
}

/* ======================================================
   CONTENT CARDS (SINGLE SYSTEM)
   ====================================================== */

.content-card {
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}

/* Archive cards */
.archive .content-card,
.blog .content-card {
  background: var(--bg-archive-card);
  border: 1px solid rgba(0,0,0,0.05);
}

/* Page cards */
.page .content-card {
  background: var(--bg-page-card);
  border: 1px solid rgba(0,0,0,0.05);
}

/* Single posts – no card */
.single .content-card {
  background: none;
  border: none;
  padding: 0;
}

/* ======================================================
   ARCHIVE GRID
   ====================================================== */

.archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--space-xl);
}

@media (max-width: 900px) {
  .archive-grid {
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   IMAGES
   ====================================================== */

.entry-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--space-l) auto;
}

/* ======================================================
   FOOTER
   ====================================================== */

.site-footer {
  background: var(--bg-footer);
  color: var(--ink-footer);
  padding: var(--space-xl) var(--space-m);
}

.footer-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l);
}

.site-footer a {
  color: #e6e6e6;
}

.site-footer a:hover {
  color: #ffffff;
}

/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width: 768px) {

  .site-container {
    padding-inline: var(--space-s);
  }

  .reading-container {
    max-width: 95vw;
  }

  h1 {
    font-size: 1.8rem;
  }

  .archive-grid {
    grid-template-columns: 1fr;
  }

  .content-card {
    padding: var(--space-l) var(--space-m);
    margin-inline: calc(-1 * var(--space-m));
    border-left: none;
    border-right: none;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   WIDTH SANITY PATCH — OPTION B
   Scope: WIDTH ONLY
   Safe append-only override
   ====================================================== */

/* --- Global content wrappers -------------------------------- */

/* Archive + Pages should feel expansive but controlled */
.archive .site-container,
.page .site-container {
  max-width: 1250px;
}

/* Single posts should optimise for reading */
.single .site-container {
  max-width: 1000px;
}

/* Ensure containers are centered */
.site-container {
  margin-left: auto;
  margin-right: auto;
}

/* --- Prevent double width constriction ---------------------- */

/* If content cards exist inside containers, let them breathe */
.content-card {
  max-width: 100%;
}

/* Reading container should not fight site-container */
.single .reading-container {
  max-width: 100%;
}

/* --- Image scaling sanity ---------------------------------- */

/* Never shrink images artificially */
.entry-content img,
.page-content img,
.single-content img,
.wp-block-image img {
  max-width: 100%;
  height: auto;
}

/* Optional: prevent ultra-wide images from breaking layout */
.entry-content img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* --- Mobile stays untouched -------------------------------- */

@media (max-width: 768px) {
  .archive .site-container,
  .page .site-container,
  .single .site-container {
    max-width: 100%;
  }
}

/* ======================================================
   TEXT WIDTH REALIGNMENT PATCH
   Fixes inner content squeeze
   ====================================================== */

/* --- Pages: allow full content width ------------------ */
.page .reading-container,
.page .entry-content {
  max-width: 100%;
}

/* --- Archive cards: summaries should breathe ---------- */
.archive .entry-summary,
.archive .entry-content {
  max-width: 100%;
}

/* --- Single posts: widen but keep readability ---------- */
.single .reading-container {
  max-width: 860px; /* was 75ch (~600–650px) */
}

/* --- Prevent Gutenberg blocks from shrinking text ----- */
.wp-block-group,
.wp-block-columns {
  max-width: 100%;
}

/* --- Images should follow text width ------------------ */
.entry-content img,
.wp-block-image img {
  max-width: 100%;
  height: auto;
}