/*
 Theme Name:  BlogGrind
 Theme URI:   https://BlogGrind.com/
 Description: Child theme for Hello Elementor with BlogGrind typography and grayscale palette.
 Author:      William Richard
 Author URI:  https://BlogGrind.com/
 Version:     1.0.0
 License:     GNU General Public License v3 or later
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 Text Domain: bloggrind
 Template:    hello-elementor
*/

/* ==============
   Palette Tokens
   ============== */
:root {
  /* Studio Gray Scale (project palette) */
  --bg-gray-100: #D3D3D3; /* light */
  --bg-gray-200: #B0B3B7;
  --bg-gray-300: #7D7F82;
  --bg-gray-400: #4B4E54;
  --bg-gray-900: #1F2326; /* near-black */

  /* Semantic tokens (mapped to the grayscale) */
  --bg-surface: #ffffff;
  --bg-text: var(--bg-gray-900);
  --bg-muted: var(--bg-gray-100);
  --bg-border: var(--bg-gray-200);
  --bg-link: var(--bg-gray-400);
  --bg-link-hover: var(--bg-gray-300);
}

/* ============
   Base / Reset
   ============ */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--bg-surface);
  color: var(--bg-text);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 16px;           /* 16px (1.00rem) */
  line-height: 1.6;          /* ≈ 25.6px */
  letter-spacing: 0;         /* 0px */
  word-spacing: 0;           /* 0px */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a { color: var(--bg-link); text-decoration: none; }
a:hover, a:focus { color: var(--bg-link-hover); text-decoration: underline; }

/* Borders & helpers */
hr { border: 0; border-top: 1px solid var(--bg-border); margin: 2rem 0; }
.img-fluid, img { max-width: 100%; height: auto; }

/* =========================
   Typography — Headings H1–H6
   Roboto (static), white background; include px+rem, lh, spacing
   ========================= */
h1, h2, h3, h4, h5, h6 {
  color: var(--bg-text);
  margin: 0 0 0.5em 0;
  line-height: 1.25;
  letter-spacing: -0.25px;
  word-spacing: 0;
}

h1 {
  font-size: 2.5rem;   /* 40px */
  line-height: 1.2;    /* 48px */
  font-weight: 700;
  letter-spacing: -0.5px;
}

h2 {
  font-size: 2rem;     /* 32px */
  line-height: 1.25;   /* 40px */
  font-weight: 700;
  letter-spacing: -0.25px;
}

h3 {
  font-size: 1.75rem;  /* 28px */
  line-height: 1.2857; /* ~36px */
  font-weight: 600;
  letter-spacing: -0.25px;
}

h4 {
  font-size: 1.5rem;   /* 24px */
  line-height: 1.3333; /* ~32px */
  font-weight: 600;
  letter-spacing: 0;
}

h5 {
  font-size: 1.25rem;  /* 20px */
  line-height: 1.4;    /* 28px */
  font-weight: 500;
  letter-spacing: 0;
}

h6 {
  font-size: 1rem;     /* 16px */
  line-height: 1.5;    /* 24px */
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ==================
   Body text elements
   ================== */
p {
  margin: 0 0 1rem 0;
  font-size: 1rem;     /* 16px */
  line-height: 1.6;    /* ~25.6px */
  letter-spacing: 0;
  word-spacing: 0;
}

/* Lists */
ul, ol { margin: 0 0 1rem 1.25rem; padding: 0; }
li { margin: 0.25rem 0; }

/* Quotes */
blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--bg-border);
  background: #fff;
  color: var(--bg-gray-400);
  font-style: italic;
}
blockquote p:last-child { margin-bottom: 0; }
cite { display: block; margin-top: 0.5rem; color: var(--bg-gray-300); font-style: normal; }

/* Code (inline & blocks) */
code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9375rem;  /* 15px */
  background: var(--bg-muted);
  color: var(--bg-text);
  padding: 0.125rem 0.25rem;
  border-radius: 4px;
  border: 1px solid var(--bg-border);
}
pre {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--bg-muted);
  border: 1px solid var(--bg-border);
  border-radius: 6px;
  overflow: auto;
}
pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.6;     /* ~24px */
}

/* Tables */
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { border: 1px solid var(--bg-border); padding: 0.75rem; text-align: left; }
thead th { background: var(--bg-muted); }

/* ============
   Utilities
   ============ */
.container--boxed {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;  /* requested lateral padding */
  padding-right: 20px; /* requested lateral padding */
  padding-top: 0;      /* requested 0 top */
  padding-bottom: 0;   /* requested 0 bottom */
}