/*!
 * WebPanda custom blog template v3 — scoped isolation + brand tokens + page ownership modes.
 * 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-mint{
  margin:24px 0;
}

/* 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);
}
.wp-webpanda.wpp-article h1{
  font-size:var(--wpp-h1-font-size, 32px) !important;
  line-height:var(--wpp-h1-line-height, 1.31) !important;
  font-weight:var(--wpp-h1-font-weight, 700) !important;
  text-transform:uppercase;
  margin:0 0 16px !important;
}
.wp-webpanda.wpp-article h2{
  font-size:var(--wpp-h2-font-size, 24px) !important;
  line-height:var(--wpp-h2-line-height, 1.42) !important;
  font-weight:var(--wpp-h2-font-weight, 600) !important;
  margin:36px 0 12px !important;
}
.wp-webpanda.wpp-article h3{
  font-size:var(--wpp-h3-font-size, 19px) !important;
  line-height:var(--wpp-h3-line-height, 1.47) !important;
  font-weight:var(--wpp-h3-font-weight, 600) !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 blocks -------------------------------------------------------------- */
.wp-webpanda.wpp-article .wpp-cta-mint{ margin:0; background:var(--wpp-hero-bg,#A8EEC1); color:var(--wpp-hero-fg,#121212); border-radius:20px; padding:32px 24px; text-align:center; }
.wp-webpanda.wpp-article .wpp-cta-mint h4{ font-family:var(--wpp-heading-font, var(--wpp-body-font, system-ui, sans-serif)); margin:0 0 12px; font-size:20px; font-weight:var(--wpp-h2-font-weight, 800); text-transform:uppercase; line-height:1.2; color:var(--wpp-hero-fg,#121212); }
.wp-webpanda.wpp-article .wpp-cta-mint p{ margin:0 0 18px; font-size:16px; line-height:1.55; color:var(--wpp-hero-fg,#121212); }
.wp-webpanda.wpp-article .wpp-cta-mint a{ font-family:var(--wpp-heading-font, var(--wpp-body-font, system-ui, sans-serif)); display:inline-block; font-weight:700; color:var(--wpp-hero-fg,#121212); text-decoration:none; border-bottom:2px solid var(--wpp-hero-fg,#121212); padding-bottom:2px; }

.wp-webpanda.wpp-article .wpp-cta-orange{ clear:both; background:var(--wpp-band-bg,#FF7F4D); border-radius:10px; padding:22px 24px; margin:28px 0; color:var(--wpp-band-fg,#fff); }
.wp-webpanda.wpp-article .wpp-cta-orange h4{ font-family:var(--wpp-heading-font, var(--wpp-body-font, system-ui, sans-serif)); margin:0 0 10px; font-size:19px; font-weight:800; text-transform:uppercase; color:var(--wpp-band-fg,#fff); }
.wp-webpanda.wpp-article .wpp-cta-orange span{ font-size:16px; line-height:26px; color:var(--wpp-band-fg,#fff); }
.wp-webpanda.wpp-article .wpp-cta-orange a{ color:var(--wpp-band-fg,#fff); font-weight:700; text-decoration:none; border-bottom:2px solid rgba(255,255,255,.75); }

.wp-webpanda.wpp-article .wpp-cta-sub{ clear:both; background:var(--wpp-sub-bg,#91E2B2); border-radius:10px; padding:22px 24px; margin:28px 0; color:var(--wpp-sub-fg,#121212); }
.wp-webpanda.wpp-article .wpp-cta-sub h4{ font-family:var(--wpp-heading-font, var(--wpp-body-font, system-ui, sans-serif)); margin:0 0 10px; font-size:19px; font-weight:800; text-transform:uppercase; color:var(--wpp-sub-fg,#121212); }
.wp-webpanda.wpp-article .wpp-cta-sub span{ font-size:16px; line-height:26px; color:var(--wpp-sub-fg,#121212); }
.wp-webpanda.wpp-article .wpp-cta-sub a{ color:var(--wpp-sub-fg,#121212); font-weight:700; text-decoration:none; border-bottom:2px solid var(--wpp-sub-fg,#121212); }

.wp-webpanda.wpp-article .wpp-cta-final{ clear:both; background:var(--wpp-final-bg,#FEE0E3); color:var(--wpp-final-fg,#121212); border-radius:10px; text-align:center; padding:48px 28px; margin:36px 0 0; }
.wp-webpanda.wpp-article .wpp-cta-final h3{ font-family:var(--wpp-heading-font, var(--wpp-body-font, system-ui, sans-serif)); margin:0 0 14px; font-size:30px; font-weight:900; text-transform:uppercase; color:var(--wpp-final-fg,#121212); }
.wp-webpanda.wpp-article .wpp-cta-final p{ max-width:540px; margin:0 auto 20px; color:var(--wpp-final-fg,#333); font-size:17px; line-height:28px; }
.wp-webpanda.wpp-article .wpp-final-actions{ display:flex; justify-content:center; align-items:center; width:100%; margin:0; }
.wp-webpanda.wpp-article .wpp-cta-final a{ font-family:var(--wpp-heading-font, var(--wpp-body-font, system-ui, sans-serif)); display:inline-block !important; background:var(--wpp-btn-bg,#121212); color:var(--wpp-btn-fg,#fff) !important; text-decoration:none !important; text-align:center !important; padding:13px 28px; font-weight:700; border-radius:6px; border:0; }

.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-btn-bg,#121212); color:var(--wpp-btn-fg,#fff) !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 h1{ font-size:calc(var(--wpp-h1-font-size, 32px) * 0.84) !important; }
  .wp-webpanda.wpp-article h2{ font-size:calc(var(--wpp-h2-font-size, 24px) * 0.92) !important; }
  .wp-webpanda.wpp-article .wpp-cta-final{ padding:32px 20px; }
  .wp-webpanda.wpp-article .wpp-cta-final h3{ font-size:25px; }
  .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;
}