/* ==========================================================================
   article.css - the article page (single.php), 2026-10-21

   Scoped under .ema (the page's <main>) plus the fixed .ema-progress bar.
   Article pages only - enqueued by excelman_article_assets() in
   inc/article.php, after surfaces.css. Same palette and type as home.css.

   Element resets use :where() so they never out-rank a component rule
   (see the note at the top of home.css for the bug that taught this).
   ========================================================================== */

.ema {
  --ema-accent: #388E3C;
  --ema-green: #2e7d32;
  --ema-soft: #e8f5e9;
  --ema-tint: #f5faf5;
  --ema-ink: #0d1f0d;
  --ema-text: #2a372a;
  --ema-muted: #5a6b5a;
  --ema-line: #e2ebe2;
  --ema-dark: #0b1a0c;

  width: 100%;
  color: var(--ema-ink);
  font-family: var(--font-base, "Poppins", system-ui, sans-serif);
}

.ema *,
.ema *::before,
.ema *::after {
  box-sizing: border-box;
}

:where(.ema) a {
  color: inherit;
  text-decoration: none;
}

.ema-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ema-wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--gutter, 16px);
}

/* The theme puts overflow-x: hidden on both html and body. On body that
   makes it a scroll container that never scrolls, and position: sticky then
   sticks to body instead of the viewport - i.e. never. `clip` hides the same
   overflow without creating a scroll container. Article pages only; the
   `hidden` line stays as the fallback for browsers without `clip`. */
body.single-post {
  overflow-x: hidden;
  overflow-x: clip;
}

/* --- Progress bar ------------------------------------------------------- */

.ema-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000; /* above the 9999 floating header */
  height: 3px;
  pointer-events: none;
}

.ema-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #66bb6a, #2e7d32);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* --- Hero --------------------------------------------------------------- */

.ema-hero {
  padding: 126px 0 40px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(56, 142, 60, .10), transparent 70%),
    linear-gradient(180deg, #f3faf3, #fff);
  border-bottom: 1px solid var(--ema-line);
}

/* Same 1104px track as .ema-layout below, so the title starts on the same
   line as the article text instead of floating centred above it. */
.ema-hero .ema-wrap {
  max-width: calc(1104px + 2 * var(--gutter-md, 24px));
}

.ema-hero .ema-wrap > * {
  max-width: 740px;
}

@media (max-width: 1099px) {
  .ema-hero .ema-wrap > * {
    margin-left: auto;
    margin-right: auto;
  }
}

.ema-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 18px;
  font-size: var(--fs-xs, .8rem);
  color: var(--ema-muted);
}

.ema-crumbs a:hover {
  color: var(--ema-accent);
}

.ema-crumbs a:last-child {
  font-weight: 600;
  color: var(--ema-green);
}

.ema .ema-title {
  margin: 0;
  font-size: clamp(1.85rem, 1.3rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--ema-ink);
}

.ema .ema-dek {
  margin: 14px 0 0;
  font-size: var(--fs-lg, 1.15rem);
  line-height: 1.6;
  color: var(--ema-muted);
}

.ema-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: 26px;
}

.ema-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ema-avatar--initial {
  display: grid;
  place-items: center;
  background: var(--ema-accent);
  color: #fff;
  font-weight: 700;
}

.ema-author {
  display: block;
  font-size: var(--fs-sm, .92rem);
  font-weight: 600;
}

.ema-meta-line {
  display: flex;
  gap: 6px;
  font-size: var(--fs-xs, .8rem);
  color: var(--ema-muted);
}

.ema-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.ema-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ema-soft);
  color: var(--ema-green);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

a.ema-pill:hover {
  background: var(--ema-accent);
  color: #fff;
}

/* --- Layout ------------------------------------------------------------- */

.ema-layout {
  display: grid;
  gap: 48px;
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.ema-article {
  min-width: 0;
  max-width: 740px;
  width: 100%;
  margin: 0 auto;
}

.ema-side {
  min-width: 0;
}

/* --- Body copy ---------------------------------------------------------- */

.ema-cover {
  margin: 0 0 32px;
}

.ema-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.ema-content {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--ema-text);
  overflow-wrap: break-word;
}

/* Old posts mix "medium" and default paragraph sizes from the block editor,
   so consecutive paragraphs jump between sizes. One reading size wins. */
.ema-content .has-medium-font-size,
.ema-content .has-small-font-size,
.ema-content .has-large-font-size,
.ema-content .has-normal-font-size {
  font-size: inherit !important;
  line-height: inherit !important;
}

.ema-content > * + * {
  margin-top: 1.15em;
}

:where(.ema-content) p,
:where(.ema-content) ul,
:where(.ema-content) ol,
:where(.ema-content) figure,
:where(.ema-content) blockquote,
:where(.ema-content) pre,
:where(.ema-content) table {
  margin-bottom: 0;
}

.ema-content > p:first-child {
  font-size: 1.15em;
  color: var(--ema-ink);
}

.ema-content h2,
.ema-content h3,
.ema-content h4 {
  margin-top: 2em;
  margin-bottom: .2em;
  color: var(--ema-ink);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  scroll-margin-top: 96px;
}

.ema-content h2 { font-size: 1.6rem; }
.ema-content h3 { font-size: 1.3rem; }
.ema-content h4 { font-size: 1.1rem; }

.ema-content a {
  color: var(--ema-green);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(56, 142, 60, .35);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease;
}

.ema-content a:hover {
  text-decoration-color: var(--ema-accent);
}

.ema-content strong,
.ema-content b {
  color: var(--ema-ink);
  font-weight: 600;
}

.ema-content ul,
.ema-content ol {
  padding-left: 1.4em;
}

.ema-content li + li {
  margin-top: .45em;
}

.ema-content li::marker {
  color: var(--ema-accent);
  font-weight: 600;
}

.ema-content blockquote {
  padding: 16px 22px;
  border-left: 4px solid var(--ema-accent);
  border-radius: 0 14px 14px 0;
  background: var(--ema-tint);
  color: var(--ema-ink);
  font-style: normal;
}

.ema-content blockquote p {
  margin: 0;
}

/* Images: framed like a screenshot, so dark-edged Excel captures sit
   cleanly on the white page. */
.ema-content figure,
.ema-content .wp-block-image {
  margin-left: 0;
  margin-right: 0;
}

.ema-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--ema-line);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(13, 31, 13, .08);
}

.ema-content figcaption {
  margin-top: 10px;
  font-size: var(--fs-xs, .82rem);
  color: var(--ema-muted);
  text-align: center;
}

.ema-img-missing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border: 1.5px dashed #cfdccf;
  border-radius: 14px;
  background: var(--ema-tint);
  color: var(--ema-muted);
  font-size: var(--fs-sm, .9rem);
}

.ema-img-missing i {
  font-size: 1.2rem;
  color: #9db59e;
}

/* Inline code and the formula blocks article.js builds. */
.ema-content code,
.ema-content kbd {
  padding: .15em .45em;
  border-radius: 6px;
  background: var(--ema-soft);
  color: var(--ema-green);
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: .9em;
  white-space: normal;
}

.ema-content pre {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--ema-dark);
  color: #c5e1a5;
  overflow-x: auto;
}

.ema-content pre code {
  padding: 0;
  background: none;
  color: inherit;
}

.ema-formula {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 20px;
  border-radius: 14px;
  background: var(--ema-dark);
  box-shadow: 0 10px 30px rgba(13, 31, 13, .14);
}

.ema-content .ema-formula code {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: none;
  color: #c5e1a5;
  font-size: .95rem;
  overflow-wrap: anywhere;
}

.ema-formula-copy {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}

.ema-formula-copy:hover,
.ema-formula-copy.is-done {
  background: var(--ema-accent);
  border-color: var(--ema-accent);
}

/* Tables scroll inside themselves rather than widening the page. */
.ema-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .92em;
}

.ema-content th,
.ema-content td {
  padding: 10px 14px;
  border: 1px solid var(--ema-line);
  text-align: left;
}

.ema-content th,
.ema-content thead td {
  background: var(--ema-tint);
  color: var(--ema-ink);
  font-weight: 600;
}

.ema-content iframe,
.ema-content video {
  max-width: 100%;
  border-radius: 14px;
}

.ema-content .wp-block-embed__wrapper iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Belt and braces for the product grid inc/article.php removes server-side. */
.ema-content .wc-block-all-products {
  display: none;
}

.ema-pages {
  display: flex;
  gap: 8px;
  font-weight: 600;
}

/* --- Tags + share -------------------------------------------------------- */

.ema-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.ema-tags a {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--ema-line);
  border-radius: 999px;
  font-size: var(--fs-xs, .8rem);
  color: var(--ema-muted);
  transition: border-color .2s ease, color .2s ease;
}

.ema-tags a:hover {
  border-color: var(--ema-accent);
  color: var(--ema-green);
}

.ema-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 36px;
  padding: 18px 0;
  border-top: 1px solid var(--ema-line);
  border-bottom: 1px solid var(--ema-line);
  font-size: var(--fs-sm, .92rem);
  font-weight: 600;
}

.ema-share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ema-share-btns a,
.ema-share-btns button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--ema-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ema-text);
  font: inherit;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.ema-share-btns i {
  font-size: 1.05rem;
}

.ema-share-btns a:hover,
.ema-share-btns button:hover {
  border-color: var(--ema-accent);
  color: var(--ema-green);
}

.ema-share-btns button.is-done {
  background: var(--ema-accent);
  border-color: var(--ema-accent);
  color: #fff;
}

/* --- Help card ------------------------------------------------------------ */

.ema-help {
  margin-top: 36px;
  padding: clamp(22px, 4vw, 32px);
  border-radius: 24px;
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(102, 187, 106, .28), transparent 60%),
    linear-gradient(135deg, #0b1a0c, #12301a);
  color: #fff;
}

.ema .ema-help h2 {
  margin: 0;
  font-size: var(--fs-xl, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.ema-help h2 span {
  color: #81c784;
}

.ema .ema-help p {
  margin: 6px 0 0;
  font-size: var(--fs-sm, .92rem);
  color: rgba(255, 255, 255, .7);
}

.ema-askbar {
  display: flex;
  gap: 6px;
  margin-top: 20px;
  padding: 6px 6px 6px 18px;
  border-radius: 999px;
  background: #fff;
}

.ema .ema-askbar input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ema-ink);
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming into the field */
  box-shadow: none;
  outline: none;
}

.ema .ema-askbar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--ema-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.ema .ema-askbar button:hover {
  background: var(--ema-green);
}

.ema-help-ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: var(--fs-sm, .88rem);
  font-weight: 600;
  color: #a5d6a7;
}

.ema-help-ai:hover {
  color: #fff;
}

/* --- Previous / next ----------------------------------------------------- */

.ema-adjacent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
  margin-top: 28px;
}

.ema-adj {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--ema-line);
  border-radius: 16px;
  transition: border-color .2s ease, transform .2s ease;
}

.ema-adj:hover {
  border-color: var(--ema-accent);
  transform: translateY(-2px);
}

.ema-adj small {
  font-size: .75rem;
  font-weight: 600;
  color: var(--ema-accent);
}

.ema-adj span {
  font-size: var(--fs-sm, .92rem);
  font-weight: 600;
  line-height: 1.4;
}

.ema-adj--next {
  text-align: right;
}

/* --- Sidebar ---------------------------------------------------------------- */

.ema-side-inner {
  display: grid;
  gap: 14px;
}

.ema-card {
  display: block;
  padding: 18px;
  border: 1px solid var(--ema-line);
  border-radius: 18px;
  background: #fff;
}

/* .ema-card sets display, which would otherwise override the hidden
   attribute article.js relies on to keep an empty contents box out of view. */
.ema-card[hidden] {
  display: none;
}

.ema .ema-card-title {
  margin: 0 0 10px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ema-muted);
}

.ema-toc-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ema-toc-list a {
  display: block;
  padding: 6px 10px;
  border-left: 2px solid var(--ema-line);
  font-size: var(--fs-sm, .88rem);
  line-height: 1.4;
  color: var(--ema-muted);
  transition: color .2s ease, border-color .2s ease;
}

.ema-toc-list .is-sub a {
  padding-left: 22px;
  font-size: .82rem;
}

.ema-toc-list a:hover,
.ema-toc-list a.is-active {
  border-left-color: var(--ema-accent);
  color: var(--ema-green);
  font-weight: 500;
}

.ema-promo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: border-color .2s ease, transform .2s ease;
}

.ema-promo:hover {
  border-color: #b9d8ba;
  transform: translateY(-2px);
}

.ema-promo-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ema-soft);
  color: var(--ema-green);
  flex-shrink: 0;
}

.ema-promo strong {
  display: block;
  font-size: var(--fs-sm, .92rem);
  font-weight: 600;
}

.ema-promo small {
  display: block;
  margin-top: 2px;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--ema-muted);
}

.ema-promo--dark {
  border-color: transparent;
  background: linear-gradient(135deg, #0b1a0c, #1b5e20);
  color: #fff;
}

.ema-promo--dark:hover {
  border-color: transparent;
}

.ema-promo--dark .ema-promo-icon {
  background: rgba(255, 255, 255, .1);
  color: #a5d6a7;
}

.ema-promo--dark small {
  color: rgba(255, 255, 255, .65);
}

/* --- Related --------------------------------------------------------------- */

.ema-related {
  padding: clamp(40px, 6vw, 72px) 0;
  background: var(--ema-tint);
  border-top: 1px solid var(--ema-line);
}

.ema-related-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.ema .ema-related-head h2 {
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 700;
  color: var(--ema-ink);
}

.ema-related-head a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ema-accent);
}

.ema-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 18px;
}

.ema-rcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--ema-line);
  border-radius: 20px;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ema-rcard:hover {
  transform: translateY(-4px);
  border-color: #c8e0c9;
  box-shadow: 0 16px 40px rgba(13, 31, 13, .08);
}

.ema-rcard-title {
  font-size: var(--fs-base, 1.02rem);
  font-weight: 600;
  line-height: 1.4;
}

.ema-rcard-excerpt {
  font-size: var(--fs-sm, .88rem);
  line-height: 1.6;
  color: var(--ema-muted);
}

.ema-rcard-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ema-accent);
}

/* --- Breakpoints ---------------------------------------------------------- */

@media (min-width: 768px) {
  .ema-wrap {
    padding: 0 var(--gutter-md, 24px);
  }
}

@media (min-width: 1100px) {
  .ema-layout {
    grid-template-columns: minmax(0, 740px) 300px;
    justify-content: center;
    gap: 64px;
  }

  .ema-article {
    margin: 0;
  }

  .ema-side-inner {
    position: sticky;
    top: 100px;
  }

  /* Long tutorials have 15+ headings; the list scrolls on its own so the
     sticky sidebar never grows taller than the screen. */
  .ema-toc-list {
    /* 100px sticky offset + three tool cards (~330px) + this card's own
       padding and title (~70px), with a little room to spare. */
    max-height: calc(100vh - 520px);
    min-height: 96px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* Below the sidebar breakpoint the tool cards follow the article as a row. */
@media (min-width: 640px) and (max-width: 1099px) {
  .ema-side-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 740px;
    margin: 0 auto;
  }

  .ema-toc {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1099px) {
  /* Contents is only useful beside the text; under it, it is noise. */
  .ema-toc {
    display: none;
  }

  .ema-side-inner {
    max-width: 740px;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  /* The phone app bar is already offset by .site padding (app-bar.css). */
  .ema-hero {
    padding: 28px 0 28px;
  }

  .ema-cats {
    margin-left: 0;
    width: 100%;
  }

  .ema-content {
    font-size: 1rem;
    line-height: 1.8;
  }

  .ema-formula {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ema *,
  .ema *::before,
  .ema *::after {
    transition: none !important;
  }
}