/* ==========================================================================
   IYEC blog: ONE stylesheet for the article body, loaded by BOTH the public
   post page (.article) and the admin editor (.note-editable.article), so a
   writer sees exactly what ships (doc/blog-ecosystem.md 2.1, 3, 4.5).
   Tokens match assets/css/style.css: saffron #FF9933, navy #030d1a, green #138808.
   ========================================================================== */

.article {
  --a-ink: #030d1a;
  --a-body: #3f4b5c;
  --a-muted: #64748b;
  --a-line: #e2e8f0;
  --a-soft: #f4f4f5;
  --a-accent: #c46a0c;      /* saffron darkened to pass WCAG AA as link text on white */
  --a-accent-bg: #fff7ed;
  --a-green: #138808;
  color: var(--a-body);
  font-size: 1.0625rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.article > :first-child { margin-top: 0; }

.article h2, .article h3, .article h4, .article h5, .article h6 {
  color: var(--a-ink);
  line-height: 1.3;
  letter-spacing: -0.01em;
  /* Anchor jumps clear the fixed site header (100px) with room to breathe. */
  scroll-margin-top: 128px;
}
.article h2 { font-size: 1.6rem;  font-weight: 800; margin: 2.2em 0 0.6em; }
.article h3 { font-size: 1.25rem; font-weight: 750; margin: 1.8em 0 0.5em; }
.article h4 { font-size: 1.08rem; font-weight: 700; margin: 1.5em 0 0.4em; }
.article h5, .article h6 { font-size: 1rem; font-weight: 700; margin: 1.3em 0 0.4em; }

.article p  { margin: 0 0 1.15em; }
.article p { overflow: hidden; }   /* contain floats within their paragraph (4.5) */
.article strong, .article b { color: #0f172a; font-weight: 700; }
.article a { color: var(--a-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article a:hover { color: var(--a-ink); }
.article mark { background: #ffedd5; color: inherit; padding: 0 .15em; border-radius: 3px; }

.article ul, .article ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { margin-bottom: .45em; padding-left: .2em; }
.article li::marker { color: var(--a-accent); }

.article blockquote {
  margin: 1.6em 0;
  padding: .9em 1.3em;
  border-left: 4px solid #FF9933;
  background: var(--a-accent-bg);
  border-radius: 0 12px 12px 0;
  color: #5b3410;
  font-style: italic;
}
.article blockquote p:last-child { margin-bottom: 0; }

.article code {
  background: #f1f5f9; color: #9f1239;
  padding: .12em .4em; border-radius: 5px;
  font-size: .88em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.article pre {
  background: #0f172a; color: #e2e8f0;
  padding: 1.1em 1.3em; border-radius: 12px;
  overflow-x: auto; margin: 1.5em 0; font-size: .875rem; line-height: 1.65;
}
.article pre code { background: none; color: inherit; padding: 0; }

.article hr { border: 0; border-top: 1px solid var(--a-line); margin: 2.4em 0; }

/* Tables: scroll inside their own box on phones instead of widening the page. */
.article .table-wrap { overflow-x: auto; margin: 1.5em 0; border: 1px solid var(--a-line); border-radius: 12px; }
.article table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.55; }
.article .table-wrap table { margin: 0; }
.article th, .article td { padding: .65em .9em; text-align: left; vertical-align: top; border-bottom: 1px solid var(--a-line); }
.article th { background: #f8fafc; color: var(--a-ink); font-weight: 700; }
.article tr:last-child td { border-bottom: 0; }
.article caption { caption-side: bottom; padding: .6em; font-size: .85rem; color: var(--a-muted); }

/* --------------------------------------------------------------------------
   Responsive media (4.5). max-width, NOT width: a large image shrinks to the
   column, a small image keeps its own size instead of being stretched.
   -------------------------------------------------------------------------- */
.article img { max-width: 100%; height: auto; display: block; margin: 1.4em auto; border-radius: 12px; }

/* Respect an author-set float, capped so two side-by-side images never overflow.
   Both spellings: the sanitiser stores "float:left", the live editor writes "float: left". */
.article img[style*="float:left"],  .article img[style*="float: left"]  { margin: .4em 1.4em 1em 0; max-width: 48%; }
.article img[style*="float:right"], .article img[style*="float: right"] { margin: .4em 0 1em 1.4em; max-width: 48%; }

.article figure { text-align: center; margin: 1.4em 0; }
.article figure img { margin: 0 auto; }
.article figcaption { font-size: 13px; color: var(--a-muted); font-style: italic; margin-top: 8px; }

/* On phones a floated image goes full width: side-by-side never fits a phone. */
@media (max-width: 600px) {
  .article img[style*="float"] { float: none !important; max-width: 100% !important; margin: 1.4em auto !important; }
}

/* --------------------------------------------------------------------------
   Callouts (2.10): identical in the editor and on the page.
   -------------------------------------------------------------------------- */
.article .callout {
  --c-bar: #FF9933; --c-bg: #fff7ed; --c-ink: #7c3a0c;
  position: relative;
  margin: 1.6em 0;
  padding: 1em 1.25em;
  /* Full hairline border in the callout hue: distinct from the left-ruled blockquote. */
  border: 1px solid color-mix(in srgb, var(--c-bar) 35%, transparent);
  background: var(--c-bg);
  border-radius: 12px;
  color: #334155;
}
.article .callout > :last-child { margin-bottom: 0; }
.article .callout::before {
  display: block;
  margin-bottom: .3em;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.article .callout-tip     { --c-bar: #FF9933; --c-bg: #fff7ed; --c-ink: #9a4a06; }
.article .callout-note    { --c-bar: #64748b; --c-bg: #f1f5f9; --c-ink: #334155; }
.article .callout-good    { --c-bar: #138808; --c-bg: #f0fdf4; --c-ink: #0f5c07; }
.article .callout-bad     { --c-bar: #dc2626; --c-bg: #fef2f2; --c-ink: #991b1b; }
.article .callout-feature { --c-bar: #030d1a; --c-bg: #f1f5f9; --c-ink: #030d1a; }
.article .callout-tip::before     { content: "Tip"; }
.article .callout-note::before    { content: "Note"; }
.article .callout-good::before    { content: "Do this"; }
.article .callout-bad::before     { content: "Avoid this"; }
.article .callout-feature::before { content: "Key point"; }

/* --------------------------------------------------------------------------
   Pull quote: a line lifted out of the flow, distinct from a plain quotation.
   -------------------------------------------------------------------------- */
.article blockquote.pullquote {
  border: 0;
  border-top: 2px solid #FF9933;
  border-bottom: 1px solid var(--a-line);
  background: none;
  border-radius: 0;
  padding: 1.1em 0 1.2em;
  margin: 2em 0;
  font-style: normal;
  font-size: 1.3em;
  line-height: 1.5;
  font-weight: 700;
  color: var(--a-ink);
  letter-spacing: -0.01em;
}

/* Call-to-action button inside the article. */
.article .cta-wrap { margin: 1.8em 0; }
.article .cta-button {
  display: inline-block;
  padding: .75em 1.6em;
  border-radius: 12px;
  background: #FF9933;
  color: #1c0f02;          /* dark ink on saffron: AA contrast */
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .25s;
}
.article .cta-button:hover { color: #1c0f02; box-shadow: 0 10px 24px -12px rgba(255, 153, 51, .9); transform: translateY(-1px); }
.article .cta-button:active { transform: translateY(0) scale(.99); }

/* Video embeds: responsive 16:9, no layout shift while loading. */
.article .embed-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 1.6em 0;
  border-radius: 12px;
  overflow: hidden;
  background: #0f172a;
}
.article .embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Table with a header row (set from the editor's table popover). */
.article table.has-head thead th,
.article table.has-head tr:first-child th { background: #030d1a; color: #fff; border-bottom: 0; }

/* Anchored headings: offset so the sticky site header never covers them. */
.article :is(h2, h3, h4)[id] { scroll-margin-top: 128px; }

/* Legacy Quill output in older posts. */
.article .ql-align-center  { text-align: center; }
.article .ql-align-right   { text-align: right; }
.article .ql-align-justify { text-align: justify; }
.article .ql-indent-1 { padding-left: 2em; }  .article .ql-indent-2 { padding-left: 4em; }
.article .ql-indent-3 { padding-left: 6em; }  .article .ql-indent-4 { padding-left: 8em; }
.article .ql-indent-5 { padding-left: 10em; } .article .ql-indent-6 { padding-left: 12em; }
.article .ql-indent-7 { padding-left: 14em; } .article .ql-indent-8 { padding-left: 16em; }

/* ==========================================================================
   Public page pieces (not used by the editor)
   ========================================================================== */

/* Featured / hero image (4.5): its OWN aspect, capped to one screen, never force-cropped. */
.featured-image {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  background: #f4f4f5;
  display: block;
  border-radius: 16px;
}

/* Listing cards: the one place cropping is correct, so the grid stays even. */
.blog-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: #f4f4f5; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-card { transition: box-shadow .35s cubic-bezier(.16, 1, .3, 1), transform .35s cubic-bezier(.16, 1, .3, 1), border-color .35s; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(3, 13, 26, .22); }
.blog-card:active { transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   In-article table of contents. Lives inside .article so the editor and the
   live page render it identically. Numbering comes from CSS counters, so the
   list stays correct however the writer reorders headings.
   -------------------------------------------------------------------------- */
.article .blog-toc-inline {
  margin: 1.8em 0;
  padding: 1.1em 1.4em 1.2em;
  border: 1px solid var(--a-line);
  border-radius: 14px;
  background: #f8fafc;
  counter-reset: toc-item;
}
.article .blog-toc-inline__title {
  margin: 0 0 .6em;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--a-muted);
}
.article .blog-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: toc-sub; }
/* A very long contents box scrolls inside itself instead of pushing the article
   down the page. No effect on short lists. */
.article .blog-toc-inline > .blog-toc-list {
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: .4rem;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.article .blog-toc-inline > .blog-toc-list::-webkit-scrollbar { width: 6px; }
.article .blog-toc-inline > .blog-toc-list::-webkit-scrollbar-track { background: transparent; }
.article .blog-toc-inline > .blog-toc-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.article .blog-toc-inline > .blog-toc-list::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.article .blog-toc-inline > .blog-toc-list:focus-visible { outline: 2px solid #FF9933; outline-offset: 3px; border-radius: 6px; }
.article .blog-toc-list li { counter-increment: toc-item; margin: 0; padding: 0; }
.article .blog-toc-list > li > a::before {
  content: counter(toc-item) ".";
  display: inline-block;
  min-width: 1.6em;
  color: var(--a-muted);
  font-variant-numeric: tabular-nums;
}
.article .blog-toc-list a {
  display: block;
  padding: .32em 0;
  color: var(--a-ink);
  text-decoration: none;
  line-height: 1.45;
  border-radius: 6px;
}
.article .blog-toc-list a:hover { color: var(--a-accent); text-decoration: underline; text-underline-offset: 3px; }
.article .blog-toc-list a.is-active { color: var(--a-accent); font-weight: 600; }
/* Nested H3 entries, numbered 1.1, 1.2, ... */
.article .blog-toc-list .blog-toc-list { margin: 0 0 .2em 1.6em; counter-reset: toc-sub; }
.article .blog-toc-list .blog-toc-list li { counter-increment: toc-sub; }
.article .blog-toc-list .blog-toc-list > li > a::before {
  content: counter(toc-item) "." counter(toc-sub);
  min-width: 2.4em;
  font-size: .9em;
}
.article .blog-toc-list .blog-toc-list a { font-size: .95em; color: var(--a-body); }

/* Editor-only: the placeholder shows what will be generated. */
.note-editable .blog-toc-block {
  margin: 1.8em 0;
  padding: 1.1em 1.4em;
  border: 1.5px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  color: #64748b;
  font-size: .9rem;
  text-align: center;
  user-select: none;
}
.note-editable .blog-toc-block::before {
  content: "Table of contents: built from your H2 and H3 headings when the post is viewed";
}

/* --------------------------------------------------------------------------
   Table of contents with an active-section indicator.
   The side list scrolls inside itself: a post with 20+ sections would otherwise
   run past the bottom of the screen with its last entries unreachable.
   -------------------------------------------------------------------------- */
.blog-toc__title { font-size: .75rem; font-weight: 700; color: #64748b; margin: 0 0 .75rem; }

.blog-toc__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;      /* stops the page scrolling when the list ends */
  padding-right: .4rem;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.blog-toc--side .blog-toc__scroll { max-height: calc(100dvh - 12rem); }
.blog-toc__scroll--compact { max-height: 50vh; }

/* Slim scrollbar, visible enough to invite a drag without shouting. */
.blog-toc__scroll::-webkit-scrollbar { width: 6px; }
.blog-toc__scroll::-webkit-scrollbar-track { background: transparent; }
.blog-toc__scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.blog-toc__scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.blog-toc__scroll:focus-visible { outline: 2px solid #FF9933; outline-offset: 3px; border-radius: 6px; }

/* Fades tell the reader there is more above or below. Toggled from blog-public.js. */
.blog-toc__scroll.has-more-below { mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2rem), transparent 100%); }
.blog-toc__scroll.has-more-above { mask-image: linear-gradient(to bottom, transparent 0, #000 2.2rem); }
.blog-toc__scroll.has-more-above.has-more-below { mask-image: linear-gradient(to bottom, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%); }

.blog-toc a { display: block; padding: .35rem 0 .35rem .9rem; border-left: 2px solid #e2e8f0; color: #64748b; font-size: .875rem; line-height: 1.4; text-decoration: none; transition: color .2s, border-color .2s; }
.blog-toc a.is-sub { padding-left: 1.7rem; font-size: .83rem; }
.blog-toc a:hover { color: #030d1a; }
.blog-toc a.is-active { color: #030d1a; border-left-color: #FF9933; font-weight: 600; }

/* FAQ (2.8): native <details>, same text as the FAQPage schema. */
.blog-faq details { border-bottom: 1px solid #e2e8f0; }
.blog-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; font-weight: 700; color: #030d1a; }
.blog-faq summary::-webkit-details-marker { display: none; }
.blog-faq summary::after { content: "+"; flex-shrink: 0; font-size: 1.25rem; line-height: 1; color: #c46a0c; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.blog-faq details[open] summary::after { transform: rotate(45deg); }
.blog-faq .faq-answer { padding: 0 0 1.1rem; color: #3f4b5c; line-height: 1.75; }
.blog-faq .faq-answer p { margin: 0 0 .7em; }

/* Reading progress bar (feedback: where am I in a long read). Pure CSS scroll-driven
   animation, no scroll listener; browsers without support simply don't show it. */
.blog-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .blog-progress { display: block; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none;
    transform-origin: 0 50%; background: #FF9933; animation: blog-progress linear both; animation-timeline: scroll(root); }
  @keyframes blog-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Jumping to a section glides instead of teleporting, so the reader keeps their
   bearings. Anchor offsets live on the headings (scroll-margin-top). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Entry reveal, only when motion is welcome AND JS is running (html.blog-js is set
   by an inline head script), so a failed script can never leave content hidden. */
@media (prefers-reduced-motion: no-preference) {
  .blog-js .blog-reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 60ms); }
  .blog-js .blog-reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-card-media img, .blog-faq summary::after { transition: none; }
  .blog-card:hover { transform: none; }
  .blog-progress { display: none; }
}

/* --------------------------------------------------------------------------
   Image placement. The writer picks one of three behaviours from the image
   toolbar, the same choices a word processor offers:
     (default)  in line with the text
     float      text wraps around it  (style="float:left|right")
     .img-block its own line, aligned left / centre / right
   These rules are shared by the editor and the published page.
   -------------------------------------------------------------------------- */
.article img.img-block,
.article figure.img-block { display: block; float: none; }
.article .img-block.align-center { margin-left: auto; margin-right: auto; }
.article .img-block.align-left { margin-left: 0; margin-right: auto; }
.article .img-block.align-right { margin-left: auto; margin-right: 0; }
.article figure.align-center { text-align: center; }
.article figure.align-right { text-align: right; }
.article figure.align-left { text-align: left; }

/* A captioned image that floats: cap the width like a floated image. */
.article figure[style*="float:left"], .article figure[style*="float: left"] { margin: .4em 1.4em 1em 0; max-width: 48%; }
.article figure[style*="float:right"], .article figure[style*="float: right"] { margin: .4em 0 1em 1.4em; max-width: 48%; }
.article figure[style*="float"] img { margin: 0; width: 100%; }

/* An image sitting in a line of text should not tower over it. */
.article p > img:not(.img-block):not([style*="float"]) { display: inline-block; vertical-align: middle; margin: .2em .35em; }

@media (max-width: 600px) {
  .article figure[style*="float"] { float: none !important; max-width: 100% !important; margin: 1.4em auto !important; }
}