/* ==========================================================================
   The Go Network: Prayer Teachings
   ==========================================================================
   Loaded by prayer.html and by the four generated pages in teachings/
   (scripts/build-teachings.mjs). Tokens come from tgn-tokens.css. Every
   length below is an existing usage on prayer.html or tgn-nav.css; none is
   new to the site.

   Three blocks:
   1. Teachings rows on prayer.html. The collapsed row keeps the exact
      declarations its inline styles carried before it was generated.
   2. The single teaching page.
   3. Comments, styled on the WordPress HTML5 class names and scoped under
      .comments-area, so the same rules work on wp_list_comments() and
      comment_form() output unchanged.

   Breakpoints: 768 and 1024 only, written min-width up so no property is
   specified in both directions.
   ========================================================================== */

/* ---------- 1. Rows (prayer.html) ---------- */

.tgn-teach-row {
  background: var(--tgn-parchment-50);
  border: 1px solid var(--tgn-parchment-200);
  border-radius: var(--tgn-radius-card);
  scroll-margin-top: 96px;   /* clears the 81px sticky nav on a hash deep link */
}
.tgn-teach-toggle {
  width: 100%;
  display: block;
  text-align: left;
  background: none;
  border: 0;
  padding: 28px;
  color: var(--tgn-ink);
}
.tgn-teach-date {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tgn-teach-date__d { font-weight: 500; color: var(--tgn-parchment-400); }
.tgn-teach-date__sep { color: var(--tgn-parchment-300); }
.tgn-teach-date__ref { font-weight: 600; color: var(--tgn-brick-label); }
.tgn-teach-title {
  display: block;
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tgn-teach-dek {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--tgn-parchment-500);
  max-width: 68ch;
}
.tgn-teach-rm {
  margin-top: 16px;
  color: var(--tgn-brick-label);
  font-weight: 600;
  font-size: 15px;
}
.tgn-teach-rm__up { transform: rotate(-90deg); }

/* Expanded panel: essay and rail. Stacked below 1024 with the rail under a
   parchment-200 rule; side by side from 1024 on fr ratios. */
.tgn-teach-panel {
  border-top: 1px solid var(--tgn-parchment-200);
  background: var(--tgn-white);
  border-radius: 0 0 var(--tgn-radius-card) var(--tgn-radius-card);
}
.tgn-teach-essay {
  font-size: 17px;
  line-height: 1.85;
  max-width: 68ch;
  color: var(--tgn-ink);
}
.tgn-teach-panel .tgn-teach-essay { padding: 28px; }
.tgn-teach-lede { font-size: 19px; }
.tgn-teach-essay p + p { margin-top: 22px; }
.tgn-teach-rail {
  padding: 28px;
  border-top: 1px solid var(--tgn-parchment-200);
  min-width: 0;
}
@media (min-width: 1024px) {
  .tgn-teach-panel {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  /* The gap stands in for the rail's own left padding, so the space between
     essay and rail text is the same 28 + 28 it would be with no gap. */
  .tgn-teach-rail { border-top: 0; padding-left: 0; }
}

/* Rail label: the prayer.html "Contact" label (brick-label, 700, 0.06em,
   uppercase) at the 12px micro-label floor. */
.tgn-teach-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tgn-brick-label);
}

/* Share row. The buttons reuse the footer's .tgn-share-btn (pill, 44px,
   share icon that swaps to a check on .is-copied); only the colours change
   for a light ground. parchment-300 border clears 3:1 on white. */
.tgn-teach-share {
  position: relative;
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tgn-teach-share .tgn-teach-share__btn {
  color: var(--tgn-ink);
  border-color: var(--tgn-parchment-300);
  text-decoration: none;
}
.tgn-teach-share .tgn-teach-share__btn:hover {
  color: var(--tgn-ink);
  border-color: var(--tgn-brick);
}
.tgn-teach-share__ic { flex: none; width: 18px; height: 18px; display: block; }
.tgn-teach-share__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tgn-teach-open {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--tgn-brick-label);
  font-size: 15px;
  font-weight: 600;
}
.tgn-teach-open:hover { color: var(--tgn-brick-label); text-decoration: underline; }

/* Comments preview in the rail. Hidden while commentsEnabled is false. */
.tgn-teach-cpreview {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--tgn-parchment-200);
}
.tgn-teach-cpreview[hidden],
.tgn-teach-cpreview [hidden] { display: none; }
.tgn-teach-cpreview__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
}
.tgn-teach-cpreview__latest { margin-top: 10px; }
.tgn-teach-cpreview__author { display: block; font-size: 14px; font-weight: 600; }
.tgn-teach-cpreview__text {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--tgn-parchment-500);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.tgn-teach-cpreview__empty {
  margin-top: 10px;
  font-size: 14px;
  color: var(--tgn-parchment-400);
}

/* Amber pill: the Levels buttons (amber, ink, 600, pill), held to 44px. */
.tgn-teach-cbtn,
.comments-area .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 20px;
  border: none;
  border-radius: var(--tgn-radius-pill);
  background: var(--tgn-amber);
  color: var(--tgn-ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease;
}
.tgn-teach-cbtn { margin-top: 16px; }
.tgn-teach-cbtn:hover,
.comments-area .submit:hover { background: var(--tgn-cta); color: var(--tgn-ink); }

/* Focus, for every new control on both pages. Mirrors .tgn-share-btn. */
.tgn-teach-open:focus-visible,
.tgn-teach-cbtn:focus-visible,
.tgn-crumbs a:focus-visible,
.tgn-teach-pager__link:focus-visible,
.comments-area a:focus-visible,
.comments-area .submit:focus-visible,
.comments-area input:focus-visible,
.comments-area textarea:focus-visible {
  outline: 2px solid var(--tgn-brick);
  outline-offset: 3px;
}

/* ---------- 2. Teaching page (teachings/<slug>.html) ---------- */

.tgn-teaching {
  background: var(--tgn-white);
  padding: clamp(104px, 10vw, 144px) 0;
}
.tgn-teaching__col {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(24px, 2.8vw, 40px);
  padding-right: clamp(24px, 2.8vw, 40px);
}

.tgn-crumbs ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
}
.tgn-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tgn-brick-label);
  font-size: 15px;
  font-weight: 600;
}
.tgn-crumbs a:hover { color: var(--tgn-brick-label); text-decoration: underline; }
.tgn-crumbs__sep { color: var(--tgn-parchment-400); font-size: 15px; }

.tgn-teaching__title {
  margin-top: 16px;
  font-family: var(--font-heading);
  font-size: clamp(34px, 4.8vw, 56px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.tgn-teaching__byline {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.tgn-teaching__byline img {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.tgn-teaching__author { font-size: 16px; font-weight: 600; line-height: 1.4; }
.tgn-teaching__byline .tgn-teach-date { margin-top: 2px; }
.tgn-teaching__essay { margin-top: 40px; max-width: none; }

.tgn-teaching__share {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--tgn-parchment-200);
}

.tgn-teach-pager {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.tgn-teach-pager__link {
  display: block;
  min-height: 44px;
  padding: 18px 20px;
  background: var(--tgn-parchment-50);
  border: 1px solid var(--tgn-parchment-200);
  border-radius: var(--tgn-radius-inset);
  transition: border-color 150ms ease;
}
.tgn-teach-pager__link:hover { color: var(--tgn-ink); border-color: var(--tgn-parchment-300); }
.tgn-teach-pager__dir {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tgn-brick-label);
}
.tgn-teach-pager__title {
  display: block;
  margin-top: 6px;
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .tgn-teach-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgn-teach-pager__link--next { grid-column: 2; text-align: right; }
}

/* Tint Carryover: the closing band's top stop takes the ground of the
   section directly above it. prayer.html's .close rule carries white (the
   teaching section); with comments showing, the section above is
   parchment-50. Set by the generator from commentsEnabled, and by
   tgn-teachings.js in preview. */
.close.tgn-close--after-comments {
  background: linear-gradient(to bottom, var(--tgn-parchment-50) 50%, var(--tgn-ink) 50%);
}

/* ---------- 3. Comments (WordPress HTML5 markup) ---------- */

/* Same column as .tgn-teaching__col (720px less its gutters) without a
   wrapper element, so the WordPress markup stays exactly as core emits it. */
.comments-area {
  background: var(--tgn-parchment-50);
  padding-top: clamp(104px, 10vw, 144px);
  padding-bottom: clamp(104px, 10vw, 144px);
  padding-left: max(clamp(24px, 2.8vw, 40px), calc((100% - 720px) / 2 + clamp(24px, 2.8vw, 40px)));
  padding-right: max(clamp(24px, 2.8vw, 40px), calc((100% - 720px) / 2 + clamp(24px, 2.8vw, 40px)));
  scroll-margin-top: 81px;
}
.comments-area[hidden] { display: none; }
.comments-area .comments-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.comments-area .tgn-comments-notice { margin: 0 0 24px; }

.comments-area .comment-list,
.comments-area .children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comments-area .comment-list { margin-top: 32px; }
.comments-area .comment-list:empty { display: none; }
.comments-area .comment-list > li + li { margin-top: 16px; }
.comments-area .children {
  margin-top: 16px;
  padding-left: 16px;
}
.comments-area .children > li + li { margin-top: 16px; }
@media (min-width: 768px) {
  .comments-area .children { padding-left: 40px; }
}
.comments-area .comment { scroll-margin-top: 96px; }
.comments-area .comment-body {
  background: var(--tgn-white);
  border: 1px solid var(--tgn-parchment-200);
  border-radius: var(--tgn-radius-inset);
  padding: 20px 24px;
}
.comments-area .comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
}
.comments-area .comment-author .fn { font-weight: 600; font-size: 16px; }
.comments-area .comment-metadata a {
  font-size: 14px;
  color: var(--tgn-parchment-400);
}
.comments-area .comment-content {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--tgn-parchment-500);
  overflow-wrap: anywhere;
}
.comments-area .comment-content p + p { margin-top: 14px; }
.comments-area .reply { margin-top: 4px; }
.comments-area .comment-reply-link,
.comments-area #cancel-comment-reply-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--tgn-brick-label);
  font-size: 15px;
  font-weight: 600;
}
.comments-area .comment-reply-link:hover,
.comments-area #cancel-comment-reply-link:hover { color: var(--tgn-brick-label); text-decoration: underline; }
.comments-area #cancel-comment-reply-link[hidden] { display: none; }

.comments-area .tgn-comments-empty {
  margin-top: 16px;
  font-size: 16px;
  color: var(--tgn-parchment-400);
}
.comments-area .tgn-comments-empty[hidden] { display: none; }

/* Respond form: a white card, fields matching the prayer.html request forms
   (parchment-50 fill, parchment-200 border, 10px radius) at 16px. */
.comments-area .comment-respond {
  margin-top: 40px;
  background: var(--tgn-white);
  border: 1px solid var(--tgn-parchment-200);
  border-radius: var(--tgn-radius-card);
  padding: clamp(28px, 3vw, 32px);
}
.comments-area .comment .comment-respond { margin-top: 16px; }
.comments-area .comment-reply-title {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
}
.comments-area .comment-reply-title small { font-family: var(--font-body); font-size: 15px; }
.comments-area .comment-notes,
.comments-area .tgn-comment-privacy {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tgn-parchment-400);
}
.comments-area .tgn-comment-privacy a {
  color: var(--tgn-brick-label);
  font-weight: 600;
  text-decoration: underline;
}
.comments-area .comment-form-comment,
.comments-area .comment-form-author,
.comments-area .comment-form-email { margin-top: 18px; }
.comments-area .comment-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--tgn-parchment-400);
}
.comments-area .comment-form input[type="text"],
.comments-area .comment-form input[type="email"],
.comments-area .comment-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  padding: 11px 14px;
  border: 1px solid var(--tgn-parchment-200);
  border-radius: 10px;
  background: var(--tgn-parchment-50);
  color: var(--tgn-ink);
}
.comments-area .comment-form textarea { resize: vertical; }
.comments-area .comment-form [aria-invalid="true"] { border-color: var(--tgn-brick); }
.comments-area .tgn-field-error {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tgn-brick-label);
}
.comments-area .form-submit { margin-top: 24px; }
.comments-area .tgn-comments-preview-sent { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .tgn-teach-cbtn,
  .comments-area .submit,
  .tgn-teach-pager__link { transition: none; }
}