/*!
 * WebPanda custom blog template v4 — scoped isolation + brand tokens + page ownership modes
 * + one unified CTA card style (.wpp-cta / --wpp-cta-*).
 * Scoped entirely under `.wp-webpanda.wpp-article` so theme/Gutenberg/Elementor
 * content CSS cannot override internal layout, typography scale, or components.
 * Brand colours/fonts arrive as CSS custom properties on the root wrapper.
 * Keep in sync with webpanda-frontend/src/lib/webpanda-template-css.ts (preview omits 100vw breakout).
 */

/* --- root layout: canvas / full-width ownership (two-column + breakout) ---------------- */
.wp-webpanda.wpp-article[data-wpp-page-ownership="canvas_template"],
.wp-webpanda.wpp-article[data-wpp-page-ownership="full_width_template"]{
  box-sizing:border-box;
  font-family:var(--wpp-body-font, system-ui, -apple-system, sans-serif);
  font-size:var(--wpp-body-font-size, 18px);
  line-height:var(--wpp-body-line-height, 1.67);
  font-weight:var(--wpp-body-font-weight, 500);
  color:var(--wpp-text-color,#121212);
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-inline:max(24px, calc((100vw - 1160px) / 2));
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:48px;
  align-items:start;
}

/* Full-width keeps theme header/footer — offset below sticky Elementor header */
.wp-webpanda.wpp-article[data-wpp-page-ownership="full_width_template"]{
  padding-top:var(--wpp-header-offset, 128px);
}
.wp-webpanda.wpp-article[data-wpp-page-ownership="full_width_template"] .wpp-side{
  top:calc(var(--wpp-header-offset, 128px) + 24px);
}
body.admin-bar .wp-webpanda.wpp-article[data-wpp-page-ownership="full_width_template"]{
  padding-top:calc(var(--wpp-header-offset, 128px) + 32px);
}
body.admin-bar .wp-webpanda.wpp-article[data-wpp-page-ownership="full_width_template"] .wpp-side{
  top:calc(var(--wpp-header-offset, 128px) + 56px);
}

/* --- contained fallback: no breakout, single column, inline hero CTA ------------------- */
.wp-webpanda.wpp-article[data-wpp-page-ownership="contained_fallback"]{
  box-sizing:border-box;
  font-family:var(--wpp-body-font, system-ui, -apple-system, sans-serif);
  font-size:var(--wpp-body-font-size, 18px);
  line-height:var(--wpp-body-line-height, 1.67);
  font-weight:var(--wpp-body-font-weight, 500);
  color:var(--wpp-text-color,#121212);
  max-width:800px;
  margin:0 auto;
  padding:0 24px;
  display:block;
}
.wp-webpanda.wpp-article[data-wpp-page-ownership="contained_fallback"] .wpp-main .wpp-cta{
  margin:24px 0 !important;
}

/* Legacy v2 drafts without ownership attr — keep prior breakout behaviour */
.wp-webpanda.wpp-article:not([data-wpp-page-ownership]){
  box-sizing:border-box;
  font-family:var(--wpp-body-font, system-ui, -apple-system, sans-serif);
  font-size:var(--wpp-body-font-size, 18px);
  line-height:var(--wpp-body-line-height, 1.67);
  font-weight:var(--wpp-body-font-weight, 500);
  color:var(--wpp-text-color,#121212);
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-inline:max(24px, calc((100vw - 1160px) / 2));
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:48px;
  align-items:start;
}
.wp-webpanda.wpp-article *,
.wp-webpanda.wpp-article *::before,
.wp-webpanda.wpp-article *::after{ box-sizing:border-box; }

.wp-webpanda.wpp-article .wpp-main{ min-width:0; }
.wp-webpanda.wpp-article .wpp-side{ position:sticky; top:24px; align-self:start; }

/* --- controlled reset (component-level, not all:initial) ----------------------- */
.wp-webpanda.wpp-article h1,
.wp-webpanda.wpp-article h2,
.wp-webpanda.wpp-article h3,
.wp-webpanda.wpp-article h4,
.wp-webpanda.wpp-article p,
.wp-webpanda.wpp-article ul,
.wp-webpanda.wpp-article ol,
.wp-webpanda.wpp-article li,
.wp-webpanda.wpp-article figure,
.wp-webpanda.wpp-article blockquote{
  margin:0;
  padding:0;
}
.wp-webpanda.wpp-article img{ max-width:100%; height:auto; }
.wp-webpanda.wpp-article figure{ margin:0 0 26px; }
.wp-webpanda.wpp-article button,
.wp-webpanda.wpp-article input,
.wp-webpanda.wpp-article textarea{ font:inherit; }

/* --- typography -------------------------------------------------------------- */
.wp-webpanda.wpp-article h1,
.wp-webpanda.wpp-article h2,
.wp-webpanda.wpp-article h3,
.wp-webpanda.wpp-article h4{
  font-family:var(--wpp-heading-font, var(--wpp-body-font, system-ui, sans-serif));
  color:var(--wpp-heading-color,#121212);
}
/* Heading SIZE, CASE, WEIGHT and SPACING are fixed by the template, not taken from the client site.
   They used to read --wpp-h1/h2/h3-* variables sampled from the site's own post styles, which on a
   builder site can be a 46px hero heading (a 57.5px H1 with a line-height smaller than the text),
   and the H1 was forced to uppercase. The font FAMILY still comes from --wpp-heading-font.
   The .wpp-main step raises specificity and every property is !important, so client theme / builder
   heading rules cannot override them. */
.wp-webpanda.wpp-article .wpp-main h1{
  font-size:clamp(30px, 3.2vw, 44px) !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  margin:0 0 16px !important;
}
.wp-webpanda.wpp-article .wpp-main h2{
  font-size:clamp(24px, 2.4vw, 32px) !important;
  line-height:1.2 !important;
  font-weight:var(--wpp-h2-font-weight, 600) !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  margin:36px 0 12px !important;
}
.wp-webpanda.wpp-article .wpp-main h3{
  font-size:clamp(20px, 1.8vw, 24px) !important;
  line-height:1.25 !important;
  font-weight:var(--wpp-h3-font-weight, 600) !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  margin:26px 0 10px !important;
}
.wp-webpanda.wpp-article p,
.wp-webpanda.wpp-article li{
  font-family:var(--wpp-body-font, system-ui, -apple-system, sans-serif);
  font-size:var(--wpp-body-font-size, 18px);
  line-height:var(--wpp-body-line-height, 1.67);
  font-weight:var(--wpp-body-font-weight, 500);
}
.wp-webpanda.wpp-article p{
  margin:0 0 18px !important;
  color:var(--wpp-text-color,#121212);
}
.wp-webpanda.wpp-article .wpp-main :where(p, li, figcaption, blockquote) a{
  color:var(--wpp-link, var(--wpp-accent, #2563eb)) !important;
  font-weight:inherit;
  text-decoration:none;
}
.wp-webpanda.wpp-article .wpp-main :where(p, li, figcaption, blockquote) a:hover{
  text-decoration:underline;
}
.wp-webpanda.wpp-article strong{ color:var(--wpp-heading-color,#121212); font-weight:700; }
.wp-webpanda.wpp-article ul,
.wp-webpanda.wpp-article ol{
  margin:0 0 20px !important;
  padding-left:24px !important;
  list-style-position:outside !important;
}
.wp-webpanda.wpp-article li{
  margin:0 0 10px !important;
}

/* --- intro lede -------------------------------------------------------------- */
.wp-webpanda.wpp-article .wpp-lede{
  font-style:italic;
  color:var(--wpp-muted-color,#333);
  font-size:var(--wpp-body-font-size, 18px);
  line-height:var(--wpp-body-line-height, 1.67);
  margin:0 0 28px;
}

/* --- featured image ---------------------------------------------------------- */
.wp-webpanda.wpp-article .wpp-featured{ clear:both; margin:0 0 26px; }
.wp-webpanda.wpp-article .wpp-featured img{ display:block; width:100%; height:auto; border-radius:12px; }

/* --- tables ------------------------------------------------------------------ */
.wp-webpanda.wpp-article .wpp-table-wrap{ overflow-x:auto; margin:24px 0; clear:both; -webkit-overflow-scrolling:touch; }
.wp-webpanda.wpp-article table{
  border-collapse:collapse !important;
  width:100%;
  font-size:16px !important;
  line-height:1.5 !important;
}
.wp-webpanda.wpp-article th{
  border:1px solid var(--wpp-border-color,#dcdcdc) !important;
  border-bottom:2px solid var(--wpp-heading-color,#121212) !important;
  padding:11px 13px !important;
  text-align:left;
  font-weight:var(--wpp-h2-font-weight, 700) !important;
  font-family:var(--wpp-heading-font, var(--wpp-body-font, system-ui, sans-serif));
  background:var(--wpp-surface-color,#f6f6f6);
  color:var(--wpp-heading-color,#121212);
}
.wp-webpanda.wpp-article td{
  border:1px solid var(--wpp-border-color,#dcdcdc) !important;
  padding:11px 13px !important;
  vertical-align:top !important;
  color:var(--wpp-text-color,#121212);
}
.wp-webpanda.wpp-article tbody td:first-child{ font-weight:700; }
.wp-webpanda.wpp-article tbody tr:nth-child(odd){ background:var(--wpp-surface-color,#f6f6f6); }

/* --- pull quote -------------------------------------------------------------- */
.wp-webpanda.wpp-article blockquote,
.wp-webpanda.wpp-article .wpp-quote{
  clear:both;
  text-align:center;
  font-style:italic;
  color:var(--wpp-muted-color,#333);
  font-size:21px;
  line-height:32px;
  max-width:640px;
  margin:36px auto;
  padding:0 20px;
  border:0;
  background:none;
}

/* --- CTA cards --------------------------------------------------------------- */
/* ONE style for every CTA card (sidebar + in-article). Colours come from the four
   --wpp-cta-* variables the backend sets on the wrapper from the client's Brand Kit;
   the fallbacks are the no-brand pairing (white card, #121212 text + button, white label).
   The renderer also inlines these values, so a card reads correctly even before this
   stylesheet loads. Left-aligned throughout. */
.wp-webpanda.wpp-article .wpp-cta{ clear:both; background:var(--wpp-cta-bg,#ffffff); color:var(--wpp-cta-text,#121212); border-radius:16px; text-align:left; }
.wp-webpanda.wpp-article .wpp-cta h4{ font-family:var(--wpp-heading-font, var(--wpp-body-font, system-ui, sans-serif)); font-size:20px; font-weight:var(--wpp-h2-font-weight, 800); line-height:1.2; text-transform:none !important; letter-spacing:normal !important; color:var(--wpp-cta-text,#121212); text-align:left; }
.wp-webpanda.wpp-article .wpp-cta p{ margin:0 !important; font-size:16px; line-height:1.55; color:var(--wpp-cta-text,#121212); text-align:left; }
.wp-webpanda.wpp-article .wpp-cta .wpp-cta-btn{ font-family:var(--wpp-heading-font, var(--wpp-body-font, system-ui, sans-serif)); background:var(--wpp-cta-btn-bg,#121212); color:var(--wpp-cta-btn-text,#ffffff) !important; text-decoration:none !important; border:0; border-bottom:0; }
.wp-webpanda.wpp-article .wpp-cta .wpp-cta-btn:hover{ filter:brightness(1.08); text-decoration:none !important; }

.wp-webpanda.wpp-article .wpp-social{ clear:both; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin:28px 0 0; padding:18px 0 0; border-top:1px solid var(--wpp-border-color,#dcdcdc); }
.wp-webpanda.wpp-article .wpp-social-label{ font-family:var(--wpp-heading-font, var(--wpp-body-font, system-ui, sans-serif)); font-size:15px; font-weight:700; color:var(--wpp-heading-color,#121212); }
.wp-webpanda.wpp-article .wpp-social-list{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; margin:0; padding:0; list-style:none; }
.wp-webpanda.wpp-article .wpp-social-item{ margin:0; padding:0; list-style:none; }
.wp-webpanda.wpp-article .wpp-social-link{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:var(--wpp-cta-btn-bg,#121212); color:var(--wpp-cta-btn-text,#ffffff) !important; text-decoration:none !important; font-size:14px; font-weight:700; line-height:1; }
.wp-webpanda.wpp-article .wpp-social-link:hover{ text-decoration:none !important; filter:brightness(1.05); }
.wp-webpanda.wpp-article .wpp-social-link svg{ width:16px; height:16px; flex:0 0 16px; display:block; }

/* --- responsive -------------------------------------------------------------- */
@media (max-width:900px){
  .wp-webpanda.wpp-article{ display:block; }
  .wp-webpanda.wpp-article .wpp-side{ position:static; margin:24px 0; top:auto; }
  .wp-webpanda.wpp-article[data-wpp-page-ownership="full_width_template"]{
    padding-top:var(--wpp-header-offset, 96px);
  }
  body.admin-bar .wp-webpanda.wpp-article[data-wpp-page-ownership="full_width_template"]{
    padding-top:calc(var(--wpp-header-offset, 96px) + 46px);
  }
}
@media (max-width:640px){
  .wp-webpanda.wpp-article{ font-size:17px; }
  .wp-webpanda.wpp-article .wpp-social{ justify-content:center; text-align:center; }
  .wp-webpanda.wpp-article .wpp-social-list{ justify-content:center; width:100%; }
}

/* Hide theme share/tag rows below WebPanda custom posts — social links render in-template */
body.webpanda-custom-template .elementor-widget-share-buttons,
body.webpanda-custom-template .elementor-widget-post-info .elementor-share-btn{
  display:none !important;
}