/*
Theme Name: Semil Shah Insights
Theme URI: https://semilshah.me/insights/
Author: Semil Shah
Description: Classic theme for the blog at semilshah.me/insights/, matched to the
  static site: Epilogue/Inter, the flat no-radius treatment, and the same nav and
  footer. Deliberately NOT a Twenty Twenty-Five child theme — a block theme would
  fight this markup through theme.json for no benefit at this size.
Version: 1.3.3
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: semilshah-insights
*/

/* Tailwind (CDN, as on the static pages) covers layout and the utility classes.
   This file holds only what utilities cannot express: the typography of
   WordPress-authored post content, which arrives as block HTML we do not
   control. Selectors mirror blog-post.html so posts read identically. */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
  background-color: #f6f6f6;
  color: #2f2f2f;
  -webkit-font-smoothing: antialiased;
}

/* --- post body ----------------------------------------------------------
 *
 * Fluid, not fixed. The body used to be a hard max-w-3xl (768px), which left
 * 720px of dead space to the right of a 1920px viewport while already running
 * ~85 characters per line — at the readability limit, so widening the text
 * alone would have made it worse.
 *
 * Instead the type scales with the viewport and the measure is expressed in em,
 * so the column grows with the font and characters-per-line stays roughly
 * constant (~72-78). Images and pull-quotes are then allowed past the measure,
 * which is what actually fills the width without hurting the reading.
 */

#post-body {
  --measure: 38em;
  max-width: none;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.5rem);
  line-height: 1.75;
}

/* Text keeps the measure. */
#post-body > * {
  max-width: var(--measure);
}

/* Pull-quotes are display type — let them run widest. */
#post-body > blockquote {
  max-width: min(100%, 78rem);
}

/* Figures break out too, but less far. The posts carry 1280x1600 portrait
   images: at the full 78rem they would render over 1500px tall and swallow the
   screen. 62rem keeps a tall image roughly one viewport high. */
#post-body > figure,
#post-body > .wp-block-image,
#post-body > .wp-block-embed,
#post-body > .wp-block-gallery,
#post-body > .wp-block-table {
  max-width: min(100%, 62rem);
}

#post-body h2 {
  font-family: 'Epilogue', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.875rem;
  color: #2f2f2f;
  margin-top: 4rem;
  margin-bottom: 2rem;
}

#post-body h3 {
  font-family: 'Epilogue', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.25rem;
  color: #2f2f2f;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

#post-body p { margin-bottom: 2rem; line-height: 1.8; }

#post-body blockquote {
  font-family: 'Epilogue', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #2f2f2f;
  margin: 4rem 0;
  font-style: normal;
}

#post-body ul { margin-bottom: 2rem; padding-left: 1.5rem; list-style: disc; }
#post-body ol { margin-bottom: 2rem; padding-left: 1.5rem; list-style: decimal; }
#post-body li { margin-bottom: 0.75rem; line-height: 1.7; }
#post-body a { color: #9e3c00; text-decoration: underline; }
/* max-width, not width: 100%. Forcing width upscales a small image past its
   intrinsic size and makes a tall portrait image enormous. */
#post-body img { max-width: 100%; height: auto; margin: 2rem 0; }
#post-body strong { font-weight: 700; }
#post-body figure { margin: 2rem 0; }
#post-body figcaption {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #777777;
  margin-top: 0.75rem;
}

/* Block editor leftovers that would otherwise inherit odd spacing. */
#post-body .wp-block-image { margin: 2rem 0; }
#post-body > *:first-child { margin-top: 0; }

/* Accessibility: skip link, visible only on focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #9e3c00;
  color: #fff0ea;
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }