/* Guides: hub, chapters and the Guides home. Uses the theme's colour tokens (--jec-*), with fallbacks. */
body.jec-guide #primary.jg-primary { width: 100%; max-width: none; float: none; padding-bottom: 3.5rem; } /* room before the footer */
body.jec-guide #content.site-content { display: block; }
.jg { --g-bg: var(--jec-bg, #fbf9f4); --g-card: var(--jec-bg-elevated, #fff); --g-ink: var(--jec-ink, #1f2320); --g-soft: var(--jec-ink-soft, #6b7268); --g-accent: var(--jec-accent, #3d4f66); --g-accent-ink: var(--jec-accent-ink, #f4f6f8); --g-line: var(--jec-line, #e7e2d6); --g-tint: #f1eee5; --g-display: var(--jec-font-display, Georgia, serif); --g-body: var(--jec-font-body, system-ui, sans-serif); }
.jg a { text-decoration: none; }
/* the theme colours every visited link with the accent colour, which turned a visited button's text into its own background: each kind of link below says its colour for both states */
.jg a:visited { color: var(--g-ink); }
.jg-label { display: inline-block; font: 700 .72rem/1.4 var(--g-body); letter-spacing: .1em; text-transform: uppercase; color: var(--g-accent); background: var(--g-card); border: 1px solid var(--g-line); border-radius: 999px; padding: .15rem .65rem; }

/* guide band (chapters only) */
.jg-band { background: var(--g-tint); border: 1px solid var(--g-line); border-radius: 8px; margin: 0 0 1.4rem; }
.jg-band-in { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .65rem 1.1rem; }
.jg-name { font: 700 1.05rem var(--g-display); color: var(--g-ink); }
.jg-name:hover { color: var(--g-accent); }
.jg-prog { margin-left: auto; display: flex; align-items: center; gap: .8rem; font-size: .85rem; color: var(--g-soft); }
.jg-prog > span { white-space: nowrap; }
.jg-bar { width: 140px; height: 6px; border-radius: 3px; background: var(--g-line); overflow: hidden; }
.jg-bar i { display: block; height: 100%; background: var(--g-accent); }
.jg-btn { font-size: .85rem; font-weight: 600; border: 1px solid var(--g-accent); color: var(--g-accent); border-radius: 6px; padding: .3rem .8rem; }
.jg-btn:hover { background: var(--g-accent); color: var(--g-accent-ink); }

/* layout */
.jg-wrap, .jg-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.6rem; align-items: start; }
.jg-hero-solo { grid-template-columns: 1fr; }
.jg-crumbs { font-size: .85rem; color: var(--g-soft); margin: 0 0 .8rem; }
.jg-crumbs a { color: var(--g-soft); text-decoration: underline; text-underline-offset: 2px; }
.jg-title { font: 700 2.3rem/1.15 var(--g-display); margin: .2rem 0 .6rem; color: var(--g-ink); }
.jg-hero .jg-title { font-size: 2.8rem; }
.jg-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; color: var(--g-soft); font-size: .88rem; margin: 0 0 1.4rem; }
.jg-meta span + span::before { content: "·"; margin-right: 1rem; }
.jg-lead { font-size: 1.15rem; max-width: 60ch; }
.jg-lead > :first-child { margin-top: 0; }
.jg-cta { display: inline-block; background: var(--g-accent); color: var(--g-accent-ink); font-weight: 600; border-radius: 8px; padding: .7rem 1.3rem; margin: .6rem .6rem 0 0; }
.jg-cta:hover { opacity: .92; color: var(--g-accent-ink); }
.jg a.jg-ghost { background: transparent; color: var(--g-accent); border: 1px solid var(--g-accent); }
.jg-prose { max-width: 66ch; }
.jg-prose h2 { font: 700 1.5rem/1.25 var(--g-display); margin: 2rem 0 .6rem; scroll-margin-top: 80px; }
.jg-prose h3 { font-family: var(--g-display); }
.jg-prose > :first-child { margin-top: 0; }
.jg-prose p { margin: 0 0 1.1rem; }

/* key takeaways (the "Key takeaways" pattern) */
.jec-takeaways { background: var(--g-card); border: 1px solid var(--g-line); border-left: 4px solid var(--g-accent); border-radius: 8px; padding: 1rem 1.2rem; margin: 0 0 1.6rem; max-width: 66ch; }
.jec-takeaways h3 { margin: 0 0 .4rem; font: 700 .78rem var(--g-body); letter-spacing: .09em; text-transform: uppercase; color: var(--g-accent); }
.jec-takeaways ul { margin: 0; padding-left: 1.2rem; }
.jec-takeaways li { margin: .25rem 0; }

/* words in this chapter */
.jg-terms { margin: 1.8rem 0; max-width: 66ch; }
.jg-terms h3 { margin: 0 0 .5rem; font: 700 .78rem var(--g-body); letter-spacing: .09em; text-transform: uppercase; color: var(--g-soft); }
.jg-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.jg-chips a, .jg-chips span { border: 1px solid var(--g-line); background: var(--g-card); color: var(--g-ink); border-radius: 999px; padding: .2rem .75rem; font-size: .9rem; }
.jg-chips a:hover { border-color: var(--g-accent); color: var(--g-accent); }
.jg-chips small { color: var(--g-soft); margin-left: .3rem; }

/* sidebar */
.jg-side { position: sticky; top: 60px; display: grid; gap: 1.2rem; }
.jg-card { background: var(--g-card); border: 1px solid var(--g-line); border-radius: 10px; overflow: hidden; }
.jg-card h2 { font: 700 1rem var(--g-display); margin: 0; padding: .85rem 1.1rem; border-bottom: 1px solid var(--g-line); display: flex; justify-content: space-between; align-items: baseline; color: var(--g-ink); }
.jg-card h2 small { font: 400 .78rem var(--g-body); color: var(--g-soft); }
.jg-chap, .jg-list { list-style: none; margin: 0; padding: .5rem 0; }
.jg-chap li a, .jg-list li a { display: flex; gap: .7rem; padding: .42rem 1.1rem; font-size: .93rem; line-height: 1.35; color: var(--g-ink); border-left: 3px solid transparent; }
.jg-chap li a .n, .jg-list li a .n { flex: 0 0 1.2rem; color: var(--g-soft); font-variant-numeric: tabular-nums; }
.jg-chap li a:hover, .jg-list li a:hover { background: var(--g-tint); }
.jg-chap li.cur a { background: var(--g-tint); border-left-color: var(--g-accent); font-weight: 700; }
.jg-toc { list-style: none; margin: 0; padding: .6rem 1.1rem .8rem; font-size: .92rem; }
.jg-toc li { margin: .3rem 0; }
.jg-toc a { color: var(--g-soft); }
.jg-toc a:hover { color: var(--g-accent); }
.jg-more { padding: .7rem 1.1rem .9rem; font-size: .9rem; color: var(--g-soft); }
.jg-more a { text-decoration: underline; color: var(--g-ink); }

/* chapter pager */
.jg-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2.4rem 0 0; max-width: 66ch; }
.jg-pager a { display: block; border: 1px solid var(--g-line); background: var(--g-card); border-radius: 10px; padding: 1rem 1.2rem; color: var(--g-ink); }
.jg-pager small { display: block; font: 700 .72rem var(--g-body); letter-spacing: .09em; text-transform: uppercase; color: var(--g-soft); margin-bottom: .2rem; }
.jg-pager b { font: 700 1.1rem/1.3 var(--g-display); }
.jg-pager a.next { background: var(--g-accent); border-color: var(--g-accent); color: var(--g-accent-ink); text-align: right; grid-column: 2; }
.jg-pager a.next small { color: #cdd6e0; }
.jg-pager a.next b { color: #fff; }
.jg-pager a:hover { transform: translateY(-2px); }

/* end of chapter */
.jg-band2 { margin: 2.6rem 0 0; }
.jg-band2:last-of-type { margin-bottom: 0; }
.jg-band2 h2 { font: 700 1.3rem var(--g-display); margin: 0 0 .8rem; }
.jg-qa { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: .7rem 1.2rem; list-style: none; margin: 0; padding: 0; } /* every row is as tall as its tallest question */
.jg-qa li { display: flex; margin: 0; }
.jg-qa a { display: flex; align-items: center; width: 100%; padding: .75rem 1rem; border: 1px solid var(--g-line); border-radius: 8px; background: var(--g-card); color: var(--g-ink); line-height: 1.4; }
.jg-qa a:hover { border-color: var(--g-accent); }
.jg-recipes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.jg-rc { background: var(--g-card); border: 1px solid var(--g-line); border-radius: 10px; overflow: hidden; font-size: .92rem; }
.jg-rc .img { display: block; aspect-ratio: 4 / 3; background: var(--g-line); }
.jg-rc .img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jg-rc > div { padding: .7rem .9rem 1rem; }
.jg-rc .t { font: 700 1rem/1.3 var(--g-display); color: var(--g-ink); display: block; }
.jg-rc .t:hover { color: var(--g-accent); text-decoration: underline; }
.jg-rc small { display: block; color: var(--g-soft); margin-top: .2rem; }

/* hub */
.jg-chapters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0 0; }
.jg-ch { display: block; background: var(--g-card); border: 1px solid var(--g-line); border-radius: 10px; padding: 1.1rem 1.2rem; color: var(--g-ink); }
.jg-ch:hover { border-color: var(--g-accent); transform: translateY(-2px); }
.jg-ch .no { font: 1.6rem/1 var(--g-display); color: var(--g-accent); }
.jg-ch b { display: block; font: 700 1.08rem var(--g-display); margin: .3rem 0 .2rem; }
.jg-ch span { color: var(--g-soft); font-size: .9rem; display: block; }
.jg-ch .jg-draft { color: #996800; font-weight: 600; margin-top: .3rem; }
.jg-others { margin: 2.4rem 0 0; }
.jg-others h2 { font: 700 1.3rem var(--g-display); margin: 0 0 .8rem; }
.jg-others-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* reference pages (the glossary): in the guide but outside the numbered chapters */
.jg-ref-h { margin: 0; padding: .7rem 1.1rem .1rem; font: 700 .72rem var(--g-body); letter-spacing: .09em; text-transform: uppercase; color: var(--g-soft); border-top: 1px solid var(--g-line); }
.jg-chap-ref { padding-top: .2rem; }
.jg-refs { margin: 1rem 0 0; }
.jg-ref { display: block; border: 1px dashed #b9b3a3; border-radius: 10px; padding: 1rem 1.2rem; color: var(--g-ink); background: transparent; }
.jg-ref:hover { border-color: var(--g-accent); border-style: solid; }
.jg-ref b { display: block; font: 700 1.08rem var(--g-display); margin: .5rem 0 .15rem; }
.jg-ref > span:not(.jg-label) { display: block; color: var(--g-soft); font-size: .9rem; }

/* phone: no sidebar; the chapter list becomes a drawer under the title, and a bar sticks to the bottom */
.jg-drawer, .jg-stick { display: none; }
@media (max-width: 900px) {
  .jg-wrap, .jg-hero { grid-template-columns: 1fr; gap: 1.4rem; }
  .jg-wrap > .jg-side { display: none; }
  .jg-hero > .jg-side { position: static; }
  .jg-chapters, .jg-others-row { grid-template-columns: 1fr 1fr; }
  .jg-recipes { grid-template-columns: 1fr 1fr; }
  .jg-qa { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .jg-prog { margin-left: 0; width: 100%; }
  .jg-prog .jg-bar { flex: 1; width: auto; }
  .jg-prog .jg-btn { white-space: nowrap; }
  .jg-title, .jg-hero .jg-title { font-size: 1.85rem; }
  .jg-drawer { display: block; border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-card); margin: .2rem 0 1.4rem; overflow: hidden; }
  .jg-drawer summary { list-style: none; padding: .75rem 1rem; font-weight: 600; display: flex; justify-content: space-between; cursor: pointer; }
  .jg-drawer summary::-webkit-details-marker { display: none; }
  .jg-drawer .jg-chap { border-top: 1px solid var(--g-line); }
  .jg-stick { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--g-card); border-top: 1px solid var(--g-line); padding: .6rem .8rem; display: flex; gap: .6rem; align-items: stretch; }
  .jg-stick a { flex: 1; font-size: .85rem; color: var(--g-ink); display: block; }
  .jg-stick a.nx { flex: 2; background: var(--g-accent); color: var(--g-accent-ink); border-radius: 8px; padding: .5rem .8rem; text-align: right; }
  .jg-stick small { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
  body.jec-guide #page { padding-bottom: 4.5rem; }
}
@media (max-width: 560px) {
  .jg-chapters, .jg-others-row, .jg-recipes { grid-template-columns: 1fr; }
  .jg-pager { grid-template-columns: 1fr; }
  .jg-pager a.next { grid-column: auto; }
}

/* ---- link colours for visited links (must come after the hover rules above) ---- */
.jg a.jg-cta, .jg a.jg-cta:visited, .jg a.jg-cta:hover, .jg a.jg-cta:focus { color: var(--g-accent-ink); }
.jg a.jg-ghost, .jg a.jg-ghost:visited { color: var(--g-accent); }
.jg a.jg-btn, .jg a.jg-btn:visited { color: var(--g-accent); }
.jg a.jg-btn:hover, .jg a.jg-btn:focus { color: var(--g-accent-ink); }
.jg a.jg-name:hover { color: var(--g-accent); }
.jg .jg-crumbs a, .jg .jg-crumbs a:visited, .jg .jg-toc a, .jg .jg-toc a:visited { color: var(--g-soft); }
.jg .jg-toc a:hover, .jg .jg-crumbs a:hover { color: var(--g-accent); }
.jg .jg-more a, .jg .jg-more a:visited { color: var(--g-ink); }
.jg .jg-pager a.next, .jg .jg-pager a.next:visited, .jg .jg-pager a.next:hover { color: var(--g-accent-ink); }
.jg .jg-pager a.next small { color: #cdd6e0; }
.jg .jg-stick a.nx, .jg .jg-stick a.nx:visited { color: var(--g-accent-ink); }
.jg .jg-chips a:hover, .jg .jg-rc .t:hover { color: var(--g-accent); }

/* plain links inside guide text (not buttons, cards or See Also, which carry their own classes) */
.jg .entry-content :is(p, li):not(.see-also__list *) a:not([class]), .jg .entry-content :is(p, li):not(.see-also__list *) a:not([class]):visited { color: var(--g-accent); text-decoration: underline; text-underline-offset: 2px; }
.jg .entry-content :is(p, li):not(.see-also__list *) a:not([class]):hover { text-decoration-thickness: 2px; }

/* a collapsible list (core Details block) reads as a control, not as plain text */
.jg-prose details { border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-card); margin: 1.2rem 0; }
.jg-prose details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; font-weight: 600; color: var(--g-accent); }
.jg-prose details > summary::-webkit-details-marker { display: none; }
.jg-prose details > summary::before { content: "+"; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--g-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1; }
.jg-prose details[open] > summary::before { content: "\2212"; }
.jg-prose details[open] > summary { border-bottom: 1px solid var(--g-line); }
.jg-prose details > summary:hover { background: var(--g-tint); border-radius: 10px; }
.jg-prose details > :not(summary) { padding-left: 1rem; padding-right: 1rem; }
.jg-prose details > ul { padding-left: 2.2rem; margin: .9rem 0; }

/* a wide chart fills the text column; the lightbox shows it full size */
.jg-prose figure.jg-chart { margin: 1.4rem 0; }
.jg-prose figure.jg-chart img { width: 100%; height: auto; border-radius: 10px; }
.jg-prose figure.wp-block-image a { cursor: zoom-in; display: block; }

/* lightbox */
.jg-lb { position: fixed; inset: 0; z-index: 99999; background: rgba(20, 28, 38, .9); overflow: auto; padding: 3.2rem 1rem 1.5rem; -webkit-overflow-scrolling: touch; }
.jg-lb img { display: block; margin: 0 auto; width: max(96vw, 900px); max-width: none; height: auto; border-radius: 6px; background: #E4EAF1; }
.jg-lb-close { position: fixed; top: .8rem; right: .9rem; z-index: 1; font: 600 .95rem/1 var(--g-body, system-ui, sans-serif); color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; padding: .6rem 1.1rem; cursor: pointer; }
.jg-lb-close:hover, .jg-lb-close:focus-visible { background: rgba(255, 255, 255, .3); }