/*
Theme Name:   Readiness (Kadence Child)
Theme URI:    https://thereadiness.ca
Description:  Kadence child theme. Exact values from 03_Consulting_brief.html.
Author:       Readiness AI
Template:     kadence
Version:      2.0.0
Requires at least: 6.3
License:      GPL-2.0-or-later
Text Domain:  readiness-child
*/

/* ============================================================
   EXACT TOKENS FROM 03_Consulting_brief.html
   ============================================================ */
:root {
  --r-bg:       #F3F0E9;
  --r-ink:      #2B3A3C;
  --r-deep:     #0D2F33;
  --r-mid:      #5D6A6C;
  --r-muted:    #8A9698;
  --r-teal:     #15A39A;
  --r-amber:    #C08A2A;
  --r-dark:     #0A1C1F;
  --r-cream:    #FAF8F3;
  --r-logo-bg:  #0D2F33;
  --r-divider:  #D4D6D0;
  --r-tag-bd:   #E7E5DF;
  --r-white:    #FFFFFF;
  --r-sans:     'DM Sans', sans-serif;
  --r-serif:    'Newsreader', Georgia, serif;
  --r-mono:     'JetBrains Mono', monospace;
}

/* ============================================================
   PAGE BACKGROUND
   ============================================================ */
html, body, .site, .site-main, #primary, .wp-site-blocks,
.entry-content-wrap, .kadence-inner-column-inner,
.wp-block-kadence-rowlayout, .kt-row-layout-inner, .kt-inside-inner-col {
  background-color: var(--r-bg) !important;
}

body {
  color: var(--r-ink);
  font-family: var(--r-sans);
  -webkit-font-smoothing: antialiased;
}

.kadence-inner-column-inner,
.wp-block-kadence-rowlayout,
.kt-row-layout-inner,
.kt-inside-inner-col { background-color: transparent !important; }

/* ============================================================
   HEADER
   ============================================================ */
#masthead, .site-header, .kadence-sticky-header,
.site-header-wrap, .header-wrap {
  background-color: var(--r-bg) !important;
  border-bottom: 1px solid var(--r-divider) !important;
  box-shadow: none !important;
}

.site-branding .site-title a, .kadence-logo-title,
header .site-title a, .custom-logo-link {
  font-family: var(--r-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--r-cream) !important;
  background-color: var(--r-logo-bg) !important;
  padding: .35em .6em !important;
  text-decoration: none !important;
  display: inline-block !important;
}

#site-navigation a, .main-navigation a,
.kadence-navigation a, header nav a {
  font-family: var(--r-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--r-ink) !important;
  text-decoration: none !important;
}

#site-navigation a:hover, header nav a:hover { color: var(--r-teal) !important; }
header nav a[href*="readiness-review"] { color: var(--r-teal) !important; }

/* ============================================================
   POST / PAGE CONTENT
   ============================================================ */
.entry-content, .post-content, .page-content,
article .entry-content {
  font-family: var(--r-sans);
  color: var(--r-ink);
  max-width: 652px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  counter-reset: h2counter;
}

/* POST TITLE */
.entry-title, h1.entry-title, .page-title {
  font-family: var(--r-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em !important;
  color: var(--r-deep) !important;
  margin-bottom: 1rem !important;
}

/* POST META */
.entry-meta, .post-meta, .byline, .posted-on {
  font-family: var(--r-mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--r-muted) !important;
}
.entry-meta a { color: var(--r-muted) !important; text-decoration: none !important; }

/* ── H2: 64px teal italic number + section heading ──
   display:flex makes ::before a flex child alongside the text node.
   Number is exactly 64px Newsreader italic, 71px wide, gap 24px — from brief.
*/
.entry-content h2, .post-content h2, .page-content h2 {
  counter-increment: h2counter;
  display: flex !important;
  align-items: flex-start !important;
  gap: 24px !important;
  font-family: var(--r-serif) !important;
  font-weight: 500 !important;
  font-size: 32px !important;
  line-height: 1.15 !important;
  letter-spacing: -.04em !important;
  color: var(--r-deep) !important;
  border-top: .667px solid var(--r-divider) !important;
  padding-top: 28px !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

.entry-content h2::before, .post-content h2::before, .page-content h2::before {
  content: counter(h2counter, decimal-leading-zero);
  font-family: var(--r-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 64px !important;
  line-height: 1 !important;
  color: var(--r-teal) !important;
  flex-shrink: 0 !important;
  width: 71px !important;
  display: block !important;
  margin-top: -6px;
}

/* H3 */
.entry-content h3, .post-content h3, .page-content h3 {
  font-family: var(--r-sans) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
  color: var(--r-deep) !important;
  margin-top: 1.5rem !important;
  margin-bottom: .4rem !important;
}

/* H4 */
.entry-content h4, .post-content h4 {
  font-family: var(--r-sans) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--r-deep) !important;
  margin-bottom: .3rem !important;
}

/* BODY TEXT — 17px from brief */
.entry-content p, .post-content p, .page-content p {
  font-family: var(--r-sans) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--r-ink) !important;
  letter-spacing: -.003em;
  margin-bottom: 14px !important;
}
.entry-content p strong, .post-content p strong {
  font-weight: 600 !important; color: var(--r-deep) !important;
}

/* LISTS */
.entry-content ul, .entry-content ol,
.post-content ul,  .post-content ol {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--r-ink) !important;
  padding-left: 1.25rem !important;
  margin-bottom: 1rem !important;
}
.entry-content li, .post-content li { margin-bottom: .35rem !important; }

/* LINKS */
.entry-content a, .post-content a {
  color: var(--r-teal) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-thickness: 1px !important;
}
.entry-content a:hover, .post-content a:hover { color: var(--r-deep) !important; }

/* HR */
.entry-content hr, .post-content hr, .wp-block-separator {
  border: none !important;
  border-top: .667px solid var(--r-divider) !important;
  margin: 2.5rem 0 !important;
  opacity: 1 !important;
  background: none !important;
}

/* TABLE */
.entry-content table, .post-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--r-sans) !important;
  font-size: 15px !important;
  color: var(--r-ink) !important;
  margin: 1.5rem 0 2rem !important;
  background: transparent !important;
}
.entry-content th, .post-content th {
  font-family: var(--r-mono) !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--r-mid) !important;
  padding: .5rem .75rem !important;
  text-align: left !important;
  border-bottom: 1px solid var(--r-divider) !important;
  background: transparent !important;
}
.entry-content td, .post-content td {
  padding: .75rem !important;
  border-bottom: .667px solid var(--r-tag-bd) !important;
  vertical-align: top !important;
  line-height: 1.5 !important;
  background: transparent !important;
}
.entry-content tr:last-child td,
.post-content tr:last-child td { border-bottom: none !important; }

/* ── BLOCKQUOTE → KEY TAKEAWAY
   Exact from brief: display:flex, gap:20px, bg:#0A1C1F, padding:28px
   ::before = "Key takeaway" label: Mono 10px/600 teal, width 120px
   p = Newsreader 22px/500 cream, max-width 448px
*/
.entry-content blockquote, .post-content blockquote, .wp-block-quote {
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
  background-color: var(--r-dark) !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 28px !important;
  margin: 20px 0 !important;
}

.entry-content blockquote::before, .post-content blockquote::before,
.wp-block-quote::before {
  content: "Key takeaway";
  font-family: var(--r-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--r-teal) !important;
  width: 120px !important;
  flex-shrink: 0 !important;
  display: block !important;
  padding-top: 6px !important;
  line-height: 1.4;
}

.entry-content blockquote p, .post-content blockquote p, .wp-block-quote p {
  font-family: var(--r-serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: -.015em !important;
  color: var(--r-cream) !important;
  max-width: 448px !important;
  margin: 0 !important;
}

.entry-content blockquote cite, .wp-block-quote cite {
  font-family: var(--r-mono) !important;
  font-size: 10px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--r-teal) !important;
  font-style: normal !important;
  display: block;
  margin-top: .75rem;
}

/* CODE */
.entry-content code, .post-content code {
  font-family: var(--r-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .025em !important;
  color: var(--r-deep) !important;
  background: var(--r-white) !important;
  border: 1px solid var(--r-divider) !important;
  padding: .2rem .45rem !important;
  border-radius: 0 !important;
}
.entry-content pre, .post-content pre {
  background: var(--r-dark) !important;
  color: var(--r-cream) !important;
  padding: 1.5rem !important;
  overflow-x: auto;
}
.entry-content pre code, .post-content pre code {
  background: none !important; border: none !important;
  padding: 0 !important; color: inherit !important; font-size: 14px !important;
}

/* ============================================================
   UTILITY CLASSES — add to Custom HTML blocks in posts
   ============================================================ */

/* Category overline above H2 — add as <p class="section-label">Background</p> */
.section-label, p.section-label {
  font-family: var(--r-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--r-mid) !important;
  display: block !important;
  margin-bottom: 0 !important;
  margin-top: 28px !important;
}

/* Priority badges */
.priority-critical, .priority-high, .priority-medium {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--r-mono); font-size: 9px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 5px;
}
.priority-critical { color: var(--r-teal); }
.priority-high     { color: var(--r-amber); }
.priority-medium   { color: var(--r-mid); }

/* Tag pills */
.tag-pill {
  display: inline-block;
  font-family: var(--r-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .025em; color: var(--r-deep);
  background: var(--r-white); border: 1px solid var(--r-divider);
  padding: 3px 7px; border-radius: 0; margin: 0 .2rem .25rem 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
#colophon, .site-footer, footer.site-footer {
  background-color: var(--r-dark) !important;
  color: var(--r-cream) !important;
  padding: 4rem 2rem 3rem !important;
  margin-top: 6rem !important;
}
.site-footer a, #colophon a {
  color: var(--r-cream) !important; text-decoration: none !important; font-size: 14px !important;
}
.site-footer a:hover, #colophon a:hover { color: var(--r-teal) !important; }
.site-footer h4, .site-footer .widget-title, #colophon h4 {
  font-family: var(--r-mono) !important; font-size: 10px !important;
  font-weight: 600 !important; letter-spacing: .18em !important;
  text-transform: uppercase !important; color: var(--r-teal) !important; margin-bottom: 1rem !important;
}
.site-footer p, #colophon p {
  font-size: 14px !important; color: #5D6A6C !important; line-height: 1.6 !important;
}
.site-info, .footer-bottom {
  border-top: 1px solid #1e3538; padding-top: 1.5rem; margin-top: 2.5rem;
  font-family: var(--r-mono) !important; font-size: 10px !important;
  letter-spacing: .1em !important; color: #5D6A6C !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .entry-content h2, .post-content h2 {
    gap: 16px !important; font-size: 26px !important;
  }
  .entry-content h2::before, .post-content h2::before {
    font-size: 48px !important; width: 52px !important;
  }
  .entry-content blockquote, .wp-block-quote {
    flex-direction: column !important; gap: 12px !important; padding: 20px !important;
  }
  .entry-content blockquote::before, .wp-block-quote::before {
    width: auto !important; padding-top: 0 !important;
  }
  .entry-content blockquote p, .wp-block-quote p { font-size: 18px !important; }
  .entry-content table { display: block; overflow-x: auto; }
}

@media (max-width: 480px) {
  .entry-content h2::before, .post-content h2::before {
    font-size: 36px !important; width: 40px !important;
  }
  .entry-content h2, .post-content h2 {
    gap: 12px !important; font-size: 22px !important;
  }
}