/* Amit Malvi theme — base reset, typography and keyframes.
   Ported verbatim from the Claude Design <style> block so the page renders
   identically to the source design. Section/layout styling stays inline on
   the markup (as designed); this file only holds globals. */

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: #FFFFFF; color: #14141A; font-family: 'Instrument Sans', system-ui, sans-serif; overflow-x: hidden; }
* { box-sizing: border-box; }
a { color: #E8502A; text-decoration: none; }
a:hover { color: #C33F1D; }
h1, h2, h3, h4 { font-family: 'Inter Tight', system-ui, sans-serif; letter-spacing: -0.03em; margin: 0; text-wrap: pretty; }
p { margin: 0; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid #E8502A; outline-offset: 3px; border-radius: 6px; }
@keyframes am-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes am-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@keyframes am-float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,-18px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; } }

/* WordPress admin bar offset so the fixed header never hides under it */
body.admin-bar [data-header] { top: 32px; }
@media screen and (max-width: 782px){ body.admin-bar [data-header] { top: 46px; } }

/* ---------------------------------------------------------------------------
 * Article typography (single.php).
 * The design styled every element of the blog post inline, but the_content()
 * emits bare HTML from the editor — so these rules reproduce the same look for
 * whatever the editor outputs. Values are copied from BlogPost.dc.html.
 * ------------------------------------------------------------------------- */
[data-am-article] > * { max-width: 720px; }
[data-am-article] p { margin-top: 16px; font-size: 18px; line-height: 1.8; color: #14141A; }
[data-am-article] h2 { margin-top: 44px; font-size: 32px; font-weight: 700; line-height: 1.15; scroll-margin-top: 110px; }
[data-am-article] h3 { margin-top: 32px; font-size: 23px; font-weight: 700; line-height: 1.2; scroll-margin-top: 110px; }
[data-am-article] ul,
[data-am-article] ol { margin: 20px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 18px; line-height: 1.8; color: #14141A; }
[data-am-article] li::marker { color: #E8502A; }
[data-am-article] strong { font-weight: 600; }
[data-am-article] a { color: #E8502A; }
[data-am-article] blockquote {
  margin: 32px 0; padding: 24px 28px; border-left: 3px solid #E8502A;
  background: #F7F6F3; border-radius: 0 18px 18px 0;
}
[data-am-article] blockquote p {
  margin: 0; font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 22px; line-height: 1.45; font-weight: 500; color: #14141A;
}
[data-am-article] pre {
  margin: 24px 0 0; background: #14141A; border-radius: 18px; padding: 22px 24px;
  overflow-x: auto;
}
[data-am-article] pre code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px; line-height: 1.7; color: #F3F5F3; background: none; padding: 0;
}
[data-am-article] code {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .92em;
  background: #F7F6F3; padding: 2px 6px; border-radius: 6px;
}
[data-am-article] img { max-width: 100%; height: auto; border-radius: 20px; display: block; }
[data-am-article] figure { margin: 32px 0; }
[data-am-article] figcaption { margin-top: 12px; font-size: 14px; color: #6B6B75; }
[data-am-article] hr { margin: 40px 0; border: none; border-top: 1px solid #EAE8E3; }
[data-am-article] table { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 16px; }
[data-am-article] th,
[data-am-article] td { border: 1px solid #EAE8E3; padding: 12px 14px; text-align: left; }
[data-am-article] th { background: #F7F6F3; font-weight: 600; }