/* =============================================================
   TCP Software — Single Entry Styles
   Covers: post, webinar, customer-story, downloads

   Section order is load order. Keep it.
     1. Tokens
     2. Base
     3. Layout
     4. Entry Header
     5. Entry Content
     6. Sidebar
     7. Components
     8. CPT Overrides
     9. Responsive
    10. Dormant

   Adding a new CPT? Put its rules in section 8 only.
   ============================================================= */


/* -------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------- */
:root {
  /* Text */
  --tcp-ink:          #02182E;  /* headings, emphasis */
  --tcp-navy:         #161F2E;  /* site header bg, nav items */
  --tcp-body:         #444444;  /* body copy, nav links */
  --tcp-body-soft:    #333333;  /* customer-story background copy */
  --tcp-muted:        #595959;  /* dates, secondary meta */
  --tcp-quote:        #1E1D1A;  /* blockquote copy */
  --tcp-rust:         #76301b;  /* sup-title */
  --tcp-accent:       #0082BA;  /* copy-link confirmation */

  /* Surfaces */
  --tcp-surface:      #FFFFFF;  /* cards */
  --tcp-header-bg:    #E7EBF1;  /* entry header band */
  --tcp-hairline:     #F3F3F3;  /* borders and separators */

  /* Shape */
  --tcp-radius:       16px;     /* cards */
  --tcp-radius-media: 24px;     /* featured image */

  /* Measure */
  --tcp-cradle:       1275px;
  --tcp-header-max:   1280px;
  --tcp-gutter:       15px;
}


/* -------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------- */
html { scroll-behavior: smooth; }

.revamped-header { background: var(--tcp-navy); }

.article-template-default footer { position: relative; z-index: 1000; }
.article-template-default .sub-footer { background: var(--tcp-surface); }


/* -------------------------------------------------------------
   3. LAYOUT

   Column widths and the content rule are variables. A template
   rebalances the grid by redefining them on its own article
   element — no higher-specificity width re-declarations, no
   !important. See section 8 for how webinar and podcast use it.

   The -15px wrapper margin plus 15px child padding is the
   original gutter system. Kept as-is so column widths compute
   identically. A gap-based rewrite is in the notes.
   ------------------------------------------------------------- */
:root {
  --tcp-nav-width: 25%;
  --tcp-content-width: 75%;
  --tcp-content-border: 1px solid var(--tcp-hairline);
}

article .entry-cradle { max-width: var(--tcp-cradle); margin: 0 auto; }

article .entry-wrapper {
  display: flex;
  margin: 0 calc(var(--tcp-gutter) * -1);
  padding: 60px 0;
}

article .entry-navigation { width: var(--tcp-nav-width); padding: 0 var(--tcp-gutter); }

article .entry-content {
  width: var(--tcp-content-width);
  padding: 0 var(--tcp-gutter);
  border-left: var(--tcp-content-border);
}


/* -------------------------------------------------------------
   4. ENTRY HEADER
   ------------------------------------------------------------- */
article .entry-header-wrapper { background: var(--tcp-header-bg); }

article .entry-header {
  display: flex;
  width: 100%;
  max-width: var(--tcp-header-max);
  margin: 0 auto;
  padding: 50px 0;
}

article .entry-header .col { display: flex; align-items: center; padding: 0; }
article .entry-header .col-1 { width: 55%; padding-right: 25px; }
article .entry-header .col-2 { width: 45%; padding-left: 25px; }

article .entry-header h1 { color: var(--tcp-ink); }
article .entry-header h1.no-thumbnail { margin-bottom: 0; }

article .entry-header .sup-title {
  margin-bottom: var(--tcp-gutter);
  color: var(--tcp-rust);
  font-weight: 700;
  line-height: 24px;
  text-align: left;
}

/* .col is a flex container, so its children size to their content.
   Some hero media has none — the Wistia iframe and the podcast artwork
   are positioned or sized from the inside — which leaves them at width 0
   and collapses the 56.25% aspect-ratio padding to zero height. */
article .entry-header .col-2 > * { width: 100%; }
article .entry-header .col-2 iframe { border-radius: 24px; }

/* Hero media. Radius lives on the wrapper; overflow clips the image. */
article .featured-image {
  display: flex;
  justify-content: flex-end;
  border-radius: var(--tcp-radius-media);
  overflow: hidden;
}

/* --- Author byline ---
   Rendered by single-article.php when the hide_author field is off.
   single.php has the same block commented out. */
article .entry-header .author-info { display: flex; align-items: center; margin: 30px 0 40px; }
article .entry-header .author-avatar img { margin: 0 13px 0 0; border-radius: 50%; }

article .entry-header .author-name {
  color: var(--tcp-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: left;
}

/* CONTRAST BUG: white on the #E7EBF1 header band. .author-name overrides
   it, so only .author-position inherits this and renders near-invisible.
   Left as-is for visual parity — switch to var(--tcp-muted) to fix. */
article .entry-header .author-details {
  color: var(--tcp-ink-invert, #FFFFFF);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: left;
}


/* -------------------------------------------------------------
   5. ENTRY CONTENT
   ------------------------------------------------------------- */
article .entry-content h2,
article .entry-content h3:not(.article-callout__title) { color: #000; }

article .entry-content h3:not(.article-callout__title) { margin: 30px 0 20px; }

article .entry-content p {
  margin-bottom: 1em;
  color: var(--tcp-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
}

article .entry-content strong { font-weight: 700; }
article .entry-content img { margin: 25px 0 15px; }
article .entry-content iframe { margin: 0 0 1em; }

article .entry-content ul li,
article .entry-content ol li { font-size: 20px; line-height: 32px; }

article .entry-content ul li:not(:last-child),
article .entry-content ol li:not(:last-child) { margin-bottom: 1em; }

article .entry-content blockquote {
  margin: var(--global-md-spacing) auto;
  margin-left: 1.5em;
  padding-left: 1.5em;
  border-left: 3px solid var(--global-palette4);
}

article .entry-content blockquote p {
  color: var(--tcp-quote);
  font-weight: 300;
  line-height: 30px;
  overflow: hidden;
}

article .article-callout { margin: 2.5em auto; }

/* Block-editor content that ships its own header/entry-content markup. */
article .entry-content .kt-blocks-post-grid-item header {
  margin: 0;
  padding: 0;
  background: transparent;
}
article .entry-content .kt-blocks-post-grid-item .entry-content { padding: 0; border: 0; }
article .entry-content .kt-blocks-post-grid-item img { margin: 0; }

article .entry-content .custom-post-cta-col p { color: var(--tcp-surface); }


/* -------------------------------------------------------------
   6. SIDEBAR

   Shared card shell for the sticky TOC and the meta panel.
   ------------------------------------------------------------- */
article .entry-navigation-items,
article .entry-navigation .post-meta {
  min-height: 150px;
  padding: 25px;
  border: 1px solid var(--tcp-hairline);
  border-radius: var(--tcp-radius);
  background: var(--tcp-surface);
  font-size: 16px;
  line-height: 22px;
}

article .entry-navigation .post-meta span { color: var(--tcp-muted); }

/* Sticky table of contents */
article .entry-navigation-items {
  margin: 0;
  max-height: 50vh;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

article .entry-navigation-items li {
  margin: 0 0 24px;
  color: var(--tcp-navy);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
  text-indent: 0;
  list-style: none;
}

article .entry-navigation-items li:last-child { margin-bottom: 0; }
article .entry-navigation-items li a { color: var(--tcp-body); font-weight: 500; text-decoration: none; }
article .entry-navigation-items.fixed li { max-width: 240px; }


/* -------------------------------------------------------------
   7. COMPONENTS
   ------------------------------------------------------------- */

/* Social share bar */
.social-bar {
  margin-top: 1.5em;
  margin-left: -16px;
  padding: 1.5em 0;
  border-top: 1px solid var(--tcp-hairline);
}

.social-share-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 16px;
  line-height: 1;
}

.social-share-bar span { font-size: 8px; font-weight: 700; letter-spacing: 0.02em; }
.social-share-bar a { line-height: 0.6; text-decoration: none; }

.social-share-bar img {
  width: 15px;
  height: 15px;
  margin: 0 !important; /* beats article .entry-content img */
  transition: transform 0.2s ease;
}

.social-share-bar img:hover { transform: scale(1.1); }

#copy-link-button { padding: 0; border: none; border-radius: 4px; cursor: pointer; }
#copy-success { color: var(--tcp-accent); font-size: 10px; }


/* -------------------------------------------------------------
   8. CPT OVERRIDES

   Previously inline <style> blocks in single.php.
   Body classes come from WordPress, so no PHP conditionals needed.
   ------------------------------------------------------------- */

/* --- webinar: full-width content, no sidebar --- */
.single-webinar article {
  --tcp-content-width: 97%;
  --tcp-content-border: none;
}
.single-webinar article .entry-navigation { display: none; }
.single-webinar article .entry-content { margin: 0 auto; }

/* --- customer-story: logo + background panel --- */
.single-customer-story article .entry-navigation .post-meta { padding: 0; }

.single-customer-story .post-meta-img {
  padding: 38px 22px;
  border-bottom: 1px solid var(--tcp-hairline);
}
.single-customer-story .post-meta-img picture img { margin: 0 auto; }

.single-customer-story .post-meta-bg { padding: 30px 22px; }
.single-customer-story .post-meta-bg p {
  margin-top: 0;
  color: var(--tcp-body-soft);
  font-size: 12px;
}
.single-customer-story .post-meta-bg p strong {
  color: var(--tcp-ink);
  font-size: 16px;
}
.single-customer-story .post-meta-bg p:last-child { margin-bottom: 0; }


/* -------------------------------------------------------------
   9. RESPONSIVE
   Descending: 1280 → 768 → 600 → landscape.
   ------------------------------------------------------------- */

/* --- Tablet and small desktop --- */
@media only screen and (min-width: 601px) and (max-width: 1280px) {
  /* Written per-column: the original shorthand lost to the higher
     specificity of .col.col-1 / .col.col-2 on one side each. */
  article .entry-header .col-1 { padding: 0 25px 0 20px; }
  article .entry-header .col-2 { padding: 0 20px 0 25px; }
}

/* --- Tablet --- */
@media only screen and (max-width: 768px) {
  article .entry-header { padding: 25px 0; }
  article .entry-content { margin-right: var(--tcp-gutter); }
  article .entry-navigation-items.fixed li { max-width: 160px; }
  .entry-navigation-items.fixed { left: 20px; }
}

/* --- Mobile --- */
@media only screen and (max-width: 600px) {
  article .entry-header {
    flex-direction: column;
    margin: 0;
    padding: 40px 0;
  }
  article .entry-header .col { width: 100%; padding: 0 var(--tcp-gutter); }
  article .entry-header .col-2 { padding-top: 35px; }
  article .entry-header h1 { margin-bottom: 1em; }
  article .entry-header h1.no-thumbnail { margin-bottom: 0; }
  article .entry-header .sup-title { margin-bottom: 0.25em; }
  article .entry-header .author-info { margin: 20px 0 0; }

  article .entry-wrapper { flex-direction: column; padding: 10px 0 40px; }
  article .entry-navigation { display: none; }
  article .entry-content { width: 100%; padding: 0 30px; }

  article .entry-content blockquote { margin: 20px 0; }
  article .entry-content blockquote p { margin: 0; line-height: 32px; }
  article .entry-content p,
  article .entry-content ul li,
  article .entry-content ol li { line-height: 28px; }

  .social-bar { margin-left: 0; }
  .social-share-bar { margin: 0; }

  /* CPT exceptions to the hidden sidebar */
  .single-customer-story article .entry-navigation {
    display: block;
    width: calc(100% - 30px);
    margin: var(--tcp-gutter);
  }

  .single-downloads.has-download-file article .entry-navigation {
    display: block;
    width: 100%;
  }
  .single-downloads.has-download-file article .entry-navigation .post-meta {
    min-height: auto;
    margin-bottom: 0.5em;
  }
}

/* --- Phone and small tablet, landscape --- */
@media only screen and (max-width: 932px) and (orientation: landscape) {
  article .entry-navigation { display: none; }
  article .entry-content { width: 100%; padding: 0 var(--tcp-gutter) !important; }
  article .entry-wrapper { margin: 0; }
}


/* -------------------------------------------------------------
   10. DORMANT

   .entry-meta is display:none, so nothing inside it is ever seen.
   single-article.php still computes a reading time into
   .entry-meta-estimation on every request — that work is thrown
   away. Either drop display:none and style the estimate, or
   remove the calculation from the template.
   ------------------------------------------------------------- */
article .entry-meta {
  display: none;
  justify-content: space-between;
  margin-left: calc(var(--tcp-gutter) * -1);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tcp-hairline);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}
article .entry-meta .entry-meta-date { padding-left: var(--tcp-gutter); }
article .entry-meta + p { margin-top: 0; }

@media only screen and (max-width: 600px) {
  article .entry-meta { margin-left: 0; }
  article .entry-meta + h2 { margin-top: 10px; }
  article .entry-meta .entry-meta-date { padding-left: 0; }
}