/* ============================================================
   tt-content.css
   1) Content width standard for default-template pages.
   2) Reusable content-component classes (sg-*) used by the
      Presenter Rules page (and available to any default page).
   3) Presenter Rules page type overrides (body.tt-rules-page,
      class added in functions.php).

   Loaded via wp_head, which outputs BEFORE the inlined page
   bundle <style> in base.layout.twig — so every rule that
   fights the bundle must win on SPECIFICITY, not source order.
   Within this file, later rules of equal/higher specificity
   override earlier ones as usual.
   ============================================================ */

/* ---- 1. default-template pages: standard content width ----
   (790px container − 2×15px padding = 760px content, the width
   approved on /presenter-rules/. Custom-template pages — About,
   talks, volume hubs, homepage — are untouched.) */
body.page-template-default .entry-content .container { max-width: 790px; }

/* ---- 2a. accent palette ---- */
.sg-green  { --sec: #61b567; }
.sg-amber  { --sec: #ffbe40; }
.sg-pink   { --sec: #ec9bb5; }
.sg-purple { --sec: #6c51ee; --chip-ink: #fff; }

/* ---- 2b. section eyebrow headings ---- */
.entry-content h2.sg-t { display: flex; align-items: center; gap: 18px; font-family: obviously-bold, "Arial Black", sans-serif; font-size: clamp(16px, 2vw, 19px); letter-spacing: .22em; text-transform: uppercase; line-height: 1.2; color: #000; margin: 96px 0 34px; }
.entry-content h2.sg-t:after { content: ''; flex: 1; height: 3px; background: var(--sec, #6c51ee); }
.entry-content .container > h2.sg-t:first-child { margin-top: 0; }

/* ---- 2c. rule headlines ---- */
.entry-content h3.sg-rh { font-family: obviously-black, "Arial Black", sans-serif; font-size: clamp(23px, 3.2vw, 29px); line-height: 1.25; color: #000; margin: 0 0 16px; padding: 0; }

/* ---- 2d. sticker chips ---- */
.entry-content p.sg-chip { display: inline-block; font-family: obviously-bold, "Arial Black", sans-serif; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--chip-ink, #000); background: var(--sec, #fff); border: 2px solid #000; border-radius: 999px; padding: 9px 16px 8px; margin: 44px 0 16px; line-height: 1; }

/* ---- 2e. numbered circle badges ----
   From the making-a-tiny-talk trial design; kept for future
   numbered-list pages. Editor usage: a paragraph block holding
   just the number, colored via a palette class, placed above
   its heading (same pattern as the Rule chips):
     <p class="sg-num sg-green">1</p>  */
.entry-content p.sg-num { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 2px solid #000; border-radius: 50%; background: var(--sec, #fff); color: var(--chip-ink, #000); font-family: obviously-black, "Arial Black", sans-serif; font-size: 24px; line-height: 1; padding: 2px 0 0; margin: 44px 0 16px; box-shadow: 0 3px 0 #000; }

/* ---- 2f. do / don't rows (✕ / ✓ marks drawn by CSS) ---- */
.entry-content div.sg-swap { margin: 28px 0; }
.entry-content p.sg-no, .entry-content p.sg-yes { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.entry-content p.sg-no:before, .entry-content p.sg-yes:before { flex: 0 0 auto; width: 34px; height: 34px; border: 2px solid #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: obviously-black, "Arial Black", sans-serif; font-size: 17px; }
.entry-content p.sg-no:before { content: '\2715'; background: #ec9bb5; }
.entry-content p.sg-yes:before { content: '\2713'; background: #61b567; }
.entry-content p.sg-no s { opacity: .5; text-decoration-thickness: 2px; }
.entry-content div.sg-swap p:last-child { margin-bottom: 0; }

/* ---- 2g. note asides (dashed box, white chip) ---- */
.entry-content div.sg-note { border: 2px dashed #000; border-radius: 18px; padding: 24px 28px; margin: 48px 0 0; }
.entry-content div.sg-note p { font-size: clamp(16px, 2vw, 18px); line-height: 1.55; margin-bottom: 12px; }
.entry-content div.sg-note p:last-child { margin-bottom: 0; }
.entry-content div.sg-note p.sg-chip { background: #fff; font-size: 13px; margin: 0 0 16px; }

/* ---- 2h. questions close ---- */
.entry-content h2.sg-ask-t { font-family: obviously-black, "Arial Black", sans-serif; font-size: clamp(38px, 6vw, 54px); line-height: 1.05; color: #000; text-align: center; margin: 96px 0 20px; }
.entry-content p.sg-ask-p { text-align: center; max-width: 540px; margin-left: auto; margin-right: auto; }

/* ---- 3. Presenter Rules page type (the approved look) ----
   General body type first; component re-specs AFTER it so they
   win back their sizes within this file. */
body.tt-rules-page .entry-content p { font-family: Recoleta-SemiBold, Georgia, serif; font-size: clamp(18px, 2.2vw, 20.5px); line-height: 1.62; color: #000; margin-bottom: 20px; }
body.tt-rules-page .entry-content p strong, body.tt-rules-page .entry-content p b { font-weight: normal; font-family: Recoleta-Bold, Georgia, serif; font-size: inherit; }
body.tt-rules-page .entry-content a { color: inherit; }
body.tt-rules-page .entry-content p.sg-chip { font-family: obviously-bold, "Arial Black", sans-serif; font-size: 13px; line-height: 1; letter-spacing: .1em; color: var(--chip-ink, #000); margin: 44px 0 16px; }
body.tt-rules-page .entry-content p.sg-num { font-family: obviously-black, "Arial Black", sans-serif; font-size: 24px; line-height: 1; color: var(--chip-ink, #000); margin: 44px 0 16px; }
body.tt-rules-page .entry-content p.sg-no, body.tt-rules-page .entry-content p.sg-yes { font-size: clamp(18px, 2.2vw, 21px); margin-bottom: 16px; }
body.tt-rules-page .entry-content p.sg-yes { font-family: Recoleta-Bold, Georgia, serif; }
body.tt-rules-page .entry-content div.sg-note p { font-size: clamp(16px, 2vw, 18px); line-height: 1.55; margin-bottom: 12px; }
body.tt-rules-page .entry-content div.sg-note p.sg-chip { font-size: 13px; margin: 0 0 16px; }
body.tt-rules-page .entry-content div.sg-swap p:last-child, body.tt-rules-page .entry-content div.sg-note p:last-child { margin-bottom: 0; }

/* ---- mobile ---- */
@media (max-width: 760px) {
  .entry-content h2.sg-t { margin: 72px 0 26px; gap: 14px; }
  .entry-content div.sg-note { padding: 20px; }
}